/* تحديث 56: الطبقة النهائية للجوال والتطبيق
   تُحمَّل آخر الملفات، وتوحّد: مقاسات الخط، الشريط السفلي، الحساب، النوافذ، والرسائل.
   الكمبيوتر لا يتأثر إلا بما هو مخصص لشاشات الجوال. */

/* ---------- الخط: معيار واحد ---------- */
html body, html body button, html body input, html body select, html body textarea {
  font-family: var(--ssb-font) !important;
}
html body .acct-word { display: none; }

@media (max-width: 820px) {
  /* مقاسات موحدة لكل التطبيق (الرئيسي 19، الأقسام 16، النص 14، الملاحظات 12) */
  :root {
    --fs-title: 19px !important;
    --fs-h: 16px !important;
    --fs-body: 14px !important;
    --fs-label: 13px !important;
    --fs-small: 12px !important;
    --fs-num: 22px !important;
    --fs-num-sm: 16px !important;
  }
  html body { font-size: 14px; line-height: 1.5; }
  html body .main-head h1, html body .main-head .page-title { font-size: 19px !important; line-height: 1.3 !important; }

  /* ---------- الشريط السفلي: مدمج ثابت، لا يتحرك مع المحتوى ---------- */
  html body .bottom-nav {
    inset-inline: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    padding: 5px !important;
    border-radius: 20px !important;
    background: rgba(11, 43, 40, 0.97) !important;
    box-shadow: 0 10px 26px -10px rgba(8, 34, 32, 0.55) !important;
    gap: 2px !important;
  }
  html body .bottom-nav .nav-item {
    min-height: 50px !important;
    padding: 4px 2px !important;
    gap: 3px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }
  html body .bottom-nav .nav-item::before { width: 20px !important; height: 20px !important; }
  html body .bottom-nav .nav-item.active { background: rgba(184, 134, 47, 0.2) !important; color: #fff !important; }
  html body .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  /* عند فتح لوحة المفاتيح يختفي الشريط حتى لا يتحرك فوق الحقول */
  html.kb-open body .bottom-nav { display: none !important; }

  /* التنبيه المنبثق يظهر فوق الشريط بوضوح */
  html body .toast { bottom: calc(84px + env(safe-area-inset-bottom)) !important; font-size: 12.5px !important; line-height: 1.5 !important; padding: 9px 14px !important; width: max-content; max-width: 78vw; text-align: center; border-radius: 12px !important; }

  /* ---------- الحساب: أيقونة ملف شخصي + كلمة «حسابي» + زر خروج واضح ---------- */
  html body .acct-chip {
    min-height: 44px; max-width: none;
    padding: 4px 10px 4px 4px; gap: 6px;
    border-radius: 999px;
  }
  html body .acct-word { display: inline !important; font-size: 13px; font-weight: 800; color: inherit; }
  html body .acct-avatar { width: 34px; height: 34px; flex: 0 0 34px; }
  html body .acct-avatar svg { width: 18px; height: 18px; display: block; }
  html body .acct-meta, html body .acct-state { display: none !important; }
  html body .acct-caret { display: inline !important; font-size: 11px; }
  html body .acct-panel { width: min(300px, 92vw); padding: 14px; border-radius: 16px; }
  html body .acct-panel-title { font-size: 14px; }
  html body .acct-panel .side-account-row { font-size: 13px; }
  html body .acct-panel #logoutBtn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; margin-top: 12px; width: 100%;
    border-radius: 12px; border: 1px solid #f1b8b2;
    background: #fdecea; color: #b3261e; font-size: 14px; font-weight: 800;
  }
  html body .acct-panel #logoutBtn::before { content: "⏻"; font-size: 15px; }
  html[data-theme="dark"] body .acct-panel #logoutBtn { background: #3a1d19; color: #f2a79d; border-color: #6b2f27; }

  /* ---------- النوافذ: أصغر وأوضح ---------- */
  html body .ntf-box {
    width: min(96vw, 520px) !important;
    max-height: 88vh !important;
    border-radius: 20px !important;
  }
  html body .ntf-head { padding: 14px 16px 12px !important; }
  html body .ntf-head h2 { font-size: 16px !important; line-height: 1.35 !important; margin: 0 !important; }
  html body .ntf-lead { font-size: 12px !important; line-height: 1.6 !important; margin: 4px 0 0 !important; }
  html body .ntf-sub { font-size: 14px !important; margin: 14px 0 8px !important; }
  html body .ntf-scroll { padding: 14px 16px 18px !important; }
  html body .ntf-compose { gap: 12px !important; min-width: 0 !important; width: 100% !important; }
  html body .ntf-scroll { min-width: 0 !important; overflow-x: hidden !important; }
  html body .ntf-field, html body .ntf-field input, html body .ntf-field select, html body .ntf-field textarea {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  html body .ntf-field { font-size: 13px !important; gap: 6px !important; }
  html body .ntf-field input,
  html body .ntf-field select { font-size: 14px !important; height: 44px !important; padding: 0 12px !important; }
  html body .ntf-field textarea {
    font-size: 14px !important; height: 116px !important; min-height: 116px !important;
    padding: 10px 12px !important; resize: vertical; line-height: 1.6 !important;
  }
  html body .ntf-count { font-size: 11.5px !important; }
  html body .ntf-attach-btn { font-size: 13px !important; min-height: 40px !important; padding: 8px 12px !important; }
  html body .ntf-pending-list { gap: 6px !important; }

  /* قوائم الرسائل المرسلة والواردة */
  html body .ntf-item {
    padding: 10px 12px !important; gap: 10px !important; border-radius: 14px !important;
    align-items: flex-start !important;
  }
  html body .ntf-item .ntf-main b { font-size: 13.5px !important; line-height: 1.4 !important; display: block; }
  html body .ntf-item .ntf-body { font-size: 12.5px !important; line-height: 1.55 !important; color: var(--ntf-muted, #6b6b6b); }
  html body .ntf-item .ntf-meta, html body .ntf-item small { font-size: 11px !important; }
  html body .ntf-mini {
    flex: 0 0 auto !important; width: auto !important; min-width: 62px !important; height: 34px !important;
    padding: 0 12px !important; border-radius: 10px !important; font-size: 12px !important;
    font-weight: 800 !important; white-space: nowrap !important; line-height: 1 !important;
  }
  html body .ntf-acc > summary { min-height: 46px !important; padding: 10px 12px !important; }
  html body .ntf-acc-title { font-size: 13.5px !important; }
  html body .ntf-acc-meta { font-size: 11px !important; }
  html body .ntf-acc-body .ntf-body, html body .ntf-acc-body .ntf-text { font-size: 13px !important; }
  html body .ntf-empty { font-size: 13px !important; padding: 16px 12px !important; }
}

/* ---------- الألوان الخافتة للقوائم في الوضع الليلي ---------- */
html[data-theme="dark"] body .ntf-item .ntf-body { color: #a9b7b1; }