/* ============================================================================
   ZyRox Engineering — mobile-first-v2.css (v1.0.0)
   الدفعة الثانية — تُحمَّل أخيرًا (بعد mobile-first-v1.css مباشرة).
   تُعالج فجوات حقيقية بقيت من الطبقات السابقة:
     1) تجاوز المحتوى الطويل داخل المحادثة: كتل الكود والجداول والصور
        (كانت تفرض تمريرًا أفقيًا للصفحة أو تقصّ المحتوى).
     2) عزل اتجاه كتل الكود اللاتينية داخل واجهة RTL (LTR isolation).
     3) بطاقة تنبيه نفاد الحصة بشكل مضغوط مطابق للصورة المرجعية
        (عنوان + سطر تجدّد + زر أساسي بارز) بدل صندوق واسع يغطي المحادثة.
     4) استكمال أهداف اللمس ‎≥44px‎ لعناصر القائمة الجانبية والسجل.
     5) حالات التركيز (focus-visible) والتباين لسهولة الوصول.
     6) احترام تفضيل تقليل الحركة (prefers-reduced-motion).
     7) اتساق الوضعين الفاتح والداكن عبر متغيّرات المظهر الحالية.
   كل القواعد مضافة (additive) وبأولوية تتجاوز الطبقات السابقة عبر نمط
   html body + صنف مضاعف + !important (نفس تقنية modern-ui.css)، دون حذف أي
   قاعدة قائمة.
   حقوق المطور ZyRox — wormgpt.cam
   ========================================================================== */

/* 1) المحتوى الطويل داخل المحادثة: تمرير داخلي بدل كسر التخطيط */
html body .chat-scroll.chat-scroll {
  overflow-x: hidden !important;
}

html body .chat-scroll pre,
html body .chat-scroll .code-block,
html body .chat-scroll [class*="code-block"] {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* 2) عزل اتجاه الكود اللاتيني داخل واجهة RTL دون كسر العربية */
html body .chat-scroll pre,
html body .chat-scroll .code-block code,
html body .chat-scroll [class*="code-block"] code {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
  white-space: pre !important;
}

html body .chat-scroll code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

html body .chat-scroll table {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}

html body .chat-scroll img,
html body .chat-scroll video {
  max-width: 100% !important;
  height: auto !important;
}

/* منع تمرير أفقي غير ضروري في الرسائل والروابط الطويلة */
html body .chat-scroll p,
html body .chat-scroll li,
html body .chat-scroll .message,
html body .chat-scroll a {
  overflow-wrap: anywhere;
}

/* 3) بطاقة تنبيه نفاد الحصة — مضغوطة ومطابقة للصورة المرجعية */
html body .quota-notice.quota-notice {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 8px auto 0 !important;
  width: min(780px, calc(100% - 32px)) !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(var(--zy-veil), 0.14) !important;
  background: rgb(var(--zy-solid)) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
  text-align: start !important;
}

html body .quota-notice.quota-notice > strong {
  font-size: 14.5px !important;
  font-weight: 650 !important;
  letter-spacing: -0.1px !important;
  color: var(--zy-text) !important;
}

html body .quota-notice.quota-notice > p {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.75 !important;
  color: var(--zy-text2) !important;
}

html body .quota-notice.quota-notice > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

html body .quota-notice.quota-notice > div > button {
  min-height: 40px !important;
  padding: 9px 16px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: 1px solid rgba(var(--zy-veil), 0.18) !important;
  color: var(--zy-text) !important;
  cursor: pointer !important;
}

html body .quota-notice.quota-notice > div > button:first-child {
  flex: 1 1 100% !important;
  background: var(--brand, var(--zy-soft)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html body .quota-notice.quota-notice > div > button:focus-visible {
  outline: 2px solid var(--zy-soft) !important;
  outline-offset: 2px !important;
}

/* 4) أهداف اللمس المتبقية ‎≥44px‎ (القائمة الجانبية والسجل ومنتقى النموذج) */
@media (max-width: 768px) {
  html body .history-row.history-row,
  html body .project-list > button,
  html body .md-sidebar-actions > button,
  html body .model-trigger.model-trigger,
  html body .sidebar-search.sidebar-search,
  html body .account-button.account-button {
    min-height: 44px !important;
  }

  html body .sidebar-new-chat > button,
  html body .new-chat-button.new-chat-button {
    min-height: 46px !important;
  }

  /* رقائق المرفقات: مساحة لمس مريحة وأسماء ملفات لا تتجاوز الشاشة */
  html body .chat-composer [class*="attach"] button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* 5) حالات التركيز والتباين (سهولة الوصول — بند 9 في المواصفة) */
html body button:focus-visible,
html body a:focus-visible,
html body input:focus-visible,
html body textarea:focus-visible,
html body select:focus-visible,
html body [tabindex]:focus-visible {
  outline: 2px solid var(--zy-soft, var(--brand)) !important;
  outline-offset: 2px !important;
}

@media (forced-colors: active) {
  html body button:focus-visible,
  html body a:focus-visible,
  html body [tabindex]:focus-visible {
    outline: 2px solid Highlight !important;
  }
}

/* 6) احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 7) اتساق الوضع الفاتح: ظل أخفّ لبطاقة التنبيه على خلفية فاتحة */
[data-theme="light"] html body .quota-notice.quota-notice,
html[data-theme="light"] body .quota-notice.quota-notice {
  box-shadow: 0 10px 30px rgba(24, 20, 34, 0.12) !important;
}