/* ============================================================
   بريد tn.sa — لوحة قراءة الرسالة
   اللوحة مقسومة بين مستندين: شريط الأدوات في المستند الأمّ
   (#layout-content > .header)، ورأس الرسالة وجسمها داخل إطار
   #messagecontframe. القواعد هنا تخدم الاثنين لأن layout.html
   يحمّل هذا الملفّ في الإطار أيضًا.
   ============================================================ */

/* قواعد الشاشة الضيّقة في tn-shell تُطبَّق داخل الإطار أيضًا (عرضه ٩٤٠px)
   فتجعل #layout-content مطلقًا وتزيحه — نبطلها داخل الإطار وحده */
html.iframe #layout-content {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  box-shadow: none !important;
  border-inline-start: 0 !important;
}

/* المتصفّح يرث text-align:left من أساس elastic، فينهار اتجاه الرأس والجسم */
html.iframe body.action-preview,
html.iframe body.action-show,
body.action-show #layout-content > .content,
#message-header,
#message-content {
  text-align: start;
}

/* ============ اللوحة ============ */
body.task-mail #layout-content {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  background: var(--tn-surface);
}

html.iframe #layout-content > .content.frame-content {
  padding-block: 20px 56px;
  padding-inline: 28px;
  overflow-y: auto;
  background: var(--tn-surface);
}

/* ============ شريط أدوات الرسالة ============ */
body.task-mail #layout-content > .header {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  block-size: 56px;
  min-block-size: 56px;
  padding-inline: 10px;
  background: var(--tn-surface);
  border-block-end: 1px solid var(--tn-divider);
  border-radius: 0;
  box-shadow: none;
}

/* العنوان في الشريط فارغ دائمًا في وضع المعاينة، ووجوده يدفع الأزرار بعيدًا */
body.task-mail #layout-content > .header > .header-title:empty { display: none; }
body.task-mail #layout-content > .header > .header-title {
  order: 3;
  flex: 1 1 auto;
  font-size: var(--tn-fs-md);
  color: var(--tn-text-2);
  font-weight: 500;
}

body.task-mail #layout-content > .header > #toolbar-menu {
  order: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
body.task-mail #toolbar-menu > li {
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* فاصل رأسي بين مجموعات الإجراءات — بديل li.spacer المطّاطي في elastic */
body.task-mail #toolbar-menu > li.spacer {
  flex: none;
  inline-size: 1px;
  block-size: 20px;
  margin-inline: 6px;
  background: var(--tn-divider);
  align-self: center;
}

/* الزرّ الأيقوني الدائري ٤٠px — بلا نصّ ولا حدّ */
body.task-mail #toolbar-menu a,
body.task-mail #layout-content > .header > a.button.icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  inline-size: 40px !important;
  min-inline-size: 40px !important;
  block-size: 40px !important;
  min-block-size: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--tn-r-pill);
  background: transparent !important;
  color: var(--tn-icon) !important;
  text-decoration: none;
  position: relative;
  transition: background-color var(--tn-d-1) var(--tn-ease), color var(--tn-d-1) var(--tn-ease);
}
body.task-mail #toolbar-menu a:hover,
body.task-mail #layout-content > .header > a.button.icon:hover {
  background: color-mix(in srgb, var(--tn-icon) 10%, transparent) !important;
  color: var(--tn-text) !important;
}
body.task-mail #toolbar-menu a:active {
  background: color-mix(in srgb, var(--tn-icon) 18%, transparent) !important;
}
body.task-mail #toolbar-menu a.disabled {
  opacity: .38;
  pointer-events: none;
}

/* elastic يرسم أيقوناته بمحرف FontAwesome داخل content — تصفيره إلزامي
   وإلا ظهر المربّع الأبيض فوق قناعنا */
