/* ============================================================
   F-MAIL · Components
   كل عنصر بالواجهة إله كلاس هون — ما في inline styles بالـ HTML.
   ============================================================ */

/* =========================================================
   1) الشعار
   ========================================================= */
/* الشعار الكامل متل ما هو بملف الماركة: الظرف فوق، الاسم تحته،
   والسطر التعريفي تحت. مقصوص من الأصل ١٢٥٤×١٢٥٤ (هوامش شفافة
   انشالت) ومصغّر لـ ٣٦٠×٢٤٨ — يعني ضعف قياس العرض ١٨٠×١٢٤،
   فبيطلع حاد على شاشات 2x.

   ⚠️ نسختين لأنّ "Fota" كحلي: على الثيم الغامق بيختفي. نسخة
   الغامق بترفع الكحلي والسطر التعريفي لفاتح وبس — "Mail" الأزرق
   والظرف ما بينلمسوا.

   خلفية CSS مش <img> حتى ينزّل المتصفّح نسخة وحدة بس، يلي
   بتلزم الثيم الحالي، والقياس مكتوب صريح حتى ما تقفز اللوحة
   قبل ما تنزل الصورة. */
.fm-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fm-logo__img {
  inline-size: 180px; block-size: 124px;
  background: url("../img/logo-full.202609162341.png") center / contain no-repeat;
}
[data-theme="dark"] .fm-logo__img { background-image: url("../img/logo-full-dark.202609162341.png"); }
.fm-logo__sub {
  display: block;
  font-size: var(--fm-fs-11);
  color: var(--on-surface-variant);
  letter-spacing: var(--fm-tracking-wide);
}

/* =========================================================
   2) الأزرار
   ---------------------------------------------------------
   ثلاث عيلات وبس:
     · .fm-btn            نص عادي
     · .fm-btn--icon      دائرة ٤٠ بتلوّن بالـhover
     · .fm-btn--primary   حبّة بتدرّج الأزرق
   ========================================================= */
.fm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px;
  padding-inline: 16px;
  border-radius: var(--fm-r-pill);
  border: 1px solid transparent;
  font-family: var(--fm-font);
  font-size: var(--fm-fs-13);
  font-weight: 500;
  color: var(--on-surface-variant);
  white-space: nowrap;
  transition: background var(--fm-t-fast) var(--fm-ease),
              border-color var(--fm-t-fast) var(--fm-ease),
              color var(--fm-t-fast) var(--fm-ease),
              box-shadow var(--fm-t-fast) var(--fm-ease);
}
.fm-btn:hover { color: var(--on-surface); background: var(--surface-container-high); }
.fm-btn:active { background: var(--surface-variant); }
.fm-btn[disabled] { opacity: .45; pointer-events: none; }
.fm-btn .ms, .fm-btn .ph-duotone { font-size: 20px; }

/* أيقونة لحالها — دائرة ٤٠ */
.fm-btn--icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  border-color: transparent;
  color: var(--on-surface-variant);
}
.fm-btn--icon:hover { background: var(--surface-container-high); color: var(--on-surface); }

/* الأساسي — تدرّج (زر الإرسال، الحفظ، البحث المعبّى) */
.fm-btn--primary {
  height: 36px;
  padding-inline: 24px;
  background: var(--primary-gradient);
  color: var(--on-primary);
  font-weight: 500;
  border-color: transparent;
}
.fm-btn--primary:hover { background: var(--primary-gradient); color: var(--on-primary); filter: brightness(1.08); }
.fm-btn--primary:active { filter: brightness(.95); }

/* الثانوي — حبّة محدّدة شفافة */
.fm-btn--accent,
.fm-btn--ghost {
  border-color: var(--outline);
  background: transparent;
  color: var(--primary);
}
.fm-btn--accent:hover,
.fm-btn--ghost:hover { background: var(--surface-container-high); color: var(--primary); }

.fm-btn--block { width: 100%; }
.fm-btn--dashed {
  height: 32px;
  padding-inline: 12px;
  border: 1px dashed var(--outline);
  font-weight: 400;
  font-size: var(--fm-fs-12);
  color: var(--on-surface-variant);
}

