/* =============================================================================
   mobile-first-v6.css — طبقة لغة التصميم المرجعية (Claude-mobile)
   ZyRox Engineering · 2026-10-18 · R1 / ZYAI

   الغرض: تطبيق اللغة البصرية للمرجع البصري المعتمد (14 لقطة، موثّقة في
   DESIGN-REFERENCE-CLAUDE-MOBILE.md) على شاشات WormGPT بأسمائنا وشعاراتنا.

   قواعد ملزمة مُنفَّذة هنا:
   1) طبقة **أخيرة** في التتالي (تُربط بعد model-picker-v2.css) لتكون الفائزة
      فعلاً — لا في المنتصف كما حدث مع v1..v5.
   2) كل قاعدة بصيغة `html:root×6 body .x.x` + `!important` — «سلّم الأولوية»:
      تكرار :root ست مرات يرفع الوزن إلى (0,8,2) فيتجاوز modern-ui (0,3,2)
      و mobile-first-v4 (حتى 0,8,2) بالتساوي مع كوننا الأخير ⇒ نفوز بالتسلسل.
      (modern-ui / responsive-workspace / responsive-final / brand-experience…)
      التي تستخدم same-specificity أو single-class + !important.
   3) لا تعديل على منطق التطبيق: الأصناف المولَّدة من settings-center.js
      و modern-ui.js هي الهدف المباشر، والعرض هنا CSS خالص.
      استثناء واحد موثَّق: lang-flags.js (تحسين تقدّمي لمنتقي اللغة بالأعلام)
      لا يلمس حالة التطبيق — <select> يبقى مصدر الحقيقة ويُطلَق عليه change حقيقي.
   4) لا قيم مُختلقة: لا أسعار ولا خصومات ولا نِسَب — كل نص من بيانات النظام.
   5) الاعتماد على متغيّرات الهوية الحالية (--zy-*) لا نظام ألوان موازٍ.
   ============================================================================= */

/* ---------------------------------------------------------------- 0) الرموز */
:root{
  /* خط النسخ: مكافئ المرجع العربي (Serif) من خطوط النظام — صفر تبعيات */
  --wg6-serif:"Noto Naskh Arabic","Amiri","Scheherazade New","Traditional Arabic","Times New Roman",Georgia,serif;
  --wg6-hair:rgba(var(--zy-veil),.10);
  --wg6-hair-2:rgba(var(--zy-veil),.16);
  --wg6-card:rgba(var(--zy-veil),.035);
  --wg6-card-2:rgba(var(--zy-veil),.06);
  --wg6-card-3:rgba(var(--zy-veil),.09);
  --wg6-muted:rgba(var(--zy-veil),.58);
  --wg6-muted-2:rgba(var(--zy-veil),.42);
  --wg6-r:16px;
  --wg6-r-sm:12px;
  --wg6-r-xs:10px;
  --wg6-pill:999px;
  /* زر أساسي أبيض حبّة (في الداكن) — ينقلب تلقائياً في الفاتح */
  --wg6-cta:var(--zy-text);
  --wg6-cta-fg:rgb(var(--zy-bgrgb));
  --wg6-row:58px;
  --wg6-dur:.18s;
  /* سهم منتقي اللغة (SVG مضمَّن — لا طلب شبكة). رمادي وسط ليُقرأ في الوضعين */
  --wg6-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23888888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------- 1) الطباعة (Serif) */
html:root:root:root:root:root:root body .settings-head-brand.settings-head-brand h2,
html:root:root:root:root:root:root body .settings-section-title.settings-section-title,
html:root:root:root:root:root:root body .settings-profile-id.settings-profile-id h3,
html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile h3,
html:root:root:root:root:root:root body .settings-claude-info.settings-claude-info h3,
html:root:root:root:root:root:root body .settings-membership-info.settings-membership-info h3,
html:root:root:root:root:root:root body .focused-model-heading.focused-model-heading strong,
html:root:root:root:root:root:root body .settings-empty.settings-empty h3,
html:root:root:root:root:root:root body .welcome-title.welcome-title,
html:root:root:root:root:root:root body .chat-welcome.chat-welcome h2{
  font-family:var(--wg6-serif)!important;
  font-weight:600!important;
  letter-spacing:0!important;
}
html:root:root:root:root:root:root body .settings-section-title.settings-section-title{
  font-size:24px!important;
  line-height:1.35!important;
  text-align:center!important;
  border-bottom:0!important;
  padding:2px 0 14px!important;
  margin:0 0 6px!important;
}
html:root:root:root:root:root:root body .settings-head-brand.settings-head-brand h2{ font-size:20px!important; }
html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile h3{ font-size:26px!important; line-height:1.25!important; }
html:root:root:root:root:root:root body .welcome-title.welcome-title{ font-size:32px!important; line-height:1.3!important; }
html:root:root:root:root:root:root body .focused-model-heading strong{ font-size:21px!important; }

/* نص ثانوي موحّد (وصف/مساعدة) */
html:root:root:root:root:root:root body .settings-note.settings-note,
html:root:root:root:root:root:root body .settings-detail.settings-detail span,
html:root:root:root:root:root:root body .settings-bar-sub.settings-bar-sub{
  color:var(--wg6-muted)!important;
  font-size:13px!important;
  line-height:1.6!important;
}

/* ------------------------------------------------- 2) الرأس + المؤلّف */
html:root:root:root:root:root:root body .chat-header.chat-header{
  background:transparent!important;
  border-bottom:0!important;
  box-shadow:none!important;
  min-height:56px!important;
  height:auto!important;
  padding:6px 12px!important;
  gap:8px!important;
  align-items:center!important;
}
/* قاعدة أزرار الرأس محصورة خارج منتقي النموذج: المنتقي يُرسم داخل .chat-header،
   وكانت القاعدة العامة (0,9,2) تتجاوز قاعدة بطاقة الخيار (0,8,2) فتحوّل الصفوف
   إلى حبّات شفافة بارتفاع 40px. الاستثناء يحفظ الأصل ويصلح السبب الجذري. */
