/* ═══════════════════════════════════════════════════════════════════
   زاد بيان — الحصة المباشرة
   منقول من docs/prototypes/live-class.html

   لماذا ملف عام لا CSS isolation؟
   عناصر <video> يحقنها livekit-client.js خارج شجرة Blazor، و ::deep
   لا يعمل إلا في ملف .razor.css معزول. فالقاعدة التي تستهدف عنصراً
   أنشأه JS تُهمَل بصمت في الملف المعزول — وهذا العطل وقع فعلاً من قبل
   فظهر الفيديو بأبعاده الأصلية وطرد شريط الأدوات خارج الشاشة.

   كل الأسماء هنا مسبوقة بـ lc- لتُعزل عن باقي المنصّة.
   ═══════════════════════════════════════════════════════════════════ */

.lc-root {
    /* ── هوية المنصّة، منقولة من :root في styles.css ── */
    --lc-primary: #18A171;
    --lc-primary-dark: #127452; /* الأخضر المقروء فوق أرضية خضراء فاتحة */
    --lc-primary-light: #E7F8F2;
    --lc-secondary: #43B78F;
    --lc-on-primary: #FFFFFF;
    /* تعبئة الأزرار أغمق من لون الهوية: الأبيض فوق #18A171 يبلغ 3.3:1 فقط */
    --lc-btn: #12805B;
    --lc-btn-hover: #0E6547;
    /* ── أسطح فاتحة ── */
    --lc-wash-a: #F4FBF8;
    --lc-wash-mid: #FFFFFF;
    --lc-wash-b: #EAF6F1;
    --lc-card: #FFFFFF;
    --lc-card-2: #F8FCFB;
    --lc-card-3: #EEF6F2;
    --lc-line: #DFEDE7;
    --lc-line-2: #CBE0D7;
    /* ── نصّ: رمادي مائل للأخضر، مُختار لا موروث ── */
    --lc-text: #16241E;
    --lc-text-2: #54685F;
    --lc-text-3: #5F736B;
    /* ── المسرح الداكن ── */
    --lc-stage: #0F2A21;
    --lc-stage-3: #1F4536;
    --lc-stage-text: #EAF5F0;
    --lc-stage-text-2: #9BBBAD;
    /* ── دلالات، منفصلة عن لون الهوية ── */
    --lc-warn: #8F5E06;
    --lc-warn-bg: #FDF4E3;
    --lc-warn-line: #F0DCB4;
    --lc-warn-solid: #E2A542;
    --lc-stop: #D64B43;
    --lc-stop-bg: #FDEEED;
    --lc-stop-line: #F6CFCC;
    --lc-stop-text: #B5352E;
    --lc-stop-solid: #C4352D;
    /* التلميح يعكس الأرضية، فلا يصلح تثبيته على لون واحد */
    --lc-tip-bg: #16241E;
    --lc-tip-fg: #FFFFFF;
    /* حرف الاسم في القوائم — أربع قيم لأن الوضعين يعكسان العلاقة */
    --lc-mono-s: 46%;
    --lc-mono-l: 92%;
    --lc-mono-fs: 34%;
    --lc-mono-fl: 28%;
    --lc-shadow: 0 4px 6px -1px rgba(16,58,44,.08), 0 2px 4px -2px rgba(16,58,44,.05);
    --lc-shadow-lg: 0 10px 24px -6px rgba(16,58,44,.14), 0 4px 8px -4px rgba(16,58,44,.06);
    --lc-shadow-pill: 0 6px 20px -4px rgba(16,58,44,.22), 0 2px 6px -2px rgba(16,58,44,.12);
    --lc-r-chrome: 9px;
    --lc-r-card: 16px;
    --lc-r-tile: 13px;
    --lc-r-pill: 999px;
    --lc-data: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
    --lc-dock-h: 70px;
    --lc-rail-w: 326px;
    color: var(--lc-text);
}

/* ─────────────── الوضع الداكن ───────────────
   ⭐ لا يُفعَّل بتفضيل النظام — بالاختيار الصريح وحده.

   كان هنا @media (prefers-color-scheme: dark) يقلب الحصص إلى لوحة داكنة
   بمجرّد أن يكون نظام المستخدم داكناً. والمشكلة أن بقيّة المنصّة فاتحة فقط:
   القياس أعطى صفر قاعدة prefers-color-scheme في styles.css وفي
   zadbyan-overrides.css، ولا موضع في الكود كلّه يضبط data-theme.

   فكانت النتيجة على جهاز نظامه داكن: بطاقات الحصص سوداء داخل صفحة بيضاء،
   وعنوان «الحصص المباشرة» يكاد لا يُقرأ — وهو ما رآه المستخدم بعينه.
   العطل لا يظهر لمن نظامه فاتح إطلاقاً، ولذلك مرّ صامتاً.

   واللوحة الداكنة لم تُحذف: تبقى تحت :root[data-theme="dark"] أدناه، فإن
   أُضيف للمنصّة وضع داكن يوماً تبعتْه الحصص بلا إعادة كتابة. */
:root[data-theme="dark"] .lc-root {
    --lc-primary: #2FBE8B;
    --lc-primary-dark: #7BE0B4;
    --lc-primary-light: #12332A;
    --lc-secondary: #3FCF9B;
    --lc-on-primary: #062319;
    --lc-btn: #2FBE8B;
    --lc-btn-hover: #4FCF9E;
    --lc-wash-a: #0A1512;
    --lc-wash-mid: #0F1F1A;
    --lc-wash-b: #0D1E19;
    --lc-card: #132420;
    --lc-card-2: #0F1E19;
    --lc-card-3: #1B2F29;
    --lc-line: #233C34;
    --lc-line-2: #2E4C42;
    --lc-text: #E7F1EC;
    --lc-text-2: #A0B6AD;
    --lc-text-3: #8AA69D;
    --lc-stage: #061310;
    --lc-stage-3: #1B3C30;
    --lc-warn: #EFB963;
    --lc-warn-bg: #33280F;
    --lc-warn-line: #54411A;
    --lc-warn-solid: #E2A542;
    --lc-stop: #E4635B;
    --lc-stop-bg: #3A1B19;
    --lc-stop-line: #5A2925;
    --lc-stop-text: #F08D86;
    --lc-stop-solid: #C7413A;
    --lc-tip-bg: #E7F1EC;
    --lc-tip-fg: #0F1E19;
    --lc-mono-s: 22%;
    --lc-mono-l: 24%;
    --lc-mono-fs: 42%;
    --lc-mono-fl: 76%;
    --lc-shadow: 0 4px 10px -2px rgba(0,0,0,.5);
    --lc-shadow-lg: 0 14px 34px -10px rgba(0,0,0,.66), 0 4px 10px -4px rgba(0,0,0,.4);
    --lc-shadow-pill: 0 8px 26px -6px rgba(0,0,0,.7), 0 2px 8px -2px rgba(0,0,0,.45);
}

/* ═══════════════════════════════════════════════════════════════════
   عناصر مشتركة
   ═══════════════════════════════════════════════════════════════════ */

.lc-root *,
.lc-root *::before,
.lc-root *::after {
    box-sizing: border-box;
}

/* ⭐ الـ reset داخل :where() فأسبقيته صفر.
   بدونها كان `.lc-root button` (0,1,1) يغلب `.lc-btn` (0,1,0) فيمحو
   `border: 1px solid` من كل الأزرار — فتظهر «العودة إلى حصصي» نصّاً عارياً
   بلا إطار ولا خلفية. قيست الحالة في المتصفّح: borderWidth = 0px. */
