/* =============================================================================
   site-v12.css — طبقة الاتساق البصري لكل الموقع (Claude-mobile / WormGPT)
   v1.2: تجمع أساس v7 (الخط، منتقي النموذج، صفّ إجراءات الرسالة) + القسم 6
   (ورقة منتقي النموذج السفلية بترتيب المرجع) — ملف واحد بدل ورقتين.
   ZyRox Engineering · 2026-10-19 · R1 / ZYAI

   نطاق هذه الطبقة:
   1) نظام الخط على مستوى body (كان يرث Times New Roman خارج .app-frame).
   2) منتقي النموذج: شبكة ثابتة (نص + حالة) بدل الصفوف المتكسّرة.
      سبب جذري مُقاس: المنتقي يُرسم داخل .chat-header، وقاعدة أزرار الرأس
      (0,9,2) كانت تتجاوز قاعدة بطاقة الخيار (0,8,2) فتُلغي الخلفية والحدود
      والارتفاع وتفرض نصف قطر 999px. عُزلت القاعدة في mobile-first-v6.css،
      وهذه الطبقة تعيد تأكيد الشكل بتحديد أعلى (0,11,2) للحماية من أي ورقة أقدم.
   3) صفّ إجراءات الرسالة (نسخ/إعجاب/إعادة توليد) بهدف لمس 40px.
   4) توافق الوضع الفاتح، واحترام تقليل الحركة.

   لا تغييرات على الوظائف أو الواجهات البرمجية — طبقة عرض فقط.
   ============================================================================= */

/* ---------------------------------------------------------- 0) الرموز */
:root{
  --wg7-font:"IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --wg7-card:var(--wg6-card,rgba(var(--zy-veil,255,255,255),.035));
  --wg7-hair:var(--wg6-hair,rgba(var(--zy-veil,255,255,255),.10));
  --wg7-hair-2:var(--wg6-hair-2,rgba(var(--zy-veil,255,255,255),.16));
  --wg7-muted:var(--wg6-muted,rgba(var(--zy-veil,255,255,255),.58));
  --wg7-r:16px;
  --wg7-dur:.16s;
}