html:root:root:root:root:root:root body .chat-header.chat-header button:not(.focused-model-menu *){
  min-width:40px!important;
  min-height:40px!important;
  border:0!important;
  border-radius:var(--wg6-pill)!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:.85;
}
html:root:root:root:root:root:root body .chat-header.chat-header button:not(.focused-model-menu *):hover{ background:var(--wg6-card-2)!important; }
/* رقاقة النموذج: هادئة كحبّة على نمط المرجع */
html:root:root:root:root:root:root body .focused-model-trigger.focused-model-trigger{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-pill)!important;
  min-height:38px!important;
  padding:0 12px!important;
  gap:7px!important;
  font-weight:500!important;
}
html:root:root:root:root:root:root body .focused-model-trigger.focused-model-trigger>span:not(.model-trigger-emblem){
  font-size:13.5px!important;
  max-width:34vw!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* المؤلّف: كتلة واحدة نظيفة بحدود رقيقة على نمط المرجع */
html:root:root:root:root:root:root body .composer-shell.composer-shell{ padding:8px 12px calc(10px + var(--wg-safe-b,0px))!important; }
html:root:root:root:root:root:root body .chat-composer.chat-composer{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:22px!important;
  box-shadow:none!important;
  padding:8px 10px!important;
}
html:root:root:root:root:root:root body .chat-composer.chat-composer [data-zy-composer]{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html:root:root:root:root:root:root body .chat-composer.chat-composer textarea{
  font-size:16px!important;
  line-height:1.7!important;
  padding:6px 6px 2px!important;
  min-height:44px!important;
}
html:root:root:root:root:root:root body .chat-composer.chat-composer button{
  min-width:40px!important;
  min-height:40px!important;
  border-radius:var(--wg6-pill)!important;
}
html:root:root:root:root:root:root body .chat-composer.chat-composer button[aria-label="إرسال الرسالة"]{
  background:var(--wg6-cta)!important;
  color:var(--wg6-cta-fg)!important;
  border:0!important;
}
html:root:root:root:root:root:root body .chat-composer.chat-composer button[aria-label="إرسال الرسالة"]:disabled{
  opacity:.4!important;
  background:var(--wg6-card-2)!important;
  color:var(--wg6-muted)!important;
}

/* --------------------------------------------------- 3) شاشة الترحيب */
html:root:root:root:root:root:root body .chat-welcome.chat-welcome{
  max-width:680px!important;
  margin:0 auto!important;
  padding:28px 20px!important;
  gap:14px!important;
}
html:root:root:root:root:root:root body .chat-welcome .welcome-brand.welcome-brand img,
html:root:root:root:root:root:root body .chat-welcome.chat-welcome img{
  width:64px!important;height:64px!important;
  filter:drop-shadow(0 10px 24px rgba(var(--zy-veil),.10));
}
html:root:root:root:root:root:root body .welcome-subtitle.welcome-subtitle{
  font-size:15px!important;
  color:var(--wg6-muted)!important;
  max-width:46ch!important;
  line-height:1.75!important;
}
html:root:root:root:root:root:root body .welcome-questions.welcome-questions>button{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r-sm)!important;
  min-height:46px!important;
  text-align:start!important;
  font-size:14px!important;
}

/* ------------------------------- 4) الإعدادات: الهيكل + شريط الأقسام */
html:root:root:root:root:root:root body .settings-overlay.settings-overlay{ background:rgba(0,0,0,.55)!important; }
html:root:root:root:root:root:root body .settings-dialog.settings-dialog{
  background:rgb(var(--zy-bgrgb))!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html:root:root:root:root:root:root body .settings-dialog.settings-dialog>header{
  border-bottom:1px solid var(--wg6-hair)!important;
  padding:10px 14px!important;
  min-height:56px!important;
  background:rgb(var(--zy-bgrgb))!important;
  position:sticky!important;
  top:0!important;
  z-index:3!important;
}
html:root:root:root:root:root:root body .settings-head-brand.settings-head-brand small{ display:none!important; }
html:root:root:root:root:root:root body .settings-close.settings-close{
  border:0!important;
  background:transparent!important;
  border-radius:var(--wg6-pill)!important;
  width:40px!important;height:40px!important;
  font-size:22px!important;
  order:2;
  margin-inline-start:0!important;
}
html:root:root:root:root:root:root body .settings-dialog.settings-dialog .settings-layout{
  gap:0!important;
  background:transparent!important;
  border:0!important;
}
/* أقسام الإعدادات كبطاقات صفوف (لغة المرجع) */
html:root:root:root:root:root:root body .settings-layout.settings-layout nav{
  background:transparent!important;
  border:0!important;
  padding:12px!important;
  gap:8px!important;
}
html:root:root:root:root:root:root body .settings-layout.settings-layout nav button{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r-sm)!important;
  color:var(--zy-text)!important;
  font-size:14.5px!important;
  font-weight:500!important;
  min-height:52px!important;
  padding:10px 12px!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  text-align:start!important;
}
html:root:root:root:root:root:root body .settings-layout.settings-layout nav button.active{
  background:var(--wg6-card-2)!important;
  border-color:var(--wg6-hair-2)!important;
  color:var(--zy-text)!important;
  font-weight:600!important;
  box-shadow:inset 3px 0 0 var(--zy-1);
}
html:root:root:root:root:root:root body .settings-layout.settings-layout nav button .settings-nav-ico{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;height:24px!important;
  order:-1;
  color:var(--wg6-muted)!important;
  flex:none!important;
}
html:root:root:root:root:root:root body .settings-layout.settings-layout nav button.active .settings-nav-ico{ color:var(--zy-1)!important; }
html:root:root:root:root:root:root body .settings-nav-group.settings-nav-group{
  font-size:12px!important;
  font-weight:600!important;
  color:var(--wg6-muted-2)!important;
  margin:14px 6px 2px!important;
  padding:0!important;
  letter-spacing:0!important;
}
html:root:root:root:root:root:root body .settings-nav-search.settings-nav-search{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r-sm)!important;
  padding:0 12px!important;
  min-height:46px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
html:root:root:root:root:root:root body .settings-nav-search.settings-nav-search input{
  background:transparent!important;
  border:0!important;
  font-size:15px!important;
  min-height:44px!important;
  width:100%!important;
  outline:0!important;
}
html:root:root:root:root:root:root body .settings-nav-empty.settings-nav-empty{
  color:var(--wg6-muted)!important;
  font-size:14px!important;
  text-align:center!important;
  padding:22px 10px!important;
}
html:root:root:root:root:root:root body .settings-content.settings-content{ padding:6px 12px 24px!important; }
html:root:root:root:root:root:root body .settings-empty.settings-empty{
  text-align:center!important;
  padding:36px 18px!important;
  color:var(--wg6-muted)!important;
}

/* ----------------------------------------- 5) بطاقات وصفوف الإعدادات */
html:root:root:root:root:root:root body .settings-card.settings-card,
html:root:root:root:root:root:root body .settings-plan-card.settings-plan-card,
html:root:root:root:root:root:root body .settings-profiles-card.settings-profiles-card{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r)!important;
  box-shadow:none!important;
  padding:16px!important;
  margin:0 0 12px!important;
}
html:root:root:root:root:root:root body .settings-card.settings-card h3,
html:root:root:root:root:root:root body .settings-plan-title.settings-plan-title h3{
  font-size:16px!important;
  font-weight:600!important;
  margin:0 0 10px!important;
}
html:root:root:root:root:root:root body .settings-detail.settings-detail{
  background:transparent!important;
  border:0!important;
  border-top:1px solid var(--wg6-hair)!important;
  border-radius:0!important;
  padding:12px 0 0!important;
  margin:12px 0 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  font-size:14px!important;
}
html:root:root:root:root:root:root body .settings-detail.settings-detail strong{
  font-weight:500!important;
  font-size:14.5px!important;
  overflow-wrap:anywhere!important;
}
html:root:root:root:root:root:root body .settings-field.settings-field{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r-sm)!important;
  padding:10px 12px!important;
  margin:0 0 12px!important;
  gap:6px!important;
  display:flex!important;
  flex-direction:column!important;
  font-size:13px!important;
  color:var(--wg6-muted)!important;
}
html:root:root:root:root:root:root body .settings-field.settings-field input,
html:root:root:root:root:root:root body .settings-field.settings-field textarea,
html:root:root:root:root:root:root body .settings-field.settings-field select{
  background:transparent!important;
  border:0!important;
  color:var(--zy-text)!important;
  font-size:16px!important;
  line-height:1.7!important;
  padding:2px 0!important;
  outline:0!important;
  width:100%!important;
  min-height:40px!important;
  resize:vertical!important;
}
html:root:root:root:root:root:root body .settings-field.settings-field textarea{ max-height:46dvh!important; }

