/* ============================================================
   F-MAIL · Responsive
   ٣ مراحل: ديسكتوب كامل → رَيْل أيقونات → موبايل بشاشة وحدة.
   ------------------------------------------------------------
   بالآخر في قسمين مستقلين عن العرض:
     · (pointer: coarse) — تكبير أهداف اللمس ومنع تكبير iOS
     · الحواف الآمنة — النوتش وشريط الهوم
   الاتنين مربوطين بنوع الجهاز مش بعرض الشاشة، لهيك برّا الـ
   media queries تبع العرض.
   ============================================================ */

/* عناصر خاصة بالموبايل — مخفية بالأصل */
.fm-menu-btn { display: none; }
.fm-fab { display: none; }

/* أداة: بتخفي النص على الشاشات الضيقة وبس */
.fm-hide-sm { display: inline; }

/* غطاء بيغمق الخلفية لما تفتح القائمة بالموبايل.
   ⚠️ مخفي بـ visibility مش display: من display:none ما بيشتغل
   انتقال opacity — بيظهر الغطاء دفعة وحدة والحركة بتحس رخيصة.
   visibility بتتحرك مع opacity، و pointer-events بتمنع أي ضغطة
   عليه وهو مخفي (وعلى الديسكتوب كمان). */
.fm-scrim {
  position: fixed;
  inset-block: var(--fm-topbar-h) 0;
  inset-inline: 0;
  z-index: 29;                 /* تحت الشريط الجانبي (30) */
  background: color-mix(in srgb, var(--on-surface) 40%, transparent);
  border: none;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fm-t) var(--fm-ease),
              visibility var(--fm-t) var(--fm-ease);
}

/* ============================================================
   ≤ 1180px : الرَيْل يصير أيقونات
   ============================================================ */
@media (max-width: 1180px) {
  .fm-sidebar { width: var(--fm-sidebar-rail-w); padding-inline-end: 0; }

  .fm-sidebar .fm-nav__label,
  .fm-sidebar .fm-nav__count,
  .fm-sidebar .fm-account__mail,
  .fm-sidebar .fm-account__state,
  .fm-sidebar .fm-label,
  .fm-sidebar .fm-storage,
  .fm-sidebar .fm-nav__section span,
  .fm-sidebar .fm-compose-btn__label,
  .fm-sidebar .fm-compose-btn__caret,
  .fm-sidebar .fm-sidebar__link span { display: none; }

  /* زر الإنشاء بيصير مربّع بس بيضل ٤٨ وبنفس النصف ١٢ */
  .fm-compose-wrap { padding-inline: 12px; }
  .fm-compose-btn { justify-content: center; padding-inline: 0; gap: 0; }

  .fm-sidebar .fm-nav__item { justify-content: center; padding-inline: 0; border-radius: 20px; margin-inline: 12px; width: auto; }
  .fm-sidebar .fm-nav__section { justify-content: center; padding-inline: 0; }
  .fm-accounts { align-items: center; padding-inline: 8px; }
  .fm-account { justify-content: center; }

  /* المقتطف بيوقف يزاحم الموضوع لما يضيق العمود */
  .fm-row__from { width: 140px; }
}

/* ============================================================
   ≤ 900px : تضييق القارئ
   ============================================================ */
@media (max-width: 900px) {
  :root { --fm-reader-pad: 24px; }
  .fm-row__preview { display: none; }
  .fm-row__from { width: 120px; }
}

/* ============================================================
   ≤ 699px : شاشة وحدة
   ============================================================ */
