/* ============================================================
   mobile-first-v5.css — WormGPT · طبقة تصحيح للجوال
   ------------------------------------------------------------
   طبقة مضافة فوق mobile-first-v1..v4 — لا تحذف ولا تعدّل أي قاعدة سابقة.
   تُحمَّل بعدها في index.html، وتستخدم !important فقط حيث يلزم تغيير
   ترتيب التعارض (cascade) بين طبقات قائمة.

   المبدأ: تصحيح السبب الجذري لا ترقيع الأعراض.

   Attribution: ZyRox Engineering
   ============================================================ */

/* ------------------------------------------------------------
   1) خلفية الشريط الجانبي على الجوال (≤899px)
   ------------------------------------------------------------
   السبب الجذري (مُتحقَّق منه حيًّا في المتصفح):
     • responsive-workspace.css يضبط على .mobile-sidebar-backdrop
       داخل (max-width:899px): position:fixed; inset:0; z-index:65
     • ثم motion.css يضبط  .wg-ripple-host { position: relative }
       والعنصر يحمل الصنفين معًا، و motion.css أحدث في الترتيب
       ⇒ position:fixed يُلغى ويصبح relative، وخلفية الشاشة تفقد فعاليتها.
     • و pwa.css يضبط  button { min-width: 44px }
       ⇒ الزر الفارغ يصبح عنصرًا بعرض 44px داخل حاوية flex.

   الأثر قبل الإصلاح (مقيس على عرض 320px):
     • الخلفية 44×818 بدل تغطية الشاشة (318×818).
     • لا تعتيم للمحتوى خلف الشريط.
     • النقر خارج الشريط الجانبي لا يغلقه:
       elementFromPoint(16,400) كان يقع على المحتوى لا على زر الإغلاق.

   بعد الإصلاح: الخلفية تغطي الشاشة، وتُغلق عند النقر خارج الشريط.
   الشريط نفسه يبقى فوقها (z-index:70 مقابل 65).
   ------------------------------------------------------------ */
@media (max-width: 899px) {
  html body .chat-shell .mobile-sidebar-backdrop.wg-ripple-host {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    display: block !important;
    z-index: 65 !important;
    background: rgba(0, 0, 0, .42) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ------------------------------------------------------------
   2) احترام (prefers-reduced-motion) لعناصر الحركة المضافة
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html body .chat-shell .mobile-sidebar-backdrop.wg-ripple-host {
    transition: none !important;
  }
}