/* بطاقة الملف الشخصي */
html:root:root:root:root:root:root body .settings-profile-card.settings-profile-card{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r)!important;
  padding:18px!important;
  margin:0 0 12px!important;
}
html:root:root:root:root:root:root body .settings-profile-head.settings-profile-head{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:10px!important;
  text-align:center!important;
}
html:root:root:root:root:root:root body .settings-dialog .profile-photo,
html:root:root:root:root:root:root body .settings-dialog .settings-avatar.settings-avatar{
  width:84px!important;height:84px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  border:0!important;
}
html:root:root:root:root:root:root body .settings-avatar.settings-avatar{
  display:grid!important;place-items:center!important;
  font-size:30px!important;font-weight:600!important;
  background:var(--zy-soft)!important;
  color:var(--zy-deep)!important;
}
html:root:root:root:root:root:root body .settings-profile-id.settings-profile-id h3{ font-size:22px!important; margin:0!important; }

/* --------------------------------- 6) المظهر: المقاطع + الألوان + اللغة */
html:root:root:root:root:root:root body .settings-appearance .settings-choice.settings-choice{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  padding:12px 0!important;
  border-top:1px solid var(--wg6-hair)!important;
  margin:0!important;
}
html:root:root:root:root:root:root body .settings-appearance .settings-choice-label.settings-choice-label{
  font-size:14px!important;
  font-weight:500!important;
  color:var(--zy-text)!important;
}
html:root:root:root:root:root:root body .settings-appearance .settings-segmented.settings-segmented{
  background:var(--wg6-card-2)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-pill)!important;
  padding:3px!important;
  display:flex!important;
  gap:3px!important;
}
html:root:root:root:root:root:root body .settings-appearance .settings-seg.settings-seg{
  flex:1 1 0!important;
  min-height:40px!important;
  border:0!important;
  border-radius:var(--wg6-pill)!important;
  background:transparent!important;
  color:var(--wg6-muted)!important;
  font-size:14px!important;
  font-weight:500!important;
}
html:root:root:root:root:root:root body .settings-appearance .settings-seg.settings-seg.active{
  background:var(--wg6-cta)!important;
  color:var(--wg6-cta-fg)!important;
  font-weight:600!important;
}
html:root:root:root:root:root:root body .settings-appearance .settings-colors.settings-colors{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr))!important;
  gap:8px!important;
}
html:root:root:root:root:root:root body .settings-appearance .settings-color.settings-color{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r-sm)!important;
  min-height:64px!important;
  padding:10px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  position:relative!important;
}
html:root:root:root:root:root:root body .settings-appearance .settings-color.settings-color.active,
html:root:root:root:root:root:root body .settings-appearance .settings-color[aria-pressed="true"]{
  border-color:var(--zy-1)!important;
  background:var(--wg6-card-2)!important;
}
html:root:root:root:root:root:root body .settings-appearance .settings-color-dot.settings-color-dot{
  width:22px!important;height:22px!important;
  border-radius:50%!important;
  background:var(--sw,var(--zy-1))!important;
  box-shadow:none!important;
}
html:root:root:root:root:root:root body .settings-appearance .settings-color-name.settings-color-name{
  font-size:12.5px!important;
  color:var(--wg6-muted)!important;
}
html:root:root:root:root:root:root body .settings-appearance .settings-color-check.settings-color-check{
  position:absolute!important;
  inset-inline-start:8px!important;
  top:8px!important;
  width:14px!important;height:14px!important;
  color:var(--zy-1)!important;
  opacity:0;
}
html:root:root:root:root:root:root body .settings-appearance .settings-color.active .settings-color-check,
html:root:root:root:root:root:root body .settings-appearance .settings-color[aria-pressed="true"] .settings-color-check{ opacity:1!important; }
/* منتقي اللغة: كان بلا أي تنسيق (فجوة مؤكَّدة).
   الشكوى الحيّة «اختيار اللغة مو واضح لونه أبيض»: appearance:none أزال السهم، وحدّ
   rgba(.10) شبه معدوم ⇒ صندوق باهت بلا دلالة. الحل: سهم SVG + حدّ واضح + خيارات
   بتباين مقروء (منع النص الفاتح على قائمة نظام بيضاء). */
