/* ============================================================
   بريد tn.sa — نافذة الإنشاء
   القرار: لوحة كاملة لا بطاقة عائمة في الزاوية. جرّبنا بطاقة جيميل
   الصغيرة أسفل الشاشة فتضاربت مع بنية Roundcube (الخيارات والمرفقات
   تعيش في عمود مستقلّ، ومحرّر TinyMCE يحتاج ارتفاعًا حقيقيًا)، فكانت
   النتيجة حقولًا مخفيّة وشريط تحرير مقصوصًا. اللوحة الكاملة تعطي
   المساحة نفسها التي يعطيها جيميل في وضع «ملء الشاشة».
   ============================================================ */

/* ============ العمود الرئيسي ============ */
body.action-compose #layout-content {
  display: flex !important;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  border-inline-start: 0 !important;
}

/* شريط أدوات الإنشاء */
body.action-compose #layout-content > .header {
  display: flex !important;
  align-items: center;
  gap: 4px;
  block-size: 56px;
  flex: none;
  padding-inline: 20px 12px;
  border-block-end: 1px solid var(--tn-divider);
  background: var(--tn-surface);
}
body.action-compose #layout-content > .header .header-title {
  font-size: var(--tn-fs-lg);
  font-weight: 500;
  color: var(--tn-text);
  margin-inline-end: auto;
}
body.action-compose #layout-content > .header .task-menu-button { display: none !important; }
body.action-compose #toolbar-menu {
  display: flex !important;
  align-items: center;
  gap: 2px;
  background: transparent !important;
  border: 0 !important;
}
body.action-compose #toolbar-menu { list-style: none; margin: 0; padding: 0; }
body.action-compose #toolbar-menu > li { display: block; }
body.action-compose #toolbar-menu .spacer { display: none; }
body.action-compose #toolbar-menu > a,
body.action-compose #toolbar-menu .dropbutton > a {
  position: relative;
  display: grid !important;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--tn-r-pill);
  color: var(--tn-icon);
  font-size: 0;
  transition: background-color var(--tn-d-2) var(--ease-snap);
}
body.action-compose #toolbar-menu > a:hover,
body.action-compose #toolbar-menu .dropbutton > a:hover {
  background: color-mix(in srgb, var(--tn-icon) 10%, transparent);
}
body.action-compose #toolbar-menu a.disabled { opacity: .38; pointer-events: none; }
body.action-compose #toolbar-menu .inner {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body.action-compose #toolbar-menu a::before {
  content: '' !important;
  font-family: inherit !important;
  inline-size: 22px; block-size: 22px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
body.action-compose #toolbar-menu a.options    { --icon: var(--i-tune); }
body.action-compose #toolbar-menu a.save       { --icon: var(--i-draft); }
body.action-compose #toolbar-menu a.attach     { --icon: var(--i-attach); }
body.action-compose #toolbar-menu a.signature  { --icon: var(--i-pencil); }
body.action-compose #toolbar-menu a.responses  { --icon: var(--i-label); }
body.action-compose #toolbar-menu a.spellcheck { --icon: var(--i-check); }
body.action-compose #toolbar-menu a.encrypt    { --icon: var(--i-junk); }
body.action-compose #toolbar-menu a.dropdown   { --icon: var(--i-expand); inline-size: 24px !important; }

/* ============ جسم النموذج ============ */
body.action-compose #compose-content {
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  background: var(--tn-surface);
}
body.action-compose #compose-content > form {
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex !important;
  flex-direction: column;
  inline-size: 100% !important;
  max-inline-size: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* elastic يفرض max-width: 880px على النموذج، فتخرج صفوفه عن اللوحة في RTL */
body.action-compose #compose-headers,
body.action-compose .compose-headers,
body.action-compose #composebodycontainer,
body.action-compose .formbuttons {
  inline-size: 100% !important;
  max-inline-size: none !important;
  box-sizing: border-box;
}

