/* ============================================================
   RESPONSIVE FIX — جميع المساعدين (الحاليون والمستقبليون)
   يُحمَّل من main.css — يغطي جميع الشاشات
   تاريخ: 2026-03-26
   ============================================================ */

/* ---- إصلاح الـ Viewport Meta (ضمان عدم التكبير التلقائي) ---- */
input, select, textarea {
  font-size: 16px !important; /* يمنع iOS من التكبير التلقائي عند الفوكس */
}

/* ============================================================
   صفحة المساعدين الرئيسية (assistants.php)
   المشكلة: grid-template-columns:280px 1fr ثابتة
   ============================================================ */

/* الحاوية الرئيسية للمحادثة */
.assistants-chat-wrapper {
  display: grid;
  grid-template-columns: 280px 1fr;
}

/* بطاقات المساعدين في الأسفل */
.assistants-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ============================================================
   مساعد مُهندس الواقع (reality-architect)
   ============================================================ */

/* Split-Screen الرئيسي */
.ra-split-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* بطاقات الإجراءات */
.ra-action-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ============================================================
   مساعد مُهندس التعلم السعودي (saudi-learning-architect)
   ============================================================ */

.sla-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.sla-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sla-output-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ============================================================
   عناصر مشتركة بين جميع المساعدين
   ============================================================ */

/* الجداول — قابلة للتمرير أفقياً على الهواتف */
.assistant-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

.assistant-table-wrapper table {
  min-width: 500px;
  width: 100%;
}

/* أزرار التصدير والمشاركة */
.assistant-export-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* حقل الإدخال + زر الإرسال */
.assistant-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ============================================================
   TABLET — 1024px
   ============================================================ */
@media (max-width: 1024px) {
  /* صفحة المساعدين — تقليل عرض الـ Sidebar */
  .assistants-chat-wrapper,
  div[style*="grid-template-columns:280px 1fr"],
  div[style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 240px 1fr !important;
  }

  /* مُهندس التعلم — 2 أعمدة بدلاً من 4 */
  .sla-mode-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* مُهندس الواقع — Split-Screen يبقى لكن بنسب أفضل */
  .ra-split-screen {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* ============================================================
   MOBILE — 768px
   ============================================================ */
@media (max-width: 768px) {

  /* ---- صفحة المساعدين الرئيسية ---- */

  /* تحويل Sidebar + Chat من عمودين إلى عمود واحد */
  .assistants-chat-wrapper,
  div[style*="grid-template-columns:280px 1fr"],
  div[style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Sidebar المساعدين — تحويله إلى شريط أفقي قابل للتمرير */
  div[style*="border-left:1px solid var(--border-light)"],
  div[style*="border-right:1px solid var(--border-light)"],
  div[style*="border-left: 1px solid var(--border-light)"],
  div[style*="border-right: 1px solid var(--border-light)"] {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    max-height: 130px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 12px !important;
    -webkit-overflow-scrolling: touch;
  }

  /* عناصر قائمة المساعدين في الـ Sidebar — أفقية */
  div[style*="border-left:1px solid var(--border-light)"] > div,
  div[style*="border-right:1px solid var(--border-light)"] > div,
  div[style*="border-left: 1px solid var(--border-light)"] > div,
  div[style*="border-right: 1px solid var(--border-light)"] > div {
    flex-shrink: 0 !important;
    min-width: 120px !important;
    margin-bottom: 0 !important;
  }

  /* منطقة المحادثة — ارتفاع مناسب */
  #chatMessages {
    max-height: 350px !important;
    min-height: 250px !important;
  }

  /* حقل الإدخال + زر الإرسال — تكدس عمودي على الشاشات الصغيرة جداً */
  .assistant-input-row,
  div[style*="display:flex;gap:10px;align-items:center"] {
    flex-wrap: wrap;
  }

  /* ---- مُهندس الواقع ---- */
  .ra-split-screen,
  div[style*="display:grid;grid-template-columns:1fr 1fr"],
  div[style*="display: grid; grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ---- مُهندس التعلم السعودي ---- */
  .sla-mode-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sla-inputs-grid {
    grid-template-columns: 1fr;
  }

  /* أزرار التصدير — تكدس عمودي */
  .assistant-export-buttons,
  div[style*="display:flex;gap:12px;flex-wrap:wrap"],
  div[style*="display: flex; gap: 12px; flex-wrap: wrap"] {
    flex-direction: column !important;
  }

  /* الجداول — تمرير أفقي */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* بطاقات المساعدين في الأسفل */
  .assistants-cards-grid,
  div[style*="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))"],
  div[style*="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }

  /* نصوص الـ Hero */
  .page-title {
    font-size: 26px !important;
  }

  .page-desc {
    font-size: 15px !important;
  }

  /* padding عام للحاويات */
  .container {
    padding: 0 12px !important;
  }

  /* الرسائل في المحادثة — عرض كامل */
  div[style*="max-width:85%"],
  div[style*="max-width: 85%"] {
    max-width: 92% !important;
  }

  /* أزرار الرسائل السريعة — تمرير أفقي */
  div[style*="display:flex;gap:8px;flex-wrap:wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
}

/* ============================================================
   SMALL MOBILE — 480px
   ============================================================ */
@media (max-width: 480px) {

  /* Sidebar المساعدين — أصغر */
  div[style*="border-left:1px solid var(--border-light)"],
  div[style*="border-right:1px solid var(--border-light)"],
  div[style*="border-left: 1px solid var(--border-light)"],
  div[style*="border-right: 1px solid var(--border-light)"] {
    max-height: 110px !important;
  }

  /* عناصر الـ Sidebar — أصغر */
  div[style*="border-left:1px solid var(--border-light)"] > div,
  div[style*="border-right:1px solid var(--border-light)"] > div,
  div[style*="border-left: 1px solid var(--border-light)"] > div,
  div[style*="border-right: 1px solid var(--border-light)"] > div {
    min-width: 100px !important;
    padding: 8px !important;
  }

  /* ---- مُهندس التعلم السعودي ---- */
  .sla-mode-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* منطقة المحادثة */
  #chatMessages {
    max-height: 280px !important;
    min-height: 200px !important;
  }

  /* الـ Avatar في المحادثة */
  div[style*="width:32px;height:32px"] {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }

  /* حجم الخط في الرسائل */
  .md-reply {
    font-size: 13px !important;
  }

  /* الـ Header الداخلي للمساعدين الخاصين */
  div[style*="padding:16px 20px;border-bottom"] {
    padding: 12px !important;
  }

  /* زر الإرسال — أصغر */
  button[onclick*="sendMessage"] {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* عنوان الصفحة */
  .page-title {
    font-size: 22px !important;
  }
}

/* ============================================================
   EXTRA SMALL — 360px (iPhone SE وما شابه)
   ============================================================ */
@media (max-width: 360px) {

  .container {
    padding: 0 8px !important;
  }

  #chatMessages {
    max-height: 240px !important;
  }

  .sla-mode-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* إخفاء النص في أزرار الـ Sidebar الصغيرة */
  div[style*="border-left:1px solid var(--border-light)"] > div > div:last-child,
  div[style*="border-right:1px solid var(--border-light)"] > div > div:last-child {
    display: none !important;
  }
}