html:root:root:root:root:root:root body .settings-content select.settings-select{
  appearance:none!important;
  -webkit-appearance:none!important;
  background-color:var(--wg6-card-2)!important;
  background-image:var(--wg6-caret)!important;
  background-repeat:no-repeat!important;
  background-position:left 14px center!important;
  background-size:11px 7px!important;
  border:1px solid var(--wg6-hair-2)!important;
  border-radius:var(--wg6-r-sm)!important;
  color:var(--zy-text)!important;
  font-size:16px!important;
  font-family:inherit!important;
  font-weight:500!important;
  min-height:50px!important;
  padding:10px 14px!important;
  padding-inline-end:38px!important;
  width:100%!important;
  outline:0!important;
  cursor:pointer!important;
}
html:root:root:root:root:root:root body .settings-content select.settings-select:dir(ltr){
  background-position:right 14px center!important;
}
html:root:root:root:root:root:root body .settings-content select.settings-select:hover{ border-color:rgba(77,144,254,.34)!important; }
html:root:root:root:root:root:root body .settings-content select.settings-select:focus-visible{ border-color:rgba(77,144,254,.5)!important; }
html:root:root:root:root:root:root body .settings-content select.settings-select option{
  background-color:rgb(var(--zy-bgrgb))!important;
  color:var(--zy-text)!important;
}

/* ------------------------- 17) منتقي اللغة بالأعلام (lang-flags.js) ----------
   الأصناف .wg-lang-* مُنسَّقة في modern-ui.css و settings-mobile.css لكن لا كود
   يولّدها. lang-flags.js يبنيها، وهذه الطبقة ترفع الوزن كي لا تُهزم في التتالي
   وتضبط الأعمدة: عمود واحد على الهاتف (صف كامل: علم + اسم + بلد + صح) كما في المرجع. */
html:root:root:root:root:root:root body select.settings-select.wg6-lang-native{
  display:none!important;
}
html:root:root:root:root:root:root body .settings-choice.wg6-lang-host{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:10px!important;
}
html:root:root:root:root:root:root body .settings-choice.wg6-lang-host > .settings-choice-label{
  font-size:12.5px!important;
  font-weight:600!important;
  color:var(--wg6-muted)!important;
}
html:root:root:root:root:root:root body .wg-lang-grid.wg-lang-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
}
html:root:root:root:root:root:root body .wg-lang-opt.wg-lang-opt{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-height:56px!important;
  padding:10px 12px!important;
  border-radius:var(--wg6-r-sm)!important;
  border:1px solid var(--wg6-hair-2)!important;
  background:var(--wg6-card-2)!important;
  color:var(--zy-text)!important;
  font-size:14px!important;
  text-align:start!important;
  cursor:pointer!important;
}
html:root:root:root:root:root:root body .wg-lang-opt.wg-lang-opt:hover{
  border-color:rgba(77,144,254,.34)!important;
  background:var(--wg6-card-3)!important;
}
html:root:root:root:root:root:root body .wg-lang-opt.wg-lang-opt.active{
  background:rgba(77,144,254,.14)!important;
  border-color:rgba(77,144,254,.42)!important;
  /* مكان محجوز لعلامة الصح كي لا تتراكب مع اسم البلد */
  padding-inline-end:36px!important;
}
html:root:root:root:root:root:root body .wg-lang-opt.wg-lang-opt .wg-lang-flag{
  width:22px!important;
  height:16px!important;
  flex:none!important;
  border-radius:4px!important;
  object-fit:cover!important;
  box-shadow:0 0 0 1px var(--wg6-hair-2),0 1px 3px rgba(0,0,0,.35)!important;
}
html:root:root:root:root:root:root body .wg-lang-opt.wg-lang-opt .wg-lang-name{
  font-size:14px!important;
  font-weight:500!important;
  color:var(--zy-text)!important;
  white-space:nowrap!important;
}
html:root:root:root:root:root:root body .wg-lang-opt.wg-lang-opt .wg-lang-country{
  margin-inline-start:auto!important;
  font-size:12px!important;
  color:var(--wg6-muted)!important;
  opacity:1!important;
  white-space:nowrap!important;
}
@media (min-width:480px){
  html:root:root:root:root:root:root body .wg-lang-grid.wg-lang-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (min-width:900px){
  html:root:root:root:root:root:root body .wg-lang-grid.wg-lang-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* --------------------------------------------- 7) الاشتراك وبطاقات الخطط */
html:root:root:root:root:root:root body .settings-plans-grid.settings-plans-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
}
html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:20px!important;
  padding:20px 18px!important;
  gap:12px!important;
  box-shadow:none!important;
  text-align:center!important;
  align-items:center!important;
}
html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile.settings-plan-current{
  border-color:var(--zy-1)!important;
  background:var(--wg6-card-2)!important;
}
html:root:root:root:root:root:root body .settings-plan-tile-head.settings-plan-tile-head{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
}
html:root:root:root:root:root:root body .settings-plan-tile-head.settings-plan-tile-head small{
  text-transform:none!important;
  letter-spacing:0!important;
  font-size:12.5px!important;
  color:var(--wg6-muted)!important;
}
html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile .settings-active{
  background:var(--zy-tint)!important;
  color:var(--zy-bright)!important;
  border:0!important;
  border-radius:var(--wg6-pill)!important;
  padding:3px 10px!important;
  font-size:11.5px!important;
  font-weight:600!important;
}
html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile>p.settings-bar-sub{
  font-size:13.5px!important;
  color:var(--wg6-muted)!important;
  max-width:34ch!important;
  text-align:center!important;
}
html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile>strong.settings-plan-tile-price{
  font-size:32px!important;
  font-weight:700!important;
  line-height:1.1!important;
  display:block!important;
}
html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile>strong.settings-plan-tile-price>small{
  display:block!important;
  font-size:12px!important;
  font-weight:500!important;
  color:var(--wg6-muted)!important;
  margin-top:4px!important;
}
html:root:root:root:root:root:root body .settings-plan-tile-meta.settings-plan-tile-meta{ display:grid!important; gap:8px!important; width:100%!important; }
html:root:root:root:root:root:root body .settings-plan-tile-meta.settings-plan-tile-meta span{
  display:block!important;
  font-size:13px!important;
  color:var(--wg6-muted)!important;
  line-height:1.6!important;
  text-align:center!important;
}
html:root:root:root:root:root:root body .settings-model-chips.settings-model-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  justify-content:center!important;
}
html:root:root:root:root:root:root body .settings-model-chips .settings-model-chip.settings-model-chip{
  background:var(--wg6-card-2)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-pill)!important;
  padding:4px 11px!important;
  font-size:12px!important;
  color:var(--wg6-muted)!important;
}
html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile>button,
html:root:root:root:root:root:root body .settings-plan-cta.settings-plan-cta>button{
  width:100%!important;
  min-height:48px!important;
  margin:6px 0 0!important;
  align-self:stretch!important;
}
html:root:root:root:root:root:root body .settings-benefits.settings-benefits{ display:grid!important; gap:8px!important; margin:0 0 12px!important; }
html:root:root:root:root:root:root body .settings-benefits.settings-benefits>*{
  font-size:13.5px!important;
  color:var(--wg6-muted)!important;
  text-align:start!important;
}
html:root:root:root:root:root:root body .settings-membership.settings-membership{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:20px!important;
  padding:18px!important;
  margin:0 0 14px!important;
}
html:root:root:root:root:root:root body .settings-membership-body.settings-membership-body{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  text-align:center!important;
  align-items:center!important;
}
html:root:root:root:root:root:root body .settings-membership-info.settings-membership-info h3{ font-size:24px!important; margin:0!important; }
html:root:root:root:root:root:root body .settings-membership-info.settings-membership-info p{ color:var(--wg6-muted)!important; font-size:13px!important; }
html:root:root:root:root:root:root body .settings-payee-opts.settings-payee-opts{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; }
html:root:root:root:root:root:root body .settings-payee-opt.settings-payee-opt{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r-sm)!important;
  padding:12px 14px!important;
  text-align:start!important;
  min-height:56px!important;
}
html:root:root:root:root:root:root body .settings-payee-opt.settings-payee-opt.active,
html:root:root:root:root:root:root body .settings-payee-opt[aria-pressed="true"]{
  border-color:var(--zy-1)!important;
  background:var(--wg6-card-2)!important;
}