:where(.lc-root) :where(button) {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

:where(.lc-root) :where(ul) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* حلقة التركيز للعناصر التفاعلية وحدها.
   بلا التقييد كانت تلتقط العناوين: Blazor يضع tabindex="-1" على العنوان
   ويُركّزه بعد التنقّل (وهو سلوك وصولية صحيح)، فيظهر إطارٌ أخضر حول
   «الحصص المباشرة» بلا سبب مفهوم للناظر. قيست الحالة: outline 1.6px. */
.lc-root :is(button, a, input, select, textarea, [role="button"]):focus-visible {
    outline: 2px solid var(--lc-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.lc-num {
    font-family: var(--lc-data);
    font-variant-numeric: tabular-nums;
}

/* نصّ مختلط عربي+أرقام: خطّ الواجهة مع أرقام جدوليّة — خطّ الـ mono بلا عربية فيتفكّك */
.lc-mixnum {
    font-variant-numeric: tabular-nums;
}

/* ── الأزرار ── */

.lc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 19px;
    border-radius: var(--lc-r-pill);
    font-size: 14px;
    border: 1px solid transparent;
    transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}

.lc-btn-primary {
    background: var(--lc-btn);
    color: var(--lc-on-primary);
    font-weight: 600;
    box-shadow: var(--lc-shadow);
}

    .lc-btn-primary:hover {
        background: var(--lc-btn-hover);
        color: var(--lc-on-primary);
    }

.lc-btn-quiet {
    border-color: var(--lc-line-2);
    color: var(--lc-text);
    background: var(--lc-card);
}

    .lc-btn-quiet:hover {
        background: var(--lc-primary-light);
        border-color: var(--lc-secondary);
        color: var(--lc-primary-dark);
    }

.lc-btn-danger {
    background: var(--lc-stop-solid);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--lc-shadow);
}

    .lc-btn-danger:hover {
        filter: brightness(.93);
        color: #fff;
    }

.lc-btn-sm {
    padding: 7px 14px;
    font-size: 12.5px;
}

.lc-btn:disabled,
.lc-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── حرف الاسم ── */

.lc-mono {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--lc-r-pill);
    font-size: 13px;
    font-weight: 600;
    background: hsl(var(--lc-mh,158) var(--lc-mono-s) var(--lc-mono-l));
    color: hsl(var(--lc-mh,158) var(--lc-mono-fs) var(--lc-mono-fl));
}

.lc-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lc-primary-dark);
}

    .lc-eyebrow::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--lc-line);
    }

.lc-display {
    font-weight: 300;
    font-size: 27px;
    line-height: 1.35;
    letter-spacing: -.015em;
    text-wrap: balance;
    color: var(--lc-text);
    margin: 0;
}

.lc-hint {
    font-size: 12.5px;
    color: var(--lc-text-3);
    line-height: 1.7;
    margin: 0;
}

.lc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.lc-dot-sep {
    color: var(--lc-text-3);
}

/* ═══════════════════════════════════════════════════════════════════
   الشاشات المتوسّطة: اللوبي والحواجز
   ═══════════════════════════════════════════════════════════════════ */

.lc-center {
    min-height: calc(100dvh - 120px);
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(70ch 46ch at 76% -14%, rgba(24,161,113,.13) 0%, transparent 64%), radial-gradient(60ch 40ch at 10% 110%, rgba(67,183,143,.12) 0%, transparent 62%);
}

.lc-panel {
    width: min(560px, 100%);
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-r-card);
    box-shadow: var(--lc-shadow-lg);
    overflow: hidden;
}

.lc-panel-wide {
    width: min(940px, 100%);
}

/* ── اللوبي ── */

.lc-lobby {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 880px) {
    .lc-lobby {
        grid-template-columns: 1.15fr 1fr;
    }
}

/* لوح المعاينة داكن: الفيديو لا يُقرأ على أبيض */
.lc-lobby-preview {
    position: relative;
    background: var(--lc-stage);
    aspect-ratio: 16/10;
    min-height: 200px;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin: 14px;
    border-radius: var(--lc-r-tile);
}

@media (min-width: 880px) {
    .lc-lobby-preview {
        aspect-ratio: auto;
        margin: 14px 0 14px 14px;
    }
}

.lc-lobby-preview video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* مرآة — المعاينة الذاتية تُقرأ معكوسة */
}

.lc-lobby-off {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--lc-stage-text-2);
    display: grid;
    gap: 11px;
    justify-items: center;
    padding: 20px;
    font-size: 13px;
}

    .lc-lobby-off .lc-mono {
        width: 66px;
        height: 66px;
        background: var(--lc-stage-3);
        font-size: 23px;
        font-weight: 300;
        color: var(--lc-stage-text);
    }

.lc-lobby-preview.lc-is-live .lc-lobby-off {
    display: none;
}

.lc-lobby-preview-bar {
    position: absolute;
    inset-inline: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-lobby-preview-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--lc-stage-text);
    background: rgba(8,26,20,.72);
    border-radius: var(--lc-r-pill);
    padding: 6px 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-lobby-body {
    padding: 22px;
    display: grid;
    gap: 18px;
    align-content: start;
}

.lc-lobby-id {
    display: grid;
    gap: 7px;
}

.lc-lobby-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 13px;
    color: var(--lc-text-2);
}

    .lc-lobby-meta b {
        font-weight: 600;
        color: var(--lc-text);
    }

/* ── اختيار الأجهزة ── */

.lc-devices {
    display: grid;
    gap: 12px;
}

.lc-device {
    display: grid;
    gap: 5px;
}

.lc-device-l {
    font-size: 12px;
    color: var(--lc-text-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.lc-device-row {
    display: flex;
    gap: 7px;
    align-items: center;
}

    .lc-device-row select {
        flex: 1;
        min-width: 0;
        background: var(--lc-card-2);
        border: 1px solid var(--lc-line-2);
        border-radius: var(--lc-r-chrome);
        padding: 9px 11px;
        font-size: 13px;
        color: var(--lc-text);
    }

.lc-device-tgl {
    flex: none;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    background: var(--lc-primary-light);
    border: 1px solid var(--lc-secondary);
    border-radius: var(--lc-r-chrome);
    color: var(--lc-primary-dark);
}

    .lc-device-tgl[aria-pressed="false"] {
        color: var(--lc-stop);
        border-color: var(--lc-stop-line);
        background: var(--lc-stop-bg);
    }

.lc-meter {
    height: 6px;
    border-radius: var(--lc-r-pill);
    background: var(--lc-card-3);
    overflow: hidden;
    margin-top: 4px;
}

    .lc-meter i {
        display: block;
        height: 100%;
        width: 0%;
        border-radius: var(--lc-r-pill);
        background: linear-gradient(90deg, var(--lc-primary), var(--lc-secondary));
        transition: width .08s linear;
    }

/* ── الحواجز ── */

.lc-gate {
    padding: 34px 30px;
    display: grid;
    gap: 13px;
    justify-items: center;
    text-align: center;
}

.lc-gate-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--lc-r-pill);
    display: grid;
    place-items: center;
    background: var(--lc-primary-light);
    color: var(--lc-primary-dark);
}

    .lc-gate-icon.lc-is-stop {
        background: var(--lc-stop-bg);
        color: var(--lc-stop-text);
    }

    .lc-gate-icon.lc-is-warn {
        background: var(--lc-warn-bg);
        color: var(--lc-warn);
    }

.lc-gate-reason {
    font-size: 16px;
    font-weight: 600;
    color: var(--lc-text);
    margin: 0;
}