/* ============ الحقول ============ */
body.action-compose #compose-headers { flex: none; padding: 4px 24px 0; }
body.action-compose .compose-headers { display: block; }

body.action-compose .compose-headers .form-group.row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  min-block-size: 48px;
  border-block-end: 1px solid var(--tn-divider-soft);
  transition: border-color var(--tn-d-2) var(--ease-snap);
}
body.action-compose .compose-headers .form-group.row:focus-within {
  border-block-end-color: var(--tn-primary);
}
body.action-compose .compose-headers .form-group.row.hidden { display: none !important; }

body.action-compose .compose-headers label.col-form-label {
  flex: 0 0 auto;
  inline-size: auto;
  min-inline-size: 52px;
  max-inline-size: none;
  padding: 0;
  margin: 0;
  color: var(--tn-text-3);
  font-size: var(--tn-fs-md);
  font-weight: 400;
}
body.action-compose .compose-headers [class*='col-'] {
  flex: 1 1 auto;
  inline-size: auto;
  max-inline-size: none;
  padding: 0;
}
body.action-compose .compose-headers .input-group {
  display: flex;
  align-items: center;
  gap: 4px;
  inline-size: 100%;
}

body.action-compose .compose-headers input.form-control,
body.action-compose .compose-headers textarea,
body.action-compose .compose-headers select.form-control {
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: 100%;
  min-block-size: 40px;
  block-size: auto;
  max-block-size: 120px;
  padding: 8px 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--tn-text);
  font-family: inherit;
  font-size: var(--tn-fs-md);
  line-height: 1.6;
  resize: none;
  outline: none !important;
}
body.action-compose .compose-headers select.form-control {
  appearance: none;
  cursor: pointer;
  padding-inline-end: 22px;
  background-image: var(--i-expand) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 18px !important;
}
body.action-compose .compose-headers input::placeholder,
body.action-compose .compose-headers textarea::placeholder { color: var(--tn-text-3); }

/* أزرار نهاية الحقل (إضافة مستلم، تعديل، حذف) */
body.action-compose .compose-headers .input-group-append { display: flex; align-items: center; }
body.action-compose .compose-headers .input-group-text {
  position: relative;
  display: grid !important;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--tn-r-pill);
  background: transparent !important;
  color: var(--tn-icon);
  font-size: 0;
  transition: background-color var(--tn-d-2) var(--ease-snap);
}
body.action-compose .compose-headers .input-group-text:hover {
  background: color-mix(in srgb, var(--tn-icon) 10%, transparent) !important;
}
body.action-compose .compose-headers .input-group-text .inner {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
}
body.action-compose .compose-headers .input-group-text::before {
  content: '' !important;
  font-family: inherit !important;
  inline-size: 18px; block-size: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
body.action-compose .compose-headers .input-group-text.edit      { --icon: var(--i-pencil); }
body.action-compose .compose-headers .input-group-text.add       { --icon: var(--i-more); }
body.action-compose .compose-headers .input-group-text.recipient { --icon: var(--i-contacts); }
body.action-compose .compose-headers .input-group-text.delete    { --icon: var(--i-close); }

/* سطر الموضوع أبرز قليلًا — كما في جيميل */
body.action-compose #compose_subject input.form-control {
  font-size: var(--tn-fs-lg);
  font-weight: 500;
}

/* ============ المحرّر ============ */
body.action-compose #composebodycontainer {
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 24px 0;
}
body.action-compose #composebody {
  flex: 1 1 auto;
  min-block-size: 220px;
  inline-size: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--tn-text);
  font-family: inherit;
  font-size: var(--tn-fs-md);
  line-height: var(--tn-lh);
  padding: 12px 0;
  resize: none;
  outline: none !important;
}