/* ------------------------------------------------------ 8) الاستخدام */
html:root:root:root:root:root:root body .settings-claude-hero.settings-claude-hero,
html:root:root:root:root:root:root body .settings-claude-body.settings-claude-body{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:20px!important;
  box-shadow:none!important;
  padding:18px!important;
  margin:0 0 14px!important;
}
html:root:root:root:root:root:root body .settings-hero-head.settings-hero-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0 0 12px!important;
}
html:root:root:root:root:root:root body .settings-hero-head.settings-hero-head small{ color:var(--wg6-muted)!important; font-size:12.5px!important; }
/* إصلاح عطل مؤكَّد: brand-experience.css تخفي حلقة الاستخدام (.settings-ring{display:none!important})
   فتُصبح حالة الاستخدام بلا تمثيل بصري — أُعيدها ظاهرة ومنسّقة */
html:root:root:root:root:root:root body .settings-ring.settings-ring{
  display:grid!important;
  place-items:center!important;
  margin:0 auto 14px!important;
  flex:0 0 auto!important;
  width:112px!important;
  height:112px!important;
}
html:root:root:root:root:root:root body .settings-ring-inner.settings-ring-inner{
  background:rgb(var(--zy-bgrgb))!important;
  width:82px!important;
  height:82px!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:2px!important;
  border-radius:50%!important;
  text-align:center!important;
}
html:root:root:root:root:root:root body .settings-ring-inner.settings-ring-inner strong{ font-size:20px!important; line-height:1.1!important; }
html:root:root:root:root:root:root body .settings-ring-inner.settings-ring-inner small{ font-size:10.5px!important; color:var(--wg6-muted)!important; }
html:root:root:root:root:root:root body .settings-claude-body.settings-claude-body{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  gap:14px!important;
}
html:root:root:root:root:root:root body .settings-claude-info.settings-claude-info{ width:100%!important; }
html:root:root:root:root:root:root body .settings-claude-info.settings-claude-info h3{ font-size:22px!important; margin:0 0 6px!important; }
html:root:root:root:root:root:root body .settings-window-grid.settings-window-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
}
html:root:root:root:root:root:root body .settings-bar.settings-bar{
  background:var(--wg6-card-2)!important;
  border:0!important;
  border-radius:var(--wg6-pill)!important;
  height:8px!important;
  overflow:hidden!important;
}
html:root:root:root:root:root:root body .settings-bar-head.settings-bar-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  font-size:13.5px!important;
  margin:0 0 8px!important;
}
html:root:root:root:root:root:root body .settings-countdown.settings-countdown,
html:root:root:root:root:root:root body .settings-meta-row.settings-meta-row{
  color:var(--wg6-muted)!important;
  font-size:12.5px!important;
}
html:root:root:root:root:root:root body .settings-meta-row.settings-meta-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px 12px!important;
  margin:10px 0 0!important;
}
html:root:root:root:root:root:root body .settings-models.settings-models{ display:grid!important; gap:8px!important; }
html:root:root:root:root:root:root body .settings-model-row.settings-model-row{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r-sm)!important;
  padding:12px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  font-size:14px!important;
}