.lc-gate-why {
    font-size: 13.5px;
    color: var(--lc-text-2);
    line-height: 1.75;
    max-width: 46ch;
    margin: 0;
}

.lc-gate-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    border-radius: var(--lc-r-chrome);
    background: var(--lc-card-2);
    border: 1px solid var(--lc-line);
    font-size: 12.5px;
    color: var(--lc-text-2);
}

/* ═══════════════════════════════════════════════════════════════════
   الغرفة
   ═══════════════════════════════════════════════════════════════════ */

/* ⭐ الغرفة تملأ النافذة كاملةً: position:fixed لا height:100dvh.

   لماذا؟ الغرفة تُرسَم داخل تخطيط المنصّة، فوقها شريط تنقّل. و height:100dvh
   يعني «طول النافذة» مضافاً إلى إزاحة الشريط، فينزل أسفل الغرفة تحت الحافّة
   ويسقط شريط الأدوات معه. قيست الحالة: الغرفة تبدأ عند y=72 وطولها 682،
   فوقع أسفل الشريط عند 730 بينما النافذة 682 — أي 48px خارج الشاشة.
   وهو العطل نفسه الذي أُصلح سابقاً في التصميم القديم وعاد بصيغة أخرى.

   و fixed آمن هنا: تحقّقنا بالقياس أن لا جدّ يحمل transform أو filter أو
   backdrop-filter يجعله حاوياً للعناصر الثابتة — المستطيل الناتج 1536×682
   يطابق النافذة تماماً، و elementFromPoint على مركز الشريط يُرجع الشريط نفسه.

   والوضع ملء الشاشة مقصود أيضاً: الحصة مهمّة مركّزة، والخروج منها بزرّ
   «مغادرة» أو «أنهِ الحصة» وكلاهما يسأل تأكيداً. */
.lc-room {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: grid;
    grid-template-areas: "head head" "rail stage";
    grid-template-columns: var(--lc-rail-w) minmax(0,1fr);
    grid-template-rows: auto minmax(0,1fr);
    gap: 12px;
    padding: 12px;
    /* ⭐ لون صلب تحت التدرّج.
       الغرفة position:fixed فوق صفحة المنصّة، والتدرّج وحده شفّاف — فكان
       شعار المنصّة وشريط تنقّلها يظهران من خلف الفجوات بين البطاقات.
       قيس: backgroundColor = rgba(0,0,0,0). ظهر جليّاً على الجوّال حيث
       يعلو الشريط، وخفي على سطح المكتب لأن خلفية الصفحة تُشبه اللون. */
    background: radial-gradient(60ch 40ch at 80% -10%, rgba(24,161,113,.10) 0%, transparent 60%), linear-gradient(150deg, var(--lc-wash-a) 0%, var(--lc-wash-mid) 46%, var(--lc-wash-b) 100%);
}

@media (max-width: 900px) {
    .lc-room {
        grid-template-areas: "head" "stage" "rail";
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto minmax(0,1fr) auto;
        gap: 9px;
        padding: 9px;
    }

    .lc-head-title {
        white-space: normal;
    }
}

/* ── الشريط العلوي ── */

.lc-head {
    grid-area: head;
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-r-card);
    box-shadow: var(--lc-shadow);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    flex-wrap: wrap;
}

.lc-head-id {
    flex: 1;
    min-width: 180px;
    display: grid;
    gap: 2px;
}

.lc-head-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.lc-head-sub {
    font-size: 12.5px;
    color: var(--lc-text-2);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 9px;
    align-items: center;
}

.lc-livetag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--lc-stop-text);
    background: var(--lc-stop-bg);
    padding: 5px 11px;
    border-radius: var(--lc-r-pill);
}

    .lc-livetag i {
        width: 6px;
        height: 6px;
        border-radius: var(--lc-r-pill);
        background: var(--lc-stop);
        animation: lc-pulse 1.6s infinite;
    }

@keyframes lc-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

/* شارة التسجيل — الطالب يجب أن يعرف أنه يُسجَّل */
.lc-rectag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--lc-stop-text);
    background: var(--lc-stop-bg);
    border: 1px solid var(--lc-stop-line);
    padding: 4px 11px;
    border-radius: var(--lc-r-pill);
}

.lc-head-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}

.lc-stat {
    display: grid;
    gap: 1px;
    text-align: start;
}

.lc-stat-k {
    font-size: 10.5px;
    color: var(--lc-text-3);
}

.lc-stat-v {
    font-family: var(--lc-data);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--lc-text);
}

.lc-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

    .lc-bars i {
        width: 3px;
        border-radius: 1px;
        background: var(--lc-line-2);
    }

        .lc-bars i:nth-child(1) {
            height: 5px;
        }

        .lc-bars i:nth-child(2) {
            height: 8px;
        }

        .lc-bars i:nth-child(3) {
            height: 11px;
        }

        .lc-bars i:nth-child(4) {
            height: 14px;
        }

    .lc-bars.lc-q-good i:nth-child(-n+4) {
        background: var(--lc-primary);
    }

    .lc-bars.lc-q-weak i:nth-child(-n+2) {
        background: var(--lc-warn-solid);
    }

    .lc-bars.lc-q-bad i:nth-child(-n+1) {
        background: var(--lc-stop);
    }

.lc-head-actions {
    display: flex;
    gap: 8px;
    flex: none;
}

/* ── العمود الجانبي ── */

.lc-rail {
    grid-area: rail;
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-r-card);
    box-shadow: var(--lc-shadow);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   الهاتف: اللوح درجٌ سفليّ لا شريطٌ دائم

   ⭐ القياس الذي دعا إليه — على 360×740:
       بلاطة الصدر   314×150   (خُمس الشاشة لوجه المدرّب)
       اللوح الجانبي 342×252   (ثلث الشاشة لقائمة لا يُنظر إليها أثناء الشرح)

   الحصة مشاهدةٌ أولاً. فصار اللوح يُفتح بالطلب من زرّ الدردشة أو المشاركين،
   ويُغلق بالزرّ نفسه أو بالنقر خارجه — والمسرح يأخذ ما تبقّى كاملاً.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    /* المسرح وحده في الشبكة: اللوح خرج من التدفّق إلى طبقة فوقه */
    .lc-room {
        grid-template-areas: "head" "stage";
        grid-template-rows: auto minmax(0,1fr);
    }

    .lc-rail {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1045; /* فوق .lc-room (1040) */
        max-height: 68dvh;
        border-radius: var(--lc-r-card) var(--lc-r-card) 0 0;
        box-shadow: var(--lc-shadow-lg);
        transform: translateY(101%); /* 101% تضمن اختفاء الظلّ أيضاً */
        transition: transform .18s ease-out;
        /* حافّة الأمان في هواتف الحافّة المنحنية */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .lc-room[data-panel-open="true"] .lc-rail {
        transform: none;
    }

    /* مقبض يدلّ على أنه درج يُسحب — بلا رمز عربي داخل CSS */
    .lc-rail::before {
        content: "";
        flex: none;
        width: 42px;
        height: 4px;
        margin: 8px auto 2px;
        border-radius: var(--lc-r-pill);
        background: var(--lc-line-2);
    }

    /* خلفية الإغلاق بالنقر خارج الدرج.
       ⭐ عنصر حقيقي لا ::after: العنصر الزائف لا يستقبل معالج نقر من Blazor،
       فيبقى الدرج مفتوحاً بلا مخرج إلا الزرّ نفسه.
       و position: fixed هنا آمن: تحقّقنا أن .lc-room لا يحمل transform ولا
       filter ولا backdrop-filter، فلا يصير حاوياً للثابت — وإلا اقتصر
       المستطيل على صندوقه ولم تصل نقرة المستخدم إليه (عطلٌ وقع من قبل). */
    .lc-rail-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1044;
        background: rgba(6,19,16,.5);
        border: 0;
    }
}

