/* ============================================================================
   ZyRox Engineering — mobile-first-v3.css (v1.0.0)
   الدفعة الثالثة — تُحمَّل في الرأس مباشرة بعد mobile-first-v2.css، وتتجاوز
   الطبقات اللاحقة (responsive-workspace / phone-polish / brand-experience /
   experience-next) عبر نمط html body + صنف مضاعف + !important، دون حذف أي قاعدة
   قائمة. كل القواعد مضافة (additive) وتخصّ الفجوات الحقيقية المتبقية:

     1) الجوال — الرأس: شريط واحد مضغوط بسطر واحد بدل سطرين، مع إظهار هوية
        النموذج المختصر (كان الاسم يختفي تمامًا ≤480px فتبقى رقاقة بلا اسم)،
        وهدف لمس ≥44px للرقاقة دون أن تتجاوز حاويتها فتلامس أزرار الأدوات.
     2) منطقة الكتابة: بقاء مربّع الكتابة ظاهرًا فوق لوحة مفاتيح الهاتف عبر
        ارتفاع الهيكل المحسوب من ‎--wg-kb‎ (كان ‎100dvh‎ فقط ويتجاهل اللوحة).
     3) المساحات الآمنة (شريط المتصفح/النتوء/مؤشّر الصفحة) في المؤلّف والرأس.
     4) منع تكبير iOS عند الكتابة في الحقول الظاهرة للمستخدم ‎≤1024px‎.
     5) التابلت كتخطيط مستقل ‎601–1023px‎ (اقتراحان جنبًا إلى جنب، شعار وحجم
        عنوان ودبابيس مناسبة، وأهداف لمس ≥44px) بدل تكبير واجهة الهاتف.
     6) عرض درج القائمة الجانبية على التابلت ‎601–899px‎ حسب المساحة المتاحة.
     7) الشاشات القصيرة/الأفقية: ضغط الرأس والترحيب حتى لا يستهلكا الشاشة.
     8) الكمبيوتر: سقف عرض مقروء لنصّ الرد وشعار أكبر ‎112px‎ ‎≥1024px‎.
     9) النوافذ المنبثقة الصغيرة: سقف ارتفاع بدلالة ‎dvh‎ وأعمدة آمنة.
    10) رفع الإشعار وشرائط الزائر أعلى الشاشة على الجوال (كانت تغطي المؤلّف).
    11) توازن الوضع الفاتح لشريحة الخطة في القائمة الجانبية (تباين مقروء).

   لا يوجد أي تغيير في البنية أو الجافاسكربت، ولا حذف لأي قاعدة سابقة.
   حقوق المطور ZyRox — wormgpt.cam
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1) الجوال — الرأس: سطر واحد مضغوط + هوية النموذج المختصرة (‎≤600px‎)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  html body .chat-header.chat-header {
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    gap: 4px !important;
    padding: 6px 10px !important;
    padding-top: calc(6px + var(--wg-safe-t, 0px)) !important;
  }

  /* المجموعة الأولى (القائمة + النموذج): تتمدد وتتقلّص بلا دفع */
  html body .chat-header.chat-header > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }
  html body .chat-header.chat-header > div:first-child > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* مجموعة الأدوات (المظهر/المشاركة/التصدير): تبقى بجانبها لا في سطر ثانٍ */
  html body .chat-header.chat-header > div:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  /* هدف لمس مريح ‎≥44px‎ لكل أزرار الرأس وصفّ المؤلّف (كانت ‎38–40px‎) */
  html body .chat-header.chat-header button,
  html body .composer-shell.composer-shell button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* رقاقة النموذج: مرنة مع قصّ أنيق بدل الاختفاء، وهدف لمس ‎≥44px‎.
     ‎max-width:100%‎ يمنع تجاوز الرقاقة لحاويتها (كانت تتجاوزها ‎≈30px‎
     فتلامس شيفرون الرقاقة أزرار الأدوات على الهواتف الضيقة). */
  html body .chat-header.chat-header .focused-model-trigger.focused-model-trigger {
    flex: 1 1 auto !important;
    min-width: 44px !important;
    max-width: 100% !important;
    width: auto !important;
    min-height: 44px !important;
  }
  html body .chat-header.chat-header .focused-model-trigger.focused-model-trigger > span:not(.model-trigger-emblem) {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* على أصغر الهواتف ‎≤360px‎: تبقى رقاقة النموذج ظاهرة بقصّ أنيق بدل إخفائها،
   فيعرف المستخدم النموذج النشط دون أن تتجاوز الرقاقة حاويتها. */
@media (max-width: 360px) {
  html body .chat-header.chat-header .focused-model-trigger.focused-model-trigger {
    max-width: 56vw !important;
  }
  html body .chat-header.chat-header .focused-model-trigger.focused-model-trigger > span:not(.model-trigger-emblem) {
    display: block !important;
    max-width: 22vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ----------------------------------------------------------------------------
   2) الجوال — ارتفاع الهيكل واعيًا بلوحة المفاتيح (‎≤899px‎)
   modern-ui.js ينشر ‎--wg-kb‎؛ بخصمه يبقى المؤلّف وأزرار الإرسال فوق اللوحة.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  html body .chat-shell.chat-shell {
    height: calc(100dvh - var(--wg-kb, 0px)) !important;
  }
}

/* ----------------------------------------------------------------------------
   3) المساحات الآمنة للمؤلّف (النتوء الأفقي + مؤشّر الصفحة السفلي)
   -------------------------------------------------------------------------- */
html body .composer-shell.composer-shell {
  padding-left: max(12px, var(--wg-safe-l, 0px)) !important;
  padding-right: max(12px, var(--wg-safe-r, 0px)) !important;
  padding-bottom: max(12px, var(--wg-safe-b, 0px)) !important;
}

/* ----------------------------------------------------------------------------
   4) منع تكبير iOS التلقائي في الحقول الظاهرة للمستخدم (‎≤1024px‎)
   الحد الأدنى الآمن هو ‎16px‎؛ نطبّقه على البحث ومنتقيات النصّ وحقول الإعدادات.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  html body .chat-sidebar.chat-sidebar input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html body .settings-content input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html body .settings-content textarea,
  html body .settings-content select,
  html body [style*="padding-top: 14vh"] input,
  html body [style*="right: 0; bottom: 0"] textarea {
    font-size: 16px !important;
  }
}

/* ----------------------------------------------------------------------------
   5) التابلت — تخطيط مستقل (‎601–1023px‎) لا نسخة مكبّرة من الهاتف
   -------------------------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 1023px) {
  html body .chat-content.chat-content {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* أهداف لمس ‎≥44px‎ على التابلت: طبقات الهاتف (‎≤900px‎) تخفضها إلى ‎40px‎ */
  html body .chat-header.chat-header button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html body .composer-shell.composer-shell button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  html body .chat-welcome.chat-welcome {
    max-width: 680px !important;
    padding-top: clamp(24px, 6vh, 56px) !important;
    padding-bottom: 28px !important;
  }

  /* الشعار والأحجام تتناسب مع مساحة التابلت */
  html body .chat-welcome.chat-welcome .welcome-brand,
  html body .chat-welcome.chat-welcome .welcome-brand img {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    min-height: 104px !important;
    max-width: 104px !important;
    max-height: 104px !important;
    margin-bottom: 24px !important;
  }
  html body .chat-welcome.chat-welcome .welcome-title {
    font-size: 30px !important;
  }
  html body .chat-welcome.chat-welcome .welcome-subtitle {
    font-size: 16px !important;
    margin-bottom: 28px !important;
  }

  /* الاقتراحات في عمودين عند توفّر عرض كافٍ */
  html body .welcome-questions.welcome-questions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html body .welcome-questions.welcome-questions > button {
    min-height: 72px !important;
    padding: 15px 16px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* ----------------------------------------------------------------------------
   6) التابلت — عرض درج القائمة الجانبية حسب المساحة (‎601–899px‎)
   -------------------------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 899px) {
  html body .chat-sidebar.chat-sidebar[data-open="true"] {
    width: min(360px, 62vw) !important;
  }
}

