/* =====================================================================
   MAD3OOM WHATSAPP — Global Responsive Baseline
   ---------------------------------------------------------------------
   يُحمَّل في كل صفحة بعد باقي ملفات التنسيق. الهدف: ألّا تنكسر أي صفحة
   على شاشات الجوال. لا يغيّر الألوان ولا الخطوط ولا منطق المكوّنات —
   فقط قواعد المقاسات والتخطيط اللازمة للشاشات الصغيرة.

   الصفحة عربية/RTL، لذلك نستخدم الخصائص المنطقية (inline/block) حتى
   تعمل القواعد في الاتجاهين دون تكرار.
   ===================================================================== */

:root {
  --gutter-mobile: 16px;
  --tap-min: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

/* منع التمدد الأفقي من مصدر مجهول دون إخفاء المشكلة الحقيقية:
   نسمح للصفحة أن تُقصّ أفقياً فقط، ويبقى التمرير الرأسي طبيعياً. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  overflow-x: clip;          /* لا يكسر position: sticky مثل overflow: hidden */
  max-width: 100%;
}
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

/* ── الوسائط ───────────────────────────────────────────────────────── */
img, svg, video, canvas, picture, iframe, embed, object {
  max-width: 100%;
}
img, video { height: auto; }

/* ── النصوص الطويلة والروابط لا تكسر التخطيط ──────────────────────── */
p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6, label, span {
  overflow-wrap: break-word;
}
/* الروابط داخل النص الجاري تحمل غالباً عناوين URL طويلة بلا مواضع كسر.
   الفارق مهم: break-word يسمح بالكسر لكنه لا يقلّل العرض الأدنى للعنصر،
   فيظل الأب المرن يتمدّد لاستيعاب أطول «كلمة»؛ أمّا anywhere فيقلّله فعلاً.
   نحصره في النص الجاري: لو طُبّق على كل الروابط لانكمشت عناوين أشرطة
   التنقّل حتى حرف واحد في الصفوف الضيّقة. */
p a, li a, td a, dd a, figcaption a, blockquote a,
.contact-info a, .highlight-box a { overflow-wrap: anywhere; }
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre code { white-space: pre; }
:not(pre) > code { overflow-wrap: break-word; word-break: break-word; }

/* ── الجداول: تمرير أفقي بدل تمديد الصفحة ─────────────────────────── */
.table-responsive,
.mad3oom-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table-responsive > table,
.mad3oom-table-scroll > table {
  min-width: max-content;
  margin-inline: 0;
}

/* ── الحقول والأزرار ──────────────────────────────────────────────── */
input, select, textarea, button { max-width: 100%; font-family: inherit; }
textarea { resize: vertical; }

/* لحقول الإدخال عرض جوهري افتراضي (نحو 20 حرفاً) يمنعها من الانكماش داخل
   صفّ flex، فتدفع الأزرار المجاورة خارج الشاشة — كزر الإرسال في المحادثة.
   تصفير min-width يجعلها تأخذ المساحة المتبقية فعلاً. */
input, select, textarea { min-width: 0; }

/* =====================================================================
   شاشات الأجهزة اللوحية فأصغر
   ===================================================================== */