/* ---------------------------------------- 9) قائمة المحادثات والشريط */
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar{
  background:rgb(var(--zy-bgrgb))!important;
  border-inline-end:1px solid var(--wg6-hair)!important;
  box-shadow:none!important;
}
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar>div:first-child{
  width:min(88vw,340px)!important;
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  min-height:0!important;
  gap:10px!important;
  padding:14px 12px!important;
}
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar .brand-emblem img{
  width:34px!important;height:34px!important;
  border-radius:10px!important;
}
/* عناوين المجموعات: اليوم / السابق / المثبتة */
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar [style*="text-transform: uppercase"],
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar [style*="text-transform:uppercase"]{
  font-size:12px!important;
  font-weight:600!important;
  color:var(--wg6-muted-2)!important;
  letter-spacing:0!important;
  margin:12px 4px 6px!important;
  padding:0!important;
}
/* صفوف المحادثات */
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar button[style*="padding-inline-end: 34px"],
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar div[style*="padding-inline-end: 34px"]>button{
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:var(--wg6-r-sm)!important;
  min-height:54px!important;
  padding:10px 12px!important;
  text-align:start!important;
  color:var(--zy-text)!important;
  font-size:14.5px!important;
  line-height:1.5!important;
  transition:background var(--wg6-dur) ease,border-color var(--wg6-dur) ease;
}
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar button[style*="padding-inline-end: 34px"] span{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  max-width:100%!important;
}
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar button[style*="padding-inline-end: 34px"]:hover{
  background:var(--wg6-card)!important;
  border-color:var(--wg6-hair)!important;
}
/* حقل البحث */
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar input[type="search"],
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar input:not([type]){
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-pill)!important;
  min-height:46px!important;
  font-size:15px!important;
  padding:10px 16px!important;
  color:var(--zy-text)!important;
}
/* زر محادثة جديدة: عائم كحبّة بيضاء أسفل القائمة (نمط المرجع) */
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar>div:first-child>button{
  order:9;
  margin-top:auto!important;
  background:var(--wg6-cta)!important;
  color:var(--wg6-cta-fg)!important;
  border:0!important;
  border-radius:var(--wg6-pill)!important;
  min-height:48px!important;
  font-size:15px!important;
  font-weight:600!important;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.6)!important;
}
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar>div:first-child>div:nth-of-type(1){ order:1; }  /* الماركة */
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar>div:first-child>div:nth-of-type(2){ order:2; }  /* البحث */
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar>div:first-child>div:nth-of-type(3){ order:3; flex:1 1 auto; min-height:0; overflow-y:auto; }  /* القائمة */
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar>div:first-child>.account-controls{ order:10; margin-top:0!important; }
html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar>div:first-child>a{ order:8; }
/* بطاقة الحساب أسفل الدرج */
html:root:root:root:root:root:root body .account-trigger.account-trigger{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r-sm)!important;
  min-height:56px!important;
  padding:8px 12px!important;
  width:100%!important;
}
html:root:root:root:root:root:root body .account-actions.account-actions{
  background:rgb(var(--zy-solid))!important;
  border:1px solid var(--wg6-hair-2)!important;
  border-radius:var(--wg6-r)!important;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.65)!important;
  padding:6px!important;
  overflow:hidden!important;
}
html:root:root:root:root:root:root body .account-action.account-action{
  border-radius:var(--wg6-r-xs)!important;
  min-height:46px!important;
  font-size:14.5px!important;
}
html:root:root:root:root:root:root body .account-action--logout.account-action--logout{ color:#ef5f6b!important; }
html:root:root:root:root:root:root body .mobile-sidebar-backdrop.mobile-sidebar-backdrop{ background:rgba(0,0,0,.55)!important; }

/* ------------------------------------------------ 10) منتقي النموذج */
html:root:root:root:root:root:root body .model-menu-scrim.model-menu-scrim{ background:rgba(0,0,0,.55)!important; }
html:root:root:root:root:root:root body .focused-model-menu.focused-model-menu{
  background:rgb(var(--zy-solid))!important;
  border:1px solid var(--wg6-hair-2)!important;
  border-radius:24px!important;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.7)!important;
  padding:8px 12px calc(14px + var(--wg-safe-b,0px))!important;
}
html:root:root:root:root:root:root body .focused-model-heading.focused-model-heading{
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:6px!important;
  padding:10px 6px 12px!important;
  border-bottom:1px solid var(--wg6-hair)!important;
}
html:root:root:root:root:root:root body .focused-model-heading.focused-model-heading small{
  color:var(--wg6-muted)!important;
  font-size:12.5px!important;
}
html:root:root:root:root:root:root body .focused-model-list.focused-model-list{ gap:8px!important; padding:10px 0 0!important; }
html:root:root:root:root:root:root body .focused-model-option.focused-model-option{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r)!important;
  padding:14px!important;
  gap:8px!important;
  min-height:84px!important;
}
html:root:root:root:root:root:root body .focused-model-option[aria-checked="true"]{
  background:var(--wg6-card-2)!important;
  border-color:var(--zy-1)!important;
}
html:root:root:root:root:root:root body .focused-model-option[data-locked="true"]{ opacity:.62!important; }
html:root:root:root:root:root:root body .focused-model-title.focused-model-title{ gap:8px!important; flex-wrap:wrap!important; }
html:root:root:root:root:root:root body .focused-model-title.focused-model-title strong{ font-size:16.5px!important; font-weight:600!important; }
html:root:root:root:root:root:root body .focused-model-title.focused-model-title small{
  background:var(--zy-tint)!important;
  color:var(--zy-bright)!important;
  border:0!important;
  border-radius:var(--wg6-pill)!important;
  padding:3px 9px!important;
  font-size:11.5px!important;
}
html:root:root:root:root:root:root body .focused-model-description.focused-model-description{
  color:var(--wg6-muted)!important;
  font-size:13px!important;
  line-height:1.6!important;
}
html:root:root:root:root:root:root body .focused-model-meta.focused-model-meta{ gap:10px!important; flex-wrap:wrap!important; }
html:root:root:root:root:root:root body .model-meta-item.model-meta-item em{ color:var(--wg6-muted-2)!important; font-size:11.5px!important; }
html:root:root:root:root:root:root body .focused-model-status.focused-model-status{ color:var(--zy-1)!important; }
html:root:root:root:root:root:root body .model-subscribe.model-subscribe{
  background:var(--wg6-cta)!important;
  color:var(--wg6-cta-fg)!important;
  border:0!important;
  border-radius:var(--wg6-pill)!important;
  width:100%!important;
  min-height:48px!important;
  margin-top:10px!important;
}
html:root:root:root:root:root:root body .model-subscribe.model-subscribe small{ color:inherit!important; opacity:.72!important; }