body.task-mail #toolbar-menu a::before,
body.task-mail #layout-content > .header > a.button.icon::before {
  content: '' !important;
  display: block;
  float: none !important;
  font-family: inherit !important;
  font-size: 0 !important;
  inline-size: 20px !important;
  block-size: 20px !important;
  margin: 0 !important;
  line-height: 1 !important;
  background-color: currentColor;
  -webkit-mask: var(--icon, var(--i-more)) center / contain no-repeat;
  mask: var(--icon, var(--i-more)) center / contain no-repeat;
}
body.task-mail #toolbar-menu a::after { content: none !important; }

/* النصّ يبقى لقارئ الشاشة فقط */
body.task-mail #toolbar-menu a > span.inner,
body.task-mail #layout-content > .header > a.button.icon > span.inner {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* إسناد الأيقونات لكلّ أمر */
body.task-mail #toolbar-menu a.reply        { --icon: var(--i-reply); }
body.task-mail #toolbar-menu a.reply-all    { --icon: var(--i-reply-all); }
body.task-mail #toolbar-menu a.forward      { --icon: var(--i-forward); }
body.task-mail #toolbar-menu a.archive      { --icon: var(--i-archive); }
body.task-mail #toolbar-menu a.junk         { --icon: var(--i-junk); }
body.task-mail #toolbar-menu a.notjunk      { --icon: var(--i-inbox); }
body.task-mail #toolbar-menu a.delete       { --icon: var(--i-trash); }
body.task-mail #toolbar-menu a.markmessage  { --icon: var(--i-unread); }
body.task-mail #toolbar-menu a.snooze       { --icon: var(--i-snooze); }
body.task-mail #toolbar-menu a.print        { --icon: var(--i-print); }
body.task-mail #toolbar-menu a.more         { --icon: var(--i-more); }
body.task-mail #toolbar-menu a.prev         { --icon: var(--i-chevron-r); }
body.task-mail #toolbar-menu a.next         { --icon: var(--i-chevron-l); }
body.task-mail #toolbar-menu a.select       { --icon: var(--i-check); }
body.task-mail #toolbar-menu a.threads      { --icon: var(--i-label); }
body.task-mail #toolbar-menu a.options      { --icon: var(--i-tune); }

/* أزرار مخفيّة أصلًا: الإنشاء المستنسخ وأدوات القائمة الصغيرة */
body.task-mail #toolbar-menu > li > a.compose,
body.task-mail #toolbar-menu > li > a.hidden,
body.task-mail #toolbar-menu > li > a.hidden-big,
body.task-mail #toolbar-menu > li > a.hidden-large { display: none !important; }

/* سهم القائمة الصغير بجانب «رد على الجميع» و«إعادة توجيه» —
   جيميل لا يعرضه، وخياراته متاحة من زرّ المزيد */
body.task-mail #toolbar-menu .dropbutton > a.dropdown { display: none !important; }
body.task-mail #toolbar-menu .dropbutton { display: flex; }

/* زرّ ≡ الذي ينقل الشريط إلى قائمة منبثقة: للشاشات الضيّقة فقط */
body.task-mail #layout-content > .header > a.button.icon.toolbar-menu-button { order: 9; display: none !important; }

/* ============ زرّ الرجوع (شاشة ضيّقة) ============ */
body.task-mail #layout-content > .header > a.button.icon.back-list-button {
  order: 1;
  display: none !important;
  --icon: var(--i-back);
}
/* السهم مرسوم لاتّجاه LTR، فيُعكس أفقيًا في العربية */
html[dir='rtl'] body.task-mail #layout-content > .header > a.button.icon.back-list-button::before {
  transform: scaleX(-1);
}

/* ============ رأس الرسالة ============ */
#message-header {
  margin: 0 0 20px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--tn-divider-soft);
}

#message-header > h2.subject {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: var(--tn-fs-xl);
  font-weight: 400;
  line-height: var(--tn-lh-tight);
  color: var(--tn-text);
  unicode-bidi: plaintext;
}