/* TinyMCE: بلا إطار، شريط أدوات هادئ */
body.action-compose .tox.tox-tinymce {
  flex: 1 1 auto;
  min-block-size: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.action-compose .tox .tox-editor-header {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 4px 0 !important;
}
body.action-compose .tox .tox-toolbar,
body.action-compose .tox .tox-toolbar__primary,
body.action-compose .tox .tox-toolbar-overlord {
  background: transparent !important;
  border: 0 !important;
  flex-wrap: wrap;
}
body.action-compose .tox .tox-tbtn {
  block-size: 32px;
  inline-size: 32px;
  margin: 2px;
  border-radius: var(--tn-r-sm) !important;
  color: var(--tn-icon) !important;
}
body.action-compose .tox .tox-tbtn:hover { background: var(--tn-surface-2) !important; }
body.action-compose .tox .tox-tbtn svg { fill: var(--tn-icon) !important; }
body.action-compose .tox .tox-edit-area { border: 0 !important; }
body.action-compose .tox .tox-edit-area__iframe { background: var(--tn-surface) !important; }
body.action-compose .tox .tox-statusbar { display: none !important; }

/* ============ شريط الإجراءات السفلي ============ */
body.action-compose .formbuttons {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-block-start: 1px solid var(--tn-divider);
  background: var(--tn-surface);
}
body.action-compose .formbuttons .float-right { margin-inline-start: auto; float: none !important; }

body.action-compose button.btn.send {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  block-size: 42px;
  padding-inline: 26px;
  border: 0;
  border-radius: var(--tn-r-pill);
  background: var(--tn-primary) !important;
  color: #fff !important;
  font-family: inherit;
  font-size: var(--tn-fs-md);
  font-weight: 500;
  box-shadow: var(--tn-e1);
  cursor: pointer;
  transition: transform 200ms var(--ease-snap), box-shadow 200ms var(--ease-snap), background-color var(--tn-d-2) var(--ease-snap);
}
body.action-compose button.btn.send::before {
  content: '';
  inline-size: 20px; block-size: 20px;
  background-color: currentColor;
  -webkit-mask: var(--i-send) center / contain no-repeat;
  mask: var(--i-send) center / contain no-repeat;
  transform: scaleX(-1); /* في RTL يشير السهم إلى اليسار */
}
body.action-compose button.btn.send:hover:not(:disabled) {
  background: var(--tn-primary-hover) !important;
  box-shadow: var(--tn-e2);
  transform: translateY(-1px);
}
body.action-compose button.btn.send:active:not(:disabled) { transform: translateY(0); }
body.action-compose button.btn.send:disabled { opacity: .5; cursor: default; box-shadow: none; }

body.action-compose .formbuttons a.extwin {
  display: grid;
  place-items: center;
  inline-size: 40px; block-size: 40px;
  border-radius: var(--tn-r-pill);
  color: var(--tn-icon) !important;
  font-size: 0;
  text-decoration: none !important;
}
body.action-compose .formbuttons a.extwin:hover { background: color-mix(in srgb, var(--tn-icon) 10%, transparent); }
body.action-compose .formbuttons a.extwin::before {
  content: '' !important;
  font-family: inherit !important;
  inline-size: 20px; block-size: 20px;
  background-color: currentColor;
  -webkit-mask: var(--i-apps) center / contain no-repeat;
  mask: var(--i-apps) center / contain no-repeat;
}
body.action-compose .formbuttons a.extwin .inner {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%);
}

/* ============ عمود المرفقات والخيارات ============ */
body.action-compose #layout-sidebar {
  background: var(--tn-bg) !important;
  padding: 0 8px 12px;
  overflow-y: auto;
}
body.action-compose #layout-sidebar > .scroller { padding: 0; }