/* ------------------------------------------- 11) لافتة نفاد الحصة */
html:root:root:root:root:root:root body .quota-notice.quota-notice{
  background:var(--wg6-card-2)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:20px!important;
  box-shadow:none!important;
  padding:14px 16px!important;
  margin:0 0 10px!important;
  display:grid!important;
  gap:6px!important;
  text-align:start!important;
}
html:root:root:root:root:root:root body .quota-notice.quota-notice>strong{
  font-size:16.5px!important;
  font-weight:600!important;
  color:var(--zy-text)!important;
  display:block!important;
}
html:root:root:root:root:root:root body .quota-notice.quota-notice>p{
  font-size:13px!important;
  line-height:1.65!important;
  color:var(--wg6-muted)!important;
  margin:0!important;
}
html:root:root:root:root:root:root body .quota-notice.quota-notice>div{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:6px!important;
}
html:root:root:root:root:root:root body .quota-notice.quota-notice>div>button{
  flex:1 1 auto!important;
  min-height:46px!important;
  border-radius:var(--wg6-pill)!important;
  border:1px solid var(--wg6-hair-2)!important;
  background:transparent!important;
  color:var(--zy-text)!important;
  font-size:14px!important;
  font-weight:500!important;
}
html:root:root:root:root:root:root body .quota-notice.quota-notice>div>button:first-child{
  flex:1 1 100%!important;
  background:var(--wg6-cta)!important;
  color:var(--wg6-cta-fg)!important;
  border:0!important;
  font-weight:600!important;
}

/* ------------------------- 12) بطاقة الكود: إصلاح انكسار الرأس المؤكَّد */
html:root:root:root:root:root:root body .code-card.code-card{
  background:var(--wg6-card)!important;
  border:1px solid var(--wg6-hair)!important;
  border-radius:var(--wg6-r)!important;
  margin:12px 0!important;
}
html:root:root:root:root:root:root body .code-card.code-card>header{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  row-gap:8px!important;
  padding:10px 12px!important;
  border-bottom:1px solid var(--wg6-hair)!important;
  font-size:12px!important;
}
/* الاسم يأخذ سطره كاملاً ⇒ لا يتيتّم أي زر في سطر ثانٍ بمفرده */
html:root:root:root:root:root:root body .code-card.code-card>header>span:first-child{
  flex:1 1 100%!important;
  margin-inline-end:0!important;
  font-size:12.5px!important;
  font-weight:600!important;
  color:var(--zy-text)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html:root:root:root:root:root:root body .code-card.code-card>header>button{
  flex:0 0 auto!important;
  min-height:36px!important;
  padding:6px 12px!important;
  border-radius:var(--wg6-pill)!important;
  border:1px solid var(--wg6-hair-2)!important;
  background:transparent!important;
  color:var(--zy-text)!important;
  font-size:12.5px!important;
}
html:root:root:root:root:root:root body .code-card.code-card>header>button:hover{ background:var(--wg6-card-2)!important; }
html:root:root:root:root:root:root body .code-card.code-card pre{
  font-size:13px!important;
  line-height:1.75!important;
  padding:14px!important;
}
html:root:root:root:root:root:root body .code-card.code-card .code-expand.code-expand{
  border-radius:0!important;
  min-height:44px!important;
  color:var(--zy-bright)!important;
}

/* --------------------------------------------------- 13) الأزرار */
html:root:root:root:root:root:root body .settings-dialog .settings-primary.settings-primary,
html:root:root:root:root:root:root body .settings-primary.settings-primary{
  background:var(--wg6-cta)!important;
  color:var(--wg6-cta-fg)!important;
  border:0!important;
  border-radius:var(--wg6-pill)!important;
  min-height:48px!important;
  padding:12px 20px!important;
  font-size:15px!important;
  font-weight:600!important;
  box-shadow:none!important;
}
html:root:root:root:root:root:root body .settings-dialog .settings-button.settings-button,
html:root:root:root:root:root:root body .settings-button.settings-button{
  background:transparent!important;
  border:1px solid var(--wg6-hair-2)!important;
  border-radius:var(--wg6-pill)!important;
  color:var(--zy-text)!important;
  min-height:46px!important;
  padding:10px 18px!important;
  font-size:14.5px!important;
  box-shadow:none!important;
}
html:root:root:root:root:root:root body .settings-primary.settings-primary:disabled,
html:root:root:root:root:root:root body .settings-button.settings-button:disabled{
  opacity:.45!important;
  background:var(--wg6-card-2)!important;
  color:var(--wg6-muted)!important;
  border-color:transparent!important;
}
html:root:root:root:root:root:root body .settings-danger.settings-danger{
  background:transparent!important;
  border:0!important;
  color:#ef5f6b!important;
  font-weight:600!important;
  min-height:46px!important;
}
html:root:root:root:root:root:root body .settings-dialog :focus-visible,
html:root:root:root:root:root:root body .chat-sidebar :focus-visible,
html:root:root:root:root:root:root body .focused-model-menu :focus-visible,
html:root:root:root:root:root:root body .code-card :focus-visible{
  outline:2px solid var(--zy-1)!important;
  outline-offset:2px!important;
}

/* ------------------------------- 14) الهاتف: شاشة كاملة + عمود واحد */
@media (max-width:899px){
  html:root:root:root:root:root:root body .settings-dialog.settings-dialog{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    max-width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
  }
  html:root:root:root:root:root:root body .settings-dialog.settings-dialog .settings-layout{
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    flex:1!important;
    min-height:0!important;
  }
  html:root:root:root:root:root:root body .settings-layout.settings-layout>nav{
    border-inline-end:0!important;
    border-bottom:1px solid var(--wg6-hair)!important;
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    align-content:start!important;
  }
  html:root:root:root:root:root:root body .settings-nav-search.settings-nav-search,
  html:root:root:root:root:root:root body .settings-nav-group.settings-nav-group,
  html:root:root:root:root:root:root body .settings-nav-empty.settings-nav-empty{ grid-column:1/-1!important; }
  html:root:root:root:root:root:root body .settings-layout.settings-layout>nav button{ min-height:56px!important; font-size:13.5px!important; }
  html:root:root:root:root:root:root body .settings-content.settings-content{ padding:14px 12px calc(24px + var(--wg-safe-b,0px))!important; }
  html:root:root:root:root:root:root body .settings-content.settings-content{ display:block!important; }
}
@media (max-width:430px){
  html:root:root:root:root:root:root body .settings-layout.settings-layout>nav{ grid-template-columns:1fr 1fr!important; max-height:none!important; overflow:visible!important; }
  html:root:root:root:root:root:root body .settings-layout.settings-layout>nav button{ min-height:48px!important; font-size:12.5px!important; }
  html:root:root:root:root:root:root body .settings-section-title.settings-section-title{ font-size:21px!important; }
  html:root:root:root:root:root:root body .welcome-title.welcome-title{ font-size:26px!important; }
  html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile>strong.settings-plan-tile-price{ font-size:28px!important; }
}

/* ------------------------------- 15) تابلت مستقل + كمبيوتر منظّم */
@media (min-width:600px) and (max-width:1023px){
  html:root:root:root:root:root:root body .settings-plans-grid.settings-plans-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html:root:root:root:root:root:root body .settings-window-grid.settings-window-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html:root:root:root:root:root:root body .settings-appearance .settings-colors.settings-colors{ grid-template-columns:repeat(auto-fit,minmax(104px,1fr))!important; }
  html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar>div:first-child{ width:min(46vw,360px)!important; }
  /* التابلت حالة مستقلة: ثلاثة أعمدة أقسام بدل عمودين الهاتف */
  html:root:root:root:root:root:root body .settings-layout.settings-layout>nav{ grid-template-columns:repeat(3,minmax(0,1fr))!important; }
}
@media (min-width:1024px){
  html:root:root:root:root:root:root body .settings-dialog.settings-dialog{
    border-radius:24px!important;
    border:1px solid var(--wg6-hair-2)!important;
    height:min(780px,92dvh)!important;
    max-height:min(780px,92dvh)!important;
    width:min(1080px,100%)!important;
    max-width:min(1080px,100%)!important;
    margin:auto!important;
  }
  html:root:root:root:root:root:root body .settings-layout.settings-layout{
    display:grid!important;
    grid-template-columns:minmax(0,246px) minmax(0,1fr)!important;
  }
  html:root:root:root:root:root:root body .settings-layout.settings-layout>nav{
    display:flex!important;
    flex-direction:column!important;
    border-inline-end:1px solid var(--wg6-hair)!important;
    border-bottom:0!important;
    max-height:none!important;
  }
  html:root:root:root:root:root:root body .settings-section-title.settings-section-title{ text-align:start!important; font-size:22px!important; }
  html:root:root:root:root:root:root body .settings-plans-grid.settings-plans-grid{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important; }
  html:root:root:root:root:root:root body .settings-window-grid.settings-window-grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important; }
  html:root:root:root:root:root:root body .settings-content.settings-content{ padding:20px 26px 32px!important; }
  html:root:root:root:root:root:root body .chat-welcome.chat-welcome{ max-width:720px!important; }
}
@media (min-width:1280px){
  html:root:root:root:root:root:root body .settings-content.settings-content{ padding:24px 34px 40px!important; }
  html:root:root:root:root:root:root body .settings-plans-grid.settings-plans-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important; }
}