/* النجمة تحلّ محلّ علم FontAwesome للرسالة المميّزة */
body.status-flagged #message-header > h2.subject::before {
  content: '' !important;
  flex: none;
  inline-size: 20px !important;
  block-size: 20px !important;
  font-family: inherit !important;
  font-size: 0 !important;
  background-color: var(--tn-star);
  -webkit-mask: var(--i-star-fill) center / contain no-repeat;
  mask: var(--i-star-fill) center / contain no-repeat;
}

#message-header > h2.subject a.extwin {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--tn-r-pill);
  color: var(--tn-text-3);
  opacity: 0;
  transition: opacity var(--tn-d-2) var(--tn-ease), background-color var(--tn-d-1) var(--tn-ease);
}
#message-header:hover > h2.subject a.extwin { opacity: 1; }
#message-header > h2.subject a.extwin:hover { background: var(--tn-surface-2); color: var(--tn-text); }
#message-header > h2.subject a.extwin::before {
  content: '' !important;
  font-family: inherit !important;
  font-size: 0 !important;
  float: none !important;
  margin: 0 !important;
  inline-size: 18px !important;
  block-size: 18px !important;
  background-color: currentColor;
  -webkit-mask: var(--i-forward) center / contain no-repeat;
  mask: var(--i-forward) center / contain no-repeat;
  transform: rotate(-45deg);
}
#message-header > h2.subject a.extwin span.inner { display: none; }

/* سطر المرسِل */
#message-header > .header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: none;
  border: 0;
  padding: 0;
  block-size: auto;
  min-block-size: 0;
}

#message-header img.contactphoto,
#message-header .tn-avatar {
  flex: none;
  inline-size: 40px !important;
  block-size: 40px !important;
  border-radius: var(--tn-r-pill);
  margin: 2px 0 0;
  object-fit: cover;
  background: var(--tn-surface-2);
}
/* إن أضاف tn.js صورة رمزية بالحروف الأولى فهي أولى من صورة elastic الرمادية */
#message-header .tn-avatar ~ img.contactphoto { display: none; }

#message-header .header-content {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
}

#message-header .header-summary { margin: 0; }
/* عناصر السطر: «من» + المرسِل + «بتاريخ» + التاريخ — المرسِل يبتلع
   الفراغ فيُدفع التاريخ إلى الطرف الآخر كما في جيميل */
#message-header .header-summary > span {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: var(--tn-fs-md);
  color: var(--tn-text-3);
  line-height: 1.5;
}
#message-header .header-summary .adr {
  margin-inline-end: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-inline-size: 0;
}
#message-header .header-summary .adr > a.rcmContactAddress {
  font-weight: 600;
  font-size: var(--tn-fs-md);
  color: var(--tn-text);
  text-decoration: none;
  unicode-bidi: plaintext;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#message-header .header-summary .adr > a.rcmContactAddress:hover { text-decoration: underline; }
#message-header .header-summary .text-nowrap {
  flex: none;
  font-size: var(--tn-fs-sm);
  color: var(--tn-text-3);
  white-space: nowrap;
}

/* زرّ «أضف إلى دفتر العناوين» يظهر عند المرور فقط */
#message-header .adr > a.rcmaddcontact {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  align-self: center;
  color: var(--tn-text-3);
  opacity: 0;
  transition: opacity var(--tn-d-2) var(--tn-ease);
}
#message-header .header:hover .adr > a.rcmaddcontact { opacity: 1; }
#message-header .adr > a.rcmaddcontact::before {
  content: '' !important;
  display: block;
  font-family: inherit !important;
  font-size: 0 !important;
  float: none !important;
  margin: 0 !important;
  inline-size: 18px !important;
  block-size: 18px !important;
  background-color: currentColor;
  -webkit-mask: var(--i-person) center / contain no-repeat;
  mask: var(--i-person) center / contain no-repeat;
}