/* على الشاشة الواسعة اللوح عمودٌ ثابت، فلا خلفية ولا درج */
@media (min-width: 901px) {
    .lc-rail-backdrop {
        display: none;
    }
}

/* ── التكبير: زرّ على البلاطة ── */

.lc-tile-zoom {
    position: absolute;
    top: 7px;
    inset-inline-end: 7px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--lc-r-pill);
    background: rgba(0,0,0,.42);
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transition: opacity .14s, background .14s;
}

.lc-tile:hover .lc-tile-zoom,
.lc-tile-zoom:focus-visible,
.lc-tile-zoom[aria-pressed="true"] {
    opacity: 1;
}

    .lc-tile-zoom:hover {
        background: rgba(0,0,0,.62);
    }

/* ⭐ على الأجهزة اللمسية لا وجود لـ hover، فالزرّ المخفيّ حتى التمرير غير
   موجود عملياً. يبقى ظاهراً دائماً — وهذه الشاشات هي أحوج ما يكون للتكبير. */
@media (hover: none) {
    .lc-tile-zoom {
        opacity: 1;
        width: 34px;
        height: 34px;
    }
}

.lc-tile.lc-is-pinned {
    outline: 2px solid var(--lc-primary);
    outline-offset: -2px;
}

.lc-rail-sec {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.lc-rail-h {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lc-text-2);
    flex: none;
}

    .lc-rail-h::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--lc-line);
    }

    .lc-rail-h b {
        font-weight: 600;
        color: var(--lc-primary);
    }

.lc-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 8px;
    padding: 7px 11px;
    border-radius: var(--lc-r-chrome);
    background: var(--lc-card-2);
    border: 1px solid var(--lc-line-2);
    color: var(--lc-text-3);
    flex: none;
}

    .lc-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: none;
        outline: none;
        font-size: 13px;
        color: var(--lc-text);
    }

/* ── طابور الدور: الفكرة الجوهرية في التصميم ──
   رفع اليد وحده أيقونةٌ بجانب الاسم، فلا يعرف المدرّب من سبق ولا الطالب متى
   دوره. الطابور المرقّم بزمن انتظار يحوّل ذلك إلى قرار واضح. */

.lc-queue {
    padding: 0 12px 12px;
    display: grid;
    gap: 6px;
    flex: none;
}

.lc-qrow {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--lc-r-chrome);
    background: var(--lc-card-2);
    border: 1px solid var(--lc-line);
}

    /* التالي في الدور مميّز: المدرّب ينظر إليه وحده */
    .lc-qrow.lc-is-next {
        background: var(--lc-warn-bg);
        border-color: var(--lc-warn-line);
    }

.lc-qrow-n {
    font-family: var(--lc-data);
    font-size: 12px;
    color: var(--lc-text-3);
    width: 18px;
    text-align: center;
}

.lc-qrow.lc-is-next .lc-qrow-n {
    color: var(--lc-warn);
}

.lc-qrow-b {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.lc-qrow-name {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-qrow-wait {
    font-size: 11px;
    color: var(--lc-text-3);
    font-variant-numeric: tabular-nums;
}

.lc-qrow-act {
    display: flex;
    gap: 5px;
    flex: none;
}

.lc-qbtn {
    padding: 6px 11px;
    border-radius: var(--lc-r-pill);
    font-size: 11.5px;
    border: 1px solid var(--lc-line-2);
    color: var(--lc-text-2);
    white-space: nowrap;
    background: var(--lc-card);
}

    .lc-qbtn:hover {
        color: var(--lc-text);
        border-color: var(--lc-text-3);
    }

.lc-qbtn-go {
    background: var(--lc-warn-solid);
    border-color: var(--lc-warn-solid);
    color: #3A2705;
    font-weight: 600;
}

    .lc-qbtn-go:hover {
        background: #D0940F;
        color: #fff;
    }

.lc-queue-empty {
    padding: 15px 12px;
    font-size: 12.5px;
    color: var(--lc-text-3);
    border: 1px dashed var(--lc-line-2);
    border-radius: var(--lc-r-chrome);
    text-align: center;
}

/* ── الدردشة ──
   تشغل مكان قائمة المشاركين نفسه فلا تضيق شاشة الفيديو */

.lc-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.lc-chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 4px 16px 12px;
    display: grid;
    gap: 14px;
    align-content: start;
}

.lc-msg {
    display: grid;
    gap: 3px;
}

.lc-msg-h {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 12px;
}

    .lc-msg-h b {
        font-weight: 600;
        color: var(--lc-text);
    }

    .lc-msg-h time {
        font-family: var(--lc-data);
        font-size: 10px;
        color: var(--lc-text-3);
    }

.lc-msg-t {
    font-size: 13.5px;
    color: var(--lc-text-2);
    line-height: 1.65;
}

/* رسالة المدرّب مميّزة: كلامه في الحصة ليس كأيّ كلام */
.lc-msg.lc-is-host .lc-msg-h b {
    color: var(--lc-primary-dark);
}

.lc-msg.lc-is-host .lc-msg-t {
    background: var(--lc-primary-light);
    border-radius: var(--lc-r-chrome);
    padding: 9px 12px;
    color: var(--lc-text);
}

.lc-chat-empty {
    padding: 20px 12px;
    font-size: 12.5px;
    color: var(--lc-text-3);
    text-align: center;
}

.lc-chat-in {
    flex: none;
    margin: 0 12px 12px;
    display: flex;
    gap: 7px;
    align-items: center;
    background: var(--lc-card-2);
    border: 1px solid var(--lc-line-2);
    border-radius: var(--lc-r-chrome);
    padding: 6px;
    padding-inline-start: 11px;
}

    .lc-chat-in input {
        flex: 1;
        min-width: 0;
        background: none;
        border: 0;
        outline: 0;
        font-size: 13.5px;
        color: var(--lc-text);
    }

.lc-chat-send {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: var(--lc-r-chrome);
    background: var(--lc-btn);
    color: var(--lc-on-primary);
}

    .lc-chat-send:hover {
        background: var(--lc-btn-hover);
    }

/* تبديل اللوح: الدردشة والمشاركون يتبادلان المكان نفسه */
.lc-rail[data-panel="people"] .lc-chat {
    display: none;
}

.lc-rail[data-panel="chat"] .lc-roster {
    display: none;
}

/* ── قائمة المشاركين ── */

.lc-people {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 10px;
}

.lc-prow {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--lc-r-chrome);
}

    .lc-prow:hover {
        background: var(--lc-card-2);
    }

    .lc-prow.lc-is-speaking {
        background: var(--lc-primary-light);
    }

.lc-prow-b {
    min-width: 0;
}

.lc-prow-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    min-width: 0;
}

    .lc-prow-name > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.lc-tag {
    flex: none;
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--lc-r-pill);
    background: var(--lc-card-3);
    color: var(--lc-text-2);
}

.lc-tag-you {
    background: var(--lc-primary-light);
    color: var(--lc-primary-dark);
}

/* المدرّب بلون التحذير لا الهوية: لون الهوية مأخوذ لشارة «أنت»،
   والتمييز بينهما بالعين أهمّ من جمال اللون */
