/* ============================================================================
   ZyRox Engineering — mobile-first-v4.css (v1.0.0)
   الدفعة الرابعة — تُحمَّل في الرأس مباشرة بعد mobile-first-v3.css.

   ملف **مُضاف بالكامل (additive)**: لا يحذف ولا يُعطّل أي قاعدة قائمة، ويعتمد
   نفس تقنية الطبقات السابقة الناجحة:
       html body .X.X { ... !important }
   مع نقاط استجابة مدفوعة بالمحتوى لا بالأجهزة:
       320 / 375 / 390 / 430 / 600 / 768 / 1024 / 1280 / 1440 / 1920

   يحمل هذا الملف ما تبقّى فعلاً من «MASTER DEVELOPMENT PROMPT — WormGPT
   Responsive UI & UX Overhaul» بعد الدفعات v1 وv2 وv3 وmodern-ui:

     1) نمط «نافذة اختيار خيار واحد» (الصور 1 و2):
        صفٌّ بعريض، علامة اختيار في **بداية السطر** (inline-start — تتصرّف
        صحيحًا في RTL وLTR)، التسمية، ثم أيقونة طرفية. يُطبَّق **فقط على عناصر
        المظهر القائمة** (مفتاح الوضع الفاتح/الداكن عبر onTheme المحفوظ، وألوان
        الواجهة عبر onAccent المحفوظ). لم تُضَف أي معالجة جديدة، ولم يُضَف
        خيار «النظام» لأن theme.js (السطر 77) يقرّر صراحةً أن الوضع الافتراضي
        داكن دائمًا ولا يتّبع تفضيل النظام. ولم يُضَف منتقي «نمط الخط» لأنه لا
        يوجد في المشروع أي معالج خط (لا fontStyle ولا data-font ولا --wg-font)،
        وإضافته تعني اختراع سلوك — وهو محظور.
     2) بنية بطاقة الخطة (الصور 6 و7): الاسم، الوصف المهدَّأ، السعر البارز،
        قائمة مزايا بعلامات صحّ مرسومة، وزر كامل العرض — كلّها من بيانات
        plansList الحقيقية (الاسم/الوصف/price/quota/models). **لم يُختَرع أي
        سعر أو خصم أو ميزة**؛ وبما أن الخادم يرسل interval:'month' وسعرًا
        شهريًا واحدًا لكل خطة (server/app.mjs السطر 209) فلم تُضَف أقراص
        «سنوي/شهري» إطلاقًا.
     3) صقل شيت اختيار النموذج (الصورة 8): الشارة، الوصف بسطر/سطرين مقطوعين
        بحسب المساحة، وعلامة الاختيار الزرقاء منقولة إلى بداية السطر — موصولة
        بقائمة focus-model القائمة نفسها (models من renderVals) لا بقائمة جديدة.
     4) القائمة الجانبية/المحادثات (الصور 9 و10 و11): ما هو موجود فعلاً فقط
        (أقسام Pinned/Today/Earlier، حقل البحث، زر محادثة جديدة، صفوف المحادثات)
        دون اختراع منتقي تصفية أو مربّعات تحديد أو شرائط زمنية نسبية لا وجود لها.
     5) حالة نفاد الحصة عند المؤلّف (الصورة 12): بطاقة مضغوطة غير حاجبة، أهداف
        لمس ≥44px، وحدّ ارتفاع داخلي على الشاشات القصيرة.
     6) الإعدادات على الهاتف: أعمدة تنقّل تُقرأ فعلًا بالعربية بدل أربعة أعمدة
        مضغوطة (الصورة 3).

   WormGPT identity / Arabic RTL / LTR parity / light+dark parity / ≥44px /
   no real emoji / no horizontal scroll / visible focus / prefers-reduced-motion
   كلّها محفوظة: كلّ ما يلي يستخدم رموز --zy-* و--wg-* القائمة، والعلامات
   مرسومة بـ border/shape لا بحرف أو إيموجي.

   حقوق المطور ZyRox — wormgpt.cam
   ========================================================================== */

