/* =====================================================================
   SAFAR — شكل الموبايل (PWA)                          css/mobile-layout.css
   ---------------------------------------------------------------------
   Shared/MobileLayout.razor: الشريط العلوى (.mtb) + الشريط السفلى (.mbn)
   | the top bar (.mtb) + the bottom bar (.mbn). Rendered by MainLayout when
   Security.isMobile == true (width ≤ 1024px or a mobile device).

   الألوان: var(--home-x, <لون الوضع الفاتح>) — قيم الوضع الداكن فى darkOverrid.css
   | colours: var(--home-x, <light colour>) — the dark values live in darkOverrid.css
   (:root, "mobile shell" group). Light fallbacks follow the PWA design board.

   ارتفاع الشريطين = 55px كالسابق، فالصفحات المحسوبة على (100dvh - 110px) لا تتغير
   | both bars stay 55px tall as before, so pages sized (100dvh - 110px) keep fitting.

   المرحلة 4 (آخر الملف): الرئيسية على الموبايل (.mhm-*) | phase 4 (end of file): the mobile home (.mhm-*)
   المرحلة 5أ: نظام المراسلات — الوارد والصناديق والبحث (.mcr-*, .mbx-*) | phase 5a: correspondence (.mcr-*, .mbx-*)
   المرحلة 7: الطلبات — طلب جديد (.reqm-*) والطلبات (.reql-*) | phase 7: requests — new request (.reqm-*) and requests (.reql-*)
   المرحلة 8: الدردشات — ChatHome على صفحة الموبايل (.cht-root.cht-m, .chtm-*) | phase 8: chats — ChatHome on the mobile page (.cht-root.cht-m, .chtm-*)
   المرحلة 9: اسأل سفر — ChatAiHome / ChatAiPostActions / Settings على الموبايل (.aim, .aim-*, .aiset-*) | phase 9: Ask SAFAR — ChatAiHome / ChatAiPostActions / Settings on mobile (.aim, .aim-*, .aiset-*)
   المرحلة 10: الاجتماعات المرئية — VideoMeetings / VideoMeetingCard / VideoJoiningInfo / VideoCalls على الموبايل (.vmm, .vmm-*) | phase 10: video meetings on mobile (.vmm, .vmm-*)
   المرحلة 10 (ب): غرفة الاجتماع والاتصال الوارد — VideoRoom / VideoCallRinger على الهاتف، داكنة دائماً (.vr-root.is-phone, .vcr-stack.is-phone) | phase 10 (b): the room and the incoming call on a phone, always dark
   المرحلة 11: الحضور والانصراف — LoginAndLogOut بملء الشاشة على الهاتف (.tac-m, .tacm-*) | phase 11: attendance — LoginAndLogOut full screen on a phone
   المرحلة 5ب: عرض المعاملة وقائمة إجراءاتها — MessageView بـ MobileView على الهاتف (.mvm, .mvm-*) | phase 5b: the transaction view and its actions sheet — MessageView with MobileView on a phone
   المرحلة 5ج: التوجيه — SendDirecting بـ MobileView على الهاتف (.sdi-m, .sdi-mhead, .sdi-dialog-m, .sdi-mdraft*, .sdi-mai*) | phase 5c: forwarding — SendDirecting with MobileView on a phone
   المرحلة 5ج (2): معاملة جديدة / تعديل — MessageEdit بـ MobileView على الهاتف، معالج 3 خطوات (.me-m, .me-m-s1/2/3, .me-m*, .med-dialog-m) | phase 5c (2): new transaction / edit — MessageEdit with MobileView on a phone, a 3-step wizard
   المرحلة 5د: مسار المعاملة — RecordReferenceList بـ MobileView فى تبويب «المسار» على الهاتف (.erf-m, .erf-msum*, .erf-mstep, .erf-mwho, .erf-mdue, .erf-mread) | phase 5d: the transaction path — RecordReferenceList with MobileView in the phone «المسار» tab
   المرحلة 5د (2): عارض المرفق — ViewAttachedGeneral بـ MobileView على الهاتف، داكن دائماً (.vag-m, .vag-dialog-m, .vag-m*) | phase 5d (2): the attachment viewer — ViewAttachedGeneral with MobileView on a phone, always dark
   البنود المفتوحة (أ): نجمة المفضلة، قائمة المرفقات، «مشاركة» فى العارض (.mvm-fav, .eat-m*, .vag-mshare) | open items (A): the favourite star, the attachments list, «share» in the viewer
   البنود المفتوحة (ب): الحالة فى ملخص المسار، «قرأتها منذ…»، من قرأ ومتى (.erf-mstatus, .erf-mread-row, .erf-mmine, .erf-mreader*) | open items (B): the path status, «you read it … ago», who read it and when
   البنود المفتوحة (د): «إلى» فى المذكرة الداخلية — الخطوة 1 من نموذج المعاملة على الهاتف (.me-mto, .me-mto-ms, .me-mto-*) | open items (D): «To» in the internal memo — step 1 of the phone's transaction form
   البنود المفتوحة (هـ): المسح الضوئى بالكاميرا — شاشة المسح على الهاتف، داكنة دائماً (.me-scan, .me-scan-*, .mscan-*) | open items (E): the camera scan — the scanner screen on a phone, always dark
   المرحلة 13: أدوات تحويل الملفات — HomeConvertal (الأدوات، الأداة، السجل) وأدوات ConvertalApp على الهاتف (.cvm, .cvm-*, .cvh-mpage, .cvh-m*) | phase 13: the file conversion tools on a phone
   المرحلة 14: سحابة سفر — CloudManagement / MyFiles على الهاتف، والمشاركة والاختيار من السحابة وجهة المراسلة بملء الشاشة (.cldm*, .cdlm*, .clpm*, .ccom*) | phase 14: SAFAR Cloud on a phone
   المرحلة 15: البريد الإلكترونى — HomeMailSmarter وقائمته وقراءته وكتابته على الهاتف، التحقق بخطوتين صفحةً، «استخدام كمراسلة» قائمةً من الأسفل، وعارض المرفق ونوافذ الإعدادات بملء الشاشة (.msmm*) | phase 15: e-mail on a phone
   المرحلة 16: مهامي — TodoHome على الهاتف (الشرائح والإضافة وبطاقات المهام والمنجزة)، وتفاصيل المهمة والاقتراحات صفحةً كاملة (.otkm*) | phase 16: my tasks on a phone
   المرحلة 17: مواقيت الصلاة — درج Geolocation بملء الشاشة على الهاتف (الصلاة القادمة والعدّ، قائمة اليوم، الإعدادات: تنبيه الأذان والعرض على الرئيسية) (.geom*) | phase 17: prayer times on a phone
   البنود المفتوحة (و): البحث الصوتى فى المراسلات — زر الميكروفون بجانب حقل البحث على الهاتف، حالة الاستماع والأخطاء (.mcr-hbtn--mic, .mcr-voice-note) | open items round F: voice search
   البنود المفتوحة (ز): عدد غير المقروءة فى الدردشات — شارة زر الدردشات فى الشريط العلوى (.mtb-badge) وعدد كل دردشة فى القائمة (.chtm-count) | open items round G: chat unread counts
   البنود المفتوحة (ح): الاتصال المرئى بالطرف الآخر من رأس المحادثة — زر الفيديو صار زراً (.chtm-video، حالة الانتظار .is-busy)، ولمسات 44px فى نافذة الاتصال (.vmc-call-dialog) | open items round H: a video call from the thread header
   البنود المفتوحة (ي): من فى الاجتماع الآن — صور الحاضرين على بطاقات الاجتماعات الجارية (.vmm-people) وسطر الردهة (.vr-lobby-present) | open items round J: who is in the meeting now
   البنود المفتوحة (ك): «بانتظار موافقتي» — «الكل» وعدده (.reql-type--all, .reql-type-count)، القائمة الموحّدة (.reqa-*)، وسطر المرحلة الحالية على البطاقات (.req-m-step) | open items round K: awaiting my approval and the current step
   المرحلة 18: الحساب والملف الشخصى — «حسابي» صفحةً، الملف الشخصى، والتوقيع وكلمة المرور والتفويضات ومفاتيح المرور ومستوى السرية بملء الشاشة على الهاتف (.acm-*, .uvm-*, .uml-m, .acm-dialog-m) | phase 18: the account and the profile on a phone
   المرحلة 19: الأنظمة — MenuPage على الهاتف: الرأس المتدرّج والبحث وتبديل بطاقات / قائمة، قسم لكل قائمة أم، والأبناء بطاقات بعمودين أو صفوفاً، ولوحة الفروع (.mpm, .mpm-*) | phase 19: the systems page on a phone
   البنود المفتوحة (ل): إعدادات «اسأل سفر» محفوظة — الموديل والعنوان للقراءة فقط، «لم تحفظ بعد» وخطأ الحفظ (.aiset-m .aiset-hint / .aiset-note / .aiset-error, input[readonly]) | open items L: Ask SAFAR settings saved
   البنود المفتوحة (م): تأكيد الاطلاع على القرارات والتعاميم — حالة بطاقة «المنشورة» («تم تأكيد الاطلاع» / «مطلوب تأكيد الاطلاع») و«اطّلع n من m» فى «منشوراتي»، وقائمة الناشر فى «تفاصيل النشر» (.mcr-doc-ack, .rra, .rra-*) | open items M: read acknowledgement of decisions / circulars
   البنود المفتوحة (ن): الحضور والانصراف — الحركة المسجّلة الأخيرة معطّلة بعلامة ✓ مقروءة (.tacm-btn.is-second.is-done)، و«الاستراحات» تحت ساعات العمل الصافية (.tacm-breaks) | open items N: attendance — the last recorded punch off with a readable ✓, the breaks line under the net hours
   البنود المفتوحة (س): إصلاحات — زر إغلاق القوائم السفلية 44px على الهاتف (.msheet-close)، وشريط تبويبات الوحدات فى صفحات الطلبات لا يتجاوز الشاشة (.reql .rql-tabs) | open items O: fixes — the sheets' close 44px on phones, the request pages' unit tab strip within the screen
   البنود المفتوحة (ف): مكتب البريد — طريقة التصدير على بطاقة الصادر (.mcr-post-way)؛ «الكل» فى أنواع «المنشورة» يستعمل الأقراص الموجودة؛ لمس أقراص الفلاتر 44px | open items Q: the outgoing card's export way; «all» in the published types uses the existing pills; the filter chips' tap area 44px
   البنود المفتوحة (ص): عرض المعاملة على الهاتف — ملخص سفر الذكي المحفوظ (.rais) وتبويب «ملاحظات» (.rnp) | open items R: the phone's transaction view — the stored smart summary and the notes tab
   البنود المفتوحة (ق): قائمة إجراءات المعاملة (.mvm-sheet-note) وزر مسح المرفق فى الخطوة 2 (.me-scan-att) | open items S: the sheet note and the step-2 attachment scan button
   البنود المفتوحة (ر): ملاحظاتى الخاصة على ملف PDF فى عارض المرفق — «تعليق» وشريط الملاحظات وحالتها، داكن دائماً كالعارض (.vag-mnote, .vag-mtool-badge, .vag-mnotes*, .vag-mbar--notes) | open items T: private notes on a PDF in the attachment viewer
   البنود المفتوحة (ش): «موافقة» / «رفض» تحت بطاقات «الكل» (.reqa-decide, .reqa-approve, .reqa-reject) وتنبيه ما تعذّر فوق صفحة النوع (.reqa-notice) | open items U: approve / reject under the «الكل» cards and the notice above the type's page
   البنود المفتوحة (ث): «اسأل سفر» — اختيار الموديل من الرأس (.aim-title-btn, .aim-model*)، إعادة التوليد والتقييم والقراءة (.aim-tool.is-on, .aim-retry)، التثبيت (.aim-side-pin)، الإعدادات: الموديل ولغة الرد وأسلوبه وحذف كل المحادثات (.aiset-select, .aiset-seg*, .aiset-danger, .aiset-confirm*) | open items W: Ask SAFAR — the model from the header, regenerate / rating / read aloud, pinning, the settings' extras
   المرحلة 20: خلاصة الرئيسية والاستطلاع على الهاتف — بطاقة المنشور المشتركة MobilePostCard (.mhm-post-body, .mhm-post-facts, .mhm-post-tags, .mhm-post-foot, .mhm-post-act*, .mhm-post-more)، قائمة «المزيد» (.mhm-sheet-*)، زر «منشورات جديدة» (.mhm-feed-new*)، كرتا التحميل (.mhm-post--skel)، وبطاقة الاستطلاع (.mpoll*) | phase 20: the home feed and the poll on a phone
   البنود المفتوحة (ت): الدردشات — الرسالة الصوتية بموجة ومدة (.chtm-voice*)، «في مكالمة» (.chtm-incall, .chtm-head-incall)، نقطة «مكالمة جارية» على زر الاتصال (.mtb-live)، وعدد غير المقروءة وزر الاتصال على سطح المكتب (.cht-root:not(.cht-m) .chtm-count, .cht-call-btn) | open items V: chats — voice messages, «in a call», the call-in-progress dot, the desktop counts and call button
   ===================================================================== */

.msh {
    --msh-top-h: 55px;
    --msh-nav-h: 55px;
    --msh-gutter: 0px;      /* = حشوة .container-fluid | the .container-fluid padding */
}

@media (max-width: 768px) {
    .msh { --msh-gutter: .1rem; }   /* site.css: .container-fluid { padding: 0 .1rem !important } */
}

/* ---------------------------------------------------------------------
   الشريط العلوى | top bar
   بعرض الشاشة كاملاً (يتجاوز حشوة الحاوية) | full width (past the container padding)
   --------------------------------------------------------------------- */
.msh > .msh-top.rz-header {
    width: calc(100% + 2 * var(--msh-gutter)) !important;   /* site.css: .rz-header { width: 100% !important } ≤ 768px */
    margin-inline: calc(-1 * var(--msh-gutter));
    min-height: var(--msh-top-h);
    padding: 5px 12px !important;
    background: var(--home-surface, #ffffff);
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    box-shadow: none;
    color: var(--home-text, #0f1b2d) !important;
}

.mtb {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
}

/* الصورة الشخصية | avatar */
.mtb .mtb-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--home-avatar-ring, #dbe6fb);
    background: var(--home-selected, #e7eefc);
    overflow: hidden;
    text-decoration: none;
}

    .mtb .mtb-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        cursor: pointer;
    }

    .mtb .mtb-avatar.active { box-shadow: 0 0 0 2px var(--home-accent, #1d4ed8); }

/* التحية والاسم | greeting and name */
.mtb .mtb-hello {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.mtb .mtb-greet {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mtb .mtb-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--home-text, #0f1b2d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* الأزرار | action buttons (+ the NotificationCount button .mh-noti) */
.mtb .mtb-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
}

.mtb .mtb-btn,
.mtb .mh-noti {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, transform .1s ease;
}

    .mtb .mtb-btn:active,
    .mtb .mh-noti:active { transform: scale(.94); }

    .mtb .mtb-btn:focus-visible,
    .mtb .mh-noti:focus-visible,
    .mtb .mtb-avatar:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

    .mtb .mtb-btn svg { display: block; }

/* أزرار الأيقونة بلا خلفية أضيق قليلاً (الارتفاع 44px) ليتسع الاسم
   | icon buttons without a background are a bit narrower (still 44px tall) so the name fits */
.mtb .mtb-btn:not(.mtb-btn--ai):not(.mtb-btn--call),
.mtb .mh-noti { width: 40px; }

/* اسأل سفر | Ask SAFAR */
.mtb .mtb-btn--ai {
    background: var(--home-ai-bg, #f1ecfd);
    color: var(--home-ai-text, #5b21b6);
}

/* الاتصال المرئى | video calls */
.mtb .mtb-btn--call {
    background: var(--home-call-bg, #e6f4f1);
    color: var(--home-call-text, #0b5c55);
}

/* جرس الإشعارات: أيقونة خطّية بدل fa-bell (نفس العنصر #not-menu-but-icon)
   | the notifications bell: a stroke icon instead of fa-bell (the same #not-menu-but-icon element) */
.mtb .mh-noti #not-menu-but-icon {
    display: block;
    width: 22px;
    height: 22px;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 8 3 8H3s3-1 3-8'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 8 3 8H3s3-1 3-8'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

    .mtb .mh-noti #not-menu-but-icon::before { content: none; }

/* عدادات الأزرار (RadzenBadge داخل NotificationCount) | button counters (the RadzenBadge inside NotificationCount) */
.mtb .mh-noti .rz-badge {
    position: absolute !important;
    top: 2px !important;
    right: auto !important;
    left: auto !important;
    inset-inline-end: -1px !important;
    min-width: 21px;
    width: auto !important;
    height: 21px !important;
    padding: 0 4px !important;
    border: 2px solid var(--home-surface, #ffffff);
    border-radius: 11px;
    box-sizing: border-box;
    background-color: var(--home-badge, #c2410c) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* شاشات أضيق من 375px: أزرار 40px | screens narrower than 375px: 40px buttons */
@media (max-width: 374.98px) {
    .mtb { gap: 6px; }
    .msh > .msh-top.rz-header { padding-inline: 8px !important; }
    .mtb .mtb-btn--ai,
    .mtb .mtb-btn--call { width: 40px; height: 40px; }
    .mtb .mtb-btn:not(.mtb-btn--ai):not(.mtb-btn--call),
    .mtb .mh-noti { width: 36px; }
    .mtb .mtb-avatar { width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------------
   محتوى الصفحة | page body
   مسافة سفلية بارتفاع الشريط السفلى حتى لا يغطى آخر المحتوى
   | bottom space as tall as the bottom bar so it never covers the end of a page
   --------------------------------------------------------------------- */
.msh > .msh-body.rz-body {
    padding-bottom: calc(var(--msh-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
}

/* ---------------------------------------------------------------------
   الشريط السفلى | bottom bar
   --------------------------------------------------------------------- */
.msh > .msh-bottom.rz-footer {
    padding: 0 !important;
    border-top: 0 !important;
    background: transparent;
}

.mbn {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    height: calc(var(--msh-nav-h) + env(safe-area-inset-bottom, 0px));
    padding: 3px 6px env(safe-area-inset-bottom, 0px);
    background: var(--home-surface, #ffffff);
    border-top: 1px solid var(--home-border, #e3e8f0);
    box-shadow: 0 -2px 10px rgba(15, 27, 45, .06);
}

    .mbn .mbn-item {
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--home-text-2, #4f5b6d);
        font: inherit;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mbn .mbn-pill {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 30px;
        border-radius: 15px;
        transition: background-color .15s ease;
    }

    .mbn .mbn-label {
        max-width: 100%;
        padding: 0 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* الصفحة الحالية | the current page */
    .mbn .mbn-item.active {
        color: var(--home-accent, #1d4ed8);
        font-weight: 600;
    }

        .mbn .mbn-item.active .mbn-pill { background: var(--home-selected, #e7eefc); }

        /* يُلغى a.active svg path { fill } من MainLayout (أيقونات خطّية) | undoes MainLayout's a.active svg path { fill } (stroke icons) */
        .mbn .mbn-item.active svg path,
        .mbn .mbn-item.active svg rect {
            fill: none;
            stroke: currentColor;
        }

    /* طلب جديد | new request */
    .mbn .mbn-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 32px;
        border-radius: 12px;
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
        box-shadow: 0 4px 10px var(--home-accent-shadow, rgba(29, 78, 216, .28));
        transition: transform .1s ease;
    }

    .mbn .mbn-item:active .mbn-pill,
    .mbn .mbn-item:active .mbn-fab { transform: scale(.94); }

    .mbn .mbn-item:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: -2px;
        border-radius: 12px;
    }

/* =====================================================================
   المرحلة 2: الشاشات الفرعية | phase 2: sub-screens
   MobileChrome (إخفاء الشريطين / رأس خاص) + MobilePageHeader (.mph) + MobileSheet (.msheet)
   | MobileChrome (hide the bars / own header) + MobilePageHeader (.mph) + MobileSheet (.msheet)
   ===================================================================== */

/* بلا شريط سفلى: لا مسافة سفلية له | no bottom bar: no bottom space for it */
.msh.msh--no-nav { --msh-nav-h: 0px; }

/* ≤768px: الحاوية (.container-fluid) بارتفاع تلقائى فلا تمرر بنفسها، لكن overflow-y: auto من site.css يجعلها
   «حاوية تمرير» فيلغى تثبيت الرأس (sticky). clip يقص الأفقى كالسابق بدون إنشاء حاوية تمرير.
   | ≤768px: the container (.container-fluid) is auto-height so it never scrolls itself, yet site.css's
   overflow-y: auto makes it a scroll container, which defeats the sticky header. clip still clips horizontally
   without creating one. (769–1024px keep the container scroll from site.css.) */
@media (max-width: 768px) {
    .msh.container-fluid {
        overflow-x: clip;
        overflow-y: visible;
    }
}

/* رأس الصفحة الخاص مكان الشريط العلوى: ثابت أعلى الشاشة أثناء التمرير، وشكله من .mph
   | the page's own header in place of the top bar: stays at the top while scrolling; its look comes from .mph */
.msh > .msh-top--custom.rz-header {
    position: sticky;
    top: 0;
    z-index: 900;
    min-height: 0;
    padding: 0 !important;
    border-bottom: 0;
    background: transparent;
}

/* ---------------------------------------------------------------------
   رأس الموبايل المشترك | shared mobile header (Shared/Mobile/MobilePageHeader.razor)
   --------------------------------------------------------------------- */
.mph {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 8px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    background: var(--home-surface, #ffffff);
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    color: var(--home-text, #0f1b2d);
}

.mph .mph-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
}

.mph .mph-titles {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-inline: 4px;
}

/* margin: 0 يلغى h1 { margin-bottom } فى MainLayout | margin: 0 undoes MainLayout's h1 { margin-bottom } */
.mph .mph-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--home-text, #0f1b2d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mph .mph-sub {
    font-size: 12px;
    line-height: 1.4;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-feature-settings: 'tnum';
}

.mph .mph-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mph .mph-extra { padding-inline: 4px; }

/* أزرار الرأس | header buttons (MobileHeaderButton + Back) */
.mph .mph-btn {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, transform .1s ease;
}

    .mph .mph-btn:active { transform: scale(.96); }
    .mph .mph-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }
    .mph .mph-btn[disabled] { opacity: .45; cursor: default; transform: none; }

    .mph .mph-btn-icon { display: inline-flex; width: 22px; height: 22px; }
    .mph .mph-btn-icon svg { display: block; width: 100%; height: 100%; }

.mph .mph-btn--icon { width: 44px; }

.mph .mph-btn--outline {
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--home-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-icon, #334155);
}

.mph .mph-btn--primary {
    height: 40px;
    padding: 0 16px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
}

.mph .mph-btn--link {
    height: 40px;
    min-width: 0;
    padding: 0 8px;
    color: var(--home-accent, #1d4ed8);
}

    .mph .mph-btn--outline .mph-btn-icon,
    .mph .mph-btn--primary .mph-btn-icon { width: 18px; height: 18px; }

/* زر تبديل مفعّل (المفضلة) | a pressed toggle (favourite) */
.mph .mph-btn.is-pressed { color: var(--home-star, #b45309); }
    .mph .mph-btn.is-pressed svg path { fill: currentColor; }

/* عدّاد الزر | button counter */
.mph .mph-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border: 2px solid var(--home-surface, #ffffff);
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--home-badge, #c2410c);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* ---------------------------------------------------------------------
   قائمة الإجراءات من الأسفل | bottom action sheet (Shared/Mobile/MobileSheet.razor)
   --------------------------------------------------------------------- */
.msheet {
    position: fixed;
    inset: 0;
    z-index: 1045;   /* فوق الشريط السفلى (1000) | above the bottom bar (1000) */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* منع تمرير الصفحة خلف القائمة | no page scroll behind the sheet */
body:has(.msheet) { overflow: hidden; }

.msheet .msheet-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--home-scrim, rgba(15, 27, 45, .45));
    cursor: default;
    animation: msheet-fade .18s ease-out;
}

.msheet .msheet-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 88dvh;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    box-shadow: 0 -10px 30px rgba(15, 27, 45, .18);
    outline: none;
    animation: msheet-up .24s cubic-bezier(.2, .8, .2, 1);
}

.msheet .msheet-grabber {
    flex: none;
    align-self: center;
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--home-grabber, #cfd6e2);
}

.msheet .msheet-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.msheet .msheet-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--home-text, #0f1b2d);
}

.msheet .msheet-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--home-chip, #f1f4f9);
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .msheet .msheet-close svg { width: 18px; height: 18px; }

.msheet .msheet-scroll {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* المربعات | tiles */
.msheet .msheet-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.msheet .msheet-tile {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 12px 4px;
    border: 0;
    border-radius: 16px;
    background: var(--home-surface-2, #f5f7fb);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.msheet .msheet-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

    .msheet .msheet-tile-icon svg { width: 20px; height: 20px; }

.msheet .msheet-tile-text { max-width: 100%; overflow-wrap: anywhere; }

.msheet .msheet-tone--blue    { background: var(--home-tone-blue-bg, #e7eefc);    color: var(--home-tone-blue, #1d4ed8); }
.msheet .msheet-tone--green   { background: var(--home-tone-green-bg, #e6f4f1);   color: var(--home-tone-green, #0b5c55); }
.msheet .msheet-tone--purple  { background: var(--home-tone-purple-bg, #f1ecfd);  color: var(--home-tone-purple, #5b21b6); }
.msheet .msheet-tone--amber   { background: var(--home-tone-amber-bg, #fff3d6);   color: var(--home-tone-amber, #7a4a00); }
.msheet .msheet-tone--red     { background: var(--home-tone-red-bg, #fdeceb);     color: var(--home-tone-red, #9f1d14); }
.msheet .msheet-tone--neutral { background: var(--home-tone-neutral-bg, #e9edf3); color: var(--home-tone-neutral, #334155); }

/* الصفوف | rows */
.msheet .msheet-list { display: flex; flex-direction: column; }

.msheet .msheet-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-top: 1px solid var(--home-divider, #eef1f6);
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.msheet .msheet-item-icon { flex: none; display: inline-flex; width: 20px; height: 20px; }
    .msheet .msheet-item-icon svg { width: 100%; height: 100%; }

.msheet .msheet-item-text { flex: 1 1 auto; min-width: 0; }

.msheet .msheet-item-hint {
    flex: none;
    font-size: 12px;
    font-weight: 400;
    color: var(--home-text-2, #4f5b6d);
}

.msheet .msheet-item--danger { color: var(--home-danger-text, #9f1d14); }

.msheet .msheet-tile:focus-visible,
.msheet .msheet-item:focus-visible,
.msheet .msheet-close:focus-visible {
    outline: 2px solid var(--home-accent, #1d4ed8);
    outline-offset: -2px;
}

.msheet .msheet-tile[disabled],
.msheet .msheet-item[disabled] { opacity: .45; cursor: default; }

/* الأجهزة اللوحية (شكل الموبايل حتى 1024px): القائمة فى المنتصف بعرض محدود
   | tablets (the mobile look up to 1024px): the sheet centred with a limited width */
@media (min-width: 600px) {
    .msheet .msheet-panel { width: min(560px, 100%); margin-inline: auto; }
}

@keyframes msheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes msheet-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .msheet .msheet-panel,
    .msheet .msheet-backdrop { animation: none; }
}


/* =====================================================================
   المرحلة 4: الرئيسية على الموبايل (شاشة 13)            | phase 4: mobile home (screen 13)
   Pages/Home.razor (فرع الموبايل .mhm) + HomeTodayCard، ImpLinksHome، CircularsDecisionsSliderHome،
   TodayRecordActionsWidget / CurrentRequestsWidget (Compact)، HomePostFeedList + PostType/*.
   الألوان: var(--home-x, <لون الوضع الفاتح من لوحة التصميم>)؛ قيم الداكن فى darkOverrid.css
   | colours: var(--home-x, <the board's light colour>); the dark values live in darkOverrid.css
   ===================================================================== */
.mhm {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 12px 20px;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    min-height: calc(100dvh - 110px);
}

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

/* ---- رأس القسم | section head ---- */
.mhm-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.mhm-sec-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.mhm .mhm-sec-title {
    flex: 1;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--home-text, #0f1b2d);
}

.mhm-sec-action {
    height: 32px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.mhm-sec-count { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.mhm-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--home-tone-neutral-bg, #f1f4f9);
    color: var(--home-text-2, #4f5b6d);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

/* الألوان المشتركة (نفس ألوان قائمة الإجراءات) | shared tones (the action sheet's) */
.mhm .tone-blue    { background: var(--home-tone-blue-bg, #e7eefc);    color: var(--home-tone-blue, #1d4ed8); }
.mhm .tone-green   { background: var(--home-tone-green-bg, #e6f4f1);   color: var(--home-tone-green, #0b5c55); }
.mhm .tone-purple  { background: var(--home-tone-purple-bg, #f1ecfd);  color: var(--home-tone-purple, #5b21b6); }
.mhm .tone-amber   { background: var(--home-tone-amber-bg, #fff3d6);   color: var(--home-tone-amber, #7a4a00); }
.mhm .tone-red     { background: var(--home-tone-red-bg, #fdeceb);     color: var(--home-tone-red, #9f1d14); }
.mhm .tone-neutral { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }

.mhm-empty {
    padding: 18px 12px;
    border: 1px dashed var(--home-border, #d5dce7);
    border-radius: 16px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 13px;
    text-align: center;
}

.mhm-skel {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: var(--home-chip, #e9edf3);
    animation: mhm-pulse 1.2s ease-in-out infinite;
}

    .mhm-skel.is-short { width: 55%; }

@keyframes mhm-pulse { 50% { opacity: .45; } }

/* ---- اليوم: الصلاة + الحضور | today: prayer + attendance ---- */
.mhm-today {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background: var(--home-hero-bg, #0f2a5c);
    color: var(--home-hero-text, #ffffff);
}

.mhm-today-top,
.mhm-today-bottom { display: flex; align-items: center; gap: 10px; }

.mhm-today-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mhm-today-date { font-size: 12px; color: var(--home-hero-muted, #bcd0f5); line-height: 1.6; }
.mhm-today-title { font-size: 17px; font-weight: 700; line-height: 1.5; }

.mhm-today-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 17px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

    .mhm-today-pill .rzi { font-size: 16px; }
    .mhm-today-pill:hover { background: rgba(255, 255, 255, .1); }

.mhm-today-sep { height: 1px; background: rgba(255, 255, 255, .18); }

.mhm-today-times {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mhm-today-time { display: flex; flex-direction: column; min-width: 0; }
.mhm-today-time span { font-size: 11px; color: var(--home-hero-muted, #bcd0f5); }
.mhm-today-time b {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: start;
    unicode-bidi: plaintext;
    white-space: nowrap;
}

.mhm-today-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: var(--home-hero-btn-bg, #ffffff);
    color: var(--home-hero-btn-text, #0f2a5c);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

    .mhm-today-btn .rzi { font-size: 18px; }

.mhm-today-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    font-size: 12px;
    line-height: 1.6;
}

    .mhm-today-note .rzi { font-size: 16px; margin-top: 2px; }

.mhm-today-pill:focus-visible,
.mhm-today-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ---- الوصول السريع | quick access ---- */
.mhm-links-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.mhm-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 12px 4px 10px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d) !important;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
}

    .mhm-link:hover { background: var(--home-hover, #f7f9fc); }
    .mhm-link:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.mhm-link-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

    .mhm-link-tile .rzi,
    .mhm-link-tile .fa { font-size: 20px; }

.mhm-link-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* long English labels ("Correspondence") hyphenate instead of breaking mid-word */
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.mhm-badge {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--home-badge, #c2410c);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* «تخصيص» داخل قائمة الإجراءات | "Customize" inside the action sheet */
.msheet .mhm-links-setting { padding: 0 4px 8px; }
.msheet .mhm-links-setting .link-option-setting { max-height: none; }

/* ---- القرارات والتعاميم | circulars & decisions ---- */
.mhm-cd .e-carousel { height: auto !important; }
.mhm-cd .e-carousel .e-carousel-items .e-carousel-item { padding: 0; }
.mhm-cd .e-carousel .e-carousel-navigators,
.mhm-cd .e-carousel .e-carousel-indicators { display: none; }

.mhm-cd-card {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 18px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .mhm-cd-card:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }

.mhm-cd-thumb {
    flex: none;
    width: 92px;
    height: 124px;
    border-radius: 8px;
    border: 1px solid var(--home-divider, #e3e8f0);
    background-color: var(--home-surface-2, #f5f7fb);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.mhm-cd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mhm-cd-card.is-skeleton .mhm-cd-body { justify-content: center; gap: 10px; }
.mhm-cd-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.mhm-cd-subject {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mhm-cd-meta { font-size: 12px; color: var(--home-text-2, #4f5b6d); line-height: 1.5; }

.mhm-dots { display: flex; gap: 5px; margin-top: auto; }

    .mhm-dots span {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: var(--home-chip, #cfd6e2);
    }

        .mhm-dots span.is-on { width: 18px; background: var(--home-accent-strong, #1d4ed8); }

/* ---- مراسلات اليوم + طلباتى الحالية | today's correspondence + my requests ---- */
.mhm-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mhm-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 18px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d) !important;
    text-decoration: none !important;
}

    .mhm-stat:hover { background: var(--home-hover, #f7f9fc); }
    .mhm-stat:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.mhm-stat-label { font-size: 12px; color: var(--home-text-2, #4f5b6d); }
.mhm-stat-value { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mhm-stat-sub { font-size: 11px; color: var(--home-text-2, #4f5b6d); line-height: 1.5; }
.mhm-stat-sub.is-warn { color: var(--home-warning-text, #7a4a00); font-weight: 600; }

/* ---- آخر المستجدات | latest updates ---- */
.mhm-feed { display: flex; flex-direction: column; gap: 8px; }
.mhm .mhm-feed-title { padding: 0 4px; }
.mhm-feed .feed-state { color: var(--home-text-2, #4f5b6d); font-size: 13px; }

.mhm-post {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 18px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
}

.mhm-post-head { display: flex; align-items: center; gap: 10px; }

.mhm-post-avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

    .mhm-post-avatar.tone-solid-blue   { background: var(--home-accent-strong, #1d4ed8); }
    .mhm-post-avatar.tone-solid-green  { background: var(--home-solid-green, #0f766e); }
    .mhm-post-avatar.tone-solid-purple { background: var(--home-solid-purple, #6d28d9); }

.mhm-post-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mhm-post-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhm-post-sub { font-size: 12px; color: var(--home-text-2, #4f5b6d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mhm-post-subject { font-size: 14px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }

.mhm-post-note {
    font-size: 13px;
    color: var(--home-text-2, #4f5b6d);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}

.mhm-post-preview {
    height: 150px;
    border-radius: 12px;
    border: 1px solid var(--home-divider, #e3e8f0);
    background-color: var(--home-surface-2, #f5f7fb);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.mhm-post-dates { display: flex; gap: 10px; font-size: 13px; color: var(--home-text, #334155); }
.mhm-post-dates span { flex: 1; min-width: 0; }
.mhm-post-dates b { font-weight: 700; white-space: nowrap; }

.mhm-post-hint { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.mhm-post-actions { display: flex; gap: 8px; }

.mhm-post-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: var(--home-chip, #f1f4f9);
    color: var(--home-text, #334155);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .mhm-post-btn .rzi { font-size: 18px; }
    .mhm-post-btn:hover { background: var(--home-chip-hover, #e6eaf1); }
    .mhm-post-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }
    .mhm-post-btn[disabled] { opacity: .6; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .mhm-skel { animation: none; }
}

/* =====================================================================
   المرحلة 5أ: نظام المراسلات — الوارد والصناديق والبحث (شاشات 1–3)
   | phase 5a: correspondence — inbox, boxes and search (screens 1–3)
   HomeMessages (.mcr-*), MessageCard (.mcr-card), MessagesTree (.mbx-*), شريط سفلى خاص (.mbn--4)
   ===================================================================== */

/* ---- هوامش RadzenBody خارج RadzenLayout | RadzenBody's margins outside a RadzenLayout ----
   RadzenBody بلا RadzenLayout يكتب هوامش ثابتة (margin-top: 51px; margin-left: 250px) للتخطيط القديم:
   مع الرأس الخاص (sticky) تظهر فجوة 51px تحته، ومع LTR (الإنجليزية) يزاح المحتوى 250px. الشريط العلوى الافتراضى
   ثابت (fixed) بارتفاع 55px فيبقى الهامش العلوى له كما هو؛ والشريط السفلى تغطيه padding-bottom أعلاه.
   | RadzenBody without a RadzenLayout writes fixed legacy margins (margin-top: 51px; margin-left: 250px): under a
   page's own (sticky) header that leaves a 51px gap, and in LTR (English) it pushes the content 250px. The default
   top bar is fixed (55px), so the top margin stays for it; the bottom bar is covered by the padding-bottom above. */
.msh > .msh-body.rz-body {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.msh > .msh-top--custom ~ .msh-body.rz-body,
.msh.msh--no-top > .msh-body.rz-body { margin-top: 0 !important; }

/* ---- الشريط السفلى الخاص (MobileChrome → Footer) | the page's own bottom bar ---- */
.msh > .msh-bottom--custom.rz-footer {
    padding: 0 !important;
    border-top: 0 !important;
    background: transparent;
}

.mbn.mbn--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mbn .mbn-pill { position: relative; }

.mbn .mbn-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    box-sizing: border-box;
    border: 2px solid var(--home-surface, #ffffff);
    background: var(--home-badge, #c2410c);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.mcr-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- رأس الوارد | the inbox header ---- */
.mcr-head,
.mcr-shead {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--home-surface, #ffffff);
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    color: var(--home-text, #0f1b2d);
}

.mcr-head {
    height: 112px;
    gap: 10px;
    padding: 8px 12px 10px;
}

.mcr-head-row,
.mcr-shead-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mcr-hbtn,
.mcr-bell .mh-noti {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .mcr-hbtn:focus-visible,
    .mcr-bell .mh-noti:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

    .mcr-hbtn:disabled { opacity: .5; cursor: default; }
    .mcr-hbtn svg { display: block; width: 22px; height: 22px; }

.mcr-hbtn--boxes {
    background: var(--home-tone-blue-bg, #eef3fd);
    color: var(--home-accent, #1d4ed8);
}

.mcr-head-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-inline-start: 4px;
}

.mcr-head-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcr-head-sub {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* الجرس: نفس NotificationCount بشكل الشريط العلوى | the bell: the same NotificationCount, styled like the top bar */
.mcr-bell { flex: none; display: inline-flex; }

.mcr-bell .mh-noti #not-menu-but-icon {
    display: block;
    width: 22px;
    height: 22px;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 8 3 8H3s3-1 3-8'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 1 1 12 0c0 7 3 8 3 8H3s3-1 3-8'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

    .mcr-bell .mh-noti #not-menu-but-icon::before { content: none; }

.mcr-bell .mh-noti .rz-badge {
    position: absolute !important;
    top: 2px !important;
    right: auto !important;
    left: auto !important;
    inset-inline-end: -1px !important;
    min-width: 21px;
    width: auto !important;
    height: 21px !important;
    padding: 0 4px !important;
    border: 2px solid var(--home-surface, #ffffff);
    border-radius: 11px;
    box-sizing: border-box;
    background-color: var(--home-badge, #c2410c) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* شريط الأنظمة | the systems strip */
.mcr-systems {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -12px;
    padding-inline: 12px;
}

    .mcr-systems::-webkit-scrollbar { display: none; }

.mcr-sys {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 17px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #334155) !important;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none !important;
}

    .mcr-sys.is-on {
        background: var(--home-accent-strong, #1d4ed8);
        border-color: var(--home-accent-strong, #1d4ed8);
        color: #ffffff !important;
        font-weight: 600;
    }

    .mcr-sys:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* ---- الصفحة | the page ---- */
.mcr {
    position: relative;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
}

/* فلاتر سريعة | quick filters */
.mcr-filters {
    box-sizing: border-box;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .mcr-filters::-webkit-scrollbar { display: none; }

.mcr-qf {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px 0 8px;
    border-radius: 10px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    background: transparent;
    color: var(--home-text-2, #334155);
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

    .mcr-qf.is-on {
        background: var(--home-filter-on-bg, #0f1b2d);
        border-color: var(--home-filter-on-bg, #0f1b2d);
        color: var(--home-filter-on-text, #ffffff);
        font-weight: 600;
    }

    .mcr-qf:disabled { opacity: .6; cursor: default; }
    .mcr-qf:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.mcr-qf-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    box-sizing: border-box;
    background: var(--home-chip, #e9edf3);
    color: inherit;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

    .mcr-qf.is-on .mcr-qf-count { background: rgba(255, 255, 255, .2); }

/* القائمة: بلا رأس/تذييل الجدول وبلا حدود؛ البطاقة من .mcr-card | the list: no grid header/footer/borders; the card comes from .mcr-card */
.mcr .mcr-list { padding: 0 8px; }

.mcr .mlist-grid.e-grid .e-gridheader,
.mcr .mlist-grid.e-grid .e-gridfooter,
.mcr .mlist-grid.e-grid .e-groupdroparea { display: none !important; }

.mcr .mlist-grid.e-grid td.e-rowcell { padding: 4px 0 !important; }

.mcr .mlist-grid.e-grid .e-content { overscroll-behavior: contain; }

.mcr .mlist-row { border-radius: 16px; }

.msg-card.msg-card--m.rz-card {
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

    .msg-card.msg-card--m.rz-card::before { content: none; }
    .msg-card.msg-card--m.rz-card:hover { box-shadow: none; }

/* ---- بطاقة المعاملة | the transaction card ---- */
.mcr-card {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--home-border, #e6eaf1);
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    cursor: pointer;
    text-align: start;
}

.msg-card.is-selected .mcr-card { border-color: var(--home-accent, #1d4ed8); }

.mcr-card--search { flex-direction: column; gap: 5px; }

.mcr-av {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

    .mcr-av .rzi { font-size: 20px; color: #ffffff; }

.mcr-tone-0 { background: var(--home-av-0, #1d4ed8); }
.mcr-tone-1 { background: var(--home-av-1, #0f766e); }
.mcr-tone-2 { background: var(--home-av-2, #7c3aed); }
.mcr-tone-3 { background: var(--home-av-3, #b45309); }
.mcr-tone-4 { background: var(--home-av-4, #be185d); }

.mcr-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mcr-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mcr-card-party {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcr-card-time {
    flex: none;
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
}

.mcr-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--home-accent-strong, #1d4ed8);
}

.mcr-pin { flex: none; display: inline-flex; color: var(--home-accent, #1d4ed8); }
.mcr-pin .rzi { font-size: 15px; }

.mcr-card-subject {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--home-text-2, #334155);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.mcr-card.is-unread .mcr-card-subject {
    font-weight: 700;
    color: var(--home-text, #0f1b2d);
}

.mcr-card--search .mcr-card-subject {
    font-weight: 600;
    color: var(--home-text, #0f1b2d);
}

.mcr-card-note {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcr-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
}

.mcr-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.mcr-chip--num {
    background: var(--home-chip, #f1f4f9);
    color: var(--home-text-2, #4f5b6d);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.mcr-tone-red { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
.mcr-tone-amber { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }
.mcr-tone-green { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }

.mcr-att {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--home-text-2, #4f5b6d);
}

/* "المزيد" فى زاوية البطاقة فلا يلتف مع الشارات | "More" in the card corner, so it never wraps with the chips */
.mcr-card-meta:has(.mcr-more) { padding-inline-end: 34px; }

.mcr-card .mcr-more.rz-button {
    position: absolute;
    inset-inline-end: 8px;
    bottom: 8px;
    width: 32px;
    height: 28px;
    min-width: 0;
    padding: 0 !important;
    border-radius: 8px;
    color: var(--home-text-2, #4f5b6d) !important;
    background: transparent !important;
}

    .mcr-card .mcr-more.rz-button .rzi { font-size: 20px; }

.mcr-card-num {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    font-variant-numeric: tabular-nums;
    text-align: start;
}

.mcr-boxchip {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1e40af);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcr-mark {
    padding: 0 2px;
    border-radius: 4px;
    background: var(--home-mark-bg, #fff1b8);
    color: var(--home-mark-text, #0f1b2d);
}

/* زر "معاملة جديدة" | the "New transaction" button */
.mcr-fab {
    position: fixed;
    z-index: 950;
    inset-inline-end: 16px;
    bottom: calc(var(--msh-nav-h, 55px) + env(safe-area-inset-bottom, 0px) + 16px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 20px 0 18px;
    border: 0;
    border-radius: 16px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 20px var(--home-accent-shadow, rgba(29, 78, 216, .28));
    cursor: pointer;
}

    .mcr-fab:active { transform: scale(.97); }
    .mcr-fab:focus-visible { outline: 3px solid var(--home-avatar-ring, #dbe6fb); outline-offset: 2px; }

/* ---- الصناديق (MessagesTree) | boxes (MessagesTree) ---- */
.mbx {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 14px 24px;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
}

.mbx-owner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--home-border, #e6eaf1);
    background: var(--home-surface, #ffffff);
}

.mbx-owner-av {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--home-selected, #dbe6fb);
}

    .mbx-owner-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mbx-owner-text { flex: 1; min-width: 0; }
.mbx-owner-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbx-owner-sub { font-size: 12px; color: var(--home-text-2, #4f5b6d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mbx-owner-switch {
    flex: none;
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--home-tone-blue-bg, #eef3fd);
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.mbx-sec { display: flex; flex-direction: column; gap: 6px; }

.mbx-sec-title,
.mcr-sec-title {
    margin: 0;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--home-text-2, #4f5b6d);
}

.mbx-list {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--home-border, #e6eaf1);
    background: var(--home-surface, #ffffff);
    overflow: hidden;
}

.mbx-row,
.mbx-row-main {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.mbx-list > .mbx-row + .mbx-row { border-top: 1px solid var(--home-divider, #eef1f6); }

.mbx-row.is-selected { background: var(--home-selected, #e7eefc); }

.mbx-row--folder { padding: 0; gap: 0; }
.mbx-row--folder .mbx-row-main { flex: 1; padding-inline-start: calc(14px + var(--mbx-depth, 0) * 18px); }

.mbx-row:focus-visible,
.mbx-row-main:focus-visible,
.mbx-more:focus-visible,
.mbx-owner-switch:focus-visible {
    outline: 2px solid var(--home-accent, #1d4ed8);
    outline-offset: -2px;
}

.mbx-ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

    .mbx-ic .rzi { font-size: 19px; }
    .mbx-ic i { font-size: 15px; }

.mbx-ic.mbx-tone-blue { background: var(--home-tone-blue-bg, #eef3fd); color: var(--home-accent, #1d4ed8); }
.mbx-ic.mbx-tone-green { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0f766e); }

.mbx-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbx-unread {
    flex: none;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

    .mbx-unread.mbx-tone-blue { background: var(--home-accent-strong, #1d4ed8); }
    .mbx-unread.mbx-tone-green { background: var(--home-solid-green, #0f766e); }

.mbx-total {
    flex: none;
    min-width: 24px;
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.mbx-dot {
    flex: none;
    width: 12px;
    height: 12px;
    margin-inline: 10px;
    border-radius: 4px;
    background: var(--home-text-muted, #94a3b8);
}

.mbx-more {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 50px;
    border: 0;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    cursor: pointer;
}

/* ---- البحث | search ---- */
.mcr-shead {
    height: 164px;
    gap: 10px;
    padding: 8px 10px 10px;
}

.mcr-sfield {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    margin: 0;
    padding: 0 12px;
    border-radius: 14px;
    border: 2px solid var(--home-accent, #1d4ed8);
    background: var(--home-surface-2, #f1f4f9);
    box-sizing: border-box;
    color: var(--home-text-2, #4f5b6d);
}

    .mcr-sfield input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--home-text, #0f1b2d);
        font: inherit;
        font-size: 15px;
    }

    .mcr-sfield svg { flex: none; width: 20px; height: 20px; }

.mcr-hbtn--go { color: var(--home-accent, #1d4ed8); }

.mcr-scope {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 4px;
}

.mcr-semantic {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 16px;
    background: var(--home-ai-bg, #f1ecfd);
    color: var(--home-ai-text, #5b21b6);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .mcr-semantic svg { width: 16px; height: 16px; }

.mcr-scope-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcr-schips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 4px;
}

    .mcr-schips::-webkit-scrollbar { display: none; }

.mcr-schip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #334155);
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

    .mcr-schip.is-on {
        border-color: var(--home-accent, #1d4ed8);
        background: var(--home-tone-blue-bg, #e7eefc);
        color: var(--home-accent, #1d4ed8);
        font-weight: 600;
    }

    .mcr-schip:focus-visible,
    .mcr-semantic:focus-visible,
    .mcr-sort:focus-visible,
    .mcr-recent-chip:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.mcr-sresult {
    box-sizing: border-box;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
}

.mcr-sresult-count { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }

.mcr-sort {
    flex: none;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.mcr-shint { display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; }
.mcr-shint p { margin: 0; padding: 0 6px; font-size: 13px; color: var(--home-text-2, #4f5b6d); }

.mcr-recent { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }

.mcr-recent-chip {
    height: 34px;
    max-width: 100%;
    padding: 0 12px;
    border-radius: 17px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #334155);
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* البحث المتقدم داخل القائمة السفلية | the advanced search inside the bottom sheet */
.mcr-adv { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 8px; }
.mcr-adv-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    .mcr-fab:active { transform: none; }
}

/* =====================================================================
   المرحلة 6: الأنظمة الأخرى (شاشات 14–16) — Pages/Cmr1/HomeMessages + MessageCard على الموبايل
   | phase 6: the other systems (screens 14–16) — Pages/Cmr1/HomeMessages + MessageCard on mobile
   طلبات التوقيع (.mcr--sig, .mcr-sig) · مكتب البريد (.mcr--post, .mcr-post) · القرارات والتعاميم (.mcr--doc, .mcr-doc)
   الألوان: --home-* (قيم الداكن فى darkOverrid.css) | colours: --home-* (dark values in darkOverrid.css)
   الارتفاعات الثابتة هنا تطابق ثوابت HomeMessages (MobileSysHead*H, MobileKpiH) | the fixed heights here match HomeMessages' constants
   ===================================================================== */

/* ---- الرأس: رجوع + الاسم + الحالة + البحث، وتحته التبويبات | the header: back + name + status + search, the tabs under it ---- */
.mph.mcr-xhead {
    box-sizing: border-box;
    gap: 4px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 0;
    overflow: hidden;
}

.mph.mcr-xhead--sig  { height: calc(101px + env(safe-area-inset-top, 0px)); }
.mph.mcr-xhead--post { height: calc(107px + env(safe-area-inset-top, 0px)); }
.mph.mcr-xhead--doc  { height: calc(97px + env(safe-area-inset-top, 0px)); }

.mph.mcr-xhead .mph-title { font-size: 19px; }
.mph.mcr-xhead .mph-extra { padding-inline: 0; }

/* تبويبات التوقيع (أقراص بعدّاد) | the signature tabs (pills with a count) */
.mcr-xtabs {
    box-sizing: border-box;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .mcr-xtabs::-webkit-scrollbar { display: none; }

.mcr-xtab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px 0 12px;
    border-radius: 17px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #334155);
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

    .mcr-xtab.is-on {
        background: var(--home-solid-purple, #5b21b6);
        border-color: var(--home-solid-purple, #5b21b6);
        color: #ffffff;
        font-weight: 600;
    }

    .mcr-xtab:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.mcr-xtab-count {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    box-sizing: border-box;
    background: var(--home-chip, #e9edf3);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

    .mcr-xtab.is-on .mcr-xtab-count { background: rgba(255, 255, 255, .22); }

/* مكتب البريد: مفتاح الوارد / الصادر | post office: the incoming / outgoing switch */
.mcr-seg {
    box-sizing: border-box;
    height: 48px;
    margin: 0 4px 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--home-surface-2, #eef1f6);
}

.mcr-seg-btn {
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

    .mcr-seg-btn.is-on {
        background: var(--home-surface, #ffffff);
        color: var(--home-accent, #1d4ed8);
        font-weight: 700;
        box-shadow: 0 1px 4px var(--home-shadow-color, rgba(15, 27, 45, .12));
    }

    .mcr-seg-btn:disabled { opacity: .5; cursor: default; }
    .mcr-seg-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* القرارات والتعاميم: تبويبات بخط سفلى | decisions & circulars: underlined tabs */
.mcr-utabs {
    box-sizing: border-box;
    height: 42px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

    .mcr-utabs::-webkit-scrollbar { display: none; }

.mcr-utab {
    flex: 1 0 auto;
    min-width: 72px;
    height: 42px;
    padding: 0 10px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

    .mcr-utab.is-on {
        color: var(--home-accent, #1d4ed8);
        border-bottom-color: var(--home-accent, #1d4ed8);
        font-weight: 700;
    }

    .mcr-utab:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }

/* شرائح نوع الوثيقة (أقراص) | the document type chips (pills) */
.mcr-qf.mcr-qf--pill { border-radius: 16px; padding: 0 14px; }

/* ---- الصفحة | the page ---- */
/* لا شريط سفلى: الزر العائم أسفل الشاشة، ومسافة تحت آخر بطاقة | no bottom bar: the floating button sits low, with room under the last card */
.mcr-fab.mcr-fab--nonav { bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }

.mcr.mcr--sys .mlist-grid.e-grid .e-content { padding-bottom: 84px; box-sizing: border-box; }

/* عدّادات مكتب البريد | the post office counters */
.mcr-kpis {
    box-sizing: border-box;
    height: 74px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px 0;
}

.mcr-kpi {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 10px;
    border-radius: 14px;
    border: 1px solid var(--home-border, #e6eaf1);
    background: var(--home-surface, #ffffff);
}

.mcr-kpi-label {
    font-size: 11px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcr-kpi-value { font-size: 20px; font-weight: 700; line-height: 1.2; font-feature-settings: 'tnum'; }
.mcr-kpi-value--amber { color: var(--home-tone-amber, #7a4a00); }
.mcr-kpi-value--blue { color: var(--home-accent, #1d4ed8); }
.mcr-kpi-value--ink { color: var(--home-text, #0f1b2d); }

/* ---- شارات مشتركة | shared badges ---- */
.mcr-tone-neutral { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }
.mcr-tone-blue { background: var(--home-tone-blue-bg, #e7eefc); color: var(--home-tone-blue, #1d4ed8); }

.mcr-kind {
    flex: none;
    max-width: 50%;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--home-tone-purple-bg, #f1ecfd);
    color: var(--home-tone-purple, #5b21b6);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .mcr-kind.mcr-kind--green { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }

/* ---- بطاقة طلب التوقيع | the signature request card ---- */
.mcr-card.mcr-sig,
.mcr-card.mcr-post { flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; }

.mcr-sig-top,
.mcr-post-top,
.mcr-doc-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mcr-sig-num,
.mcr-doc-num {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    font-feature-settings: 'tnum';
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcr-sig-top .mcr-chip,
.mcr-post-top .mcr-chip { flex: none; }

.mcr-sig-subject {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcr-sig-from {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcr-sig-more { margin-inline-start: 4px; font-weight: 600; }

.mcr-sig-prog { display: flex; align-items: center; gap: 10px; }

.mcr-sig-avs { flex: none; display: flex; }

.mcr-sig-av {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--home-surface, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    color: #ffffff;
}

    .mcr-sig-av + .mcr-sig-av { margin-inline-start: -8px; }
    .mcr-sig-av.is-wait,
    .mcr-sig-av.is-more { background: var(--home-chip, #e9edf3); color: var(--home-text-2, #4f5b6d); }
    .mcr-sig-av.is-me { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); border-color: var(--home-solid-purple, #5b21b6); }
    .mcr-sig-av.is-rejected { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); border-color: var(--home-tone-red, #9f1d14); }

.mcr-sig-meter { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mcr-sig-meter-text { font-size: 12px; color: var(--home-text-2, #334155); }

.mcr-sig-bar {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--home-chip, #e9edf3);
}

    .mcr-sig-bar > span { height: 100%; border-radius: 3px; background: var(--home-solid-green, #0f766e); }

.mcr-sig-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 8px;
    margin-top: 2px;
}

.mcr-sig-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

    .mcr-sig-btn--sign {
        border-color: var(--home-solid-purple, #5b21b6);
        background: var(--home-solid-purple, #5b21b6);
        color: #ffffff;
        font-weight: 700;
    }

    .mcr-sig-btn--sign:disabled { opacity: .7; cursor: default; }

    .mcr-sig-btn--wait {
        border-style: dashed;
        background: transparent;
        color: var(--home-text-2, #4f5b6d);
        font-size: 13px;
        font-weight: 500;
        cursor: default;
    }

    .mcr-sig-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }
    .mcr-sig-btn:active:not(:disabled):not(.mcr-sig-btn--wait) { transform: scale(.98); }

/* ---- بطاقة مكتب البريد | the post office card ---- */
.mcr-card.mcr-post { padding: 12px 14px; border-radius: 16px; }

.mcr-post-ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--home-tone-amber-bg, #fff3d6);
    color: var(--home-tone-amber, #7a4a00);
}

.mcr-post-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.mcr-post-party {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcr-post-ref {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    font-feature-settings: 'tnum';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcr-post-subject {
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcr-card.mcr-post.is-unread .mcr-post-subject { font-weight: 600; }

.mcr-post-foot { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.mcr-post-time { flex: 1; min-width: 0; font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.mcr-post-act {
    flex: none;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .mcr-post-act:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* ---- بطاقة القرار / التعميم | the decision / circular card ---- */
.mcr-card.mcr-doc { gap: 12px; padding: 12px; }

.mcr-doc-thumb {
    position: relative;
    flex: none;
    width: 64px;
    height: 86px;
    border-radius: 6px;
    border: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface-2, #f5f7fb);
    overflow: hidden;
}

.mcr-doc-ph {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .mcr-doc-ph > i { width: 14px; height: 14px; border-radius: 3px; border: 1px dashed var(--home-text-muted, #b8c1d1); align-self: center; }
    .mcr-doc-ph > b { width: 70%; height: 3px; border-radius: 2px; background: var(--home-text, #1f2a3a); align-self: center; opacity: .85; }
    .mcr-doc-ph > s { height: 2px; border-radius: 2px; background: var(--home-divider, #d9dee6); }
    .mcr-doc-ph > s.is-short { width: 80%; }

/* الصورة فوق الشكل؛ إن لم تُنشأ الصورة يبقى الشكل ظاهراً | the image over the placeholder; when no image exists the placeholder shows */
.mcr-doc-img {
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.mcr-doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.mcr-doc-subject {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--home-text, #0f1b2d);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcr-card.mcr-doc.is-unread .mcr-doc-subject { font-weight: 700; }

.mcr-doc-by {
    font-size: 12px;
    line-height: 1.5;
    color: var(--home-text-2, #4f5b6d);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcr-doc-state { font-size: 11px; font-weight: 600; }
.mcr-doc-state--amber { color: var(--home-tone-amber, #7a4a00); }
.mcr-doc-state--green { color: var(--home-tone-green, #0b5c55); }
.mcr-doc-state--blue { color: var(--home-tone-blue, #1d4ed8); }
.mcr-doc-state--neutral { color: var(--home-text-2, #4f5b6d); }
.mcr-doc-state--red { color: var(--home-tone-red, #9f1d14); }

/* =====================================================================
   المرحلة 7: الطلبات (شاشتا 17 و18) | phase 7: requests (screens 17 and 18)
   - طلب جديد (.reqm-*): Pages/Requests/RequestHome فى نافذة MainLayout.NewRequest (100%) على الموبايل
     | new request (.reqm-*): Pages/Requests/RequestHome in the MainLayout.NewRequest dialog (100%) on mobile
   - الطلبات (.reql-*): Pages/Requests/MyRequest + MyRequestTree، وبطاقات قوائم الحضور (vrg/tpr/rqg) تحتها
     | requests (.reql-*): Pages/Requests/MyRequest + MyRequestTree, and the attendance list cards (vrg/tpr/rqg) under it
   - موافقة / رفض مباشرة (.req-m-decide) ونافذة القرار (.rqe-decision, .is-chosen) | direct approve / reject and the decision dialog
   الألوان: --home-* (قيم الداكن فى darkOverrid.css) | colours: --home-* (dark values in darkOverrid.css)
   ===================================================================== */

/* ---- 17: النافذة صفحة كاملة برأسها الخاص | the dialog is a full page with its own header ---- */
.rz-dialog:has(.reqm) > .rz-dialog-titlebar { display: none !important; }

.rz-dialog:has(.reqm) { background: var(--home-canvas, #f3f5f9) !important; }

.rz-dialog:has(.reqm) > .rz-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    background: var(--home-canvas, #f3f5f9) !important;
}

.reqm {
    --reqm-bar-h: 68px;     /* شريط أوامر النموذج على الهاتف | the form's command bar on phones */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
}

.reqm-head {
    position: sticky;
    top: 0;
    z-index: 6;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 56px;
    padding: 6px 8px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    background: var(--home-surface, #ffffff);
    border-bottom: 1px solid var(--home-border, #e3e8f0);
}

.reqm-hbtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .reqm-hbtn svg { display: block; width: 22px; height: 22px; }

.reqm-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reqm-link {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    color: var(--home-accent, #1d4ed8) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

:is(.reqm-hbtn, .reqm-link, .reqm-tile):focus-visible {
    outline: 2px solid var(--home-accent, #1d4ed8);
    outline-offset: 2px;
}

.reqm-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 12px 20px;
}

.reqm-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--home-text-2, #4f5b6d);
}

/* شبكة الأنواع (3 أعمدة) | the types grid (3 columns) */
.reqm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.reqm-tile {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    margin: 0;
    padding: 10px 6px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease;
}

.reqm-tile-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--reqm-tone-bg);
    color: var(--reqm-tone);
}

    .reqm-tile-ic .rzi { font-size: 21px; }

.reqm-tile-name {
    max-width: 100%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
}

.reqm-tone-green { --reqm-tone: var(--home-tone-green, #0f766e); --reqm-tone-bg: var(--home-tone-green-bg, #e6f4f1); }
.reqm-tone-red   { --reqm-tone: var(--home-tone-red, #9f1d14);   --reqm-tone-bg: var(--home-tone-red-bg, #fdeceb); }
.reqm-tone-amber { --reqm-tone: var(--home-tone-amber, #7a4a00); --reqm-tone-bg: var(--home-tone-amber-bg, #fff3d6); }
.reqm-tone-blue  { --reqm-tone: var(--home-tone-blue, #1d4ed8);  --reqm-tone-bg: var(--home-tone-blue-bg, #eef3fd); }

.reqm-tile.is-on {
    border: 2px solid var(--home-accent, #1d4ed8);
    padding: 9px 5px;
    background: var(--home-selected, #e7eefc);
    color: var(--home-accent, #1d4ed8);
}

    .reqm-tile.is-on .reqm-tile-ic {
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
    }

.reqm-hint {
    margin: 4px 0 0;
    padding: 14px;
    border: 1px dashed var(--home-chip-border, #d5dce7);
    border-radius: 14px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 13px;
    text-align: center;
}

/* بيانات النوع المختار: العنوان + سطر المسار + النموذج | the chosen type: title + the path line + the form */
.reqm-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.reqm-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--home-text, #0f1b2d);
}

.reqm-path {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--home-tone-blue-bg, #eef3fd);
    color: var(--home-text-2, #4f5b6d);
    font-size: 12.5px;
    line-height: 1.6;
}

.reqm-path-ic {
    flex: none;
    display: inline-flex;
    margin-top: 2px;
    color: var(--home-accent, #1d4ed8);
}

    .reqm-path-ic svg { display: block; width: 16px; height: 16px; }

.reqm-path-text { min-width: 0; }
.reqm-path-label { margin-inline-end: 4px; }
.reqm-path-step { font-weight: 700; color: var(--home-text, #0f1b2d); }
.reqm-path-step.is-muted { font-weight: 400; color: var(--home-text-2, #4f5b6d); }
.reqm-path-sep { margin-inline: 4px; color: var(--home-text-2, #4f5b6d); }

/* النموذج داخل الصفحة: بلا حشوة إضافية | the form inside the page: no extra padding */
.reqm .reqm-form .rqe-root { padding: 0; }

/* الهاتف: شريط أوامر النموذج ثابت أسفل الشاشة (site.css) — بشكل اللوحة: حفظ + إرسال عريض، وسطر المسار فوقه
   | phones: the form's command bar is fixed at the bottom (site.css) — styled like the board: Save + a wide Send, the path line above it */
@media (max-width: 767px) {
    .reqm:has(.message-edit-command-div) .reqm-body {
        padding-bottom: calc(var(--reqm-bar-h) + 52px + env(safe-area-inset-bottom, 0px));
    }

    .reqm .rqe-root:has(> .message-edit-command-div) { padding-bottom: 0; }

    .reqm .rqe-root > .rqe-bar.message-edit-command-div {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: stretch !important;
        gap: 10px;
        box-sizing: border-box;
        min-height: var(--reqm-bar-h);
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid var(--home-border, #e3e8f0);
        box-shadow: 0 -6px 18px var(--home-shadow-color, rgba(15, 27, 45, .08));
    }

    .reqm .rqe-bar > * { width: auto; max-width: none; padding-inline: 0; margin-top: 0; }

    /* الشريط يحمل .row من Bootstrap (عرض 100% لكل زر) | the bar carries Bootstrap's .row (100% width per button) */
    .reqm .rqe-bar .rz-button.but-command {
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        max-width: none !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border: 1px solid var(--home-border, #e3e8f0);
        border-radius: 14px;
        background: var(--home-surface, #ffffff);
        color: var(--home-text, #0f1b2d);
    }

        .reqm .rqe-bar .rz-button.but-command .rz-button-box {
            display: inline-flex !important;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .reqm .rqe-bar .rz-button.but-command .rz-button-box i,
        .reqm .rqe-bar .rz-button.but-command .rzi { font-size: 20px !important; }

        .reqm .rqe-bar .rz-button.but-command .rz-button-text {
            display: inline !important;
            max-width: none !important;
            font-size: 15px !important;
            font-weight: 700;
        }

    .reqm .rqe-bar .rz-button.but-command.rqe-btn-primary {
        flex: 1 1 auto;
        min-width: 0;
        border-color: var(--home-accent-strong, #1d4ed8);
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
    }

        .reqm .rqe-bar .rz-button.but-command.rqe-btn-primary .rzi,
        .reqm .rqe-bar .rz-button.but-command.rqe-btn-primary .rz-button-text { color: #ffffff !important; }

    /* سطر المسار فوق زر الإرسال | the path line above the Send button */
    .reqm-card:has(.message-edit-command-div) > .reqm-path {
        position: fixed;
        inset-inline: 0;
        bottom: calc(var(--reqm-bar-h) + env(safe-area-inset-bottom, 0px));
        z-index: 100001;
        align-items: center;
        min-height: 40px;
        padding: 8px 16px;
        border-radius: 0;
        border-top: 1px solid var(--home-border, #e3e8f0);
        background: var(--home-surface, #ffffff);
        font-size: 12px;
        line-height: 1.45;
    }
}

/* الأجهزة اللوحية (≥768 بشكل الموبايل): شريط الأوامر أسفل الصفحة بدل صف العنوان المخفى
   | tablets (≥768 with the mobile shell): the command bar at the bottom instead of the hidden title row */
@media (min-width: 768px) {
    .rz-dialog .reqm .rqe-root > .rqe-bar {
        position: sticky;
        top: auto;
        bottom: 0;
        left: auto;
        right: auto;
        z-index: 3;
        height: auto;
        max-width: none;
        padding: 10px 12px;
        border-top: 1px solid var(--home-border, #e3e8f0);
        background: var(--home-surface, #ffffff);
        order: 99;
    }
}

/* شريط أوامر النماذج على الهاتف بعرض الشاشة فى الاتجاهين (site.css يلغى right فينزاح فى RTL بمقدار حشوة النافذة)
   | the forms' command bar on phones spans the screen in both directions (site.css unsets right, so RTL shifts it by the dialog padding) */
@media (max-width: 767px) {
    .rqe-root > .rqe-bar.message-edit-command-div {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
    }
}

/* ---- 18: الطلبات | requests ---- */
.reql-head {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 12px 10px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    background: var(--home-surface, #ffffff);
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    color: var(--home-text, #0f1b2d);
}

.reql-head-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

.reql-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding-inline-start: 4px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

.reql-hbtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .reql-hbtn svg { display: block; width: 22px; height: 22px; }

/* طلباتى / بانتظار موافقتى | mine / awaiting my approval */
.reql-seg {
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    height: 48px;
    padding: 4px;
    border-radius: 14px;
    background: var(--home-surface-2, #eef1f6);
}

.reql-seg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 40px;
    padding: 0 8px;
    border-radius: 10px;
    color: var(--home-text-2, #4f5b6d) !important;
    font-size: 14px;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .reql-seg-btn.is-on {
        background: var(--home-surface, #ffffff);
        color: var(--home-accent, #1d4ed8) !important;
        font-weight: 700;
        box-shadow: 0 1px 4px var(--home-shadow-color, rgba(15, 27, 45, .12));
    }

:is(.reql-hbtn, .reql-seg-btn, .reql-type):focus-visible {
    outline: 2px solid var(--home-accent, #1d4ed8);
    outline-offset: 2px;
}

/* أنواع الطلبات كشرائح | the request types as chips */
.reql {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.reql-types {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .reql-types::-webkit-scrollbar { display: none; }

.reql-type {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 18px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #334155);
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .reql-type .reql-type-ic,
    .reql-type .reql-type-ic.rzi { font-size: 18px; }

    .reql-type.is-on {
        border-color: var(--home-accent-strong, #1d4ed8);
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
        font-weight: 600;
    }

.reql-types-empty {
    padding: 8px 4px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 13px;
}

.reql-sheet-group {
    padding: 12px 16px 4px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 700;
}

.reql-body {
    min-width: 0;
    padding: 0 6px 12px;
}

/* صفحة النوع (VacationRequests …): تبويبات الوحدات بأسمائها | the type's page: the unit tabs with their names */
.reql .rql-root .rql-tabs.e-tab > .e-tab-header .e-toolbar-item .e-tab-text .e-tab-text-text { display: inline !important; }

.reql .rql-root .rql-tabs.e-tab > .e-toolbar.e-tab-header .e-toolbar-items .e-toolbar-item { flex: 0 0 auto; }

.reql .rql-root .rql-tabs.e-tab > .e-tab-header .e-toolbar-item .e-tab-text { font-size: 13px !important; }
.reql .rql-root .rql-tabs.e-tab > .e-tab-header .e-toolbar-item .e-tab-text .rzi { font-size: 20px; }

.reql .rql-root .tab-continer {
    padding: 0 !important;
    background: transparent !important;
}

.reql .rql-root .rql-note { margin: 8px 6px; }

.rql-mloading {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

/* القوائم (vrg / tpr / rqg) داخل الطلبات على الموبايل: شريط أدوات أخف وبطاقات أصغر
   | the lists (vrg / tpr / rqg) inside requests on mobile: a lighter toolbar and smaller cards */
.reql :is(.vrg-root, .tpr-root, .rqg-root) {
    gap: 6px;
    padding: 0;
}

.reql :is(.vrg-toolbar, .tpr-toolbar, .rqg-toolbar) {
    gap: 8px;
    padding: 4px 6px;
    border: 0;
    background: transparent;
}

.reql :is(.vrg-toolbar-center, .tpr-toolbar-center, .rqg-toolbar-center) {
    order: 3;
    flex: 1 1 100%;
}

.reql :is(.vrg-toolbar-end, .tpr-toolbar-end, .rqg-toolbar-end) { margin-inline-start: auto; }

.reql :is(.vrg-search-box, .tpr-search-box, .rqg-search-box) {
    max-width: none;
    background: var(--home-surface, #ffffff);
}

.reql :is(.vrg-card, .tpr-card, .rqg-card) {
    margin: 6px 6px 4px;
    border-radius: 16px;
    border-color: var(--home-border, #e3e8f0);
    box-shadow: none;
}

/* الهاتف: الحالة أعلى البطاقة، والتواريخ ومنشئ الطلب فى سطور قصيرة | phones: the state at the top of the card, dates and creator on short lines */
@media (max-width: 767px) {
    .reql :is(.vrg-card, .tpr-card, .rqg-card) { position: relative; }

    .reql :is(.vrg-card-accent, .tpr-card-accent, .rqg-card-accent) { flex-basis: 4px; height: 4px; }

    .reql :is(.vrg-card-main, .tpr-card-main, .rqg-card-main) {
        gap: 8px;
        padding: 12px 14px 8px;
    }

    .reql :is(.vrg-card-head, .tpr-card-head, .rqg-card-head) {
        gap: 6px;
        padding-inline-end: 96px;   /* مكان الحالة | room for the state */
    }

    .reql :is(.vrg-type-icon, .tpr-type-icon, .rqg-type-icon) {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .reql :is(.vrg-type-name, .tpr-type-name, .rqg-type-name) {
        font-size: 15px;
        font-weight: 700;
    }

    /* الحالة: أعلى البطاقة فى الطرف المقابل | the state: top of the card, opposite corner */
    .reql :is(.vrg-status, .tpr-status, .rqg-status) {
        position: absolute;
        top: 16px;
        inset-inline-end: 12px;
        max-width: 92px;
        margin: 0;
        padding: 0;
        border: 0;
    }

        .reql :is(.vrg-status, .tpr-status, .rqg-status) .rz-badge {
            max-width: 92px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .reql :is(.vrg-card-body, .tpr-card-body, .rqg-card-body) { gap: 6px; }

    .reql :is(.vrg-fact, .tpr-fact, .rqg-fact) { padding: 6px 10px; }

    .reql :is(.vrg-last, .tpr-last, .rqg-last) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 8px;
        padding-top: 6px;
        font-size: 12px;
    }

        .reql :is(.vrg-last, .tpr-last, .rqg-last) > * { margin: 0; }

    /* طلباتى: صاحب الطلب هو المستخدم | mine: the owner is the user */
    .reql--mine :is(.vrg-head-end, .tpr-head-end, .rqg-head-end) :is(.utv-host, .vrg-person-chip, .tpr-person-chip, .rqg-person-chip) { display: none; }

    .reql :is(.vrg-card-actions, .tpr-card-actions, .rqg-card-actions) {
        gap: 6px 8px;
        padding: 6px 12px 8px;
    }

    .reql :is(.vrg-action-icons, .tpr-action-icons, .rqg-action-icons) { margin-inline-start: auto; }
}

/* "الطلبات" فى الشريط السفلى نشطة فى صفحتَى الطلبات (طلباتى / بانتظار موافقتى) | "Requests" in the bottom bar is active on both request pages */
.msh:has(.reql) .mbn a.mbn-item[href^="myRequest/"] {
    color: var(--home-accent, #1d4ed8);
    font-weight: 600;
}

    .msh:has(.reql) .mbn a.mbn-item[href^="myRequest/"] .mbn-pill { background: var(--home-selected, #e7eefc); }

/* موافقة / رفض مباشرة على البطاقة (نفس نافذة القرار) | direct approve / reject on the card (the same decision dialog) */
.req-m-decide {
    display: flex;
    gap: 8px;
    flex: 1 1 100%;
    width: 100%;
}

    .req-m-decide .rz-button {
        flex: 1 1 0;
        min-width: 0;
        height: 42px;
        border-radius: 12px !important;
        font-size: 14px;
        font-weight: 700;
    }

        .req-m-decide .rz-button .rzi { font-size: 19px; }

    .req-m-decide .rz-button.req-m-reject {
        background: var(--home-surface, #ffffff);
        color: var(--home-tone-red, #9f1d14);
        box-shadow: inset 0 0 0 1px currentColor;
    }

/* نافذة القرار بقرار محدد | the decision dialog with a chosen decision */
.rqe-decision {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
}

    .rqe-decision .rzi { flex: none; font-size: 20px; }

    .rqe-decision.is-approve {
        background: var(--home-tone-green-bg, #e6f4f1);
        color: var(--home-tone-green, #0b5c55);
    }

    .rqe-decision.is-reject {
        background: var(--home-tone-red-bg, #fdeceb);
        color: var(--home-tone-red, #9f1d14);
    }

.rqe-bar .rz-button.but-command.is-chosen {
    box-shadow: inset 0 0 0 2px currentColor;
    border-radius: 12px;
}

@media (max-width: 767px) {
    .rqe-bar .rz-button.but-command.is-chosen {
        background: var(--home-selected, #e7eefc) !important;
    }
}

/* =====================================================================
   المرحلة 8: الدردشات (شاشتا 20 و21) — Pages/ChatApp/ChatHome على صفحة الموبايل (.cht-root.cht-m)
   | phase 8: chats (screens 20 and 21) — Pages/ChatApp/ChatHome on the mobile page (.cht-root.cht-m)
   الصفحة بلا شريطين (MobileChrome) وبرأسيها؛ قائمة ← محادثة كما هى (is-pane-*)، ولوحة المعلومات فى MobileSheet.
   | no shell bars (MobileChrome), their own headers; list → thread as before (is-pane-*), the info panel in a MobileSheet.
   الألوان: --home-* و--cht-* (قيم الداكن فى darkOverrid.css) | colours: --home-* and --cht-* (dark values in darkOverrid.css)
   ===================================================================== */

/* ---- الصفحة بملء الشاشة، عمود واحد بكل المقاسات | full screen, one column at every width ---- */
.cht-root.cht-m {
    height: 100vh;
    height: 100dvh;
    padding: 0;
    background: var(--home-canvas, #f3f5f9);
}

    .cht-root.cht-m .cht-list-pane,
    .cht-root.cht-m .cht-thread-pane {
        flex: 1 1 auto;
        margin: 0;
    }

    .cht-root.cht-m.is-pane-list .cht-thread-pane,
    .cht-root.cht-m.is-pane-thread .cht-list-pane {
        display: none;
    }

    .cht-root.cht-m .cht-back { display: inline-flex; }

/* بعرض الشاشة (يتجاوز حشوة الحاوية) | full width (past the container padding) */
.msh .cht-root.cht-m { margin-inline: calc(-1 * var(--msh-gutter, 0px)); }

    .cht-root.cht-m .cht-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

/* ---- 20: الرأس (MobilePageHeader + البحث + الفلتر) | 20: the header (MobilePageHeader + search + filter) ---- */
.cht-root.cht-m .cht-list-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    background: transparent;
}

.cht-root.cht-m .cht-list-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 12px;
    background: var(--home-surface, #ffffff);
    border-bottom: 1px solid var(--home-border, #e3e8f0);
}

.cht-root.cht-m .mph.chtm-head {
    padding: max(6px, env(safe-area-inset-top, 0px)) 0 0;
    border-bottom: 0;
    background: transparent;
}

    .cht-root.cht-m .mph.chtm-head .mph-title { font-size: 19px; }

    .cht-root.cht-m .mph.chtm-head .mph-btn.chtm-new {
        background: var(--home-tone-blue-bg, #eef3fd);
        color: var(--home-accent, #1d4ed8);
    }

.cht-root.cht-m .cht-search {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: var(--home-surface-2, #f1f4f9);
}

.cht-root.cht-m .cht-search .cht-search-input,
.cht-root.cht-m .cht-search .cht-search-input:hover,
.cht-root.cht-m .cht-search .cht-search-input:focus {
    min-height: 44px;
    font-size: 14px;
}

/* الكل / غير مقروءة: شرائح (لمسة 44px) | all / unread: chips (44px touch) */
.cht-root.cht-m .cht-seg {
    display: flex;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.cht-root.cht-m .cht-seg-btn {
    position: relative;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 18px;
    background: var(--home-surface, #ffffff);
    box-shadow: none;
    font-size: 13px;
    color: var(--home-text-2, #334155);
}

    .cht-root.cht-m .cht-seg-btn::after {
        content: "";
        position: absolute;
        inset: -5px 0;
    }

    .cht-root.cht-m .cht-seg-btn .rzi { display: none; }

    .cht-root.cht-m .cht-seg-btn.is-active,
    html .cht-root.cht-m .cht-seg-btn.is-active {
        border-color: var(--home-filter-on-bg, #0f1b2d);
        background: var(--home-filter-on-bg, #0f1b2d);
        color: var(--home-filter-on-text, #ffffff);
        font-weight: 600;
    }

    .cht-root.cht-m .cht-seg-btn .cht-seg-count {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
        font-size: 11px;
        line-height: 18px;
    }

/* المتصلون الآن | online now */
.chtm-online {
    flex: none;
    display: flex;
    gap: 6px;
    padding: 10px 10px 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .chtm-online::-webkit-scrollbar { display: none; }

.chtm-online-item {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
    min-height: 44px;
    margin: 0;
    padding: 2px 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-text-2, #334155);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .chtm-online-item:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

.cht-root .cht-avatar.chtm-online-av {
    width: 48px;
    height: 48px;
}

    .cht-root .cht-avatar.chtm-online-av .cht-dot { border-color: var(--home-canvas, #f3f5f9); }

.chtm-online-name {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* صفوف الدردشات كبطاقات | the chat rows as cards */
.cht-root.cht-m .cht-list-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 12px 0;
}

.cht-root.cht-m .cht-list-body .e-gridheader { display: none; }

.cht-root.cht-m .cht-list-body .e-row,
.cht-root.cht-m .cht-list-body .e-rowcell {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.cht-root.cht-m .cht-row {
    min-height: 68px;
    margin: 0 0 6px;
    padding: 10px 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

    .cht-root.cht-m .cht-row.is-selected { background: var(--home-surface, #ffffff); }
    .cht-root.cht-m .cht-row.is-selected::before { display: none; }

    .cht-root.cht-m .cht-row .cht-avatar {
        width: 48px;
        height: 48px;
    }

.cht-root.cht-m .cht-row-name { font-size: 14px; }
.cht-root.cht-m .cht-row-time { font-size: 11px; }
.cht-root.cht-m .cht-row-preview { font-size: 13px; }

.cht-root.cht-m .cht-row.is-unread .cht-row-time {
    color: var(--home-accent, #1d4ed8);
    font-weight: 600;
}

.cht-root.cht-m .cht-unread-dot {
    width: 10px;
    height: 10px;
    background: var(--home-accent-strong, #1d4ed8);
}

.chtm-muted {
    flex: none;
    display: inline-flex;
    color: var(--home-text-2, #4f5b6d);
}

    .chtm-muted svg { width: 14px; height: 14px; }

.cht-root.cht-m .cht-list-foot {
    padding: 4px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    border: 0;
    background: transparent;
}

/* ---- 21: المحادثة بملء الشاشة | 21: the thread, full screen ---- */
.cht-root.cht-m .chat.cht-thread {
    border-radius: 0;
    box-shadow: none;
}

.cht-root.cht-m .chat.cht-thread .header.cht-thread-head {
    gap: 4px;
    min-height: 64px;
    padding: 8px 6px;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.cht-root.cht-m .cht-icon-btn.cht-back {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.cht-root.cht-m .cht-head-who {
    gap: 10px;
    min-height: 44px;
    padding: 0 4px;
}

    .cht-root.cht-m .cht-head-who .cht-avatar.is-md {
        width: 42px;
        height: 42px;
    }

.cht-root.cht-m .cht-head-name { font-size: 15px; font-weight: 700; }
.cht-root.cht-m .cht-head-sub { display: none; }
.cht-root.cht-m .cht-head-presence { font-size: 12px; }

/* الرأس: فيديو + معلومات فقط (البحث والكتم فى لوحة المعلومات) | header: video + info only (search and mute live in the info panel) */
.cht-root.cht-m .cht-head-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .cht-root.cht-m .cht-head-actions > .rz-button.cht-head-btn:not(.cht-info-sheet-btn) { display: none; }

    .cht-root.cht-m .cht-head-actions > .rz-button.cht-info-sheet-btn {
        display: inline-flex;
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

.chtm-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--home-tone-green-bg, #e6f4f1);
    color: var(--home-tone-green, #0b5c55) !important;
    text-decoration: none !important;
}

    .chtm-video svg { width: 22px; height: 22px; }

    .chtm-video:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

/* الرسائل | messages */
.cht-root.cht-m .chat.cht-thread .messages.cht-messages {
    gap: 4px;
    padding: 12px 12px 10px;
}

.cht-root.cht-m .chat.cht-thread .messages > li.cht-intro { display: none; }

.cht-root.cht-m .chat.cht-thread .messages > li.chtm-enc {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 92%;
    margin: 0 0 4px;
    padding: 5px 10px;
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #4f5b6d);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

    .cht-root.cht-m .chat.cht-thread .messages > li.chtm-enc svg {
        flex: none;
        width: 12px;
        height: 12px;
    }

.cht-root.cht-m .cht-day span {
    font-size: 11px;
    font-weight: 600;
}

.cht-root.cht-m .cht-bubble {
    max-width: 80%;
    padding: 8px 12px 6px;
    border-radius: 18px;
    border-end-start-radius: 6px;
}

.cht-root.cht-m .cht-msg.is-own .cht-bubble {
    border-end-start-radius: 18px;
    border-end-end-radius: 6px;
}

.cht-root.cht-m .cht-text {
    font-size: 14px;
    line-height: 1.6;
}

.cht-root.cht-m .cht-meta { font-size: 10px; }

.cht-root.cht-m .chat.cht-thread .messages .cht-file {
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
}

.cht-root.cht-m .cht-file-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.cht-root.cht-m .cht-audio audio {
    width: 220px;
    max-width: 100%;
    height: 40px;
}

/* شريط الكتابة: إرفاق، الخانة، (إعجاب)، ميكروفون ↔ إرسال حسب وجود نص | the composer: attach, the field, (like), microphone ↔ send by whether there is text */
.cht-root.cht-m .chat.cht-thread .footer.cht-composer {
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.cht-root.cht-m .cht-composer-bar:not(.cht-rec-bar) {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

    .cht-root.cht-m .cht-composer-bar:not(.cht-rec-bar):focus-within {
        background: transparent;
        box-shadow: none;
    }

.cht-root.cht-m .cht-composer-bar > .cht-attach { order: 0; }
.cht-root.cht-m .cht-composer-bar > .cht-upload-progress { order: 1; }
.cht-root.cht-m .cht-composer-bar > .cht-input { order: 2; }
.cht-root.cht-m .cht-composer-bar > .cht-like-btn { order: 3; }
.cht-root.cht-m .cht-composer-bar > .cht-mic-btn { order: 4; }

.cht-root.cht-m .chat.cht-thread .footer .text-box.cht-input {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: 22px;
    background: var(--home-surface-2, #f1f4f9);
    line-height: 1.45;
}

    .cht-root.cht-m .chat.cht-thread .footer .text-box.cht-input:focus {
        border-color: var(--home-accent, #1d4ed8);
    }

.cht-root.cht-m .rz-button.cht-icon-btn,
.cht-root.cht-m .cht-upload .rz-fileupload-choose {
    width: 44px !important;
    height: 44px !important;
}

/* الميكروفون والإرسال: الزر الرئيسى المستدير | microphone and send: the round main button */
.cht-root.cht-m .rz-button.cht-icon-btn.cht-mic-btn {
    background: var(--home-accent-strong, #1d4ed8) !important;
    color: #ffffff !important;
}

.cht-root.cht-m .chat.cht-thread .footer .rz-button.but-chat-send.cht-send {
    width: 44px;
    height: 44px;
    background: var(--home-accent-strong, #1d4ed8) !important;
    box-shadow: none;
}

/* بلا نص: يظهر الميكروفون ويختفى الإرسال؛ بنص: العكس (خارج التسجيل) | no text: the microphone shows, Send hides; with text: the reverse (outside recording) */
.cht-root.cht-m .chat.cht-thread .footer.cht-composer:not(:has(.cht-rec-bar)):has(.cht-input:empty) > .rz-button.cht-send { display: none; }
.cht-root.cht-m .chat.cht-thread .footer.cht-composer:has(.cht-input:not(:empty)) .rz-button.cht-mic-btn { display: none; }

/* شريط التسجيل | the recording bar */
.cht-root.cht-m .cht-composer-bar.cht-rec-bar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 6px 0 0;
    border: 0;
    border-radius: 22px;
    background: var(--home-surface-2, #f1f4f9);
}

    .cht-root.cht-m .cht-composer-bar.cht-rec-bar .rz-button.cht-rec-cancel {
        background: var(--home-tone-red-bg, #fdeceb) !important;
        color: var(--home-tone-red, #9f1d14) !important;
    }

.cht-root.cht-m .cht-rec {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--home-tone-red, #9f1d14);
}

/* ---- لوحة المعلومات فى MobileSheet | the info panel in a MobileSheet ---- */
.cht-root.chtm-info-root {
    display: block;
    height: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
}

    .cht-root.chtm-info-root .chat-info-panel {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 4px 8px;
        background: transparent;
    }

    .cht-root.chtm-info-root .cht-info-close { display: none; }

    .cht-root.chtm-info-root .chat-info-action,
    .cht-root.chtm-info-root .chat-info-head,
    .cht-root.chtm-info-root .chat-info-subrow,
    .cht-root.chtm-info-root .chat-search-hit { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    .cht-root.cht-m * { transition: none !important; }
}

/* =====================================================================
   المرحلة 9: اسأل سفر (شاشات 22–25) — Pages/ChatAi على صفحة الموبايل /chatAiHome (.aim, .aim-*, .aiset-*)
   | phase 9: Ask SAFAR (screens 22–25) — Pages/ChatAi on the mobile page /chatAiHome (.aim, .aim-*, .aiset-*)
   - 22 ChatAiHome (.chat-container.aim): بلا شريطين، الرأس (رجوع، السجل، العنوان، محادثة جديدة)، البداية، الفقاعات، Markdown، الكتابة
     | no shell bars, the header (back, history, title, new chat), the start screen, bubbles, Markdown, the composer
   - 23 السجل (.sidebar.aim): لوحة من جهة البداية | the history (.sidebar.aim): a panel from the start side
   - 24 ChatAiPostActions: الأدوات تحت الرد (.aim-tools) وقائمة «استخدام الرد» (.aim-use-*) | the toolbar and the "Use the answer" sheet
   - 25 Settings (.aiset-m) فى نافذة Radzen بملء الشاشة | Settings (.aiset-m) in a full-screen Radzen dialog
   الألوان: --home-* (قيم الداكن فى darkOverrid.css) والدرج على سطح المكتب كما هو | colours: --home-* (dark values in darkOverrid.css); the desktop drawer is unchanged
   ===================================================================== */

/* نص لقارئ الشاشة فقط | screen-reader-only text */
.aim-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- 22: الصفحة بملء الشاشة | 22: the page, full screen ---- */
.chat-container.aim {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border: 0;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

/* بعرض الشاشة (يتجاوز حشوة الحاوية) | full width (past the container padding) */
.msh .chat-container.aim { margin-inline: calc(-1 * var(--msh-gutter, 0px)); }

/* الرأس: رجوع · السجل · العنوان فى الوسط · محادثة جديدة | the header: back · history · centred title · new chat */
.chat-container.aim .mph.aim-head {
    flex: none;
    padding-inline: 8px;
    border-bottom: 0;
    background: transparent;
}

    .chat-container.aim .mph.aim-head .mph-titles {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding-inline: 0;
    }

    .chat-container.aim .mph.aim-head .aim-title {
        flex: 1 1 auto;
        min-width: 0;
        padding-inline-end: 44px;   /* يوازن زر السجل فيبقى العنوان فى وسط الشاشة | balances the history button so the title sits mid-screen */
        font-size: 16px;
        text-align: center;
    }

/* ---- الرسائل | the messages ---- */
.chat-container.aim .chat-messages {
    padding: 6px 16px 10px;
    gap: 16px;
}

.chat-container.aim .msg { animation: none; }

/* سؤال المستخدم: فقاعة فى جهة النهاية | the user's question: a bubble at the end side */
.chat-container.aim .msg.aim-q {
    position: relative;
    align-self: flex-end;
    max-width: 82%;
}

.chat-container.aim .aim-bubble {
    min-width: 0;
    padding: 10px 14px;
    border-radius: 20px;
    background: var(--home-tone-neutral-bg, #f1f4f9);
    color: var(--home-text, #0f1b2d);
}

    .chat-container.aim .aim-bubble .msg-text {
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        font-size: 14px;
        line-height: 1.7;
    }

    .chat-container.aim .aim-bubble .msg-voice-badge { margin-bottom: 6px; }

/* بطاقة المرفق | the attachment card */
.chat-container.aim .aim-atts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.chat-container.aim .msg-ai .aim-atts { margin: 0; }

.chat-container.aim .aim-att {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 8px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    text-decoration: none;
}

    .chat-container.aim .aim-att-ext {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .02em;
    }

    .chat-container.aim .aim-att-name {
        min-width: 0;
        overflow: hidden;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
        unicode-bidi: plaintext;
    }

.aim-ext--red { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
.aim-ext--blue { background: var(--home-tone-blue-bg, #eef3fd); color: var(--home-tone-blue, #1d4ed8); }
.aim-ext--green { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
.aim-ext--purple { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); }
.aim-ext--neutral { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }

/* رد سفر: بلا فقاعة، بأيقونته | SAFAR's answer: no bubble, with its mark */
.chat-container.aim .msg.aim-a {
    align-self: stretch;
    max-width: 100%;
    gap: 10px;
}

.chat-container.aim .aim-av {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--home-ai-bg, #f1ecfd);
    color: var(--home-ai-text, #5b21b6);
}

    .chat-container.aim .aim-av svg { width: 16px; height: 16px; }

.chat-container.aim .aim-a .msg-body {
    flex: 1 1 auto;
    gap: 8px;
}

.chat-container.aim .msg-ai .msg-text {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
    line-height: 1.75;
}

/* Markdown منسّق (لا ** ولا # خام) | formatted Markdown (no raw ** or #) */
.chat-container.aim .aim-md { white-space: normal; }

    .chat-container.aim .aim-md > div { display: flex; flex-direction: column; gap: 8px; }
    .chat-container.aim .aim-md h1,
    .chat-container.aim .aim-md h2,
    .chat-container.aim .aim-md h3,
    .chat-container.aim .aim-md h4,
    .chat-container.aim .aim-md h5,
    .chat-container.aim .aim-md h6 {
        margin: 4px 0 0;
        color: var(--home-text, #0f1b2d);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
    }

    .chat-container.aim .aim-md h1 { font-size: 17px; }
    .chat-container.aim .aim-md h2 { font-size: 16px; }
    .chat-container.aim .aim-md > div > :first-child { margin-top: 0; }
    .chat-container.aim .aim-md p { margin: 0; }
    .chat-container.aim .aim-md ul,
    .chat-container.aim .aim-md ol { margin: 0; padding-inline-start: 20px; }
    .chat-container.aim .aim-md ul,
    .chat-container.aim .aim-md ol { overflow: visible; }
    .chat-container.aim .aim-md ul > li { display: list-item; list-style: disc outside; }
    .chat-container.aim .aim-md ol > li { display: list-item; list-style: decimal outside; }
    .chat-container.aim .aim-md li + li { margin-top: 4px; }
    .chat-container.aim .aim-md li::marker { color: var(--home-text-2, #4f5b6d); }
    .chat-container.aim .aim-md strong { font-weight: 700; }
    .chat-container.aim .aim-md a { color: var(--home-accent, #1d4ed8); text-decoration: underline; }
    .chat-container.aim .aim-md hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--home-border, #e3e8f0); }

    /* الاقتباس (مثل «الرد المقترح») كصندوق | a quote (like "the suggested reply") as a box */
    .chat-container.aim .aim-md blockquote {
        margin: 0;
        padding: 10px 12px;
        border: 1px solid var(--home-border, #e3e8f0);
        border-radius: 12px;
        background: var(--home-surface-2, #f5f7fb);
        color: var(--home-text, #0f1b2d);
    }

    .chat-container.aim .aim-md code {
        padding: 1px 5px;
        border-radius: 6px;
        background: var(--home-surface-2, #f5f7fb);
        font-size: 13px;
        unicode-bidi: plaintext;
    }

    /* الكود والجداول تمرّر داخلها فقط (لا تمرير أفقى للصفحة) | code and tables scroll inside themselves (no horizontal page scroll) */
    .chat-container.aim .aim-md pre {
        max-width: 100%;
        margin: 0;
        padding: 10px 12px;
        overflow-x: auto;
        border-radius: 12px;
        background: var(--home-surface-2, #f5f7fb);
        direction: ltr;
        text-align: left;
    }

        .chat-container.aim .aim-md pre code { padding: 0; background: transparent; white-space: pre; }

    .chat-container.aim .aim-md table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
        font-size: 13px;
    }

    .chat-container.aim .aim-md th,
    .chat-container.aim .aim-md td {
        padding: 6px 8px;
        border: 1px solid var(--home-border, #e3e8f0) !important;
        text-align: start;
        vertical-align: top;
    }

    .chat-container.aim .aim-md th { background: var(--home-surface-2, #f5f7fb); font-weight: 700; }

/* رسالة خطأ (Ollama لا يعمل…) | an error notice (Ollama unreachable…) */
.chat-container.aim .aim-err .msg-text {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--home-tone-red-bg, #fdeceb);
    color: var(--home-tone-red, #9f1d14);
}

/* سفر يكتب | SAFAR is typing */
.chat-container.aim .aim-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
}

    .chat-container.aim .aim-typing i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--home-ai-text, #5b21b6);
        animation: aim-dot 1.2s infinite;
    }

        .chat-container.aim .aim-typing i:nth-of-type(2) { animation-delay: .2s; }
        .chat-container.aim .aim-typing i:nth-of-type(3) { animation-delay: .4s; }

@keyframes aim-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---- شاشة البداية «كيف أساعدك اليوم؟» | the start screen "How can I help you today?" ---- */
.chat-container.aim .aim-start {
    margin-block: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.chat-container.aim .aim-start-logo {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--home-ai-bg, #f1ecfd);
    color: var(--home-ai-text, #5b21b6);
}

    .chat-container.aim .aim-start-logo svg { width: 28px; height: 28px; }

.chat-container.aim .aim-start-title {
    margin: -10px 0 0;
    color: var(--home-text, #0f1b2d);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.chat-container.aim .aim-start-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.chat-container.aim .aim-sug {
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .chat-container.aim .aim-sug:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .chat-container.aim .aim-sug:active { background: var(--home-hover, #f7f9fc); }
    .chat-container.aim .aim-sug:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }
    .chat-container.aim .aim-sug-title { font-size: 13px; font-weight: 600; }
    .chat-container.aim .aim-sug-sub { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

/* ---- 24: الأدوات تحت الرد | 24: the toolbar under the answer ---- */
.chat-container.aim .aim-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: -2px;
}

.chat-container.aim .aim-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-inline-start: -10px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .chat-container.aim .aim-tool svg { width: 18px; height: 18px; }
    .chat-container.aim .aim-tool.is-done { color: var(--home-success-text, #0b5c55); }

.chat-container.aim .aim-use {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin-inline-start: auto;
    padding: 0 12px;
    border: 0;
    border-radius: 18px;
    background: var(--home-ai-bg, #f1ecfd);
    color: var(--home-ai-text, #5b21b6);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .chat-container.aim .aim-use::after { content: ""; position: absolute; inset: -4px 0; }   /* لمسة 44px | 44px touch */
    .chat-container.aim .aim-use svg { width: 16px; height: 16px; }

    .chat-container.aim .aim-tool:focus-visible,
    .chat-container.aim .aim-use:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

    .chat-container.aim .aim-tool:disabled,
    .chat-container.aim .aim-use:disabled { opacity: .5; cursor: default; }

/* ---- الكتابة: صندوق دائرى (الخانة فوق، الأزرار تحت) | the composer: a rounded box (the field on top, the buttons below) ---- */
.chat-container.aim .chat-input-area {
    padding: 6px 12px max(12px, env(safe-area-inset-bottom, 0px));
    border-top: 0;
    background: var(--home-surface, #ffffff);
}

.chat-container.aim .input-attach-preview {
    min-height: 44px;
    margin-bottom: 6px;
    padding: 4px;
    padding-inline-start: 12px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 14px;
    background: var(--home-surface-2, #f5f7fb);
    color: var(--home-text, #0f1b2d);
    font-size: 13px;
}

    .chat-container.aim .input-attach-preview .attach-remove {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        color: var(--home-text-2, #4f5b6d);
    }

.chat-container.aim .chat-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "text text text text"
        "att  .    mic  send";
    align-items: center;
    gap: 6px 4px;
    padding: 8px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 26px;
    background: var(--home-surface, #ffffff);
    box-shadow: 0 4px 16px var(--home-shadow-color, rgba(15, 27, 45, .06));
}

    .chat-container.aim .chat-input:focus-within { border-color: var(--home-accent, #1d4ed8); }

    .chat-container.aim .chat-input textarea {
        grid-area: text;
        min-height: 32px;
        padding: 4px 8px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--home-text, #0f1b2d);
        font-size: 15px;
        box-shadow: none;
    }

        .chat-container.aim .chat-input textarea:focus { border: 0; box-shadow: none; }
        .chat-container.aim .chat-input textarea::placeholder { color: var(--home-text-2, #4f5b6d); }

    .chat-container.aim .chat-input .btn-attach,
    .chat-container.aim .chat-input .btn-voice,
    .chat-container.aim .chat-input .btn-send {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        box-shadow: none;
        line-height: 0;
    }

        .chat-container.aim .chat-input .btn-attach::after,
        .chat-container.aim .chat-input .btn-voice::after,
        .chat-container.aim .chat-input .btn-send::after { content: ""; position: absolute; inset: -3px; }   /* لمسة 44px | 44px touch */

    .chat-container.aim .chat-input .btn-attach {
        grid-area: att;
        border: 1px solid var(--home-chip-border, #d5dce7);
        background: transparent;
        color: var(--home-icon, #334155);
    }

    .chat-container.aim .chat-input .btn-voice,
    .chat-container.aim .chat-input .voice-active { grid-area: mic; }

    .chat-container.aim .chat-input .btn-voice {
        border: 0;
        background: transparent;
        color: var(--home-icon, #334155);
    }

        .chat-container.aim .chat-input .btn-voice.btn-voice-active {
            background: var(--home-tone-blue-bg, #eef3fd);
            color: var(--home-tone-blue, #1d4ed8);
        }

        .chat-container.aim .chat-input .btn-attach:hover,
        .chat-container.aim .chat-input .btn-voice:hover:not(:disabled) { background: var(--home-hover, #f7f9fc); }

    .chat-container.aim .chat-input .voice-active { gap: 6px; }
    .chat-container.aim .chat-input .voice-timer { min-width: 0; color: var(--home-danger-text, #9f1d14); font-size: 12px; }

    .chat-container.aim .chat-input .btn-send {
        grid-area: send;
        border: 0;
        background: var(--home-filter-on-bg, #0f1b2d);
        color: var(--home-filter-on-text, #ffffff);
    }

        .chat-container.aim .chat-input .btn-send:hover:not(:disabled) { transform: none; background: var(--home-filter-on-bg, #0f1b2d); }

        /* يتفعّل بالكتابة | enabled once there is text */
        .chat-container.aim .chat-input .btn-send:disabled {
            background: var(--home-grabber, #cfd6e2);
            color: var(--home-surface, #ffffff);
        }

        .chat-container.aim .chat-input .aim-send-ic { display: inline-flex; width: 18px; height: 18px; }
        .chat-container.aim .chat-input .aim-send-ic svg { width: 100%; height: 100%; }

    .chat-container.aim .chat-input .btn-attach:focus-visible,
    .chat-container.aim .chat-input .btn-voice:focus-visible,
    .chat-container.aim .chat-input .btn-send:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.chat-container.aim .voice-error { padding: 0 8px 6px; color: var(--home-danger-text, #9f1d14); font-size: 12px; }

/* «قد يخطئ سفر» | "SAFAR can make mistakes" */
.chat-container.aim .chat-footer.aim-note {
    padding-block-start: 6px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 11px;
    line-height: 1.5;
}

/* ---- 23: سجل المحادثات — لوحة من جهة البداية | 23: the conversation history — a panel from the start side ---- */
.sidebar-overlay.aim { background: var(--home-scrim, rgba(15, 27, 45, .45)); }

.sidebar.aim {
    width: min(310px, 86vw);
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border: 0;
    background: var(--home-canvas, #f7f8fb);
    color: var(--home-text, #0f1b2d);
    box-shadow: 0 0 30px rgba(15, 27, 45, .18);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
}

    .sidebar.aim[dir="rtl" i] { transform: translateX(100%); }
    .sidebar.aim[dir="ltr" i] { transform: translateX(-100%); }

    .sidebar.aim.sidebar-open {
        transform: none !important;
        visibility: visible;
        transition: transform .3s ease, visibility 0s;
    }

.sidebar.aim .aim-ibtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .sidebar.aim .aim-ibtn svg { width: 20px; height: 20px; }

.sidebar.aim .aim-side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 8px;
}

.sidebar.aim .aim-side-brand { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }

.sidebar.aim .aim-side-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--home-ai-bg, #f1ecfd);
    color: var(--home-ai-text, #5b21b6);
}

    .sidebar.aim .aim-side-logo svg { width: 18px; height: 18px; }

.sidebar.aim .aim-side-name { font-size: 16px; font-weight: 700; }

.sidebar.aim .aim-side-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin: 0 12px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--home-chip, #e9edf3);
    color: var(--home-text-2, #4f5b6d);
}

    .sidebar.aim .aim-side-search svg { flex: none; width: 17px; height: 17px; }

    .sidebar.aim .aim-side-search input {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--home-text, #0f1b2d);
        font: inherit;
        font-size: 14px;
    }

        .sidebar.aim .aim-side-search input::placeholder { color: var(--home-text-2, #4f5b6d); }

    .sidebar.aim .aim-side-search:focus-within { box-shadow: 0 0 0 2px var(--home-accent, #1d4ed8); }

.sidebar.aim .aim-side-new {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin: 8px 12px 4px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .sidebar.aim .aim-side-new svg { width: 20px; height: 20px; }

.sidebar.aim .aim-side-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
    overflow-y: auto;
}

.sidebar.aim .aim-side-group {
    margin: 0;
    padding: 12px 10px 4px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.sidebar.aim .aim-side-item {
    display: flex;
    align-items: center;
    border-radius: 12px;
}

    .sidebar.aim .aim-side-item.is-on { background: var(--home-chip, #e9edf3); }
    .sidebar.aim .aim-side-item.is-on .aim-side-title { font-weight: 600; }

.sidebar.aim .aim-side-open {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
}

.sidebar.aim .aim-side-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.sidebar.aim .aim-side-del { color: var(--home-text-2, #4f5b6d); }

    .sidebar.aim .aim-side-del svg { width: 18px; height: 18px; }

.sidebar.aim .sidebar-empty { padding: 24px 12px; color: var(--home-text-2, #4f5b6d); font-size: 13px; }

.sidebar.aim .aim-side-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px;
    padding: 10px;
    border: 0;
    border-top: 1px solid var(--home-border, #e3e8f0);
    border-radius: 14px;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .sidebar.aim .aim-side-user > svg { flex: none; width: 20px; height: 20px; color: var(--home-text-2, #4f5b6d); }

.sidebar.aim .aim-side-av { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.sidebar.aim .aim-side-user-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sidebar.aim .aim-side-user-name { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sidebar.aim .aim-side-user-sub { color: var(--home-text-2, #4f5b6d); font-size: 12px; }

.sidebar.aim .aim-side-open:focus-visible,
.sidebar.aim .aim-side-new:focus-visible,
.sidebar.aim .aim-side-user:focus-visible,
.sidebar.aim .aim-ibtn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }

/* ---- 24: قائمة «استخدام الرد» (MobileSheet فى جذر MobileLayout) | 24: the "Use the answer" sheet (a MobileSheet at MobileLayout's root) ---- */
.aim-use-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 6px;
}

.aim-use-hint { margin: 0; color: var(--home-text-2, #4f5b6d); font-size: 12px; line-height: 1.5; }

.aim-use-label { color: var(--home-text-2, #4f5b6d); font-size: 12px; font-weight: 600; }

.aim-use-preview {
    display: -webkit-box;
    max-height: calc(4 * 1.7em + 20px);
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 14px;
    background: var(--home-surface-2, #f5f7fb);
    color: var(--home-text, #0f1b2d);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    unicode-bidi: plaintext;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.msheet .msheet-tiles.aim-use-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* المعاينة منسّقة — نفس HTML الذى يصل إلى المحرّر (المرحلة 9ب) | the preview formatted — the same HTML the editor receives (phase 9b) */
.aim-use-preview.aim-use-preview--md {
    display: block;
    max-height: 132px;
    white-space: normal;
    -webkit-line-clamp: unset;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

    .aim-use-preview--md > div { display: flex; flex-direction: column; gap: 4px; }

    .aim-use-preview--md h1,
    .aim-use-preview--md h2,
    .aim-use-preview--md h3,
    .aim-use-preview--md h4,
    .aim-use-preview--md h5,
    .aim-use-preview--md h6 { margin: 0; color: inherit; font-size: 13px; font-weight: 700; line-height: 1.6; }

    .aim-use-preview--md p,
    .aim-use-preview--md blockquote { margin: 0; }
    .aim-use-preview--md blockquote { padding-inline-start: 8px; border-inline-start: 2px solid var(--home-border, #e3e8f0); }
    .aim-use-preview--md ul,
    .aim-use-preview--md ol { margin: 0; padding-inline-start: 18px; overflow: visible; }
    .aim-use-preview--md ul > li { display: list-item; list-style: disc outside; }
    .aim-use-preview--md ol > li { display: list-item; list-style: decimal outside; }
    .aim-use-preview--md a { color: var(--home-accent, #1d4ed8); }
    .aim-use-preview--md pre { margin: 0; overflow-x: auto; direction: ltr; text-align: left; white-space: pre; }
    .aim-use-preview--md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 12px; }
    .aim-use-preview--md th,
    .aim-use-preview--md td { padding: 2px 6px; border: 1px solid var(--home-border, #e3e8f0) !important; }

/* ---- 25: إعدادات اسأل سفر — نافذة بملء الشاشة برأسها | 25: Ask SAFAR settings — a full-screen dialog with its own header ---- */
.rz-dialog:has(.aiset-m) > .rz-dialog-titlebar { display: none !important; }

.rz-dialog:has(.aiset-m) {
    border-radius: 0 !important;
    background: var(--home-canvas, #f3f5f9) !important;
}

.rz-dialog:has(.aiset-m) > .rz-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    background: var(--home-canvas, #f3f5f9) !important;
}

.aiset-m {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

.aiset-m .aiset-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px;
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.aiset-m .aiset-back {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .aiset-m .aiset-back svg { width: 22px; height: 22px; }

.aiset-m .aiset-title { flex: 1 1 auto; margin: 0; color: var(--home-text, #0f1b2d); font-size: 17px; font-weight: 700; }

.aiset-m .aiset-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.aiset-m .aiset-sec { display: flex; flex-direction: column; gap: 6px; }

.aiset-m .aiset-sec-title { margin: 0; padding: 0 6px; color: var(--home-text-2, #4f5b6d); font-size: 12px; font-weight: 600; }

.aiset-m .aiset-card {
    display: flex;
    flex-direction: column;
    padding: 0 14px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.aiset-m .aiset-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px 0;
}

    .aiset-m .aiset-field + .aiset-field { border-top: 1px solid var(--home-divider, #eef1f6); }

.aiset-m .aiset-label { color: var(--home-text, #0f1b2d); font-size: 13px; font-weight: 600; }
.aiset-m .aiset-label--row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aiset-m .aiset-value { color: var(--home-text-2, #4f5b6d); font-variant-numeric: tabular-nums; }

.aiset-m .aiset-field input[type="text"],
.aiset-m .aiset-field input[type="number"],
.aiset-m .aiset-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    outline: none;
}

    .aiset-m .aiset-field textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

    .aiset-m .aiset-field input:focus,
    .aiset-m .aiset-field textarea:focus { border-color: var(--home-accent, #1d4ed8); box-shadow: 0 0 0 3px var(--home-selected, #e7eefc); }

.aiset-m .aiset-field input[type="range"] {
    width: 100%;
    height: 44px;
    margin: 0;
    accent-color: var(--home-ai-text, #5b21b6);
}

.aiset-m .aiset-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.aiset-m .aiset-saved {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--home-success-text, #0b5c55);
    font-size: 13px;
    font-weight: 600;
}

    .aiset-m .aiset-saved svg { width: 16px; height: 16px; }

.aiset-m .aiset-save {
    min-width: 120px;
    height: 44px;
    margin-inline-start: auto;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .aiset-m .aiset-back:focus-visible,
    .aiset-m .aiset-save:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* ---- بلا حركة عند الطلب | no motion on request ---- */
@media (prefers-reduced-motion: reduce) {
    .chat-container.aim .chat-messages { scroll-behavior: auto; }
    .chat-container.aim .aim-typing i { animation: none; opacity: .6; }
    .sidebar.aim,
    .sidebar.aim.sidebar-open { transition: none; }
}

/* =====================================================================
   المرحلة 10 (أ): الاجتماعات المرئية (شاشات 26–28) — Pages/Meetings على صفحة الموبايل /videoMeetings (.vmm, .vmm-*)
   | phase 10 (a): video meetings (screens 26–28) — Pages/Meetings on the mobile page /videoMeetings (.vmm, .vmm-*)
   - 26 VideoMeetings + VideoMeetingCard: رأس، تبويبان مقطّعان، بحث، شرائح، بطاقات، زر «اجتماع جديد» العائم
   - 27 «اجتماع جديد» (MobileSheet) و VideoJoiningInfo (.vmt-info--m) بشكل قائمة سفلية
   - 28 VideoCalls (.vmm-calls): بطاقة «اتصال مباشر» حول نفس البحث، والسجل بمربع الاتجاه وزر الاتصال
   الألوان: --home-* (قيم الداكن فى darkOverrid.css) | colours: --home-* (dark values in darkOverrid.css)
   ===================================================================== */

/* ---- الصفحة بملء الشاشة | the page, full screen ---- */
.vmt-shell.vmm {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 0 calc(96px + env(safe-area-inset-bottom, 0px));
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
}

.msh .vmt-shell.vmm { margin-inline: calc(-1 * var(--msh-gutter, 0px)); }

.vmm .mph.vmm-head {
    border-bottom: 0;
    background: var(--home-surface, #ffffff);
}

/* التبويبان: أزرار مقطّعة | the two tabs: a segmented control */
.vmm .vmt-rail {
    position: static;
    flex-direction: row;
    gap: 0;
    margin: 0;
    padding: 0 12px 10px;
    border: 0;
    border-radius: 0;
    background: var(--home-surface, #ffffff);
    box-shadow: none;
}

    .vmm .vmt-rail-item {
        position: relative;
        flex: 1 1 0;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        width: auto;
        min-height: 44px;
        padding: 0 8px;
        border-radius: 0;
        background: var(--home-surface-2, #f5f7fb);
        color: var(--home-text-2, #4f5b6d);
        font-size: 14px;
        font-weight: 600;
    }

        .vmm .vmt-rail-item:first-child { border-start-start-radius: 14px; border-end-start-radius: 14px; }
        .vmm .vmt-rail-item:last-child { border-start-end-radius: 14px; border-end-end-radius: 14px; }

        .vmm .vmt-rail-item .vmt-rail-ic {
            width: auto;
            height: auto;
            background: transparent !important;
        }

            .vmm .vmt-rail-item .vmt-rail-ic .rzi { font-size: 20px; }

        .vmm .vmt-rail-item.is-active {
            background: var(--home-surface, #ffffff);
            color: var(--home-accent, #1d4ed8);
            box-shadow: inset 0 0 0 4px var(--home-surface-2, #f5f7fb), 0 1px 4px var(--home-shadow-color, rgba(15, 27, 45, .12));
        }

.vmm .vmt-pane {
    gap: 0;
}

/* ---- 26: البحث والشرائح | 26: the search and the chips ---- */
.vmm .hrm-toolbar.mtg-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 0 12px 12px;
    border: 0;
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    border-radius: 0;
    background: var(--home-surface, #ffffff);
    box-shadow: none;
}

    .vmm .hrm-toolbar .hrm-search {
        width: 100%;
        max-width: none;
        min-height: 44px;
        border: 0;
        border-radius: 14px;
        background: var(--home-surface-2, #f5f7fb);
    }

        .vmm .hrm-toolbar .hrm-search .hrm-search-input { min-height: 44px; font-size: 14px; }

    .vmm .hrm-toolbar .hrm-seg {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 0;
        overflow-x: auto;
        border: 0;
        background: transparent;
        scrollbar-width: none;
    }

        .vmm .hrm-toolbar .hrm-seg::-webkit-scrollbar { display: none; }

        .vmm .hrm-toolbar .hrm-seg-btn {
            position: relative;
            flex: 0 0 auto;
            height: 36px;
            padding: 0 11px;
            border: 1px solid var(--home-chip-border, #d5dce7);
            border-radius: 18px;
            background: var(--home-surface, #ffffff);
            box-shadow: none;
            color: var(--home-text-2, #4f5b6d);
            font-size: 13px;
            font-weight: 600;
        }

            .vmm .hrm-toolbar .hrm-seg-btn::after { content: ""; position: absolute; inset: -5px 0; }   /* لمسة 44px | 44px touch */

            .vmm .hrm-toolbar .hrm-seg-btn b {
                margin-inline-start: 4px;
                padding: 0;
                background: transparent;
                color: inherit;
                font-weight: 700;
            }

            .vmm .hrm-toolbar .hrm-seg-btn.is-active {
                border-color: var(--home-filter-on-bg, #0f1b2d);
                background: var(--home-filter-on-bg, #0f1b2d);
                color: var(--home-filter-on-text, #ffffff);
            }

    /* التحديث فى رأس الصفحة، والعدّاد فى الشرائح | refresh lives in the page header, the count in the chips */
    .vmm .hrm-toolbar .mtg-tool-btn,
    .vmm .hrm-toolbar .hrm-result { display: none; }

/* ---- 26: البطاقات | 26: the cards ---- */
.vmm .mtg-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.vmm .hrm-grid-card {
    margin: 12px;
    border-radius: 18px;
}

.vmm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 18px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
}

    .vmm-card.is-busy { opacity: .7; }

.vmm-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.vmm-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 7px;
    background: var(--home-tone-blue-bg, #eef3fd);
    color: var(--home-tone-blue, #1d4ed8);
    font-size: 12px;
    font-weight: 700;
}

    .vmm-pill.is-now { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
    .vmm-pill.is-ended { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }
    .vmm-pill.is-unscheduled { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }

    .vmm-pill .mtg-pulse {
        position: static;
        width: 7px;
        height: 7px;
        margin: 0;
        border-radius: 50%;
        background: currentColor;
    }

.vmm-when {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .vmm-when .mtg-sep { margin-inline: 4px; }

.vmm-more {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -10px -8px -6px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .vmm-more svg { width: 20px; height: 20px; }

.vmm-card-title {
    margin: 0;
    overflow: hidden;
    color: var(--home-text, #0f1b2d);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vmm-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vmm-code {
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--home-surface-2, #f5f7fb);
    color: var(--home-text, #0f1b2d);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    letter-spacing: .02em;
}

.vmm-guests {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

    .vmm-guests.is-on { color: var(--home-tone-green, #0b5c55); font-weight: 600; }

.vmm-card-foot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.vmm-copy,
.vmm-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.vmm-copy {
    border: 1px solid var(--home-chip-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
}

    .vmm-copy svg { width: 17px; height: 17px; }

.vmm-join,
.vmm-join:hover,
.vmm-join:focus {
    border: 0;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
}

.vmm-card .mtg-card-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
}

.vmm-copy:focus-visible,
.vmm-join:focus-visible,
.vmm-more:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* زر «اجتماع جديد» العائم | the floating "New meeting" button */
.vmm-fab {
    position: fixed;
    inset-inline-end: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 20px var(--home-accent-shadow, rgba(29, 78, 216, .28));
    cursor: pointer;
}

    .vmm-fab svg { width: 20px; height: 20px; }
    .vmm-fab:disabled { opacity: .7; }
    .vmm-fab:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 3px; }

/* ---- 27: «اجتماع جديد» (MobileSheet فى جذر MobileLayout) | 27: "New meeting" (a MobileSheet at MobileLayout's root) ---- */
.vmm-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 6px;
}

.vmm-new-wrap { display: contents; }

.vmm-new-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .vmm-new-item:disabled { opacity: .6; cursor: default; }
    .vmm-new-item:active:not(:disabled) { background: var(--home-hover, #f7f9fc); }
    .vmm-new-item:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.vmm-new-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

    .vmm-new-ic svg { width: 20px; height: 20px; }
    .vmm-new-ic.is-later { background: var(--home-tone-blue-bg, #eef3fd); color: var(--home-tone-blue, #1d4ed8); }
    .vmm-new-ic.is-instant { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
    .vmm-new-ic.is-scheduled { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }

.vmm-new-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vmm-new-name { font-size: 14px; font-weight: 700; }
.vmm-new-hint { color: var(--home-text-2, #4f5b6d); font-size: 12px; }

/* ---- 27: معلومات الانضمام بشكل قائمة سفلية (نفس نافذة Radzen) | 27: the joining info as a bottom sheet (the same Radzen dialog) ---- */
.rz-dialog-wrapper:has(.vmt-info--m) {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center;
    background: var(--home-scrim, rgba(15, 27, 45, .45));
}

/* Radzen ≤768px: .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { inset-block-start: 0 !important } — أعلى تحديداً | higher specificity */
.rz-dialog-wrapper .rz-dialog:has(.vmt-info--m):not(.rz-dialog-confirm):not(.rz-dialog-alert) {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    inset-block-start: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 88dvh;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: var(--home-surface, #ffffff) !important;
    box-shadow: 0 -10px 30px rgba(15, 27, 45, .18) !important;
    transform: none !important;
}

    .rz-dialog:has(.vmt-info--m) > .rz-dialog-titlebar {
        align-items: center;
        padding: 14px 16px 4px !important;
        border: 0 !important;
        background: transparent;
    }

        .rz-dialog:has(.vmt-info--m) > .rz-dialog-titlebar .rz-dialog-title {
            color: var(--home-text, #0f1b2d);
            font-size: 16px;
            font-weight: 700;
        }

        .rz-dialog:has(.vmt-info--m) > .rz-dialog-titlebar .rz-dialog-titlebar-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px !important;
            height: 44px !important;
            margin: 0;
            border-radius: 12px;
            background: var(--home-surface-2, #f5f7fb);
            color: var(--home-icon, #334155) !important;
        }

            /* فى القائمة السفلية: × لا سهم رجوع | in the bottom sheet: an × rather than a back arrow */
            .rz-dialog:has(.vmt-info--m) > .rz-dialog-titlebar .rz-dialog-titlebar-close .rzi-times {
                color: var(--home-icon, #334155) !important;
                font-size: 22px !important;
                line-height: 44px !important;
            }

                .rz-dialog:has(.vmt-info--m) > .rz-dialog-titlebar .rz-dialog-titlebar-close .rzi-times::before { content: "close" !important; }

    .rz-dialog:has(.vmt-info--m) > .rz-dialog-content {
        padding: 6px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        background: transparent;
    }

.vmt-info.vmt-info--m {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--home-text, #0f1b2d);
}

    .vmt-info.vmt-info--m .vmt-info-text { margin: 0; color: var(--home-text-2, #4f5b6d); font-size: 13px; line-height: 1.7; }

    .vmt-info.vmt-info--m .vmt-info-link {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 6px;
        padding-inline-start: 12px;
        border: 0;
        border-radius: 14px;
        background: var(--home-surface-2, #f5f7fb);
    }

    .vmt-info.vmt-info--m .vmt-info-url {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        color: var(--home-text, #0f1b2d);
        font-size: 13px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .vmt-info.vmt-info--m .vmt-info-copy {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: auto;
        min-width: 44px;
        height: 44px;
        padding: 0 14px;
        border: 0;
        border-radius: 10px;
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
    }

        .vmt-info.vmt-info--m .vmt-info-copy .rzi { font-size: 17px; color: inherit; }

    .vmt-info.vmt-info--m .vmt-info-meta { color: var(--home-text-2, #4f5b6d); font-size: 12px; }

    .vmt-info.vmt-info--m .vmt-info-actions {
        display: flex;
        margin: 4px 0 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

        .vmt-info.vmt-info--m .vmt-info-actions .vmt-info-join {
            flex: 1 1 auto;
            justify-content: center;
            height: 52px;
            border-radius: 14px;
            font-size: 15px;
            font-weight: 700;
        }

        /* إغلاق = × فى الرأس | close = the × in the header */
        .vmt-info.vmt-info--m .vmt-info-actions > .rz-button:not(.vmt-info-join) { display: none; }

/* ---- 28: الاتصال | 28: calls ---- */
.vmm .vmc-root.vmm-calls { gap: 0; }

.vmm .vmm-calls .vmc-main {
    gap: 12px;
    max-width: none;
    margin: 0;
    padding: 12px;
}

.vmm-callcard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 18px;
    background: var(--home-surface, #ffffff);
}

.vmm-callcard-title {
    margin: 0;
    color: var(--home-text, #0f1b2d);
    font-size: 13px;
    font-weight: 700;
}

/* البحث داخل البطاقة؛ القائمة تحته فى الصفحة (لا تطفو) | the search inside the card; the list below it in the page (not floating) */
.vmm-callcard .vmc-picker-box {
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
    box-shadow: none;
}

.vmm-callcard .vmc-picker.is-open .vmc-picker-box {
    border: 2px solid var(--home-accent, #1d4ed8);
    border-radius: 14px;
}

.vmm-callcard .vmc-picker-bar {
    min-height: 48px;
    padding-inline: 12px 6px;
}

.vmm-callcard .vmc-picker-input { min-height: 36px; font-size: 14px; }

.vmm-callcard .vmc-chip {
    height: 30px;
    background: var(--home-tone-blue-bg, #eef3fd);
    color: var(--home-tone-blue, #1d4ed8);
}

.vmm-callcard .vmc-chip-x { position: relative; min-width: 30px; min-height: 30px; }

    .vmm-callcard .vmc-chip-x::after { content: ""; position: absolute; inset: -7px; }   /* لمسة 44px | 44px touch */

.vmm-callcard .vmc-list { max-height: min(300px, 44vh); padding: 0; }

.vmm-callcard .vmc-opt {
    min-height: 52px;
    gap: 12px;
    padding: 6px 12px;
    border-top: 1px solid var(--home-divider, #eef1f6);
}

.vmm-callcard .vmc-picker-foot {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px 12px;
    border-radius: 0 0 12px 12px;
    background: transparent;
}

.vmm-callcard .vmc-picker-count { flex: 1 1 100%; font-size: 12px; }

/* «استمرار»: زر الاتصال الأخضر بعرض البطاقة | "Continue": the green call button, card wide */
.vmm-callcard .vmc-continue {
    flex: 1 1 100%;
    justify-content: center;
    height: 50px;
    border-radius: 14px;
    background: var(--home-solid-green, #0f766e);
    font-size: 15px;
    font-weight: 700;
}

    .vmm-callcard .vmc-continue:disabled {
        background: var(--home-chip, #e9edf3);
        color: var(--home-text-2, #4f5b6d);
    }

/* السجل | the history */
.vmm .vmm-calls .vmc-history { display: flex; flex-direction: column; gap: 8px; }

.vmm .vmm-calls .vmc-history-title {
    display: block;
    margin: 4px 6px 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 600;
}

.vmm .vmm-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 12px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 18px;
    background: var(--home-surface, #ffffff);
}

.vmm .vmm-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 64px;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--home-divider, #eef1f6);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

    .vmm .vmm-row:first-child { border-top: 0; }
    .vmm .vmm-row.is-busy { opacity: .6; }

.vmm-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.vmm .vmm-row .vmc-item-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vmm .vmm-row .vmc-item-name { font-size: 14px; font-weight: 700; color: var(--home-text, #0f1b2d); }
.vmm .vmm-row .vmc-item-sub { color: var(--home-text-2, #4f5b6d); font-size: 12px; }
.vmm .vmm-row.is-inmissed .vmc-item-sub,
.vmm .vmm-row.is-indeclined .vmc-item-sub { color: var(--home-danger-text, #9f1d14); }

.vmm-dir {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

    .vmm-dir .rzi { font-size: 20px; color: inherit; }
    .vmm-dir.is-blue { background: var(--home-tone-blue-bg, #eef3fd); color: var(--home-tone-blue, #1d4ed8); }
    .vmm-dir.is-green { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
    .vmm-dir.is-red { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
    .vmm-dir.is-amber { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }
    .vmm-dir.is-neutral { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }

.vmm-row-call,
.vmm-row-more {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.vmm-row-call {
    background: var(--home-call-bg, #e6f4f1);
    color: var(--home-call-text, #0b5c55);
}

.vmm-row-more {
    margin-inline-end: -8px;
    background: transparent;
    color: var(--home-icon, #334155);
}
    .vmm-row-call svg,
    .vmm-row-more svg { width: 20px; height: 20px; }

.vmm-row-main:focus-visible,
.vmm-row-call:focus-visible,
.vmm-row-more:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.vmm .vmm-calls .vmc-more-row { padding-top: 4px; }

.vmm .vmm-calls .vmc-empty {
    padding: 24px 16px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 18px;
    background: var(--home-surface, #ffffff);
}

/* ---- بلا حركة عند الطلب | no motion on request ---- */
@media (prefers-reduced-motion: reduce) {
    .vmm-pill .mtg-pulse { animation: none; }
}

/* =====================================================================
   المرحلة 10 (ب): غرفة الاجتماع والاتصال الوارد (شاشات 29–31) — داكنة دائماً فى الوضعين
   | phase 10 (b): the meeting room and the incoming call (screens 29–31) — always dark, in both themes
   - 29 VideoRoom — الردهة (.vr-root.is-phone .vr-lobby): رأس MobilePageHeader، إطار الكاميرا، «انضم الآن» و«استماع فقط»
   - 30 VideoRoom — داخل الاجتماع (.vr-root.is-phone .vr-call): الشريط العلوى، مربعات بعمودين، صورتى المصغّرة، شريط الأدوات،
        «خيارات أخرى» قائمة سفلية (MobileSheet)
   - 31 VideoCallRinger (.vcr-stack.is-phone): بطاقة فى المنتصف فوق صفحة معتمة
   المفتاح: is-phone من Security.isMobile / isDevice (≤1024px أو جهاز محمول). سطح المكتب بلا تغيير (site.css .vr-*).
   الرأس والقائمة السفلية (MobilePageHeader / MobileSheet) بمتغيرات --home-* معاد تعيينها داخل الغرفة: داكنة دائماً.
   | the key: is-phone from Security.isMobile / isDevice (≤1024px or a mobile device). Desktop unchanged (site.css .vr-*).
   | the header and the bottom sheet (MobilePageHeader / MobileSheet) use --home-* re-set inside the room: always dark.
   ===================================================================== */

/* ---- لوحة الألوان (التصميم) | the palette (the design) ---- */
.vr-root.is-phone {
    --vr-bg: #10161f;
    --vr-surface: #1b2533;
    --vr-surface-2: #1d2633;
    --vr-text: #e8edf5;          /* 15.6:1 on --vr-bg */
    --vr-muted: #a9b4c4;         /*  8.6:1 */
    --vr-danger: #dc2626;        /* white 4.8:1 */
    --vr-phone-btn: #2a3546;
    --vr-phone-on: #c7d7ff;      /* #10161f on it 13.4:1 */
    --vr-phone-primary: #3d6be8; /* white 4.7:1 */
    --vr-phone-line: #3a475c;
    /* MobilePageHeader / MobileSheet داخل الغرفة | inside the room */
    --home-surface: #1b2533;
    --home-surface-2: #243042;
    --home-text: #e8edf5;
    --home-text-2: #a9b4c4;
    --home-icon: #e8edf5;
    --home-border: #3a475c;
    --home-divider: rgba(255, 255, 255, .08);
    --home-chip: #1d2633;
    --home-accent: #93b4ff;
    --home-accent-strong: #3d6be8;
    --home-scrim: rgba(0, 0, 0, .6);
    --home-grabber: #3a475c;
    --home-danger-text: #ff8a80;
    --home-tone-blue-bg: #213a5c;    --home-tone-blue: #8cc0fa;
    --home-tone-green-bg: #17332f;   --home-tone-green: #5fd3c2;
    --home-tone-purple-bg: #2f2850;  --home-tone-purple: #c4b5fd;
    --home-tone-amber-bg: #3a2f12;   --home-tone-amber: #f5c451;
    --home-tone-red-bg: #40201f;     --home-tone-red: #ff8a80;
    --home-tone-neutral-bg: #2a3546; --home-tone-neutral: #c9d2de;
    color-scheme: dark;
}

.vr-root.is-phone .vr-sep { margin-inline: 4px; }

/* ===== 29 — الردهة | the lobby ===== */
.vr-root.is-phone .vr-lobby {
    gap: 16px;
    max-width: 640px;
    margin-inline: auto;
    padding: 0 16px max(20px, env(safe-area-inset-bottom, 0px));
}

/* الرأس: رجوع + اسم الاجتماع + الرمز · الوقت | the header: back + the meeting's name + code · time */
.vr-root.is-phone .mph.vr-mph {
    flex: none;
    padding-inline: 0;
    border-bottom: 0;
    background: transparent;
}

    .vr-root.is-phone .mph.vr-mph .mph-back { background: var(--home-chip); }
    .vr-root.is-phone .mph.vr-mph .mph-title { font-size: 16px; }
    .vr-root.is-phone .mph.vr-mph .mph-sub { font-size: 12px; }

.vr-root.is-phone .vr-lobby-main {
    flex: 1 0 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: flex-start;
    gap: 16px;
    padding: 0;
}

/* إطار الكاميرا | the camera frame */
.vr-root.is-phone .vr-lobby-frame {
    flex: none;
    width: 100%;
    height: min(420px, 50vh);
    height: min(420px, 50dvh);
    min-height: 260px;
    aspect-ratio: auto;
    border-radius: 24px;
    background: var(--vr-surface);
    box-shadow: none;
}

.vr-root.is-phone .vr-lobby-off {
    gap: 10px;
    color: var(--vr-muted);
    font-size: 13px;
}

.vr-root.is-phone .vr-lobby-av {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--vr-phone-primary);
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
}

.vr-root.is-phone .vr-lobby-name {
    inset-block-start: 12px;
    inset-inline-start: 12px;
    max-width: calc(100% - 24px);
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .5);
    color: #ffffff;
    font-size: 12px;
    text-shadow: none;
}

.vr-root.is-phone .vr-lobby-tools {
    inset-block-end: 14px;
    gap: 14px;
}

    .vr-root.is-phone .vr-lobby-tools .vr-round {
        width: 56px;
        height: 56px;
        border: 1px solid rgba(255, 255, 255, .3);
        background: rgba(0, 0, 0, .35);
        color: #ffffff;
    }

        .vr-root.is-phone .vr-lobby-tools .vr-round.is-off {
            border-color: transparent;
            background: var(--vr-danger);
        }

/* «هل أنت جاهز للانضمام؟» والمعلومات، ثم الأزرار فى الأسفل | "Ready to join?" and the details, then the buttons at the bottom */
.vr-root.is-phone .vr-lobby-side {
    flex: 1 0 auto;
    width: 100%;
    gap: 8px;
}

.vr-root.is-phone .vr-lobby-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.vr-root.is-phone .vr-lobby-side .vr-callcard { width: 100%; }

.vr-root.is-phone .vr-lobby-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
}

    .vr-root.is-phone .vr-lobby-actions .vr-btn {
        width: 100%;
        height: 48px;
        border-radius: 24px;
        font-size: 14px;
        font-weight: 600;
    }

    .vr-root.is-phone .vr-lobby-actions .vr-btn.is-primary {
        height: 54px;
        border-radius: 27px;
        background: var(--vr-phone-primary);
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
    }

    .vr-root.is-phone .vr-lobby-actions .vr-btn.is-outline {
        border-color: var(--vr-phone-line);
        color: var(--vr-text);
    }

/* ===== 30 — داخل الاجتماع | in the call ===== */
.vr-root.is-phone .vr-top {
    inset-block-start: max(10px, env(safe-area-inset-top, 0px));
    inset-inline: 14px;
    gap: 8px;
}

.vr-root.is-phone .vr-rec {
    padding: 4px 10px;
    border-radius: 12px;
    background: #3a1414;
    color: #ffb4ab;              /* 9.6:1 */
    font-size: 11px;
}

.vr-root.is-phone .vr-top-title {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

    .vr-root.is-phone .vr-top-title b {
        overflow: hidden;
        font-size: 14px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vr-root.is-phone .vr-top-title > span {
        color: var(--vr-muted);
        font-size: 11px;
        font-feature-settings: 'tnum';
        white-space: nowrap;
    }

.vr-root.is-phone .vr-people-chip {
    flex: none;
    height: 44px;
    padding: 0 14px;
    gap: 6px;
    border-radius: 22px;
    background: var(--vr-surface-2);
    font-size: 13px;
}

.vr-root.is-phone .vr-body { padding: calc(66px + env(safe-area-inset-top, 0px)) 10px 0; }

/* المربعات: عمودان بملء المساحة (حجم المنصة من video-room.js لا يُستعمل هنا) | tiles: two columns filling the stage */
.vr-root.is-phone .vr-stage > .vr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    gap: 8px;
}

    .vr-root.is-phone .vr-stage > .vr-grid > .vr-tile {
        width: auto;
        height: auto;
        min-height: 0;
    }

    /* مربع واحد بملء المنصة؛ سبعة فأكثر بثلاثة أعمدة؛ الأخير المنفرد بعرض الصف | one tile fills the stage; seven or more in three columns; a last odd tile spans the row */
    .vr-root.is-phone .vr-stage > .vr-grid:not(:has(> .vr-tile:nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
    .vr-root.is-phone .vr-stage > .vr-grid:has(> .vr-tile:nth-child(7)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vr-root.is-phone .vr-stage > .vr-grid:not(:has(> .vr-tile:nth-child(7))) > .vr-tile:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }

.vr-root.is-phone .vr-tile { border-radius: 18px; }

    .vr-root.is-phone .vr-tile.is-speaking::after,
    .vr-root.is-phone .vr-tile.is-hand:not(.is-speaking)::after { border-radius: 18px; }

    .vr-root.is-phone .vr-tile.is-speaking::after { border-color: #5b8cff; }

.vr-root.is-phone .vr-tile-name {
    inset-block-end: 8px;
    inset-inline-start: 8px;
    max-width: calc(100% - 16px);
    font-size: 12px;
    font-weight: 600;
    text-shadow: none;
}

.vr-root.is-phone .vr-tile-text {
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .45);
}

.vr-root.is-phone .vr-tile-tag {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--vr-phone-on);
    color: #10161f;
    font-size: 10px;
    font-weight: 700;
}

.vr-root.is-phone .vr-tile.is-hand .vr-tile-hand {
    background: #f5c451;
    color: #3a2c10;
}

/* صورتى المصغّرة (شخص واحد معى) | my picture-in-picture (one other person) */
.vr-root.is-phone .vr-stage > .vr-pip {
    width: 92px;
    height: 124px;
    aspect-ratio: auto;
    inset-block-end: 12px;
    inset-inline-end: 12px;
    overflow: hidden;
    border: 2px solid var(--vr-bg);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}

    .vr-root.is-phone .vr-stage > .vr-pip > .vr-tile { border-radius: 12px; }
    .vr-root.is-phone .vr-stage > .vr-pip .vr-tile-pin { display: none; }
    .vr-root.is-phone .vr-stage > .vr-pip .vr-tile-name { display: none; }

/* شريط الأدوات: صف واحد بأزرار 44px | the controls: one row of 44px buttons */
.vr-root.is-phone .vr-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto;
    padding: 12px 10px max(20px, env(safe-area-inset-bottom, 0px));
}

    .vr-root.is-phone .vr-bar-start,
    .vr-root.is-phone .vr-bar-end,
    .vr-root.is-phone .vr-bar .vr-caret,
    .vr-root.is-phone .vr-bar .vr-rec-btn { display: none; }

.vr-root.is-phone .vr-bar-center {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.vr-root.is-phone .vr-bar .vr-group { background: transparent; }

.vr-root.is-phone .vr-bar .vr-round {
    width: 44px;
    height: 44px;
    background: var(--vr-phone-btn);
    color: #ffffff;
}

    .vr-root.is-phone .vr-bar .vr-round.is-off { background: var(--vr-danger); }

    .vr-root.is-phone .vr-bar .vr-round.is-on {
        background: var(--vr-phone-on);
        color: #10161f;
    }

    .vr-root.is-phone .vr-bar .vr-round .vr-dot {
        inset-block-start: 2px;
        inset-inline-end: 2px;
    }

.vr-root.is-phone .vr-bar .vr-end {
    width: 56px;
    height: 44px;
    border-radius: 22px;
    background: var(--vr-danger);
}

/* أزرار الإغلاق والإرسال فى البطاقات واللوحات: 44px | close / send buttons on the cards and panels: 44px */
.vr-root.is-phone .vr-x,
.vr-root.is-phone .vr-icon {
    min-width: 44px;
    min-height: 44px;
}

/* القوائم المنبثقة (الأجهزة، التفاعلات، المغادرة): فوق الشريط بعرض الشاشة | the popovers (devices, reactions, leave): above the bar, screen wide */
.vr-root.is-phone .vr-pop {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    min-width: 0;
    max-width: none;
    max-height: 55vh;
    border-radius: 18px;
    transform: none;
}

    /* التفاعلات: صفان (5 + 4) بأزرار 44px | reactions: two rows (5 + 4) of 44px buttons */
    .vr-root.is-phone .vr-pop.is-emoji {
        left: 50%;
        right: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        width: 252px;
        padding: 8px;
        border-radius: 26px;
        transform: translateX(-50%);
    }

        .vr-root.is-phone .vr-pop.is-emoji .vr-emoji {
            width: 44px;
            height: 44px;
        }

    .vr-root.is-phone .vr-pop-item { min-height: 48px; }

/* «خيارات أخرى» (MobileSheet) | "More options" */
.vr-root.is-phone .msheet .msheet-tiles { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }

.vr-root.is-phone .msheet .msheet-item.is-active { color: var(--home-accent); }
.vr-root.is-phone .msheet .msheet-close { width: 44px; height: 44px; }

.vr-root.is-phone .vr-msheet-label {
    padding: 12px 6px 6px;
    border-top: 1px solid var(--home-divider);
    color: var(--home-text-2);
    font-size: 12px;
    font-weight: 600;
}

.vr-root.is-phone .vr-msheet-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px;
    color: var(--home-text-2);
    font-size: 13px;
}

    .vr-root.is-phone .vr-msheet-note .vr-dot {
        position: static;
        flex: none;
        box-shadow: none;
    }

@media (max-width: 380px) {
    .vr-root.is-phone .vr-bar { padding-inline: 8px; gap: 4px; }
    .vr-root.is-phone .vr-bar-center { gap: 4px; }
}

/* ===== 31 — الاتصال الوارد | the incoming call ===== */
.vcr-stack.is-phone {
    inset: 0;
    width: auto;
    gap: 12px;
    padding: max(120px, calc(env(safe-area-inset-top, 0px) + 96px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
}

.vcr-stack.is-phone .vcr-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 27, 45, .5);
}

.vcr-stack.is-phone .vcr-card {
    position: relative;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    padding: 32px 20px 22px;
    border-radius: 28px;
    background: #10161f;
    color: #e8edf5;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.vcr-stack.is-phone .vcr-av,
.vcr-stack.is-phone .vcr-av img {
    width: 104px;
    height: 104px;
}

.vcr-stack.is-phone .vcr-pulse { background: rgba(61, 107, 232, .55); }

.vcr-stack.is-phone .vcr-text {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 2px 0;
    width: 100%;
    text-align: center;
}

/* .vcr-text: أعلى من قاعدة .mtg-root [dir=auto] | above the .mtg-root [dir=auto] rule */
.vcr-stack.is-phone .vcr-text .vcr-name {
    flex-basis: 100%;
    order: -1;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    white-space: normal;
}

.vcr-stack.is-phone .vcr-kicker,
.vcr-stack.is-phone .vcr-sub {
    color: #a9b4c4;              /* 8.6:1 on #10161f */
    font-size: 13px;
}

    .vcr-stack.is-phone .vcr-kicker .rzi { display: none; }
    .vcr-stack.is-phone .vcr-sub { min-width: 0; }
    .vcr-stack.is-phone .vcr-sub::before { content: "\00a0·\00a0"; }

.vcr-stack.is-phone .vcr-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-top: 10px;
}

.vcr-stack.is-phone .vcr-act { gap: 6px; }

.vcr-stack.is-phone .vcr-btn {
    width: 64px;
    height: 64px;
}

    .vcr-stack.is-phone .vcr-btn .rzi { font-size: 28px; }
    .vcr-stack.is-phone .vcr-btn.is-decline { background: #dc2626; }
    .vcr-stack.is-phone .vcr-btn.is-accept { background: #16a34a; }

.vcr-stack.is-phone .vcr-act-label {
    color: #e8edf5;
    font-size: 13px;
}

.vcr-stack.is-phone .vcr-note {
    color: #8d99ab;              /* 6.3:1 on #10161f */
    font-size: 11px;
    text-align: center;
}

/* =====================================================================
   المرحلة 10 (ب) — تكملة: لوحات الغرفة على الهاتف، والبطاقات والنوافذ داكنة، والانتظار قبل معرفة المفتاح
   | phase 10 (b) — follow-up: the room's panels on a phone, dark cards / dialog, and the wait before the key is known
   ===================================================================== */

/* ---- فتح الرابط مباشرة: لا شكل لسطح المكتب على شاشة صغيرة / لمسية قبل أن يُعرف المفتاح (is-pending) — مؤشر تحميل
   | a direct load: no desktop look on a small / touch screen before the key is known (is-pending) — a spinner ---- */
@media (max-width: 1024px), (pointer: coarse) {
    .vr-root.is-pending { --vr-bg: #10161f; }
    .vr-root.is-pending > :not(.vr-sink) { visibility: hidden; }
    .vr-root.is-pending::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 36px;
        height: 36px;
        margin: -18px 0 0 -18px;
        border: 3px solid #5f6368;
        border-top-color: var(--vr-accent);
        border-radius: 50%;
        animation: vr-spin 1s linear infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vr-root.is-pending::after { animation: none; }
}

/* ---- قائمة الميكروفون والكاميرا فى الردهة | the lobby's microphone / camera sheet ---- */
.vr-root.is-phone .msheet .msheet-list > .vr-msheet-label:first-child { padding-top: 0; border-top: 0; }
.vr-root.is-phone .msheet .vr-msheet-label:empty { padding: 0; }

/* ---- اللوحات (التفاصيل، المشاركون، الرسائل، الأنشطة، أدوات المضيف): بملء الشاشة وداكنة
   | the panels (details, people, messages, activities, host controls): full screen and dark ---- */
.vr-root.is-phone .vr-panel {
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-basis: auto;
    margin: 0;
    padding-top: env(safe-area-inset-top, 0px);
    border-radius: 0;
    background: var(--vr-bg);
    color: var(--vr-text);
}

.vr-root.is-phone .vr-panel-head {
    min-height: 64px;
    padding: 10px 16px 6px;
    gap: 8px;
}

    .vr-root.is-phone .vr-panel-head h2 {
        color: var(--vr-text);
        font-size: 18px;
        font-weight: 700;
    }

    .vr-root.is-phone .vr-panel-head .vr-x {
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--vr-surface-2);
        color: var(--vr-text);
    }

.vr-root.is-phone .vr-panel-body { padding: 4px 16px max(16px, env(safe-area-inset-bottom, 0px)); }

.vr-root.is-phone .vr-panel .vr-btn {
    min-height: 44px;
    color: #93b4ff;              /* 8.8:1 on --vr-bg */
}

    .vr-root.is-phone .vr-panel .vr-btn:hover:not(:disabled) { background: rgba(147, 180, 255, .08); }
    .vr-root.is-phone .vr-panel .vr-btn.is-small { height: 44px; }

    .vr-root.is-phone .vr-panel .vr-btn.is-outline {
        border-color: var(--vr-phone-line);
        color: var(--vr-text);
    }

    .vr-root.is-phone .vr-panel .vr-btn.is-danger {
        background: var(--vr-danger);
        color: #ffffff;
    }

.vr-root.is-phone .vr-panel .vr-icon:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.vr-root.is-phone .vr-panel .vr-icon.is-small { width: 44px; height: 44px; }
.vr-root.is-phone .vr-panel .vr-icon.is-danger { color: #ff8a80; }
.vr-root.is-phone .vr-panel .vr-icon.is-admit { color: #5fd3c2; }

/* الأقسام والتفاصيل | sections and details */
.vr-root.is-phone .vr-sec {
    padding: 14px 0;
    border-bottom-color: rgba(255, 255, 255, .08);
}

    .vr-root.is-phone .vr-sec h4 {
        color: var(--vr-text);
        font-size: 14.5px;
        font-weight: 600;
    }

        .vr-root.is-phone .vr-sec h4 .rzi { color: var(--vr-muted); }

.vr-root.is-phone .vr-sec-title { color: var(--vr-muted); }
.vr-root.is-phone .vr-sec-text { color: #c3ccd8; }
.vr-root.is-phone .vr-sec-hint { color: var(--vr-muted); }

.vr-root.is-phone .vr-linkbox {
    border-radius: 12px;
    background: var(--vr-surface-2);
    color: var(--vr-text);
}

.vr-root.is-phone .vr-facts {
    padding: 14px;
    border-radius: 16px;
    background: var(--vr-surface);
    font-size: 13.5px;
}

    .vr-root.is-phone .vr-facts dt { color: var(--vr-muted); }

/* المشاركون | people */
.vr-root.is-phone .vr-waiting { border-bottom-color: rgba(255, 255, 255, .08); }

.vr-root.is-phone .vr-person {
    min-height: 56px;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 12px;
}

    .vr-root.is-phone .vr-person:hover { background: rgba(255, 255, 255, .04); }

    .vr-root.is-phone .vr-person.is-waiting {
        margin-bottom: 6px;
        padding-inline: 10px 4px;
        background: var(--vr-surface);
    }

    .vr-root.is-phone .vr-person .vr-av {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .vr-root.is-phone .vr-person.is-speaking .vr-av { box-shadow: 0 0 0 2px #5b8cff; }

.vr-root.is-phone .vr-person-name {
    color: var(--vr-text);
    font-size: 14.5px;
}

.vr-root.is-phone .vr-tag {
    border-radius: 6px;
    background: var(--vr-phone-on);
    color: #10161f;
    font-weight: 700;
}

    .vr-root.is-phone .vr-tag.is-guest { background: #3a2f12; color: #f5c451; }
    .vr-root.is-phone .vr-tag.is-info { background: #17332f; color: #5fd3c2; }

.vr-root.is-phone .vr-person-ic { color: var(--vr-muted); }
    .vr-root.is-phone .vr-person-ic.is-off { color: #ff8a80; }
    .vr-root.is-phone .vr-person-ic.is-hand { color: #f5c451; }

/* الرسائل: فقاعات (رسائلى فى نهاية السطر) | messages: bubbles (mine at the line end) */
.vr-root.is-phone .vr-chat-hint {
    border-radius: 12px;
    background: var(--vr-surface);
    color: #c3ccd8;
}

.vr-root.is-phone .vr-chat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vr-root.is-phone .vr-chat-msg {
    align-self: flex-start;
    max-width: 85%;
    margin: 0;
    padding: 8px 12px 10px;
    border-radius: 16px;
    border-start-start-radius: 4px;
    background: var(--vr-surface);
}

    .vr-root.is-phone .vr-chat-msg.is-mine {
        align-self: flex-end;
        border-start-start-radius: 16px;
        border-start-end-radius: 4px;
        background: #23386b;
    }

.vr-root.is-phone .vr-chat-meta b {
    color: var(--vr-text);
    font-size: 12.5px;
    font-weight: 600;
}

.vr-root.is-phone .vr-chat-meta span {
    color: var(--vr-muted);       /* 5.4:1 on the own bubble */
    font-size: 11px;
}

.vr-root.is-phone .vr-chat-text {
    color: var(--vr-text);
    font-size: 14px;
}

.vr-root.is-phone .vr-chat-form {
    gap: 8px;
    padding-top: 10px;
}

.vr-root.is-phone .vr-panel .vr-input {
    height: 48px;
    border-radius: 24px;
    background: var(--vr-surface-2);
    color: var(--vr-text);
}

    .vr-root.is-phone .vr-panel .vr-input::placeholder { color: var(--vr-muted); }
    .vr-root.is-phone .vr-panel .vr-input:focus { box-shadow: 0 0 0 2px #5b8cff; }

.vr-root.is-phone .vr-icon.is-send {
    width: 48px;
    height: 48px;
    background: var(--vr-phone-primary);
    color: #ffffff;
}

    .vr-root.is-phone .vr-icon.is-send:disabled {
        background: var(--vr-surface-2);
        color: var(--vr-muted);
        opacity: 1;
    }

/* الأنشطة وأدوات المضيف | activities and host controls */
.vr-root.is-phone .vr-panel .vr-emoji { width: 44px; height: 44px; }
.vr-root.is-phone .vr-switch-row { min-height: 52px; }
.vr-root.is-phone .vr-switch-row b { color: var(--vr-text); font-size: 14px; }
.vr-root.is-phone .vr-switch-row small { color: var(--vr-muted); }

.vr-root.is-phone .vr-switch {
    width: 24px;
    height: 24px;
    accent-color: var(--vr-phone-primary);
}

/* ---- البطاقات والنافذة داكنة على الهاتف (مشاركة الرابط، طلب الانضمام، التأكيد) | dark cards and dialog on a phone (share link, ask to join, confirm) ---- */
.vr-root.is-phone .vr-share-card,
.vr-root.is-phone .vr-knock-card,
.vr-root.is-phone .vr-modal {
    border-radius: 18px;
    background: var(--vr-surface);
    color: var(--vr-text);
}

.vr-root.is-phone .vr-share-card p,
.vr-root.is-phone .vr-knock-sub,
.vr-root.is-phone .vr-modal p { color: #c3ccd8; }

.vr-root.is-phone .vr-share-card .vr-share-note { color: var(--vr-muted); }
.vr-root.is-phone .vr-share-card .vr-x,
.vr-root.is-phone .vr-knock-head .vr-x { color: var(--vr-muted); }
.vr-root.is-phone .vr-share-card .vr-linkbox { background: var(--vr-surface-2); }

.vr-root.is-phone .vr-knock-actions .vr-btn,
.vr-root.is-phone .vr-modal .vr-btn { min-height: 44px; }

.vr-root.is-phone .vr-knock-actions .vr-btn.is-text,
.vr-root.is-phone .vr-modal .vr-btn.is-text { color: #93b4ff; }

.vr-root.is-phone .vr-knock-actions .vr-btn.is-primary,
.vr-root.is-phone .vr-modal .vr-btn.is-primary {
    background: var(--vr-phone-primary);
    color: #ffffff;
}

/* =====================================================================
   المرحلة 11: الحضور والانصراف (شاشة 19) — LoginAndLogOut بملء الشاشة على الهاتف (.tac-m, .tacm-*)
   | phase 11: attendance (screen 19) — LoginAndLogOut full screen on a phone (.tac-m, .tacm-*)
   يُفتح بـ MobileView من: زر بطاقة «اليوم» فى الرئيسية، زر البصمة فى شريط الموبايل، و /enterOrExit على الهاتف.
   | opened with MobileView from: the home «Today» card button, the mobile top-bar check-in button, /enterOrExit on a phone.
   الألوان: --home-* (القيمة الفاتحة احتياطية، الداكنة فى darkOverrid.css)؛ إطار الكاميرا داكن فى الوضعين كما فى التصميم.
   | colours: --home-* (light value as the fallback, dark in darkOverrid.css); the camera frame is dark in both, as designed.
   ===================================================================== */

/* ---- النافذة بملء الشاشة بلا شريط عنوان (Radzen ≤768px: inset-block-start: 0 !important — أعلى تحديداً)
   | the dialog full screen without a title bar (Radzen ≤768px — higher specificity) ---- */
.rz-dialog-wrapper:has(.tac-m) { padding: 0 !important; }

.rz-dialog-wrapper .rz-dialog:has(.tac-m):not(.rz-dialog-confirm):not(.rz-dialog-alert) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--home-canvas, #f3f5f9) !important;
    box-shadow: none !important;
    transform: none !important;
}

    .rz-dialog:has(.tac-m) > .rz-dialog-titlebar { display: none !important; }

    .rz-dialog:has(.tac-m) > .rz-dialog-content {
        height: 100%;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--home-canvas, #f3f5f9) !important;
    }

.tac-root.tac-m {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    padding: 0;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
}

/* ---- الرأس | the header ---- */
.tacm-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px 12px;
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.tacm-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .tacm-close svg { width: 20px; height: 20px; }

.tacm-titles {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tac-root .tacm-title {
    margin: 0;
    color: var(--home-text, #0f1b2d);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.tacm-date {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

.tacm-clock {
    flex: none;
    padding: 0 6px;
    color: var(--home-text, #0f1b2d);
    font-size: 22px;
    font-weight: 700;
    font-feature-settings: 'tnum';
    white-space: nowrap;
}

/* ---- المحتوى | the content ---- */
.tacm-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
}

.tacm-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.tacm-time {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
}

    .tacm-time span {
        color: var(--home-text-2, #4f5b6d);
        font-size: 11px;
    }

    .tacm-time b {
        color: var(--home-text, #0f1b2d);
        font-size: 17px;
        font-weight: 700;
        font-feature-settings: 'tnum';
    }

/* الكاميرا: داكنة فى الوضعين، إطار للوجه | the camera: dark in both themes, a face guide */
.tacm-cam {
    position: relative;
    flex: none;
    height: 250px;
    overflow: hidden;
    border-radius: 20px;
    background: #1b2533;
}

    .tacm-cam video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scaleX(-1);
        background: #1b2533;
    }

.tacm-oval {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 190px;
    margin: -95px 0 0 -75px;
    border: 3px dashed rgba(255, 255, 255, .7);
    border-radius: 50%;
    pointer-events: none;
}

.tacm-chip {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(15, 27, 45, .6);
    color: #ffffff;
    font-size: 11px;
}

    .tacm-chip i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22c55e;
    }

.tacm-cam-hint {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 10px;
    padding: 0 12px;
    color: #e8edf5;
    font-size: 12px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.tacm-cam-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #e8edf5;               /* 13.3:1 on #1b2533 */
    text-align: center;
}

    .tacm-cam-ic { display: inline-flex; }
    .tacm-cam-ic svg { width: 34px; height: 34px; }
    .tacm-cam-state b { font-size: 14px; font-weight: 600; }
    .tacm-cam-state > span:not(.tacm-cam-ic) { color: #c3ccd8; font-size: 12px; }   /* 9.7:1 */

.tacm-cam-retry {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 12px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* الخريطة والنطاق | the map and the area */
.tacm-map {
    flex: none;
    overflow: hidden;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 20px;
    background: var(--home-surface, #ffffff);
}

.tac-root .tacm-map-canvas {
    height: 150px;
    border-radius: 0;
}

    .tac-root .tacm-map-canvas.is-hidden { height: 0; }

.tacm-map-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: var(--home-surface-2, #f5f7fb);
    color: var(--home-text-2, #4f5b6d);
}

    .tacm-map-empty svg { width: 30px; height: 30px; }

.tacm-loc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 14px;
}

.tacm-loc-chip {
    flex: none;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

    .tacm-loc-chip.is-green { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
    .tacm-loc-chip.is-red { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
    .tacm-loc-chip.is-neutral { background: var(--home-tone-neutral-bg, #e9edf3); color: var(--home-tone-neutral, #334155); }

.tacm-loc-hint {
    flex: 1 1 140px;
    min-width: 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

    .tacm-loc-hint:empty { display: none; }

.tacm-relocate {
    flex: none;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--home-border, #d5dce7);
    border-radius: 10px;
    background: var(--home-surface, #ffffff);
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- الشريط السفلى | the bottom bar ---- */
.tacm-bar {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px max(16px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.tacm-blocked {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    text-align: center;
}

.tacm-btns {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 8px;
}

.tacm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 0 10px;
    border-radius: 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .tacm-btn.is-second {
        border: 1px solid var(--home-border, #d5dce7);
        background: var(--home-surface-2, #f1f4f9);
        color: var(--home-text-2, #4f5b6d);
    }

    .tacm-btn.is-primary {
        border: 0;
        background: var(--home-accent-strong, #1d4ed8);   /* white 6.7:1 (dark #1772d3 4.8:1) */
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
    }

        .tacm-btn.is-primary svg { width: 20px; height: 20px; }

    .tacm-btn:disabled { cursor: not-allowed; }
    .tacm-btn.is-second:disabled { opacity: .6; }

    .tacm-btn.is-primary:disabled {
        background: var(--home-chip, #cfd6e2);
        color: var(--home-text-2, #4f5b6d);       /* 4.8:1 (dark 5.3:1) */
    }

.tacm-close:focus-visible,
.tacm-btn:focus-visible,
.tacm-relocate:focus-visible,
.tacm-cam-retry:focus-visible,
.tacm-done-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.tacm-spin {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: tacm-spin .8s linear infinite;
}

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

/* ---- تم التسجيل | recorded ---- */
.tacm-done {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    text-align: center;
}

.tacm-done-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-top: 20px;
    border-radius: 50%;
    background: var(--home-solid-green, #0f766e);   /* white 5.5:1 */
    color: #ffffff;
}

    .tacm-done-ic svg { width: 38px; height: 38px; stroke-width: 2.6; }

.tac-root .tacm-done-title {
    margin: 0;
    color: var(--home-text, #0f1b2d);
    font-size: 22px;
    font-weight: 700;
}

.tacm-done-sub {
    color: var(--home-text-2, #4f5b6d);
    font-size: 14px;
}

.tac-root .tacm-photo {
    width: 180px;
    height: 220px;
    margin-top: 6px;
    border-radius: 18px;
    background: #1b2533;
    object-fit: cover;
}

.tacm-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    text-align: start;
}

    .tacm-facts div { display: flex; flex-direction: column; min-width: 0; }
    .tacm-facts span { color: var(--home-text-2, #4f5b6d); font-size: 11px; }
    .tacm-facts b { color: var(--home-text, #0f1b2d); font-size: 15px; font-weight: 700; font-feature-settings: 'tnum'; }

.tacm-done-btn {
    width: 100%;
    min-height: 52px;
    margin-top: auto;
    border: 0;
    border-radius: 14px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .tacm-spin { animation: none; }
}

/* =====================================================================
   المرحلة 5ب: عرض المعاملة (شاشة 4) وقائمة إجراءاتها (شاشة 5) — MessageView بـ MobileView على الهاتف
   (.mvm, .mvm-*, .mvm-dialog). سطح المكتب والعرض المضمَّن لا يحملان هذه الأصناف.
   | phase 5b: the transaction view (screen 4) and its actions sheet (screen 5) — MessageView with MobileView
   on a phone. Desktop and the embedded view carry none of these classes.
   ===================================================================== */

/* النافذة: ملء الشاشة بلا حشوة؛ العرض يملؤها (site.css يضيف حشوة سفلية 60px لشريط الأوامر الثابت القديم)
   | the dialog: full screen with no padding; the view fills it (site.css adds a 60px bottom padding for the old fixed command bar) */
.rz-dialog.mvm-dialog {
    border-radius: 0;
    box-shadow: none;
    background: var(--home-canvas, #f3f5f9);
}

.rz-dialog.message-view-dialog.mvm-dialog > .rz-dialog-content {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--home-canvas, #f3f5f9);
}

.mv-root.mvm {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

.mv-root.mvm > .content-wrapper,
.mv-root.mvm .email-wrapper,
.mv-root.mvm .email-wrapper > .row.align-items-stretch,
.mv-root.mvm .mail-sidebar {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
}

/* ---- الرأس | the header ---- */
.mvm .mph.mvm-head { flex: none; gap: 6px; padding-bottom: 12px; }
.mvm .mph.mvm-head .mph-extra { padding-inline: 10px; }

.mvm-ref {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--home-text-2, #4f5b6d);
    font-feature-settings: 'tnum';
}

.mvm-ref-kind { overflow-wrap: anywhere; }

.mvm .mvm-subject {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 700;
    color: var(--home-text, #0f1b2d);
    overflow-wrap: anywhere;
}

.mvm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.mvm-chip {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    padding: 2px 9px;
    border-radius: 6px;
}

.mvm-tone-red { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
.mvm-tone-amber { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }
.mvm-tone-green { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
.mvm-tone-blue { background: var(--home-tone-blue-bg, #eef3fd); color: var(--home-tone-blue, #1d4ed8); }
.mvm-tone-neutral { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }

/* ---- التبويبات (SfTab نفسها، بشكل اللوحة) | the tabs (the same SfTab, the board's look) ---- */
.mv-root.mvm .mv-tabs.mvm-tabs.e-tab {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header {
    flex: none;
    width: auto !important;
    max-width: 100%;
    min-height: 44px;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--home-surface, #ffffff) !important;
    border-bottom: 1px solid var(--home-border, #e3e8f0);
}

.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header::before { display: none; }

.mv-root.mvm .nested-tabs.mvm-tabs.e-tab > .e-toolbar.e-tab-header .e-toolbar-items {
    display: flex !important;
    flex-wrap: nowrap;
    min-height: 44px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background: transparent;
}

.mv-root.mvm .nested-tabs.mvm-tabs.e-tab > .e-toolbar.e-tab-header .e-toolbar-items::-webkit-scrollbar { display: none; }

/* شريط Syncfusion القابل للتمرير: على الأجهزة اللمسية (e-scroll-device) بلا سهمين وبلا حشوة | Syncfusion's scrollable bar: on touch devices (e-scroll-device) no arrows and no padding */
.mv-root.mvm .nested-tabs.mvm-tabs.e-tab > .e-toolbar.e-tab-header .e-toolbar-items.e-hscroll { display: block !important; overflow: visible; }
.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-hscroll.e-scroll-device { padding: 0 !important; }
.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-hscroll.e-scroll-device .e-hscroll-bar { overflow-x: auto; }

.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-toolbar-item { min-height: 44px; margin: 0 !important; }

.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-toolbar-item .e-tab-wrap {
    height: 44px !important;
    padding: 0 14px !important;
    border: 0 !important;
    background: transparent !important;
}

.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-toolbar-item .e-tab-text,
.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-toolbar-item .e-tab-text span {
    font-size: 13px !important;
    font-weight: 500;
    color: var(--home-text-2, #4f5b6d);
    margin: 0 !important;
    white-space: nowrap;
}

.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-text span {
    color: var(--home-accent, #1d4ed8);
    font-weight: 700;
}

.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    background: transparent !important;
    box-shadow: inset 0 -3px 0 var(--home-accent, #1d4ed8);
}
.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-indicator { height: 3px; background: var(--home-accent, #1d4ed8); }

/* أيقونات العناوين مخفية على الهاتف؛ العدد نص بجانب الكلمة | the header icons are hidden on a phone; the count is text beside the word */
.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .rzi { display: none; }
.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .rz-badge {
    background: transparent !important;
    color: inherit !important;
    padding: 0;
    margin-inline-start: 4px;
    font-size: 13px;
    font-weight: inherit;
    box-shadow: none;
}

.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-tab-header .e-scroll-nav {
    width: 32px;
    background: var(--home-surface, #ffffff);
    border: 0;
}

.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-content {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: transparent;
}

.mv-root.mvm .mv-tabs.mvm-tabs.e-tab > .e-content > .e-item { padding: 12px; }

/* ---- التفاصيل | the details ---- */
.mvm-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }

.mv-root.mvm > .content-wrapper > .email-wrapper .mail-sidebar > .mvm-details { padding: 12px 12px 0; margin: 0; }

.mvm-card {
    box-sizing: border-box;
    width: 100%;
    background: var(--home-surface, #ffffff);
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 16px;
    padding: 12px 14px;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
}

.mvm-kicker {
    font-size: 12px;
    font-weight: 600;
    color: var(--home-text-2, #4f5b6d);
    margin-bottom: 8px;
}

.mvm-note {
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
}

.mvm-note-sub { display: block; font-size: 12px; margin-top: 2px; }

.mvm-party-main {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.mvm-av {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    background: var(--home-av-0, #1d4ed8);
}

.mvm-av .rzi { font-size: 20px; color: #ffffff; }
.mvm-av--1 { background: var(--home-av-1, #0f766e); }
.mvm-av--2 { background: var(--home-av-2, #7c3aed); }
.mvm-av--3 { background: var(--home-av-3, #b45309); }
.mvm-av--4 { background: var(--home-av-4, #be185d); }

.mvm-party-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mvm-party-name { font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.mvm-party-sub { font-size: 12px; line-height: 1.45; color: var(--home-text-2, #4f5b6d); overflow-wrap: anywhere; }

.mvm-party-when {
    flex: none;
    font-size: 12px;
    line-height: 1.5;
    color: var(--home-text-2, #4f5b6d);
    text-align: end;
    white-space: nowrap;
}

.mvm-party-to {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--home-divider, #eef1f6);
    font-size: 12px;
    line-height: 1.6;
    color: var(--home-text-2, #4f5b6d);
    overflow-wrap: anywhere;
}

.mvm-party-k { font-weight: 700; color: var(--home-text, #0f1b2d); }

.mvm-reason { display: flex; flex-direction: column; gap: 6px; }
.mvm-reason .mvm-kicker { margin-bottom: 0; }
.mvm-reason-name { font-size: 14px; font-weight: 600; }
.mvm-reason-sub { font-size: 13px; color: var(--home-text, #0f1b2d); }
.mvm-reason-notes { font-size: 13px; line-height: 1.7; color: var(--home-text, #0f1b2d); overflow-wrap: anywhere; }
.mvm-reason-notes img { max-width: 100%; height: auto; }

.mvm-reason-urge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--home-tone-red-bg, #fdeceb);
    color: var(--home-tone-red, #9f1d14);
}

/* ملخص سفر الذكى | SAFAR's smart summary */
.mvm-card.mvm-ai {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    background: var(--home-ai-bg, #f1ecfd);
    border-color: transparent;
    cursor: pointer;
}

.mvm-ai-ic { flex: none; display: flex; color: var(--home-ai-text, #5b21b6); }
.mvm-ai-ic svg { width: 20px; height: 20px; }
.mvm-ai-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mvm-ai-title { font-size: 13px; font-weight: 700; color: var(--home-ai-text, #5b21b6); }
.mvm-ai-hint { font-size: 12px; line-height: 1.5; color: var(--home-text, #0f1b2d); }

.mvm-chev { flex: none; display: flex; color: var(--home-text-2, #4f5b6d); }
.mvm-chev svg { width: 18px; height: 18px; }

/* صف زر (التعليقات) | a row button (comments) */
.mvm-card.mvm-rowbtn {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    cursor: pointer;
}

.mvm-rowbtn-ic { flex: none; display: flex; color: var(--home-icon, #334155); }
.mvm-rowbtn-ic svg { width: 20px; height: 20px; }
.mvm-rowbtn-text { flex: 1 1 auto; font-size: 14px; font-weight: 600; }

.mvm-count {
    flex: none;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--home-tone-blue-bg, #eef3fd);
    color: var(--home-tone-blue, #1d4ed8);
}

/* بيانات الحالة | the status data */
.mvm-card.mvm-facts { padding-block: 2px; }

.mvm-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 8px 0;
    border-top: 1px solid var(--home-divider, #eef1f6);
    font-size: 13px;
    line-height: 1.5;
}

.mvm-fact:first-child { border-top: 0; }
.mvm-fact-k { flex: 0 1 auto; color: var(--home-text-2, #4f5b6d); }
.mvm-fact-v { flex: 1 1 auto; min-width: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }

.mvm-fact.mvm-fact--link {
    width: 100%;
    min-height: 44px;
    border-inline: 0;
    border-bottom: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--home-accent, #1d4ed8);
    cursor: pointer;
    justify-content: flex-start;
}

.mvm-fact--link .mvm-fact-k { flex: 1 1 auto; color: inherit; font-weight: 600; text-align: start; }
.mvm-fact-ic { flex: none; display: flex; }
.mvm-fact-ic svg { width: 18px; height: 18px; }

/* ---- الشريط السفلى | the bottom bar ---- */
.mvm-bar {
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--home-surface, #ffffff);
    border-top: 1px solid var(--home-border, #e3e8f0);
}

.mvm-bar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mvm-bar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mvm-bar--1.has-more { grid-template-columns: minmax(0, 1fr) 52px; }
.mvm-bar--2.has-more { grid-template-columns: repeat(2, minmax(0, 1fr)) 52px; }
.mvm-bar--3.has-more { grid-template-columns: repeat(3, minmax(0, 1fr)) 52px; }

.mvm-bar-btn {
    box-sizing: border-box;
    min-width: 0;
    height: 48px;
    border-radius: 14px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mvm-bar-btn.is-outline {
    border: 1px solid var(--home-chip-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
}

.mvm-bar-btn.is-solid {
    border: 1px solid transparent;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
}

.mvm-bar-btn.is-green {
    border: 1px solid var(--home-tone-green-bg, #e6f4f1);
    background: var(--home-tone-green-bg, #e6f4f1);
    color: var(--home-tone-green, #0b5c55);
}

.mvm-bar-ic { flex: none; display: flex; }
.mvm-bar-ic svg { width: 18px; height: 18px; }
.mvm-bar-more .mvm-bar-ic svg { width: 20px; height: 20px; }
.mvm-bar-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mvm-bar-btn:focus-visible,
.mvm-party-main:focus-visible,
.mvm-card.mvm-ai:focus-visible,
.mvm-card.mvm-rowbtn:focus-visible,
.mvm-fact--link:focus-visible {
    outline: 2px solid var(--home-accent, #1d4ed8);
    outline-offset: 2px;
}

/* زر إغلاق القائمة 44px | the sheet's Close button at 44px */
.mv-root.mvm .msheet .msheet-close { width: 44px; height: 44px; }

/* عنوان مجموعة فى قائمة الإجراءات | a group title in the actions sheet */
.mvm-sheet-label {
    padding: 12px 6px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-text-2, #4f5b6d);
}

/* أثناء التحميل: الرأس فوق الهيكل | while loading: the header above the skeleton */
.mvm.mvm--loading { flex: none; }
.mvm.mvm--loading .mph-title { font-size: 15px; font-weight: 600; color: var(--home-text-2, #4f5b6d); }

/* =====================================================================
   المرحلة 5ج: التوجيه (شاشة 6) — SendDirecting بـ MobileView على الهاتف (.sdi-m, .sdi-mhead, .sdi-dialog-m).
   يمرّره عرض المعاملة على الهاتف (المرحلة 5ب) وبطاقة الوارد فى الرئيسية على الهاتف فقط؛ سطح المكتب لا يحمل هذه الأصناف.
   الألوان الثابتة فى <style> المكوّن (#fff, #f7f8fa, #f1f3f5…) تُستبدل هنا بمتغيّرات --home-* (الفاتح = القيمة الاحتياطية).
   | phase 5c: forwarding (screen 6) — SendDirecting with MobileView on a phone. Passed only by the phone transaction view
   (phase 5b) and the home InBox card on a phone; the desktop carries none of these classes. The component's hard-coded
   light colours are replaced here by --home-* tokens (light = the fallback).
   ===================================================================== */

/* النافذة: ملء الشاشة بلا حشوة (site.css يضيف 60px أسفلها، و<style> المكوّن min-height ولوناً ثابتاً)
   | the dialog: full screen with no padding (site.css adds 60px at the bottom, the component's <style> a min-height and a fixed colour) */
.rz-dialog.sdi-dialog-m {
    border-radius: 0;
    box-shadow: none;
    background: var(--home-canvas, #f3f5f9);
}

.rz-dialog.message-view-senddirecting.sdi-dialog-m > .rz-dialog-content {
    padding: 0 !important;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--home-canvas, #f3f5f9);
}

/* السلسلة كلها عمود مرن: الرأس ثابت، الجسم يتمرّر، زر الإرسال أسفل الشاشة
   | the whole chain is a flex column: the header stays, the body scrolls, the send button sits at the bottom */
.sdi-root.sdi-m {
    --sdi-border: var(--home-border, #e6eaf1);
    --sdi-muted: var(--home-text-2, #4f5b6d);
    --sdi-primary: var(--home-accent, #1d4ed8);
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

.sdi-root.sdi-m > form,
.sdi-root.sdi-m .sdi-layout,
.sdi-root.sdi-m .sdi-form {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.sdi-root.sdi-m .sdi-form {
    background: var(--home-canvas, #f3f5f9);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.sdi-root.sdi-m .sdi-loading { flex: 1 1 auto; }

/* ---- الرأس | the header ---- */
.sdi-m .mph.sdi-mhead { flex: none; }

.sdi-m .sdi-mbusy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--home-accent, #1d4ed8);
}

    .sdi-m .sdi-mbusy .spinner-border { width: 22px; height: 22px; border-width: .18em; }

/* ---- الجسم: البطاقات | the body: cards ---- */
.sdi-root.sdi-m .sdi-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.sdi-root.sdi-m .sdi-section,
.sdi-root.sdi-m .sdi-section:last-child {
    flex: none;
    min-width: 0;
    padding: 12px 14px;
    background: var(--home-surface, #ffffff);
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
}

.sdi-root.sdi-m .sdi-section-title {
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--home-text-2, #4f5b6d);
}

    .sdi-root.sdi-m .sdi-section-title .rzi { font-size: 18px; color: var(--home-accent, #1d4ed8); }

.sdi-root.sdi-m .sdi-count {
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d3f9e);
}

.sdi-root.sdi-m .sdi-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

.sdi-root.sdi-m .sdi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--home-text-2, #4f5b6d);
}

/* «الرد» فوق المفتاح: المفتاح نفسه يقول «تحتاج إلى رد» | "Reply" above the switch: the switch row itself says "Needs a reply" */
.sdi-root.sdi-m .sdi-field:has(> .sdi-switch) > .sdi-label { display: none; }

.sdi-root.sdi-m .sdi-req,
.sdi-root.sdi-m .sdi-error { color: var(--home-danger-text, #c5221f); }

.sdi-root.sdi-m .sdi-note { color: var(--home-accent, #1d4ed8); font-size: 12px; }

/* ---- المرسل | the sender ---- */
.sdi-root.sdi-m .sdi-sender {
    padding: 8px 10px;
    border-color: var(--home-border, #e6eaf1);
    background: var(--home-surface-2, #f7f9fc);
}

.sdi-root.sdi-m .sdi-sender-name { font-size: 14px; color: var(--home-text, #0f1b2d); }
.sdi-root.sdi-m .sdi-sender-sub,
.sdi-root.sdi-m .sdi-person-sub { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.sdi-root.sdi-m .sdi-delegate {
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d3f9e);
}

.sdi-root.sdi-m .sdi-avatar { background: var(--home-chip, #e5e7eb); }
.sdi-root.sdi-m .sdi-avatar--ou { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
.sdi-root.sdi-m .sdi-avatar--group { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); }

/* ---- الحقول (Syncfusion) | the fields (Syncfusion) ---- */
.sdi-root.sdi-m .sdi-multi.e-input-group,
.sdi-root.sdi-m .sdi-ddl.e-input-group {
    min-height: 46px;
    border-radius: 12px !important;
}

.sdi-root.sdi-m .sdi-ddl.e-input-group input.e-input,
.sdi-root.sdi-m .sdi-multi .e-multi-select-wrapper input.e-dropdownbase {
    min-height: 44px;
    font-size: 14px;
}

.sdi-root.sdi-m .sdi-ddl.e-input-group .e-input-group-icon { min-width: 40px; }

/* شرائح المستلمين كما فى التصميم: موظف أزرق، دائرة أخضر، مجموعة بنفسجى
   | the recipient chips as in the design: a person blue, a unit green, a group purple */
.sdi-root.sdi-m .e-multi-select-wrapper .e-chips {
    max-width: fit-content;
    height: 32px !important;
    margin: 4px 2px;
    padding-inline: 5px 4px;
    border-radius: 16px;
    background-color: var(--home-tone-blue-bg, #e7eefc);
}

    .sdi-root.sdi-m .e-multi-select-wrapper .e-chips > .e-chipcontent {
        -webkit-text-fill-color: var(--home-tone-blue, #1d3f9e);
        color: var(--home-tone-blue, #1d3f9e);
        font-size: 13px;
    }

    .sdi-root.sdi-m .e-multi-select-wrapper .e-chips .e-chips-close {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin: 0;
    }

        .sdi-root.sdi-m .e-multi-select-wrapper .e-chips .e-chips-close::before {
            -webkit-text-fill-color: currentColor;
            color: var(--home-tone-blue, #1d3f9e);
        }

        /* مساحة لمس 44px حول × | a 44px touch area around × */
        .sdi-root.sdi-m .e-multi-select-wrapper .e-chips .e-chips-close::after {
            content: "";
            position: absolute;
            inset: -8px;
        }

.sdi-root.sdi-m .e-multi-select-wrapper .e-chips:has(.sdi-avatar--ou) { background-color: var(--home-tone-green-bg, #e6f4f1); }
.sdi-root.sdi-m .e-multi-select-wrapper .e-chips:has(.sdi-avatar--ou) > .e-chipcontent { -webkit-text-fill-color: var(--home-tone-green, #0b5c55); color: var(--home-tone-green, #0b5c55); }
.sdi-root.sdi-m .e-multi-select-wrapper .e-chips:has(.sdi-avatar--ou) .e-chips-close::before { color: var(--home-tone-green, #0b5c55); }
.sdi-root.sdi-m .e-multi-select-wrapper .e-chips:has(.sdi-avatar--group) { background-color: var(--home-tone-purple-bg, #f1ecfd); }
.sdi-root.sdi-m .e-multi-select-wrapper .e-chips:has(.sdi-avatar--group) > .e-chipcontent { -webkit-text-fill-color: var(--home-tone-purple, #5b21b6); color: var(--home-tone-purple, #5b21b6); }
.sdi-root.sdi-m .e-multi-select-wrapper .e-chips:has(.sdi-avatar--group) .e-chips-close::before { color: var(--home-tone-purple, #5b21b6); }

.sdi-root.sdi-m .e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover,
.sdi-root.sdi-m .e-multi-select-wrapper .e-chips.e-chip-selected { filter: brightness(.96); }

.sdi-root.sdi-m .sdi-chip .sdi-avatar--xs { width: 22px; height: 22px; }

/* ---- مفتاح «تحتاج إلى رد»: صف 52px، النص أولاً والمفتاح فى الطرف | the needs-reply switch: a 52px row, the text first, the switch at the end ---- */
.sdi-root.sdi-m .sdi-switch {
    min-height: 52px;
    padding: 6px 0;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sdi-root.sdi-m .sdi-switch-text { order: -1; flex: 1 1 auto; min-width: 0; }
.sdi-root.sdi-m .sdi-switch-text b { font-size: 14px; font-weight: 500; color: var(--home-text, #0f1b2d); }
.sdi-root.sdi-m .sdi-switch-text small { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.sdi-root.sdi-m .sdi-switch .e-switch-wrapper {
    flex: none;
    transform: scale(1.25);
    margin-inline: 6px;
}

/* ---- نص التوجيه | the notes ---- */
.sdi-root.sdi-m .sdi-editor .e-richtexteditor {
    border-radius: 12px;
    border-color: var(--home-border, #d5dce7);
}

.sdi-root.sdi-m .sdi-editor .e-toolbar .e-toolbar-item .e-tbar-btn {
    min-width: 44px;
    min-height: 44px;
}

/* اقتراحات سفر: نفس الأزرار، بشكل الشرائح البنفسجية فى التصميم | SAFAR suggestions: the same buttons, as the design's purple chips */
.sdi-root.sdi-m .ai-replies-bar { gap: 8px; margin: 10px 0 0; }

.sdi-root.sdi-m .ai-replies-bar .rz-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border: 1px solid var(--home-chip-border, #ddd0fb);
    border-radius: 22px;
    background: var(--home-ai-bg, #f6f2ff);
    color: var(--home-ai-text, #4c1d95);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}

    .sdi-root.sdi-m .ai-replies-bar .rz-button .rzi { color: inherit; }
    .sdi-root.sdi-m .ai-replies-bar .rz-button.rz-button-icon-only { padding: 0; width: 44px; }

.sdi-root.sdi-m .ai-replies-bar .ai-replies-hint {
    flex: 1 1 0;
    min-width: 0;
}

    .sdi-root.sdi-m .ai-replies-bar input.ai-replies-hint,
    .sdi-root.sdi-m .ai-replies-bar .ai-replies-hint input {
        height: 44px;
        border-radius: 12px;
        font-size: 13px;
    }

.sdi-root.sdi-m .ai-replies-error { color: var(--home-danger-text, #c5221f); flex-basis: 100%; }

.sdi-root.sdi-m .ai-replies-typing {
    margin-top: 8px;
    border-color: var(--home-chip-border, #ddd0fb);
    border-radius: 12px;
    color: var(--home-text-2, #4f5b6d);
}

    .sdi-root.sdi-m .ai-replies-typing .ai-replies-typing-icon { color: var(--home-ai-text, #5b21b6); }

.sdi-root.sdi-m .ai-replies-list { margin-top: 8px; }

.sdi-root.sdi-m .ai-reply-card {
    border: 1px solid var(--home-chip-border, #ddd0fb);
    border-radius: 12px;
    background: var(--home-ai-bg, #f6f2ff);
}

.sdi-root.sdi-m .ai-reply-num { color: var(--home-ai-text, #5b21b6); }
.sdi-root.sdi-m .ai-reply-text { color: var(--home-text, #0f1b2d); font-size: 14px; }
/* «استخدام هذا الرد»: زر محدَّد بنفسجى (الأبيض على السماوى أقل من 4.5:1) | "Use this reply": an outlined purple button (white on cyan is below 4.5:1) */
.sdi-root.sdi-m .ai-reply-head .rz-button {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--home-chip-border, #ddd0fb);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-ai-text, #4c1d95);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}

    .sdi-root.sdi-m .ai-reply-head .rz-button .rzi { color: inherit; }

/* ---- المرفقات (RecordActionAttatched) | the attachments ---- */
.sdi-root.sdi-m .eat-tool,
.sdi-root.sdi-m .eat-act,
.sdi-root.sdi-m .ecm-chip-open { min-height: 44px; min-width: 44px; }

/* ---- الصلاحيات (قابلة للطى) | the permissions (collapsible) ---- */
.sdi-root.sdi-m .sdi-collapse-btn {
    flex-wrap: wrap;
    min-height: 48px;
    padding: 8px 12px;
    border-color: var(--home-border, #e6eaf1);
    border-radius: 12px;
    background: var(--home-surface-2, #f7f9fc);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

    .sdi-root.sdi-m .sdi-collapse-btn:hover { background: var(--home-hover, #eef1f5); }
    .sdi-root.sdi-m .sdi-collapse-btn .rzi { color: var(--home-accent, #1d4ed8); }
    .sdi-root.sdi-m .sdi-collapse-btn .sdi-collapse-caret { color: var(--home-text-2, #4f5b6d); }

    .sdi-root.sdi-m .sdi-collapse-btn small {
        order: 3;
        flex-basis: 100%;
        padding-inline-start: 28px;
        font-size: 12px;
        color: var(--home-text-2, #4f5b6d);
    }

.sdi-root.sdi-m .sdi-collapse-btn--sub { background: transparent; }

.sdi-root.sdi-m .sdi-perm-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }

.sdi-root.sdi-m .sdi-perm {
    min-height: 44px;
    border-color: var(--home-border, #e6eaf1);
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font-size: 13px;
}

    .sdi-root.sdi-m .sdi-perm .rzi { color: var(--home-text-2, #4f5b6d); }

    /* مساحة لمس 44px حول مربع الاختيار | a 44px touch area around the check box */
    .sdi-root.sdi-m .sdi-perm .rz-chkbox-box { position: relative; }
    .sdi-root.sdi-m .sdi-perm .rz-chkbox-box::after { content: ""; position: absolute; inset: -12px; }

.sdi-root.sdi-m .sdi-perm-att { max-width: 100%; overflow-x: auto; }
.sdi-root.sdi-m .sdi-perm-att-title { color: var(--home-text, #0f1b2d); }
.sdi-root.sdi-m .sdi-empty { color: var(--home-text-2, #4f5b6d); }

/* ---- المرفقات والتوجيهات السابقة | previous attachments and forwardings ---- */
.sdi-root.sdi-m .sdi-att-card {
    max-width: 100%;
    border-color: var(--home-border, #e6eaf1);
    background: var(--home-surface-2, #f7f9fc);
}

.sdi-root.sdi-m .sdi-att-name { color: var(--home-text, #0f1b2d); }
.sdi-root.sdi-m .sdi-att-view.rz-button { min-width: 44px; min-height: 44px; }

.sdi-root.sdi-m .sdi-timeline::before { background: var(--home-border, #e6eaf1); }
.sdi-root.sdi-m .sdi-tl-dot { background: var(--home-surface, #ffffff); border-color: var(--home-accent, #1d4ed8); }

.sdi-root.sdi-m .sdi-tl-card {
    border-color: var(--home-border, #e6eaf1);
    background: var(--home-surface-2, #f7f9fc);
}

.sdi-root.sdi-m .sdi-tl-from,
.sdi-root.sdi-m .sdi-tl-reason { color: var(--home-text, #0f1b2d); }
.sdi-root.sdi-m .sdi-tl-time,
.sdi-root.sdi-m .sdi-tl-k,
.sdi-root.sdi-m .sdi-tl-from small { color: var(--home-text-2, #4f5b6d); }

.sdi-root.sdi-m .sdi-tl-chip {
    background: var(--home-chip, #eef1f6);
    color: var(--home-text, #0f1b2d);
}

.sdi-root.sdi-m .sdi-tl-chip--group .rzi { color: var(--home-tone-purple, #6d28d9); }
.sdi-root.sdi-m .sdi-tl-chip--ou .rzi { color: var(--home-tone-green, #0b5c55); }

.sdi-root.sdi-m .sdi-tl-notes {
    border-color: var(--home-border, #e6eaf1);
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
}

/* ---- الإرسال أسفل الشاشة: «توجيه إلى 2» بعرض كامل | the send button at the bottom: "Forward to 2", full width ---- */
.sdi-root.sdi-m .sdi-foot {
    flex: none;
    padding: 10px 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--home-surface, #ffffff);
    border-top: 1px solid var(--home-border, #e3e8f0);
}

.sdi-root.sdi-m .sdi-btn.sdi-btn--send {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    border-radius: 14px !important;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
}

    .sdi-root.sdi-m .sdi-btn.sdi-btn--send .rzi { font-size: 20px; }

/* ---------------------------------------------------------------------
   المرحلة 5ج — البنود المفتوحة: «مسودة» فى الرأس، ملاحظة المسودة المستعادة، «عاجل»، عبارات سفر القصيرة
   | phase 5c — open items: «Draft» in the header, the restored-draft note, «urgent», SAFAR's short phrases
   --------------------------------------------------------------------- */
.sdi-m .mph .mph-btn.sdi-mdraft {
    height: 44px;
    padding: 0 16px;
}

/* مسودة مستعادة | a restored draft */
.sdi-root.sdi-m .sdi-mdraft-note {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding-block: 4px;
    padding-inline: 12px 4px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 14px;
    background: var(--home-tone-amber-bg, #fff3d6);
    color: var(--home-tone-amber, #7a4a00);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

    .sdi-root.sdi-m .sdi-mdraft-note .sdi-mdraft-ic { flex: none; display: inline-flex; width: 20px; height: 20px; }
    .sdi-root.sdi-m .sdi-mdraft-note .sdi-mdraft-ic svg { width: 100%; height: 100%; }
    .sdi-root.sdi-m .sdi-mdraft-note .sdi-mdraft-text { flex: 1 1 auto; min-width: 0; }

    .sdi-root.sdi-m .sdi-mdraft-note .sdi-mdraft-discard {
        flex: none;
        min-height: 44px;
        padding: 0 12px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: inherit;
        font: inherit;
        text-decoration: underline;
        cursor: pointer;
    }

        .sdi-root.sdi-m .sdi-mdraft-note .sdi-mdraft-discard:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
        .sdi-root.sdi-m .sdi-mdraft-note .sdi-mdraft-discard[disabled] { opacity: .5; cursor: default; }

/* «عاجل»: نفس صف المفتاح، النص يبدّل أيضًا | «urgent»: the same switch row; the text toggles it too */
.sdi-root.sdi-m .sdi-mswitch .sdi-switch-text { cursor: pointer; min-height: 40px; justify-content: center; }

/* اقتراحات سفر: شرائح بنفسجية (≥44px) | SAFAR suggestions: purple chips (≥44px) */
.sdi-root.sdi-m .sdi-mai { margin-top: 10px; }

.sdi-root.sdi-m .sdi-mai-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--home-ai-text, #5b21b6);
}

    .sdi-root.sdi-m .sdi-mai-title .sdi-mai-ic { display: inline-flex; width: 16px; height: 16px; }
    .sdi-root.sdi-m .sdi-mai-title .sdi-mai-ic svg { width: 100%; height: 100%; }

.sdi-root.sdi-m .sdi-mai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sdi-root.sdi-m .sdi-mai-chip {
    min-height: 44px;
    max-width: 100%;
    padding: 6px 14px;
    border: 1px solid var(--home-chip-border, #ddd0fb);
    border-radius: 22px;
    background: var(--home-ai-bg, #f6f2ff);
    color: var(--home-ai-text, #4c1d95);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease;
}

    .sdi-root.sdi-m .sdi-mai-chip:active { transform: scale(.97); }
    .sdi-root.sdi-m .sdi-mai-chip:focus-visible { outline: 2px solid var(--home-ai-text, #5b21b6); outline-offset: 2px; }

.sdi-root.sdi-m .sdi-mai-chip--full {
    border-style: dashed;
    background: var(--home-surface, #ffffff);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .sdi-root.sdi-m .sdi-mai-chip { transition: none; }
    .sdi-root.sdi-m .sdi-mai-chip:active { transform: none; }
}

/* =====================================================================
   المرحلة 5ج (الجزء 2): معاملة جديدة / تعديل (شاشة 7) — MessageEdit بـ MobileView على الهاتف (.me-m, .me-m-s1/2/3, .me-m*,
   .med-dialog-m). معالج من 3 خطوات بنفس الأقسام والأزرار: 1 البيانات + المستند الرئيسى، 2 المرفقات، 3 الإرسال (أزرار الإجراء
   الحالية). سطح المكتب ومسار الهاتف القديم لا يحملان هذه الأصناف.
   | phase 5c (part 2): new transaction / edit (screen 7) — MessageEdit with MobileView on a phone. A 3-step wizard over the same
   sections and buttons: 1 data + main document, 2 attachments, 3 send (the existing action buttons). The desktop and the old
   phone path carry none of these classes.
   ===================================================================== */

/* النافذة: ملء الشاشة بلا حشوة (site.css يضيف 60px لشريط الأوامر الثابت القديم) | the dialog: full screen, no padding */
.rz-dialog.med-dialog-m {
    border-radius: 0;
    box-shadow: none;
    background: var(--home-canvas, #f3f5f9);
}

.rz-dialog.message-Edit-dialog.med-dialog-m > .rz-dialog-content {
    flex: 1 1 auto;
    padding: 0 !important;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--home-canvas, #f3f5f9);
}

/* السلسلة عمود مرن: الرأس والخطوات ثابتة، المحتوى يتمرّر، الشريط السفلى ثابت | a flex column: header fixed, content scrolls, bottom bar fixed */
.me-root.me-m {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

.me-root.me-m > .content-wrapper,
.me-root.me-m .email-wrapper,
.me-root.me-m .email-wrapper > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
}

/* ---- الرأس والخطوات | the header and the steps ---- */
.me-m .mph.me-mhead { flex: none; gap: 4px; padding-bottom: 8px; }
.me-m .mph.me-mhead .mph-extra { padding-inline: 8px; }

.me-m .me-mstep-count {
    padding-inline: 8px;
    font-size: 13px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    font-feature-settings: 'tnum';
}

.me-m .me-msteps { display: flex; gap: 8px; }

.me-m .me-mstep {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .me-m .me-mstep:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; border-radius: 6px; }
    .me-m .me-mstep .me-mstep-bar { display: block; height: 4px; border-radius: 2px; background: var(--home-border, #d5dce7); }
    .me-m .me-mstep.is-done .me-mstep-bar,
    .me-m .me-mstep.is-on .me-mstep-bar { background: var(--home-accent-strong, #1d4ed8); }
    .me-m .me-mstep.is-on { color: var(--home-accent, #1d4ed8); font-weight: 700; }

/* ---- الخطوات: ما يظهر فى كل خطوة | the steps: what each one shows ---- */
.me-root.me-m:not(.me-m-s3) .me-bar { display: none !important; }
.me-root.me-m.me-m-s3 .me-body { display: none !important; }
.me-root.me-m.me-m-s2 .me-side { display: none !important; }

/* المحتوى (الخطوتان 1 و2) | the content (steps 1 and 2) */
.me-root.me-m .me-body {
    flex: 1 1 auto;
    min-height: 0 !important;
    display: block;
    margin: 0 !important;
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

    .me-root.me-m .me-body > .me-side,
    .me-root.me-m .me-body > .me-doc {
        width: 100%;
        max-width: 100%;
        flex: none;
        margin: 0;
        padding: 0 !important;
        border: 0;
        background: transparent;
    }

    .me-root.me-m .me-body > .me-doc { margin-top: 10px; }
    .me-root.me-m.me-m-s2 .me-body > .me-doc { margin-top: 0; }

/* النوع (للعرض فقط) | the type (read-only) */
.me-m .me-mtype {
    display: flex;
    margin-bottom: 10px;
    padding: 4px;
    border-radius: 14px;
    background: var(--home-chip, #e8edf5);
}

    .me-m .me-mtype .me-mtype-on {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        border-radius: 10px;
        background: var(--home-surface, #ffffff);
        color: var(--home-accent, #1d4ed8);
        font-size: 13px;
        font-weight: 700;
        box-shadow: 0 1px 4px rgba(15, 27, 45, .12);
    }

/* البيانات: الأقسام الحالية كبطاقات، بلا رأس الطى | the data: the existing sections as cards, without the fold header */
.me-m .me-side .me-accordion.rz-accordion,
.me-m .me-side .me-accordion.rz-accordion > div {
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.me-m .me-side .me-accordion .rz-accordion-header { display: none; }

.me-m .me-side .me-accordion .rz-accordion-content {
    display: block !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
}

.me-m .me-form .me-section {
    margin: 0 0 10px;
    padding: 12px 14px;
    background: var(--home-surface, #ffffff);
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    box-shadow: none;
}

.me-m .me-form .me-section-head {
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--home-text-2, #4f5b6d);
}

    .me-m .me-form .me-section-head .rzi { font-size: 18px; color: var(--home-accent, #1d4ed8); background: transparent; }

.me-m .me-form .me-section-body > .row > .col-md-4 .rz-label { font-size: 12px; font-weight: 600; color: var(--home-text-2, #4f5b6d); }

.me-m .me-form .rz-textbox,
.me-m .me-form .rz-textarea,
.me-m .me-form .e-input-group,
.me-m .me-form .e-input-group.e-control-wrapper {
    border-radius: 12px !important;
}

.me-m .me-form input.rz-textbox,
.me-m .me-form .e-input-group:not(.e-multi-line-input) { min-height: 46px; }
.me-m .me-form .e-input-group input.e-input { min-height: 44px; font-size: 14px; }

/* أزرار الأيقونة داخل الحقول (مثل «+» لإضافة جهة) بلمسة ≥44px | icon buttons in the fields (e.g. «+» to add a party) at ≥44px */
.me-m .me-form .rz-button.rz-button-icon-only { min-width: 44px; min-height: 44px; }

/* المستند الرئيسى (الخطوة 1) | the main document (step 1) */
.me-m .me-doc .row.mb-3:has(.attach-grid-box) { display: none; }

.me-m .me-mdoc-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--home-surface, #ffffff);
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
}

.me-m .me-mdoc-title { font-size: 12px; font-weight: 600; color: var(--home-text-2, #4f5b6d); }

.me-m .me-mdoc-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
    border: 0;
    border-radius: 14px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .me-m .me-mdoc-main .me-mdoc-main-ic { flex: none; display: inline-flex; width: 26px; height: 26px; }
    .me-m .me-mdoc-main .me-mdoc-main-ic svg { width: 100%; height: 100%; }
    .me-m .me-mdoc-main .me-mdoc-main-text { display: flex; flex-direction: column; min-width: 0; }
    .me-m .me-mdoc-main b { font-size: 16px; font-weight: 700; }
    .me-m .me-mdoc-main small { font-size: 12px; }
    .me-m .me-mdoc-main:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.me-m .me-mdoc-more {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.me-m .me-mdoc-btn {
    min-height: 48px;
    padding: 6px 10px;
    border: 1px solid var(--home-border, #d5dce7);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}

    .me-m .me-mdoc-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* التبويبات: الخطوة 1 بلا رؤوس (المحتوى فقط)، الخطوة 2 بلا رأس المحتوى | the tabs: step 1 without headers (content only), step 2 without the content header */
.me-m.me-m-s1 .me-doc .e-tab > .e-tab-header { display: none !important; }
.me-m.me-m-s2 .me-doc .e-tab > .e-tab-header .e-toolbar-items .e-toolbar-item:first-child { display: none !important; }

.me-m .me-doc .nested-tabs.e-tab > .e-tab-header {
    background: var(--home-surface, #ffffff);
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow-x: auto;
}

    .me-m .me-doc .nested-tabs.e-tab > .e-toolbar.e-tab-header .e-toolbar-items .e-toolbar-item { min-height: 44px; }

.me-m .me-doc .nested-tabs.e-tab > .e-content {
    padding: 0;
    background: transparent;
    border: 0;
}

    .me-m .me-doc .nested-tabs.e-tab > .e-content > .e-item {
        padding: 12px;
        background: var(--home-surface, #ffffff);
        border: 1px solid var(--home-border, #e6eaf1);
        border-radius: 16px;
    }

.me-m.me-m-s1 .me-doc .nested-tabs.e-tab > .e-content > .e-item:has(.me-mdoc-card) {
    padding: 0;
    background: transparent;
    border: 0;
}

/* الرد: شريط «رد على» والمعاملة الأصل مطوية | reply: the «reply to» strip; the parent folded */
.me-m .me-doc .parent-layout,
.me-m .me-doc .parent-layout > .rz-body {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    background: transparent;
}

    .me-m .me-doc .parent-layout > .rz-header {
        position: static;
        margin-bottom: 10px;
        border: 1px solid var(--home-border, #e6eaf1);
        border-radius: 14px;
        background: var(--home-surface, #ffffff);
    }

    .me-m .me-doc .parent-layout .rz-body > .rz-p-4 { padding: 0 !important; }
    .me-m .me-doc .parent-layout .rz-sidebar-toggle { min-width: 44px; min-height: 44px; }

/* الرد: زرّا المحتوى كما فى التصميم | reply: the two content buttons in the design's look */
.me-m .me-doc .parent-layout .row.mb-3 .text-center { display: flex; flex-direction: column; gap: 8px; margin-top: 0 !important; }
.me-m .me-doc .parent-layout .row.mb-3 .text-center .rz-button { width: 100%; min-height: 52px; margin: 0 !important; border-radius: 14px; }

/* ---- الخطوة 3: أزرار الإجراء الحالية كقائمة | step 3: the existing action buttons as a list ---- */
.me-m .me-mactions-title {
    flex: none;
    padding: 14px 16px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--home-text-2, #4f5b6d);
}

.me-root.me-m.me-m-s3 .me-bar.message-edit-command-div {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start !important;   /* site.css (≤767px): center !important */
    text-align: start !important;
    gap: 8px;
    margin: 0 !important;
    padding: 12px !important;
    overflow-y: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

    .me-root.me-m.me-m-s3 .me-bar .but-command.rz-button,
    .me-root.me-m.me-m-s3 .me-bar .me-bar-versions .rz-button {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        min-height: 52px;
        height: auto !important;   /* site.css: .but-command { height: 100% !important } */
        margin: 0 !important;
        padding: 0 16px !important;
        border: 1px solid var(--home-border, #d5dce7) !important;
        border-radius: 14px !important;
        background: var(--home-surface, #ffffff) !important;
        color: var(--home-text, #0f1b2d) !important;
        box-shadow: none !important;
    }

        .me-root.me-m.me-m-s3 .me-bar .rz-button .rz-button-box {
            display: flex !important;
            flex-direction: row !important;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            width: 100%;
            height: auto !important;   /* site.css: .but-command .rz-button-box { height: 100% !important } */
            min-height: 50px;
            margin: 0 !important;
        }

        /* site.css (≤767px): max-width 65px, 9px, nowrap + ellipsis, margin auto | site.css on a phone squeezes the label */
        .me-root.me-m.me-m-s3 .me-bar .rz-button .rz-button-text {
            display: block !important;
            flex: 1 1 auto;
            max-width: none !important;
            margin: 0 !important;
            overflow: visible;
            white-space: normal;
            font-size: 15px !important;
            font-weight: 600 !important;
            color: inherit !important;
            text-align: start;
        }

        .me-root.me-m.me-m-s3 .me-bar .rz-button .rzi { font-size: 22px !important; color: var(--home-accent, #1d4ed8) !important; margin: 0 !important; }

    .me-root.me-m.me-m-s3 .me-bar .but-command.me-btn-primary.rz-button {
        border-color: var(--home-accent-strong, #1d4ed8) !important;
        background: var(--home-accent-strong, #1d4ed8) !important;
        color: #ffffff !important;
    }

        .me-root.me-m.me-m-s3 .me-bar .but-command.me-btn-primary.rz-button .rzi { color: #ffffff !important; }

    .me-root.me-m.me-m-s3 .me-bar .me-bar-versions { width: 100%; max-width: none; flex: none; padding: 0; margin: 0; }

    /* «إغلاق» هو × فى الرأس | «Close» is the × in the header */
    .me-root.me-m.me-m-s3 .me-bar .me-btn-close { display: none !important; }

/* ---- الشريط السفلى | the bottom bar ---- */
.me-m .me-mbar {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--home-surface, #ffffff);
    border-top: 1px solid var(--home-border, #e3e8f0);
}

.me-m .me-mbar .me-mbar-btn {
    min-height: 52px;
    margin: 0;
    padding: 0 16px;
    border-radius: 14px !important;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
}

.me-m .me-mbar .me-mbar-save.rz-button {
    flex: 0 0 auto;
    border: 1px solid var(--home-border, #d5dce7) !important;
    background: var(--home-surface, #ffffff) !important;
    color: var(--home-text, #0f1b2d) !important;
    font-weight: 600;
}

    .me-m .me-mbar .me-mbar-save .rz-button-text { font-size: 15px; color: inherit; }

.me-m .me-mbar .me-mbar-next {
    flex: 1 1 auto;
    border: 0;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
}

.me-m .me-mbar .me-mbar-back {
    flex: 1 1 auto;
    border: 1px solid var(--home-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
}

.me-m .me-mbar .me-mbar-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* =====================================================================
   المرحلة 5د: مسار المعاملة (شاشة 8) — RecordReferenceList بـ MobileView فى تبويب «المسار» على الهاتف (.erf-m).
   خط زمنى بشكل التصميم: الأقدم أولاً، نقطة وخط لكل خطوة، العنوان والوقت فى سطر، الملاحظات بطاقة، «قُرئت لدى n من m»،
   وملخص (المدة، المستلمون، الخطوات). يمرّره عرض المعاملة على الهاتف فقط؛ سطح المكتب لا يحمل هذه الأصناف.
   | phase 5d: the transaction path (screen 8) — RecordReferenceList with MobileView in the phone «المسار» tab (.erf-m).
   The design's timeline: oldest first, a dot and a line per step, title and time on one line, the notes as a card,
   «read by n of m», and a summary (duration, recipients, steps). Passed only by the phone transaction view.
   ===================================================================== */

.erf-root.erf-m { font-size: 14px; }

/* ---- الملخص | the summary ---- */
.erf-m .erf-msum {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.erf-m .erf-msum-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px;
    background: var(--home-surface, #ffffff);
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 14px;
}

    .erf-m .erf-msum-cell span { font-size: 11.5px; color: var(--home-text-2, #4f5b6d); }
    .erf-m .erf-msum-cell b { font-size: 15px; font-weight: 700; color: var(--home-text, #0f1b2d); overflow-wrap: anywhere; }

/* ---- البحث والطباعة والمرفقات السابقة | search, print, previous attachments ---- */
.erf-m .erf-toolbar { flex-wrap: nowrap; margin-bottom: 12px; }
.erf-m .erf-search { flex: 1 1 auto; max-width: none; }

.erf-m .erf-search-input {
    height: 44px;
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    font-size: 14px;
}

.erf-m .rz-button.erf-print {
    flex: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 12px;
}

.erf-m .erf-collapse {
    min-height: 44px;
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
}

.erf-m .erf-att { max-width: 100%; min-height: 44px; }

.erf-m .rz-button.erf-att-view {
    width: 44px;
    height: 44px;
    margin-block: -4px;
}

/* ---- الخط: نقطة وخط لكل خطوة | the line: a dot and a segment per step ---- */
.erf-m .erf-timeline { padding-top: 0; padding-inline-start: 40px; }
.erf-m .erf-timeline::before { display: none; }

.erf-m .erf-item { margin-bottom: 0; padding-bottom: 16px; }

    .erf-m .erf-item::before {
        content: "";
        position: absolute;
        top: 32px;
        bottom: 4px;
        inset-inline-start: -27px;
        width: 2px;
        border-radius: 1px;
        background: var(--home-solid-green, #0f766e);
    }

    .erf-m .erf-item:last-child::before,
    .erf-m .erf-item:has(+ .erf-empty)::before { display: none; }

    /* القطعة الأخيرة قبل «بانتظار الرد» رمادية | the segment into «awaiting a reply» is grey */
    .erf-m .erf-item:has(+ .erf-mstep.is-pending)::before { background: var(--home-border, #cfd6e2); }

.erf-m .erf-dot {
    top: 0;
    inset-inline-start: -40px;
    width: 28px;
    height: 28px;
    border: 0;
    background: var(--home-solid-green, #0f766e);
    color: #ffffff;
}

    .erf-m .erf-dot .rzi { font-size: 15px; }

.erf-m .erf-item.is-current .erf-dot {
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--home-accent-strong, #1d4ed8) 20%, transparent);
}

.erf-m .erf-mstep.is-pending .erf-dot {
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #4f5b6d);
    border: 2px dashed color-mix(in srgb, var(--home-text-2, #4f5b6d) 60%, transparent);
}

/* ---- الخطوة: بلا بطاقة، العنوان والوقت فى سطر | the step: no card, title and time on one line ---- */
.erf-m .erf-card,
.erf-m .erf-item.is-current .erf-card {
    padding: 3px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

    .erf-m .erf-card:hover { box-shadow: none; }

.erf-m .erf-head {
    align-items: baseline;
    gap: 4px 8px;
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: 0;
}

.erf-m .erf-type { flex: 1 1 auto; gap: 4px 6px; }

.erf-m .erf-kicker {
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: var(--home-text, #0f1b2d);
}

.erf-m .erf-item.is-current .erf-kicker { color: var(--home-accent, #1d4ed8); }
.erf-m .erf-serial { font-size: 12px; color: var(--home-text-2, #4f5b6d); }
.erf-m .erf-serial-full { font-size: 12px; font-weight: 600; }

.erf-m .erf-time { font-size: 11.5px; color: var(--home-text-2, #4f5b6d); }
    .erf-m .erf-time .rzi { display: none; }

/* التسمية ثم القيمة فى سطر، والشرائح تلتف داخل القيمة | the label then the value on one line; the chips wrap inside the value */
.erf-m .erf-row { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 4px; gap: 6px; font-size: 13px; }
.erf-m .erf-k { min-width: 0; padding-top: 4px; font-size: 12px; font-weight: 600; color: var(--home-text-2, #4f5b6d); }
.erf-m .erf-row > .erf-reason { max-width: 100%; }
.erf-m .erf-avatar { width: 28px; height: 28px; }
.erf-m .erf-from-text b { font-size: 13px; }
.erf-m .erf-from-text > small { font-size: 12px; color: var(--home-text-2, #4f5b6d); }
.erf-m .erf-chip { max-width: 100%; min-height: 26px; font-size: 12px; }

.erf-m .erf-mwho { font-size: 13px; line-height: 1.5; color: var(--home-text-2, #4f5b6d); }

/* أصغر على الهاتف: النص أغمق قليلاً من لون السبب ليبقى ≥4.5:1 | smaller on the phone: the text a little darker than the reason colour to stay ≥4.5:1 */
.erf-m .erf-reason {
    padding: 2px 10px;
    font-size: 12px;
    color: color-mix(in srgb, var(--c, var(--home-info-text, #0b7ea8)) 72%, var(--home-text, #0f1b2d));
}

.erf-m .erf-notes,
.erf-m .erf-item.is-current .erf-notes {
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--home-text, #0f1b2d);
}

/* «قُرئت لدى n من m» | read by n of m */
.erf-m .erf-mread {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-tone-green, #0b5c55);
}

    .erf-m .erf-mread .rzi { font-size: 15px; }
    .erf-m .erf-mread.is-none { font-weight: 500; color: var(--home-text-2, #4f5b6d); }

/* موعد الرد | the reply deadline */
.erf-m .erf-mdue { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--home-tone-amber, #7a4a00); }
    .erf-m .erf-mdue.is-late { color: var(--home-tone-red, #9f1d14); }

.erf-m .erf-mstep.is-pending .erf-kicker { color: var(--home-text-2, #4f5b6d); }

/* =====================================================================
   المرحلة 5د (2): عارض المرفق (شاشة 9) — ViewAttachedGeneral بـ MobileView على الهاتف (.vag-m, .vag-dialog-m).
   داكن دائماً فى الوضعين كما فى التصميم (مثل غرفة الاجتماع). تفتحه مرفقات عرض المعاملة على الهاتف فقط.
   | phase 5d (2): the attachment viewer (screen 9) — ViewAttachedGeneral with MobileView on a phone. Always dark in both
   themes, as in the design (like the meeting room). Opened only by the attachments of the phone transaction view.
   ===================================================================== */

.rz-dialog.vag-dialog-m {
    border-radius: 0;
    box-shadow: none;
    background: #10161f;
}

.rz-dialog.vag-dialog-m > .rz-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    background: #10161f;
}

.vag-m {
    --vag-bg: #10161f;
    --vag-surface: #1d2633;
    --vag-bar: #1a222e;
    --vag-text: #e8edf5;          /* 15.6:1 on --vag-bg */
    --vag-muted: #a9b4c4;         /*  8.6:1 */
    /* MobilePageHeader داخل العارض | inside the viewer */
    --home-surface: #10161f;
    --home-text: #e8edf5;
    --home-text-2: #a9b4c4;
    --home-icon: #e8edf5;
    --home-border: transparent;
    --home-accent: #8fb0ff;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--vag-bg);
    color: var(--vag-text);
    color-scheme: dark;
}

/* الرأس: × فى مربع داكن كما فى التصميم | the header: × in a dark square, as in the design */
.vag-m .mph.vag-mhead { flex: none; padding: 12px; padding-top: max(12px, env(safe-area-inset-top, 0px)); }
.vag-m .mph.vag-mhead .mph-row { gap: 8px; }
.vag-m .mph.vag-mhead .mph-back { background: var(--vag-surface); }
.vag-m .mph.vag-mhead .mph-title { font-size: 14px; font-weight: 600; }

/* العارض يملأ ما بين الرأس والشريط | the viewer fills the space between the header and the bar */
.vag-m .vag-mbody {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 12px 8px;
    overflow: hidden;
}

    .vag-m .vag-mbody > * { flex: 1 1 auto; min-height: 0; }

.vag-m .vag-mframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 6px;
    background: #ffffff;
}

.vag-m .vag-mimg,
.vag-m .vag-mvideo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

.vag-m .vag-mpdf,
.vag-m .vag-mbody .e-pv-viewer-container {
    border: 0;
    border-radius: 6px;
}

.vag-m .vag-mbody .wm-pdf-msg { color: var(--vag-text); }

/* الشريط السفلى: «تنزيل» | the bottom bar: «download» */
.vag-m .vag-mbar {
    flex: none;
    display: flex;
    justify-content: center;
    padding: 10px 12px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    background: var(--vag-bar);
}

.vag-m .vag-mtool {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 88px;
    height: 56px;
    padding: 0 16px;
    border-radius: 12px;
    color: var(--vag-text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

    .vag-m .vag-mtool:hover,
    .vag-m .vag-mtool:active { background: var(--vag-surface); color: var(--vag-text); }
    .vag-m .vag-mtool:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 2px; }
    .vag-m .vag-mtool-ic { display: inline-flex; width: 22px; height: 22px; }
    .vag-m .vag-mtool-ic svg { width: 100%; height: 100%; }

/* =====================================================================
   البنود المفتوحة (أ) 2026-10-22 — عرض المعاملة والعارض على الهاتف: نجمة المفضلة فى الرأس (.mvm-fav)، قائمة المرفقات
   (.eat-mlist, .eat-mrow, .eat-mopen, .eat-mtile, .eat-mact, .eat-mzip*)، و«مشاركة» فى العارض (.vag-mshare).
   | open items (A) — the phone view and viewer: the favourite star, the attachments list, «share» in the viewer.
   ===================================================================== */

/* نجمة المفضلة: مملوءة باللون عند التفضيل | the star: filled with the colour when favourite */
.mvm-head .mph .mph-btn.mvm-fav.is-pressed,
.mph.mvm-head .mph-btn.mvm-fav.is-pressed { color: var(--home-star, #b45309); }
    .mph.mvm-head .mph-btn.mvm-fav.is-pressed svg { fill: currentColor; }

/* قائمة المرفقات | the attachments list */
.eat-mlist { display: flex; flex-direction: column; gap: 8px; }

.eat-mrow {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    padding-inline-end: 6px;
    background: var(--home-surface, #ffffff);
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
}

.eat-mopen {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .eat-mopen:disabled { cursor: default; }
    .eat-mopen:focus-visible,
    .eat-mact:focus-visible,
    .eat-mzip-item:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.eat-mtile {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c, #1d4ed8) 16%, var(--home-surface, #ffffff));
    /* لون النوع ممزوجاً بلون النص: أغمق فى الفاتح، أفتح فى الداكن (≥3:1 للأيقونة) | the type colour mixed with the text colour: darker in light, lighter in dark */
    color: color-mix(in srgb, var(--c, #1d4ed8) 72%, var(--home-text, #0f1b2d));
    font-size: 20px;
}

.eat-mtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.eat-mname,
.eat-msub {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.eat-mname { font-size: 14px; font-weight: 600; }
.eat-msub { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.eat-mact {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    cursor: pointer;
}

    .eat-mact .rzi { font-size: 20px; }

.eat-mzip { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 24px; }

.eat-mzip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px dashed var(--home-border, #d5dce7);
    border-radius: 12px;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 13px;
    text-align: start;
    cursor: pointer;
}

/* العارض: «تنزيل» و«مشاركة» جنباً إلى جنب | the viewer: «download» and «share» side by side */
.vag-m .vag-mbar { gap: 8px; }

.vag-m button.vag-mtool {
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .vag-m .vag-mtool.is-busy { opacity: .6; cursor: progress; }

/* =====================================================================
   البنود المفتوحة (ب): وقت القراءة والحالة فى مسار المعاملة على الهاتف (RecordReferenceList بـ MobileView، .erf-m)
   «الحالة» فى الملخص بدل «الخطوات»، «قُرئت لدى n من m» زر يفتح من قرأ ومتى، و«قرأتها منذ…». بلا حركة.
   | open items (B): the read time and the status in the phone path. The summary's «status» instead of «steps», «read by n of m»
     as a button that opens who read it and when, and «you read it … ago». No animation.
   ===================================================================== */

/* «الحالة»: لون حسب الحالة | «status»: a colour per state */
.erf-m .erf-mstatus.is-withyou b { color: var(--home-tone-blue, #1d4ed8); }
.erf-m .erf-mstatus.is-replied b { color: var(--home-tone-green, #0b5c55); }
.erf-m .erf-mstatus.is-awaiting b { color: var(--home-tone-amber, #7a4a00); }
.erf-m .erf-mstatus.is-closed b { color: var(--home-text-2, #4f5b6d); }

/* سطر القراءة: الزر و«قرأتها منذ…» | the read line: the button and «you read it … ago» */
.erf-m .erf-mread-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    margin-top: 2px;
}

.erf-m .erf-mread-row .erf-mread {
    min-height: 44px;
    margin: 0;
    margin-inline-start: -4px;
    padding: 0 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    line-height: 1.3;
    text-align: start;
    cursor: pointer;
}

    .erf-m .erf-mread-row .erf-mread:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 0; }
    .erf-m .erf-mread-row .erf-mread .erf-mread-caret { font-size: 18px; }

.erf-m .erf-mmine { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

/* من قرأ ومتى | who read it and when */
.erf-m .erf-mreaders {
    margin: 0 0 4px;
    padding: 2px 12px;
    list-style: none;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
}

.erf-m .erf-mreader {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--home-border, #e6eaf1);
    font-size: 12.5px;
}

    .erf-m .erf-mreader:last-child { border-bottom: 0; }
    .erf-m .erf-mreader.is-member { padding-inline-start: 16px; }

.erf-m .erf-mreader-who { min-width: 0; }
.erf-m .erf-mreader-name { font-weight: 600; color: var(--home-text, #0f1b2d); overflow-wrap: anywhere; }
.erf-m .erf-mreader.is-member .erf-mreader-name { font-weight: 500; }

.erf-m .erf-mreader-cc {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--home-chip, #eef0f3);
    font-size: 11px;
    color: var(--home-text-2, #4f5b6d);
}

.erf-m .erf-mreader-by { display: block; font-size: 11.5px; color: var(--home-text-2, #4f5b6d); }

.erf-m .erf-mreader-state { flex: none; font-size: 11.5px; color: var(--home-text-2, #4f5b6d); }
.erf-m .erf-mreader.is-read .erf-mreader-state { font-weight: 600; color: var(--home-tone-green, #0b5c55); }

/* =====================================================================
   البنود المفتوحة (د): «إلى» فى المذكرة الداخلية — الخطوة 1 من نموذج المعاملة على الهاتف (MessageEdit بـ MobileView، صادر داخلى).
   الحقل تحت الموضوع كما فى التصميم؛ الشرائح بألوان شاشة التوجيه (موظف أزرق، دائرة أخضر، مجموعة بنفسجى)؛ القائمة بملء الشاشة.
   | open items (D): «To» in the internal memo — step 1 of the phone's transaction form (MessageEdit with MobileView, internal memo).
   The field under the subject as in the design; the chips in the forwarding form's colours (a person blue, a unit green, a group
   purple); the list full screen.
   ===================================================================== */

.me-m .me-mto .e-multi-select-wrapper input.e-dropdownbase {
    min-height: 44px;
    font-size: 14px;
}

.me-m .me-mto .e-multi-select-wrapper .e-chips {
    max-width: fit-content;
    height: 32px !important;
    margin: 4px 2px;
    padding-inline: 5px 4px;
    border-radius: 16px;
    background-color: var(--home-tone-blue-bg, #e7eefc);
}

    .me-m .me-mto .e-multi-select-wrapper .e-chips > .e-chipcontent {
        -webkit-text-fill-color: var(--home-tone-blue, #1d3f9e);
        color: var(--home-tone-blue, #1d3f9e);
        font-size: 13px;
    }

    .me-m .me-mto .e-multi-select-wrapper .e-chips .e-chips-close {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin: 0;
    }

        .me-m .me-mto .e-multi-select-wrapper .e-chips .e-chips-close::before {
            -webkit-text-fill-color: currentColor;
            color: var(--home-tone-blue, #1d3f9e);
        }

        /* مساحة لمس 44px حول × | a 44px touch area around × */
        .me-m .me-mto .e-multi-select-wrapper .e-chips .e-chips-close::after {
            content: "";
            position: absolute;
            inset: -8px;
        }

.me-m .me-mto .e-multi-select-wrapper .e-chips:has(.me-mto-chip--t2) { background-color: var(--home-tone-green-bg, #e6f4f1); }
.me-m .me-mto .e-multi-select-wrapper .e-chips:has(.me-mto-chip--t2) > .e-chipcontent { -webkit-text-fill-color: var(--home-tone-green, #0b5c55); color: var(--home-tone-green, #0b5c55); }
.me-m .me-mto .e-multi-select-wrapper .e-chips:has(.me-mto-chip--t2) .e-chips-close::before { color: var(--home-tone-green, #0b5c55); }
.me-m .me-mto .e-multi-select-wrapper .e-chips:has(.me-mto-chip--t3) { background-color: var(--home-tone-purple-bg, #f1ecfd); }
.me-m .me-mto .e-multi-select-wrapper .e-chips:has(.me-mto-chip--t3) > .e-chipcontent { -webkit-text-fill-color: var(--home-tone-purple, #5b21b6); color: var(--home-tone-purple, #5b21b6); }
.me-m .me-mto .e-multi-select-wrapper .e-chips:has(.me-mto-chip--t3) .e-chips-close::before { color: var(--home-tone-purple, #5b21b6); }

.me-m .me-mto-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.me-m .me-mto-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* الملاحظة تحت الحقل | the note under the field */
.me-m .me-mto-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--home-text-2, #4f5b6d);
}

    .me-m .me-mto-note .rzi {
        flex: none;
        font-size: 16px;
        color: var(--home-accent, #1d4ed8);
    }

    .me-m .me-mto-note.is-warn { color: var(--home-tone-amber, #8a4b00); }
    .me-m .me-mto-note.is-warn .rzi { color: var(--home-tone-amber, #8a4b00); }

/* الصورة / الأيقونة: فى القائمة 36px، فى الشريحة 22px | the photo / icon: 36px in the list, 22px in a chip */
.me-mto-av {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--home-chip, #e5e7eb);
    color: var(--home-text-2, #4f5b6d);
}

    .me-mto-av .rzi { font-size: 20px; }
    .me-mto-av--xs { width: 22px; height: 22px; }
    .me-mto-av--xs .rzi { font-size: 14px; }
    .me-mto-av--ou { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
    .me-mto-av--group { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); }

/* القائمة (منبثقة بملء الشاشة خارج .me-m، تحمل الصنف me-mto-ms) | the list (a full-screen popup outside .me-m, carrying the class me-mto-ms) */
.e-popup.me-mto-ms .e-list-item {
    min-height: 56px;
    line-height: normal;
}

.e-popup.me-mto-ms .me-mto-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 0;
}

.e-popup.me-mto-ms .me-mto-item-text { min-width: 0; }

.e-popup.me-mto-ms .me-mto-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--home-text, #0f1b2d);
    overflow-wrap: anywhere;
}

.e-popup.me-mto-ms .me-mto-item-sub {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    overflow-wrap: anywhere;
}

/* =====================================================================
   البنود المفتوحة (هـ) 2026-10-22 — المسح الضوئى بالكاميرا على الهاتف (MessageEdit، الخطوة 1): حقل الكاميرا المخفى (.me-scan-input)،
   شاشة المسح الداكنة دائماً كعارض المرفق (.me-scan, .me-scan-*)، والصورة والزوايا التى يرسمها mobile-scan.js (.mscan-*).
   ألوانها محلية (--scan-*) لأنها داكنة فى الوضعين؛ لا توكن جديد فى darkOverrid.css.
   | open items (E) — the camera scan on a phone (MessageEdit, step 1): the hidden camera input, the scanner screen (always dark, like
   the attachment viewer) and the photo + corners drawn by mobile-scan.js. Its colours are local (--scan-*) since it is dark in both
   modes; no new token in darkOverrid.css.
   ===================================================================== */

/* حقل الكاميرا: مخفى بصرياً (لا display:none حتى تفتحه اللمسة على كل الهواتف) | the camera input: visually hidden (not display:none, so the tap opens it on every phone) */
.me-m .me-scan-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

/* الشاشة: فوق الشريط السفلى (1000) والقائمة السفلية (1045)، تحت الإشعارات (1090) | the screen: above the bottom bar (1000) and the sheet (1045), below the toasts (1090) */
.me-scan {
    --scan-bg: #10161f;
    --scan-surface: #1d2633;
    --scan-bar: #1a222e;
    --scan-line: #33404f;
    --scan-text: #e8edf5;       /* 15.4:1 on --scan-bg, 13.0:1 on --scan-surface */
    --scan-muted: #a9b4c4;      /*  8.7:1, 7.3:1 */
    --scan-accent: #8fb0ff;     /*  8.5:1, 7.1:1 */
    --scan-warn: #ffd27a;       /* 10.7:1 on --scan-surface */
    --scan-primary: #2f5bd8;    /* white text 5.8:1 */
    --scan-danger: #b83a33;     /* white text 5.7:1 */
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
    background: var(--scan-bg);
    color: var(--scan-text);
    color-scheme: dark;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
}

    .me-scan button { font: inherit; -webkit-tap-highlight-color: transparent; }
    .me-scan button:focus-visible { outline: 2px solid var(--scan-accent); outline-offset: 2px; }

/* الرأس: × فى مربع داكن، العنوان، عدد الصفحات | the header: × in a dark square, the title, the page count */
.me-scan-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
}

.me-scan-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--scan-surface);
    color: var(--scan-text);
    cursor: pointer;
}

    .me-scan-x:disabled { opacity: .45; cursor: default; }

.me-scan-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--scan-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.me-scan-count {
    flex: none;
    color: var(--scan-muted);
    font-size: 13px;
    font-feature-settings: 'tnum';
    white-space: nowrap;
}

/* التلميح فوق الصورة (كهرمانى حين لم تُعرف الحواف) | the hint above the photo (amber when the edges were not found) */
.me-scan-hint {
    flex: none;
    margin: 0 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--scan-surface);
    color: var(--scan-muted);
    font-size: 13px;
    line-height: 1.5;
}

    .me-scan-hint.is-warn { color: var(--scan-warn); }

/* الصورة والزوايا (يرسمها mobile-scan.js داخل .me-scan-stage) | the photo and the corners (drawn by mobile-scan.js inside .me-scan-stage) */
.me-scan-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px 22px;   /* مكان نصف الزاوية خارج الصورة | room for half a corner outside the photo */
}

.me-scan .mscan-view { position: relative; flex: none; direction: ltr; touch-action: none; }
.me-scan .mscan-photo { display: block; border-radius: 4px; }
.me-scan .mscan-frame { position: absolute; inset: 0; overflow: visible; pointer-events: none; }

    .me-scan .mscan-frame polygon {
        fill: rgba(143, 176, 255, .16);
        stroke: var(--scan-accent);
        stroke-width: 2;
        stroke-linejoin: round;
    }

/* زاوية: لمسة 44px ونقطة ظاهرة | a corner: a 44px touch target with a visible dot */
.me-scan .mscan-corner {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    touch-action: none;
    cursor: grab;
}

    .me-scan .mscan-corner:active { cursor: grabbing; }
    .me-scan .mscan-corner:focus-visible { outline: none; }

.me-scan .mscan-corner-dot {
    display: block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--scan-accent);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(16, 22, 31, .6);
}

    .me-scan .mscan-corner.is-drag .mscan-corner-dot { width: 28px; height: 28px; }
    .me-scan .mscan-corner:focus-visible .mscan-corner-dot { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--scan-accent); }

/* شكل الصفحة: مستند محسّن | بالألوان | the page look: enhanced document | colour */
.me-scan-modes {
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 0 12px 10px;
    padding: 4px;
    border-radius: 14px;
    background: var(--scan-surface);
}

.me-scan-mode {
    min-height: 44px;
    padding: 6px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--scan-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

    .me-scan-mode.is-on { background: var(--scan-text); color: var(--scan-bg); }

/* الشريط السفلى | the bottom bar */
.me-scan-bar {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    background: var(--scan-bar);
}

.me-scan-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    padding: 6px 10px;
    border: 1px solid var(--scan-line);
    border-radius: 14px;
    background: var(--scan-surface);
    color: var(--scan-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

    .me-scan-btn.is-primary { border-color: var(--scan-primary); background: var(--scan-primary); color: #ffffff; }
    .me-scan-btn.is-danger { border-color: var(--scan-danger); background: var(--scan-danger); color: #ffffff; }
    .me-scan-btn.is-wide { flex-basis: 100%; }
    .me-scan-btn:disabled { opacity: .5; cursor: default; }

/* الصفحات: ثلاث فى الصف بشكل A4، ورقم الصفحة، و× للحذف (لمسة 44px) | the pages: three a row in A4 shape, the page number, × to delete (44px) */
.me-scan-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 12px 16px;
}

.me-scan-pages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.me-scan-page {
    position: relative;
    aspect-ratio: 210 / 297;
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
}

    .me-scan-page img { display: block; width: 100%; height: 100%; object-fit: contain; }

.me-scan-page-n {
    position: absolute;
    bottom: 6px;
    inset-inline-start: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: rgba(16, 22, 31, .88);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    font-feature-settings: 'tnum';
}

.me-scan-page-del {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 44px;
    height: 44px;
    padding: 6px;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

    .me-scan-page-del svg {
        box-sizing: border-box;
        width: 26px;
        height: 26px;
        padding: 4px;
        border-radius: 50%;
        background: rgba(16, 22, 31, .88);
    }

.me-scan-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    aspect-ratio: 210 / 297;
    min-height: 44px;
    padding: 8px;
    border: 2px dashed var(--scan-line);
    border-radius: 8px;
    background: transparent;
    color: var(--scan-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
}

.me-scan-note {
    margin: 14px 2px 0;
    color: var(--scan-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* التجهيز وقراءة النص (الدائرة تدور فقط إن لم يُطلب تقليل الحركة) | preparing + OCR (the ring turns only without reduced motion) */
.me-scan-busy {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    color: var(--scan-text);
    font-size: 15px;
    text-align: center;
}

.me-scan-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--scan-line);
    border-top-color: var(--scan-accent);
    border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
    .me-scan-spinner { animation: me-scan-spin 1s linear infinite; }
}

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

/* تجاهل الصفحات؟ (داخل الشاشة نفسها) | discard the pages? (inside the screen itself) */
.me-scan-ask {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    background: rgba(5, 8, 12, .62);
}

.me-scan-ask-box {
    width: 100%;
    padding: 18px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: var(--scan-surface);
}

    .me-scan-ask-box p { margin: 0 0 14px; color: var(--scan-text); font-size: 15px; font-weight: 600; line-height: 1.5; }

.me-scan-ask-bar { display: flex; gap: 8px; }

/* =====================================================================
   المرحلة 13 2026-10-22 — أدوات تحويل الملفات على الهاتف (الشاشات 32–36)
   HomeConvertal داخل MobileLayout (.cvm): صفحة الأدوات (32: شبكة بثلاثة أعمدة فى أربع مجموعات + بحث + السجل)،
   صفحة الأداة برأسها (33–35؛ أدوات الصفحات الأربع تبويبات)، وسجل التحويلات صفحةً كاملة (36: .cvh-mpage).
   الأدوات نفسها (cvt-* / cvp-* / cvu-* فى site.css) يُعاد تنسيقها هنا داخل .cvm فقط: منطقة اختيار، صفوف الملفات،
   شريط سفلى ثابت للإجراء، قائمة الدمج بأسهم، شبكات الصفحات (الورق أبيض دائماً)، مساحة التوقيع، بطاقة النتيجة.
   الألوان عبر --home-* (القيم الفاتحة احتياطية) و--cvt-* / --cvp-* من site.css؛ لا توكن جديد فى darkOverrid.css.
   | phase 13 — the file conversion tools on a phone: the tools page, the tool page (the four page tools as tabs), the
   history page; the tools themselves restyled inside .cvm only. Colours: --home-* (light fallbacks) and --cvt-* / --cvp-*.
   ===================================================================== */

/* ---- الصفحة | the page ---- */
.cvm {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
}

    .cvm .mph.cvm-head {
        position: sticky;
        top: 0;
        z-index: 6;
    }

/* رأس الأداة: مربع الأداة + الاسم + الوصف | the tool header: the tool tile + name + description */
.cvm .cvm-head-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cvm .cvm-head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* مربع الأداة: رمزها (sprite.5.svg) على لون نوع الملف | the tool tile: its glyph (sprite.5.svg) on the file type's tone */
.cvm .cvm-tile {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--home-tone-neutral-bg, #f1f4f9);
}

    .cvm .cvm-tile .cvh-sprite { transform: scale(1.4); }
    .cvm .cvm-tile.is-blue { background: var(--home-tone-blue-bg, #e7eefc); }
    .cvm .cvm-tile.is-green { background: var(--home-tone-green-bg, #e6f4f1); }
    .cvm .cvm-tile.is-amber { background: var(--home-tone-amber-bg, #fff3d6); }
    .cvm .cvm-tile.is-purple { background: var(--home-tone-purple-bg, #f1ecfd); }
    .cvm .cvm-tile.is-red { background: var(--home-tone-red-bg, #fdeceb); }
    .cvm .cvm-head .cvm-tile { width: 40px; height: 40px; }

/* البحث | search */
.cvm .cvm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border-radius: 14px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-text-2, #4f5b6d);
    cursor: text;
}

    .cvm .cvm-search:focus-within { box-shadow: 0 0 0 2px var(--home-accent, #1d4ed8); }

.cvm .cvm-search-ic { flex: none; display: inline-flex; width: 18px; height: 18px; }
    .cvm .cvm-search-ic svg { width: 100%; height: 100%; }

.cvm .cvm-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--home-text, #0f1b2d);
    outline: none;
}

    .cvm .cvm-search-input::placeholder { color: var(--home-text-2, #4f5b6d); opacity: 1; }

/* تبويبات أدوات الصفحات | the page tools' tabs */
.cvm .cvm-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: -8px;   /* حتى الخط السفلى للرأس | down to the header's bottom line */
}

.cvm .cvm-tab {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--home-text-2, #4f5b6d);
    cursor: pointer;
}

    .cvm .cvm-tab.is-on {
        border-bottom-color: var(--home-accent-strong, #1d4ed8);
        font-weight: 700;
        color: var(--home-accent, #1d4ed8);
    }

    .cvm .cvm-tab:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }

/* ---- الشاشة 32: الأدوات | screen 32: the tools ---- */
.cvm .cvm-tools {
    flex: 1 0 auto;
    padding: 4px 12px calc(20px + env(safe-area-inset-bottom, 0px));
}

.cvm .cvm-group-title {
    margin: 0;
    padding: 12px 4px 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--home-text-2, #4f5b6d);
}

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

.cvm .cvm-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    min-height: 100px;
    margin: 0;
    padding: 10px 6px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--home-text, #0f1b2d);
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .cvm .cvm-tool-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }
    .cvm .cvm-tool-name { overflow-wrap: anywhere; }

.cvm .cvm-empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 32px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--home-text-2, #4f5b6d);
}

    .cvm .cvm-empty b { font-size: 15px; color: var(--home-text, #0f1b2d); }

/* ---- الشاشات 33–35: الأداة | screens 33–35: the tool ---- */
.cvm .cvm-tool {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px 12px 0;
}

    /* المسرح يملأ الصفحة حتى يستقر شريط الإجراء أسفلها | the stage fills the page so the action bar sits at its bottom */
    .cvm .cvm-tool > .cvt-root,
    .cvm .cvm-tool > .cvt-root > .cvt-root,
    .cvm .cvm-tool > .cvt-root > .cvt-stage,
    .cvm .cvm-tool > .cvt-root > .cvt-root > .cvt-stage {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

.cvm .cvt-root .cvt-stage {
    gap: 12px;
    max-width: none;
    padding-bottom: 12px;
}

.cvm .cvt-root .cvt-card {
    padding: 12px;
    border-radius: 16px;
    border-color: var(--home-border, #e6eaf1);
    box-shadow: none;
}

/* منطقة الاختيار: «اختر ملفًا من جهازك» عنواناً (لا سحب وإفلات على الهاتف) | the pick zone: «choose a file from your device» as the title (no drag & drop on a phone) */
.cvm .cvt-root .cvt-drop {
    min-height: 176px;
    border-radius: 20px;
    border-color: color-mix(in srgb, var(--cvt-primary) 45%, var(--cvt-line));
    background: color-mix(in srgb, var(--cvt-primary) 4%, var(--cvt-card));
}

    .cvm .cvt-root .cvt-drop-inner:has(.cvt-drop-browse) > .cvt-drop-title { display: none; }
    .cvm .cvt-root .cvt-drop-sub:has(.cvt-drop-browse) > span:not(.cvt-drop-browse) { display: none; }

.cvm .cvt-root .cvt-drop-browse {
    font-size: 15px;
    font-weight: 700;
    color: var(--cvt-text);
    text-decoration: none;
}

.cvm .cvt-root .cvt-drop-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
}

    .cvm .cvt-root .cvt-drop-icon .rzi { font-size: 30px; }

/* الملفات والأزرار الصغيرة: لمسة 44px | files and small buttons: 44px touch targets */
.cvm .cvt-root .cvt-file { min-height: 56px; padding: 8px 10px; }
.cvm .cvt-root .cvt-icon-btn { width: 44px; height: 44px; border-radius: 12px; }
.cvm .cvt-root .cvt-card-actions .rz-button { min-height: 44px; }
.cvm .cvt-root .cvt-seg-btn { min-height: 44px; }
.cvm .cvt-root .cvt-choices { grid-template-columns: minmax(0, 1fr); }
.cvm .cvt-root .cvt-choice { min-height: 56px; align-items: center; }

/* شريط الإجراء أسفل الصفحة (تحويل / إلغاء …) | the action bar at the bottom of the page (convert / cancel …) */
.cvm .cvm-tool .cvt-stage:has(> .cvt-actions) { padding-bottom: 0; }

.cvm .cvm-tool .cvt-stage > .cvt-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    flex-wrap: nowrap;
    margin: auto -12px 0;
    padding: 10px 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

    .cvm .cvm-tool .cvt-stage > .cvt-actions .rz-button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 52px;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 700;
    }

        .cvm .cvm-tool .cvt-stage > .cvt-actions .rz-button.rz-primary { flex-grow: 2; }

    /* الزر الثانوى (إلغاء / عرض / مرة أخرى) بألوان الصفحة — تباين ≥4.5 فى الوضعين | the secondary button (cancel / view / again) in the page colours — contrast ≥4.5 in both modes */
    .cvm .cvt-root .cvt-actions .rz-button.rz-light {
        border: 1px solid var(--home-border, #d5dce7);
        background: var(--home-surface-2, #eef1f6);
        color: var(--home-text, #0f1b2d);
    }

        .cvm .cvt-root .cvt-actions .rz-button.rz-light .rzi { color: inherit; }

/* حالة التحويل | the conversion status */
.cvm .cvt-root .cvt-busy { border-radius: 16px; }
.cvm .cvt-root .cvt-note,
.cvm .cvt-root .cvt-alert { font-size: 13px; }

/* ---- الشاشة 35: النتيجة | screen 35: the result ---- */
.cvm .cvt-root .cvt-result {
    padding: 20px 14px 16px;
    border-color: var(--home-border, #e6eaf1);
    border-radius: 18px;
    background: var(--cvt-card);
    box-shadow: none;
}

.cvm .cvt-root .cvt-result-title { font-size: 20px; }
.cvm .cvt-root .cvt-result .cvt-file { max-width: none; }

.cvm .cvt-root .cvt-size {
    width: 100%;
    justify-content: space-between;
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    background: var(--home-tone-green-bg, #e6f4f1);
}

    .cvm .cvt-root .cvt-size .cvt-size-after { color: var(--home-tone-green, #0b5c55); }
    .cvm .cvt-root .cvt-size .cvt-size-before { color: var(--home-text-2, #4f5b6d); }
    .cvm .cvt-root .cvt-size .cvt-size-delta { background: var(--home-surface, #ffffff); color: var(--home-tone-green, #0b5c55); }

.cvm .cvt-root .cvt-result > .cvt-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
}

    .cvm .cvt-root .cvt-result > .cvt-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }

    .cvm .cvt-root .cvt-result > .cvt-actions .rz-button,
    .cvm .cvt-root .cvt-result > .cvt-actions a.rz-button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        margin: 0;
        border-radius: 12px;
    }

/* «ماذا تريد بعد ذلك؟»: بطاقتان فى الصف | «what next?»: two tiles a row */
.cvm .cvt-root .cvt-post { max-width: none; }

.cvm .cvt-root .cvt-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cvm .cvt-root .cvt-post-btn {
    flex-direction: column;
    align-items: flex-start;
    min-height: 92px;
    padding: 12px;
    border-radius: 16px;
}

.cvm .cvt-root .cvt-post-ic { width: 40px; height: 40px; border-radius: 12px; }

/* ---- الشاشة 34: أدوات الصفحات | screen 34: the page tools ---- */
.cvm .cvt-root.cvp-root {
    --cvp-col: 100px;
    --cvp-sheet-h: 132px;
}

.cvm .cvt-root .cvp-bar-row { flex-wrap: wrap; }
.cvm .cvt-root .cvp-bar-tools { width: 100%; flex-wrap: wrap; gap: 8px; }
.cvm .cvt-root .cvp-tbtn { min-height: 44px; }
.cvm .cvt-root .cvp-range { flex: 1 1 100%; height: auto; min-height: 44px; }
.cvm .cvt-root .cvp-range-input { flex: 1 1 auto; width: auto; min-height: 42px; font-size: 15px; }
.cvm .cvt-root .cvp-size .cvt-seg-btn { min-height: 44px; min-width: 44px; justify-content: center; }
.cvm .cvt-root .cvp-tool { width: 44px; height: 44px; }
    .cvm .cvt-root .cvp-tool .rzi { font-size: 20px; }

/* الدمج: قائمة — الترتيب، المصغرة، الاسم، سهما الترتيب (والسحب كما هو)، الإزالة
   | merge: a list — the order, the thumbnail, the name, the two order arrows (and the drag, as is), remove */
.cvm .cvp-merge .cvp-size { display: none; }   /* القائمة بلا حجم مصغرات | the list has no thumbnail size */

.cvm .cvp-merge .cvp-grid,
.cvm .cvp-merge .cvp-grid.is-lg {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cvm .cvp-merge .cvp-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}

.cvm .cvp-merge .cvp-sheet { display: contents; }

.cvm .cvp-merge .cvp-num {
    position: static;
    order: 0;
    flex: none;
    min-width: 26px;
    height: 26px;
    border-color: var(--cvt-primary);
    background: var(--cvt-primary);
    box-shadow: none;
    color: #ffffff;
}

.cvm .cvp-merge .cvp-paper {
    order: 1;
    flex: none;
    width: 44px;
    height: auto;
    max-height: 60px;
    object-fit: contain;
}

    .cvm .cvp-merge .cvp-paper.is-empty { height: 58px; font-size: 24px; }

.cvm .cvp-merge .cvp-cap { order: 2; flex: 1 1 auto; padding: 0; }
.cvm .cvp-merge .cvp-handle { display: none; }

.cvm .cvp-merge .cvp-moves {
    position: static;
    order: 3;
    flex: none;
    flex-direction: column;
    gap: 0;
}

    .cvm .cvp-merge .cvp-moves .cvp-tool { border: 0; box-shadow: none; background: transparent; }
    /* سهما الترتيب للأعلى / للأسفل فى القائمة | the order arrows point up / down in the list */
    .cvm .cvp-merge .cvp-moves .cvp-tool .rzi { transform: rotate(90deg); }

.cvm .cvp-merge .cvp-corner { position: static; order: 4; flex: none; }

.cvm .cvp-merge .cvp-hover { opacity: 1; }

.cvm .cvp-merge .cvp-grid .cvp-add {
    flex-direction: row;
    min-height: 56px;
    padding: 8px 12px;
}

    .cvm .cvp-merge .cvp-grid .cvp-add .cvp-add-sub { display: none; }

/* التقسيم: ثلاث صفحات فى الصف (البطاقة كلها زر الاختيار) | split: three pages a row (the whole card is the toggle) */
.cvm .cvp-split .cvp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cvm .cvp-split .cvp-grid.is-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); --cvp-sheet-h: 196px; }

/* التنظيم: صفحتان فى الصف حتى تتسع أزرار 44px | organize: two pages a row so the 44px buttons fit */
.cvm .cvp-organize .cvp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --cvp-sheet-h: 196px; gap: 10px; }
.cvm .cvp-organize .cvp-grid.is-lg { grid-template-columns: minmax(0, 1fr); --cvp-sheet-h: 320px; }
.cvm .cvp-organize .cvp-hover,
.cvm .cvp-split .cvp-hover { opacity: 1; }

.cvm .cvt-root .cvp-card { padding: 6px; border-radius: 14px; }
.cvm .cvt-root .cvp-add { min-height: calc(var(--cvp-sheet-h) + 40px); }

/* الصفحات بيضاء دائماً (ورقة بيضاء على أرضية الصفحة) | pages always white (white paper on the page ground) */
.cvm .cvt-root .cvp-paper { background: #ffffff; }

/* التوقيع: الصفحة أولاً ثم التواقيع والأزرار | sign: the page first, then the signatures and the buttons */
.cvm .cvt-root .cvp-sign { flex-direction: column; flex-wrap: nowrap; }
.cvm .cvt-root .cvp-viewer-card { flex: none; }
.cvm .cvt-root .cvp-viewer { height: 56vh; min-height: 340px; }
.cvm .cvt-root .cvp-sign-panel { flex: none; align-self: stretch; }
.cvm .cvt-root .cvp-sig { min-height: 56px; }
.cvm .cvt-root .cvp-sign-actions .rz-button { min-height: 48px; border-radius: 12px; }
.cvm .cvt-root.cvp-signer .cvt-busy { padding-top: 22vh; }

/* ---- الشاشة 36: سجل التحويلات | screen 36: the conversion history ---- */
.cvm .cvh-mpage {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cvm .cvh-mbody {
    flex: 1 0 auto;
    padding: 4px 12px calc(20px + env(safe-area-inset-bottom, 0px));
}

.cvm .cvh-mgroup-title {
    margin: 0;
    padding: 12px 4px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-text-2, #4f5b6d);
}

.cvm .cvh-mlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cvm .cvh-mitem {
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

    .cvm .cvh-mitem.is-open { border-color: color-mix(in srgb, var(--cvt-primary) 45%, var(--cvt-line)); }

.cvm .cvh-mrow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding-block: 8px;
    padding-inline: 10px 6px;
}

.cvm .cvh-mmain {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cvm .cvh-mname {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--home-text, #0f1b2d);
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.cvm .cvh-mpage[dir="RTL" i] .cvh-mname { text-align: right; }

.cvm .cvh-mmeta { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.cvm .cvh-mbtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    text-decoration: none;
    cursor: pointer;
}

    .cvm .cvh-mbtn svg { width: 20px; height: 20px; }
    .cvm .cvh-mbtn.is-download { background: var(--home-tone-blue-bg, #e7eefc); color: var(--home-tone-blue, #1d4ed8); }
    .cvm .cvh-mbtn.is-active { background: var(--home-surface-2, #f1f4f9); color: var(--home-accent, #1d4ed8); }
    .cvm .cvh-mbtn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.cvm .cvh-mpost {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px 10px;
}

.cvm .cvh-mview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid var(--home-border, #d5dce7);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--home-text, #0f1b2d);
    cursor: pointer;
}

    .cvm .cvh-mview-ic { display: inline-flex; width: 18px; height: 18px; }
    .cvm .cvh-mview-ic svg { width: 100%; height: 100%; }

.cvm .cvh-mpost .cvt-post { margin-top: 0; padding-top: 4px; border-top: 0; }

/* الحالات والتحميل والمزيد | states, loading, show more */
.cvm .cvh-mpage .cvh-state { padding-block: 40px; }
.cvm .cvh-mpage .cvh-state.is-error > .rzi { color: var(--cvt-danger); }
.cvm .cvh-mpage .cvh-skels { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }

.cvm .cvh-mpage .cvh-skel {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.cvm .cvh-mpage .ou-skel.cvh-skel-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; }
.cvm .cvh-mpage .cvh-skel-lines { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; }

.cvm .cvh-mpage .cvh-mmore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    border: 1px dashed var(--home-border, #d5dce7);
    border-radius: 14px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--home-accent, #1d4ed8);
    cursor: pointer;
}

/* =====================================================================
   المرحلة 14 2026-10-22 — سحابة سفر على الهاتف (الشاشات 37–40)
   37: CloudManagement داخل MobileLayout (.cldm-page): رأس (سحابة سفر + القسم؛ التصفية والعرض والبحث من MyFiles فى
       موضعيهما)، شرائح الأقسام، MyFiles بعرض الهاتف (.cldm: المسار، المجلدات، الملفات بطاقات / قائمة)، وزر «جديد» العائم.
   38: قائمة ⋮ للملف / المجلد: MobileSheet بنفس إجراءات BuildMenu ومجموعاتها (.cldm-sheet).
   39: ShareCloudFile / ShareCloudFolder بملء الشاشة (.cdlm). 40: CloudInsertPicker (.clpm) وCorrespOwnerChooser (.ccom)
       بملء الشاشة — النوافذ تأتى من فاتحيها بأحجام سطح المكتب، فتُكبَّر هنا لملء الشاشة (الهاتف فقط: الأصناف لا تظهر إلا فيه).
   الألوان عبر --home-* (القيم الفاتحة احتياطية)؛ لا توكن جديد فى darkOverrid.css. صورة الملف المصغّرة على خلفية بيضاء دائماً.
   | phase 14 — SAFAR Cloud on a phone: the cloud page, the ⋮ sheet, sharing, the cloud picker and the owner chooser full
   screen (the dialogs keep their openers' desktop sizes, enlarged here; these classes exist only on a phone).
   Colours: --home-* (light fallbacks); no new token in darkOverrid.css. File thumbnails always sit on white.
   ===================================================================== */

/* ---- الصفحة (37) | the page (37) ---- */
.cldm-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
}

    .cldm-page .mph.cldm-head {
        position: sticky;
        top: 0;
        z-index: 6;
    }

/* أزرار الرأس (من MyFiles): التصفية والعرض | the header buttons (from MyFiles): filter and view */
.mph .cldm-hbtn .rzi { font-size: 22px; }

.mph .cldm-hbtn.is-on {
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
}

.mph .cldm-hdot {
    position: absolute;
    top: 9px;
    inset-inline-end: 9px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--home-surface, #ffffff);
    border-radius: 50%;
    background: var(--home-badge, #c2410c);
}

/* البحث | search */
.cldm-search,
.clpm-search {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding-inline: 12px 0;
    border-radius: 14px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-text-2, #4f5b6d);
}

    .cldm-search:focus-within,
    .clpm-search:focus-within { box-shadow: 0 0 0 2px var(--home-accent, #1d4ed8); }

    .cldm-search .cldm-search-ic,
    .clpm-search .clpm-search-ic { flex: none; font-size: 20px; }

.cldm-search-input,
.clpm-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--home-text, #0f1b2d);
    outline: none;
}

    .cldm-search-input::placeholder,
    .clpm-search-input::placeholder { color: var(--home-text-2, #4f5b6d); opacity: 1; }

    .cldm-search-input::-webkit-search-cancel-button,
    .clpm-search-input::-webkit-search-cancel-button { display: none; }

.cldm-search-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .cldm-search-x .rzi { font-size: 20px; }

/* شرائح الأقسام: لمسة 44px وشكل 34px | the section chips: a 44px touch target, a 34px pill */
.cldm-chips {
    display: flex;
    gap: 6px;
    margin-inline: -12px;
    padding-inline: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .cldm-chips::-webkit-scrollbar { display: none; }

.cldm-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cldm-chip-pill {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 17px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #334155);
    font-size: 13px;
    white-space: nowrap;
}

.cldm-chip.is-on .cldm-chip-pill {
    border-color: var(--home-accent-strong, #1d4ed8);
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font-weight: 600;
}

.cldm-chip:focus-visible { outline: none; }
    .cldm-chip:focus-visible .cldm-chip-pill { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* حالة الرفع | the upload status */
.cldm-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
    font-size: 13px;
    font-weight: 600;
}

.cldm-upload-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cldm-spin {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cldm-spin .8s linear infinite;
}

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

/* المستعرض: مساحة أسفله لزر «جديد» | the browser: room underneath for «New» */
.cldm-page .cldm-browser {
    flex: 1 0 auto;
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* زر «جديد» العائم | the floating «New» */
.cldm-fab {
    position: fixed;
    inset-inline-end: 16px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 16px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 20px var(--home-accent-shadow, rgba(29, 78, 216, .28));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .cldm-fab .rzi { font-size: 22px; }
    .cldm-fab:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 3px; }
    .cldm-fab[disabled] { opacity: .55; cursor: default; }

/* قائمة «جديد» | the «New» sheet */
.cldm-new-target {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0 6px 8px;
    font-size: 13px;
    color: var(--home-text-2, #4f5b6d);
}

    .cldm-new-target .rzi { flex: none; font-size: 18px; }

.cldm-new-target-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--home-text, #0f1b2d);
}

.msheet .msheet-item.cldm-new-item { min-height: 64px; }

.cldm-new-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
}

    .cldm-new-ic.is-folder { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }
    .cldm-new-ic .rzi { font-size: 22px; }

.cldm-new-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cldm-new-title { font-size: 14px; font-weight: 600; }
.cldm-new-sub { font-size: 12px; font-weight: 400; color: var(--home-text-2, #4f5b6d); }

/* ---- المستعرض على الهاتف (MyFiles) | the browser on a phone (MyFiles) ---- */
.cldm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px 16px;
    color: var(--home-text, #0f1b2d);
}

/* المسار | the path */
.cldm-path {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.cldm-back {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .cldm-back .rzi { font-size: 20px; }

.cldm-crumbs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline: 4px;
    font-size: 13px;
    color: var(--home-text-2, #4f5b6d);
}

.cldm-crumb-lead {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cldm-crumb-sep { flex: none; }

.cldm-crumb-cur {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: var(--home-text, #0f1b2d);
}

    .cldm-crumbs > .cldm-crumb-cur:only-child { max-width: 100%; }

/* التصفية | filters */
.cldm-filters {
    --rz-input-height: 44px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

    .cldm-filters > .cldm-dd:first-child,
    .cldm-filters > .cldm-range { grid-column: 1 / -1; }

    .cldm-filters .cldm-dd.rz-dropdown {
        width: 100%;
        min-width: 0;
        border-radius: 12px;
    }

    .cldm-filters .cldm-dd.is-set { box-shadow: inset 0 0 0 1px var(--home-accent, #1d4ed8); }

.cldm-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

    .cldm-range .cldm-date { width: 100%; min-width: 0; }

/* عوامل التصفية النشطة | the active filters */
.cldm-fchips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cldm-fchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-height: 44px;
    padding-inline-start: 12px;
    border-radius: 22px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
    font-size: 12px;
    font-weight: 600;
}

    .cldm-fchip > .rzi { flex: none; font-size: 16px; }

.cldm-fchip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cldm-fchip-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

    .cldm-fchip-x .rzi { font-size: 18px; }

.cldm-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 22px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #334155);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .cldm-clear .rzi { font-size: 16px; }

/* التحميل / الرفع | loading / uploading */
.cldm-busy {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #4f5b6d);
    font-size: 13px;
}

    .cldm-busy .cldm-spin { color: var(--home-accent, #1d4ed8); }

.cldm-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cldm-skels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cldm-skel {
    height: 140px;
    border-radius: 16px;
    background: var(--home-surface-2, #e9edf3);
}

/* الأقسام | the sections */
.cldm-sec {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cldm-sec-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 2px 4px 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--home-text-2, #4f5b6d);
}

.cldm-sec-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--home-tone-neutral-bg, #e9edf3);
    color: var(--home-tone-neutral, #334155);
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    font-feature-settings: 'tnum';
}

/* مربع النوع | the type tile */
.cldm-tile {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--home-tone-neutral-bg, #e9edf3);
    color: var(--home-tone-neutral, #334155);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

    .cldm-tile .rzi { font-size: 20px; }
    .cldm-tile.is-red { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
    .cldm-tile.is-blue { background: var(--home-tone-blue-bg, #e7eefc); color: var(--home-tone-blue, #1d4ed8); }
    .cldm-tile.is-green { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
    .cldm-tile.is-purple { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); }
    .cldm-tile.is-amber,
    .cldm-tile.is-folder { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }
    .cldm-tile.is-folder { width: 36px; height: 36px; }
    .cldm-tile.is-folder .rzi { font-size: 22px; }
    .cldm-tile.is-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 11px; }
    .cldm-tile.is-lg .rzi { font-size: 24px; }
    .cldm-tile.is-md { width: 48px; height: 48px; border-radius: 14px; font-size: 11px; }
    .cldm-tile.is-md .rzi { font-size: 24px; }

.cldm-ext { letter-spacing: .2px; }

/* الاسم والتفاصيل | the name and details */
.cldm-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: start;
}

.cldm-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--home-text, #0f1b2d);
    unicode-bidi: plaintext;
}

.cldm-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.4;
    color: var(--home-text-2, #4f5b6d);
}

.cldm-dot {
    flex: none;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.cldm-meta-ic { flex: none; font-size: 14px; }

.cldm-mark {
    flex: none;
    font-size: 16px;
    color: var(--home-text-2, #4f5b6d);
}

    .cldm-mark.is-star { color: var(--home-star, #b45309); }
    .cldm-meta .cldm-mark { font-size: 14px; }
    .cldm-meta .cldm-mark:first-of-type { margin-inline-start: 2px; }

/* المجلدات (بطاقات) | folders (cards) */
.cldm-folders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cldm-folder,
.cldm-card {
    position: relative;
    min-width: 0;
    display: flex;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
}

.cldm-hit {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .cldm-hit:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }

.cldm-folder:has(.cldm-more) .cldm-hit { padding-inline-end: 0; }

.cldm-more {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .cldm-more .rzi { font-size: 20px; }
    .cldm-more:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }

/* الملفات (بطاقات): الصورة المصغّرة على خلفية بيضاء دائماً | files (cards): the thumbnail always on white */
.cldm-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cldm-card {
    overflow: hidden;
    border-radius: 16px;
}

    .cldm-card .cldm-hit {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

.cldm-thumb {
    position: relative;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--home-border, #e6eaf1);
    background: #fffffe;
}

    .cldm-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.cldm-card-foot {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 8px 10px;
}

    .cldm-card-foot .cldm-name { font-size: 12px; }

/* القائمة | the list */
.cldm-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.cldm-row {
    display: flex;
    align-items: center;
    min-width: 0;
    border-top: 1px solid var(--home-divider, #eef1f6);
}

    .cldm-row:first-child { border-top: 0; }

    .cldm-row .cldm-hit {
        gap: 10px;
        min-height: 58px;
        padding: 0;
    }

.cldm-more-ic {
    flex: none;
    font-size: 20px;
    color: var(--home-text-2, #4f5b6d);
}

    /* فى القائمة: ⋮ المجلد على خط ⋮ الملفات | in the list: the folder ⋮ lines up with the files' ⋮ */
    .cldm-row .cldm-more { margin-inline-end: -12px; }

/* المحدد فى نافذة الاختيار | selected in the picker */
.cldm-folder.is-selected,
.cldm-card.is-selected {
    border-color: var(--home-accent, #1d4ed8);
    box-shadow: 0 0 0 1px var(--home-accent, #1d4ed8);
}

.cldm-row.is-selected {
    margin-inline: -12px;
    padding-inline: 12px;
    background: var(--home-selected, #e7eefc);
}

    /* عدة ملفات: المربع هو الحالة، بلا إبراز للنقرة الأخيرة | several files: the checkbox is the state, no highlight of the last tap */
    .cldm.is-multi .cldm-row.is-selected { background: transparent; }
    .cldm.is-multi .cldm-card.is-selected { border-color: var(--home-border, #e6eaf1); box-shadow: none; }

/* مربع الاختيار (عدة ملفات) | the checkbox (several files) */
.cldm-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 2px solid var(--home-text-2, #4f5b6d);
    border-radius: 7px;
    background: var(--home-surface, #ffffff);
    color: transparent;
}

    .cldm-check .rzi { font-size: 16px; font-weight: 700; }

    .cldm-check.is-on {
        border-color: var(--home-accent-strong, #1d4ed8);
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
    }

.cldm-thumb .cldm-check {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
}

/* الفراغ والخطأ | empty and error */
.cldm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    text-align: center;
}

.cldm-empty-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
}

    .cldm-empty-ic .rzi { font-size: 28px; }
    .cldm-empty.is-error .cldm-empty-ic { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }

.cldm-empty-title { font-size: 15px; font-weight: 700; color: var(--home-text, #0f1b2d); }
.cldm-empty-sub { font-size: 13px; line-height: 1.5; color: var(--home-text-2, #4f5b6d); }

.cldm-empty-acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.cldm-btn,
.cdlm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--home-border, #d5dce7);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .cldm-btn .rzi,
    .cdlm-btn .rzi { font-size: 20px; }

    .cldm-btn.is-primary {
        border-color: var(--home-accent-strong, #1d4ed8);
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
    }

/* ---- قائمة ⋮ (38) وقائمة «جديد» | the ⋮ sheet (38) and the «New» sheet ---- */
.msheet:has(.cldm-sheet) .msheet-close { width: 44px; height: 44px; }

.cldm-sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cldm-sheet-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .cldm-sheet-head .cldm-meta { font-size: 12px; }

.msheet .cldm-sheet-tiles {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

    .msheet .cldm-sheet-tiles .msheet-tile-icon .rzi { font-size: 22px; }

.cldm-sheet-group {
    display: flex;
    flex-direction: column;
}

    .cldm-sheet .msheet-item-icon { align-items: center; justify-content: center; }
    .cldm-sheet .msheet-item-icon .rzi { font-size: 20px; }
    .cldm-sheet .msheet-item[disabled] { opacity: .45; }

/* ---- النوافذ بملء الشاشة (39–40): المشاركة، الاختيار من السحابة، جهة المراسلة
   | the full-screen dialogs (39–40): sharing, the cloud picker, the owner chooser ---- */
.rz-dialog:has(.cdlm),
.rz-dialog:has(.clpm),
.rz-dialog:has(.ccom) {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    resize: none !important;
    background: var(--home-canvas, #f3f5f9);
}

    .rz-dialog:has(.cdlm) > .rz-dialog-content,
    .rz-dialog:has(.clpm) > .rz-dialog-content,
    .rz-dialog:has(.ccom) > .rz-dialog-content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0 !important;
        overflow: hidden;
        background: var(--home-canvas, #f3f5f9);
    }

    /* المشاركة والاختيار لهما رأسهما | sharing and the picker have their own header */
    .rz-dialog:has(.cdlm) > .rz-dialog-titlebar,
    .rz-dialog:has(.clpm) > .rz-dialog-titlebar { display: none !important; }

    /* جهة المراسلة: شريط عنوان النافذة رأساً للصفحة (عنوان فاتحها وزر X) | the owner chooser: the dialog title bar as the page
       header (its opener's title and the X) */
    .rz-dialog:has(.ccom) > .rz-dialog-titlebar {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 56px;
        margin: 0;
        padding: 6px 8px;
        padding-top: max(6px, env(safe-area-inset-top, 0px));
        border-bottom: 1px solid var(--home-border, #e3e8f0);
        background: var(--home-surface, #ffffff);
    }

        .rz-dialog:has(.ccom) > .rz-dialog-titlebar .rz-dialog-title {
            order: 2;
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            padding-inline: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 17px;
            font-weight: 700;
            line-height: 1.35;
            color: var(--home-text, #0f1b2d);
        }

        /* site.css يعرض على الهاتف سهماً بارتفاع 30px؛ هنا زر إغلاق × بلمسة 44px كباقى شاشات المرحلة
           | site.css shows a 30px arrow on phones; here a × close with a 44px touch target, as the phase's other screens */
        .rz-dialog:has(.ccom) > .rz-dialog-titlebar .rz-dialog-titlebar-close {
            order: 1;
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px !important;
            height: 44px !important;
            margin: 0 !important;
            border-radius: 12px;
            background: transparent;
            color: var(--home-icon, #334155) !important;
        }

            .rz-dialog:has(.ccom) > .rz-dialog-titlebar .rz-dialog-titlebar-close .rzi-times {
                width: auto;
                font-size: 24px !important;
                font-weight: 400 !important;
                line-height: 1 !important;
                color: var(--home-icon, #334155) !important;
            }

                .rz-dialog:has(.ccom) > .rz-dialog-titlebar .rz-dialog-titlebar-close .rzi-times::before { content: "close" !important; }

/* رأس النافذة (المشاركة، الاختيار) | the dialog header (sharing, the picker) */
.cdlm-head,
.clpm-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    padding: 6px 8px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    background: var(--home-surface, #ffffff);
}

.cdlm-head { border-bottom: 1px solid var(--home-border, #e3e8f0); }

    .cdlm-head .cdl-tile { margin-inline: 4px; }

.cdlm-icon-btn,
.clpm-icon-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .cdlm-icon-btn .rzi,
    .clpm-icon-btn .rzi { font-size: 22px; }

    .cdlm-icon-btn:focus-visible,
    .clpm-icon-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }

    .cdlm-icon-btn[disabled] { opacity: .45; cursor: default; }
    .cdlm-icon-btn.is-danger { color: var(--home-danger-text, #9f1d14); }
    .cdlm-icon-btn.is-accent { color: var(--home-accent, #1d4ed8); }

.cdlm-titles,
.clpm-titles {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-inline: 4px;
}

.cdlm-title,
.clpm-title {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--home-text, #0f1b2d);
}

.cdlm-sub,
.clpm-sub {
    font-size: 12px;
    line-height: 1.4;
    color: var(--home-text-2, #4f5b6d);
}

.cdlm-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.clpm-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- المشاركة (39) | sharing (39) ---- */
.cdlm {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

.cdlm-body {
    --rz-input-height: 44px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cdlm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
}

.cdlm-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.cdlm-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.cdlm-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--home-text, #0f1b2d);
}

    .cdlm-card-title .rzi { font-size: 20px; color: var(--home-accent, #1d4ed8); }

.cdlm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cdlm .cdlm-label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--home-text, #0f1b2d);
}

    .cdlm .cdlm-label.is-required::after { content: " *"; color: var(--home-danger-text, #9f1d14); }

.cdlm .cdlm-ms.e-multiselect.e-input-group,
.cdlm .cdlm-ms .e-multi-select-wrapper { min-height: 44px; }

.cdlm .cdlm-ms.e-multiselect.e-input-group { border-radius: 12px; }

.cdlm-error {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-danger-text, #9f1d14);
}

    .cdlm-error .rzi { font-size: 16px; }

/* الصلاحية: ثلاثة أزرار | the permission: three buttons */
.cdlm-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 3px;
    border-radius: 12px;
    background: var(--home-tone-neutral-bg, #eef1f6);
}

.cdlm-seg-btn {
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    font: inherit;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}

    .cdlm-seg-btn .rzi { font-size: 18px; }

    .cdlm-seg-btn.is-active {
        background: var(--home-surface, #ffffff);
        color: var(--home-accent, #1d4ed8);
        font-weight: 700;
        box-shadow: 0 1px 4px rgba(15, 27, 45, .12);
    }

    .cdlm-seg-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }
    .cdlm-seg-btn[disabled] { opacity: .45; cursor: default; }

.cdlm .cdlm-note-input { min-height: 64px; border-radius: 12px; }

.cdlm .rz-button.cdlm-add {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
}

/* من لديه حق الوصول | people with access */
.cdlm-sec-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-text-2, #4f5b6d);
}

.cdlm-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--home-tone-neutral-bg, #e9edf3);
    color: var(--home-tone-neutral, #334155);
    font-size: 11px;
    line-height: 20px;
    text-align: center;
}

.cdlm-people {
    margin: 0;
    padding: 0 12px;
    list-style: none;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.cdlm-person {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--home-divider, #eef1f6);
}

    .cdlm-person:first-child { border-top: 0; }
    .cdlm-person.is-owner { align-items: center; }

.cdlm-av {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--home-surface-2, #f1f4f9);
}

.cdlm-person-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cdlm-person-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.cdlm-person-label {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--home-text, #0f1b2d);
}

.cdlm-person-sub {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
}

.cdlm-person-note {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
}

    .cdlm-person-note .rzi { flex: none; font-size: 15px; }
    .cdlm-person-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cdlm-person-acts {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

    .cdlm-person-acts .cdlm-perm-dd.rz-dropdown {
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 10px;
    }

.cdlm-owner {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
}

    .cdlm-owner .rzi { font-size: 16px; }

.cdlm-person.is-removed .cdlm-person-label { color: var(--home-text-2, #4f5b6d); text-decoration: line-through; }
.cdlm-person.is-removed .cdlm-av { opacity: .55; }

.cdlm-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

    .cdlm-tag .rzi { font-size: 14px; }
    .cdlm-tag.is-accent { background: var(--home-tone-blue-bg, #e7eefc); color: var(--home-tone-blue, #1d4ed8); }
    .cdlm-tag.is-success { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
    .cdlm-tag.is-danger { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }

.cdlm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    text-align: center;
}

.cdlm-empty-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--home-tone-neutral-bg, #e9edf3);
    color: var(--home-tone-neutral, #334155);
}

    .cdlm-empty-ic .rzi { font-size: 24px; }

.cdlm-empty-title { font-size: 14px; font-weight: 700; color: var(--home-text, #0f1b2d); }
.cdlm-empty-text { font-size: 12px; line-height: 1.5; color: var(--home-text-2, #4f5b6d); }

.cdlm-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: var(--home-tone-amber-bg, #fff3d6);
    color: var(--home-text, #0f1b2d);
}

    .cdlm-alert > .rzi { flex: none; font-size: 22px; color: var(--home-tone-amber, #7a4a00); }
    .cdlm-alert > div { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.cdlm-alert-title { font-size: 14px; font-weight: 700; }
.cdlm-alert-text { font-size: 13px; line-height: 1.5; }

.cdlm-skel-card { gap: 10px; }

.cdlm-skel {
    display: block;
    height: 14px;
    border-radius: 7px;
    background: var(--home-surface-2, #e9edf3);
}

    .cdlm-skel.is-head { width: 45%; height: 18px; }
    .cdlm-skel.is-row { height: 44px; border-radius: 12px; }

/* التذييل: التغييرات المعلّقة + الحفظ | the footer: the pending changes + Save */
.cdlm-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.cdlm-foot-note {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--home-tone-amber, #7a4a00);
}

    .cdlm-foot-note .rzi { flex: none; font-size: 18px; }

.cdlm-muted { font-weight: 400; color: var(--home-text-2, #4f5b6d); }

.cdlm .rz-button.cdlm-save {
    flex: none;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
}

/* ---- الاختيار من السحابة (40) | the cloud picker (40) ---- */
.clpm {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

.clpm-progress {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 3;
    height: 3px;
    overflow: hidden;
    background: var(--home-tone-blue-bg, #e7eefc);
}

.clpm-progress-bar {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--home-accent-strong, #1d4ed8);
    animation: clpm-bar 1.1s ease-in-out infinite;
}

@keyframes clpm-bar {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

.clpm-tools {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.clpm-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 3px;
    border-radius: 12px;
    background: var(--home-tone-neutral-bg, #eef1f6);
}

.clpm-seg-btn {
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    font: inherit;
    font-size: 13px;
    line-height: 1.25;
    cursor: pointer;
}

    .clpm-seg-btn.is-active {
        background: var(--home-surface, #ffffff);
        color: var(--home-accent, #1d4ed8);
        font-weight: 700;
        box-shadow: 0 1px 4px rgba(15, 27, 45, .12);
    }

    .clpm-seg-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }

.clpm-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.clpm-icon-btn.is-tool { background: var(--home-surface-2, #f1f4f9); }

    .clpm-icon-btn.is-tool.is-on {
        background: var(--home-tone-blue-bg, #e7eefc);
        color: var(--home-tone-blue, #1d4ed8);
    }

.clpm-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.clpm.filters-off .cldm-filters { display: none; }

.clpm-foot {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.clpm-tray {
    display: flex;
    gap: 6px;
    margin-inline: -12px;
    padding-inline: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .clpm-tray::-webkit-scrollbar { display: none; }

.clpm-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 200px;
    height: 44px;
    padding-inline-start: 10px;
    border-radius: 22px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
    font-size: 12px;
    font-weight: 600;
}

    .clpm-chip .clpm-chip-ic { flex: none; font-size: 16px; }

.clpm-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.clpm-chip-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

    .clpm-chip-x .rzi { font-size: 18px; }

.clpm-note {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 24px;
    font-size: 13px;
    color: var(--home-text-2, #4f5b6d);
}

    .clpm-note .clpm-note-ic { flex: none; font-size: 18px; }
    .clpm-note .clpm-note-ic.is-success { color: var(--home-success-text, #0b5c55); }
    .clpm-note .clpm-note-ic.is-type { color: var(--home-accent, #1d4ed8); }

.clpm-note-label { flex: none; }

.clpm-note-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--home-text, #0f1b2d);
    unicode-bidi: plaintext;
}

.clpm-link {
    flex: none;
    min-height: 44px;
    margin-inline-start: auto;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.clpm .rz-button.clpm-go {
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
}

/* ---- جهة المراسلة ونوعها (40) | the correspondence owner and type (40) ---- */
.ccom {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

.ccom-sec {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ccom-label {
    margin: 0;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--home-text-2, #4f5b6d);
}

.ccom-list {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.ccom-owner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-top: 1px solid var(--home-divider, #eef1f6);
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .ccom-owner:first-child { border-top: 0; }
    .ccom-owner:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }

.ccom-radio {
    flex: none;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 2px solid var(--home-text-2, #4f5b6d);
    border-radius: 50%;
}

.ccom-owner.is-on .ccom-radio { border: 7px solid var(--home-accent-strong, #1d4ed8); }

.ccom-owner-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--home-tone-neutral-bg, #e9edf3);
    color: var(--home-tone-neutral, #334155);
}

    .ccom-owner-ic .rzi { font-size: 20px; }

.ccom-owner-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.ccom-owner.is-on .ccom-owner-name { color: var(--home-accent, #1d4ed8); }

.ccom-skel {
    display: block;
    height: 40px;
    margin: 9px 0;
    border-radius: 10px;
    background: var(--home-surface-2, #e9edf3);
}

.ccom-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
}

    .ccom-note .rzi { flex: none; font-size: 16px; }

.ccom-types {
    display: grid;
    gap: 8px;
}

.ccom-type {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .ccom-type:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }
    .ccom-type[disabled] { opacity: .5; cursor: default; }

.ccom-type-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
}

    .ccom-type-ic.is-out { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); }
    .ccom-type-ic .rzi { font-size: 22px; }

.ccom-type-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ccom-type-title { font-size: 15px; font-weight: 700; }
.ccom-type-sub { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.ccom-type-go { flex: none; font-size: 22px; color: var(--home-text-2, #4f5b6d); }

/* الحركة | motion */
@media (prefers-reduced-motion: reduce) {
    .cldm-spin { animation: none; border-top-color: currentColor; opacity: .7; }
    .clpm-progress-bar { animation: none; width: 100%; }
}

/* =====================================================================
   المرحلة 15 — البريد الإلكترونى على الهاتف (الشاشات 41–46): الصندوق (رأس بالمجلدات فى درج والحساب والتحديث والإعدادات،
   البحث، الشرائح، الرسائل، «رسالة جديدة»)، القراءة والكتابة وصفحة الإعدادات فوق القائمة، التحقق بخطوتين صفحةً، «استخدام
   كمراسلة» قائمةً من الأسفل، وعارض المرفق ونوافذ الإعدادات بملء الشاشة (علامة .msmm-*-mark تظهر على الهاتف فقط).
   | phase 15 — e-mail on a phone (screens 41–46): the mailbox (a header with the folders in a drawer, the account, refresh and
   settings; search; chips; messages; «New message»), reading / writing and the settings page over the list, two-step
   verification as a page, «use as correspondence» as a bottom sheet, and the attachment viewer and the settings dialogs full
   screen (a .msmm-*-mark rendered only on a phone).
   Colours: --home-* (light fallbacks); no new token in darkOverrid.css. The mail body, the editor and the attachment viewer's
   page stay white (mail HTML is written for a white page), as on the desktop.
   ===================================================================== */

/* ---- الصفحة (42) | the page (42) ---- */
.msmm {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

    .msmm .mph.msmm-state-head { flex: none; }

/* عنوان البريد يُقرأ من اليسار، ويُحاذى لبداية الصفحة | an e-mail address reads left-to-right and sits at the page's start */
.msmm-sub,
.msmm-set-mail,
.msmm-sender-mail {
    display: block;
    direction: ltr;
    unicode-bidi: isolate;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[dir="RTL" i] .msmm-sub,
[dir="RTL" i] .msmm-set-mail,
[dir="RTL" i] .msmm-sender-mail { text-align: right; }

/* رأس الصندوق | the mailbox header */
.msmm-head {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 2px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.msmm-head-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.msmm-hbtn,
.msmm-rbtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-icon, #334155);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .msmm-hbtn .rzi,
    .msmm-rbtn .rzi { font-size: 22px; }

    .msmm-hbtn:focus-visible,
    .msmm-rbtn:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 1px;
    }

    .msmm-hbtn:disabled,
    .msmm-rbtn:disabled,
    .msmm-rbtn.is-disabled {
        opacity: .45;
        cursor: default;
        pointer-events: none;
    }

.msmm-hbtn.is-folders {
    background: var(--home-tone-blue-bg, #eef3fd);
    color: var(--home-tone-blue, #1d4ed8);
}

.msmm-titles {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.msmm-title {
    margin: 0;
    overflow: hidden;
    color: var(--home-text, #0f1b2d);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msmm-sub {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

/* البحث | search */
.msmm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding-inline: 14px 0;
    border-radius: 22px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-text-2, #4f5b6d);
}

    .msmm-search:focus-within { box-shadow: 0 0 0 2px var(--home-accent, #1d4ed8); }

    .msmm-search .msmm-search-ic { flex: none; font-size: 20px; }

.msmm-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0;
    padding-inline-end: 12px;
    border: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    outline: none;
}

    .msmm-search-input::placeholder { color: var(--home-text-2, #4f5b6d); opacity: 1; }

    .msmm-search-input::-webkit-search-cancel-button { display: none; }

.msmm-search-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .msmm-search-x .rzi { font-size: 20px; }

/* شرائح التصفية (من MailSmarterList): لمسة 44px وشكل 32px | the filter chips (from MailSmarterList): a 44px touch target, a 32px pill */
.msmm-chips {
    display: flex;
    gap: 8px;
    margin-inline: -12px;
    padding-inline: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .msmm-chips::-webkit-scrollbar { display: none; }

.msmm-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.msmm-chip-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #334155);
    font-size: 12px;
    white-space: nowrap;
}

.msmm-chip.is-on .msmm-chip-pill {
    border-color: var(--home-filter-on-bg, #0f1b2d);
    background: var(--home-filter-on-bg, #0f1b2d);
    color: var(--home-filter-on-text, #ffffff);
    font-weight: 600;
}

.msmm-chip:focus-visible .msmm-chip-pill {
    outline: 2px solid var(--home-accent, #1d4ed8);
    outline-offset: 1px;
}

/* القائمة | the list */
.msmm-list {
    display: flex;
    flex-direction: column;
}

.msmm-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding-inline: 14px 6px;
    border-bottom: 1px solid var(--home-divider, #eef1f6);
}

.msmm-count {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

.msmm-sort {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .msmm-sort .rzi { font-size: 18px; }

    .msmm-sort.is-on { background: var(--home-tone-blue-bg, #e7eefc); }

/* زر إغلاق القائمة 44px (كباقى المراحل) | the sheet's close button 44px (as the other phases) */
.msheet:has(.msmm-sort-sheet) .msheet-close,
.msheet:has(.msmm-more-sheet) .msheet-close { width: 44px; height: 44px; }

.msmm-sheet-label {
    padding: 10px 4px 2px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 600;
}

.msmm-sort-item .msheet-item-icon .rzi { font-size: 21px; }

.msmm-sort-item.is-on .msheet-item-text { font-weight: 700; }

.msmm-sort-check.rzi {
    flex: none;
    margin-inline-start: auto;
    color: var(--home-accent, #1d4ed8);
    font-size: 20px;
}

.msmm-rows {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.msmm-row {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--home-divider, #eef1f6);
    color: var(--home-text, #0f1b2d);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .msmm-row:active { background: var(--home-hover, #f2f4f8); }

    .msmm-row:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: -2px;
    }

    .msmm-row.is-skeleton { cursor: default; }

/* الصورة: ألوان التصميم بنص أبيض ≥ 4.5:1 | the avatar: the board's colours, white text ≥ 4.5:1 */
.msmm-av {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--home-av-0, #1d4ed8);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

    .msmm-av.is-1 { background: var(--home-av-1, #0f766e); }
    .msmm-av.is-2 { background: var(--home-av-2, #7c3aed); }
    .msmm-av.is-3 { background: var(--home-av-3, #b45309); }
    .msmm-av.is-4 { background: var(--home-av-4, #be185d); }
    .msmm-av.is-skel { background: var(--home-surface-2, #eef1f6); }

.msmm-row-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.msmm-row-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.msmm-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--home-accent, #1d4ed8);
}

.msmm-from {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--home-text-2, #334155);
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msmm-date {
    flex: none;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    white-space: nowrap;
}

.msmm-subject {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--home-text-2, #334155);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msmm-row.is-unread .msmm-from { color: var(--home-text, #0f1b2d); font-weight: 700; }
.msmm-row.is-unread .msmm-subject { color: var(--home-text, #0f1b2d); font-weight: 600; }

.msmm-meta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--home-text-2, #4f5b6d);
}

    .msmm-meta .msmm-mark.rzi { font-size: 16px; }
    .msmm-meta .msmm-mark.is-flag,
    .msmm-meta .msmm-mark.is-danger { color: var(--home-danger-text, #c62828); }

.msmm-skel {
    display: block;
    width: 85%;
    height: 12px;
    margin: 3px 0;
    border-radius: 6px;
    background: var(--home-surface-2, #eef1f6);
}

    .msmm-skel.is-short { width: 55%; }
    .msmm-skel.is-title { width: 80%; height: 20px; }

.msmm-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    margin: 10px 14px;
    padding: 0 12px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 12px;
    background: transparent;
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* الحالات الفارغة والخطأ | the empty and error states */
.msmm-empty,
.msmm-read-error,
.msmm-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
}

.msmm-empty-ic,
.msmm-state-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--home-tone-neutral-bg, #e9edf3);
    color: var(--home-tone-neutral, #334155);
}

    .msmm-empty-ic .rzi,
    .msmm-state-ic .rzi { font-size: 32px; }

.msmm-empty.is-error .msmm-empty-ic,
.msmm-read-error .msmm-empty-ic,
.msmm-state-ic.is-error {
    background: var(--home-tone-red-bg, #fdeceb);
    color: var(--home-tone-red, #9f1d14);
}

.msmm-state-ic.is-busy { background: var(--home-tone-blue-bg, #e7eefc); }

.msmm-empty-title,
.msmm-state-title {
    margin: 0;
    color: var(--home-text, #0f1b2d);
    font-size: 15px;
    font-weight: 700;
}

.msmm-empty-hint,
.msmm-state-hint {
    margin: 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 13px;
    line-height: 1.6;
}

.msmm-state-detail {
    max-width: 100%;
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.msmm-state-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

    .msmm-state-actions .rz-button {
        min-height: 48px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
    }

.msmm-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 4px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .msmm-empty-btn .rzi { font-size: 18px; }

/* «رسالة جديدة» | «New message» */
.msmm-fab {
    position: fixed;
    inset-inline-end: 16px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px var(--home-accent-shadow, rgba(29, 78, 216, .28));
    cursor: pointer;
}

    .msmm-fab .rzi { font-size: 20px; }

/* القراءة والكتابة والإعدادات فوق القائمة (تبقى القائمة بموضعها) | reading, writing and settings over the list (the list keeps its place) */
.msmm-main,
.msmm-settings {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
    flex-direction: column;
    background: var(--home-canvas, #f3f5f9);
}

.msmm.is-reading .msmm-main,
.msmm.is-composing .msmm-main { display: flex; }

.msmm-settings {
    z-index: 41;
    display: flex;
}

    .msmm-main > * {
        flex: 1 1 auto;
        min-height: 0;
    }

/* درج المجلدات | the folders drawer */
.msmm-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: 300px;
    max-width: 86vw;
    padding-top: env(safe-area-inset-top, 0px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--home-surface, #ffffff);
    box-shadow: var(--home-shadow-lg, 0 12px 28px rgba(15, 27, 45, .2));
    visibility: hidden;
    transform: translateX(-105%);
    transition: transform .2s ease, visibility .2s;
}

.msmm[dir="RTL" i] .msmm-drawer { transform: translateX(105%); }

.msmm.is-drawer-open .msmm-drawer {
    visibility: visible;
    transform: none;
}

.msmm-backdrop { display: none; }

.msmm.is-drawer-open .msmm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    display: block;
    background: var(--home-scrim, rgba(15, 27, 45, .45));
}

    .msmm-drawer .msm-tree { padding: 12px 10px; }

    .msmm-drawer .msm-compose-btn { min-height: 48px; }

    .msmm-drawer .msm-ftree .e-list-item > .e-fullrow,
    .msmm-drawer .msm-ftree .e-list-item > .e-text-content { min-height: 44px; }

    .msmm-drawer .msm-tree-row { min-height: 44px; }

/* ---- القراءة (43) | reading (43) ---- */
.msmm-read {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
}

.msmm-read-bar,
.msmm-compose-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 64px;
    padding: 10px 8px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.msmm-read-spacer { flex: 1 1 auto; }

.msmm-rbtn.is-flag { color: var(--home-badge, #c2410c); }
.msmm-rbtn.is-danger { color: var(--home-danger-text, #c62828); }

.msmm-read-scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.msmm-read-subject {
    margin: 0;
    color: var(--home-text, #0f1b2d);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.msmm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.msmm-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--home-tone-neutral-bg, #f1f4f9);
    color: var(--home-tone-neutral, #334155);
    font-size: 11px;
    font-weight: 600;
}

    .msmm-tag .rzi { font-size: 14px; }
    .msmm-tag.is-flag { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
    .msmm-tag.is-amber { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }

.msmm-card {
    padding: 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.msmm-sender {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.msmm-sender-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.msmm-sender-who {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.msmm-sender-name {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.msmm-sender-mail {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

.msmm-sender-date {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}

.msmm-rcpt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

.msmm-person {
    max-width: 100%;
    padding: 2px 8px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-text-2, #334155);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msmm-atts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.msmm-att {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .msmm-att:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 1px;
    }

.msmm-att-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--home-tone-neutral-bg, #e9edf3);
    color: var(--home-tone-neutral, #334155);
}

    .msmm-att-ic .rzi { font-size: 18px; }
    .msmm-att-ic.is-red { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
    .msmm-att-ic.is-green { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
    .msmm-att-ic.is-blue { background: var(--home-tone-blue-bg, #e7eefc); color: var(--home-tone-blue, #1d4ed8); }
    .msmm-att-ic.is-purple { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); }
    .msmm-att-ic.is-amber { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }

.msmm-att-ext {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2px;
}

.msmm-att-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.msmm-att-name {
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msmm-att-size {
    color: var(--home-text-2, #4f5b6d);
    font-size: 11px;
}

/* النص على ورق أبيض فى الوضعين | the body on white paper in both themes */
.msmm-paper {
    flex: 1 0 auto;
    min-height: 160px;
    padding: 14px;
    overflow-x: auto;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: #ffffff;
    color: #1f2a3a;
    color-scheme: light;
    font-size: 14px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

    .msmm-paper img { max-width: 100%; height: auto; }
    .msmm-paper.is-plain { white-space: pre-wrap; }
    .msmm-paper.is-empty { color: #4f5b6d; }
    .msmm-paper.is-skeleton .msmm-skel { background: #eef1f6; }

.msmm-read-foot {
    flex: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

    .msmm-read-foot.is-draft { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.msmm-fbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 12px;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

    .msmm-fbtn .rzi { flex: none; font-size: 18px; }

    .msmm-fbtn.is-primary {
        border-color: var(--home-accent-strong, #1d4ed8);
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
        font-weight: 700;
    }

    .msmm-fbtn:disabled { opacity: .5; cursor: default; }

    .msmm-fbtn:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 1px;
    }

/* ---- الكتابة (44) | writing (44) ---- */
.msmm-compose {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
}

.msmm-compose-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.msmm-compose-bar { gap: 6px; }

.msmm-compose-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msmm-compose-bar label.msmm-rbtn { margin: 0; }

.msmm-compose-bar .rz-button.msmm-send {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 700;
}

.msmm-callout {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 12px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--home-tone-red-bg, #fdeceb);
    color: var(--home-tone-red, #9f1d14);
    font-size: 13px;
    line-height: 1.6;
}

    .msmm-callout > .rzi { flex: none; margin-top: 2px; font-size: 20px; }

    .msmm-callout .msmm-rbtn { margin: -10px -8px -10px 0; color: inherit; }

.msmm-callout-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.msmm-callout-title { font-weight: 700; }

.msmm-compose-scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.msmm-fld {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-height: 50px;
    padding: 3px 14px;
    border-bottom: 1px solid var(--home-divider, #eef1f6);
}

.msmm-fld-label {
    flex: none;
    min-width: 52px;
    max-width: 92px;
    margin: 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 13px;
    font-weight: 400;
}

.msmm-fld-input {
    flex: 1 1 0;
    min-width: 0;
}

.msmm-from-chip {
    display: inline-block;
    max-width: 100%;
    padding: 4px 10px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-text-2, #334155);
    font-size: 13px;
    direction: ltr;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msmm-ccbcc {
    flex: none;
    display: inline-flex;
    gap: 2px;
    margin-inline-start: auto;
}

.msmm-link {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .msmm-link.is-on { background: var(--home-tone-blue-bg, #e7eefc); }

/* حقل العناوين (EmailMultiInput) بشكل الصف: بلا إطار، شرائح 30px وزر × بلمسة 44px | the address field (EmailMultiInput) as
   the row: no frame, 30px chips and a × with a 44px touch target */
.msmm-fld .msmm-fld-input .form-control {
    min-height: 44px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--home-text, #0f1b2d);
    gap: 6px !important;
}

    .msmm-fld .msmm-fld-input .form-control .badge {
        height: 30px;
        padding: 0 !important;
        padding-inline-start: 10px !important;
        border-radius: 15px;
        background: var(--home-accent-strong, #1d4ed8) !important;
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        direction: ltr;
    }

    .msmm-fld .msmm-fld-input .form-control .badge .btn-close {
        width: 44px;
        height: 44px;
        margin: -7px 0 !important;
        padding: 0;
        background-size: 9px;
        opacity: .9;
    }

    .msmm-fld .msmm-fld-input .form-control input {
        min-height: 44px;
        background: transparent;
        color: var(--home-text, #0f1b2d);
        font-size: 14px;
    }

.msmm-fld .rz-textbox.msmm-subject {
    height: 44px;
    padding-inline: 0;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
    font-weight: 600;
}

.msmm-fld .rz-message { display: block; font-size: 11px; }

/* المحرر: ورق أبيض وشريط أدوات يُمرَّر أفقياً بأزرار 44px | the editor: white paper and a sideways toolbar with 44px buttons */
.msmm-editor {
    flex: none;
    display: flex;
    flex-direction: column;
}

    .msmm-editor .e-richtexteditor.msm-rte {
        border: 0;
        border-radius: 0;
    }

    .msmm-editor .msm-rte .e-toolbar-wrapper,
    .msmm-editor .msm-rte .e-toolbar { border-radius: 0; }

    .msmm-editor .e-toolbar .e-toolbar-item .e-btn,
    .msmm-editor .e-toolbar .e-hor-nav {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .msmm-editor .msm-rte .e-rte-content { height: auto !important; }

        .msmm-editor .msm-rte .e-rte-content .e-content {
            min-height: 220px;
            height: auto !important;
            overflow-y: visible !important;
            font-size: 15px;
            line-height: 1.8;
        }

.msmm-catts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
}

.msmm-catts-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 600;
}

.msmm-catt {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 4px;
    padding-inline-start: 8px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 12px;
    background: var(--home-surface-2, #f5f7fb);
}

.msmm-upload { padding: 0 14px 12px; }

.msmm-compose-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.msmm-compose-status {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

    .msmm-compose-status .rzi { flex: none; font-size: 18px; }

.msmm-compose-foot .rz-button.msmm-draft {
    order: -1;
    flex: none;
    min-height: 46px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

/* ---- إعدادات البريد (46) | the mail settings (46) ---- */
.msmm-settings .mph.msmm-set-head { flex: none; }

.msmm-set-scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.msmm-set-account {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.msmm-set-av {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--home-av-0, #1d4ed8);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.msmm-set-who {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.msmm-set-name {
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.msmm-set-mail {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

.msmm-set-list {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.msmm-set-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .msmm-set-item + .msmm-set-item { border-top: 1px solid var(--home-divider, #eef1f6); }

    .msmm-set-item:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

.msmm-set-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

    .msmm-set-ic .rzi { font-size: 20px; }
    .msmm-set-ic.is-blue { background: var(--home-tone-blue-bg, #e7eefc); color: var(--home-tone-blue, #1d4ed8); }
    .msmm-set-ic.is-neutral { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }
    .msmm-set-ic.is-purple { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); }
    .msmm-set-ic.is-amber { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }

.msmm-set-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.msmm-set-title { font-size: 14px; font-weight: 600; }

.msmm-set-hint {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    line-height: 1.5;
}

.msmm-set-go.rzi {
    flex: none;
    color: var(--home-text-2, #4f5b6d);
    font-size: 20px;
}

/* ---- التحقق بخطوتين (41): صفحة بملء الشاشة | two-step verification (41): a full-screen page ---- */
.rz-dialog:has(.msmm-2fa),
.rz-dialog:has(.msmm-dlg-mark),
.rz-dialog:has(.msmm-av-mark) {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    resize: none !important;
    background: var(--home-canvas, #f3f5f9);
}

.rz-dialog:has(.msmm-2fa) { background: var(--home-surface, #ffffff); }

    .rz-dialog:has(.msmm-2fa) > .rz-dialog-titlebar { display: none !important; }

    .rz-dialog:has(.msmm-2fa) > .rz-dialog-content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0 !important;
        overflow-y: auto;
        background: var(--home-surface, #ffffff);
    }

.msmm-2fa {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 14px 20px;
    padding-top: max(14px, env(safe-area-inset-top, 0px));
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    color: var(--home-text, #0f1b2d);
}

.msmm-2fa-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.msmm-2fa-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .msmm-2fa-back .rzi { font-size: 22px; }

.msmm-2fa-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    text-align: center;
}

.msmm-2fa-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    background: var(--home-tone-amber-bg, #fff3d6);
    color: var(--home-tone-amber, #7a4a00);
}

    .msmm-2fa-ic .rzi { font-size: 38px; }

.msmm-2fa-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.msmm-2fa-hint {
    margin: 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 14px;
    line-height: 1.7;
}

.msmm-2fa-account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 34px;
    padding: 0 14px;
    overflow: hidden;
    border-radius: 17px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-text-2, #334155);
    font-size: 13px;
}

    .msmm-2fa-account .rzi { flex: none; font-size: 18px; }

    .msmm-2fa-account bdi {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.msmm-2fa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 28px;
}

.msmm-2fa-label {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 600;
}

.msmm-2fa .rz-textbox.msmm-2fa-code {
    width: 100%;
    height: 64px;
    border: 2px solid var(--home-accent-strong, #1d4ed8) !important;
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 12px;
    text-align: center;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

    .msmm-2fa .rz-textbox.msmm-2fa-code::placeholder { color: var(--home-text-2, #4f5b6d); opacity: 1; }

.msmm-2fa .msmm-callout { margin: 14px 0 0; }

.msmm-2fa-fill {
    flex: 1 1 auto;
    min-height: 24px;
}

.msmm-2fa .rz-button.msmm-2fa-go {
    width: 100%;
    min-height: 54px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
}

/* ---- استخدام كمراسلة (45): نفس النافذة قائمةً من الأسفل | use as correspondence (45): the same dialog as a bottom sheet ---- */
.rz-dialog-wrapper:has(.msmm-uas) {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center;
    background: var(--home-scrim, rgba(15, 27, 45, .45));
}

/* Radzen ≤768px: .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) { inset-block-start: 0 !important } — أعلى تحديداً | higher specificity */
.rz-dialog-wrapper .rz-dialog:has(.msmm-uas):not(.rz-dialog-confirm):not(.rz-dialog-alert) {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    inset-block-start: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: 92dvh;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: var(--home-surface, #ffffff) !important;
    box-shadow: 0 -10px 30px rgba(15, 27, 45, .18) !important;
    transform: none !important;
    resize: none !important;
}

    /* المقبض | the grabber */
    .rz-dialog:has(.msmm-uas)::before {
        content: "";
        flex: none;
        align-self: center;
        width: 40px;
        height: 5px;
        margin-top: 10px;
        border-radius: 3px;
        background: var(--home-grabber, #cfd6e2);
    }

    .rz-dialog:has(.msmm-uas) > .rz-dialog-titlebar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px 0 16px !important;
        padding-inline: 16px 12px !important;
        border: 0 !important;
        background: transparent;
    }

        .rz-dialog:has(.msmm-uas) > .rz-dialog-titlebar .rz-dialog-title {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            color: var(--home-text, #0f1b2d);
            font-size: 16px;
            font-weight: 700;
            line-height: 1.4;
        }

        .rz-dialog:has(.msmm-uas) > .rz-dialog-titlebar .rz-dialog-titlebar-close {
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px !important;
            height: 44px !important;
            margin: 0 !important;
            border-radius: 12px;
            background: var(--home-surface-2, #f5f7fb);
            color: var(--home-icon, #334155) !important;
        }

            /* فى القائمة السفلية: × لا سهم رجوع | in the bottom sheet: an × rather than a back arrow */
            .rz-dialog:has(.msmm-uas) > .rz-dialog-titlebar .rz-dialog-titlebar-close .rzi-times {
                width: auto;
                color: var(--home-icon, #334155) !important;
                font-size: 22px !important;
                font-weight: 400 !important;
                line-height: 44px !important;
            }

                .rz-dialog:has(.msmm-uas) > .rz-dialog-titlebar .rz-dialog-titlebar-close .rzi-times::before { content: "close" !important; }

    .rz-dialog:has(.msmm-uas) > .rz-dialog-content {
        min-height: 0;
        padding: 4px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto;
        background: transparent;
    }

.msmm-uas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--home-text, #0f1b2d);
}

.msmm-uas-hint {
    margin: 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    line-height: 1.6;
}

.msmm-uas-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msmm-uas-label {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 600;
}

.msmm-uas .e-input-group.e-ddl.msmm-uas-owner,
.msmm-uas .e-input-group.e-control-wrapper.e-ddl.msmm-uas-owner {
    min-height: 52px;
    border-radius: 12px !important;
}

    .msmm-uas .e-ddl.msmm-uas-owner input.e-input {
        min-height: 50px;
        font-size: 14px;
        font-weight: 600;
    }

    .msmm-uas .e-ddl.msmm-uas-owner .e-input-group-icon { min-width: 44px; }

.msmm-uas-modes,
.msmm-uas-kinds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.msmm-uas-mode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .msmm-uas-mode.is-on {
        padding: 7px 9px;
        border: 2px solid var(--home-accent-strong, #1d4ed8);
        background: var(--home-tone-blue-bg, #e7eefc);
    }

    .msmm-uas-mode:focus-visible,
    .msmm-uas-kind:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

.msmm-uas-mode-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
}

    .msmm-uas-mode-title .rzi { font-size: 18px; }

.msmm-uas-mode-hint {
    color: var(--home-text-2, #4f5b6d);
    font-size: 11px;
    line-height: 1.5;
}

.msmm-uas-att {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--home-surface-2, #f5f7fb);
}

.msmm-uas-att-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.msmm-uas-att-title {
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
    font-weight: 600;
}

.msmm-uas-att-hint {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    line-height: 1.5;
}

/* المفتاح: لمسة 44px حوله | the switch: a 44px touch area around it */
.msmm-uas .rz-switch {
    position: relative;
    flex: none;
}

    .msmm-uas .rz-switch::after {
        content: "";
        position: absolute;
        inset: -12px -8px;
    }

.msmm-uas-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 52px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--home-accent-strong, #1d4ed8);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .msmm-uas-kind .rzi { font-size: 20px; }

    .msmm-uas-kind.is-primary {
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
    }

/* ---- نوافذ الإعدادات (46) بملء الشاشة: شريط عنوان النافذة رأساً للصفحة (عنوان فاتحها وزر ×) | the settings dialogs (46)
   full screen: the dialog title bar as the page header (its opener's title and the ×) ---- */
.rz-dialog:has(.msmm-dlg-mark) > .rz-dialog-titlebar {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    margin: 0;
    padding: 6px 8px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

    .rz-dialog:has(.msmm-dlg-mark) > .rz-dialog-titlebar .rz-dialog-title {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding-inline: 4px;
        overflow: hidden;
        color: var(--home-text, #0f1b2d);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* site.css يعرض على الهاتف سهماً بارتفاع 30px؛ هنا زر إغلاق × بلمسة 44px | site.css shows a 30px arrow on phones; here a × with a 44px touch target */
    .rz-dialog:has(.msmm-dlg-mark) > .rz-dialog-titlebar .rz-dialog-titlebar-close {
        order: 1;
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        border-radius: 12px;
        background: transparent;
        color: var(--home-icon, #334155) !important;
    }

        .rz-dialog:has(.msmm-dlg-mark) > .rz-dialog-titlebar .rz-dialog-titlebar-close .rzi-times {
            width: auto;
            color: var(--home-icon, #334155) !important;
            font-size: 24px !important;
            font-weight: 400 !important;
            line-height: 1 !important;
        }

            .rz-dialog:has(.msmm-dlg-mark) > .rz-dialog-titlebar .rz-dialog-titlebar-close .rzi-times::before { content: "close" !important; }

    .rz-dialog:has(.msmm-dlg-mark) > .rz-dialog-content {
        flex: 1 1 auto;
        min-height: 0;
        padding: 12px 12px 0 !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--home-canvas, #f3f5f9);
        --rz-input-height: 44px;
    }

    /* أزرار النافذة شريطاً سفلياً ثابتاً | the dialog's buttons as a sticky bottom bar */
    .rz-dialog:has(.msmm-dlg-mark) .msm-dialog-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: 12px -12px 0;
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--home-border, #e3e8f0);
        background: var(--home-surface, #ffffff);
    }

        .rz-dialog:has(.msmm-dlg-mark) .msm-dialog-actions .rz-button {
            flex: 1 1 0;
            min-width: 0;
            min-height: 46px;
            border-radius: 12px;
        }

    .rz-dialog:has(.msmm-dlg-mark) .msm-prf-foot-note { flex: 1 1 100%; }

    .rz-dialog:has(.msmm-dlg-mark) .msm-prf-link { min-height: 44px; display: inline-flex; align-items: center; }

    /* كلمات مرور التطبيقات: نفس الترتيب وتمييز EAS؛ أزرار 44px | the application passwords: the same order, EAS highlighted; 44px buttons */
    .rz-dialog:has(.msmm-dlg-mark) .msm-app-btn,
    .rz-dialog:has(.msmm-dlg-mark) .msm-app-retry {
        min-width: 44px;
        min-height: 44px;
    }

    .rz-dialog:has(.msmm-dlg-mark) .msm-app-btn {
        width: 44px;
        height: 44px;
    }

    .rz-dialog:has(.msmm-dlg-mark) .e-toolbar .e-toolbar-item .e-btn,
    .rz-dialog:has(.msmm-dlg-mark) .e-toolbar .e-hor-nav {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .rz-dialog:has(.msmm-dlg-mark) .rz-button { min-height: 44px; }

    .rz-dialog:has(.msmm-dlg-mark) .msm-ar-tab,
    .rz-dialog:has(.msmm-dlg-mark) .msm-ar-opt { min-height: 44px; }

/* ---- عارض المرفق بملء الشاشة وأزراره 44px | the attachment viewer full screen, its buttons 44px ---- */
.rz-dialog:has(.msmm-av-mark) .msm-av {
    padding: 8px;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* الشريط: النوع والاسم و× فى السطر الأول، والتنقل والفتح والتنزيل تحته | the bar: the type, the name and × on the first line,
   navigation / open / download under it */
.rz-dialog:has(.msmm-av-mark) .msm-av-bar { gap: 8px; }

.rz-dialog:has(.msmm-av-mark) .msm-av-meta { flex: 1 1 calc(100% - 112px); }

.rz-dialog:has(.msmm-av-mark) .msm-av .msm-av-btn,
.rz-dialog:has(.msmm-av-mark) .msm-av .msm-av-nav .msm-av-btn {
    min-width: 44px;
    height: 44px;
}

.rz-dialog:has(.msmm-av-mark) .msm-av .msm-av-chip { height: 44px; }

.rz-dialog:has(.msmm-av-mark) .rz-button { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    .msmm-drawer { transition: none; }
}

/* =====================================================================
   المرحلة 16 — مهامي على الهاتف (الشاشتان 47–48): TodoHome (رأس باسم العرض وتاريخ اليوم أو عدد غير المنجزة، الاقتراحات
   والبحث والمزيد، شرائح العروض والقوائم بعدّاداتها، شريط الإضافة، بطاقات المهام، قسم «المنجزة»، «تحميل المزيد») و
   TodoTaskDetail صفحةً كاملة (العنوان والخطوات، يومي والتذكير والاستحقاق والتكرار والإسناد والملفات، المصدر، الملاحظات)
   و TodoSuggestions صفحةً كاملة.
   | phase 16 — my tasks on a phone (screens 47–48): TodoHome (a header with the view's name and today's date or the open count,
   suggestions, search and more; the view and list chips with their counts; the add bar; task cards; the «Completed» section;
   «Load more»), TodoTaskDetail as a full page (title and steps; My Day, reminder, due, repeat, assignment and files; the source;
   notes) and TodoSuggestions as a full page.
   Colours: --home-* (light fallbacks) and the list colours --otk-c (site.css .otk-c-*, dark twins in darkOverrid.css);
   no new token in darkOverrid.css.
   ===================================================================== */

/* ---- الصفحة (47) | the page (47) ---- */
.otk-root.otkm {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100dvh;
    padding: 0;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

    .otkm button,
    .otkm-sg button,
    .otkm-dt button { -webkit-tap-highlight-color: transparent; }

    .otkm button:focus-visible,
    .otkm a:focus-visible,
    .otkm input:focus-visible,
    .otkm select:focus-visible,
    .otkm textarea:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 1px;
    }

/* نص لقارئ الشاشة فقط | text for screen readers only */
.otkm-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* الرأس | the header */
.mph.otkm-head {
    position: sticky;
    top: 0;
    z-index: 6;
    gap: 10px;
    padding: 12px 12px 4px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
}

    .mph.otkm-head .mph-title { font-size: 19px; }
    .mph.otkm-head .mph-extra {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-inline: 0;
    }

.otkm .mph .mph-btn .rzi { font-size: 22px; }

.otkm .mph .mph-btn.is-on {
    background: var(--home-tone-blue-bg, #eef3fd);
    color: var(--home-accent, #1d4ed8);
}

.mph .mph-btn.otkm-ideas {
    background: var(--home-tone-amber-bg, #fff3d6);
    color: var(--home-tone-amber, #7a4a00);
}

    .mph .mph-btn.otkm-ideas.is-on { box-shadow: inset 0 0 0 2px currentColor; }

.mph .mph-btn.otkm-danger { color: var(--home-danger-text, #c62828); }

/* البحث | search */
.otkm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding-inline: 14px 0;
    border-radius: 22px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-text-2, #4f5b6d);
}

    .otkm-search:focus-within { box-shadow: 0 0 0 2px var(--home-accent, #1d4ed8); }

.otkm-search-ic.rzi { font-size: 20px; }

.otkm-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 15px;
}

    .otkm-search-input::placeholder { color: var(--home-text-2, #4f5b6d); opacity: 1; }
    .otkm-search-input::-webkit-search-cancel-button { display: none; }
    .otkm .otkm-search-input:focus-visible,
    .otkm-sg .otkm-search-input:focus-visible { outline: 0; }

.otkm-search-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    cursor: pointer;
}

    .otkm-search-x .rzi { font-size: 20px; }

/* شرائح العروض والقوائم: لمسة 44px وشكل 34px | the view / list chips: a 44px touch target, a 34px pill */
.otkm-chips {
    display: flex;
    gap: 8px;
    margin-inline: -12px;
    padding-inline: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

    .otkm-chips::-webkit-scrollbar { display: none; }

.otkm-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.otkm-chip-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 17px;
    background: var(--home-surface, #ffffff);
    color: var(--home-icon, #334155);
    font-size: 12px;
    white-space: nowrap;
    box-sizing: border-box;
}

.otkm-chip.is-on .otkm-chip-pill {
    border-color: var(--home-accent-strong, #1d4ed8);
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font-weight: 600;
}

.otkm-chip.is-new .otkm-chip-pill {
    border-style: dashed;
    color: var(--home-accent, #1d4ed8);
}

.otkm-chip:focus-visible { outline: 0; }
.otkm-chip:focus-visible .otkm-chip-pill { box-shadow: 0 0 0 2px var(--home-accent, #1d4ed8); }

.otkm-chip-text {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.otkm-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--home-surface-2, #e9edf3);
    font-size: 11px;
    font-feature-settings: 'tnum';
    box-sizing: border-box;
}

.otkm-chip.is-on .otkm-chip-count { background: rgba(255, 255, 255, .22); }

.otkm-chip-ic.rzi { font-size: 16px; }

/* نقطة لون القائمة | the list's colour dot */
.otkm-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--otk-c, #1d4ed8);
}

/* شريط تنبيه (القوائم، البريد) | a notice bar (lists, mail) */
.otkm-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 12px 0;
    padding-block: 4px;
    padding-inline: 12px 4px;
    border-radius: 14px;
    background: var(--home-tone-blue-bg, #eef3fd);
    color: var(--home-text, #0f1b2d);
    font-size: 13px;
}

    .otkm-banner > .rzi {
        flex: none;
        font-size: 20px;
        color: var(--home-accent, #1d4ed8);
    }

    .otkm-banner.is-warning { background: var(--home-tone-amber-bg, #fff3d6); }
    .otkm-banner.is-warning > .rzi { color: var(--home-tone-amber, #7a4a00); }

.otkm-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-block: 8px;
    line-height: 1.5;
}

    .otkm-banner-text b { font-weight: 600; }
    .otkm-banner-text span { color: var(--home-text-2, #4f5b6d); }

/* الأزرار | buttons */
.otkm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .otkm-btn .rzi { font-size: 18px; }

    .otkm-btn.is-primary {
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
    }

    .otkm-btn.is-outline {
        background: var(--home-surface, #ffffff);
        color: var(--home-accent, #1d4ed8);
        box-shadow: inset 0 0 0 1px var(--home-chip-border, #d5dce7);
    }

    .otkm-btn.is-text {
        background: transparent;
        color: var(--home-accent, #1d4ed8);
    }

    .otkm-btn:disabled {
        opacity: .5;
        cursor: default;
    }

.otkm-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .otkm-link .rzi { font-size: 18px; }

.otkm-xbtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    text-decoration: none;
    cursor: pointer;
}

    .otkm-xbtn .rzi { font-size: 20px; }
    .otkm-xbtn:disabled { opacity: .45; cursor: default; }
    .otkm-xbtn.otkm-danger { color: var(--home-danger-text, #c62828); }

.otkm-count {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--home-surface-2, #eef1f6);
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 600;
    font-feature-settings: 'tnum';
    box-sizing: border-box;
}

/* شريط الإضافة | the add bar */
.otkm-add {
    margin: 12px 12px 0;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
}

    .otkm-add.is-active {
        border-color: var(--home-accent, #1d4ed8);
        box-shadow: 0 0 0 1px var(--home-accent, #1d4ed8);
    }

.otkm-add-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding-inline: 12px;
}

.otkm-add-ic {
    display: inline-flex;
    color: var(--home-accent, #1d4ed8);
}

    .otkm-add-ic .rzi { font-size: 22px; }

.otkm-add-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 15px;
}

    .otkm-add-input::placeholder { color: var(--home-text-2, #4f5b6d); opacity: 1; }
    .otkm .otkm-add-input:focus-visible { outline: 0; }

.otkm-add-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 8px 8px;
}

.otkm-add-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding-inline: 10px 4px;
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px var(--home-chip-border, #d5dce7);
    color: var(--home-text-2, #4f5b6d);
}

    .otkm-add-due .rzi { font-size: 18px; }

    .otkm-add-due.is-set {
        box-shadow: inset 0 0 0 1px var(--home-accent, #1d4ed8);
        color: var(--home-accent, #1d4ed8);
    }

.otkm-select {
    height: 44px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
}

    .otkm-select option {
        background: var(--home-surface, #ffffff);
        color: var(--home-text, #0f1b2d);
    }

.otkm-add-btn { margin-inline-start: auto; }

/* النجمة | the star */
.otkm-star {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-accent, #1d4ed8);
    cursor: pointer;
}

    .otkm-star .rzi { font-size: 22px; }

    .otkm-star.is-on .rzi,
    .otkm-meta-item.is-star .rzi { font-variation-settings: 'FILL' 1; }

/* القائمة | the list */
.otkm-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* بطاقة مهمة | a task card */
.otkm-task {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
}

.otkm-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
}

    .otkm-check:disabled { cursor: default; }

.otkm-check-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--home-text-2, #64748b);
    border-radius: 50%;
    color: transparent;
    box-sizing: border-box;
}

    .otkm-check-ring .rzi {
        font-size: 15px;
        font-weight: 700;
    }

.otkm-check.is-lg .otkm-check-ring { width: 26px; height: 26px; }
.otkm-check.is-lg .otkm-check-ring .rzi { font-size: 18px; }
.otkm-check.is-sm .otkm-check-ring { width: 20px; height: 20px; }
.otkm-check.is-sm .otkm-check-ring .rzi { font-size: 13px; }

.otkm-check.is-done .otkm-check-ring {
    border-color: var(--otk-c, #1d4ed8);
    background: var(--otk-c, #1d4ed8);
    color: var(--otk-on-c, #ffffff);
}

.otkm-task-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    margin: 0;
    padding: 6px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.otkm-task-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.otkm-task.is-done .otkm-task-title {
    color: var(--home-text-2, #4f5b6d);
    text-decoration: line-through;
}

.otkm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    line-height: 1.5;
}

.otkm-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .otkm-meta-item .rzi { flex: none; font-size: 14px; }
    .otkm-meta-item.is-accent { color: var(--home-accent, #1d4ed8); }
    .otkm-meta-item.is-danger { color: var(--home-danger-text, #c62828); font-weight: 600; }
    .otkm-meta-item.is-success { color: var(--home-success-text, #15803d); }
    .otkm-meta-item.is-info { color: var(--home-info-text, #0369a1); }
    .otkm-meta-item.is-warning { color: var(--home-warning-text, #8a5300); }
    .otkm-meta-item.is-star { color: var(--home-accent, #1d4ed8); }

/* الصورة الرمزية: لون القائمة أغمق قليلاً حتى يبلغ الحرف 4.5:1 | the avatar: the list colour a little darker so the letter reaches 4.5:1 */
.otkm-av {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--otk-c, #1d4ed8) 88%, #000000);
    color: var(--otk-on-c, #ffffff);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

    .otkm-av.is-row { width: 24px; height: 24px; font-size: 12px; }

/* قسم المنجزة | the completed section */
.otkm-done-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 6px 0 0;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--home-surface-2, #e9edf3);
    color: var(--home-icon, #334155);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .otkm-done-toggle .rzi { font-size: 18px; }

.otkm-done-count { font-feature-settings: 'tnum'; }

.otkm-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    padding: 6px 2px 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

.otkm-foot-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

/* التحميل والفشل والفراغ | loading, failure, empty */
.otkm-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 12px;
    padding: 28px 16px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #4f5b6d);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

    .otkm-list > .otkm-state { margin: 0; }

    .otkm-state b {
        color: var(--home-text, #0f1b2d);
        font-size: 15px;
        font-weight: 700;
    }

.otkm-state-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--otk-c, #1d4ed8) 14%, var(--home-surface, #ffffff));
    color: var(--otk-c, #1d4ed8);
}

    .otkm-state-ic .rzi { font-size: 26px; }

.otkm-state.is-danger .otkm-state-ic {
    background: var(--home-tone-red-bg, #fdecec);
    color: var(--home-danger-text, #c62828);
}

/* التفاصيل والاقتراحات صفحة كاملة فوق القائمة | details and suggestions as a full page over the list */
.otkm-pane {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--home-canvas, #f3f5f9);
}

    .otkm-pane > * {
        flex: 1 1 auto;
        min-height: 0;
    }

/* قائمة «المزيد» و«نقل إلى قائمة» | the "more" and "move to a list" sheets */
.msheet:has(.otkm-more-mark) .msheet-close,
.msheet:has(.otkm-move-mark) .msheet-close {
    width: 44px;
    height: 44px;
}

.otkm-sheet-group {
    padding: 14px 6px 6px;
    border-top: 1px solid var(--home-divider, #eef1f6);
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 700;
}

.msheet .msheet-item.otkm-sort.is-on,
.msheet .msheet-item.otkm-move.is-on {
    color: var(--home-accent, #1d4ed8);
    font-weight: 600;
}

/* ---- 48: تفاصيل المهمة | task details ---- */
.otkm-dt {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

.mph.otkm-dt-head {
    flex: none;
    padding: 10px 8px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
}

.otkm-dt-list {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 13px;
}

    .otkm-dt-list-ic.rzi {
        flex: none;
        font-size: 18px;
        color: var(--otk-c, #1d4ed8);
    }

.otkm-dt-list-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.otkm-dt > .otkm-state { margin: 12px; }

.otkm-dt-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.otkm-card {
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

/* العنوان والخطوات | the title and the steps */
.otkm-dt-main {
    display: flex;
    flex-direction: column;
    padding: 4px;
}

.otkm-dt-titlebar {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.otkm-dt-title {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 9px 4px;
    border: 0;
    border-radius: 8px;
    outline: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    resize: none;
    field-sizing: content;
}

    .otkm .otkm-dt-title:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 0; }

    .otkm-dt-title.is-done {
        color: var(--home-text-2, #4f5b6d);
        text-decoration: line-through;
    }

.otkm-dt-done {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 6px;
    color: var(--home-success-text, #15803d);
    font-size: 12px;
}

    .otkm-dt-done .rzi { font-size: 16px; }

.otkm-steps {
    display: flex;
    flex-direction: column;
}

.otkm-step {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
}

.otkm-step-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 8px;
    outline: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
}

    .otkm .otkm-step-input:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }

.otkm-step.is-done .otkm-step-input {
    color: var(--home-text-2, #4f5b6d);
    text-decoration: line-through;
}

.otkm-step-plus {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--home-accent, #1d4ed8);
}

    .otkm-step-plus .rzi { font-size: 20px; }

.otkm-step.is-new .otkm-step-input::placeholder {
    color: var(--home-accent, #1d4ed8);
    opacity: 1;
}

.otkm-dt-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 4px 6px 6px;
    padding-inline: 10px 2px;
    border-radius: 12px;
    background: var(--home-tone-green-bg, #e8f5ee);
    color: var(--home-success-text, #126b35);
    font-size: 13px;
}

    .otkm-dt-hint .rzi { font-size: 18px; }
    .otkm-dt-hint .otkm-link { margin-inline-start: auto; color: inherit; }

.otkm-progress {
    height: 4px;
    margin: 6px 10px 8px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--home-surface-2, #eef1f6);
}

    .otkm-progress span {
        display: block;
        height: 100%;
        border-radius: 2px;
        background: var(--otk-c, #1d4ed8);
    }

/* الصفوف | the rows */
.otkm-rows {
    display: flex;
    flex-direction: column;
    padding-inline: 12px 4px;
}

    .otkm-rows > * + * { border-top: 1px solid var(--home-divider, #eef1f6); }

.otkm-line {
    display: flex;
    align-items: center;
    gap: 4px;
}

.otkm-row {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    margin: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--home-icon, #334155);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .otkm-row.is-set { color: var(--home-accent, #1d4ed8); }
    .otkm-row.is-set.is-danger { color: var(--home-danger-text, #c62828); }
    .otkm-row.is-set.is-past { color: var(--home-text-2, #4f5b6d); }
    .otkm-row.is-busy { opacity: .7; }

.otkm-row-ic.rzi {
    flex: none;
    font-size: 20px;
}

.otkm-row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.otkm-row-label {
    font-size: 14px;
    line-height: 1.45;
}

.otkm-row-value {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    line-height: 1.5;
}

/* لوحات الاختيار | the pick panels */
.otkm-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block: 10px 12px;
    padding-inline: 0 8px;
}

.otkm-quick {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .otkm-quick.is-wrap {
        flex-direction: row;
        flex-wrap: wrap;
    }

.otkm-quick-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
}

    .otkm-quick-btn .rzi { font-size: 20px; color: var(--home-accent, #1d4ed8); }

    .otkm-quick-btn small {
        margin-inline-start: auto;
        color: var(--home-text-2, #4f5b6d);
        font-size: 12px;
    }

.otkm-pill {
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 22px;
    background: var(--home-surface, #ffffff);
    box-shadow: inset 0 0 0 1px var(--home-chip-border, #d5dce7);
    color: var(--home-icon, #334155);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

    .otkm-pill.is-on {
        background: var(--home-accent-strong, #1d4ed8);
        box-shadow: none;
        color: #ffffff;
        font-weight: 600;
    }

.otkm-custom {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.otkm-custom-label {
    margin: 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 600;
}

.otkm-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .otkm-custom-row > .e-input-group,
    .otkm-custom-row > .e-control-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }

    .otkm-custom-row .otkm-select {
        flex: 1 1 auto;
        min-width: 0;
        border-radius: 10px;
        box-shadow: inset 0 0 0 1px var(--home-chip-border, #d5dce7);
        color: var(--home-text, #0f1b2d);
        padding-inline: 10px;
    }

/* منتقى التاريخ (Syncfusion) بارتفاع 44px | the date picker (Syncfusion) at 44px */
.otkm .e-input-group.otkm-picker,
.otkm .e-input-group.e-control-wrapper.otkm-picker {
    min-height: 44px;
    border-radius: 10px;
}

    .otkm .e-input-group.otkm-picker input.e-input { min-height: 44px; font-size: 14px; }

    .otkm .e-input-group.otkm-picker .e-input-group-icon {
        min-width: 44px;
        min-height: 44px;
    }

.otkm-num {
    flex: none;
    width: 76px;
    height: 44px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--home-chip-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
}

.otkm-days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.otkm-day {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-icon, #334155);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

    .otkm-day.is-on {
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
        font-weight: 600;
    }

.otkm-custom-actions {
    display: flex;
    gap: 8px;
}

.otkm-note {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    line-height: 1.6;
}

.otkm-field-error {
    color: var(--home-danger-text, #c62828);
    font-size: 12px;
}

.otkm-people {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.otkm-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .otkm-person .otkm-av { width: 28px; height: 28px; font-size: 12px; }

    .otkm-person.is-on { background: var(--home-tone-blue-bg, #eef3fd); }

.otkm-person-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.otkm-person-on.rzi { color: var(--home-accent, #1d4ed8); font-size: 20px; }

/* الملفات | files */
.otkm-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.otkm-files {
    display: flex;
    flex-direction: column;
}

.otkm-file {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 52px;
}

.otkm-file-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--otk-c, #1d4ed8) 14%, var(--home-surface, #ffffff));
    color: var(--otk-c, #1d4ed8);
}

    .otkm-file-ic .rzi { font-size: 20px; }

.otkm-file-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    padding-inline: 6px;
    color: var(--home-text, #0f1b2d);
    text-decoration: none;
}

.otkm-file-name,
.otkm-file-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.otkm-file-name { font-size: 14px; }

.otkm-file-meta {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

/* المصدر | the source */
.otkm-source {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 12px;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
    box-sizing: border-box;
}

    .otkm-source:disabled { cursor: progress; }
    .otkm-source.is-warning { align-items: flex-start; cursor: default; }

.otkm-source-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-accent, #1d4ed8);
}

    .otkm-source-ic .rzi { font-size: 20px; }

.otkm-source.is-warning .otkm-source-ic {
    background: var(--home-tone-amber-bg, #fff3d6);
    color: var(--home-tone-amber, #7a4a00);
}

.otkm-source-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.otkm-source-label {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

.otkm-source-title {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.otkm-source-sub {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

.otkm-source .otkm-note { margin-top: 4px; }
.otkm-source .otkm-link { align-self: flex-start; margin-inline-start: -10px; }

.otkm-source-go.rzi {
    flex: none;
    color: var(--home-text-2, #4f5b6d);
    font-size: 20px;
}

/* الملاحظات | notes */
.otkm-notes-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
}

    .otkm-notes-card:focus-within { box-shadow: 0 0 0 2px var(--home-accent, #1d4ed8); }

.otkm-notes-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    font-weight: 600;
}

    .otkm-notes-head .rzi { font-size: 16px; }

.otkm-saved {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: auto;
    color: var(--home-success-text, #15803d);
    font-weight: 500;
}

.otkm-notes {
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 4px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}

    .otkm .otkm-notes:focus-visible { outline: 0; }
    .otkm-notes::placeholder { color: var(--home-text-2, #4f5b6d); opacity: 1; }

.otkm-dt-created {
    margin: 4px 0 0;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
    text-align: center;
}

/* ---- اقتراحات «يومي» | My Day suggestions ---- */
.otkm-sg {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

.mph.otkm-sg-head {
    flex: none;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
}

    .mph.otkm-sg-head .mph-extra { padding-inline: 0; }

.otkm-sg-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

    .otkm-sg-scroll > .otkm-state { margin: 0; }

.otkm-sg-group {
    padding-inline: 12px 4px;
}

.otkm-sg-gtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    color: var(--home-text, #0f1b2d);
    font-size: 13px;
    font-weight: 700;
}

    .otkm-sg-gtitle .rzi { font-size: 18px; color: var(--home-tone-amber, #7a4a00); }

.otkm-sg-gname { flex: 1 1 auto; min-width: 0; }

.otkm-sg-row {
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 1px solid var(--home-divider, #eef1f6);
}

.otkm-sg-open {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    margin: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.otkm-sg-add {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--home-tone-blue-bg, #eef3fd);
    color: var(--home-accent, #1d4ed8);
    cursor: pointer;
}

    .otkm-sg-add .rzi { font-size: 22px; }
    .otkm-sg-add:disabled { opacity: .6; cursor: default; }

.otkm-sg-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-border, #e6eaf1);
    background: var(--home-surface, #ffffff);
    color: var(--home-text-2, #4f5b6d);
    font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
    .otkm .otk-spin { animation: none; }
}

/* =====================================================================
   المرحلة 17 — مواقيت الصلاة على الهاتف (الشاشة 49): درج Geolocation بملء الشاشة — الرأس بالتاريخين وأزرار تنبيه الأذان
   والتحديث، بطاقة الصلاة القادمة بالعدّ وشريط التقدّم، قائمة اليوم بحالاتها (مضت / القادمة / لاحقة)، الساعة والمنطقة الزمنية،
   الإعدادات (تنبيه الأذان، العرض على الشاشة الرئيسية — dbo.UserPraySetting)، التحميل والخطأ مع إعادة المحاولة.
   | phase 17 — prayer times on a phone (screen 49): the Geolocation drawer full screen — the header with both dates and the
   adhan-alert / refresh buttons, the next-prayer card with the countdown and progress, today's list with its states (passed /
   next / later), the clock and time zone, the settings (adhan alert, shown on the home screen — dbo.UserPraySetting), loading
   and the error with retry. The next-prayer card stays blue in both themes (as the board and the desktop).
   Colours: --home-* (light fallbacks); no new token in darkOverrid.css.
   ===================================================================== */

/* الدرج بملء الشاشة على الهاتف (BootstrapBlazor Drawer من بطاقة «اليوم») | the drawer full screen on a phone */
.drawer:has(.geom) .drawer-body {
    width: 100% !important;
    max-width: 100vw;
    padding: 0 !important;
    overflow-y: auto;
    background: var(--home-canvas, #f3f5f9);
}

.geom {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
}

    .geom button:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 1px;
    }

/* نص لقارئ الشاشة فقط | text for screen readers only */
.geom-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* الرأس | the header */
.mph.geom-head {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
}

    .mph.geom-head .mph-title { font-size: 17px; }
    .mph.geom-head .mph-sub { white-space: normal; }

.geom-hbtn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--home-icon, #334155);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .geom-hbtn .rzi { font-size: 20px; }

    .geom-hbtn.is-on {
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
    }

    .geom-hbtn.is-outline { box-shadow: inset 0 0 0 1px var(--home-chip-border, #d5dce7); }
    .geom-hbtn.is-busy .rzi { animation: geo-spin 1s linear infinite; }

    .geom-hbtn:disabled {
        opacity: .6;
        cursor: default;
    }

.geom-scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* الصلاة القادمة (زرقاء فى الوضعين) | the next prayer (blue in both themes) */
.geom-hero {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0052ab, #0a6fc2);
    color: #ffffff;
}

.geom-hero-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.geom-hero-label {
    flex: 1;
    min-width: 0;
    color: #eef4fe;   /* ≥ 4.5:1 on the lighter end of the gradient (the board: #dbe6fb = 4.1) */
    font-size: 13px;
}

.geom-hero-pill {
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    font-size: 12px;
    white-space: nowrap;
}

.geom-hero-name {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

.geom-countdown {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    font-feature-settings: 'tnum';
}

.geom-progress {
    display: flex;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, .25);
}

.geom-progress-bar {
    border-radius: 3px;
    background: #ffffff;
    transition: width 1s linear;
}

.geom-progress-ends {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #eef4fe;
    font-size: 12px;
}

/* قائمة اليوم | today's list */
.geom-card {
    padding: 4px 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 18px;
    background: var(--home-surface, #ffffff);
}

.geom-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin: 0 -8px;
    padding: 0 8px;
    border-radius: 12px;
}

    .geom-row + .geom-row { border-top: 1px solid var(--home-divider, #eef1f6); }
    .geom-row.is-next,
    .geom-row.is-next + .geom-row { border-top-color: transparent; }
    .geom-row.is-sunrise { min-height: 46px; }
    .geom-row.is-next { background: var(--home-tone-blue-bg, #eef3fd); }

.geom-tile {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-icon, #334155);
}

    .geom-tile .rzi { font-size: 18px; }

.geom-row.is-next .geom-tile {
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
}

.geom-row.is-passed .geom-tile { color: var(--home-text-2, #4f5b6d); }

.geom-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
}

.geom-time {
    font-size: 15px;
    font-weight: 600;
    font-feature-settings: 'tnum';
    white-space: nowrap;
}

.geom-row.is-sunrise .geom-name,
.geom-row.is-sunrise .geom-time { font-size: 13px; }

.geom-row.is-passed .geom-name,
.geom-row.is-passed .geom-time {
    color: var(--home-text-2, #4f5b6d);
    font-weight: 400;
}

.geom-row.is-next .geom-name,
.geom-row.is-next .geom-time {
    color: var(--home-tone-blue, #1d4ed8);
    font-weight: 700;
}

.geom-chip {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--home-surface, #ffffff);
    color: var(--home-tone-blue, #1d4ed8);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.geom-passed {
    display: inline-flex;
    color: var(--home-success-text, #0f766e);
}

    .geom-passed .rzi { font-size: 18px; font-weight: 700; }

.geom-foot {
    display: flex;
    justify-content: center;
    gap: 8px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12px;
}

.geom-clock { font-feature-settings: 'tnum'; }

/* التحميل والخطأ | loading and the error */
.geom-loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.geom-skel-hero {
    height: 190px;
    border-radius: 22px;
}

.geom-loading-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 13px;
}

.geom-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
}

.geom-state-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: var(--home-tone-red-bg, #fdeceb);
    color: var(--home-danger-text, #9f1d14);
}

    .geom-state-ic .rzi { font-size: 34px; }

.geom-state-title {
    font-size: 18px;
    font-weight: 700;
}

.geom-state-text {
    max-width: 340px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 14px;
    line-height: 1.7;
}

.geom-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    margin-top: 8px;
    padding: 0 24px;
    border: 0;
    border-radius: 14px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* الإعدادات على الهاتف | the settings on a phone */
.geom .geo-set {
    border-color: var(--home-border, #e6eaf1);
    border-radius: 18px;
}

.geom .geo-set-row { min-height: 60px; }

@media (prefers-reduced-motion: reduce) {
    .geom-progress-bar { transition: none; }
    .geom-hbtn.is-busy .rzi { animation: none; }
}

/* =====================================================================
   البنود المفتوحة (و) — البحث الصوتى فى المراسلات (الشاشة 3): زر الميكروفون بجانب حقل البحث كما فى التصميم (يظهر فقط إن
   دعم المتصفح التعرّف على الكلام)، حالة الاستماع (الزر أحمر بنبض، إطار الحقل أحمر، «تحدّث الآن…»، و«جارٍ الاستماع…» مكان سطر
   النطاق)، والأخطاء فى نفس السطر — فلا يتغيّر ارتفاع الرأس (164px). | open items round F — voice search in correspondence
   (screen 3): the microphone next to the search field as on the board (only when the browser supports speech recognition), the
   listening state (the button red with a pulse, the field's border red, «Speak now…», «Listening…» in place of the scope line)
   and the errors on the same line — the header keeps its 164px.
   Colours: --home-* (light fallbacks); no new token.
   ===================================================================== */
.mcr-hbtn--mic.is-on {
    background: var(--home-tone-red-bg, #fdeceb);
    color: var(--home-tone-red, #9f1d14);
    animation: mcr-voice-pulse 1.4s ease-out infinite;
}

.mcr-sfield.is-listening {
    border-color: var(--home-tone-red, #9f1d14);
}

@keyframes mcr-voice-pulse {
    0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, .35); }
    70% { box-shadow: 0 0 0 10px rgba(198, 40, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); }
}

/* الاستماع / الخطأ مكان سطر النطاق (سطران على الأكثر) | listening / the error in place of the scope line (two lines at most) */
.mcr-scope-text.mcr-voice-note {
    white-space: normal;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

    .mcr-voice-note.is-listening {
        color: var(--home-tone-red, #9f1d14);
        font-weight: 600;
    }

    .mcr-voice-note.is-error {
        color: var(--home-danger-text, #9f1d14);
    }

@media (prefers-reduced-motion: reduce) {
    .mcr-hbtn--mic.is-on {
        animation: none;
        box-shadow: 0 0 0 3px rgba(198, 40, 40, .25);
    }
}

/* =====================================================================
   البنود المفتوحة (ز) — عدد غير المقروءة فى الدردشات (التصميم: الشاشتان 13 و20): شارة زرقاء على زر الدردشات فى الشريط العلوى
   (MobileChatsButton) بنفس مكان شارة الإشعارات وشكلها، وعدد كل دردشة فى قائمة الهاتف مكان النقطة (رمادى للدردشة المكتومة).
   | open items round G — the chat unread counts (the board's screens 13 and 20): a blue badge on the top bar's chats button
   (MobileChatsButton), placed and shaped as the notifications badge, and each chat's count in the phone list instead of the
   dot (grey for a muted chat). Colours: --home-* (light fallbacks); no new token.
   ===================================================================== */
.mtb .mtb-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: -1px;
    min-width: 21px;
    height: 21px;
    padding: 0 4px;
    border: 2px solid var(--home-surface, #ffffff);
    border-radius: 11px;
    box-sizing: border-box;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}

.cht-root.cht-m .chtm-count {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

    /* الدردشة المكتومة: رمادى، والنص بلون السطح ليبقى التباين فى الداكن | a muted chat: grey, the text in the surface colour
       so the contrast holds in dark mode */
    .cht-root.cht-m .chtm-count.is-muted {
        background: var(--home-text-2, #4f5b6d);
        color: var(--home-surface, #ffffff);
    }

/* نص لقارئ الشاشة فقط | text for screen readers only */
.chtm-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* =====================================================================
   البنود المفتوحة (ح) — الاتصال المرئى بالطرف الآخر من رأس المحادثة (التصميم: الشاشة 21، «مكالمة فيديو»): زر الفيديو كان
   رابطاً لصفحة «الاتصال» وصار زراً يفتح نافذة الاتصال (VideoCallDialog) لهذا الشخص؛ أثناء تجهيز الاتصال حلقة انتظار
   | open items round H — a video call to the other participant from the thread header (the board's screen 21): the video
     button was a link to the Calls page and is now a button that opens the call dialog for this person; a spinner while the
     call is being prepared
   ===================================================================== */
button.chtm-video {
    position: relative;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    button.chtm-video:disabled { cursor: progress; }

    button.chtm-video.is-busy svg { opacity: .35; }

    button.chtm-video.is-busy::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 20px;
        height: 20px;
        border: 2px solid currentColor;
        border-inline-end-color: transparent;
        border-radius: 50%;
        box-sizing: border-box;
        animation: chtm-video-spin .8s linear infinite;
    }

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

@media (prefers-reduced-motion: reduce) {
    button.chtm-video.is-busy::after { animation: none; }
}

/* نافذة الاتصال (VideoCallDialog من المرحلة 10) تُفتح الآن من المحادثة أيضاً: لمسات 44px على الهاتف وشاشات اللمس
   | the call dialog (VideoCallDialog, phase 10) now also opens from the chat: 44px touch targets on phones / touch screens */
@media (max-width: 767.98px), (pointer: coarse) {
    .rz-dialog.vmc-call-dialog .vmc-dialog-x,
    .rz-dialog.vmc-call-dialog .vmt-info-copy {
        width: 44px;
        height: 44px;
    }

    .rz-dialog.vmc-call-dialog .vmc-pill {
        height: 44px;
        border-radius: 22px;
    }
}

/* =====================================================================
   البنود المفتوحة (ي) — من فى الاجتماع الآن (التصميم: الشاشتان 26 و29): على بطاقة الاجتماع الجارى صور من فى الغرفة الآن
   (حتى 3، «+n»)، وفى ردهة الانضمام على الهاتف سطر «مريم السيابية وخالد الرواحي في الاجتماع» (الضيف: العدد)
   | open items round J — who is in the meeting now (the board's screens 26 and 29): on a card of a meeting happening now the
     photos of who is in the room (up to 3, «+n»); in the phone lobby the line «… in the meeting» (a guest: the count)
   ===================================================================== */
.vmm-people {
    display: inline-flex;
    align-items: center;
    margin-inline-start: auto;
    padding-inline-start: 8px;
}

.vmm-people-av {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--home-surface, #ffffff);
    border-radius: 50%;
    box-sizing: border-box;
    object-fit: cover;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

    .vmm-people-av + .vmm-people-av { margin-inline-start: -8px; }

    .vmm-people-av.is-guest {
        background: var(--home-tone-purple-bg, #f1ecfd);
        color: var(--home-tone-purple, #5b21b6);
    }

    .vmm-people-av.is-more {
        background: var(--home-tone-neutral-bg, #eef1f6);
        color: var(--home-tone-neutral, #334155);
    }

.vr-root.is-phone .vr-lobby-present {
    margin-top: -2px;
    color: var(--vr-muted);
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* =====================================================================
   البنود المفتوحة (ك) — الطلبات على الهاتف (التصميم: الشاشة 18): فى «بانتظار موافقتي» شريحة «الكل» أولاً وعليها العدد، وتحتها
   القائمة الموحّدة لكل الأنواع (المالك الحالى فى سير العمل)؛ العدد على التبويب؛ وسطر «المرحلة (الآن)» على بطاقات الطلبات
   | open items round K — requests on a phone (the board's screen 18): in "awaiting my approval" an "All" chip first with the
     count, under it the combined list of every type (the workflow's current holder); the count on the tab; and the
     "<step> (now)" line on the request cards
   ===================================================================== */
.reql-type .reql-type-svg { display: inline-flex; }

    .reql-type .reql-type-svg svg { display: block; width: 18px; height: 18px; }

.reql-type-count {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.reql-type.is-on .reql-type-count {
    background: #ffffff;
    color: var(--home-accent-strong, #1d4ed8);
}

/* القائمة الموحّدة | the combined list */
.reqa {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 2px 6px 12px;
}

.reqa-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reqa-card {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    -webkit-tap-highlight-color: transparent;
}

    button.reqa-card { cursor: pointer; }

    .reqa-card:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

.reqa-ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--home-surface-2, #f1f4f9);
    color: var(--home-icon, #334155);
    font-size: 19px;
}

    .reqa-ic svg { display: block; width: 20px; height: 20px; }

    .reqa-ic .rzi { font-size: 22px; }

.reqa-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.reqa-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.reqa-type {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.reqa-chip {
    flex: none;
    max-width: 45%;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reqa-sub,
.reqa-date {
    color: var(--home-text-2, #4f5b6d);
    font-size: 12.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.reqa-chev {
    flex: none;
    align-self: center;
    color: var(--home-text-2, #4f5b6d);
}

    .reqa-chev svg { display: block; width: 18px; height: 18px; }

.reqa-more {
    margin: 0 4px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 12.5px;
}

.reqa-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 16px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.reqa-state-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--home-tone-green-bg, #e6f4f1);
    color: var(--home-tone-green, #0b5c55);
}

    .reqa-state-ic svg { display: block; width: 26px; height: 26px; }

.reqa-retry {
    min-height: 44px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .reqa-retry:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

/* سطر المرحلة (القائمة الموحّدة وبطاقات النوع) | the step line (the combined list and the type's cards) */
.reqa-step,
.req-m-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--home-text, #0f1b2d);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.reqa-step { margin-top: 4px; }

    .reqa-step::before,
    .req-m-step::before {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--home-accent, #1d4ed8);
    }

.req-m-step.is-done::before { background: var(--home-tone-green, #0b5c55); }

.req-m-step.is-rejected { color: var(--home-tone-red, #9f1d14); }

    .req-m-step.is-rejected::before { background: currentColor; }

/* =====================================================================
   المرحلة 18: الحساب والملف الشخصى (شاشات 50–57) على الهاتف — .acm-*، .uvm-*، .uml-m
   50 «حسابي»: صفحة /useraccount (UserAccount + UserDelegationsWidget بـ MobileView) — .acm-root, .acm-me, .acm-grid, .acm-set…
   51 الملف الشخصى /myprofile (UserView داخل MobileLayout) — .uml-root.uml-m, .uvm-*
   52–57 نوافذ بملء الشاشة (CssClass acm-dialog-m، الرأس من المكوّن): التوقيع .acm-sig، كلمة المرور .acm-pw،
   التفويضات .acm-dg (والصفحة .acm-dg.is-page)، التفويض .acm-de، مفاتيح المرور .acm-pk، مستوى السرية .acm-si.
   سطح المكتب لا يحمل هذه الأصناف. الألوان: --home-* (الفاتح = القيمة الاحتياطية)؛ ورقة التوقيع بيضاء فى الوضعين (تُطبع).
   | phase 18: the account and the profile (screens 50–57) on a phone. 50 the /useraccount page; 51 /myprofile; 52–57
   full-screen dialogs (CssClass acm-dialog-m; the component draws its header). The desktop carries none of these
   classes. Colours: --home-* (light = the fallback); the signature paper stays white in both themes (it is printed).
   ===================================================================== */

/* ---- النوافذ بملء الشاشة بلا شريط عنوان | the full-screen dialogs without a title bar ---- */
.rz-dialog-wrapper:has(> .rz-dialog.acm-dialog-m) { padding: 0 !important; }

.rz-dialog-wrapper .rz-dialog.acm-dialog-m:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--home-canvas, #f3f5f9) !important;
    box-shadow: none !important;
    transform: none !important;
}

    .rz-dialog.acm-dialog-m > .rz-dialog-titlebar { display: none !important; }

    .rz-dialog.acm-dialog-m > .rz-dialog-content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--home-canvas, #f3f5f9) !important;
    }

/* ---- الهيكل المشترك | the shared frame ---- */
.acm-root,
.acm-dlg {
    box-sizing: border-box;
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
    line-height: 1.5;
}

    .acm-root *,
    .acm-dlg * { box-sizing: border-box; }

.acm-root {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--home-canvas, #f3f5f9);
}

.acm-dlg {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--home-canvas, #f3f5f9);
}

    .acm-dlg.is-page { height: auto; min-height: 100%; }

/* النماذج داخل الإطار: نفس المسافات بين البطاقات | the forms inside the frame: the same gaps between the cards */
.acm-dlg-scroll > form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.acm-dlg-scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.acm-dlg.is-page .acm-dlg-scroll { overflow: visible; }

.acm-dlg-foot {
    flex: none;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

.acm-dlg .rz-button.acm-primary,
.acm-root .rz-button.acm-primary {
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    background: var(--home-accent-strong, #1d4ed8) !important;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
}

    .acm-dlg .rz-button.acm-primary.is-green { background: var(--home-solid-green, #0f766e) !important; min-height: 46px; font-size: 14px; }
    .acm-dlg .rz-button.acm-primary.rz-state-disabled { opacity: .55; }

/* البطاقات | cards */
.acm-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.acm-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.acm-card-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--home-text, #0f1b2d);
}

.acm-group {
    margin: 0;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-text-2, #4f5b6d);
}

.acm-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
    font-size: 12px;
    font-weight: 700;
    font-feature-settings: 'tnum';
}

.acm-ic {
    flex: none;
    display: inline-flex;
    width: 20px;
    height: 20px;
}

    .acm-ic svg { display: block; width: 100%; height: 100%; }

.acm-link,
.acm-more {
    flex: none;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--home-accent, #1d4ed8);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.acm-link { min-width: 44px; }

.acm-more { width: 100%; }

.acm-hint {
    font-size: 12px;
    line-height: 1.6;
    color: var(--home-text-2, #4f5b6d);
}

.acm-note,
.acm-alert,
.acm-msg {
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.6;
}

.acm-note,
.acm-alert {
    background: var(--home-tone-amber-bg, #fff3d6);
    color: var(--home-tone-amber, #7a4a00);
}

.acm-msg.is-ok { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
.acm-msg.is-error { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }

.acm-empty {
    align-items: center;
    padding: 24px 16px;
    text-align: center;
}

    .acm-empty b { font-size: 15px; }
    .acm-empty span { font-size: 13px; color: var(--home-text-2, #4f5b6d); }

.acm-empty-line {
    margin: 0;
    font-size: 13px;
    color: var(--home-text-2, #4f5b6d);
}

/* الهيكل أثناء التحميل (بلا حركة) | the loading skeleton (no motion) */
.acm-skel span,
.acm-dg-skel span {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: var(--home-surface-2, #eef1f6);
}

    .acm-skel span:first-child { width: 55%; height: 16px; }
    .acm-skel span:last-child,
    .acm-dg-skel span:last-child { width: 70%; }

.acm-dg-skel { display: flex; flex-direction: column; gap: 8px; }

/* الشرائح والحالات | chips and states */
.acm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.acm-chip,
.acm-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.acm-state { flex: none; padding: 3px 9px; font-size: 11px; font-weight: 700; border-radius: 6px; }

.acm-chip.is-blue, .acm-state.is-upcoming { background: var(--home-tone-blue-bg, #e7eefc); color: var(--home-tone-blue, #1d4ed8); }
.acm-chip.is-green, .acm-state.is-green, .acm-state.is-active { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
.acm-chip.is-amber, .acm-state.is-amber { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }
.acm-chip.is-red { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
.acm-chip.is-purple { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); }
.acm-chip.is-neutral, .acm-state.is-inactive, .acm-state.is-ended { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }

/* المقسّم (اتجاهان، رسم / رفع، اللغة) | the segmented control (two directions, draw / upload, language) */
.acm-seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--home-surface-2, #eef1f6);
}

    .acm-seg.is-mini { display: inline-grid; flex: none; grid-template-columns: repeat(2, auto); }

.acm-seg-btn {
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

    .acm-seg-btn.is-on {
        background: var(--home-surface, #ffffff);
        color: var(--home-accent, #1d4ed8);
        font-weight: 700;
        box-shadow: 0 1px 4px rgba(15, 27, 45, .12);
    }

    .acm-seg-btn:focus-visible,
    .acm-filter:focus-visible,
    .acm-toggle:focus-visible,
    .acm-tile:focus-visible,
    .acm-btn:focus-visible,
    .acm-switch:focus-visible,
    .acm-set-row.is-link:focus-visible,
    .acm-link:focus-visible,
    .acm-more:focus-visible,
    .acm-fab:focus-visible,
    .uvm-act:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

/* شرائح التصفية (لمسة 44px، الشكل 32px) | filter chips (a 44px touch, a 32px look) */
.acm-filters {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
}

.acm-filter,
.acm-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

    .acm-filter > span,
    .acm-toggle > span {
        display: inline-flex;
        align-items: center;
        height: 32px;
        padding: 0 14px;
        border: 1px solid var(--home-chip-border, #d5dce7);
        border-radius: 16px;
        background: var(--home-surface, #ffffff);
        color: var(--home-text, #0f1b2d);
        font-size: 12px;
        white-space: nowrap;
        font-feature-settings: 'tnum';
    }

    .acm-filter.is-on > span {
        border-color: var(--home-filter-on-bg, #0f1b2d);
        background: var(--home-filter-on-bg, #0f1b2d);
        color: var(--home-filter-on-text, #ffffff);
        font-weight: 600;
    }

.acm-toggles { display: flex; flex-wrap: wrap; column-gap: 6px; }

    .acm-toggle > span { height: 36px; padding: 0 12px; border-radius: 18px; font-size: 13px; white-space: normal; text-align: start; }

    .acm-toggle.is-on > span {
        border-color: var(--home-accent-strong, #1d4ed8);
        background: var(--home-accent-strong, #1d4ed8);
        color: #ffffff;
        font-weight: 600;
    }

/* الأزرار | buttons */
.acm-btn {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .acm-btn.is-danger {
        border-color: color-mix(in srgb, var(--home-tone-red, #9f1d14) 35%, transparent);
        color: var(--home-tone-red, #9f1d14);
    }

/* الصفوف | rows */
.acm-rows {
    gap: 0;
    padding: 0 12px;
    list-style: none;
}

.acm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 0;
}

    .acm-row + .acm-row { border-top: 1px solid var(--home-divider, #eef1f6); }
    .acm-row.is-empty { justify-content: center; padding: 20px 4px; font-size: 13px; color: var(--home-text-2, #4f5b6d); text-align: center; }

.acm-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 500;
}

    .acm-row-main b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .acm-row-main span { font-size: 12px; font-weight: 400; color: var(--home-text-2, #4f5b6d); }

.acm-row-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--home-tone-neutral-bg, #f1f4f9);
    color: var(--home-tone-neutral, #334155);
}

    .acm-row-ic svg { width: 20px; height: 20px; }

.acm-row-del {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--home-tone-red, #9f1d14);
    cursor: pointer;
}

    .acm-row-del svg { width: 19px; height: 19px; }
    .acm-row-del[disabled] { opacity: .45; cursor: default; }

/* الحقول | fields */
.acm-form { gap: 12px; }

.acm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.acm-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-text-2, #4f5b6d);
}

.acm-counter { margin-inline-start: auto; font-weight: 400; font-feature-settings: 'tnum'; }

.acm-dlg .rz-textbox,
.acm-dlg .rz-textarea,
.acm-dlg .rz-dropdown,
.acm-dlg .rz-datepicker,
.acm-dlg .e-input-group.acm-dd {
    min-height: 46px;
    border-radius: 12px !important;
}

.acm-dlg .rz-datepicker > .rz-inputtext { min-height: 44px; }
.acm-dlg .rz-datepicker .rz-datepicker-trigger { min-width: 44px; min-height: 44px; }

/* التاريخ dd/MM/yyyy يُقرأ من اليسار (كان ينقلب فى حقل RTL) | dd/MM/yyyy reads left to right (it flipped in an RTL field) */
.acm-dlg .rz-datepicker > .rz-inputtext { direction: ltr; }
.acm-dlg[dir="RTL" i] .rz-datepicker > .rz-inputtext { text-align: right; }
.acm-dlg .rz-dropdown { display: flex; align-items: center; }

/* ==== 50: «حسابي» | my account ==== */
.acm-me {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
}

.acm-me-photo { flex: none; }

    .acm-me-photo .uma-photo,
    .uvm-photo .uma-photo { --uma-photo-size: 72px; }

    /* زر الكاميرا: لمسة 44px والشكل 32px | the camera button: a 44px touch, a 32px look */
    .acm-me-photo .uma-photo-edit,
    .uvm-photo .uma-photo-edit {
        inset-inline-end: -10px;
        bottom: -10px;
        width: 44px;
        height: 44px;
        border: 6px solid transparent;
        background: var(--home-accent-strong, #1d4ed8) padding-box;
        box-shadow: inset 0 0 0 2px var(--home-surface, #ffffff);
    }

        .acm-me-photo .uma-photo-edit .rzi,
        .uvm-photo .uma-photo-edit .rzi { font-size: 16px; }

.acm-me-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.acm-me-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--home-text, #0f1b2d); overflow-wrap: anywhere; }
.acm-me-job { font-size: 13px; color: var(--home-tone-neutral, #334155); }
.acm-me-sub { font-size: 12px; color: var(--home-text-2, #4f5b6d); }
    .acm-me-sub > span + span::before { content: " · "; }

.acm-me-level {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-block: -6px -10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--home-tone-red, #9f1d14);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .acm-me-level .acm-ic { width: 16px; height: 16px; }

.acm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.acm-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-height: 82px;
    padding: 10px 2px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d) !important;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    overflow-wrap: anywhere;
    cursor: pointer;
}

    .acm-tile[disabled] { opacity: .6; cursor: default; }

.acm-tile-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

    .acm-tile-ic svg { width: 19px; height: 19px; }
    .acm-tile-ic.is-blue { background: var(--home-tone-blue-bg, #e7eefc); color: var(--home-tone-blue, #1d4ed8); }
    .acm-tile-ic.is-purple { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); }
    .acm-tile-ic.is-amber { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }
    .acm-tile-ic.is-green { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }
    .acm-tile-ic.is-red { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
    .acm-tile-ic.is-neutral { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }

/* التفويضات المفعّلة (UserDelegationsWidget) | the active delegations */
.acm-dg-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.acm-dg-row { display: flex; align-items: center; gap: 10px; }

.acm-av {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--home-av-1, #0f766e);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

    .acm-av.is-2 { background: var(--home-av-2, #7c3aed); }
    .acm-av.is-3 { background: var(--home-av-3, #b45309); }

.acm-dg-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.acm-dg-who { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.acm-dg-sub { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

/* صلاحياتى | my permissions */
.acm-perm-ou { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
    .acm-perm-ou + .acm-perm-ou { border-top: 1px solid var(--home-divider, #eef1f6); }
.acm-perm-name { font-size: 13px; font-weight: 600; }
.acm-perm-how { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

/* اللغة والوضع الداكن والتنسيق | language, dark mode, theme */
.acm-set { gap: 0; padding: 0 12px; }

.acm-set-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 6px 0;
    color: var(--home-text, #0f1b2d);
}

    .acm-set-row + .acm-set-row { border-top: 1px solid var(--home-divider, #eef1f6); }

    .acm-set-row.is-link {
        border-inline: 0;
        border-bottom: 0;
        border-radius: 0;
        background: transparent;
        font: inherit;
        text-align: start;
        cursor: pointer;
    }

    .acm-set-row > .acm-ic { color: var(--home-tone-neutral, #334155); }
    .acm-set-row > .acm-ic.is-chev { width: 18px; height: 18px; color: var(--home-text-2, #4f5b6d); }

.acm-set-label { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.acm-set-value { font-size: 13px; color: var(--home-text-2, #4f5b6d); }

/* المفتاح (التشغيل = المقبض يميناً كاللوحة) | the switch (on = the knob on the right, as the board) */
.acm-switch {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.acm-switch-track {
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 46px;
    height: 28px;
    padding: 3px;
    border-radius: 14px;
    background: var(--home-chip-border, #cfd6e2);
}

.acm-switch.is-on .acm-switch-track { justify-content: flex-end; background: var(--home-accent-strong, #1d4ed8); }

.acm-switch-knob {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.acm-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border: 1px solid color-mix(in srgb, var(--home-tone-red, #9f1d14) 30%, transparent);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
    color: var(--home-tone-red, #9f1d14) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

    .acm-logout .acm-ic { width: 18px; height: 18px; }

/* نافذة القص فى صفحة الحساب والملف على الهاتف (ChangePhoto 640 × 700) | the crop dialog on the phone's account / profile pages */
.acm-root .e-dialog.uma-photo-dialog,
.uml-m .e-dialog.uma-photo-dialog {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
}

/* ==== 51: الملف الشخصى | the profile (UserView, uml-m) ==== */
.tas-root.uml-root.uml-m {
    gap: 0;
    padding: 0 0 calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
}

.uvm-hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 16px 14px;
    background: var(--home-surface, #ffffff);
}

.uvm-hero-row { display: flex; align-items: center; gap: 14px; }

.uvm-photo { flex: none; }
    .uvm-photo .uma-photo { --uma-photo-size: 76px; }

.uvm-hero-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.uvm-name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--home-text, #0f1b2d); overflow-wrap: anywhere; }
.uvm-prefix { margin-inline-end: 4px; font-size: 13px; font-weight: 600; color: var(--home-text-2, #4f5b6d); }
.uvm-alt { display: block; align-self: flex-start; font-size: 12px; color: var(--home-text-2, #4f5b6d); }
.uvm-role { font-size: 13px; color: var(--home-tone-neutral, #334155); }

.uvm-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.uvm-contacts { display: flex; flex-direction: column; }

.uvm-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--home-accent, #1d4ed8) !important;
    font-size: 14px;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

    .uvm-contact .acm-ic { width: 18px; height: 18px; color: var(--home-text-2, #4f5b6d); }

.uvm-acts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.uvm-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 60px;
    padding: 6px 2px;
    border: 0;
    border-radius: 14px;
    background: var(--home-surface-2, #f5f7fb);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
}

    .uvm-act .acm-ic { width: 19px; height: 19px; color: var(--home-accent, #1d4ed8); }

/* التبويبات شريطاً أفقياً | the tabs as a horizontal strip */
.uml-root.uml-m .tas-card.ou-tabs-card {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.uml-root.uml-m .uml-tabs.rz-tabview { --rz-tabs-padding: 12px; background: transparent; border: 0; }

.uml-root.uml-m .uml-tabs > .rz-tabview-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--home-border, #e3e8f0);
    background: var(--home-surface, #ffffff);
}

    .uml-root.uml-m .uml-tabs > .rz-tabview-nav::-webkit-scrollbar { display: none; }

    .uml-root.uml-m .uml-tabs > .rz-tabview-nav > li { flex: none; margin: 0; border: 0; background: transparent; }

        .uml-root.uml-m .uml-tabs > .rz-tabview-nav > li > a {
            display: flex;
            align-items: center;
            gap: 0;
            justify-content: center;
            min-width: 44px;
            min-height: 44px;
            padding: 0 12px;
            border: 0;
            border-bottom: 3px solid transparent;
            border-radius: 0;
            background: transparent;
            color: var(--home-text-2, #4f5b6d);
            font-size: 13px;
            white-space: nowrap;
        }

        .uml-root.uml-m .uml-tabs > .rz-tabview-nav > li > a .rzi { display: none; }

        .uml-root.uml-m .uml-tabs > .rz-tabview-nav > li.rz-tabview-selected > a {
            border-bottom-color: var(--home-accent, #1d4ed8);
            color: var(--home-accent, #1d4ed8);
            font-weight: 700;
        }

.uml-root.uml-m .uml-tabs > .rz-tabview-panels { padding: 12px; border: 0; background: transparent; }

.uml-root.uml-m .uml-tab-pane { min-height: 0; overflow-x: auto; }

/* الحقول صفوفاً | the facts as rows */
.uml-root.uml-m .uml-sections { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }

.uml-root.uml-m .rqe-card.uml-sec {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

    .uml-root.uml-m .rqe-card.uml-sec > .rqe-card-head {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 0;
        margin: 0;
        padding: 0 4px;
        border: 0;
        font-size: 12px;
        font-weight: 600;
        color: var(--home-text-2, #4f5b6d);
    }

        .uml-root.uml-m .rqe-card.uml-sec > .rqe-card-head > .rzi { display: none; }
        .uml-root.uml-m .rqe-card.uml-sec > .rqe-card-head .rz-button.uml-head-act { min-width: 44px; min-height: 44px; margin-block: -10px; }

.uml-root.uml-m .uml-names { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

    .uml-root.uml-m .uml-names-col + .uml-names-col { padding: 0; border: 0; }

.uml-root.uml-m .uml-names-lang { margin: 0 4px 6px; font-size: 12px; font-weight: 700; color: var(--home-accent, #1d4ed8); }

.uml-root.uml-m .uml-facts,
.uml-root.uml-m .uml-names .uml-facts {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 14px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 16px;
    background: var(--home-surface, #ffffff);
}

.uml-root.uml-m .uml-fact {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 6px 0;
}

    .uml-root.uml-m .uml-fact + .uml-fact { border-top: 1px solid var(--home-divider, #eef1f6); }

.uml-root.uml-m .uml-fact-label { flex: none; width: 110px; font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.uml-root.uml-m .uml-fact-value { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; color: var(--home-text, #0f1b2d); }

    .uml-root.uml-m .uml-fact-value.is-empty { color: var(--home-text-2, #4f5b6d); }

/* ==== 52: التوقيع | the signature ==== */
.acm-sig-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    border: 2px dashed color-mix(in srgb, var(--home-accent, #1d4ed8) 45%, transparent);
    border-radius: 16px;
    background: var(--home-tone-blue-bg, #f7f9fe);
    text-align: center;
}

.acm-sig-drop-ic { display: inline-flex; width: 34px; height: 34px; color: var(--home-accent, #1d4ed8); }
    .acm-sig-drop-ic svg { width: 100%; height: 100%; }

.acm-sig-drop .acm-sig-upload .btn,
.acm-sig-drop .acm-sig-upload button {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
}

.acm-sig-drop-hint { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

/* الورقة بيضاء دائماً | the paper is always white */
.acm-sig-paper {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 16px;
    background: #ffffff;
}

    .acm-sig-paper canvas { display: block; touch-action: none; }

.acm-sig-line {
    position: absolute;
    inset-inline: 8%;
    bottom: 22%;
    border-top: 1.5px dashed #d9dee6;
    pointer-events: none;
}

.acm-sig-here {
    position: absolute;
    bottom: 6px;
    inset-inline-start: 14px;
    font-size: 11px;
    color: #5f6b7b;
    pointer-events: none;
}

.acm-sig-tools { display: flex; align-items: center; gap: 8px; }

.acm-sig-widths { display: flex; gap: 6px; }

.acm-sig-w {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    cursor: pointer;
}

    .acm-sig-w > span { display: block; border-radius: 50%; background: var(--home-tone-neutral, #334155); }
    .acm-sig-w.is-on { border: 2px solid var(--home-accent, #1d4ed8); background: var(--home-tone-blue-bg, #e7eefc); }

.acm-sig-clear {
    margin-inline-start: auto;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-tone-red, #9f1d14);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.acm-sig-inks { display: grid; grid-template-columns: repeat(6, 44px); justify-content: space-between; row-gap: 4px; }

.acm-sig-ink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

    .acm-sig-ink::before {
        content: "";
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--ink, #000000);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    }

    .acm-sig-ink.is-on::before { box-shadow: 0 0 0 3px var(--home-surface, #ffffff), 0 0 0 5px var(--home-accent, #1d4ed8); }
    .acm-sig-ink:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; border-radius: 50%; }

.acm-sig-text .uma-sig-text {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 12px;
}

    /* نص التوقيع على ورقة بيضاء فى الوضعين (كسطح المكتب) | the signature text on white paper in both themes (as the desktop) */
    .acm-sig-text .uma-sig-text .e-richtexteditor { border: 0; }

        .acm-sig-text .uma-sig-text .e-richtexteditor .e-rte-content,
        .acm-sig-text .uma-sig-text .e-richtexteditor .e-rte-content .e-content {
            background: #ffffff !important;
            color: #0f1b2d !important;
        }

        .acm-sig-text .uma-sig-text .e-rte-content .e-content p { margin: 0; }

/* ==== 53: كلمة المرور | the password ==== */
.acm-alert { display: flex; flex-direction: column; gap: 8px; }
    .acm-alert-text { display: flex; flex-direction: column; gap: 2px; }
    .acm-alert .rz-button { min-height: 44px; align-self: flex-start; }

.acm-pw-fields { gap: 14px; padding: 14px; }

.acm-pw-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50px;
    padding-inline: 14px 4px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
}

    .acm-pw-box:focus-within { border-color: var(--home-accent, #1d4ed8); box-shadow: 0 0 0 1px var(--home-accent, #1d4ed8); }

    .acm-pw-box .acm-pw-input,
    .acm-pw-box .rz-textbox {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 44px;
        padding: 0;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--home-text, #0f1b2d);
        font-size: 15px;
        outline: none;
    }

    .acm-pw-box .uma-eye {
        position: static;
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--home-text-2, #4f5b6d);
        cursor: pointer;
    }

.acm-error { font-size: 12px; color: var(--home-tone-red, #9f1d14); }

.acm-pw-rules ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

    .acm-pw-rules li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--home-text-2, #4f5b6d); }
    .acm-pw-rules li.is-ok { color: var(--home-tone-green, #0b5c55); }

.acm-pw-dot {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--home-chip-border, #b8c1d1);
    border-radius: 50%;
    color: #ffffff;
}

    .acm-pw-rules li.is-ok .acm-pw-dot { border: 0; background: var(--home-solid-green, #0f766e); }
    .acm-pw-dot svg { width: 11px; height: 11px; stroke-width: 3.4; }

/* ==== 54: التفويضات | delegations ==== */
.acm-dg .acm-dlg-scroll { gap: 10px; padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

.acm-dg .mph .mph-extra { display: flex; flex-direction: column; gap: 6px; padding-bottom: 2px; }

.acm-dg-item { gap: 10px; padding: 14px; border-radius: 18px; }

.acm-dg-top { display: flex; align-items: center; gap: 10px; }

.acm-dg-photo {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--home-surface-2, #eef1f6);
    object-fit: cover;
}

.acm-dg-name { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.acm-dg-arrow { color: var(--home-text-2, #4f5b6d); font-weight: 400; }

.acm-dg-period { display: flex; flex-direction: column; gap: 5px; }

.acm-dg-dates {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--home-tone-neutral, #334155);
    font-feature-settings: 'tnum';
}

.acm-bar {
    display: flex;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--home-surface-2, #e9edf3);
}

    .acm-bar > span { height: 100%; border-radius: 3px; background: var(--home-solid-green, #0f766e); }
    .acm-dg-item.is-ended .acm-bar > span,
    .acm-dg-item.is-inactive .acm-bar > span { background: var(--home-text-muted, #9aa6b8); }

.acm-dg-left { font-size: 12px; color: var(--home-text-2, #4f5b6d); }
.acm-dg-notes { margin: 0; font-size: 12px; color: var(--home-text-2, #4f5b6d); overflow-wrap: anywhere; }

.acm-dg-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.acm-fab {
    position: fixed;
    inset-inline-end: 16px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px var(--home-accent-shadow, rgba(29, 78, 216, .28));
    cursor: pointer;
}

/* ==== 55: التفويض | the delegation form ==== */
.acm-de-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.acm-de-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 66px;
    padding: 8px 12px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .acm-de-type b { font-size: 14px; }
    .acm-de-type span { font-size: 12px; color: var(--home-text-2, #4f5b6d); }
    .acm-de-type.is-on { padding: 7px 11px; border: 2px solid var(--home-accent, #1d4ed8); background: var(--home-tone-blue-bg, #e7eefc); }

.acm-de-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.acm-de-tasks { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--home-divider, #eef1f6); overflow-x: auto; }
    .acm-de-tasks[hidden] { display: none; }
.acm-de-tasks-title { margin: 0; font-size: 13px; font-weight: 600; }

/* ==== 56: مفاتيح المرور | passkeys ==== */
.acm-pk-intro { flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; }

    .acm-pk-intro .acm-tile-ic { width: 48px; height: 48px; border-radius: 15px; }
    .acm-pk-intro .acm-tile-ic svg { width: 26px; height: 26px; }

.acm-pk-intro-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
    .acm-pk-intro-text b { font-size: 15px; }
    .acm-pk-intro-text span { font-size: 13px; line-height: 1.65; color: var(--home-text-2, #4f5b6d); }

.acm-pk .acm-row { min-height: 64px; }

.acm-pk-add { border: 2px solid var(--home-accent, #1d4ed8); }

/* ==== 57: مستوى السرية | the security level ==== */
.acm-si-me { align-items: center; gap: 10px; padding: 18px; border-radius: 20px; text-align: center; }

.acm-si-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 22px;
}

    .acm-si-ic svg { width: 34px; height: 34px; }
    .acm-si-ic.is-neutral { background: var(--home-tone-neutral-bg, #f1f4f9); color: var(--home-tone-neutral, #334155); }
    .acm-si-ic.is-blue { background: var(--home-tone-blue-bg, #e7eefc); color: var(--home-tone-blue, #1d4ed8); }
    .acm-si-ic.is-purple { background: var(--home-tone-purple-bg, #f1ecfd); color: var(--home-tone-purple, #5b21b6); }
    .acm-si-ic.is-amber { background: var(--home-tone-amber-bg, #fff3d6); color: var(--home-tone-amber, #7a4a00); }
    .acm-si-ic.is-red { background: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }

.acm-si-k { font-size: 13px; color: var(--home-text-2, #4f5b6d); }
.acm-si-name { font-size: 22px; font-weight: 700; }
.acm-si-note { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.acm-si-desc { padding: 14px; }
.acm-si-desc-body { font-size: 14px; line-height: 1.8; color: var(--home-tone-neutral, #334155); overflow-wrap: anywhere; }
    .acm-si-desc-body ul,
    .acm-si-desc-body ol { margin: 0; padding-inline-start: 20px; }

.acm-si-lv {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--home-tone-neutral-bg, #f1f4f9);
    color: var(--home-tone-neutral, #4f5b6d);
}

    .acm-si-lv svg { width: 16px; height: 16px; }
    .acm-si-lv.is-ok { background: var(--home-tone-green-bg, #e6f4f1); color: var(--home-tone-green, #0b5c55); }

.acm-si-state { flex: none; font-size: 12px; color: var(--home-text-2, #4f5b6d); }
    .acm-si-state.is-ok { color: var(--home-tone-green, #0b5c55); font-weight: 600; }

.acm-row.is-mine .acm-row-main { font-weight: 700; }

.acm-si-rule { margin: 0; padding: 0 4px; font-size: 12px; line-height: 1.7; color: var(--home-text-2, #4f5b6d); }

/* الحركة (المفتاح فقط) لمن لا يطلب تقليلها | motion (the switch only) unless reduced motion is asked */
@media (prefers-reduced-motion: no-preference) {
    .acm-switch-knob { transition: transform .15s ease; }
    .acm-seg-btn, .acm-filter > span, .acm-toggle > span { transition: background-color .15s ease, color .15s ease; }
}

/* =====================================================================
   المرحلة 19: الأنظمة (شاشة 58) — Shared/MenuPage.razor على الهاتف (.mpm, .mpm-*)
   الرأس المتدرّج (مكان الشريط العلوى، MobileChrome) بالعدد والبحث وتبديل بطاقات / قائمة؛ قسم لكل قائمة أم بأيقونة بلون
   MenuIconColor (--c) والعدد والوصف؛ الأبناء بطاقات بعمودين (أيقونة ملوّنة) أو صفوفاً بوصفها؛ لوحة الفروع من الأسفل.
   الشريط السفلى العام ظاهر و«الأنظمة» مفعّل (.mbn-item.active). سطح المكتب (.mp-* فى <style> المكوّن) لا يتغيّر.
   الألوان: --home-* (الفاتح = القيمة الاحتياطية)؛ لون القائمة من البيانات (--c)، ويُفتَّح على الأسطح الداكنة (--home-mp-icon-lift).
   | phase 19: the systems page on a phone. The gradient header (in place of the top bar) with the count, the search
   and cards / list; a section per main menu (icon in MenuIconColor = --c, count, description); the children as two-column
   cards or rows; the sub menu panel from the bottom. The global bottom bar shows with «systems» active. The desktop is
   unchanged. Colours: --home-* (light = the fallback); the menu colour from the data, lifted on dark surfaces.
   ===================================================================== */

/* ---- الرأس (فى مكان الشريط العلوى) | the header (in place of the top bar) ---- */
.mpm-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 16px 14px;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    background: linear-gradient(135deg, var(--home-mp-hero-from, #0052ab), var(--home-mp-hero-to, #0a6fc2));
    color: #ffffff;
}

.mpm-head-row { display: flex; align-items: center; gap: 10px; }

.mpm-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.mpm-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.mpm-sub {
    font-size: 13px;
    color: var(--home-mp-hero-muted, #eef3fe);
    font-feature-settings: 'tnum';
}

.mpm-view {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    cursor: pointer;
}

    .mpm-view svg { width: 20px; height: 20px; }
    .mpm-view:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.mpm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding-inline: 12px 4px;
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
}

    .mpm-search:focus-within { box-shadow: 0 0 0 2px #ffffff; }

.mpm-search-ic { flex: none; display: inline-flex; width: 18px; height: 18px; color: var(--home-text-2, #4f5b6d); }
    .mpm-search-ic svg { width: 100%; height: 100%; }

.mpm-search-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
}

    .mpm-search-input::-webkit-search-cancel-button { display: none; }
    .mpm-search-input::placeholder { color: var(--home-text-2, #4f5b6d); opacity: 1; }

/* «مسح»: شريحة ظاهرة بارتفاع 32px داخل لمسة 44px | «clear»: a 32px chip inside a 44px touch target */
.mpm-clear {
    position: relative;
    z-index: 0;
    flex: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .mpm-clear::before {
        content: '';
        position: absolute;
        inset: 6px 0;
        z-index: -1;
        border-radius: 9px;
        background: var(--home-surface-2, #e9edf3);
    }

    .mpm-clear:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; border-radius: 10px; }

/* ---- الصفحة: menuScroll.fit يضبط الارتفاع، والمنطقة وحدها تتمرّر فوق الشريط السفلى
   | the page: menuScroll.fit sets the height, and only the area scrolls, above the bottom bar ---- */
.mp-page.mpm {
    padding: 0;
    margin-bottom: calc(-1 * (var(--msh-nav-h, 55px) + env(safe-area-inset-bottom, 0px)));
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
}

.mpm .mpm-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 12px calc(var(--msh-nav-h, 55px) + env(safe-area-inset-bottom, 0px) + 16px);
    overscroll-behavior: contain;
}

/* ---- القسم (القائمة الأم) | the section (main menu) ---- */
.mpm-group { display: flex; flex-direction: column; gap: 8px; }

.mpm-group-head,
.mpm-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
}

.mpm-group-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--c, #0064D1);
    color: #ffffff;
}

    .mpm-group-icon .rzi,
    .mpm-group-icon i { font-size: 20px; color: #ffffff; }

.mpm-group-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.mpm-group-line { display: flex; align-items: center; gap: 6px; min-width: 0; }

.mpm-group-name {
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--home-text, #0f1b2d);
    overflow-wrap: anywhere;
}

.mpm-group-desc {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpm-count {
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--home-surface-2, #e9edf3);
    color: var(--home-text-2, #4f5b6d);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    font-feature-settings: 'tnum';
}

/* ---- الأبناء: بطاقات بعمودين أو صفوف | the children: two-column cards or rows ---- */
.mpm.is-grid .mpm-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mpm.is-list .mpm-items { display: flex; flex-direction: column; gap: 6px; }

.mpm-card {
    display: flex;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 14px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d) !important;
    font: inherit;
    text-align: start;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .mpm-card:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.mpm.is-grid .mpm-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 92px;
    padding: 10px;
}

.mpm.is-list .mpm-card {
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 10px;
}

.mpm-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.mpm-tile {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c, #0064D1) 12%, transparent);
    color: color-mix(in srgb, var(--c, #0064D1), var(--home-text, #0f1b2d) var(--home-mp-icon-lift, 0%));
}

    .mpm-tile .rzi,
    .mpm-tile i { font-size: 19px; color: inherit; }

.mpm-card-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.mpm-card-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--home-text, #0f1b2d);
    overflow-wrap: anywhere;
}

.mpm-card-desc {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpm-caret { flex: none; display: inline-flex; width: 18px; height: 18px; color: var(--home-text-2, #4f5b6d); }
    .mpm-caret svg { width: 100%; height: 100%; }
    .mpm-card.is-open .mpm-caret { transform: rotate(180deg); }

/* صف له فروع مفتوح: فروعه تحته بخط بلونه | an open parent row: its children below it with a line in its colour */
.mpm-sublist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-inline-start: 14px;
    padding-inline-start: 10px;
    border-inline-start: 3px solid color-mix(in srgb, var(--c, #0064D1) 45%, transparent);
}

.mpm-empty {
    padding: 40px 10px;
    font-size: 14px;
    text-align: center;
    color: var(--home-text-2, #4f5b6d);
}

/* ---- لوحة الفروع (البطاقات) من الأسفل | the sub menu panel (cards) from the bottom ---- */
.mpm-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--home-scrim, rgba(15, 27, 45, .45));
}

.mpm-sheet {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 86dvh;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    background: var(--home-canvas, #f3f5f9);
    color: var(--home-text, #0f1b2d);
    box-shadow: 0 -8px 24px rgba(15, 27, 45, .18);
    outline: none;
}

.mpm-sheet-head { padding: 0; }

.mpm-sheet-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-icon, #334155);
    cursor: pointer;
}

    .mpm-sheet-btn svg { width: 20px; height: 20px; }
    .mpm-sheet-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.mpm-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* البطاقات داخل اللوحة دائماً بعمودين | the panel's items are always two-column cards */
.mpm-sheet .mpm-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* الحركة لمن لا يطلب تقليلها | motion unless reduced motion is asked */
@media (prefers-reduced-motion: no-preference) {
    .mpm-caret { transition: transform .15s ease; }
    .mpm-card { transition: border-color .15s ease; }
}

/* =====================================================================
   البنود المفتوحة (ل): إعدادات «اسأل سفر» محفوظة لكل مستخدم — Settings.razor على الهاتف (.aiset-m)
   الموديل وعنوان Ollama للخادم: للقراءة فقط (لون الحقل الثانوى)، وتحتهما من يحددهما؛ «لم تحفظ إعداداتك بعد» تحت قسم الرد؛
   خطأ الحفظ مكان «تم الحفظ»؛ «حفظ» معطّل أثناء الحفظ.
   | open items L: Ask SAFAR settings saved per user — on a phone. The model and the Ollama address are the server's:
   read-only (the secondary field colour) with who sets them; «not saved yet» under the reply section; the save error in
   place of «saved»; «save» disabled while saving.
   ===================================================================== */
.aiset-m .aiset-field input[readonly] {
    background: var(--home-surface-2, #f3f5f9);
    color: var(--home-text-2, #4f5b6d);
    cursor: default;
}

    .aiset-m .aiset-field input[readonly]:focus { border-color: var(--home-chip-border, #d5dce7); box-shadow: none; }

.aiset-m .aiset-hint { color: var(--home-text-2, #4f5b6d); font-size: 12px; line-height: 1.5; }

.aiset-m .aiset-note { margin: 0; padding: 0 6px; color: var(--home-text-2, #4f5b6d); font-size: 12px; line-height: 1.6; }

.aiset-m .aiset-error {
    flex: 1 1 auto;
    color: var(--home-danger-text, #9f1d14);
    font-size: 13px;
    font-weight: 600;
}

.aiset-m .aiset-save:disabled { opacity: .6; cursor: default; }

/* =====================================================================
   البنود المفتوحة (م): تأكيد الاطلاع على القرارات والتعاميم المنشورة
   - بطاقة «المنشورة» على الهاتف (MessageCard): «✓ تم تأكيد الاطلاع» (أخضر) / «مطلوب تأكيد الاطلاع» (كهرمانى) — نفس ألوان
     .mcr-doc-state، والنقطة والخط العريض كغير المقروءة؛ «منشوراتي»: «اطّلع n من m» (محايد) (.mcr-doc-ack)
   - للناشر فى تبويب «تفاصيل النشر» (RecordReadAckList، سطح المكتب والهاتف): العنوان والعدد، من اطّلع ومتى، ومن لم يطّلع
     خلف زر (.rra, .rra-*؛ .rra.is-m = الهاتف: لمسات 44px)
   الألوان: --home-* (قيم الداكن فى darkOverrid.css، لا توكن جديد)؛ لا حركة.
   | open items (M): read acknowledgement of published decisions / circulars — the phone's «published» card (confirmed / required,
   the .mcr-doc-state colours; the dot and bold subject as unread; «my publications»: n of m), and the publisher's list in the
   «publish details» tab (desktop and phone; .rra.is-m = phone, 44px touch targets). --home-* tokens only; no motion.
   ===================================================================== */
.mcr-doc-ack {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .mcr-doc-ack svg { flex: none; width: 14px; height: 14px; }

/* ---- للناشر: من اطّلع | for the publisher: who confirmed ---- */
.rra {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--home-border, #e3e8f0);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
}

.rra-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 8px;
}

.rra-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--home-text, #0f1b2d);
}

.rra-sum {
    font-size: 13px;
    font-weight: 600;
    color: var(--home-tone-green, #0b5c55);
}

.rra-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--home-text-2, #4f5b6d);
}

.rra-note--error { color: var(--home-danger-text, #9f1d14); font-weight: 600; }

.rra-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

    .rra-list[hidden] { display: none; }

.rra-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 0;
    border-top: 1px solid var(--home-divider, #e6eaf0);
}

    .rra-list > .rra-row:first-child { border-top: 0; }

.rra-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--home-tone-green-bg, #e6f4f1);
    color: var(--home-tone-green, #0b5c55);
}

    .rra-ic svg { width: 16px; height: 16px; }

.rra-ic--wait {
    background: var(--home-tone-amber-bg, #fff3d6);
    color: var(--home-tone-amber, #7a4a00);
}

.rra-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.rra-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--home-text, #0f1b2d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rra-sub {
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rra-date {
    flex: none;
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
    white-space: nowrap;
}

.rra-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
    padding: 6px 12px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 10px;
    background: var(--home-surface-2, #f5f7fb);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

    .rra-toggle:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* سهم رأسى (لأسفل مغلقاً، لأعلى مفتوحاً) — نفس الاتجاه فى العربية والإنجليزية | a vertical chevron (down closed, up open) — the same in both directions */
.rra-caret {
    flex: none;
    width: 8px;
    height: 8px;
    margin-block-start: -4px;
    border-style: solid;
    border-color: currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.rra-toggle.is-open .rra-caret { margin-block-start: 4px; transform: rotate(-135deg); }

.rra-list--pending { margin-top: 4px; }

/* الهاتف: لمسات 44px والتاريخ تحت الاسم عند الضيق | phone: 44px targets, the date under the name when narrow */
.rra.is-m { padding: 12px; }

.rra.is-m .rra-toggle { min-height: 44px; }

@media (max-width: 420px) {
    .rra.is-m .rra-row { flex-wrap: wrap; }
    .rra.is-m .rra-date { flex-basis: 100%; padding-inline-start: 38px; }
}

/* =====================================================================
   البنود المفتوحة (ن): الحضور والانصراف — LoginAndLogOut على الهاتف
   - بالتناوب: الحركة التالية فقط مفعّلة؛ الزر الثانى للحركة المسجّلة الأخيرة («حضور ✓» / «انصراف ✓») معطّل بلون مقروء
     (كان شفافاً 60% حين يُعطَّل مؤقتاً، وهو الآن حالة دائمة تحمل معلومة) (.tacm-btn.is-second.is-done)
   - ساعات العمل الصافية وتحتها «الاستراحات 45 د» عند وجود استراحة (.tacm-breaks)
   الألوان: --home-* (قيم الداكن فى darkOverrid.css، لا توكن جديد)؛ لا حركة.
   | open items (N): attendance on a phone — alternation: only the next punch is on; the second button for the last recorded punch
   («checked in ✓» / «checked out ✓») is off in a readable colour (it was 60% transparent as a passing state, now it is a lasting one
   that carries information); the net working hours with «breaks 45 min» under them when there is a break.
   --home-* tokens only; no motion.
   ===================================================================== */
.tacm-btn.is-second.is-done:disabled {
    opacity: 1;
    border-style: dashed;
    color: var(--home-tone-green, #0b5c55);
}

.tacm-facts .tacm-breaks {
    margin-top: 2px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 11px;
    line-height: 1.35;
    font-feature-settings: 'tnum';
}

/* =====================================================================
   البنود المفتوحة (س): إصلاحات
   - زر الإغلاق × فى القوائم السفلية المشتركة (MobileSheet) 44px على الهاتف / اللمس (كان 40px إلا فى صفحات بعينها)
   - صفحات الطلبات على الهاتف: شريط تبويبات الوحدات (Syncfusion e-tab-header) كان أعرض من الشاشة بـ 16px (عرض 100% + حشوة) —
     يُحسب بحشوته فلا تمرير أفقى
   لا لون جديد، لا حركة.
   | open items (O): fixes — the shared sheets' × is 44px on phones / touch screens (was 40px outside a few pages); the request
   pages' unit tab strip was 16px wider than the screen (100% + padding) — its padding now counts in its width.
   ===================================================================== */
@media (max-width: 1024px), (pointer: coarse) {
    .msheet .msheet-close { width: 44px; height: 44px; }
}

.reql .rql-root .rql-tabs.e-tab > .e-tab-header {
    box-sizing: border-box;
    max-width: 100%;
}

/* =====================================================================
   البنود المفتوحة (ف): مكتب البريد والقرارات والتعاميم
   - بطاقة الصادر فى مكتب البريد: «عبر البريد الإلكتروني» — طريقة التصدير من RecordToThirdPartUser.ExportedWay بعد التصدير
     (.mcr-post-way)
   - «الكل» فى أنواع «المنشورة» يستعمل أقراص الأنواع الموجودة (.mcr-qf--pill) — لا شكل جديد
   - مساحة لمس الأقراص فى شرائط الفلاتر 44px (الشكل 32px كما هو) | the filter strips' chips: a 44px tap area (the 32px look unchanged)
   الألوان: --home-* فقط؛ لا حركة.
   | open items (Q): the post office's outgoing card «via e-mail» (the export way, after the export); «all» in the published types
   uses the existing pills. --home-* only; no motion.
   ===================================================================== */
.mcr-post-way {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--home-text-2, #4f5b6d);
}

    .mcr-post-way svg { flex: none; }

    .mcr-post-way > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* لمس ≥44px دون تغيير الشكل (الشريط 52px) | a ≥44px tap area without changing the look (the strip is 52px) */
.mcr-filters .mcr-qf { position: relative; }

    .mcr-filters .mcr-qf::after {
        content: "";
        position: absolute;
        inset: -7px 0;   /* 30px داخل الحد + 14 = 44px | 30px inside the border + 14 = 44px */
    }

/* =====================================================================
   البنود المفتوحة (ص): عرض المعاملة على الهاتف — ملخص سفر الذكي المحفوظ (.rais، داخل «التفاصيل») وتبويب «ملاحظات» (.rnp)
   - .rais مكان زر الملخص السابق: بطاقة بنفسجية (--home-ai-bg / --home-ai-text) بالنص، «آخر تحديث»، سطر «توجيهات جديدة»، وزرا
     «إنشاء / تحديث الملخص» و«اسأل سفر» (44px)
   - .rnp: ملاحظتي الخاصة — النص أو حقل الكتابة، العدّاد، حفظ / تعديل / حذف بتأكيد (44px)
   الألوان: --home-* فقط بقيم الوضع الفاتح احتياطاً؛ لا حركة.
   | open items (R): the phone's transaction view — SAFAR's stored smart summary (.rais, in «details») and the «notes» tab (.rnp).
   --home-* only with the light values as fallbacks; no motion.
   ===================================================================== */
.mvm-card.rais {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--home-ai-bg, #f1ecfd);
    border-color: transparent;
}

.rais-head { display: flex; align-items: center; gap: 6px; }

.rais-ic { flex: none; display: flex; color: var(--home-ai-text, #5b21b6); }

    .rais-ic svg { width: 18px; height: 18px; }

.rais-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--home-ai-text, #5b21b6);
}

.rais-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--home-text, #0f1b2d);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.rais-hint,
.rais-muted,
.rais-meta {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--home-text-2, #4f5b6d);
}

.rais-stale {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-tone-amber, #7a4a00);
}

.rais-error,
.rnp-error {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-tone-red, #9f1d14);
}

.rais-actions,
.rnp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-block-start: 2px;
}

.rais-btn,
.rnp-btn {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rais-btn { color: var(--home-ai-text, #5b21b6); }

    .rais-btn.rais-btn--main {
        background: var(--home-solid-purple, #5b21b6);
        border-color: var(--home-solid-purple, #5b21b6);
        color: var(--home-hero-text, #ffffff);
    }

    .rais-btn:disabled,
    .rnp-btn:disabled { opacity: .6; cursor: default; }

    .rais-btn:focus-visible,
    .rnp-btn:focus-visible,
    .rnp-input:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

/* ── ملاحظات | notes ── */
.rnp { padding: 2px 0 12px; }

.mvm-card.rnp-card { display: flex; flex-direction: column; gap: 8px; }

.rnp-head { display: flex; align-items: center; gap: 6px; }

.rnp-ic { flex: none; display: flex; color: var(--home-text-2, #4f5b6d); }

    .rnp-ic svg { width: 16px; height: 16px; }

.rnp-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--home-text, #0f1b2d);
}

.rnp-hint,
.rnp-meta,
.rnp-count,
.rnp-status {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--home-text-2, #4f5b6d);
}

.rnp-status--done { color: var(--home-tone-green, #0b5c55); font-weight: 600; }

.rnp-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--home-text, #0f1b2d);
}

.rnp-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 132px;
    padding: 10px 12px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
}

    .rnp-input::placeholder { color: var(--home-text-2, #4f5b6d); }

.rnp-count { text-align: end; font-variant-numeric: tabular-nums; }

.rnp-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--home-text, #0f1b2d);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.rnp-confirm {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--home-tone-red, #9f1d14);
}

.rnp-btn.rnp-btn--main {
    background: var(--home-accent-strong, #1d4ed8);
    border-color: var(--home-accent-strong, #1d4ed8);
    color: var(--home-hero-text, #ffffff);
}

.rnp-btn.rnp-btn--danger {
    background: var(--home-tone-red, #9f1d14);
    border-color: var(--home-tone-red, #9f1d14);
    color: var(--home-surface, #ffffff);
}

.rnp-btn.rnp-btn--danger-outline { color: var(--home-tone-red, #9f1d14); }

/* =====================================================================
   البنود المفتوحة (ق): عرض المعاملة على الهاتف — صفوف «إجراءات المعاملة» فى قائمة الإجراءات (نقل إلى مجلد، إضافة إلى مهامي،
   سجل التسليم) تستعمل MobileSheetItem كما هو؛ هنا فقط سطر الحالة فى قائمة المجلدات (.mvm-sheet-note)، وزر «مسح ضوئي بالكاميرا»
   لمرفق جديد فى الخطوة 2 من نموذج المعاملة (.me-scan-att، بشكل زر الخطوة 1 نفسه).
   الألوان: --home-* فقط؛ لا حركة.
   | open items (S): the phone's transaction view — the sheet's «transaction actions» rows use MobileSheetItem as is; here only the
   folders sheet's status line and the step-2 «scan with the camera» button (the step-1 button's look). --home-* only; no motion.
   ===================================================================== */
.mvm-sheet-note {
    margin: 0;
    padding: 14px 6px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--home-text-2, #4f5b6d);
}

.me-m .me-mdoc-main.me-scan-att {
    width: 100%;
    margin: 0 0 12px;
}

/* =====================================================================
   البنود المفتوحة (ر): ملاحظاتى الخاصة على ملف PDF فى عارض المرفق على الهاتف (ViewAttachedGeneral بـ MobileView).
   «تعليق» أول أدوات الشريط كما فى التصميم (مع عدد ملاحظاتى)، وشريط الملاحظات: سطر الحالة ثم نص / تظليل / قلم / تراجع / حذف / تم.
   العارض داكن دائماً فى الوضعين (المرحلة 5د)، فالألوان من رموزه --vag-* و--home-accent المعرّفة داخله؛ الرمز الجديد --vag-danger
   هنا مع رموزه (لا علاقة له بالوضع الداكن العام). لا حركة.
   | open items (T): my private notes on a PDF in the phone's attachment viewer. «comment» first in the bar as in the design (with my
   notes' count), and the notes bar: the state line, then text / highlight / pen / undo / delete / done. The viewer is always dark in
   both themes (phase 5d), so the colours come from its --vag-* tokens and the --home-accent it defines; the new --vag-danger lives
   here with them (unrelated to the global dark mode). No motion.
   ===================================================================== */
.vag-m {
    --vag-danger: #ffb4ab;        /* 9.6:1 on --vag-bar */
    --vag-on-accent: #10161f;     /* 8.4:1 on --home-accent */
}

/* الشريط العادى مخفى أثناء الملاحظات | the normal bar is hidden while the notes are open */
.vag-m .vag-mbar[hidden] { display: none; }

/* «تعليق» وعدد ملاحظاتى | «comment» and my notes' count */
.vag-m .vag-mtool-ic { position: relative; }

.vag-m .vag-mtool-badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--home-accent);
    color: var(--vag-on-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.vag-m button.vag-mtool:disabled {
    color: var(--vag-muted);
    cursor: default;
    background: transparent;
}

/* سطر الحالة فوق شريط الملاحظات | the state line above the notes bar */
.vag-m .vag-mnotes {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 16px 2px;
    background: var(--vag-bar);
    color: var(--vag-muted);
    font-size: 12px;
    line-height: 1.6;
}

.vag-m .vag-mnotes-hint { flex: 1 1 200px; min-width: 0; }

.vag-m .vag-mnotes-state { color: var(--vag-text); font-weight: 600; }

    .vag-m .vag-mnotes-state.is-failed { color: var(--vag-danger); }

.vag-m .vag-mnotes-retry {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--vag-danger);
    border-radius: 10px;
    background: transparent;
    color: var(--vag-danger);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .vag-m .vag-mnotes-retry:focus-visible { outline: 2px solid var(--home-accent); outline-offset: 2px; }

/* شريط الملاحظات: ست أدوات بعرض الشاشة | the notes bar: six tools across the screen */
.vag-m .vag-mbar.vag-mbar--notes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding-top: 6px;
}

    .vag-m .vag-mbar--notes .vag-mtool {
        min-width: 0;
        padding: 0 2px;
        font-size: 11px;
        white-space: nowrap;
    }

    .vag-m .vag-mbar--notes .vag-mtool.is-on {
        background: var(--vag-surface);
        color: var(--home-accent);
        box-shadow: inset 0 0 0 2px var(--home-accent);
    }

    .vag-m .vag-mbar--notes .vag-mtool--done { color: var(--home-accent); }

/* =====================================================================
   البنود المفتوحة (ش): «بانتظار موافقتي · الكل» على الهاتف (MyRequest) — «موافقة» / «رفض» تحت بطاقة طلب حضور (.reqa-decide)،
   تفتح صفحة نوعه على تبويب الطلب ثم نافذة قرار بطاقته نفسها؛ وتنبيه ما تعذّر فوق صفحة النوع (.reqa-notice). السطر «← التالية» على
   سطر المرحلة يستعمل .req-m-step / .reqa-step كما هما. الألوان: --home-* فقط؛ لا حركة.
   | open items (U): «awaiting my approval · all» on the phone — «approve» / «reject» under an attendance request's card, opening its
   type's page on the request's tab and then its card's own decision dialog; the notice above the type's page. --home-* only; no motion.
   ===================================================================== */
.reqa-decide {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

    .reqa-decide button {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
        margin: 0;
        padding: 0 12px;
        border-radius: 12px;
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

        .reqa-decide button:focus-visible {
            outline: 2px solid var(--home-accent, #1d4ed8);
            outline-offset: 2px;
        }

    .reqa-decide .reqa-approve {
        border: 0;
        background: var(--home-solid-green, #0f766e);
        color: var(--home-hero-text, #ffffff);
    }

    .reqa-decide .reqa-reject {
        border: 1px solid currentColor;
        background: var(--home-surface, #ffffff);
        color: var(--home-tone-red, #9f1d14);
    }

.reqa-decide-ic { display: inline-flex; }

    .reqa-decide-ic svg { display: block; width: 18px; height: 18px; }

.reqa-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 6px 8px;
    padding: 4px;
    padding-inline-start: 14px;
    padding-inline-end: 4px;
    border-radius: 12px;
    background: var(--home-tone-blue-bg, #e7eefc);
    color: var(--home-tone-blue, #1d4ed8);
    font-size: 13px;
    line-height: 1.6;
}

.reqa-notice-text { flex: 1 1 auto; min-width: 0; padding: 8px 0; overflow-wrap: anywhere; }

.reqa-notice-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

    .reqa-notice-close svg { display: block; width: 18px; height: 18px; }

    .reqa-notice-close:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

/* =====================================================================
   البنود المفتوحة (ت) — الدردشات (التصميم: الشاشات 13 و20 و21):
   • الرسالة الصوتية على الهاتف: زر تشغيل 44px، موجة من الملف نفسه، والمدة (chat-voice.js)؛ دون الملف أو لملف لا يقرؤه المتصفح
     يبقى مشغّل المتصفح كما كان (data-state="fallback")؛
   • «في مكالمة» بجانب الاسم فى القائمة وفى رأس المحادثة؛
   • نقطة «مكالمة جارية» على زر الاتصال فى الشريط العلوى (MobileCallsButton)؛
   • سطح المكتب: عدد غير المقروءة فى كل دردشة (مكان النقطة) — زر الاتصال فى رأس المحادثة هو زر رأس المحادثة نفسه.
   | open items round V — chats (the board's screens 13, 20 and 21): the phone's voice message (a 44px play button, a waveform from
   the file itself and the duration — chat-voice.js; without the script, or for a file the browser cannot read, the browser's own
   player stays as before: data-state="fallback"); «in a call» by the name in the list and in the thread header; the «call in
   progress» dot on the top bar's video button (MobileCallsButton); the desktop: each chat's unread count instead of the dot —
   the thread header's call button is a plain header button. Colours: --home-* (light fallbacks); no new token; no motion.
   ===================================================================== */

/* ---- 21: الرسالة الصوتية | the voice message ---- */
.cht-root.cht-m .chtm-voice {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 236px;
    max-width: 100%;
}

    /* قبل تحميل الملف أو بدونه: مشغّل المتصفح | before the script loads, or without it: the browser's player */
    .cht-root.cht-m .chtm-voice > .chtm-voice-play,
    .cht-root.cht-m .chtm-voice > .chtm-voice-wave,
    .cht-root.cht-m .chtm-voice > .chtm-voice-time { display: none; }

html[data-chtm-voice-on] .cht-root.cht-m .chtm-voice:not([data-state="fallback"]) > .chtm-voice-play { display: inline-flex; }
html[data-chtm-voice-on] .cht-root.cht-m .chtm-voice:not([data-state="fallback"]) > .chtm-voice-wave { display: flex; }
html[data-chtm-voice-on] .cht-root.cht-m .chtm-voice:not([data-state="fallback"]) > .chtm-voice-time { display: inline-block; }
html[data-chtm-voice-on] .cht-root.cht-m .chtm-voice:not([data-state="fallback"]) > audio { display: none; }

.cht-root.cht-m .chtm-voice-play {
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--home-solid-green, #0f766e);
    color: #ffffff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .cht-root.cht-m .chtm-voice-play:focus-visible {
        outline: 2px solid var(--home-accent, #1d4ed8);
        outline-offset: 2px;
    }

    .cht-root.cht-m .chtm-voice-ic { display: inline-flex; }
    .cht-root.cht-m .chtm-voice-ic svg { display: block; width: 16px; height: 16px; }
    .cht-root.cht-m .chtm-voice-ic.is-pause,
    .cht-root.cht-m .chtm-voice[data-playing="1"] .chtm-voice-ic.is-play { display: none; }
    .cht-root.cht-m .chtm-voice[data-playing="1"] .chtm-voice-ic.is-pause { display: inline-flex; }

/* الموجة: الوقت يجرى من اليسار إلى اليمين فى اللغتين (شريط تقدم الوسائط لا يُعكس) | the bars: time runs left to right in both
   languages (a media progress bar is not mirrored) */
.cht-root.cht-m .chtm-voice-wave {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    align-items: center;
    gap: 2px;
    direction: ltr;
    cursor: pointer;
}

    .cht-root.cht-m .chtm-voice-wave > span {
        flex: 1 1 0;
        min-width: 2px;
        max-width: 4px;
        height: 30%;
        border-radius: 2px;
        background: color-mix(in srgb, var(--home-text-2, #4f5b6d) 75%, transparent);
    }

        .cht-root.cht-m .chtm-voice-wave > span.is-played { background: var(--home-call-text, #0b5c55); }

.cht-root.cht-m .chtm-voice-time {
    flex: none;
    min-width: 30px;
    color: var(--home-text-2, #4f5b6d);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: end;
}

/* ---- 20 / 21: «في مكالمة» | «in a call» ---- */
.chtm-incall {
    flex: none;
    display: inline-flex;
    color: var(--home-call-text, #0b5c55);
}

    .chtm-incall svg { width: 15px; height: 15px; }

.cht-root.cht-m .cht-head-presence.chtm-head-incall {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--home-call-text, #0b5c55);
    font-weight: 600;
}

    .cht-root.cht-m .cht-head-presence.chtm-head-incall svg { flex: none; width: 14px; height: 14px; }

/* ---- 13: نقطة «مكالمة جارية» على زر الاتصال | the «call in progress» dot on the video button ---- */
.mtb .mtb-btn--call { position: relative; }

.mtb .mtb-live {
    position: absolute;
    top: 7px;
    inset-inline-end: 7px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--home-surface, #ffffff);
    border-radius: 50%;
    box-sizing: content-box;
    background: var(--home-success-text, #15803d);
    pointer-events: none;
}

/* ---- سطح المكتب: عدد غير المقروءة فى كل دردشة (كما على الهاتف) | the desktop: each chat's unread count (as on the phone) ---- */
.cht-root:not(.cht-m) .chtm-count {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    box-sizing: border-box;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

    .cht-root:not(.cht-m) .chtm-count.is-muted {
        background: var(--home-text-2, #4f5b6d);
        color: var(--home-surface, #ffffff);
    }

/* =====================================================================
   البنود المفتوحة (ث) — «اسأل سفر» (التصميم: الشاشات 22–25):
   • الرأس: «اسأل سفر · الموديل ⌄» يفتح قائمة الموديلات المثبّتة على خادم Ollama (.aim-title-btn, .aim-model*, .aim-models*)؛
   • تحت الرد: إعادة التوليد، 👍 / 👎، القراءة الصوتية (.aim-tool.is-on = المختار / تُقرأ الآن)، وإعادة المحاولة بعد خطأ (.aim-retry)؛
   • السجل: تثبيت المحادثة (.aim-side-pin) ومجموعة «المثبّتة» أولاً؛
   • الإعدادات: الموديل (.aiset-select)، لغة الرد وأسلوبه (.aiset-seg*)، حذف كل المحادثات بعد تأكيد (.aiset-danger, .aiset-confirm*).
   | open items round W — Ask SAFAR (the board's screens 22–25): the header's model choice, regenerate / 👍 👎 / read aloud and
   «try again», pinning in the history, the settings' model / reply language / style / «delete all». Colours: --home-* (light
   fallbacks); no new token; no motion.
   ===================================================================== */

/* ---- 22: «اسأل سفر · الموديل ⌄» | the title with the model ---- */
/* the button needs the room of the model's name: the balancing space beside the title is halved (the title stays near the centre) */
.chat-container.aim .mph.aim-head .aim-title { display: flex; justify-content: center; padding-inline-end: 20px; }

.chat-container.aim .aim-title-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .chat-container.aim .aim-title-text { flex: none; font-size: 16px; font-weight: 700; white-space: nowrap; }
    .chat-container.aim .aim-model { min-width: 0; overflow: hidden; color: var(--home-text-2, #4f5b6d); font-size: 13px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
    .chat-container.aim .aim-title-chev { flex: none; display: inline-flex; color: var(--home-text-2, #4f5b6d); }
    .chat-container.aim .aim-title-chev svg { width: 16px; height: 16px; }
    .chat-container.aim .aim-title-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* the sheet of models (MobileSheet) */
.aim-models { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 6px; }

.aim-models-list { display: flex; flex-direction: column; gap: 2px; }

.aim-model-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .aim-model-opt.is-on { background: var(--home-ai-bg, #f1ecfd); color: var(--home-ai-text, #5b21b6); font-weight: 600; }
    .aim-model-opt:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: -2px; }
    .aim-model-opt:disabled { opacity: .6; cursor: default; }

.aim-model-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.aim-models[dir="rtl"] .aim-model-name { text-align: right; }
.aim-models[dir="ltr"] .aim-model-name { text-align: left; }
.aim-model-def { flex: none; color: var(--home-text-2, #4f5b6d); font-size: 12px; font-weight: 400; }
.aim-model-opt.is-on .aim-model-def { color: var(--home-ai-text, #5b21b6); }
.aim-model-check { flex: none; display: inline-flex; width: 18px; }
.aim-model-check svg { width: 18px; height: 18px; }
.aim-models-note { margin: 0; padding: 12px; color: var(--home-text-2, #4f5b6d); font-size: 13px; line-height: 1.6; }
.aim-models-error { margin: 0; padding: 0 12px; color: var(--home-tone-red, #9f1d14); font-size: 13px; }

/* ---- 22 / 24: الأدوات تحت الرد | the answer's tools ---- */
.chat-container.aim .aim-tool.is-on { color: var(--home-ai-text, #5b21b6); }

.chat-container.aim .aim-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 16px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 22px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .chat-container.aim .aim-retry svg { width: 16px; height: 16px; }
    .chat-container.aim .aim-retry:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* ---- 23: تثبيت المحادثة | pinning a chat ---- */
.sidebar.aim .aim-side-pin { color: var(--home-text-2, #4f5b6d); }
.sidebar.aim .aim-side-pin.is-on { color: var(--home-ai-text, #5b21b6); }
.sidebar.aim .aim-side-pin svg { width: 18px; height: 18px; }

/* ---- 25: الإعدادات | the settings ---- */
.aiset-m .aiset-select {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--home-chip-border, #d5dce7);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font: inherit;
    font-size: 14px;
    outline: none;
}

    .aiset-m .aiset-select:focus { border-color: var(--home-accent, #1d4ed8); box-shadow: 0 0 0 3px var(--home-selected, #e7eefc); }

.aiset-m .aiset-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--home-chip, #e9edf3);
}

.aiset-m .aiset-seg-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--home-text-2, #4f5b6d);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .aiset-m .aiset-seg-btn.is-on {
        background: var(--home-surface, #ffffff);
        color: var(--home-ai-text, #5b21b6);
        font-weight: 700;
        box-shadow: 0 1px 4px rgba(15, 27, 45, .12);
    }

    .aiset-m .aiset-seg-btn:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 1px; }

.aiset-m .aiset-danger,
.aiset-m .aiset-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--home-tone-red, #9f1d14);
    border-radius: 12px;
    background: transparent;
    color: var(--home-tone-red, #9f1d14);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .aiset-m .aiset-danger svg { width: 18px; height: 18px; }
    .aiset-m .aiset-danger.is-solid { background: var(--home-tone-red-bg, #fdecea); }
    .aiset-m .aiset-cancel { border-color: var(--home-chip-border, #d5dce7); background: var(--home-surface, #ffffff); color: var(--home-text, #0f1b2d); }
    .aiset-m .aiset-danger:focus-visible,
    .aiset-m .aiset-cancel:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }
    .aiset-m .aiset-danger:disabled,
    .aiset-m .aiset-cancel:disabled { opacity: .6; cursor: default; }

.aiset-m .aiset-confirm-text { margin: 0; color: var(--home-text, #0f1b2d); font-size: 13px; line-height: 1.6; }
.aiset-m .aiset-confirm { display: flex; flex-wrap: wrap; gap: 8px; }

/* =====================================================================
   المرحلة 20: خلاصة الرئيسية والاستطلاع على الهاتف (شاشة 13 المحدّثة و59)
   | phase 20: the home feed and the poll on a phone (updated screen 13 and 59)
   • بطاقة المنشور المشتركة MobilePostCard: الصورة زرّ يفتح بطاقة الطرف (PostPartyTip)، الجسم زرّ يفتح المحتوى، صفوف الحقائق،
     الشارات، والتذييل: ثلاثة أوامر بأيقونة ونص + «⋯» (.mhm-post-body, .mhm-post-facts, .mhm-post-tags, .mhm-post-foot, .mhm-post-act*, .mhm-post-more)
   • قائمة «المزيد» (.mhm-sheet-ctx, .mhm-sheet-item, .mhm-sheet-note)، زر «منشورات جديدة» (.mhm-feed-new*)، كرتا التحميل (.mhm-post--skel)
   • بطاقة الاستطلاع (.mpoll*) بلون النظام (--rz-primary) كصفحات الاستطلاعات
   الألوان من --home-* (والقيمة الفاتحة احتياط) ولا توكن جديد؛ الحركة الوحيدة الموجودة (mhm-pulse، post-live-in) تتوقف مع reduced-motion
   | colours from --home-* (light fallbacks), no new token; the only motion (the existing mhm-pulse, post-live-in) stops under reduced motion
   ===================================================================== */

/* ---- الرأس: الصورة زرّ لبطاقة الطرف | the head: the avatar is a button for the party's card ---- */
.mhm-post-head .ppt-host { flex: none; display: inline-flex; }

.mhm-post-head button.mhm-post-avatar {
    width: 44px;
    height: 44px;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .mhm-post-head button.mhm-post-avatar:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* ---- الجسم: زرّ واحد يفتح المحتوى بملء الشاشة | the body: one button that opens the content full screen ---- */
.mhm-post-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .mhm-post-body:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 3px; }
    .mhm-post-body[disabled] { cursor: default; }
    div.mhm-post-body { cursor: default; }
    .mhm-post-body > .mhm-post-subject,
    .mhm-post-body > .mhm-post-note,
    .mhm-post-body > .mhm-post-preview { display: block; }
    .mhm-post-body > .mhm-post-note { display: -webkit-box; }

.mhm-post-facts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--home-surface-2, #f5f7fb);
}

.mhm-post-fact { display: flex; gap: 8px; font-size: 13px; line-height: 1.6; }
.mhm-post-fact-key { flex: none; min-width: 70px; color: var(--home-text-2, #4f5b6d); }
.mhm-post-fact-val { flex: 1; min-width: 0; font-weight: 600; color: var(--home-text, #0f1b2d); overflow-wrap: anywhere; }

.mhm-post-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.7;
    color: var(--home-text-2, #4f5b6d);
    overflow-wrap: anywhere;
}

.mhm-post-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.mhm-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

/* ---- التذييل: ثلاثة أوامر + «⋯» | the footer: three commands + «⋯» ---- */
.mhm-post-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--home-divider, #eef1f6);
}

/* أعرض الكلمات تحدّد أقل عرض للزر، والباقي يتوزع بالتساوي | the longest word sets a button's least width, the rest is shared */
.mhm-post-act {
    flex: 1 1 0;
    min-width: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 4px;
    border: 1px solid var(--home-divider, #e3e8f0);
    border-radius: 12px;
    background: transparent;
    color: var(--home-text, #334155);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .mhm-post-act .rzi { flex: none; order: 0; font-size: 18px; }
    /* النص الطويل يلتف لسطرين بدل القصّ | a long label wraps to two lines instead of being cut */
    .mhm-post-act-text {
        min-width: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        order: 2;
        line-height: 1.2;
        text-align: center;
        overflow-wrap: break-word;
    }
    .mhm-post-act:hover { background: var(--home-chip, #f1f4f9); }
    .mhm-post-act:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }
    .mhm-post-act[disabled] { opacity: .6; cursor: default; }

    .mhm-post-act.is-primary { border-color: transparent; background: var(--home-accent-strong, #1d4ed8); color: #ffffff; }
    .mhm-post-act.is-sign    { border-color: transparent; background: var(--home-solid-purple, #6d28d9); color: #ffffff; }
    .mhm-post-act.is-ok      { border-color: transparent; background: var(--home-solid-green, #0f766e); color: #ffffff; }
    .mhm-post-act.is-no      { border-color: var(--home-tone-red-bg, #fdeceb); color: var(--home-tone-red, #9f1d14); }
    .mhm-post-act.is-primary:hover,
    .mhm-post-act.is-sign:hover,
    .mhm-post-act.is-ok:hover { filter: brightness(1.08); }

/* العدّاد على طرف الأيقونة (الترتيب المرئى فقط؛ قارئ الشاشة يقرأ النص ثم العدد) | the count on the icon's corner (visual order only) */
.mhm-post-act-badge {
    flex: none;
    order: 1;
    align-self: flex-start;
    margin-top: 4px;
    margin-inline-start: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--home-badge, #c2410c);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--home-surface, #ffffff);
}

.mhm-post-more {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--home-divider, #e3e8f0);
    border-radius: 12px;
    background: transparent;
    color: var(--home-text, #334155);
    cursor: pointer;
}

    .mhm-post-more svg { width: 20px; height: 20px; }
    .mhm-post-more:hover { background: var(--home-chip, #f1f4f9); }
    .mhm-post-more:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

/* ---- قائمة «المزيد» (شاشة 59) | the «more» sheet (screen 59) ---- */
.mhm-sheet-ctx {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px 8px;
}

    .mhm-sheet-ctx .mhm-post-avatar { width: 40px; height: 40px; }
    .mhm-sheet-ctx-text { min-width: 0; font-size: 12px; color: var(--home-text-2, #4f5b6d); overflow-wrap: anywhere; }

.msheet-item.mhm-sheet-item .msheet-item-icon { align-items: center; justify-content: center; }
.msheet-item.mhm-sheet-item .msheet-item-icon .rzi { font-size: 20px; }

.mhm-sheet-note {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
    color: var(--home-text-2, #4f5b6d);
}

/* ---- منشور وصل للتو: إطار ثابت حتى التحديث التالى | a post that just arrived: a frame until the next refresh ---- */
.post-live-new > .mhm-post {
    border-color: var(--home-accent, #1d4ed8);
    box-shadow: 0 0 0 3px var(--home-tone-blue-bg, #e7eefc);
}

/* ---- «منشورات جديدة»: يبقى أعلى الشاشة أثناء القراءة | «new posts»: stays on top of the screen while reading ---- */
.mhm-feed-new-wrap {
    position: sticky;
    top: 8px;
    z-index: 5;
    display: flex;
    justify-content: center;
    min-height: 0;
}

.mhm-feed-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 22px;
    background: var(--home-accent-strong, #1d4ed8);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--home-shadow, 0 4px 12px rgba(29, 78, 216, .25));
    cursor: pointer;
}

    .mhm-feed-new svg { width: 16px; height: 16px; }
    .mhm-feed-new:focus-visible { outline: 2px solid var(--home-text, #0f1b2d); outline-offset: 2px; }

/* ---- كرتا التحميل | the loading cards ---- */
.mhm-feed-skel { display: flex; flex-direction: column; gap: 8px; }
.mhm-post--skel { pointer-events: none; }
.mhm-post--skel .mhm-post-who { gap: 6px; }
.mhm-skel.mhm-skel-av { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.mhm-skel.mhm-skel-l1 { width: 50%; height: 10px; }
.mhm-skel.mhm-skel-l2 { width: 30%; height: 8px; }
.mhm-skel.mhm-skel-l3 { width: 85%; height: 10px; }
.mhm-skel.mhm-skel-body { height: 90px; border-radius: 12px; }
.mhm-skel.mhm-skel-btn { flex: 1; height: 40px; border-radius: 12px; }

/* =====================================================================
   بطاقة الاستطلاع على الرئيسية (PollHomeWidget / PollBallot Mobile) | the home poll card
   ===================================================================== */
.mpoll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--home-border, #e6eaf1);
    border-radius: 20px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
}

.mpoll-head { display: flex; align-items: center; gap: 8px; }

.mpoll-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--rz-primary, #1d4ed8);
    color: var(--rz-on-primary, #ffffff);
}

    .mpoll-icon svg { width: 18px; height: 18px; }

.mpoll-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mpoll-title strong { font-size: 14px; font-weight: 700; }
.mpoll-title small { font-size: 11px; color: var(--home-text-2, #4f5b6d); }

.mpoll-all {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 4px;
    color: var(--home-accent, #1d4ed8);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

    .mpoll-all:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; border-radius: 8px; }

.mpoll-q {
    color: var(--home-text, #0f1b2d);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .mpoll-q:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; border-radius: 6px; }

.mpoll-empty { margin: 0; font-size: 13px; color: var(--home-text-2, #4f5b6d); }

.mpoll-ballot { display: flex; flex-direction: column; gap: 8px; }
.mpoll-rule, .mpoll-note { font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.mpoll-alert {
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--home-tone-amber-bg, #fff3d6);
    color: var(--home-tone-amber, #7a4a00);
    font-size: 12px;
}

.mpoll-opts { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }

.mpoll-opt {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--home-divider, #d5dce7);
    border-radius: 12px;
    background: var(--home-surface, #ffffff);
    color: var(--home-text, #0f1b2d);
    font-size: 14px;
    cursor: pointer;
}

    .mpoll-opt.is-on { border: 2px solid var(--rz-primary, #1d4ed8); padding: 0 11px; }
    .mpoll-opts[disabled] .mpoll-opt { cursor: default; }

    .mpoll-input {
        position: relative;
        flex: none;
        width: 20px;
        height: 20px;
        margin: 0;
        accent-color: var(--rz-primary, #1d4ed8);
        cursor: inherit;
    }

    .mpoll-input:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }

.mpoll-opt-text { position: relative; flex: 1; min-width: 0; line-height: 1.5; padding: 10px 0; overflow-wrap: anywhere; }
.mpoll-pct { position: relative; flex: none; font-size: 13px; font-weight: 700; }

/* النتيجة: الشريط داخل الصف بلون النظام الشفاف | the result: the bar inside the row in the system colour, translucent */
.mpoll-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: color-mix(in srgb, var(--rz-primary, #1d4ed8) 14%, transparent);
}

    .mpoll-opt.is-on .mpoll-fill { background: color-mix(in srgb, var(--rz-primary, #1d4ed8) 26%, transparent); }

.mpoll-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mpoll-meta { flex: 1 1 140px; min-width: 0; font-size: 12px; color: var(--home-text-2, #4f5b6d); }

.mpoll-vote,
.mpoll-ghost {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mpoll-vote { border: 0; background: var(--rz-primary, #1d4ed8); color: var(--rz-on-primary, #ffffff); }
    .mpoll-vote[disabled] { background: var(--home-chip, #cfd6e2); color: var(--home-text-2, #4f5b6d); cursor: default; }
.mpoll-ghost { border: 1px solid var(--home-divider, #d5dce7); background: transparent; color: var(--home-text, #334155); font-weight: 600; }

.mpoll-vote:focus-visible,
.mpoll-ghost:focus-visible { outline: 2px solid var(--home-accent, #1d4ed8); outline-offset: 2px; }