.lc-tag-host {
    background: var(--lc-warn-bg);
    color: var(--lc-warn);
}

.lc-tag-turn {
    background: var(--lc-warn-solid);
    color: #3A2705;
}

.lc-prow-state {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lc-text-3);
    flex: none;
}

    .lc-prow-state .lc-on {
        color: var(--lc-primary-dark);
    }

    .lc-prow-state .lc-warn {
        color: var(--lc-warn-solid);
    }

/* أزرار الإشراف ظاهرة دائماً — إخفاؤها حتى التمرير يجعلها غير قابلة للاكتشاف،
   ولا تعمل بالمسّ على الجوّال إطلاقاً */
.lc-prow-mod {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: none;
}

.lc-mbtn {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: var(--lc-r-chrome);
    border: 1px solid var(--lc-line-2);
    background: var(--lc-card);
}

.lc-mbtn-mute {
    color: var(--lc-stop-text);
}

    .lc-mbtn-mute:hover {
        background: var(--lc-stop-bg);
        border-color: var(--lc-stop-line);
    }

.lc-mbtn-kick {
    color: var(--lc-text-3);
}

    .lc-mbtn-kick:hover {
        background: var(--lc-card-3);
        color: var(--lc-text);
    }

.lc-mbtn:disabled {
    opacity: .4;
    cursor: default;
}

/* ── المسرح: اللوح الداكن الوحيد ── */

.lc-stage {
    grid-area: stage;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--lc-dock-h) + 22px);
    border-radius: var(--lc-r-card);
    overflow: hidden;
    box-shadow: var(--lc-shadow);
    background: radial-gradient(60ch 34ch at 50% 6%, rgba(24,161,113,.16) 0%, transparent 62%), var(--lc-stage);
}

.lc-banner {
    flex: none;
    margin: 12px 14px 0;
    padding: 10px 14px;
    border-radius: var(--lc-r-chrome);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    background: rgba(226,165,66,.16);
    color: #F3C579;
    border: 1px solid rgba(226,165,66,.34);
}

    .lc-banner.lc-is-bad {
        background: rgba(214,75,67,.17);
        color: #F5A49E;
        border-color: rgba(214,75,67,.36);
    }

    .lc-banner .lc-btn-quiet {
        background: rgba(255,255,255,.09);
        border-color: rgba(255,255,255,.22);
        color: var(--lc-stage-text);
        margin-inline-start: auto;
    }

        .lc-banner .lc-btn-quiet:hover {
            background: rgba(255,255,255,.17);
            color: #fff;
            border-color: rgba(255,255,255,.36);
        }

.lc-floor {
    flex: 1;
    min-height: 0;
    padding: 14px 14px 0;
    display: grid;
    gap: 11px;
    grid-template-columns: minmax(0,1fr);
}

    /* صاحب الكلمة بجانب المدرّب — المدرّب أوسع لأنه يبقى المرجع */
    .lc-floor[data-turn="on"] {
        grid-template-columns: minmax(0,1.65fr) minmax(0,1fr);
    }

@media (max-width: 700px) {
    /* عمودان على شاشة ضيّقة يُنتجان بلاطتين لا تُقرأ فيهما ملامح */
    .lc-floor[data-turn="on"] {
        grid-template-columns: minmax(0,1fr);
    }
}

/* الحلقة: تتقلّص لتتّسع كاملة بلا تمرير حتى ثمانية، ثم تُمرَّر */
.lc-ring {
    flex: none;
    padding: 11px 14px 0;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.28) transparent;
}

    .lc-ring::-webkit-scrollbar {
        height: 6px;
    }

    .lc-ring::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.28);
        border-radius: var(--lc-r-pill);
    }

    .lc-ring .lc-tile {
        flex: 1 1 140px;
        min-width: 106px;
        max-width: 186px;
    }

        /* البلاطة الصغيرة تكتفي بالحرف: النصّ تحته يصطدم بشريط الاسم */
        .lc-ring .lc-tile-off .lc-tile-off-text {
            display: none;
        }

        .lc-ring .lc-tile-off .lc-mono {
            width: 34px;
            height: 34px;
            font-size: 13px;
        }

/* تخطيط الشبكة: الجميع سواء، بلا حلقة.

   ⭐ الصفوف تتقاسم ارتفاع المسرح بدل أن تتكدّس في أعلاه.
   قيس على 1440×900 بثمانية مشاركين: البلاطات تأخذ صفّين في أعلى المسرح
   وتترك تحتها نحو نصف المساحة فارغةً سوداء — وجوهٌ صغيرة وفراغٌ واسع معاً.
   و 1fr يوزّع الارتفاع على الصفوف، و minmax يمنع الانضغاط تحت حدٍّ مقروء
   حين يكثر العدد — وعندها يعود التمرير. */
.lc-room[data-layout="grid"] .lc-floor {
    grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
    grid-auto-rows: minmax(132px, 1fr);
    align-content: stretch;
    overflow-y: auto;
}

/* البلاطة في الشبكة تملأ خليّتها: النسبة الثابتة تُبقي فراغاً حولها */
.lc-room[data-layout="grid"] .lc-floor .lc-tile {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
}

.lc-room[data-layout="grid"] .lc-ring {
    display: none;
}

/* ⭐ التكبير يعني: هذا الفيديو وحده على الشاشة.

   كان التثبيت ينقل البلاطة إلى الصدر وتبقى الحلقة أسفلها تأخذ نحو 150px
   ويبقى الشريط العلوي فوقها — فيرى المستخدم «مربّعاً أكبر قليلاً» لا شرحاً
   ملء الشاشة، وهو ما أبلغ عنه: «التكبير لا يكبّر، الداخل مربّع». والسجلّ
   يشهد: تسع عمليات تثبيت وفكّ في دقيقتين ونصف — يجرّب ولا يجد ما يريد.

   الآن التثبيت يُخفي الحلقة ويُفرغ المسرح للبلاطة وحدها، ويصحبه ملء شاشة
   حقيقي — فيصير الوجه أو الشريحة بكامل الشاشة كما في أي منصّة أخرى. */
.lc-room[data-pinned="on"] .lc-ring {
    display: none;
}

.lc-room[data-pinned="on"] .lc-floor {
    padding-bottom: 0;
}

/* في ملء الشاشة تُطوى الشرائط الإعلامية كي لا تقتطع من الصورة.
   شريطا التسجيل والكتم القسري يبقيان: الأول التزام والثاني سبب صمتك. */
.lc-room[data-pinned="on"]:fullscreen .lc-banner:not(.lc-is-bad) {
    display: none;
}

/* ── البلاطات ── */

.lc-tile {
    position: relative;
    border-radius: var(--lc-r-tile);
    overflow: hidden;
    background: #0A1F18;
    border: 1px solid rgba(255,255,255,.07);
    aspect-ratio: 16/9;
    min-height: 0;
    display: grid;
    place-items: center;
}

.lc-tile-anchor {
    aspect-ratio: auto;
    height: 100%;
    min-height: 150px;
}

.lc-tile.lc-is-speaking {
    border-color: var(--lc-secondary);
    box-shadow: 0 0 0 2px rgba(67,183,143,.5);
}

.lc-tile.lc-is-dim {
    opacity: .45;
}

/* حاوية الوسائط — يحقن فيها livekit-client.js عنصر <video>.
   لا يلمسها Blazor بعد إنشائها، فلا يُهدَم <video> عند إعادة الرسم. */