/* سطر «إلى فلان» تحت الاسم: نكشف صفّ المستقبل وحده من جدول المقدّمات */
#message-header .header-content .header-headers {
  display: table;
  margin: 2px 0 0;
  border-collapse: collapse;
  font-size: var(--tn-fs-sm);
  color: var(--tn-text-3);
}
#message-header .header-headers tr { display: none; }
#message-header .header-headers tr:has(> td.to) { display: table-row; }
#message-header .header-headers td { padding: 0; border: 0; }
#message-header .header-headers td.header-title { display: none; }
#message-header .header-headers td.to::before { content: 'إلى '; color: var(--tn-text-3); }
#message-header .header-headers td.to a {
  color: var(--tn-text-3);
  text-decoration: none;
  unicode-bidi: plaintext;
}
#message-header .header-headers td.to a.rcmaddcontact { display: none; }
/* عند طلب «التفاصيل» يعود الجدول كاملًا */
#message-header .header-content.details-view .header-headers { display: table !important; }
#message-header .header-content.details-view .header-headers tr { display: table-row; }
#message-header .header-content.details-view .header-headers td { padding-block: 2px; }
#message-header .header-content.details-view .header-headers td.header-title {
  display: table-cell;
  color: var(--tn-text-3);
  font-weight: 400;
  padding-inline-end: 12px;
  padding-left: 0;
  padding-right: 0;
  white-space: nowrap;
}
#message-header .header-content.details-view .header-headers td.to::before { content: none; }

/* روابط التفاصيل/المقدّمة */
#message-header .header-links {
  display: flex;
  gap: 4px;
  margin: 8px 0 0;
}
#message-header .header-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 4px 10px;
  border-radius: var(--tn-r-pill);
  font-size: var(--tn-fs-sm);
  color: var(--tn-text-2);
  text-decoration: none;
  transition: background-color var(--tn-d-1) var(--tn-ease);
}
#message-header .header-links a:hover { background: var(--tn-surface-2); color: var(--tn-text); }
#message-header .header-links a::before {
  content: '' !important;
  font-family: inherit !important;
  font-size: 0 !important;
  float: none !important;
  margin: 0 !important;
  block-size: 16px !important;
  inline-size: 16px !important;
  line-height: 1 !important;
  background-color: currentColor;
  -webkit-mask: var(--icon, var(--i-expand)) center / contain no-repeat;
  mask: var(--icon, var(--i-expand)) center / contain no-repeat;
}
#message-header .header-links a.headers-details { --icon: var(--i-expand); }
#message-header .header-links a.headers-summary { --icon: var(--i-expand); }
#message-header .header-links a.headers-summary::before { transform: rotate(180deg); }
#message-header .header-links a.headers-all      { --icon: var(--i-help); }
#message-header .header-links a.html             { --icon: var(--i-label); }
#message-header .header-links a.plain            { --icon: var(--i-draft); }
#message-header .header-links a.zipdownload      { --icon: var(--i-download); }

/* ============ جسم الرسالة ============ */
/* المرفقات تحت النصّ كما في جيميل، لا فوقه */
#message-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#message-content > .rightcol { order: 1; min-inline-size: 0; }
#message-content > .leftcol  { order: 2; min-inline-size: 0; }

#messagebody {
  font-size: var(--tn-fs-md);
  line-height: var(--tn-lh);
  color: var(--tn-text);
}
#messagebody .message-part,
#messagebody .message-htmlpart { padding-block-start: 0; }
#messagebody .message-part > div.pre,
#messagebody div.pre {
  font-family: var(--tn-font) !important;
  font-size: var(--tn-fs-md);
  line-height: var(--tn-lh);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  text-align: start;
}
/* رسائل HTML تُدرَج في المستند نفسه (لا داخل إطار) فلا يطالها embed.css */
#messagebody .message-htmlpart img { max-inline-size: 100%; height: auto; }
#messagebody .message-htmlpart table { max-inline-size: 100%; }
#messagebody blockquote {
  margin-inline: 0;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--tn-divider);
  color: var(--tn-text-2);
}
#messagebody a { color: var(--tn-primary); }