/* ----------------------------------------------------------------------------
   7) الشاشات القصيرة/الأفقية — ضغط الرأس والترحيب
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (max-width: 1024px) {
  html body .chat-header.chat-header {
    min-height: 48px !important;
  }
  html body .chat-content.chat-content {
    padding-top: 16px !important;
  }
  html body .chat-welcome.chat-welcome {
    min-height: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  html body .chat-welcome.chat-welcome .welcome-brand,
  html body .chat-welcome.chat-welcome .welcome-brand img {
    display: none !important;
  }
  html body .chat-welcome.chat-welcome .welcome-title {
    font-size: 24px !important;
  }
  html body .chat-welcome.chat-welcome .welcome-subtitle {
    font-size: 13.5px !important;
    margin-bottom: 16px !important;
  }
  html body .welcome-questions.welcome-questions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html body [style*="padding-top: 14vh"] {
    padding-top: 6vh !important;
  }
}

/* ----------------------------------------------------------------------------
   8) الكمبيوتر — سقف عرض مقروء لنصّ الرد وشعار ‎112px‎ (‎≥1024px‎)
   رسائل مساعدة WormGPT كانت تُعرض بعرض شبه كامل فوق ‎900px‎ فتصعب قراءتها.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html body [style*="font-size: 15.5px"]:not(textarea) {
    max-width: 768px !important;
  }

  /* الشعار على الكمبيوتر: الطبقات اللاحقة تسرّب ‎80px‎ (أصغر من التابلت) —
     نُعيد المقاس المقصود ‎112px‎ ليبقى التدرّج ‎68 ▸ 104 ▸ 112‎ منطقيًا. */
  html body .chat-welcome.chat-welcome .welcome-brand,
  html body .chat-welcome.chat-welcome .welcome-brand img {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    min-height: 112px !important;
    max-width: 112px !important;
    max-height: 112px !important;
    margin-bottom: 24px !important;
  }
}

/* ----------------------------------------------------------------------------
   9) النوافذ المنبثقة على الجوال — سقف ارتفاع بدلالة dvh وأعمدة آمنة
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  html body [style*="max-height: 84vh"] {
    max-height: calc(100dvh - 32px) !important;
    border-radius: 18px !important;
  }
  html body [style*="max-height: 50vh"] {
    max-height: 46dvh !important;
  }
  html body [style*="padding-top: 14vh"] {
    padding-top: 10vh !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ----------------------------------------------------------------------------
   10) الإشعار وشرائط الزائر — أعلى الشاشة على الجوال حتى لا تغطي المؤلّف
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  html body [style*="bottom: 92px"] {
    top: calc(var(--wg-safe-t, 0px) + 64px) !important;
    bottom: auto !important;
    max-width: calc(100vw - 24px) !important;
  }
  html body #worm-guest-banner {
    top: calc(var(--wg-safe-t, 0px) + 64px) !important;
    bottom: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   11) الوضع الفاتح — تباين شريحة الخطة في القائمة الجانبية
   اللون المضمّن ‎#6f8f7e‎ يقلّ تباينه على خلفية فاتحة؛ نستخدم أخضر أغمق مقروءًا.
   -------------------------------------------------------------------------- */
html[data-theme="light"] body .account-trigger.account-trigger > div > div:last-child {
  color: #3f6b52 !important;
}