@media (max-width: 1024px) {
  /* أي شبكة بأعمدة ثابتة كثيرة تتقلّص تلقائياً بدل أن تُسحق */
  .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   الجوال
   ===================================================================== */
@media (max-width: 768px) {
  /* مساحة جانبية موحّدة للحاويات العامة */
  .container, .wrapper, .page-container, .content-wrapper {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--gutter-mobile);
    margin-inline: 0;
  }

  /* عناصر الشبكات/الفلكس تأخذ min-width:auto افتراضياً، أي أنها ترفض
     الانكماش دون العرض الجوهري لمحتواها. فسطر كود طويل أو كلمة غير قابلة
     للكسر داخل عمود يمدّ العمود — ثم الصفحة كلها — ويُبطل أي overflow:auto
     موضوع على العنصر الداخلي. تصفير min-width يُعيد للانكماش معناه. */
  :is([class*="grid"], [class*="cols"], [class*="flex"], [class*="row"],
      [class*="bar"],  [class*="group"], [class*="filter"],
      [class*="toolbar"], [class*="actions"])
  > :not(a, button, input, select, textarea, label) {
    min-width: 0;
  }

  /* شبكات: عمود واحد على الجوال */
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6,
  .stats-grid, .cards-grid, .features-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* أهداف اللمس: 44×44 كحد أدنى (توصية Apple/WCAG 2.5.5) */
  button, .btn, a.btn, [role="button"],
  input[type="submit"], input[type="button"], input[type="reset"],
  select, .tab, .nav-link {
    min-height: var(--tap-min);
  }
  /* الأزرار الأيقونية: الارتفاع وحده لا يكفي — كانت بعرض 17–31px فقط.
     نضمن مربّع 44×44 مع توسيط الأيقونة بداخله. */
  button.icon-btn, .icon-btn, .nav-btn, .menu-toggle, .sidebar-close,
  .close-btn, .back-btn, .password-toggle, .input-toggle,
  .portal-search-close, .modal-close, button.close,
  .ib-mini, .mail-list-refresh, .palette-trigger, #sidebarClose,
  .action-btn {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* استثناء صريح لمن يحتاجه (أزرار داخل خلايا ضيّقة أو لوحة رسم) */
  .btn-xs, .btn-icon-sm, .node-menu-btn, [data-tap-exempt] {
    min-width: 0;
    min-height: 0;
  }

  /* روابط التنقّل المستقلة (قوائم، تذييل، فهرس محتويات) كانت بارتفاع
     23–25px. روابط النص الجاري تبقى كما هي — استثناء WCAG 2.5.5. */
  li > a,
  .footer-links a, .footer-grid a, .table-of-contents a,
  .forgot-link, .recovery-link, .back-link, .nav-back, .gate-back-link,
  .rm-back, [class*="back-link"] {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  /* روابط أشرطة التنقّل القصيرة (مثل «حول») تحتاج عرضاً كافياً للّمس.
     نضبط الحد الأدنى للعرض فقط — دون المساس بالحشو حتى لا نُفسد
     القوائم المنسدلة التي تعتمد حشواً خاصاً بها. */
  .nav-menu a, .nav-links a, .navbar a { min-width: 32px; }

  /* روابط مباشرة داخل شريط تنقّل (بلا صنف خاص) */
  nav > a, .nav-container > a, .navbar > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  /* جداول: خط ومساحات أصغر */
  table { font-size: 0.875rem; }
  th, td { padding: 10px 8px; }

  /* الصور الكبيرة/الشعارات لا تتجاوز الشاشة */
  .logo img, .brand img, img.logo { max-height: 44px; width: auto; }
}

@media (max-width: 480px) {
  /* أشرطة التبويبات/الفلاتر أياً كان اسمها: تُمرَّر أفقياً بدل أن تمدّ
     الصفحة. width:auto يلغي أي fit-content يمنع الالتزام بعرض الشاشة. */
  .tabs, .tab-list, .tab-bar, .status-tabs, .filter-tabs, .page-tabs,
  .segmented, [class*="-tabs"] {
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .tab-list::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar, .status-tabs::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar, .page-tabs::-webkit-scrollbar,
  .segmented::-webkit-scrollbar, [class*="-tabs"]::-webkit-scrollbar { display: none; }
  .tabs > *, .tab-list > *, .tab-bar > *, .status-tabs > *,
  .filter-tabs > *, .page-tabs > *, .segmented > *, [class*="-tabs"] > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 5vw, 1.6rem); }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.35rem); }

  /* مجموعات الأزرار تتكدّس رأسياً بدل أن تتزاحم */
  .btn-group, .actions, .form-actions, .modal-actions, .button-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-group > *, .actions > *, .form-actions > *, .modal-actions > * {
    width: 100%;
  }
}

/* =====================================================================
   الشاشات الضيّقة جداً (≤420px)
   شبكات auto-fit / auto-fill بحدّ أدنى ثابت — مثل
   repeat(auto-fit, minmax(250px, 1fr)) — لا يمكن لأعمدتها النزول تحت
   ذلك الحد، فتمدّ الصفحة عندما يقلّ العرض المتاح عنه. عند هذا العرض
   يكون العمود الواحد هو التخطيط الصحيح أصلاً.
   (الأسلوب الأمثل في المصدر هو minmax(min(250px, 100%), 1fr)،
    وهذه القاعدة شبكة أمان لما لم يُكتب بهذا الشكل.)
   ===================================================================== */