/* ---------------------------------------------------------
   زر الإنشاء — تصميم خاص، مش حبّة
   بلوك بعرض الرَيْل، زوايا ١٢ (مربّعة مش pill)، ٤٨ طول،
   جواته مربّع مدوّر ٢٨ فيه علامة الزائد.
   --------------------------------------------------------- */
.fm-compose-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding-inline: 12px 14px;
  border: none;
  border-radius: 12px;
  background: var(--primary-gradient);
  color: var(--on-primary);
  font-family: var(--fm-font);
  font-size: var(--fm-fs-13);
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: var(--compose-shadow);
  transition: filter var(--fm-t-fast) var(--fm-ease),
              box-shadow var(--fm-t-fast) var(--fm-ease);
}
.fm-compose-btn:hover {
  filter: brightness(1.08);
  box-shadow: var(--compose-shadow-hover);
  color: var(--on-primary);
}
.fm-compose-btn:active { filter: brightness(.95); }

.fm-compose-btn__chip {
  width: 28px; height: 28px; flex: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, .22);
  display: grid; place-items: center;
}
.fm-compose-btn__chip .ms { font-size: 20px; }
.fm-compose-btn__label { flex: 1; text-align: start; }
.fm-compose-btn__caret { flex: none; opacity: .7; font-size: 20px; }

/* الشريط الجانبي بيلفّ الزر بحشوة حتى يبعد عن الحافة */
.fm-compose-wrap { padding-inline: 12px; flex: none; }

/* =========================================================
   3) الرَيْل: التنقّل + الحسابات
   ========================================================= */
.fm-nav { display: flex; flex-direction: column; font-size: var(--fm-fs-13); }
.fm-nav__item {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  height: 40px;
  padding-inline: 26px 16px;
  border: none;
  border-radius: 0 20px 20px 0;
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 400;
  text-align: start;
  transition: background var(--fm-t-fast) var(--fm-ease),
              color var(--fm-t-fast) var(--fm-ease);
}
[dir="rtl"] .fm-nav__item { border-radius: 20px 0 0 20px; }

.fm-nav__item .ms,
.fm-nav__item .ph-duotone { font-size: 20px; flex: none; }
.fm-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fm-nav__item:hover { background: var(--surface-container-high); color: var(--on-surface); }
.fm-nav__item.is-active {
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 700;
}
.fm-nav__count {
  margin-inline-start: auto;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--on-surface-variant);
}
.fm-nav__item.is-active .fm-nav__count { color: inherit; }

/* ---------------------------------------------------------
   "في جديد هون"
   ---------------------------------------------------------
   الرقم لحاله ١٢px وبلون باهت بآخر السطر — سهل ما تلاحظه وإنت
   عم تمسح الرَيْل. تغميق الاسم بيخلّي الإشارة تنقرا بلمحة بلا
   ما تقرا الرقم، وهي نفس الطريقة يلي بتستعملها كل عملاء البريد.
   --------------------------------------------------------- */
.fm-nav__item.has-unread .fm-nav__label {
  font-weight: 700;
  color: var(--on-surface);
}
.fm-nav__item.has-unread .fm-nav__count { color: var(--primary); }

/* ---------------------------------------------------------
   أيقونات الرَيْل الملوّنة
   ---------------------------------------------------------
   اللون بينحدّد من data-folder يلي بيبعتو السيرفر (شوف
   Providers.php)، مش من ترتيب العنصر — فلو تغيّر ترتيب المجلدات
   أو انضاف مجلد، ما في شي بينكسر.

   ⚠️ اللون منحطّه على الأيقونة نفسها مش على الصف: هيك الأيقونة
   بتضل ملوّنة وقت التحديد كمان (`.is-active` بتلوّن الصف، والنص
   بيرث منها، بس الأيقونة عندها لونها الخاص فما بيدهسها).

   المجلدات يلي ما إلها لون هون بتوقع على --on-surface-variant
   من `.fm-nav__item` فوق — يعني مجلد جديد بيطلع رمادي، مش فاضي.

   ⚠️ اللون التاني جوّا var() هو قيمة احتياطية، مش تكرار. توكنات
   --icon-* ساكنة بـtokens.css، ولو انرفع هالملف لحاله بلا
   tokens.css بترجع var() فاضية والأيقونة بترث الرمادي — يعني
   بتشوف الأيقونات بلا لون وما بتفهم ليش، لأنه باقي التصميم
   بيضل مضبوط. الاحتياطي بيمنع هالحالة الصامتة.
   --------------------------------------------------------- */