/* ----------------------------------------- 16) الوضع الفاتح + الوصول */
html[data-theme="light"]:root:root:root:root:root:root body .settings-dialog.settings-dialog{ background:#f7f5ef!important; }
html[data-theme="light"]:root:root:root:root:root:root body .chat-composer.chat-composer{ border-color:rgba(0,0,0,.10)!important; }
html[data-theme="light"]:root:root:root:root:root:root body .focused-model-menu.focused-model-menu{ background:#fffdf8!important; }
html[data-theme="light"]:root:root:root:root:root:root body .focused-model-trigger.focused-model-trigger:hover{ background:rgba(0,0,0,.05)!important; }
@media (prefers-reduced-motion:reduce){
  html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar button,
  html:root:root:root:root:root:root body .settings-layout.settings-layout nav button{ transition:none!important; }
}
@media (forced-colors:active){
  html:root:root:root:root:root:root body .settings-plan-tile.settings-plan-tile,
  html:root:root:root:root:root:root body .settings-card.settings-card,
  html:root:root:root:root:root:root body .focused-model-option.focused-model-option{ border:1px solid ButtonText!important; }
}

/* ------------------------------- 18) أنميشن فتح الدرج (سبب جذري مقيس) --------
   البلاغ: «أريد أنميشن عند فتح هذا [الدرج]».
   السبب الجذري: responsive-workspace.css تضع الحالة المغلقة display:none!important،
   والمتصفح **لا يبدأ انتقالاً من display:none** (لا يوجد before-change style مُصيَّر)
   ⇒ الانتقال المُعرَّف أصلاً في motion.css (transform/opacity .28s) كان ميتاً تماماً.
   الحل: تصبح البداية «مُصيَّرة لكن خارج الشاشة ومخفيّة عن العين واللمس» فيعمل الانتقال
   الفعلي في الاتجاهين: انزلاق (transform) + تلاشي (opacity) عند الفتح والإغلاق. */
@keyframes wg6-scrim-in{ from{ opacity:0; } to{ opacity:1; } }
@media (max-width:899px){
  /* مغلق: بداية مُصيَّرة خارج الشاشة (لا display:none) */
  html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar[data-open="false"]{
    display:block!important;
    width:min(300px,85vw)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    opacity:0!important;
    transform:translateX(100%)!important;
    will-change:transform,opacity;
    transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s linear .34s!important;
  }
  /* مفتوح: يصبح في مكانه الطبيعي */
  html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar[data-open="true"]{
    opacity:1!important;
    transform:none!important;
    will-change:transform,opacity;
    transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .24s ease,visibility 0s linear 0s!important;
  }
  /* اللاتيني معاكس الجهة (الطبقة الأصلية تعمل بهذا المنطق) */
  html:root:root:root:root:root:root body [dir="ltr"] .chat-sidebar.chat-sidebar[data-open="false"]{
    transform:translateX(-100%)!important;
  }
  /* خلفية الدرج تُركَّب لحظة الفتح ⇒ لا انتقال ممكن لعنصر جديد، فالدخول بالمفتاح */
  html:root:root:root:root:root:root body .mobile-sidebar-backdrop.mobile-sidebar-backdrop{
    animation:wg6-scrim-in .3s ease both!important;
  }
}
/* احترام تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  html:root:root:root:root:root:root body .chat-sidebar.chat-sidebar{
    transition:none!important;
    animation:none!important;
  }
  html:root:root:root:root:root:root body .mobile-sidebar-backdrop.mobile-sidebar-backdrop{
    animation:none!important;
  }
}