@media (max-width: 699px) {
  .fm-hide-sm { display: none; }

  /* ---------- الشريط العلوي بيصير حبّة بحث وحدة ----------
     القائمة عاليسار وصورة الحساب عاليمين ساكنين جوّا نفس الحبّة.
     الحبّة نفسها مرسومة بـ::after على الشريط، والعناصر فوقها. */
  .fm-topbar {
    position: relative;
    padding-inline: 12px;
    gap: 4px;
  }
  .fm-topbar::after {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline: 12px;
    border-radius: 28px;
    background: var(--surface-container-high);
    z-index: 0;
  }
  .fm-topbar > * { position: relative; z-index: 1; }

  .fm-topbar__brand { display: none; }
  .fm-topbar__search { margin-inline: 0; }
  .fm-topbar__search .fm-search { background: none; box-shadow: none; padding-inline: 0 4px; }
  .fm-topbar__search .fm-search > .ph-duotone { display: none; }
  .fm-topbar__actions { gap: 0; }

  /* بالموبايل بيضل زرّين وبس: تبديل الثيم وصورة الحساب.
     المزامنة والمساعدة والإعدادات كلهن موجودين بالرَيْل. */
  .fm-topbar__actions [data-shell="sync"],
  .fm-topbar__actions [data-shell="shortcuts"],
  .fm-topbar__actions [href="settings.html"] { display: none; }
  .fm-avatar--sm { width: 30px; height: 30px; font-size: 12px; }

  /* لوحة البحث المتقدّم بتاخد عرض الشاشة */
  .fm-advanced {
    inset-inline: 0;
    width: auto;
    inset-block-start: calc(100% + 8px);
  }

  /* ---------- الرَيْل بينزلق من الجنب ---------- */
  .fm-sidebar {
    position: fixed;
    inset-block: var(--fm-topbar-h) 0;
    inset-inline-start: 0;
    z-index: 30;
    width: 280px;
    background: var(--surface-container);
    transform: translateX(-100%);
    padding-inline-end: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  [dir="rtl"] .fm-sidebar { transform: translateX(100%); }
  .fm-app.is-menu-open .fm-sidebar { transform: none; }

  .fm-app.is-menu-open .fm-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* بالموبايل بيفتح الرَيْل كامل، فبنرجّع النصوص */
  .fm-sidebar .fm-nav__label,
  .fm-sidebar .fm-nav__count,
  .fm-sidebar .fm-account__mail,
  .fm-sidebar .fm-account__state,
  .fm-sidebar .fm-label,
  .fm-sidebar .fm-storage,
  .fm-sidebar .fm-nav__section span,
  .fm-sidebar .fm-sidebar__link span { display: revert; }
  .fm-sidebar .fm-nav__item {
    justify-content: flex-start;
    padding-inline: 26px 16px;
    border-radius: 0 20px 20px 0;
    margin-inline: 0;
    width: 100%;
  }
  .fm-sidebar .fm-nav__section { justify-content: flex-start; padding-inline: 26px 16px; }
  .fm-sidebar .fm-account { justify-content: flex-start; }
  /* زر الإنشاء مخفي من الرَيْل — الزر العائم بياخد مكانه */
  .fm-sidebar .fm-compose-wrap { display: none; }

  .fm-menu-btn { display: inline-flex; }

  /* ---------- اللوحة بتاخد الشاشة كلها ---------- */
  .fm-list-pane, .fm-reader, .fm-page { margin-inline-end: 0; border-radius: 16px 16px 0 0; }

  /* شريط الأدوات: الشرائح بتنسحب أفقي، والمدى والسهام بينخفوا.
     ⚠️ سهام الترقيم بتنخفي من هون وبس — يلي تحت القائمة
     (.fm-pager) بيضل، وإلا ما بيبقى على الموبايل طريقة توصل
     للصفحة التانية. */
  .fm-listbar__range,
  .fm-listbar [data-page] { display: none; }
  .fm-listbar { padding-inline: 8px; }

  /* سطر الأفعال: خمس أزرار بنصّهن ما بيلحقوا على سطر واحد،
     فبيلتفّوا لسطرين. الفاصل المطّاط بينطفي — بلا هيك بياكل
     السطر الأول كلّو ويرمي كل شي عالسطر التاني. */
  .cd-actions { padding-inline: 8px; }
  .cd-spacer { flex-basis: 100%; height: 0; }
  .fm-tab { padding-inline: 16px; }

  /* ---------- صف الموبايل ٧٢ بسطرين ----------
     تأشير · صورة حرف ٤٠ · (مرسل/وقت، موضوع، مقتطف+نجمة) */
  .fm-row {
    display: grid;
    grid-template-columns: 20px 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "check avatar from    time"
      "check avatar subject subject"
      "check avatar preview star";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    min-height: 72px;
    padding: 10px 16px;
  }
  .fm-row > .fm-check { grid-area: check; }
  .fm-row__avatar {
    grid-area: avatar;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    margin-inline-end: 0;
    border-radius: 50%;
    /* نفس لون المرسِل تبع الديسكتوب — كان تدرّج واحد لكل الصفوف،
       يعني ولا معلومة. */
    background: var(--fm-avatar, var(--primary-gradient));
    color: var(--on-primary);
    font-size: 16px;
    font-weight: 500;
  }
  .fm-row__from { grid-area: from; width: auto; font-size: 15px; }
  .fm-row__time { grid-area: time; width: auto; }
  .fm-row__star { grid-area: star; }

  /* الموضوع والمقتطف كانوا سطر واحد بالديسكتوب — هون بينفصلوا */
  .fm-row__main {
    grid-area: subject;
    display: contents;
  }
  .fm-row__subject { grid-area: subject; font-size: 14px; }
  .fm-row__preview {
    grid-area: preview;
    display: block;
    font-size: var(--fm-fs-12);
  }
  /* ⚠️ مقصورة على الصف: بلا `.fm-row` بتنسحب على القارئ كمان
     وبتخفي تسميات الرسالة المفتوحة. */
  .fm-row .fm-row__labels,
  .fm-row .fm-row__icon,
  .fm-row .fm-count-pill { display: none; }

  .fm-skeleton { min-height: 72px; padding-inline: 16px; }

  /* ---------- الزر العائم ---------- */
  .fm-fab {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    inset-block-end: calc(24px + var(--fm-safe-b));
    inset-inline-end: 16px;
    z-index: 25;
    height: 56px;
    padding-inline: 14px 20px;
    border-radius: 16px;
    background: var(--primary-gradient);
    color: var(--on-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: var(--compose-shadow);
  }
  .fm-fab:hover { color: var(--on-primary); filter: brightness(1.08); }
  .fm-app[data-pane="reader"] .fm-fab { display: none; }

  /* ---------- عرض الرسالة ---------- */
  .fm-reader__bar { height: 56px; padding-inline: 4px 12px; }
  .fm-reader__pos { display: none; }
  .fm-reader__title { font-size: 20px; line-height: 26px; }
  .fm-reader__actions { width: 100%; justify-content: flex-start; margin-inline-start: 0; }
  .fm-reader__foot { display: none; }

  /* شريط ردّ ملزوق بالقاع.
     sticky لحالها بتشتغل بس لما يكون في تمرير — برسالة قصيرة كان
     الشريط بيوقف بنص الشاشة. flex + margin-top:auto بتنزّله لقاع
     منطقة التمرير، و sticky بتخلّيه ظاهر لما تطول الرسالة. */
  .fm-reader__body { display: flex; flex-direction: column; }
  .fm-reader__replies {
    position: sticky;
    inset-block-end: 0;
    margin-block-start: auto;
    margin-inline: calc(var(--fm-reader-pad) * -1);
    padding: 10px var(--fm-reader-pad) calc(10px + var(--fm-safe-b));
    min-height: 64px;
    background: var(--read-bg);
    border-block-start: 1px solid var(--outline);
  }
  .fm-reader__replies .fm-btn { flex: 1; height: 44px; }

  .fm-attachment { width: 100%; }
}

/* ============================================================
   ≤ 560px : موبايل ضيّق
   ============================================================ */
@media (max-width: 560px) {
  :root { --fm-reader-pad: 16px; }
  .fm-overlay { padding: 0; }
  .fm-compose, .fm-modal { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .fm-overlay--dock { padding: 0; }
  .fm-kbd { display: none; }
  .fm-kv { grid-template-columns: 1fr; gap: 4px 0; }

  /* ---------- الأفعال السريعة: أيقونات وبس ----------
     خمس أزرار بنصّهن على ٣٦٠ بكسل بتصير تلات أسطر بتاكل نص
     اللستة. الاسم بينخفي والأيقونة بتضل، والـaria-label على
     الزر (موجودة بالـHTML) بتخلّي قارئ الشاشة يسمع الاسم
     كامل — الأيقونة لحالها ما بتنقرا. */
  .cd-btn__label { display: none; }
  .cd-btn {
    width: 36px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .cd-btn .ph-duotone { font-size: 20px; }
  /* رجعوا يلحقوا على سطر واحد — فما عاد لازم كسر السطر */
  .cd-spacer { flex-basis: 0; height: auto; }
  .fm-cal__day { min-height: 58px; padding: 4px; }
  .fm-cal__event { display: none; }

  /* شريط الشرائح بينسحب أفقي — منخفي الشريط ومنخلّي السحب يوقف
     على عنصر، متل التطبيقات */
  .fm-filters {
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .fm-filters::-webkit-scrollbar { display: none; }
  .fm-filters > * { scroll-snap-align: start; }
}

/* ============================================================
   الحواف الآمنة — النوتش وشريط الهوم
   ------------------------------------------------------------
   كل الصفحات عندها viewport-fit=cover، يعني المتصفح بيمدّ
   الصفحة تحت النوتش. بلا الحشوات التحت بينقصّ المحتوى.
   على جهاز بلا نوتش بترجع env() صفر فما في أي أثر.
   ============================================================ */
.fm-topbar {
  padding-block-start: var(--fm-safe-t);
  height: calc(var(--fm-topbar-h) + var(--fm-safe-t));
  padding-inline-start: calc(8px + var(--fm-safe-s));
  padding-inline-end: calc(8px + var(--fm-safe-e));
}

/* كل شي بيتموضع تحت الشريط لازم يعرف طولو الجديد */
@media (max-width: 699px) {
  .fm-sidebar,
  .fm-scrim { inset-block-start: calc(var(--fm-topbar-h) + var(--fm-safe-t)); }
  .fm-sidebar { padding-block-end: calc(16px + var(--fm-safe-b)); }
  .fm-topbar {
    padding-inline-start: calc(12px + var(--fm-safe-s));
    padding-inline-end: calc(12px + var(--fm-safe-e));
  }
  .fm-topbar::after { inset-block: calc(8px + var(--fm-safe-t)) 8px; }
}

/* قاع القارئ فوق شريط الهوم */
.fm-reader__body { padding-block-end: calc(40px + var(--fm-safe-b)); }
.fm-reader__foot { padding-block-end: calc(10px + var(--fm-safe-b)); }

/* اللوائح بتنتهي فوق شريط الهوم كمان */
.fm-list-pane__body { padding-block-end: var(--fm-safe-b); }
.fm-page__body { padding-block-end: calc(40px + var(--fm-safe-b)); }

@media (max-width: 560px) {
  /* النوافذ بتصير ملء الشاشة بهالمقاس، فلازم تحترم الحوافّ الأربعة */
  .fm-compose, .fm-modal {
    padding-block-start: var(--fm-safe-t);
    padding-block-end: var(--fm-safe-b);
    padding-inline-start: var(--fm-safe-s);
    padding-inline-end: var(--fm-safe-e);
  }
}

/* ============================================================
   أجهزة اللمس — مستقلة عن عرض الشاشة
   ------------------------------------------------------------
   (pointer: coarse) معناها الإصبع هو أداة التأشير: جوال، تابلت،
   وشاشات اللمس. الديسكتوب بالماوس ما بيتأثر بولا قاعدة هون.
   ============================================================ */
@media (pointer: coarse) {

  /* ---------- منع تكبير iOS التلقائي ----------
     سفاري بيعمل zoom إجباري على أي حقل خطّو أصغر من 16px، وبعدها
     بيضل مكبّر. هاد أوضح شي بيخلّي التطبيق يحسّ متل صفحة ويب.
     16px بالضبط هي العتبة — مش أكتر. */
  input, textarea, select,
  .fm-field__input,
  [contenteditable="true"] { font-size: 16px; }

  /* خانات كود التحقق أصلاً ٢٢ — منخليها متل ما هي */
  .fm-code input { font-size: 22px; }

  /* ---------- أهداف اللمس ٤٨ بكسل ----------
     min-height لحالها ما بتكفي: الأزرار flex فمنحتاج
     align-items كمان حتى يضل النص بالنص. */
  .fm-btn,
  .fm-nav__item,
  .fm-settings-nav__item,
  .fm-sidebar__link,
  .fm-menu__item,
  .fm-tab {
    min-height: var(--fm-touch);
    display: inline-flex;
    align-items: center;
  }
  .fm-nav__item,
  .fm-settings-nav__item,
  .fm-sidebar__link,
  .fm-menu__item { display: flex; }

  .fm-btn--icon {
    min-width: var(--fm-touch);
    min-height: var(--fm-touch);
    justify-content: center;
  }
  .fm-menu-btn { min-width: 48px; min-height: 48px; }

  /* النجمة ومربّع الاختيار صغار — منكبّر منطقة الضغط بلا ما
     نكبّر الرمز نفسه */
  .fm-row__star, .fm-row > .fm-check {
    min-width: 40px; min-height: 40px;
    margin-inline: -10px;
  }

  /* صفوف الرسائل: أطول شوي حتى يسهل ضغطها */
  .fm-row { min-height: 60px; }

  /* ---------- سلوك التمرير ---------- */
  .fm-list-pane__body,
  .fm-reader__body,
  .fm-page__body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* :hover على اللمس بيعلق بعد الضغط (الصف بيضل مضوّي).
     منلغيه ومنخلّي :active يعطي التغذية الراجعة. */
  .fm-row:hover { box-shadow: none; }
  .fm-row:active { background: var(--surface-container-high); }
  .fm-btn:hover { color: inherit; background: none; }
  .fm-btn:active { background: var(--surface-container-high); }
  .fm-btn--primary:hover, .fm-compose-btn:hover, .fm-fab:hover { filter: none; }

  /* منع التأخير ٣٠٠ms وإلغاء التكبير بالضغط المزدوج */
  .fm-btn, .fm-row, .fm-nav__item, .fm-menu-btn, .fm-back, .fm-fab,
  .fm-compose-btn, .fm-chip, .fm-tab { touch-action: manipulation; }
}