.fm-nav__item[data-folder="inbox"]   .ph-duotone { color: var(--icon-inbox,   #0B57D0); }
.fm-nav__item[data-folder="starred"] .ph-duotone { color: var(--icon-starred, #E8930C); }
.fm-nav__item[data-folder="snoozed"] .ph-duotone { color: var(--icon-snoozed, #00897B); }
.fm-nav__item[data-folder="sent"]    .ph-duotone { color: var(--icon-sent,    #188038); }
.fm-nav__item[data-folder="drafts"]  .ph-duotone { color: var(--icon-drafts,  #5F7086); }
.fm-nav__item[data-folder="archive"] .ph-duotone { color: var(--icon-archive, #0994C9); }
.fm-nav__item[data-folder="spam"]    .ph-duotone { color: var(--icon-spam,    #E37400); }
.fm-nav__item[data-folder="trash"]   .ph-duotone { color: var(--icon-trash,   #D93025); }

/* قسم "Apps" — ما إلو data-folder، فمنمسكه من الرابط */
.fm-nav__item[href="contacts.html"] .ph-duotone { color: var(--icon-contacts, #1A73E8); }
.fm-nav__item[href="calendar.html"] .ph-duotone { color: var(--icon-calendar, #0994C9); }
.fm-nav__item[href="settings.html"] .ph-duotone { color: var(--icon-settings, #5F7086); }

/* عنوان قسم داخل الرَيْل */
.fm-nav__section {
  display: flex; align-items: center; gap: 8px;
  height: 40px;
  padding-inline: 26px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-surface-variant);
}
.fm-nav__section button {
  margin-inline-start: auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--on-surface-variant);
}
.fm-nav__section button:hover { background: var(--surface-container-high); color: var(--on-surface); }

/* ---------- الحسابات ---------- */
.fm-accounts {
  margin-block-start: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding-inline: 26px 16px;
  padding-block-start: 12px;
  font-size: var(--fm-fs-12);
}
.fm-accounts__list { display: flex; flex-direction: column; gap: 10px; }
.fm-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--on-surface-variant);
  text-transform: none;
}
.fm-account {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  color: var(--on-surface-variant);
  text-align: start;
  border-radius: var(--fm-r-xs);
  transition: color var(--fm-t-fast), opacity var(--fm-t-fast);
}
.fm-account:hover { color: var(--on-surface); }
.fm-account.is-muted { opacity: .45; }
.fm-account__dot {
  width: 12px; height: 12px; flex: none;
  border-radius: 50%;
  background: var(--fm-accent);
}
.fm-account__dot--syncing { animation: fm-pulse 1.8s ease-out infinite; }
.fm-account__mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-account__state { margin-inline-start: auto; flex: none; font-size: 16px; }
.fm-account__state--ok { color: var(--success); }
.fm-account__state--sync { color: var(--on-surface-variant); }
.fm-account__state--error { color: var(--danger); }

.fm-sidebar__link {
  display: flex; align-items: center; gap: 8px;
  color: var(--primary);
  font-size: var(--fm-fs-12);
}
.fm-sidebar__link:hover { color: var(--primary); text-decoration: underline; }

/* =========================================================
   4) حقل البحث + الشرائح
   ---------------------------------------------------------
   حبّة ٤٨ بنصف ٢٨ على surface-container-high، عدسة عاليسار
   وأداة الفلترة عاليمين.
   ========================================================= */
.fm-search {
  display: flex; align-items: center; gap: 12px;
  height: 48px;
  padding-inline: 16px 8px;
  background: var(--surface-container-high);
  border: 1px solid transparent;
  border-radius: 28px;
  color: var(--on-surface-variant);
  font-size: var(--fm-fs-13);
  transition: background var(--fm-t-fast) var(--fm-ease),
              box-shadow var(--fm-t-fast) var(--fm-ease);
}
.fm-search:focus-within {
  background: var(--surface);
  box-shadow: var(--elev-1);
}
.fm-search .ph-duotone,
.fm-search .ms { font-size: 22px; flex: none; color: var(--on-surface-variant); }
.fm-search__input {
  flex: 1; min-width: 0;
  color: var(--on-surface);
  font-size: var(--fm-fs-13);
}
.fm-search__input::placeholder { color: var(--on-surface-variant); }
.fm-search__input::-webkit-search-cancel-button { display: none; }

/* زر أدوات البحث المتقدّم عاليمين الحبّة */
.fm-search__tune {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--on-surface-variant);
}
.fm-search__tune:hover { background: var(--surface-variant); color: var(--on-surface); }

.fm-kbd {
  font-family: var(--fm-font-mono);
  font-size: var(--fm-fs-11);
  border: 1px solid var(--outline);
  border-radius: var(--fm-r-xs);
  padding: 1px 6px;
  color: var(--on-surface-variant);
}

/* ---------- شرائح الفلترة ---------- */
.fm-filters { display: flex; gap: 8px; align-items: center; font-size: var(--fm-fs-12); }
.fm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding-inline: 12px;
  border-radius: var(--fm-r-pill);
  border: 1px solid var(--outline);
  background: transparent;
  color: var(--on-surface-variant);
  font-size: var(--fm-fs-12);
  white-space: nowrap;
  transition: background var(--fm-t-fast) var(--fm-ease),
              color var(--fm-t-fast) var(--fm-ease);
}
.fm-chip .ph-duotone, .fm-chip .ms { font-size: 18px; }
.fm-chip:hover { background: var(--surface-container-high); color: var(--on-surface); }
.fm-chip.is-active {
  background: var(--primary-container);
  border-color: transparent;
  color: var(--on-primary-container);
  font-weight: 500;
}
.fm-filters__count { margin-inline-start: auto; color: var(--on-surface-variant); }

/* =========================================================
   5) شريط أدوات القائمة + قائمة الرسائل
   ========================================================= */
/* ---------- سطر الأفعال السريعة فوق شريط الأدوات ----------
   ⚠️ الألوان كلها توكنات مش قيم ثابتة. #fff و#3c4043 و#dadce0
   بتطلع صح على الفاتح وبس؛ على الغامق بتصير لوحة بيضا وسط
   شاشة سودا. التوكنات معرّفة مرتين بـ tokens.css (‏:root‏
   و[data-theme="dark"]) فالثيم بيمشي لحاله بلا ولا سطر زيادة. */
.cd-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.cd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--fm-r-pill);
  border: 1px solid var(--outline);
  background: var(--surface);
  color: var(--on-surface-variant);
  font-family: var(--fm-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fm-t-fast) var(--fm-ease),
              border-color var(--fm-t-fast) var(--fm-ease),
              color var(--fm-t-fast) var(--fm-ease);
}
.cd-btn:hover { background: var(--surface-container-high); color: var(--on-surface); }
.cd-btn .ph-duotone { font-size: 18px; flex: none; }

.cd-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.cd-btn--primary:hover { background: var(--primary); color: var(--on-primary); filter: brightness(1.08); }

/* ما في شي متأشّر = ما في شي تعمله عليه */
.cd-btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* الفلتر شغّال — نفس لغة الحبّة المختارة بالشريط تحته */
.cd-btn.is-active {
  background: var(--primary-container);
  border-color: var(--primary-container);
  color: var(--on-primary-container);
}

.cd-spacer { flex: 1; }

/* ---------- شريط الأدوات ٤٨ ---------- */
.fm-listbar {
  display: flex; align-items: center; gap: 4px;
  height: var(--fm-toolbar-h);
  padding-inline: 12px 8px;
  flex-wrap: nowrap;
}
.fm-listbar__spacer { flex: 1; min-width: 8px; }
.fm-listbar__range {
  font-size: 12px;
  color: var(--on-surface-variant);
  white-space: nowrap;
  margin-inline-end: 4px;
}
.fm-listbar .fm-filters { overflow-x: auto; scrollbar-width: none; }
.fm-listbar .fm-filters::-webkit-scrollbar { display: none; }

/* ---------- صف الرسالة ٤٨ ---------- */
.fm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--fm-row-h);
  padding-inline: var(--fm-row-px) 8px;
  text-align: start;
  cursor: pointer;
  background: var(--read-bg);
  border-block-end: 1px solid var(--outline);
  transition: background var(--fm-t-fast) var(--fm-ease),
              box-shadow var(--fm-t-fast) var(--fm-ease);
}
.fm-row:hover { box-shadow: var(--elev-1); z-index: 1; position: relative; }
.fm-row.is-active { background: var(--primary-container); }
.fm-row.is-selected { background: var(--primary-container); }
.fm-row:focus-visible { outline-offset: -2px; }

.fm-row__star {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  flex: none;
  color: var(--on-surface-variant);
}
.fm-row__star:hover { color: var(--on-surface); }
.fm-row__star .ph-duotone { font-size: 20px; }

/* صورة الحرف — بالموبايل وبس */
.fm-row__avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  margin-inline-end: 10px;
  border-radius: 50%;
  font-size: var(--fm-fs-115);
  font-weight: 700;
  line-height: 1;
  /* --fm-avatar بينحط بالصف من JS حسب أول حرف — ثابت للمرسِل
     نفسه، فبيصير علامة بتتعرّف عليها مش زينة. */
  background: var(--fm-avatar, var(--surface-container-high));
  color: #FFFFFF;
  user-select: none;
}
.fm-row__star.is-on { color: var(--warning); }
.fm-row__star.is-on .ph-duotone { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* المرسل — عمود ثابت ١٨٠ */
.fm-row__from {
  width: var(--fm-sender-w);
  flex: none;
  font-size: 14px;
  font-weight: 400;
  color: var(--on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* الموضوع + المقتطف — سطر واحد بياخد الباقي */
.fm-row__main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
}
.fm-row__subject {
  font-size: 14px;
  font-weight: 400;
  color: var(--on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.fm-row__preview {
  flex: 1; min-width: 0;
  font-size: 14px;
  color: var(--on-surface-variant);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fm-row__labels { display: flex; gap: 4px; flex: none; }

/* الوقت — عمود ٦٤ محاذي لليمين */
.fm-row__time {
  width: var(--fm-time-w);
  flex: none;
  text-align: end;
  font-size: 12px;
  font-weight: 400;
  color: var(--on-surface-variant);
}

/* غير مقروء: وزن + لون، مش لون لحاله */
.fm-row.is-unread { background: var(--surface); }
.fm-row.is-unread .fm-row__from { font-weight: 700; color: var(--on-surface); }
.fm-row.is-unread .fm-row__subject { font-weight: 700; color: var(--on-surface); }
.fm-row.is-unread .fm-row__time { color: var(--primary); font-weight: 700; }
.fm-row.is-unread .fm-row__preview { color: var(--on-surface-variant); }

.fm-dot-unread { display: none; }  /* الوزن بيقول غير مقروء — ما منحتاج نقطة كمان */

.fm-row__icon { color: var(--on-surface-variant); font-size: 18px; flex: none; }
.fm-row__icon--star { color: var(--warning); }
.fm-count-pill {
  font-size: 12px;
  border: 1px solid var(--outline);
  border-radius: var(--fm-r-xs);
  padding: 0 5px;
  color: var(--on-surface-variant);
  flex: none;
}

/* ---------- لافتة "الصور البعيدة محجوبة" فوق الرسالة ---------- */
.fm-banner--images { margin-block-end: 12px; }

/* ---------- شريط الترقيم بآخر القائمة ---------- */
.fm-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px;
  border-block-start: 1px solid var(--outline);
}

.fm-pager__range {
  min-width: 120px;
  text-align: center;
  font-size: 13px;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}

/* ---------- حالة فاضية ---------- */
.fm-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  height: 100%;
  min-height: 260px;
  padding: 48px 24px;
  text-align: center;
  color: var(--on-surface-variant);
}
.fm-empty__icon { font-size: 40px; color: var(--outline); }
.fm-empty__title { color: var(--on-surface); font-weight: 500; font-size: var(--fm-fs-15); }
.fm-empty__text { font-size: var(--fm-fs-13); max-width: 320px; }

/* ---------- هيكل التحميل ---------- */
.fm-skeleton {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--fm-row-h);
  padding-inline: var(--fm-row-px) 8px;
  background: var(--read-bg);
  border-block-end: 1px solid var(--outline);
}
.fm-skeleton__bar {
  height: 10px;
  border-radius: var(--fm-r-xs);
  background: linear-gradient(90deg,
    var(--surface-variant) 0%, var(--surface-container-high) 50%, var(--surface-variant) 100%);
  background-size: 420px 100%;
  animation: fm-shimmer 1.3s linear infinite;
}

/* =========================================================
   6) قارئ الرسالة
   ========================================================= */
/* ---------- شريط الإجراءات ٤٨ ---------- */
.fm-reader__bar {
  flex: none;
  display: flex; align-items: center; gap: 4px;
  height: var(--fm-toolbar-h);
  padding-inline: 12px 16px;
}
.fm-reader__pos {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--on-surface-variant);
  white-space: nowrap;
}

.fm-reader__title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
  color: var(--on-surface);
  margin-block-end: 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* حبّة صغيرة جنب العنوان — "Inbox" */
.fm-pill {
  display: inline-flex; align-items: center;
  height: 20px;
  padding-inline: 8px;
  border-radius: var(--fm-r-pill);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 12px;
  font-weight: 500;
}

/* التسميات فوق كتلة المرسل — بتلزق فيها بلا هالمسافة */
.fm-reader__head .fm-row__labels { margin-block-end: 12px; flex-wrap: wrap; }

.fm-reader__meta { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.fm-avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  /* --fm-avatar بينحط من JS حسب إيميل المرسِل — نفس اللون
     يلي بياخده صفّه بالقائمة. بلاه كل الصور بنفس التدرّج،
     يعني ولا معلومة. التدرّج بيضل الاحتياط (جهات الاتصال
     بلا إيميل مثلاً). */
  background: var(--fm-avatar, var(--primary-gradient));
  color: #FFFFFF;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: var(--fm-fs-16);
}
.fm-reader__who { font-size: var(--fm-fs-13); line-height: 1.4; }
.fm-reader__who b { color: var(--on-surface); font-size: 14px; font-weight: 700; }
.fm-reader__who span { color: var(--on-surface-variant); font-size: 12px; }
.fm-reader__actions {
  margin-inline-start: auto;
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end;
}
.fm-reader__stamp { font-size: 12px; color: var(--on-surface-variant); margin-inline-end: 4px; }

.fm-thread-toggle { margin-block-end: 16px; }

/* ---------- نص الرسالة ---------- */
.fm-prose {
  font-size: 14px;
  line-height: 22px;
  color: var(--on-surface);
  white-space: pre-line;
}
.fm-prose p { margin-block-end: 16px; white-space: pre-line; }
.fm-prose p:last-child { margin-block-end: 0; }
.fm-prose b { color: var(--on-surface); font-weight: 700; }
.fm-quote {
  padding: 12px 16px;
  border-inline-start: 2px solid var(--primary);
  background: var(--surface);
  border-radius: 0 var(--fm-r-sm) var(--fm-r-sm) 0;
  font-style: italic;
  color: var(--on-surface-variant);
}

/* ---------- المرفقات ٢٢٠×٦٤ ---------- */
.fm-attachments { display: flex; gap: 12px; margin-block-start: 24px; flex-wrap: wrap; }
.fm-attachment {
  display: flex; gap: 12px; align-items: center;
  width: 220px; height: 64px;
  padding-inline: 12px;
  border: 1px solid var(--outline);
  border-radius: 12px;
  background: transparent;
  text-align: start;
  transition: background var(--fm-t-fast) var(--fm-ease);
}
.fm-attachment:hover { background: var(--surface-container-high); }
.fm-attachment__icon { font-size: 32px; color: var(--primary); flex: none; }
.fm-attachment__name {
  color: var(--on-surface);
  font-size: 12px;
  font-weight: 500;
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fm-attachment__size { color: var(--on-surface-variant); font-size: 12px; }
/* الاسم والحجم سطرين ملزوقين — بلا line-height هون بيتباعدوا
   بارتفاع سطر الجسم (1.5) وبيصير الكرت مفكّك */
.fm-attachment > span { min-width: 0; line-height: 1.35; }

/* أزرار الردّ بأسفل الرسالة — حبّات محدّدة */
.fm-reader__replies { display: flex; gap: 12px; margin-block-start: 26px; flex-wrap: wrap; }
.fm-reader__replies .fm-btn {
  height: 40px;
  padding-inline: 24px;
  border: 1px solid var(--outline);
  background: transparent;
  color: var(--on-surface);
}
.fm-reader__replies .fm-btn:hover { background: var(--surface-container-high); }

.fm-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  flex: none;
}

/* =========================================================
   7) نافذة الإنشاء (Compose) — مرسّاة تحت اليمين
   ========================================================= */
.fm-overlay {
  position: fixed; inset: 0;
  /* ⚠️ الترتيب مقصود. كان في تصريح color-mix واحد بلا احتياط —
     وأي متصفّح ما بيعرفها بيرمي التصريح كلّو، فبتصير الطبقة
     شفافة تماماً: الديالوج بيطلع طافي والنص بيتداخل مع محتوى
     الصفحة وراه. اللون الصريح بيمشي بكل مكان، وcolor-mix
     بتدهسه عند مين بيفهمها فبتتبع الثيم. */
  background: rgba(10, 25, 50, .32);
  background: color-mix(in srgb, var(--on-surface) 32%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: grid; place-items: center;
  padding: 24px;
  z-index: 40;
}
.fm-overlay[hidden] { display: none; }

.fm-compose {
  width: min(520px, 100%);
  height: min(560px, 90dvh);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: none;
  border-radius: 16px 16px 0 0;
  box-shadow: var(--elev-2);
  animation: fm-pop .2s var(--fm-ease);
  overflow: hidden;
}

/* مرسّاة تحت اليمين بـ٢٤ بدل النص — هيك بالمواصفة */
.fm-overlay--dock {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  place-items: end;
  padding: 0 24px 0 0;
  align-content: end;
}
.fm-overlay--dock .fm-compose { pointer-events: auto; }

.fm-compose__head {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  height: 40px;
  padding-inline: 16px 8px;
  background: var(--read-bg);
}
.fm-compose__title { font-size: 14px; font-weight: 500; color: var(--on-surface); }
.fm-compose__head .fm-btn--icon { width: 32px; height: 32px; }
.fm-compose__body { flex: 1; min-height: 0; overflow: auto; padding: 0; }
.fm-compose__foot {
  flex: none;
  display: flex; align-items: center; gap: 4px;
  height: 56px;
  padding-inline: 16px;
  border-block-start: 1px solid var(--outline);
}

/* ---------- حقول To / Subject ---------- */
.fm-field {
  display: flex; align-items: center; gap: 10px;
  height: 40px;
  padding-inline: 16px;
  border: none;
  border-block-end: 1px solid var(--outline);
}
.fm-field__label {
  flex: none;
  font-size: var(--fm-fs-12);
  color: var(--on-surface-variant);
}
.fm-field__input {
  flex: 1; min-width: 0;
  font-size: var(--fm-fs-13);
  color: var(--on-surface);
  background: none;
  border: none;
}
.fm-field__input::placeholder { color: var(--on-surface-variant); }
.fm-field__extra { display: flex; gap: 8px; font-size: var(--fm-fs-12); color: var(--on-surface-variant); }
.fm-field__extra button:hover { color: var(--primary); }

.fm-editor {
  width: 100%;
  min-height: 220px;
  padding: 16px;
  resize: none;
  border: none;
  background: none;
  font-size: 14px;
  line-height: 22px;
  color: var(--on-surface);
}
.fm-editor::placeholder { color: var(--on-surface-variant); }

.fm-select {
  height: 36px;
  padding-inline: 12px;
  border: 1px solid var(--outline);
  border-radius: var(--fm-r-xs);
  background: transparent;
  color: var(--on-surface);
  font-size: var(--fm-fs-13);
}
.fm-select option { background: var(--surface); color: var(--on-surface); }

/* =========================================================
   8) الإعدادات
   ========================================================= */
.fm-card {
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  margin-block-end: 8px;
}
.fm-card__title {
  font-size: var(--fm-fs-15);
  font-weight: 500;
  color: var(--on-surface);
  padding-block: 16px 4px;
}
.fm-card__hint {
  font-size: var(--fm-fs-12);
  color: var(--on-surface-variant);
  margin-block-end: 8px;
}

/* صف إعداد ٥٦ بفاصل ١ بكسل */
.fm-setting {
  display: flex; align-items: center; gap: 16px;
  min-height: 56px;
  padding-block: 8px;
  border-block-start: 1px solid var(--outline);
}
.fm-setting:first-of-type { border-block-start: 1px solid var(--outline); }
.fm-setting__text { min-width: 0; }
.fm-setting__name { font-size: 14px; color: var(--on-surface); }
.fm-setting__desc { font-size: 12px; color: var(--on-surface-variant); }
.fm-setting__control { margin-inline-start: auto; flex: none; display: flex; gap: 8px; align-items: center; }

/* مفتاح ٤٠×٢٢ بكرة بيضا ١٦ */
.fm-switch {
  width: 40px; height: 22px; flex: none;
  border-radius: var(--fm-r-pill);
  background: var(--surface-variant);
  border: none;
  position: relative;
  transition: background var(--fm-t-fast) var(--fm-ease);
}
.fm-switch::after {
  content: "";
  position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform var(--fm-t) var(--fm-ease);
}
.fm-switch.is-on { background: var(--primary); }
.fm-switch.is-on::after { transform: translateX(18px); }
[dir="rtl"] .fm-switch.is-on::after { transform: translateX(-18px); }

/* المعطّل (Coming soon) — باهت وما بيستجيب */
.fm-switch[disabled],
.fm-select[disabled],
.fm-btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* =========================================================
   9) التنبيهات (Toast)
   ========================================================= */
/* بالنص عبر align-items مش translateX: الـtransform مع
   inset-inline-start كانت تزيح التنبيه عن المركز بالعربي */
.fm-toasts {
  position: fixed;
  inset-block-end: 22px;
  inset-inline: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 60;
  pointer-events: none;
}
.fm-toast {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;
  padding-inline: 16px;
  border-radius: var(--fm-r-xs);
  background: var(--on-surface);
  color: var(--surface);
  box-shadow: var(--elev-2);
  font-size: var(--fm-fs-13);
  animation: fm-pop .2s var(--fm-ease);
}
.fm-toast i { color: inherit; }
.fm-toast .fm-auth__link { color: var(--primary-container); font-weight: 500; }

/* =========================================================
   10) جسم الرسالة الجاي من سيرفر بريد حقيقي
   إطار معزول، الارتفاع بينضبط من ui.js بعد التحميل
   ========================================================= */
.fm-mail-frame {
  display: block;
  inline-size: 100%;
  min-block-size: 80px;
  border: 0;
}

.fm-mail-html { overflow-x: auto; }
.fm-mail-html img { max-width: 100%; height: auto; border-radius: var(--fm-r-sm); }
.fm-mail-html table { max-width: 100%; border-collapse: collapse; }
.fm-mail-html a { word-break: break-word; }
.fm-mail-html blockquote {
  margin: 12px 0;
  padding: 10px 16px;
  border-inline-start: 2px solid var(--primary);
  background: var(--surface);
  border-radius: 0 var(--fm-r-sm) var(--fm-r-sm) 0;
  color: var(--on-surface-variant);
}

/* ---------------------------------------------------------
   التنبيه بنص الشاشة
   ---------------------------------------------------------
   تأكيد إنه شي انحفظ بعد ما انسكّرت نافذة كاملة لازم يوصل:
   أسفل الشاشة بعيد عن المكان يلي كانت عينك عليه، فبينفوّت.
   التنبيه العابر (انبعتت · تراجع) بيضل تحت — هداك المفروض يمرق
   جنب العين بلا ما يقطع الشغل.

   pointer-events مورّثة من .fm-toasts، فما بيحجب ولا ضغطة.
   --------------------------------------------------------- */
.fm-toasts--center {
  inset-block: 0;
  justify-content: center;
}

.fm-toast--center {
  padding-block: 14px;
  padding-inline: 22px;
  font-size: var(--fm-fs-135);
  box-shadow: var(--elev-2);
}