body.action-compose #compose-attachments,
body.action-compose #compose-options {
  background: var(--tn-surface);
  border-radius: var(--tn-r-lg);
  padding: 16px;
  margin-block-end: 12px;
}
body.action-compose #compose-attachments .upload-form {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 12px;
  border: 1px dashed var(--tn-divider);
  border-radius: var(--tn-r-md);
  text-align: center;
}
body.action-compose #compose-attachments .upload-form::after,
body.action-compose #compose-attachments .upload-form::before { content: none !important; }
body.action-compose #compose-attachments .hint {
  color: var(--tn-text-3);
  font-size: var(--tn-fs-sm);
  margin-block-end: 10px;
  line-height: 1.6;
}
body.action-compose #compose-attachments .btn.attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  block-size: 38px;
  padding-inline: 16px;
  border: 1px solid var(--tn-divider);
  border-radius: var(--tn-r-pill);
  background: transparent;
  color: var(--tn-text);
  font-family: inherit;
  font-size: var(--tn-fs-md);
  cursor: pointer;
  transition: background-color var(--tn-d-2) var(--ease-snap), border-color var(--tn-d-2) var(--ease-snap);
}
body.action-compose #compose-attachments .btn.attach:hover {
  background: var(--tn-surface-2);
  border-color: var(--tn-outline);
}
body.action-compose #attachment-list { margin: 10px 0 0; padding: 0; list-style: none; }
body.action-compose #attachment-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-block-end: 6px;
  border-radius: var(--tn-r-sm);
  background: var(--tn-surface-2);
  font-size: var(--tn-fs-sm);
}

/* الخيارات: صفوف مقروءة بدل شبكة bootstrap المتراكبة */
body.action-compose #compose-options .form-group.row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 2px !important;
  min-block-size: 44px;
  flex-wrap: nowrap;
}
body.action-compose #compose-options .form-group.row:not(.form-check) {
  display: block !important;   /* القوائم المنسدلة: تسمية فوق العنصر — العمود 256px لا يتّسع لصفّ */
  padding-block: 6px;
}
body.action-compose #compose-options label.col-form-label {
  flex: 1 1 auto;
  inline-size: auto;
  max-inline-size: none;
  padding: 0;
  margin: 0;
  color: var(--tn-text-2);
  font-size: var(--tn-fs-md);
  line-height: 1.55;
}
body.action-compose #compose-options .form-group.row:not(.form-check) label.col-form-label {
  display: block;
  margin-block-end: 6px;
  font-size: var(--tn-fs-sm);
  color: var(--tn-text-3);
}
body.action-compose #compose-options [class*='col-'] {
  flex: 0 0 auto;
  inline-size: auto;
  max-inline-size: none;
  padding: 0;
}
body.action-compose #compose-options .form-group.row:not(.form-check) [class*='col-'] { inline-size: 100%; }
body.action-compose #compose-options select.custom-select { inline-size: 100%; }
body.action-compose #compose-options select.custom-select {
  min-inline-size: 120px;
  block-size: 36px;
  padding-inline: 10px 26px;
  border: 1px solid var(--tn-divider);
  border-radius: var(--tn-r-sm);
  background-color: var(--tn-surface) !important;
  background-image: var(--i-expand) !important;
  background-repeat: no-repeat !important;
  background-position: left 6px center !important;
  background-size: 16px !important;
  color: var(--tn-text);
  font-family: inherit;
  font-size: var(--tn-fs-md);
  appearance: none;
  cursor: pointer;
}

/* ============ الشاشات الضيّقة ============ */
@media (max-width: 1100px) {
  body.action-compose #layout { grid-template-columns: 0 minmax(0, 1fr); }
  body.action-compose #layout-sidebar { display: none !important; }
  body.action-compose #compose-headers,
  body.action-compose #composebodycontainer,
  body.action-compose .formbuttons { padding-inline: 16px; }
}

/* ============================================================
   إصلاح الانزياح الأفقي
   عنصر مرن عرضه الأدنى `auto` لا يقبل الانكماش، فأي محتوى عريض
   (حقل المستلمين المخفيّ يقع عند x=-4473، وشريط أدوات المحرّر)
   كان يمدّ الحاوية ويدفع الصفوف خارج اللوحة — فتختفي التسميات.
   ============================================================ */