/* تنبيه الصور المحجوبة */
#message-objects .ui.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--tn-r-sm);
  background: var(--tn-surface-2);
  color: var(--tn-text-2);
  font-size: var(--tn-fs-sm);
}
#message-objects .ui.alert > i.icon {
  flex: none;
  inline-size: 18px !important;
  block-size: 18px !important;
  font-family: inherit !important;
  font-size: 0 !important;
  background-color: var(--tn-warning);
  -webkit-mask: var(--i-important) center / contain no-repeat;
  mask: var(--i-important) center / contain no-repeat;
}
#message-objects .ui.alert > i.icon::before { content: '' !important; }
#message-objects .ui.alert .boxbuttons { margin-inline-start: auto; display: flex; gap: 8px; }
#message-objects .ui.alert a {
  color: var(--tn-primary);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* ============ المرفقات ============ */
#message-content .attachmentslist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0 !important;
  padding: 0;
  list-style: none;
}
#message-content .attachmentslist:empty { display: none; }
#message-content .attachmentslist > li {
  margin: 0;
  padding: 0;
  border: 1px solid var(--tn-divider);
  border-radius: var(--tn-r-md);
  background: var(--tn-surface);
  overflow: hidden;
  transition: background-color var(--tn-d-1) var(--tn-ease), box-shadow var(--tn-d-2) var(--tn-ease);
}
#message-content .attachmentslist > li:hover {
  background: var(--tn-surface-2);
  box-shadow: var(--tn-e1);
}
#message-content .attachmentslist > li > a.filename {
  display: flex;
  align-items: center;
  gap: 10px;
  max-inline-size: 320px;
  padding: 8px 12px;
  color: var(--tn-text);
  text-decoration: none;
  font-size: var(--tn-fs-sm);
}
/* أيقونة النوع داخل الرابط لا خارجه، ليبقى كامل البطاقة قابلًا للنقر */
#message-content .attachmentslist > li > a.filename::before {
  content: '' !important;
  flex: none;
  font-family: inherit !important;
  font-size: 0 !important;
  float: none !important;
  margin: 0 !important;
  inline-size: 22px !important;
  block-size: 22px !important;
  background-color: var(--tn-icon);
  -webkit-mask: var(--icon, var(--i-attach)) center / contain no-repeat;
  mask: var(--icon, var(--i-attach)) center / contain no-repeat;
}
#message-content .attachmentslist > li.pdf   > a.filename::before { background-color: var(--tn-danger); --icon: var(--i-draft); }
#message-content .attachmentslist > li.doc   > a.filename::before,
#message-content .attachmentslist > li.text  > a.filename::before { background-color: var(--tn-primary); --icon: var(--i-draft); }
#message-content .attachmentslist > li.xls   > a.filename::before { background-color: var(--tn-success); --icon: var(--i-draft); }
#message-content .attachmentslist > li.image > a.filename::before { background-color: var(--tn-warning); --icon: var(--i-label); }
#message-content .attachmentslist > li.zip   > a.filename::before { background-color: var(--tn-text-3); --icon: var(--i-folder); }
#message-content .attachmentslist > li.message > a.filename::before { --icon: var(--i-mail); }

#message-content .attachmentslist .attachment-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  unicode-bidi: plaintext;
}
#message-content .attachmentslist .attachment-size {
  flex: none;
  color: var(--tn-text-3);
  font-size: var(--tn-fs-xs);
}
/* سهم التنزيل يظهر عند المرور — داخل الرابط فنقره ينزّل فعلًا */
#message-content .attachmentslist > li > a.filename::after {
  content: '';
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  background-color: var(--tn-icon);
  -webkit-mask: var(--i-download) center / contain no-repeat;
  mask: var(--i-download) center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--tn-d-2) var(--tn-ease);
}
#message-content .attachmentslist > li:hover > a.filename::after { opacity: 1; }