/* ------------------------------------------ 1) الخط الأساسي خارج الإطار */
html body{
  font-family:var(--wg7-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* أي عناصر تُركَّب في body خارج .app-frame (حوارات/طبقات) ترث خط الهوية */
html body > div,
html body > dialog,
html body > section{
  font-family:var(--wg7-font);
}

/* ------------------------------------------------ 2) منتقي النموذج */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:"copy status"!important;
  align-items:center!important;
  gap:8px 12px!important;
  min-height:0!important;
  padding:12px 14px!important;
  border:1px solid var(--wg7-hair)!important;
  border-radius:var(--wg7-r)!important;
  background:var(--wg7-card)!important;
  opacity:1!important;
  transition:background var(--wg7-dur) ease,border-color var(--wg7-dur) ease!important;
}

/* مؤشر التحديد العمودي القديم كان يطفو فوق النص — النقطة/الشريحة تكفي */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option::before{
  display:none!important;
}

html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option:hover{
  background:var(--wg6-card-2,rgba(var(--zy-veil,255,255,255),.06))!important;
}

html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option[aria-checked="true"]{
  background:var(--zy-tint)!important;
  border-color:var(--zy-1)!important;
}

html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option[data-locked="true"]{
  opacity:.62!important;
}

html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-copy{
  grid-area:copy!important;
  min-width:0!important;
  width:auto!important;
}

html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-status{
  grid-area:status!important;
  justify-self:start!important;
  align-self:center!important;
}

html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-title{
  justify-content:flex-start!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}

html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-title strong{
  flex:0 0 auto!important;
}

/* كانت الشارة تُدفع إلى الطرف المقابل بـ margin-inline-start:auto */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-title small{
  margin-inline-start:0!important;
  margin-left:0!important;
  margin-right:0!important;
}

html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-meta{
  margin-top:6px!important;
}

/* زر إغلاق المنتقي: هدف لمس واضح دون كسر صف العنوان */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-heading button{
  min-width:40px!important;
  min-height:40px!important;
  border-radius:999px!important;
}

/* --------------------------------------- 3) صفّ إجراءات الرسالة */
/* أزرار الإجراءات (نسخ/إعجاب/إعادة توليد) تُرسم بلا صنف مستقر،
   وقياساتها الحيّة 40×40 بالفعل — لا قاعدة عريضة هنا تجنّباً لكسر
   أزرار بطاقة الكود أو الروابط داخل المحتوى. */

/* ------------------------------------------------- 4) الوضع الفاتح */
html[data-theme="light"]:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option{
  background:rgba(0,0,0,.025)!important;
  border-color:rgba(0,0,0,.10)!important;
}
html[data-theme="light"]:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option:hover{
  background:rgba(0,0,0,.045)!important;
}
html[data-theme="light"]:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option[aria-checked="true"]{
  background:var(--zy-tint)!important;
  border-color:var(--zy-1)!important;
}

/* ------------------------------------------- 5) تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option{
    transition:none!important;
  }
}

/* =============================================================================
   6) v1.2 — منتقي النموذج: ورقة سفلية بترتيب المرجع (Claude mobile)
   ZyRox Engineering · 2026-10-19 · R1 / ZYAI

   الترتيب المطابق للمرجع:
     • عنوان واحد مُركَّز في الأعلى وزرّ إغلاق في الطرف.
     • كل صفّ: علامة التحديد في الطرف المرجعي (يمين في RTL) — مرآة ✓ اليسار في LTR.
     • الاسم + شارة الباقة متجاوران، ثم الوصف، ثم سطر المزايا الرقيق.
     • الصفّ المحدَّد: خلفية مائلة للأزرق + حدّ أزرق.
   ملاحظة هندسية: المرجع يعرض «الجهد» و«المزيد من النماذج» كصفّين ختاميين؛
   لا نضيفهما لأن ميزتيهما غير موجودتين في المنتج — يُبقى زرّ الباقات الحقيقي.
   ============================================================================= */

/* العنوان: سطر واحد مُركَّز + إغلاق في الطرف */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-heading{
  display:block!important;
  position:relative!important;
  padding:14px 52px 12px!important;
  text-align:center!important;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-heading > div{
  width:100%!important;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-heading strong{
  display:block!important;
  font-size:16.5px!important;
  font-weight:600!important;
  line-height:1.5!important;
  color:var(--wg6-text,#ececec)!important;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-heading > div > span{
  display:none!important;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-heading .focused-model-count{
  display:none!important;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-heading button{
  position:absolute!important;
  inset-inline-end:10px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  border-radius:999px!important;
  border:0!important;
  background:transparent!important;
  color:var(--wg6-muted,rgba(255,255,255,.6))!important;
  font-size:20px!important;
  cursor:pointer;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-heading button:hover{
  background:rgba(255,255,255,.06)!important;
}

/* الصفّ: العلامة في الطرف المرجعي ثم الكتلة النصية */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option{
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-areas:"status copy"!important;
  align-items:start!important;
  gap:6px 10px!important;
  padding:14px!important;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-status{
  grid-area:status!important;
  justify-self:start!important;
  align-self:start!important;
  margin-top:2px!important;
  line-height:1.3!important;
}
/* المختار: علامة ✓ زرقاء مسطّحة بلا قرص ممتلئ.
   عيب مُقاس حيًّا (531px): الطبقات السابقة تُعطي المختار خلفية زرقاء
   ونصًّا بالأزرق نفسه (color == background-color) = علامة غير مرئية.
   لا نمسّ حالة غير المختار: المنتج يعرض فيها «غير متاح» فعلاً. */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option[aria-checked="true"] .focused-model-status{
  color:var(--zy-1,#4d90fe)!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  font-size:17px!important;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-copy{
  grid-area:copy!important;
  text-align:right!important;
}

/* الاسم + الشارة */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-title{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-title strong{
  font-size:15.5px!important;
  font-weight:600!important;
  color:var(--wg6-text,#ececec)!important;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-title small{
  padding:2px 8px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.05)!important;
  color:var(--wg6-muted,rgba(255,255,255,.66))!important;
  font-size:11.5px!important;
  line-height:1.6!important;
}

/* الوصف */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-description{
  margin-top:5px!important;
  font-size:13.5px!important;
  line-height:1.65!important;
  color:var(--wg6-muted,rgba(255,255,255,.6))!important;
}

/* المزايا: سطر رقيق بفواصل بدل الحبّات */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-meta{
  display:block!important;
  margin-top:7px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  font-size:12.5px!important;
  line-height:1.7!important;
  color:rgba(255,255,255,.5)!important;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-meta > *{
  display:inline!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:inherit!important;
  font-size:inherit!important;
  white-space:nowrap;
}
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-meta > * + *::before{
  content:"\00b7";
  margin:0 7px;
  opacity:.55;
}

/* الصفّ المحدَّد */
html:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option[aria-checked="true"]{
  background:rgba(77,144,254,.10)!important;
  border-color:rgba(77,144,254,.42)!important;
}

/* زرّ الباقات: صفّ ختامي بعرض كامل */
html:root:root:root:root:root:root body .focused-model-menu .model-subscribe{
  width:100%!important;
  min-height:48px!important;
  border-radius:14px!important;
  justify-content:center!important;
}

/* الهاتف: ورقة سفلية بعرض الشاشة وزوايا علوية مستديرة.
   ملاحظة تتالي مُقاسة: mobile-first-v6.css يكتب القاعدة بالصنف مرتين
   (.focused-model-menu.focused-model-menu = تحديد 0,8,2) فيتجاوز تحديد 0,7,2؛
   لذا نُكرّر الصنف هنا أيضًا لضمان الفوز، ونترك الحشو الآمن لـ v6. */
@media (max-width:640px){
  html:root:root:root:root:root:root body .focused-model-menu.focused-model-menu{
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    border-radius:20px 20px 0 0!important;
    border-bottom:0!important;
    max-height:88dvh!important;
  }
  html:root:root:root:root:root:root body .focused-model-menu .sheet-handle{
    margin:10px auto 2px!important;
  }
}

/* الوضع الفاتح */
html[data-theme="light"]:root:root:root:root:root:root body .focused-model-menu .focused-model-heading button:hover{
  background:rgba(0,0,0,.05)!important;
}
html[data-theme="light"]:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option.focused-model-option[aria-checked="true"]{
  background:rgba(77,144,254,.10)!important;
  border-color:rgba(77,144,254,.42)!important;
}
html[data-theme="light"]:root:root:root:root:root:root body .focused-model-menu .focused-model-list .focused-model-option .focused-model-title small{
  border-color:rgba(0,0,0,.12)!important;
  background:rgba(0,0,0,.04)!important;
}

/* ════════════════════════════════════════════════════════════════════════
   شارات الحالة — حبّة زجاجية هادئة
   تحلّ محلّ الشكل القديم (خلفية مصمتة + نقطة متوهّجة) في كل تبويبات
   الإعدادات: الاشتراك، الاستخدام، مفاتيح API، وبطاقات الباقات.

   ملاحظة هندسية: أوراق أقدم تفرض الشكل بـ!important —
     brand-experience.css     .settings-active{color/background/border-color!important}
     responsive-final.css     .settings-active{color:#ef4444!important}
     mobile-first-v6.css      .settings-plan-tile .settings-active{background/color/border!important}
   لذلك كل تصريح هنا !important، والمُحدِّد يكرّر الصنف أربع مرات
   (6 :root + 4 أصناف = 10 مستويات) ليتجاوز أعلى مُحدِّد قديم (9 مستويات).
   النقطة ترث لون النصّ (currentColor) فلا تحتاج ظلًّا ولا توهّجًا.
   ════════════════════════════════════════════════════════════════════════ */
html:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
  padding:5px 12px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.45!important;
  letter-spacing:.1px!important;
  text-transform:none!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
  color:var(--zy-text2,#b9b9b8)!important;
  background:linear-gradient(180deg,rgba(var(--zy-veil,255,255,255),.075),rgba(var(--zy-veil,255,255,255),.025))!important;
  border:1px solid rgba(var(--zy-veil,255,255,255),.12)!important;
  box-shadow:inset 0 1px 0 rgba(var(--zy-veil,255,255,255),.07)!important;
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
html:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active::before{
  content:""!important;
  flex:0 0 auto!important;
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:currentColor!important;
  opacity:.9!important;
  box-shadow:none!important;
}

/* مدفوع / فعّال */
html:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.is-paid{
  color:#6ee7a8!important;
  border-color:rgba(52,211,153,.34)!important;
  background:linear-gradient(180deg,rgba(52,211,153,.15),rgba(52,211,153,.05))!important;
}
/* بانتظار الدفع */
html:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.is-pending{
  color:#f4c983!important;
  border-color:rgba(245,181,68,.34)!important;
  background:linear-gradient(180deg,rgba(245,181,68,.15),rgba(245,181,68,.05))!important;
}
/* خطتك الحالية */
html:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.is-current{
  color:#a9c7ff!important;
  border-color:rgba(77,144,254,.36)!important;
  background:linear-gradient(180deg,rgba(77,144,254,.17),rgba(77,144,254,.06))!important;
}
/* مجاني / غير مفعّل */
html:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.is-free{
  color:var(--zy-text2,#b9b9b8)!important;
  border-color:rgba(var(--zy-veil,255,255,255),.12)!important;
  background:linear-gradient(180deg,rgba(var(--zy-veil,255,255,255),.06),rgba(var(--zy-veil,255,255,255),.02))!important;
}
html:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.is-free::before{
  opacity:.65!important;
}

/* التوافق مع الصنف القديم settings-active-free */
html:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.settings-active-free{
  color:var(--zy-text2,#b9b9b8)!important;
  border-color:rgba(var(--zy-veil,255,255,255),.12)!important;
  background:linear-gradient(180deg,rgba(var(--zy-veil,255,255,255),.06),rgba(var(--zy-veil,255,255,255),.02))!important;
}
html:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.settings-active-free::before{
  background:currentColor!important;
  opacity:.65!important;
  box-shadow:none!important;
}

/* الوضع الفاتح — ألوان أعمق حتى تبقى مقروءة على الخلفية الفاتحة */
html[data-theme="light"]:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.is-paid{
  color:#0d7c4f!important;
  border-color:rgba(13,124,79,.26)!important;
  background:linear-gradient(180deg,rgba(16,163,102,.14),rgba(16,163,102,.05))!important;
}
html[data-theme="light"]:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.is-pending{
  color:#8a5a05!important;
  border-color:rgba(180,120,10,.28)!important;
  background:linear-gradient(180deg,rgba(217,146,16,.15),rgba(217,146,16,.05))!important;
}
html[data-theme="light"]:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.is-current{
  color:#1b57b8!important;
  border-color:rgba(48,121,237,.26)!important;
  background:linear-gradient(180deg,rgba(48,121,237,.13),rgba(48,121,237,.04))!important;
}
html[data-theme="light"]:root:root:root:root:root:root body .settings-active.settings-active.settings-active.settings-active.is-free{
  color:#5b5b58!important;
  border-color:rgba(0,0,0,.14)!important;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.015))!important;
}

/* ════════════════════════════════════════════════════════════════════════
   وصلات ناقصة للوحة الاشتراك:
   .settings-plan-jump  — شريط تنقّل سريع إلى الباقات
   .settings-tonpay-live — تمييز خفيف للوحة بعد إنشاء الفاتورة
   ════════════════════════════════════════════════════════════════════════ */
html:root:root:root:root:root:root body .settings-plan-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:2px 0 14px;
}
html:root:root:root:root:root:root body .settings-plan-jump .settings-button{
  font-size:12px;
  padding:7px 13px;
  border-radius:999px;
}
@media(max-width:640px){
  html:root:root:root:root:root:root body .settings-plan-jump{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
  }
  html:root:root:root:root:root:root body .settings-plan-jump::-webkit-scrollbar{display:none}
  html:root:root:root:root:root:root body .settings-plan-jump .settings-button{flex:0 0 auto}
}

html:root:root:root:root:root:root body .settings-tonpay.settings-tonpay-live{
  border-color:rgba(77,144,254,.34);
  background:linear-gradient(180deg,rgba(77,144,254,.07),rgba(var(--zy-veil,255,255,255),.02));
}
html:root:root:root:root:root:root body .settings-tonpay.settings-tonpay-live .settings-tonpay-head h3{
  color:var(--zy-bright,#6B90DA);
}