body.action-compose #compose-content,
body.action-compose #compose-content > form,
body.action-compose #compose-headers,
body.action-compose .compose-headers,
body.action-compose .compose-headers .form-group.row,
body.action-compose .compose-headers [class*='col-'],
body.action-compose .compose-headers .input-group,
body.action-compose #composebodycontainer,
body.action-compose .tox-tinymce,
body.action-compose .formbuttons {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  overflow-x: hidden;
}
body.action-compose #compose-content { overflow-x: hidden !important; }

/* حقل المستلمين الحديث (recipient-input) هو ما يراه المستخدم فعلًا،
   لا الـtextarea المخفيّ — نزيل صندوقه ونتركه سطرًا نظيفًا. */
body.action-compose .recipient-input,
body.action-compose .ui-autocomplete-input,
body.action-compose .compose-headers .form-control-plaintext {
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: 100%;
  min-block-size: 40px;
  padding: 6px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.action-compose .recipient-input:focus-within { box-shadow: none !important; }
body.action-compose .recipient-input .input-group { border: 0 !important; }
body.action-compose .recipient-input input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: inherit;
  font-size: var(--tn-fs-md);
  color: var(--tn-text);
  min-inline-size: 120px;
}
/* شريحة كل مستلم — كحبّات جيميل */
body.action-compose .recipient-input .recipient {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 30px;
  padding-inline: 12px 8px;
  margin: 3px 3px 3px 0;
  border-radius: var(--tn-r-pill);
  background: var(--tn-surface-2);
  color: var(--tn-text);
  font-size: var(--tn-fs-sm);
}
body.action-compose .recipient-input .recipient a.button.icon.remove {
  inline-size: 18px; block-size: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--tn-text-3);
  font-size: 0;
}
body.action-compose .recipient-input .recipient a.button.icon.remove::before {
  content: '' !important; font-family: inherit !important;
  inline-size: 14px; block-size: 14px;
  background-color: currentColor;
  -webkit-mask: var(--i-close) center / contain no-repeat;
  mask: var(--i-close) center / contain no-repeat;
}

/* عنوان اللوحة يظهر دائمًا */
body.action-compose #layout-content > .header .header-title {
  display: block !important;
  inline-size: auto !important;
  white-space: nowrap;
}

/* حدّ علوي خفيف يفصل شريط أدوات المحرّر عن الحقول */
body.action-compose .tox .tox-editor-header {
  border-block-end: 1px solid var(--tn-divider-soft) !important;
  margin-block-end: 4px;
}

/* الحقول تملأ عرض الصفّ — bootstrap يقيّد الإدخالات بعرض جزئي */
body.action-compose .compose-headers [class*='col-'] { inline-size: auto !important; flex: 1 1 auto !important; }
body.action-compose .compose-headers input.form-control,
body.action-compose .compose-headers select.form-control { inline-size: 100% !important; max-inline-size: none !important; }
body.action-compose #compose_from select.form-control { inline-size: auto !important; min-inline-size: 240px; }

/* ============ تصحيح محاذاة الصفوف ============
   bootstrap يجعل التسمية عمودًا مرنًا بعرض نصف الصفّ مع text-align:left،
   فيبتعد النصّ العربي عن حقله. التسمية عرضٌ ثابت وتبدأ من جهة البداية. */
body.action-compose .compose-headers label.col-form-label {
  flex: 0 0 auto !important;
  inline-size: 84px !important;
  text-align: start !important;
}
body.action-compose .compose-headers .form-group.row > [class*='col-']:not(label) {
  flex: 1 1 auto !important;
  min-inline-size: 0 !important;
}
/* قائمة الهوية بحجمها الطبيعي لا ممتدّة، وأزرارها بجانبها مباشرة */
body.action-compose #compose_from select.form-control {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  min-inline-size: 260px;
  max-inline-size: 420px !important;
}
body.action-compose #compose_from .input-group { justify-content: flex-start; }

/* أيقونة منطقة الإفلات العملاقة (140×88) من elastic — نضبطها لحجم معقول */
body.action-compose #compose-attachments::after {
  inline-size: 40px !important;
  block-size: 40px !important;
  opacity: .22;
  margin: 6px auto 0 !important;
  display: block;
}