/* ============ أزرار الردّ السفلية ============ */
body.task-mail .content-frame-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  block-size: 60px;
  padding-inline: 20px;
  background: var(--tn-surface);
  border-block-start: 1px solid var(--tn-divider-soft);
}
body.task-mail .content-frame-navigation > .buttons {
  display: flex;
  gap: 8px;
  margin-inline-end: auto;
}
body.task-mail .content-frame-navigation > .buttons a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  block-size: 36px;
  padding-inline: 18px;
  border: 1px solid var(--tn-outline);
  border-radius: var(--tn-r-pill);
  background: transparent;
  color: var(--tn-primary);
  font-size: var(--tn-fs-md);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--tn-d-1) var(--tn-ease), border-color var(--tn-d-1) var(--tn-ease);
}
body.task-mail .content-frame-navigation > .buttons a:hover {
  background: color-mix(in srgb, var(--tn-primary) 8%, transparent);
  border-color: var(--tn-primary);
}
body.task-mail .content-frame-navigation > .buttons a.disabled { opacity: .38; pointer-events: none; }
body.task-mail .content-frame-navigation > .buttons a::before {
  content: '' !important;
  font-family: inherit !important;
  font-size: 0 !important;
  float: none !important;
  margin: 0 !important;
  inline-size: 18px !important;
  block-size: 18px !important;
  background-color: currentColor;
  -webkit-mask: var(--icon, var(--i-reply)) center / contain no-repeat;
  mask: var(--icon, var(--i-reply)) center / contain no-repeat;
}
body.task-mail .content-frame-navigation > .buttons a.reply   { --icon: var(--i-reply); }
body.task-mail .content-frame-navigation > .buttons a.forward { --icon: var(--i-forward); }

/* الانتقال بين الرسائل: زرّان دائريّان */
body.task-mail .content-frame-navigation > a.button.prev,
body.task-mail .content-frame-navigation > a.button.next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--tn-r-pill);
  color: var(--tn-icon);
  transition: background-color var(--tn-d-1) var(--tn-ease);
}
body.task-mail .content-frame-navigation > a.button.prev:hover,
body.task-mail .content-frame-navigation > a.button.next:hover {
  background: color-mix(in srgb, var(--tn-icon) 10%, transparent);
}
body.task-mail .content-frame-navigation > a.button.prev::before,
body.task-mail .content-frame-navigation > a.button.next::before {
  content: '' !important;
  font-family: inherit !important;
  font-size: 0 !important;
  float: none !important;
  margin: 0 !important;
  inline-size: 20px !important;
  block-size: 20px !important;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
body.task-mail .content-frame-navigation > a.button.prev { --icon: var(--i-chevron-r); }
body.task-mail .content-frame-navigation > a.button.next { --icon: var(--i-chevron-l); }
body.task-mail .content-frame-navigation > a.button span.inner {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
body.task-mail .content-frame-navigation.hide-nav-buttons > a.button.prev,
body.task-mail .content-frame-navigation.hide-nav-buttons > a.button.next { display: none; }

/* ============ شاشة ضيّقة: اللوحة تنزلق فوق القائمة ============ */
@media (max-width: 1200px) {
  body.task-mail:not(.tn-iframe) #layout-content {
    box-shadow: var(--tn-e3);
    border-inline-start: 0 !important;
  }
  body.task-mail:not(.tn-iframe) #layout-content > .header > a.button.icon.back-list-button {
    display: inline-flex !important;
  }
  body.task-mail:not(.tn-iframe) #layout-content > .header > a.button.icon.toolbar-menu-button {
    display: inline-flex !important;
    margin-inline-start: auto !important;
  }
  html.iframe #layout-content > .content.frame-content { padding-inline: 18px; }
}

/* إطار الرسالة نفسه */
body.task-mail .iframe-wrapper {
  flex: 1 1 auto;
  min-block-size: 0;
  background: var(--tn-surface);
}
body.task-mail #messagecontframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  background: var(--tn-surface);
}