/* ============================================================================
   1) نمط نافذة اختيار خيار واحد — يُطبَّق على عناصر المظهر القائمة فقط
      المصدر: settings-center.js السطر 224-227 (settings-card settings-appearance)
   ========================================================================== */

/* 1.1 «وضع العرض» — شارتان فعليتان لـ onTheme (داكن/فاتح)، تُعرضان كصفوف */
html body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  width: 100% !important;
  max-width: 560px !important;
  padding: 4px !important;
  border: 1px solid var(--wg-hair, rgba(var(--zy-veil), .09)) !important;
  border-radius: 14px !important;
  background: rgba(var(--zy-veil), .03) !important;
  box-sizing: border-box !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented .settings-seg.settings-seg {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 8px 14px !important;
  padding-inline-start: 48px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--zy-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: start !important;
  white-space: normal !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

/* حلقة/نقطة الاختيار في بداية السطر — شكل مرسوم بلا أي حرف (لا ضجيج لقارئ الشاشة) */
html body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented .settings-seg.settings-seg::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 16px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  margin-top: -10px !important;
  border: 1.7px solid rgba(var(--zy-veil), .26) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  transition: border-color .16s ease, background-color .16s ease !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented .settings-seg.settings-seg:hover {
  background: rgba(var(--zy-veil), .06) !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented .settings-seg.settings-seg.active {
  background: rgba(77, 144, 254, .12) !important;
  color: var(--zy-text) !important;
  font-weight: 650 !important;
  box-shadow: inset 0 0 0 1px rgba(77, 144, 254, .34) !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented .settings-seg.settings-seg.active::before {
  border-color: var(--wg-accent-2, #4d90fe) !important;
  background: var(--wg-accent-2, #4d90fe) !important;
  box-shadow: inset 0 0 0 3.5px rgb(var(--zy-solid)) !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented .settings-seg.settings-seg:focus-visible {
  outline: 2px solid var(--zy-soft, #4d90fe) !important;
  outline-offset: 2px !important;
}

/* 1.2 «لون الواجهة» — شارات onAccent فعليّة، تُعرض كصفوف مُسمّاة لا كشريط نقاط.
   modern-ui.css (السطر 2715-2726) كان يخفي الاسم والعلامة؛ نُعيدهما لأن
   الصورة المرجعية تُظهر التسمية صراحةً بجانب علامة الاختيار. */
html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 640px !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 52px !important;
  padding: 8px 14px !important;
  padding-inline-start: 48px !important;
  border: 1px solid var(--wg-hair, rgba(var(--zy-veil), .09)) !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--zy-text) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: start !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color:hover {
  border-color: var(--wg-hair-2, rgba(var(--zy-veil), .15)) !important;
  background: rgba(var(--zy-veil), .05) !important;
}

/* العلامة: تُعاد من display:none وتُثبَّت في بداية السطر */
html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color .settings-color-check.settings-color-check {
  display: block !important;
  position: absolute !important;
  inset-inline-start: 15px !important;
  top: 50% !important;
  width: 20px !important;
  height: 20px !important;
  margin-top: -10px !important;
  color: var(--wg-accent-2, #4d90fe) !important;
  opacity: .2 !important;
  transition: opacity .16s ease !important;
  pointer-events: none !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color .settings-color-name.settings-color-name {
  position: static !important;
  order: 2 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: auto !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  border: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--zy-text) !important;
}

/* أيقونة السطر الطرفية = دائرة اللون نفسها */
html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color .settings-color-dot.settings-color-dot {
  order: 3 !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: var(--sw) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 1px 3px rgba(0, 0, 0, .28) !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color.active,
html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color[aria-pressed="true"] {
  border-color: rgba(77, 144, 254, .42) !important;
  background: rgba(77, 144, 254, .10) !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color.active .settings-color-check,
html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color[aria-pressed="true"] .settings-color-check {
  opacity: 1 !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color.active .settings-color-dot,
html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color[aria-pressed="true"] .settings-color-dot {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3),
    0 0 0 2px rgb(var(--zy-solid)),
    0 0 0 3.5px var(--sw) !important;
}

html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color:focus-visible {
  outline: 2px solid var(--zy-soft, #4d90fe) !important;
  outline-offset: 2px !important;
}

/* ============================================================================
   2) بنية بطاقة الخطة (الصور 6 و7) — من بيانات plansList الحقيقية فقط
      المصدر: settings-center.js السطر 119 و122-123
   ========================================================================== */

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin: 14px 0 !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 18px !important;
  border: 1px solid var(--wg-hair, rgba(var(--zy-veil), .09)) !important;
  border-radius: 18px !important;
  background: rgba(var(--zy-veil), .025) !important;
  box-sizing: border-box !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile:hover {
  border-color: var(--wg-hair-2, rgba(var(--zy-veil), .15)) !important;
  background: rgba(var(--zy-veil), .045) !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile.settings-plan-current {
  border-color: rgba(77, 144, 254, .5) !important;
  background: rgba(77, 144, 254, .06) !important;
}

/* ترتيب بصريّ: شارة/الحالة، الاسم، الوصف، السعر، المزايا، ثم الزر.
   ملاحظة مقصودة: الزر يبقى آخر عنصر في DOM وفي الترتيب البصري معًا، حتى لا
   يختل ترتيب لوحة المفاتيح/قارئ الشاشة. */
html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-plan-tile-head.settings-plan-tile-head {
  order: 1 !important;
  min-height: 20px !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > h3 {
  order: 2 !important;
  margin: 0 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  line-height: 1.25 !important;
  color: var(--zy-text) !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > p.settings-bar-sub {
  order: 3 !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  color: var(--zy-text2, #b9b9b8) !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > strong.settings-plan-tile-price {
  order: 4 !important;
  margin: 4px 0 2px !important;
  font-size: clamp(26px, 6vw, 32px) !important;
  font-weight: 750 !important;
  letter-spacing: -.7px !important;
  line-height: 1.05 !important;
  color: var(--zy-text) !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > strong.settings-plan-tile-price > small {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--zy-text2, #b9b9b8) !important;
}

/* قائمة المزايا: أقراص الحصص والنماذج الحقيقية تتحوّل إلى قائمة بعلامات صحّ */
html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-plan-tile-meta,
html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-model-chips {
  order: 5 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--wg-hair, rgba(var(--zy-veil), .09)) !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-model-chips {
  order: 6 !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-plan-tile-meta > span,
html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-model-chips > .settings-model-chip {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-inline-start: 27px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--zy-text2, #b9b9b8) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
}

/* علامة الصحّ: قرص + خطّاف مرسومان (بلا حرف ولا إيموجي)، بنفس تقنية
   modern-ui.css للقائمة المعلّمة. */
html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-plan-tile-meta > span::before,
html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-model-chips > .settings-model-chip::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 3px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: rgba(77, 144, 254, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(77, 144, 254, .42) !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-plan-tile-meta > span::after,
html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-model-chips > .settings-model-chip::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 5.5px !important;
  top: 7px !important;
  width: 5px !important;
  height: 8px !important;
  border-right: 1.7px solid #6ea8fe !important;
  border-bottom: 1.7px solid #6ea8fe !important;
  transform: rotate(45deg) !important;
}

/* القرص الذهبي ×N يحتفظ بلونه الدلالي (مضاعف الاستهلاك) */
html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-model-chips > .settings-model-chip.settings-model-chip-x {
  color: #dfa63a !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-model-chips > .settings-model-chip.settings-model-chip-x::after {
  border-right-color: #dfa63a !important;
  border-bottom-color: #dfa63a !important;
}

/* زر الخطة: كامل العرض، واضح، ≥44px */
html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > button {
  order: 7 !important;
  margin-top: auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-plan-disabled {
  background: rgba(var(--zy-veil), .05) !important;
  border: 1px solid var(--wg-hair, rgba(var(--zy-veil), .09)) !important;
  color: var(--zy-text2, #b9b9b8) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* ============================================================================
   3) شيت اختيار النموذج (الصورة 8) — موصول بقائمة النماذج القائمة نفسها
      المصدر: index.html السطر 294-300 و2840-2861
   ========================================================================== */

html body .focused-model-menu.focused-model-menu .focused-model-list .focused-model-option {
  min-height: 60px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

html body .focused-model-menu.focused-model-menu .focused-model-list .focused-model-option .focused-model-title small {
  border-radius: 999px !important;
  letter-spacing: .2px !important;
  padding: 3px 9px !important;
}

/* علامة الاختيار الزرقاء تنتقل إلى بداية السطر (الصورة 8) */
html body .focused-model-menu.focused-model-menu .focused-model-option[aria-checked="true"] .focused-model-status {
  order: -1 !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  align-self: center !important;
  color: #fff !important;
  background: var(--wg-accent-2, #4d90fe) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 3px rgba(77, 144, 254, .16) !important;
}

html body .focused-model-menu.focused-model-menu .focused-model-option[aria-checked="true"] .focused-model-status:empty {
  display: none !important;
}

/* «غير متاح» تبقى نصًّا مهدَّأً لا دائرة */
html body .focused-model-menu.focused-model-menu .focused-model-option .focused-model-status.focused-model-status {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
}

html body .focused-model-menu.focused-model-menu .focused-model-option[aria-checked="true"] .focused-model-status.focused-model-status {
  font-size: 13px !important;
}

/* ============================================================================
   4) القائمة الجانبية والمحادثات (الصور 9 و10 و11)
      كلّ ما يلي يخصّ عناصر موجودة فعلاً؛ لا منتقي تصفية ولا مربّع تحديد
      ولا توقيت نسبي — لأنها غير موجودة في البنية، واختراعها ممنوع.
   ========================================================================== */

/* 4.1 عناوين الأقسام (Pinned / Today / Earlier / Quick links) */
html body .chat-sidebar.chat-sidebar [style*="text-transform: uppercase"] {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 30px !important;
  padding: 10px 10px 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  color: var(--zy-text2, #8a8a89) !important;
}

html body .chat-sidebar.chat-sidebar [style*="text-transform: uppercase"] svg {
  flex: 0 0 auto !important;
  opacity: .8 !important;
}

/* 4.2 صفوف المحادثات: هدف لمس ≥44px وقصّ أنيق للعنوان */
html body .chat-sidebar.chat-sidebar button[style*="padding-inline-end: 34px"] {
  min-height: 44px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 11px !important;
}

html body .chat-sidebar.chat-sidebar button[style*="padding-inline-end: 34px"] > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 4.3 زر «محادثة جديدة» على شكل كبسولة، وهدف لمس ≥46px */
html body .chat-sidebar.chat-sidebar > div > button {
  min-height: 46px !important;
  border-radius: 999px !important;
  padding-inline: 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

html body .chat-sidebar.chat-sidebar > div > button svg {
  flex: 0 0 auto !important;
}

/* 4.4 حقل البحث */
html body .chat-sidebar.chat-sidebar input[type="search"],
html body .chat-sidebar.chat-sidebar input:not([type]) {
  min-height: 44px !important;
  border-radius: 12px !important;
}

/* ============================================================================
   5) حالة نفاد الحصة عند المؤلّف (الصورة 12) — مضغوطة وغير حاجبة
      الأساس قائم في mobile-first-v2.css (السطر 73-131)؛ نضيف فقط ما ينقص:
      أهداف لمس ≥44px، وحدّ ارتفاع داخلي، وتمييز المتن.
   ========================================================================== */

html body .quota-notice.quota-notice {
  flex: none !important;
  max-height: 46dvh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border-inline-start: 3px solid var(--wg-accent-2, #4d90fe) !important;
  scrollbar-width: thin !important;
}

html body .quota-notice.quota-notice > strong {
  letter-spacing: -.1px !important;
  line-height: 1.5 !important;
}

@media (max-width: 768px) {
  html body .quota-notice.quota-notice > div > button {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
}

@media (max-height: 560px) {
  html body .quota-notice.quota-notice {
    max-height: 34dvh !important;
    padding: 10px 12px !important;
  }
}

/* ============================================================================
   6) الإعدادات على الهاتف — أعمدة تنقّل تُقرأ فعلًا بالعربية (الصورة 3)
      responsive-workspace.css (السطر 58) يفرض أربعة أعمدة حتى 850px، فتنكسر
      التسميات العربية الطويلة. نُدرّجها بحسب المحتوى.
   ========================================================================== */
@media (max-width: 850px) {
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout > nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-height: 34dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout > nav > button {
    min-height: 46px !important;
    padding: 8px 6px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 600px) {
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout > nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout > nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 30dvh !important;
  }
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout > nav > button {
    font-size: 12px !important;
  }
}

@media (max-width: 320px) {
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout > nav {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   7) صقل أحجام على الشاشات الكبيرة — لا يُغيّر أي منطق، فقط كبح التمدّد
   ========================================================================== */
@media (min-width: 1280px) {
  html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid {
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)) !important;
  }
  html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  }
}

@media (min-width: 1440px) {
  html body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented {
    max-width: 620px !important;
  }
}

@media (min-width: 1920px) {
  html body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid {
    grid-template-columns: repeat(auto-fit, minmax(286px, 1fr)) !important;
  }
}

/* ============================================================================
   8) توازن الوضع الفاتح للأسطح الجديدة
   ========================================================================== */
html[data-theme="light"] body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented {
  background: rgba(24, 20, 34, .035) !important;
}

html[data-theme="light"] body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented .settings-seg.settings-seg::before {
  border-color: rgba(24, 20, 34, .22) !important;
}

html[data-theme="light"] body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented .settings-seg.settings-seg.active {
  background: rgba(11, 87, 208, .10) !important;
  box-shadow: inset 0 0 0 1px rgba(11, 87, 208, .3) !important;
}

html[data-theme="light"] body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-plan-tile-meta > span::after,
html[data-theme="light"] body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-model-chips > .settings-model-chip::after {
  border-right-color: #2f6fe0 !important;
  border-bottom-color: #2f6fe0 !important;
}

html[data-theme="light"] body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-model-chips > .settings-model-chip.settings-model-chip-x::after {
  border-right-color: #b07a12 !important;
  border-bottom-color: #b07a12 !important;
}

html[data-theme="light"] body .settings-dialog.settings-dialog .settings-plans-grid.settings-plans-grid .settings-plan-tile.settings-plan-tile > .settings-model-chips > .settings-model-chip.settings-model-chip-x {
  color: #8a5e07 !important;
}

html[data-theme="light"] body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color .settings-color-dot.settings-color-dot {
  box-shadow: inset 0 0 0 1px rgba(24, 20, 34, .16), 0 1px 3px rgba(0, 0, 0, .14) !important;
}

html[data-theme="light"] body .quota-notice.quota-notice {
  border-inline-start-color: #0b57d0 !important;
}

html[data-theme="light"] body .focused-model-menu.focused-model-menu .focused-model-option[aria-checked="true"] .focused-model-status {
  background: #0b57d0 !important;
  box-shadow: 0 0 0 3px rgba(11, 87, 208, .16) !important;
}

/* ============================================================================
   9) تقليل الحركة والتباين الإجباري — لا نُكرّر ما في mobile-first-v2.css
      (v2 يغطّي html body *)، نكتفي بإلغاء انتقالات الأسطح الجديدة صراحةً.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented .settings-seg.settings-seg::before,
  html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color .settings-color-check {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  html body .settings-dialog.settings-dialog .settings-appearance .settings-segmented.settings-segmented .settings-seg.settings-seg.active::before {
    background: Highlight !important;
    border-color: Highlight !important;
  }
  html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color.active .settings-color-check,
  html body .settings-dialog.settings-dialog .settings-appearance .settings-colors.settings-colors .settings-color.settings-color[aria-pressed="true"] .settings-color-check {
    color: Highlight !important;
  }
  html body .focused-model-menu.focused-model-menu .focused-model-option[aria-checked="true"] .focused-model-status {
    background: Highlight !important;
    color: HighlightText !important;
  }
}