@media (max-width: 420px) {
  [class*="grid"] { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   النوافذ المنبثقة (Modals)
   نستهدف الصندوق الداخلي فقط — لا الطبقة/الخلفية (overlay) التي يجب
   أن تبقى بعرض الشاشة كاملاً.
   ===================================================================== */
@media (max-width: 640px) {
  .modal-content, .modal-box, .modal-dialog, .modal-card,
  .dialog-content, .popup-content, .sheet-content,
  .mcp-modal-box, .app-modal {
    width: 100%;
    max-width: calc(100vw - 24px);
    /* dvh بدل vh: شريط المتصفح على الجوال يتغيّر ارتفاعه أثناء التمرير،
       فـ 90vh تجعل أسفل النافذة يختفي خلفه. */
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: auto;
  }

  /* مساحات داخلية أصغر حتى يبقى للمحتوى مكان */
  .modal-header, .mcp-modal-header, .app-modal-header { padding-inline: 16px; }
  .modal-body, .mcp-modal-body, .app-modal-body { padding-inline: 16px; }
  .modal-footer, .mcp-modal-footer { padding-inline: 16px; flex-wrap: wrap; }

  /* الطبقة الخلفية: تمركز + هامش آمن أسفل الشاشة */
  .modal, .modal-overlay, .dialog-overlay, .popup-overlay,
  .mcp-modal, .app-modal-overlay {
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  /* أزرار الإجراءات داخل النوافذ: عمود كامل العرض يسهل ضغطه */
  .modal-actions, .app-modal .form-actions, .mcp-modal-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-actions > .btn, .modal-actions > button,
  .mcp-modal-footer > .btn, .mcp-modal-footer > button { width: 100%; }
}

/* =====================================================================
   iOS: يمنع تكبير الصفحة تلقائياً عند التركيز على حقل خطه < 16px
   ===================================================================== */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
}

/* =====================================================================
   المناطق الآمنة على الأجهزة ذات القصّة (notch / home indicator)
   ===================================================================== */
@media (max-width: 768px) {
  .fixed-bottom, .bottom-bar, .sticky-footer, .mobile-action-bar {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
}

/* =====================================================================
   مساعدات عامة يمكن استخدامها في أي صفحة
   ===================================================================== */
.hide-on-mobile { }
.show-on-mobile { display: none; }
@media (max-width: 768px) {
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: initial; }
  .stack-on-mobile { flex-direction: column !important; align-items: stretch !important; }
  .full-width-mobile { width: 100% !important; max-width: 100% !important; }
  .scroll-x-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   ═══ خاص بلوحة تحكم واتساب ═══
   ===================================================================== */

/* ---------------------------------------------------------------------
   زر القائمة + طبقة التعتيم (يضيفهما mobile-nav.js)
   مخفيان تماماً على الشاشات الكبيرة.
   --------------------------------------------------------------------- */
.mobile-nav-toggle,
.mobile-nav-close,
.mobile-nav-overlay { display: none; }

@media (max-width: 900px) {

  /* ── زر الهامبرغر داخل الشريط العلوي ── */
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-inline-end: var(--space-3, 12px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
  }
  .mobile-nav-toggle svg { width: 22px; height: 22px; }

  /* ── زر الإغلاق داخل الدرج ── */
  .mobile-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-md, 12px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .mobile-nav-close svg { width: 20px; height: 20px; }

  /* ── طبقة التعتيم ── */
  .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .mobile-nav-overlay[hidden] { display: none; }

  /* ── الدرج نفسه ──
     الصفحتان تستخدمان هيكلين مختلفين: لوحة التحكم تثبّت الشريط
     (position: fixed) وصفحة الرد الآلي تجعله عنصر flex داخل .main
     وتُخفيه تماماً تحت 768px. نوحّدهما هنا في درج منزلق واحد.
     ونلغي وضع "الأيقونات فقط" القادم من sidebar-collapsed.css. */
  .sidebar {
    display: flex !important;              /* autoreply كان يخفيه تماماً */
    position: fixed;
    inset-block: 0;
    /* في RTL يكون inline-start هو الحافة اليمنى — وهو المكان الصحيح للدرج.
       نصفّر الجانب المقابل صراحةً حتى لا تتعارض قاعدة right/left سابقة. */
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: min(86vw, 300px);
    max-width: 300px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);          /* RTL: الشريط على اليمين */
    transition: transform var(--transition, 0.25s ease);
    z-index: 200;
    box-shadow: none;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  html[dir="ltr"] .sidebar { transform: translateX(-100%); }

  body.mobile-nav-open .sidebar {
    transform: translateX(0);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
  }
  html[dir="ltr"] body.mobile-nav-open .sidebar { box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35); }

  /* المحتوى يأخذ الشاشة كاملة — لا مساحة محجوزة للشريط */
  .main-content { margin-right: 0; margin-left: 0; }

  /* صفحة الرد الآلي: أعِد إظهار نصوص القائمة التي أخفاها تصميم الشريط الضيق */
  .sidebar .nav-item span,
  .sidebar .logo-text,
  .sidebar .sb-sec,
  .sidebar .sb-stats,
  .sidebar .sb-footer { display: revert; }
  .sidebar .nav-item { justify-content: flex-start; padding: 10px 12px; min-height: 44px; }

  /* ── محتوى الدرج: الأسماء الكاملة بدل شريط الأيقونات ──
     نستخدم نفس قوائم .nav-flyout الموجودة في الصفحة (تحمل عنوان القسم
     والنص الكامل لكل عنصر) ونعرضها ثابتة بدل ظهورها بالـ hover. */
  .sidebar-header { justify-content: flex-start; padding: var(--space-4, 16px) var(--space-5, 20px); }
  .sidebar-brand { display: flex; }
  .sidebar-nav { overflow: visible; }

  .nav-section > .nav-group { display: none; }   /* شريط الأيقونات المضغوط */

  .nav-flyout {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--space-4, 16px);
  }
  .nav-flyout-label { display: block; padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-2, 8px); }
  .nav-flyout .nav-item {
    justify-content: flex-start;
    padding: 12px var(--space-4, 16px);
    min-height: 48px;
  }
  .nav-flyout .nav-item.active::before { right: 0; left: auto; }
  .nav-flyout .nav-label { display: block; white-space: normal; }
  .nav-flyout .nav-badge { display: inline-block; }

  /* بطاقة المستخدم وأزرار الأسفل تعود بنصوصها */
  .user-info { display: block; }
  .user-card { justify-content: flex-start; }
  .sidebar-footer .btn { justify-content: flex-start; padding: 10px var(--space-4, 16px) !important; }
  .sidebar-footer .btn-label-text { display: inline; }

  /* ── الشريط العلوي ── */
  .top-header {
    padding: 0 var(--space-4, 16px);
    gap: var(--space-2, 8px);
  }
  .header-title { font-size: var(--font-size-base, 15px); }
  .header-subtitle { display: none; }
  .header-actions { gap: var(--space-2, 8px); flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------
   صندوق الوارد على الجوال: نمط "قائمة ← محادثة" بملء الشاشة
   بدل تكديس قائمة بارتفاع 200px فوق نافذة محادثة مضغوطة.
   يتكفّل inbox-mobile.js بإضافة .wa-mobile-chat-open و زر الرجوع.
   --------------------------------------------------------------------- */
.wa-mobile-back { display: none; }

@media (max-width: 820px) {
  .wa-inbox-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    position: relative;
  }

  /* شريط القنوات يصير صفاً أفقياً فوق القائمة بدل عمود يقضم العرض */
  .wa-channel-rail {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-inline-start: 0;
    border-block-end: 1px solid var(--wa-border, var(--border-subtle));
    padding: 8px;
  }
  .wa-rail-list { display: flex; flex-direction: row; gap: 8px; padding: 0; }
  .wa-rail-item { flex: 0 0 auto; }

  /* القائمة تملأ الشاشة */
  .wa-inbox-sidebar {
    max-height: none;
    height: 100%;
    min-height: 0;
    border-bottom: 0;
    border-left: 0;
  }

  /* نافذة المحادثة مخفية حتى تُفتح محادثة */
  .wa-chat-window {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--wa-bg-primary, var(--bg-surface));
    transform: translateX(100%);
    transition: transform 0.22s ease;
    visibility: hidden;
  }
  html[dir="ltr"] .wa-chat-window { transform: translateX(-100%); }

  body.wa-mobile-chat-open .wa-chat-window {
    transform: translateX(0);
    visibility: visible;
  }

  /* زر الرجوع داخل رأس المحادثة */
  .wa-mobile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    margin-inline-end: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
  }
  .wa-mobile-back svg { width: 22px; height: 22px; }

  /* لوحة التفاصيل تبقى خارج الخدمة على الجوال */
  .wa-details-panel { display: none; }

  .wa-bubble { max-width: 86%; }
  .wa-composer { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------------
   لوحات ورسوم بيانية على الجوال
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .page-content { padding: var(--space-4, 16px) var(--space-3, 12px); }
  .page-header { flex-direction: column; align-items: stretch; gap: var(--space-3, 12px); }
  .welcome-banner { padding: var(--space-5, 20px); flex-direction: column; text-align: center; }
  .chart-container { min-height: 200px; }
  .pro-grid-2, .pro-grid-3 { grid-template-columns: minmax(0, 1fr); }

  /* شرائط التبويب تمرّر أفقياً بدل أن تتزاحم */
  .tabs, .tab-list, .wa-tabs, .segmented {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .tab-list::-webkit-scrollbar,
  .wa-tabs::-webkit-scrollbar, .segmented::-webkit-scrollbar { display: none; }
  .tabs > *, .tab-list > *, .wa-tabs > *, .segmented > * { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------
   صفحة الرد الآلي (محرّر التدفق) على الجوال
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* شريط التبويبات: تمرير أفقي بدل سحق النصوص في 5 أعمدة */
  .tab-bar {
    margin: 0 14px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; padding: 10px 14px; min-height: 44px; white-space: nowrap; }

  /* رأس الصفحة: الإحصاءات تلتف بدل أن تمدّ الصفحة */
  .ph-stats { flex-wrap: wrap; gap: 8px; }
  .ph-stat { flex: 1 1 calc(50% - 8px); min-width: 0; padding: 10px 8px; }
  .ph-stat-val { font-size: 18px; }
  .ph-left { gap: 12px; }
  .ph-title { font-size: 17px; }

  /* لوحة العناصر تصير شريطاً أفقياً فوق مساحة الرسم،
     فتبقى مساحة الرسم بعرض الشاشة كاملاً */
  .fe-body, .fs-body { flex-direction: column; }
  .palette {
    width: 100% !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-left: 0;
    border-bottom: 1px solid var(--bd-1);
    flex-shrink: 0;
  }
  .pal-label { display: none; }
  .pal-item { flex: 0 0 auto; white-space: nowrap; cursor: pointer; }

  /* مساحة الرسم: ارتفاع معقول يراعي شريط المتصفح المتغيّر */
  .fe-card { height: calc(100dvh - 240px); min-height: 360px; }
  .canvas { min-height: 280px; }

  /* شريط الأدوات العلوي للمحرّر */
  .fe-toolbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
}

@media (max-width: 480px) {
  .ph-stat { flex: 1 1 calc(50% - 8px); }
  .fe-card { height: calc(100dvh - 210px); }
}

/* ---------------------------------------------------------------------
   الشريط العلوي لصفحة الرد الآلي (.topbar)
   كان صفّاً مرناً بلا التفاف يضم: الشعار + مسار التنقّل + مُبدّل الرقم +
   حالة الاتصال + أزرار، فيتجاوز عرض الجوال بكثير. و.shell يقصّه
   (overflow:hidden) فتختفي أطرافه بلا أي تمرير.
   الحل: إخفاء العناصر الثانوية وتصغير الباقي حتى يتّسع للشاشة.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .topbar {
    padding: 0 12px;
    gap: 8px;
    min-width: 0;
  }
  .topbar > * { min-width: 0; }

  /* مسار التنقّل والفواصل: زينة لا لزوم لها على شاشة ضيقة */
  .topbar .crumb,
  .topbar .sep { display: none; }

  /* الشعار: الأيقونة فقط */
  .logo-text, .logo-sub { display: none; }
  .logo-name { font-size: 13px; }
  .logo { flex: 0 0 auto; }

  /* حالة الاتصال: النقطة فقط بدون النص */
  .conn-status { padding: 4px; gap: 0; }
  .conn-status span, .conn-status .conn-text { display: none; }

  .tb-right { gap: 4px; margin-inline-start: auto; margin-inline-end: 0; flex: 0 0 auto; }
  .tb-right .btn-label, .whats-new-btn span:not(.whats-new-dot) { display: none; }

  /* اسم المستخدم نصاً: الأفاتار وحده يكفي (الاسم كامل داخل الدرج) */
  .user-chip .user-name { display: none; }
  .user-chip { padding: 2px; gap: 0; }

  /* آخر حصن: لو بقيت الأزرار أعرض من الشاشة تُمرَّر أفقياً
     بدل أن تُقصّ خارج حدود .shell بلا وسيلة للوصول إليها */
  .tb-right {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tb-right::-webkit-scrollbar { display: none; }
  .tb-right > * { flex: 0 0 auto; }

  /* القائمة المنسدلة للأرقام: تُثبَّت بعرض الشاشة بدل الخروج من جانبها.
     الصفحة dir="rtl" ثابتة، فنستخدم الخصائص الفيزيائية صراحةً. */
  .phone-dropdown {
    position: fixed !important;
    top: 64px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ---------------------------------------------------------------------
   أشرطة أدوات المحرّر (العادي وملء الشاشة)
   مجموعة الأزرار فيهما مكتوبة بـ style مضمّن (margin-right:auto; display:flex)
   فلا تكفي قاعدة عادية لتجاوزها — نستهدف نفس السمة تحديداً.
   على الجوال: تنزل المجموعة لسطر مستقل وتُمرَّر أفقياً بدل أن تمدّ الصفحة.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .fe-toolbar > [style*="margin-right:auto"],
  .fs-header  > [style*="margin-right:auto"] {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .fe-toolbar > [style*="margin-right:auto"]::-webkit-scrollbar,
  .fs-header  > [style*="margin-right:auto"]::-webkit-scrollbar { display: none; }

  .fe-toolbar > [style*="margin-right:auto"] > *,
  .fs-header  > [style*="margin-right:auto"] > * { flex: 0 0 auto; }

  /* الأوصاف الفرعية: تُخفى لتوفير المساحة */
  .fe-sub, .fs-sub { display: none; }

  /* نافذة ملء الشاشة تملأ الجوال فعلاً */
  .fs-header { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .fs-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  .fs-body { flex-direction: column; }
}

/* ---------------------------------------------------------------------
   صفحة الهبوط (landing-theme.css)
   كان شريط التنقّل يُخفي قائمة الروابط تماماً تحت 820px بلا أي بديل،
   فتصبح أقسام الصفحة (المميزات / كيف تعمل / الاشتراكات / حسابي) غير
   قابلة للوصول من الجوال. وكان الشعار + زر الدعوة يتجاوزان عرض الشاشة.
   --------------------------------------------------------------------- */
@media (max-width: 820px) {
  .landing-nav-container {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.7rem 1rem;
  }

  /* الروابط تعود — كصف يُمرَّر أفقياً أسفل الشعار */
  .landing-nav-menu {
    display: flex !important;
    order: 3;
    width: 100%;
    gap: 1.1rem;
    margin: 0;
    padding: 0.15rem 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .landing-nav-menu::-webkit-scrollbar { display: none; }
  .landing-nav-menu li { flex: 0 0 auto; }
  .landing-nav-menu a { display: block; padding: 0.35rem 0; white-space: nowrap; }

  /* الشعار وزر الدعوة يتّسعان في السطر الأول */
  .landing-nav-logo { font-size: 0.95rem; gap: 0.4rem; min-width: 0; }
  .landing-nav-logo img { width: 28px; height: 28px; }
  .landing-nav-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .landing-nav-cta { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
}

@media (max-width: 480px) {
  /* على الشاشات الضيقة جداً يكفي اسم المنصة بدون اللاحقة */
  .landing-nav-logo { font-size: 0.9rem; }
  .landing-hero { padding: 3rem 1rem 3.5rem; }
  .landing-container { padding-inline: 1rem; }
}

/* ---------------------------------------------------------------------
   شريط الحالة أعلى صفحة الأسئلة الشائعة
   عناصره flex-shrink:0 داخل حاوية overflow:hidden، فعلى الجوال يُقصّ
   سطر المصدر بالكامل بلا أي وسيلة لقراءته. نجعله يُمرَّر أفقياً.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .status-strip__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 16px;
  }
  .status-strip__inner::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------------
   أهداف لمس خاصة بهذا المشروع
   أزرار أيقونية ضيّقة (30px عرضاً) في محرّر التدفق، وزر الدعوة والشعار
   في شريط صفحة الهبوط (31px و28px ارتفاعاً).
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .fs-close, .cv-btn, .wa-icon-action, .wa-composer-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .landing-nav-cta, .landing-nav-logo {
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------
   الشاشات الضيّقة جداً (≤360px — مثل iPhone SE)
   الشريط العلوي: زر القائمة + العنوان + الأزرار كان يتجاوز العرض بـ20px.
   --------------------------------------------------------------------- */
@media (max-width: 360px) {
  .top-header {
    padding: 0 var(--space-3, 12px);
    gap: 4px;
  }
  .mobile-nav-toggle {
    width: 40px;
    height: 40px;
    margin-inline-end: var(--space-2, 8px);
  }
  /* العنوان يتقلّص ويُختصر بدل أن يدفع الأزرار خارج الشاشة */
  .top-header > div:not(.header-actions) { min-width: 0; flex: 1 1 auto; }
  .header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header-actions { gap: 4px; }

  .page-content { padding: var(--space-4, 16px) var(--space-3, 12px); }
}