.lc-tile-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

    .lc-tile-media video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* ⭐ الصدر والمثبَّت: الإطار كاملاً لا مقصوصاً.

       cover يملأ البلاطة بقصّ ما يفيض. وهو مقبول في بلاطة الحلقة الصغيرة،
       أمّا الصدر فنسبته تتبع ارتفاع المسرح لا 16:9 — فيُقصّ من الكاميرا
       العريضة جانباها ويبقى وسطها. والأثر الذي أبلغ عنه المستخدم: يكبّر
       المشارك فلا يراه «بشكل كامل»، لأن التكبير يعرض قصّاً أوسع لا صورة أتمّ.
       contain يُظهر الإطار كلّه ويترك شريطين داكنين — وهو ما يفعله Meet في
       البلاطة الرئيسية، لأن رؤية المتحدّث كاملاً أهمّ من ملء كل بكسل. */
    .lc-tile-anchor .lc-tile-media video,
    .lc-tile.lc-is-pinned .lc-tile-media video {
        object-fit: contain;
        background: #06120E;
    }

    /* الشاشة المشتركة لا تُقصّ أبداً: القصّ يبتلع حافّة الشريحة أو سطر الكود */
    .lc-tile-screen .lc-tile-media video {
        object-fit: contain;
        background: #06120E;
    }

    .lc-tile-media .livekit-media-local {
        transform: scaleX(-1); /* مرآة للفيديو المحلي وحده */
    }

.lc-tile-off {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 9px;
    justify-items: center;
    color: var(--lc-stage-text-2);
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

    .lc-tile-off .lc-mono {
        width: 54px;
        height: 54px;
        font-size: 20px;
        background: var(--lc-stage-3);
        color: var(--lc-stage-text);
    }

.lc-tile-anchor .lc-tile-off .lc-mono {
    width: 78px;
    height: 78px;
    font-size: 28px;
}

.lc-tile-badge {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 2;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--lc-r-pill);
    background: rgba(8,26,20,.74);
    color: var(--lc-stage-text);
}

.lc-b-host {
    background: var(--lc-primary);
    color: var(--lc-on-primary);
}

.lc-b-you {
    background: rgba(255,255,255,.2);
}

.lc-b-share {
    background: rgba(24,161,113,.86);
    color: #fff;
}

.lc-b-turn {
    background: var(--lc-warn-solid);
    color: #3A2705;
}

/* التفاعل: يطفو أعلى البلاطة مقابل الشارة، فلا يزاحمها */
.lc-tile-react {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 3;
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
    animation: lc-pop .25s cubic-bezier(.2,.9,.3,1.3);
}

@keyframes lc-pop {
    from {
        opacity: 0;
        transform: scale(.5);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lc-tile-cap {
    position: absolute;
    inset-inline: 8px;
    bottom: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: var(--lc-r-pill);
    background: rgba(8,26,20,.72);
    color: var(--lc-stage-text);
    font-size: 11.5px;
}

.lc-tile-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-tile-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

    .lc-tile-icons .lc-off {
        color: #F5A49E;
    }

/* ── شريط الأدوات ── */

.lc-dock {
    position: absolute;
    inset-inline: 0;
    bottom: 12px;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 0 12px;
}

.lc-tool {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--lc-r-pill);
    background: rgba(255,255,255,.11);
    color: var(--lc-stage-text);
    box-shadow: var(--lc-shadow-pill);
    transition: background .14s, color .14s;
}

    .lc-tool:hover {
        background: rgba(255,255,255,.2);
    }

    .lc-tool[aria-pressed="true"] {
        background: var(--lc-primary);
        color: var(--lc-on-primary);
    }

    .lc-tool.lc-is-off {
        background: var(--lc-stop-solid);
        color: #fff;
    }

    /* المقفل ليس مُعطَّلاً: يبقى قابلاً للنقر ليقول سببه، لكنه يبدو مختلفاً */
    .lc-tool.lc-is-locked {
        background: rgba(214,75,67,.3);
        color: #F5A49E;
        cursor: not-allowed;
    }

.lc-tool-lock {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: var(--lc-r-pill);
    background: var(--lc-stop-solid);
    color: #fff;
}

.lc-tool-badge {
    position: absolute;
    top: -3px;
    inset-inline-start: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: var(--lc-r-pill);
    background: var(--lc-warn-solid);
    color: #16241E;
    font-size: 10px;
    font-weight: 700;
}

.lc-dock-sep {
    width: 1px;
    height: 26px;
    background: rgba(255,255,255,.18);
    margin: 0 3px;
}

.lc-tool-leave {
    width: auto;
    padding: 0 17px;
    gap: 8px;
    display: flex;
    align-items: center;
    background: var(--lc-stop-solid);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

    .lc-tool-leave:hover {
        filter: brightness(1.08);
        background: var(--lc-stop-solid);
    }

/* التلميح: يظهر فوق الزرّ لا تحته — الشريط ملتصق بأسفل الشاشة */
.lc-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: var(--lc-r-chrome);
    background: var(--lc-tip-bg);
    color: var(--lc-tip-fg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}

.lc-tool:hover .lc-tip,
.lc-tool:focus-visible .lc-tip {
    opacity: 1;
}

/* ── نافذة الإعدادات ── */

/* أعلى من z-index الغرفة (1040) وإلا اختفت النافذة خلفها */
.lc-modal-back {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(8,20,16,.55);
    display: grid;
    place-items: center;
    padding: 20px;
}

/* ⭐ الترويسة والتذييل ثابتان والجسم وحده يُمرَّر.

   كانت النافذة كلّها تُمرَّر (overflow-y عليها)، فمحتوىً طويلٌ كشبكة
   المؤثرات يدفع زرّ «إغلاق» تحت الحافّة ويُخفي الترويسة معه — فيبدو أن
   لا مخرج من النافذة إلا النقر خارجها، وهو ما لا يُخمّنه المستخدم. */
.lc-modal {
    width: min(460px,100%);
    max-height: 86dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-r-card);
    box-shadow: var(--lc-shadow-lg);
}

/* نافذة المؤثرات أوسع: المعاينة الذاتية هي مضمونها الأول، وفي 460px
   تصير 229px ارتفاعاً — لا يُحكم فيها على حافّة قناع ولا على إضاءة */
.lc-modal-fx {
    width: min(620px,100%);
}

.lc-modal-h {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--lc-line);
    font-weight: 600;
}

.lc-modal-x {
    margin-inline-start: auto;
    color: var(--lc-text-3);
}

    .lc-modal-x:hover {
        color: var(--lc-text);
    }

.lc-modal-b {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    display: grid;
    /* ⭐ عمود محدَّد العرض صراحةً.
       بلا هذا يبقى عرض العمود «تلقائياً» فلا يستطيع المتصفّح أن يحسب ارتفاع
       عنصرٍ نسبتُه aspect-ratio، فيُعطي صفَّه ارتفاعاً أصغر من العنصر — ويُرسم
       ما بعده **فوقه**. قيس فعلاً: صندوق المعاينة 327px وصفّه 108px، فنزلت
       شبكة الخلفيات على صورة المستخدم. */
    grid-template-columns: minmax(0,1fr);
    align-content: start;
    gap: 16px;
}

.lc-modal-f {
    flex: none;
    padding: 14px 18px;
    border-top: 1px solid var(--lc-line);
    display: flex;
    gap: 9px;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════
   ملخّص الحصة
   ═══════════════════════════════════════════════════════════════════ */

.lc-sum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px,1fr));
    gap: 1px;
    background: var(--lc-line); /* الفواصل من الخلفية، لا حدود على كل خلية */
}

.lc-sum-cell {
    background: var(--lc-card-2);
    padding: 16px;
    display: grid;
    gap: 3px;
}

.lc-sum-k {
    font-size: 11.5px;
    color: var(--lc-text-2);
}

.lc-sum-v {
    font-family: var(--lc-data);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    color: var(--lc-primary-dark);
}

    .lc-sum-v small {
        font-family: inherit;
        font-size: 12px;
        color: var(--lc-text-3);
        margin-inline-start: 3px;
    }

.lc-att {
    display: grid;
    gap: 1px;
    background: var(--lc-line);
    max-height: 260px;
    overflow-y: auto;
}

.lc-att-row {
    background: var(--lc-card);
    padding: 9px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.lc-att-dur {
    font-size: 12px;
    color: var(--lc-text-2);
    font-variant-numeric: tabular-nums;
}

/* الحضور القصير مُعلَّم: هو مادة المتابعة، لا مجرّد رقم */
.lc-att-row.lc-is-short .lc-att-dur {
    color: var(--lc-warn);
    font-weight: 600;
}

.lc-att-empty {
    padding: 18px 16px;
    background: var(--lc-card);
    font-size: 12.5px;
    color: var(--lc-text-3);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   إشعار «حصة مباشرة الآن»
   ═══════════════════════════════════════════════════════════════════ */

.lc-alertcard {
    position: fixed;
    inset-inline-end: 26px;
    bottom: 26px;
    z-index: 1030;
    width: min(352px, calc(100vw - 52px));
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-inline-start: 4px solid var(--lc-stop);
    border-radius: var(--lc-r-card);
    padding: 16px 18px;
    box-shadow: var(--lc-shadow-lg);
    animation: lc-slidein .32s cubic-bezier(.2,.7,.3,1);
}

@keyframes lc-slidein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lc-alert-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.lc-alert-x {
    margin-inline-start: auto;
    color: var(--lc-text-3);
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 6px;
}

    .lc-alert-x:hover {
        color: var(--lc-text);
        background: var(--lc-card-3);
    }

.lc-alert-t {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 4px;
    text-wrap: balance;
}

.lc-alert-m {
    font-size: 12.5px;
    color: var(--lc-text-2);
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
}

/* السطر الذي يغيّر القرار: منذ متى بدأت وكم حاضراً */
.lc-alert-since {
    font-size: 12px;
    color: var(--lc-warn);
    margin-top: 9px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lc-alert-a {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   قائمة الحصص — بطاقات لا جدول
   ═══════════════════════════════════════════════════════════════════ */

.lc-list-wrap {
    padding: 26px 24px 60px;
    background: radial-gradient(70ch 46ch at 78% -16%, rgba(24,161,113,.11) 0%, transparent 62%);
}

.lc-list-in {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.lc-list-head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.lc-list-head-b {
    flex: 1;
    min-width: 200px;
    display: grid;
    gap: 5px;
}

.lc-display-l {
    font-size: 34px;
}

.lc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.lc-chip {
    padding: 7px 14px;
    border-radius: var(--lc-r-pill);
    border: 1px solid var(--lc-line-2);
    font-size: 12.5px;
    color: var(--lc-text-2);
    background: var(--lc-card);
}

    .lc-chip:hover {
        color: var(--lc-text);
        border-color: var(--lc-text-3);
    }

    /* الحالة تُقرأ قبل أن تُقرأ الكلمات */
    .lc-chip[aria-pressed="true"] {
        background: var(--lc-primary-light);
        border-color: var(--lc-secondary);
        color: var(--lc-primary-dark);
        font-weight: 600;
    }

.lc-filter-sep {
    width: 1px;
    height: 20px;
    background: var(--lc-line-2);
    margin: 0 5px;
}

.lc-sessions {
    display: grid;
    gap: 10px;
}

.lc-scard {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 16px;
    align-items: center;
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-r-card);
    box-shadow: var(--lc-shadow);
    padding: 15px 17px;
}

/* الشريط اللوني على الحافّة: تُعرف الحالة قبل قراءة أي كلمة */
.lc-scard-stripe {
    width: 4px;
    align-self: stretch;
    border-radius: var(--lc-r-pill);
    background: var(--lc-line-2);
}

.lc-scard[data-st="live"] .lc-scard-stripe {
    background: var(--lc-stop);
}

.lc-scard[data-st="scheduled"] .lc-scard-stripe {
    background: var(--lc-primary);
}

.lc-scard[data-st="ended"] .lc-scard-stripe {
    background: var(--lc-line-2);
}

.lc-scard[data-st="cancelled"] .lc-scard-stripe {
    background: var(--lc-line);
}

.lc-scard[data-st="live"] {
    border-color: var(--lc-stop-line);
}

.lc-scard[data-st="ended"],
.lc-scard[data-st="cancelled"] {
    background: var(--lc-card-2);
    box-shadow: none;
}

.lc-scard-b {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.lc-scard-t {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-scard-m {
    font-size: 12.5px;
    color: var(--lc-text-2);
    display: flex;
    flex-wrap: wrap;
    gap: 3px 9px;
    align-items: center;
}

.lc-scard-when {
    font-size: 12.5px;
    color: var(--lc-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lc-scard-a {
    display: flex;
    gap: 7px;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .lc-scard {
        grid-template-columns: auto minmax(0,1fr);
    }

    .lc-scard-a {
        grid-column: 1/-1;
        justify-content: flex-start;
    }
}

.lc-pill {
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--lc-r-pill);
    flex: none;
    background: var(--lc-card-3);
    color: var(--lc-text-2);
}

.lc-pill-live {
    background: var(--lc-stop-solid);
    color: #fff;
}

.lc-pill-sched {
    background: var(--lc-primary-light);
    color: var(--lc-primary-dark);
}

.lc-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--lc-text-3);
    font-size: 13.5px;
    background: var(--lc-card-2);
    border: 1px dashed var(--lc-line-2);
    border-radius: var(--lc-r-card);
}

/* ═══════════════════════════════════════════════════════════════════
   الجوّال
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    /* شريط الأدوات في التدفّق لا طافياً — الطفو يأكل مسرحاً ضيّقاً أصلاً */
    .lc-stage {
        padding-bottom: 0;
    }

    .lc-dock {
        position: static;
        align-self: center;
        flex: none; /* بدونها يضغطها flex فتنهار إلى بضع بكسلات */
        /* ⭐ min-height لا height: الشريط flex-wrap، فحين يلتفّ إلى صفّين
           كان المحتوى يتجاوز الصندوق الثابت (58px) بـ 21px — و .lc-stage
           عليه overflow:hidden فيقصّ الفائض. قيس على 360×740: أسفل المحتوى
           479 وأسفل المسرح 470، والمقصوص هو الصفّ الثاني الحامل لزرّ
           «مغادرة» نفسه — أي أهمّ زرّ في الشريط. */
        height: auto;
        min-height: 58px;
        gap: 3px;
        row-gap: 6px;
        padding: 0 9px;
        margin: 12px 0;
        max-width: calc(100% - 24px);
    }

    .lc-tool {
        width: 38px;
        height: 38px;
    }

    .lc-tool-leave {
        /* ⭐ width:auto يُعاد هنا صراحةً: القاعدة الأساسية .lc-tool-leave
           تضعه، لكن .lc-tool{width:38px} أعلاه بنفس الـ specificity وتأتي
           بعدها في الملف فتغلبها. الأثر المقيس: الزرّ 38px بينما محتواه
           يحتاج 56px، فيخرج نصّ «مغادرة» خارج الخلفية الحمراء — على كل
           عرض ≤900px بما فيه الـ tablets. */
        width: auto;
        padding: 0 14px;
        font-size: 12.5px;
    }

    .lc-dock-sep {
        display: none;
    }

    .lc-floor {
        min-height: 150px;
    }

    .lc-head-stats {
        gap: 11px;
    }

    .lc-center {
        padding: 14px;
    }

    .lc-list-wrap {
        padding: 18px 14px 40px;
    }
}

@media (max-width: 560px) {
    /* الهاتف: تُحذف الأدوات النادرة ليبقى زرّ المغادرة ظاهراً بلا تمرير.
       قياس: تسعة أزرار على عرض 360px تفيض، فيسقط أهمّها. */
    .lc-dock .lc-tool-optional {
        display: none;
    }

    /* تسعة أزرار تلتفّ إلى صفّين تحت 400px مهما ضاقت الفجوات، فيُخفَّض
       الحدّ الأدنى للأرضية ليتّسع الصفّ الثاني داخل المسرح لا مقصوصاً.
       قيس بعد الإصلاح على 360×740: الأرضية 122px والشريط كامل غير مقصوص. */
    .lc-floor {
        min-height: 110px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lc-root *,
    .lc-root *::before,
    .lc-root *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   المؤثرات المرئية (طمس/استبدال الخلفية وتحسين الإضاءة)
   ═══════════════════════════════════════════════════════════════════ */

/* زرّ المؤثرات العائم على معاينة اللوبي.
   inset-inline-end لا left/right: التخطيط عربي RTL فالبداية يمين. */
.lc-fx-btn {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(8, 20, 16, .55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    cursor: pointer;
    font-size: 14px;
    transition: background .12s;
}

    .lc-fx-btn:hover,
    .lc-fx-btn:focus-visible {
        background: rgba(8, 20, 16, .8);
    }

/* ═══════════════════════════════════════════════════════════════════
   الانتظار: دورانٌ صغير مكان الأيقونة
   ═══════════════════════════════════════════════════════════════════ */

@keyframes lc-spin {
    to { transform: rotate(360deg); }
}

/* ⭐ الدوران يشغل موضع الأيقونة نفسه فلا يقفز التخطيط.
   الأيقونة تخفت ولا تختفي: اختفاؤها يترك فراغاً يُربك العين. */
.lc-tool.lc-is-busy {
    position: relative;
    cursor: progress;
}

    .lc-tool.lc-is-busy > i {
        opacity: .18;
    }

    .lc-tool.lc-is-busy::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 17px;
        height: 17px;
        margin: -8.5px 0 0 -8.5px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.28);
        border-top-color: #fff;
        animation: lc-spin .7s linear infinite;
    }

/* الزرّ المعطَّل أثناء العمل يبقى بلون كامل: التعتيم يوحي بالعطل لا بالانتظار */
.lc-tool:disabled.lc-is-busy {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .lc-tool.lc-is-busy::after {
        animation-duration: 2s;
    }
}

/* المعاينة الذاتية داخل نافذة المؤثرات — ترى أثر الفلتر وأنت تختاره */
/* ⭐ ارتفاع صريح لا aspect-ratio.

   النسبة على عنصرٍ داخل grid تُنشئ دائرية: ارتفاعه يتبع عرضه، وعرضه يتبع
   العمود، وارتفاع الصفّ يتبع ارتفاعه — فيتخلّى المتصفّح عن النسبة في حساب
   الصفّ ويُبقيها في الرسم. النتيجة المقيسة: الصندوق 327px وصفّه 108px،
   فنزلت شبكة الخلفيات فوق صورة المستخدم. والارتفاع الصريح يقطع الدائرة،
   و object-fit: contain يتكفّل بإظهار الإطار كاملاً داخله أياً كانت نسبته. */
.lc-fx-self {
    position: relative;
    height: clamp(190px, 32dvh, 330px);
    border-radius: 12px;
    overflow: hidden;
    background: #06120E;
    border: 1px solid var(--lc-line);
}

    .lc-fx-self video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        transform: scaleX(-1); /* مرآة: المعاينة الذاتية تُقرأ معكوسة */
    }

.lc-fx-self-tag {
    position: absolute;
    inset-inline-start: 8px;
    bottom: 8px;
    padding: 3px 9px;
    border-radius: var(--lc-r-pill);
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 11px;
}

/* ⭐ لودر التحميل فوق المعاينة نفسها لا في سطر تحته.

   أوّل تفعيل يجلب نموذج التقطيع (نحو 12 ميغابايت) وقد يستغرق ثواني على
   شبكة جوّال. وكانت الرسالة سطراً رمادياً أسفل النافذة لا تُرى على الهاتف
   حيث الشاشة ضيّقة والخيارات تحتها — فيظنّ المستخدم أن ضغطته لم تُسجَّل.
   الآن تُغطّي المعاينة: هي أوّل ما تنظر إليه العين وأنت تنتظر أثر الفلتر. */
.lc-fx-busy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 14px;
    text-align: center;
    background: rgba(6,18,14,.72);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.5;
}

    .lc-fx-busy::before {
        content: '';
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 3px solid rgba(255,255,255,.22);
        border-top-color: #fff;
        animation: lc-spin .8s linear infinite;
    }

/* البطاقة قيد التطبيق: دورانٌ صغير في زاويتها */
.lc-fx-tile.lc-is-pending::after {
    content: '';
    position: absolute;
    top: 5px;
    inset-inline-start: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    background: rgba(0,0,0,.35);
    animation: lc-spin .7s linear infinite;
}

/* أثناء التطبيق تُعطَّل الشبكة كلّها: ضغطتان متلاحقتان تتسابقان على
   خطّ المعالجة نفسه، فتصل الثانية قبل أن تستقرّ الأولى */
.lc-fx-grid.lc-is-working .lc-fx-tile:not(.lc-is-pending) {
    opacity: .55;
    pointer-events: none;
}

.lc-fx-sec {
    display: grid;
    gap: 9px;
}

.lc-fx-sec-l {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lc-text-2);
    display: flex;
    align-items: center;
    gap: 7px;
}

.lc-fx-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.lc-fx-tile {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 2px solid var(--lc-line);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: var(--lc-card-2);
    color: var(--lc-text-2);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    font-size: 11.5px;
    padding: 0;
    transition: border-color .12s;
}

    .lc-fx-tile:hover {
        border-color: var(--lc-text-3);
    }

    .lc-fx-tile img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* المختار: إطار أخضر + علامة صحّ في الزاوية */
    .lc-fx-tile.lc-is-sel {
        border-color: var(--lc-primary);
    }

        .lc-fx-tile.lc-is-sel::after {
            content: '\2713';
            position: absolute;
            top: 4px;
            inset-inline-start: 4px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--lc-primary);
            color: #fff;
            font-size: 11px;
            line-height: 18px;
            text-align: center;
        }

/* بطاقة الرفع: label تحوي InputFile مخفياً — النقر عليها يفتح منتقي الملفات */
.lc-fx-upload input[type="file"] {
    display: none;
}

.lc-fx-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lc-fx-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--lc-text-2);
    cursor: pointer;
}

    .lc-fx-check input {
        accent-color: var(--lc-primary);
        width: 16px;
        height: 16px;
    }

.lc-fx-range-l {
    font-size: 12px;
    color: var(--lc-text-3);
    flex: none;
}

.lc-fx-range {
    flex: 1;
    accent-color: var(--lc-primary);
}