/* ═══════════════════════════════════════════════════════════════════════
   desk.css — مكتب الردّ (صندوق الوارد) في ملفٍّ واحد يملكه.

   لماذا ملفٌّ ثالث لا كتلةٌ سابعة في آخر rabt.css: الصندوق كان مكتوباً
   في ست طبقات (styles.css الموروث ثم خمس جولات في rabt.css)، وكل طبقة
   تغلب ما قبلها في نصف خصائصه. فصار ارتفاع العمود يُحسب بطريقتين معاً
   (‎calc(100dvh - 128px)‎ و‎--chat-h‎ من JS) فيُقصّ المرسِل تحت الحافة،
   ومحادثةٌ في بطاقةٍ عائمة بهوامش 24px تأكل سُبع الشاشة. هنا يُبنى المكتب
   من جديد بقاعدةٍ واحدة لكل شيء، ويُحمَّل بعد الملفّين فيغلبهما.

   الهوية مقفلة (DESIGN.md): الختم للفعل الذي يحمل كلمة، أخضر الوصل للعلامة
   الصامتة، مسطّح، كبسولاتٌ لما يُضغط، وخطّ 1px لما يحمل. ما تغيّر هو البناء:

     الشاشة العريضة  شريط ٢٣٢ | الطابور ٣٤٠ | المحادثة (مرنة) | ملف العميل ٣٠٠
                     بارتفاع النافذة بالضبط، بلا هوامش ولا بطاقة حولها.
     الهاتف          القائمة صفحةٌ كاملة، والمحادثة طبقةٌ فوقها كما في WhatsApp.
   ═══════════════════════════════════════════════════════════════════════ */

.page[data-page="chat"] {
  --desk-queue: 340px;
  --desk-file: 300px;
  --desk-pad: 20px;            /* حشوة أفقية واحدة لكل شرائط المحادثة */
  --desk-head: 64px;
}
/* لابتوب صغير ولوح أفقي: الطابور أضيق قليلاً لتبقى المحادثة فوق 480. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .page[data-page="chat"] { --desk-queue: 304px; --desk-pad: 16px; }
}

/* ── ١. المكتب بارتفاع النافذة ─────────────────────────────────────────
   التطبيق كله يصير بارتفاع الشاشة ما دام الصندوق مفتوحاً، والصفحة تأخذ
   ما تبقّى تحت الشريط العلوي بالمرونة لا بالحساب — فلا رقم سحريّ يُنسى
   حين يتغيّر ارتفاع الشريط أو يظهر بانر الاشتراك فوق الصفحة. */
@media (min-width: 768px) {
  #app:has(.page[data-page="chat"].active) { height: 100dvh; min-height: 0; }
  main:has(> .page[data-page="chat"].active) {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    padding: 0;
  }
  main > .page[data-page="chat"].active {
    flex: 1 1 auto; min-height: 0; height: auto;
    max-width: none; width: auto; margin: 0;
    display: flex; flex-direction: column;
    animation: none;
  }

  .page[data-page="chat"] .chat-pane {
    flex: 1 1 auto; min-height: 0; height: auto;
    display: grid; gap: 0;
    grid-template-columns: var(--desk-queue) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    background: var(--r-surface); border: 0; border-radius: 0; overflow: hidden;
  }
  .page[data-page="chat"] .chat-pane > * { grid-row: 1; min-height: 0; }
  .page[data-page="chat"] .chat-side { grid-column: 1; }
  .page[data-page="chat"] .chat-empty,
  .page[data-page="chat"] .chat-thread { grid-column: 2; }
}

/* ملف العميل عمودٌ ثالث حين تتّسع الصفحة لثلاثتها مع محادثةٍ لا تقلّ عن
   ~460px (1100 = 340 + 460 + 300). دونها: زرّ (i) برأس المحادثة. */
@container chatpage (min-width: 1100px) {
  .page[data-page="chat"] .chat-pane.open:has(> .chat-profile:not([hidden])) {
    grid-template-columns: var(--desk-queue) minmax(0, 1fr) var(--desk-file);
  }
  .page[data-page="chat"] .chat-pane.open > .chat-profile:not([hidden]) {
    display: block; grid-column: 3; flex: none; max-height: none; height: auto;
  }
  /* القناة مكتوبةٌ على شريحتها في الملف بجانبه، فلا تتكرّر تحت الاسم بالرأس —
     ويبقى للرقم مكانه كاملاً. */
  .page[data-page="chat"] .chat-pane.open:has(> .chat-profile:not([hidden])) .chat-id .cs-i.cs-chan { display: none; }
  .page[data-page="chat"] .chat-pane.open:has(> .chat-profile:not([hidden])) .chat-id .cs-chan + .cs-i::before { display: none; }
}
.page[data-page="chat"] .chat-pane:not(.open) > .chat-profile { display: none; }


/* ── ٢. الطابور ─────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .page[data-page="chat"] .chat-side {
    display: flex; flex-direction: column; height: auto; min-width: 0;
    padding: 0; background: var(--r-surface);
    border-inline-end: 1px solid var(--r-line);
  }
  /* تبويبا المحادثات والتعليقات رأسُ العمود، بخطّه الذي يفصله عمّا تحته. */
  .page[data-page="chat"] .chat-side > .subtabs {
    flex: none; margin: 0; padding: 0 var(--desk-pad); gap: 22px;
  }
  .page[data-page="chat"] .chat-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 0;
  }
}

/* سطر الأدوات: البحث يأخذ الباقي، والأزرار الثلاثة كبسولات ثابتة. */
.page[data-page="chat"] .chat-tools {
  flex: none; margin: 0; padding: 12px 16px 10px; gap: 6px;
}
.page[data-page="chat"] .chat-tools .chat-search {
  background: var(--r-bg-2); border: 1px solid transparent; border-radius: 999px;
  padding-inline: 14px 12px;
}
/* ليلاً ‎--r-bg-2‎ هو لون السطح نفسه فيذوب الحقل؛ يأخذ لون الصفحة الأغمق. */
:root[data-theme="dark"] .page[data-page="chat"] .chat-tools .chat-search { background: var(--r-bg); }
.page[data-page="chat"] .chat-tools .chat-search:focus-within {
  background: var(--r-surface); border-color: var(--r-primary);
  box-shadow: 0 0 0 3px rgba(23, 160, 95, .22);
}

/* حالات الطابور تبويباتٌ بخطٍّ أخضر تحت المختار، لا كبسولاتٌ ممتلئة: أربعٌ
   بعدّاداتها كانت تلتفّ على ثلاثة أسطر في عمودٍ عرضه ٢٨٥ («الكل» وحدها في
   الثالث). التبويب هو ما تقوله DESIGN.md لما يبدّل منظر القائمة نفسها
   (In-page tabs)، والعدّاد يبقى كلمته. */
.page[data-page="chat"] #chat-filters {
  flex: none; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  gap: 0; margin: 0; padding: 0 8px; border-bottom: 1px solid var(--r-line);
}
.page[data-page="chat"] #chat-filters::-webkit-scrollbar { display: none; }
.page[data-page="chat"] #chat-filters .chipbtn {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: auto; min-height: 44px; margin: 0 0 -1px; padding: 0 8px;
  font: inherit; font-size: .8125rem; font-weight: 600; white-space: nowrap;
  color: var(--r-muted); background: none; border: 0; border-radius: 0;
  border-bottom: 2px solid transparent; box-shadow: none;
  transition: color .15s, border-color .15s;
}
.page[data-page="chat"] #chat-filters .chipbtn:hover { color: var(--r-ink); background: none; }
.page[data-page="chat"] #chat-filters .chipbtn.active {
  color: var(--r-seal); border-bottom-color: var(--r-primary); background: none;
}
:root[data-theme="dark"] .page[data-page="chat"] #chat-filters .chipbtn.active { color: var(--brand-ink); }
.page[data-page="chat"] #chat-filters .chipbtn:focus-visible {
  outline: 2px solid var(--r-primary); outline-offset: -4px; border-radius: 8px;
}
.page[data-page="chat"] #chat-filters .chan-n {
  min-width: 20px; padding: 0 6px; border-radius: 999px; line-height: 18px;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; text-align: center;
  background: var(--r-bg-2); color: var(--r-muted);
}
:root[data-theme="dark"] .page[data-page="chat"] #chat-filters .chan-n { background: var(--r-line); }
/* العدّاد لما يُعمل عليه وحده (تحتاج رداً، بالانتظار): «تمت 90» و«الكل 115»
   أرقامٌ لا تطلب شيئاً، وكانت تدفع التبويب الرابع خارج العمود. */
.page[data-page="chat"] #chat-filters :is([data-chatfilter="done"], [data-chatfilter="all"],
  [data-chatfilter="contacts"]) .chan-n { display: none; }
.page[data-page="chat"] #chat-filters .chipbtn.active .chan-n {
  background: var(--r-primary-wash); color: var(--r-seal);
}
:root[data-theme="dark"] .page[data-page="chat"] #chat-filters .chipbtn.active .chan-n {
  background: var(--brand-soft); color: var(--brand-ink);
}

/* صفّ القنوات والتصنيفات خلف زرّ التصفية: كبسولات هادئة بحشوة العمود. */
.page[data-page="chat"] #chat-channels,
.page[data-page="chat"] #chat-tagrow {
  flex: none; margin: 0; padding: 10px 16px; gap: 6px;
  border-bottom: 1px solid var(--r-line);
}

/* «بالدوام الآن»: سطرٌ هادئ تحت التبويبات. */
.page[data-page="chat"] .chat-team {
  flex: none; padding: 8px 16px; margin: 0; font-size: .75rem;
  border-bottom: 1px solid var(--r-line);
}

/* الصف: سطران ثابتا الارتفاع (64px). المختار لا يكبر سطراً ثالثاً ولا
   يُحاط بإطار أخضر: «أخضر الطابور لعدّاد غير المقروء وحده» (DESIGN.md)،
   فالمختار غسلةٌ محايدة، والمرور أخفّ منها. ما كان يظهر في السطر الثالث
   (التصنيفات، رقم العملية، النتيجة، الإعلان) يسكن ملف العميل ورأس المحادثة. */
.page[data-page="chat"] .chat-row {
  align-items: center; gap: 12px; min-height: 64px;
  padding: 10px 16px; margin: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--r-line);
  border-radius: 0; box-shadow: none;
  transition: background-color .12s ease;
}
.page[data-page="chat"] .chat-row:hover { background: var(--r-bg); }
.page[data-page="chat"] .chat-row.on { background: var(--r-bg-2); }
:root[data-theme="dark"] .page[data-page="chat"] .chat-row:hover {
  background: color-mix(in srgb, var(--r-line) 45%, transparent); }
:root[data-theme="dark"] .page[data-page="chat"] .chat-row.on { background: var(--r-line); }
.page[data-page="chat"] .chat-row:focus-visible {
  outline: 2px solid var(--r-primary); outline-offset: -2px; }
.page[data-page="chat"] .chat-row .chat-tags { display: none; }
.page[data-page="chat"] .chat-row .chat-ch { border-color: var(--r-surface); }
.page[data-page="chat"] .chat-row:hover .chat-ch { border-color: var(--r-bg); }
.page[data-page="chat"] .chat-row.on .chat-ch { border-color: var(--r-bg-2); }
:root[data-theme="dark"] .page[data-page="chat"] .chat-row.on .chat-ch { border-color: var(--r-line); }

.page[data-page="chat"] .chat-top b { font-size: .875rem; font-weight: 600; color: var(--r-ink); }
/* بلا ‎direction: ltr‎: الهامش التلقائي الذي يدفع الوقت إلى طرف السطر منطقيّ،
   ويُحسب باتجاه العنصر نفسه — فانقلب ولصق الوقت بالاسم. الأرقام والنقطتان
   تُرسم صحيحة بالعزل وحده. */
.page[data-page="chat"] .chat-top time {
  font-family: var(--font-mono); font-size: .6875rem; color: var(--r-muted);
  unicode-bidi: isolate;
}
/* سطرٌ واحد يُقطع عند كلمة لا وسطها: مع ‎plaintext‎ كان القصّ يأكل أول حروف
   الكلمة اللاتينية في آخر السطر («…atsApp»). */
.page[data-page="chat"] .chat-prev {
  font-size: .8125rem; color: var(--r-muted); unicode-bidi: plaintext;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  white-space: normal; overflow: hidden; overflow-wrap: anywhere;
}
/* مدّة الانتظار جملةٌ بلغة الواجهة: «9 دقائق» تُقرأ من اليمين، و«9 minutes» من اليسار. */
:root[data-lang="en"] .chat-wait { direction: ltr; }
/* من ينتظر جواباً يُقرأ أثقل: اسمه أغمق ورسالته بحبر النص لا الرمادي. */
.page[data-page="chat"] .chat-row:has(.chat-unread) .chat-top b { font-weight: 700; }
.page[data-page="chat"] .chat-row:has(.chat-unread) .chat-prev { color: var(--r-ink-2); }
.page[data-page="chat"] .chat-row.muted .chat-main { opacity: .62; }

/* عنوانا القسمين يلتصقان أعلى القائمة وهي تُمرَّر: يبقى معروفاً أين أنت. */
.page[data-page="chat"] .chat-sec {
  position: sticky; top: 0; z-index: 1;
  margin: 0; padding: 10px 16px 6px; background: var(--r-surface);
  font-size: .71875rem; font-weight: 700;
  border-bottom: 1px solid var(--r-line);
}
.page[data-page="chat"] .chat-sec.calm { padding-top: 10px; }
.page[data-page="chat"] .chat-more { width: calc(100% - 32px); margin: 12px 16px 16px; border-radius: 999px; }

/* نقطة القناة على الصورة الرمزية — لونٌ واحد صريح لكل منصة، بلا تدرّج. */
.chat-ch.facebook  { background: #0B6BCB; }
.chat-ch.instagram { background: #C13584; }
.chat-ch.app, .chat-ch.webchat { background: var(--r-primary); }
.chat-ch.telegram  { background: #1B87BA; }


/* ── ٣. لا محادثة مفتوحة ──────────────────────────────────────────── */
.chat-empty { display: none; }
@media (min-width: 768px) {
  .page[data-page="chat"] .chat-pane:not(.open) > .chat-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 40px 24px; text-align: center; background: var(--r-bg-2);
  }
}
.ce-mark {
  width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--r-surface); color: var(--r-muted); border: 1px solid var(--r-line);
}
.chat-empty > b { font-size: 1rem; font-weight: 700; color: var(--r-ink); }
.chat-empty > p { margin: 0; max-width: 34ch; font-size: .8125rem; line-height: 1.7; color: var(--r-muted); }
.ce-keys {
  list-style: none; margin: 24px 0 0; padding: 14px 16px; display: grid; gap: 10px;
  min-width: 300px; background: var(--r-surface); border: 1px solid var(--r-line); border-radius: 14px;
  font-size: .8125rem; color: var(--r-ink-2);
}
.ce-keys li { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ce-keys li > span { display: inline-flex; gap: 4px; direction: ltr; unicode-bidi: isolate; }
.ce-keys kbd, .desk-kbd {
  min-width: 24px; padding: 1px 7px; border-radius: 8px; text-align: center;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; line-height: 20px;
  color: var(--r-ink); background: var(--r-bg-2);
  border: 1px solid var(--r-line-2); border-bottom-width: 2px;
}
:root[data-theme="dark"] .ce-keys kbd { background: var(--r-bg); }
@media (pointer: coarse) { .ce-keys { display: none; } }


/* ── ٤. المحادثة ───────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .page[data-page="chat"] .chat-thread {
    position: static; inset: auto; z-index: auto;
    display: flex; flex-direction: column; min-width: 0; height: auto;
    background: var(--r-bg-2); border: 0; border-radius: 0; overflow: hidden;
  }
  .page[data-page="chat"] .chat-thread[hidden] { display: none; }
  .page[data-page="chat"] .chat-thread { container: thread / inline-size; }
}
/* الرأس سطرٌ واحد على الشاشة العريضة وحدها، فهو وحده يُضغط بحسب عرض المحادثة. */
@media (min-width: 1024px) {
  /* الرأس يقرّر بعرض المحادثة نفسها: «آخر ردّ» أول ما يُترك حين يضيق (الاسم
     نفسه فوق كل فقاعة صادرة وفي صفّ الطابور)، ثم رقم المحادثة واسم الخط. */
  @container thread (max-width: 760px) {
    .page[data-page="chat"] #chat-assign { display: none; }
    .page[data-page="chat"] .chat-head .chat-id small .cs-i.cs-x { display: none; }
  }
  @container thread (max-width: 640px) {
    .page[data-page="chat"] .chat-head .chat-state i { display: none; }
    .page[data-page="chat"] .chat-head .chat-state { padding-inline: 10px 12px; }
  }
  @container thread (max-width: 560px) {
    /* «تمت» أيقونةٌ وحدها: يبقى للاسم ورقمه مكانهما. الكلمة باقية لقارئ الشاشة
       (‎font-size: 0‎ لا يحذفها). */
    .page[data-page="chat"] .chat-head .chat-done:not([hidden]) { font-size: 0; gap: 0; padding-inline: 10px; }
  }
  /* المحادثة الضيّقة جداً (لوحٌ أفقي 1024): النافذة كلمتها وحدها بلا «يبقى». */
  @container thread (max-width: 500px) {
    .page[data-page="chat"] .chat-head .chat-win { padding-inline: 8px; }
    .page[data-page="chat"] .chat-head .chat-done:not([hidden]) { display: none; }
  }
}

/* الرأس: من العميل (وجهه واسمه وقناته)، ثم ما يحكم الرد (من ردّ آخراً،
   والنافذة)، ثم القرار (الحالة، و«تمت»). سطرٌ واحد بارتفاع 64 على العريض. */
.page[data-page="chat"] .chat-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  min-height: var(--desk-head); padding: 10px var(--desk-pad);
  background: var(--r-surface); border-bottom: 1px solid var(--r-line);
}
.page[data-page="chat"] .chat-hav {
  flex: none; width: 36px; height: 36px; font-size: .875rem; font-weight: 700;
}
.page[data-page="chat"] .chat-hav .chat-ch { width: 12px; height: 12px; border-color: var(--r-surface); }
.page[data-page="chat"] .chat-id { flex: 1 1 auto; min-width: 0; }
.page[data-page="chat"] .chat-id strong {
  display: block; font-size: .9375rem; font-weight: 700; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page[data-page="chat"] .chat-id small {
  display: block; margin-top: 1px; font-size: .75rem; line-height: 1.4; color: var(--r-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page[data-page="chat"] .chat-id small .copyable { cursor: copy; }
.page[data-page="chat"] .chat-id small .cs-i + .cs-i::before {
  content: "·"; margin-inline: 5px; color: var(--r-muted-2); }
.page[data-page="chat"] .chat-id small .copyable:hover { color: var(--r-ink); }

/* «آخر ردّ»: معلومةٌ لا زرّ — كلمةٌ هادئة بلا إطار. */
.page[data-page="chat"] #chat-assign {
  flex: 0 1 auto; min-width: 0; max-width: 200px; padding: 0 4px;
  border: 0; background: none; color: var(--r-muted);
  font-size: .75rem; font-weight: 500;
}
.page[data-page="chat"] .chat-win {
  flex: none; padding: 4px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
/* الشريحة الهادئة ليلاً على خطّ الليل كالصور الرمزية — السطح الغائر يساوي السطح. */
:root[data-theme="dark"] .page[data-page="chat"] .chat-win.ok { background: var(--r-line); }

/* الحالة كبسولةٌ محايدة بنقطة لونها: «تحتاج رداً» كانت حمراء كأنها عطل،
   والاستعجال يقوله الطابور بسلّمه لا زرّ القرار. */
.page[data-page="chat"] .chat-state {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding-block: 0; padding-inline: 10px 12px; border-radius: 999px;
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  color: var(--r-ink); background: var(--r-surface);
  border: 1px solid var(--r-ghost-line);
  transition: background-color .15s, border-color .15s;
}
.page[data-page="chat"] .chat-state:hover {
  background: var(--r-bg); border-color: var(--r-ghost-line-hover); filter: none; }
.page[data-page="chat"] .chat-state .state-dot { width: 8px; height: 8px; }
.page[data-page="chat"] .chat-state i { display: flex; opacity: .6; transform: rotate(-90deg); }
.state-dot.st-unread { background: var(--r-warn); }

.chat-done { display: none; }
.page[data-page="chat"] .chat-done:not([hidden]) {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding-block: 0; padding-inline: 12px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--r-seal); background: var(--r-surface); border: 1px solid var(--r-ghost-line);
  transition: background-color .15s, border-color .15s;
}
:root[data-theme="dark"] .page[data-page="chat"] .chat-done { color: var(--brand-ink); }
.page[data-page="chat"] .chat-done:hover {
  background: var(--r-primary-wash); border-color: color-mix(in srgb, var(--r-primary) 45%, var(--r-ghost-line)); }
:root[data-theme="dark"] .page[data-page="chat"] .chat-done:hover { background: var(--brand-soft); }
.page[data-page="chat"] .chat-done:disabled,
:root[data-theme="dark"] .page[data-page="chat"] .chat-done:disabled { opacity: 1; color: var(--r-muted-2); cursor: default; }
.page[data-page="chat"] #chat-info { flex: none; width: 36px; height: 36px; }

.page[data-page="chat"] .chat-state:focus-visible,
.page[data-page="chat"] .chat-done:focus-visible,
.page[data-page="chat"] #chat-info:focus-visible {
  outline: 2px solid var(--r-primary); outline-offset: 2px; }

/* شريطا النتيجة والتذكير: بحشوة الرأس نفسها، بارتفاع 40. */
.page[data-page="chat"] .chat-deal,
.page[data-page="chat"] .chat-remind {
  flex: none; min-height: 40px; padding-block: 0;
  padding-inline: var(--desk-pad) calc(var(--desk-pad) - 8px);
  font-size: .78125rem;
}
.page[data-page="chat"] .chat-deal { background: var(--r-surface); }

/* الرسائل */
.page[data-page="chat"] .chat-msgs {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px var(--desk-pad) 16px; gap: 6px; background: var(--r-bg-2);
  scroll-padding-bottom: 16px;
}
:root[data-theme="dark"] .page[data-page="chat"] .chat-msgs { background: var(--r-bg); }
.page[data-page="chat"] .chat-line { max-width: min(76%, 640px); }
/* رسائل متتالية من الطرف نفسه وخلال دقائق: سلسلةٌ واحدة. الاسم فوق أولها
   وحدها، والمسافة بينها نصف المسافة بين سلسلتين. */
.page[data-page="chat"] .chat-line.cont { margin-top: -3px; }
.page[data-page="chat"] .chat-line.out.cont > .chat-b { border-start-end-radius: 6px; }
.page[data-page="chat"] .chat-line.in.cont > .chat-b  { border-start-start-radius: 6px; }
.page[data-page="chat"] .chat-day { margin: 10px 0 6px; }
.page[data-page="chat"] .chat-b { box-shadow: none; }
.page[data-page="chat"] .chat-meta {
  font-family: var(--font-mono); font-size: .65625rem; letter-spacing: 0;
}


/* ── ٥. المرسِل ────────────────────────────────────────────────────────
   صندوقٌ واحد يحمل كل ما يُكتب به: النص بعرضه كاملاً، وتحته أدوات الكتابة
   (رد جاهز، ملاحظة، ملف، صوت) ثم الردود الجاهزة ثم «إرسال» — الفعل الأخضر
   الوحيد في المحادثة. كانت ستة عناصر في سطرٍ واحد تضغط الحقل حتى ٣٠٪. */
.page[data-page="chat"] .chat-composer {
  flex: none; display: grid; align-items: center;
  grid-template-columns: auto auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "t t t t t t"
    "c n a m q s";
  gap: 2px 2px;
  margin: 0 var(--desk-pad) 16px; padding: 6px 8px 8px;
  background: var(--r-surface); border: 1px solid var(--r-line-3); border-radius: 16px;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.page[data-page="chat"] .chat-composer:focus-within {
  border-color: var(--r-primary); box-shadow: 0 0 0 3px rgba(23, 160, 95, .18);
}
.page[data-page="chat"] .chat-composer > #chat-send-text { grid-area: t; }
.page[data-page="chat"] .chat-composer > #chat-canned { grid-area: c; }
.page[data-page="chat"] .chat-composer > #chat-note   { grid-area: n; }
.page[data-page="chat"] .chat-composer > #chat-attach { grid-area: a; }
.page[data-page="chat"] .chat-composer > #chat-mic    { grid-area: m; }
.page[data-page="chat"] .chat-composer > #chat-quickbar { grid-area: q; }
.page[data-page="chat"] .chat-composer > #chat-send   { grid-area: s; }
.page[data-page="chat"] .chat-composer > #chat-rec    { grid-row: 2; grid-column: 1 / 6; }
.page[data-page="chat"] .chat-composer:has(> #chat-rec:not([hidden])) > :is(#chat-canned, #chat-note, #chat-attach, #chat-quickbar) {
  display: none; }

.page[data-page="chat"] .chat-composer > textarea {
  width: 100%; min-height: 44px; max-height: 40dvh; margin: 0; padding: 10px 8px 6px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  font-size: .875rem; line-height: 1.6; resize: none; color: var(--r-ink);
}
.page[data-page="chat"] .chat-composer > textarea:focus { box-shadow: none; border: 0; }
.page[data-page="chat"] .chat-composer > textarea::placeholder { color: var(--r-muted); }
.page[data-page="chat"] .chat-composer.shut > textarea { opacity: 1; }
.page[data-page="chat"] .chat-composer.shut { background: var(--r-bg-2); }

.page[data-page="chat"] .chat-composer > .icon-btn {
  width: 36px; height: 36px; border-radius: 12px; color: var(--r-muted);
}
.page[data-page="chat"] .chat-composer > .icon-btn:hover { background: var(--r-bg-2); color: var(--r-ink); }
.page[data-page="chat"] .chat-composer > .icon-btn[aria-pressed="true"] { color: var(--r-warn-text); }

/* الردود الجاهزة داخل الصندوق: صفٌّ يُمرَّر أفقياً، كبسولاتٌ صغيرة بإطار. */
.page[data-page="chat"] .chat-composer > .chat-quickbar {
  display: flex; gap: 6px; min-width: 0; margin: 0 6px; padding: 2px 0;
  overflow-x: auto; scrollbar-width: none; border: 0; background: none;
  /* تتلاشى عند طرف النهاية وحده (اليسار بالعربية): أول ردّ يُقرأ كاملاً. */
  mask-image: linear-gradient(to right, transparent 0, #000 24px);
}
.page[data-page="chat"] .chat-composer > .chat-quickbar[hidden] { display: none; }
:root[data-lang="en"] .page[data-page="chat"] .chat-composer > .chat-quickbar {
  mask-image: linear-gradient(to left, transparent 0, #000 24px); }
.page[data-page="chat"] .chat-composer > .chat-quickbar::-webkit-scrollbar { display: none; }
.page[data-page="chat"] .chat-quickbar .qb {
  flex: none; height: 30px; padding: 0 12px; border-radius: 999px;
  font: inherit; font-size: .75rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  color: var(--r-ink-2); background: var(--r-surface); border: 1px solid var(--r-ghost-line);
  box-shadow: none;
}
.page[data-page="chat"] .chat-quickbar .qb:hover { background: var(--r-bg-2); border-color: var(--r-ghost-line-hover); }
.page[data-page="chat"] .chat-quickbar .qb.warm { background: var(--r-surface); color: var(--r-ink-2); }
/* تبدأ الكتابة فتنسحب الردود الجاهزة كلها — لا إطاراتٌ فارغة تبقى مكانها. */
.page[data-page="chat"] .chat-composer > .chat-quickbar.away { visibility: hidden; opacity: 0; }

/* «إرسال»: الختم الوحيد في المحادثة — كلمةٌ وطائرة على العريض، ودائرةٌ على الهاتف. */
.page[data-page="chat"] .chat-sendbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex-direction: row-reverse;
  width: auto; height: 36px; min-width: 36px; padding-block: 0; padding-inline: 16px 14px; border-radius: 999px;
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--r-seal); border: 0; box-shadow: none;
  transition: background-color .15s, transform .1s;
}
.page[data-page="chat"] .chat-sendbtn:hover { background: var(--r-seal-deep); }
.page[data-page="chat"] .chat-sendbtn:active { transform: scale(.97); }
.page[data-page="chat"] .chat-sendbtn:disabled { opacity: 1; background: var(--r-line); color: var(--r-muted-2); }
.page[data-page="chat"] .chat-composer.shut .chat-sendbtn { background: var(--r-line); color: var(--r-muted-2); }
.page[data-page="chat"] .chat-sendbtn svg { flex: none; }
:root[data-lang="en"] .chat-sendbtn svg { transform: scaleX(-1); }
.page[data-page="chat"] .chat-sendbtn:focus-visible { outline: 2px solid #fff; box-shadow: 0 0 0 4px var(--r-primary); }

/* وضع الملاحظة: الصندوق كله دافئ وإطاره عنبري — يُرى وقت الكتابة. */
.page[data-page="chat"] .chat-composer.noting {
  background: var(--r-warn-wash); border-color: var(--r-warn-line);
  box-shadow: none;
}
.page[data-page="chat"] .chat-composer.noting:focus-within {
  border-color: var(--r-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-warn) 22%, transparent);
}
.page[data-page="chat"] .chat-composer.noting .chat-sendbtn { background: var(--r-warn); color: #fff; }
.page[data-page="chat"] .chat-composer.noting .send-l { display: none; }
.page[data-page="chat"] .chat-composer.noting .chat-sendbtn { padding: 0 12px; }

/* التسجيل الصوتي يأخذ سطر الأدوات كله. */
.page[data-page="chat"] .chat-rec { min-height: 36px; padding-block: 0; padding-inline: 12px 6px; }

/* اللوحات فوق الصندوق (‏«/»، النافذة المنتهية، Facebook) بحشوة الرأس نفسها. */
.page[data-page="chat"] .chat-quick {
  flex: none; margin: 0 var(--desk-pad) 8px; border: 1px solid var(--r-line);
  border-radius: 14px; background: var(--r-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.page[data-page="chat"] .chat-shut,
.page[data-page="chat"] .fbwarn {
  flex: none; margin: 0 var(--desk-pad) 8px; border-radius: 14px;
}


/* ── ٦. ملف العميل ─────────────────────────────────────────────────── */
.page[data-page="chat"] .chat-profile {
  overflow-y: auto; overscroll-behavior: contain; padding: 0;
  background: var(--r-surface); border-inline-start: 1px solid var(--r-line);
}
.page[data-page="chat"] .chat-profile > * { padding-inline: 20px; }
.page[data-page="chat"] .cp-head {
  align-items: flex-start; gap: 4px; padding-top: 24px; padding-bottom: 18px;
  border-bottom: 1px solid var(--r-line);
}
.page[data-page="chat"] .cp-av {
  width: 52px; height: 52px; margin-bottom: 8px; font-size: 1.25rem;
  background: var(--r-bg-2); color: var(--r-ink);
}
:root[data-theme="dark"] .page[data-page="chat"] .cp-av { background: var(--r-line); }
.page[data-page="chat"] .cp-head b { font-size: 1rem; font-weight: 700; line-height: 1.4; }
.page[data-page="chat"] .cp-phone { font-size: .8125rem; color: var(--r-muted); }
.page[data-page="chat"] .cp-tags { margin-top: 8px; }
.page[data-page="chat"] .cp-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: .71875rem; }
.page[data-page="chat"] .cp-tag .chat-ch { position: static; width: 8px; height: 8px; border: 0; }

.page[data-page="chat"] .cp-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin: 0; padding-block: 16px; border-bottom: 1px solid var(--r-line);
}
.page[data-page="chat"] .cp-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 0 12px; min-width: 0;
  background: none; border: 0; border-radius: 0; text-align: start;
}
.page[data-page="chat"] .cp-stat + .cp-stat { border-inline-start: 1px solid var(--r-line); }
.page[data-page="chat"] .cp-stat:first-child { padding-inline-start: 0; }
.page[data-page="chat"] .cp-stat b {
  font-family: var(--font-mono); font-size: 1.125rem; font-weight: 600; line-height: 1.3;
  color: var(--r-ink); unicode-bidi: isolate;
}
/* المدّة كلمة («دقيقتان») لا رقمٌ بحرف — بخطّ النص لا الأحادي. */
.page[data-page="chat"] .cp-stat b.words {
  font-family: var(--font); font-size: .9375rem; font-weight: 700; direction: rtl; }
.page[data-page="chat"] .cp-stat small { font-size: .71875rem; color: var(--r-muted); }

.page[data-page="chat"] .cp-sec { padding-block: 16px; margin: 0; border-bottom: 1px solid var(--r-line); }
.page[data-page="chat"] .cp-sec:last-child { border-bottom: 0; }
.page[data-page="chat"] .cp-sec h4 {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 10px; font-size: .75rem; font-weight: 700; color: var(--r-muted);
}
.page[data-page="chat"] .cp-sec h4 .linkish {
  font-size: .75rem; font-weight: 600; color: var(--r-seal); padding: 4px 0; min-height: 0;
}
:root[data-theme="dark"] .page[data-page="chat"] .cp-sec h4 .linkish { color: var(--brand-ink); }
.page[data-page="chat"] .cp-sec > p { margin: 0; font-size: .8125rem; color: var(--r-ink); }
.page[data-page="chat"] .cp-when { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.page[data-page="chat"] .cp-when small { font-size: .75rem; color: var(--r-muted); }
.page[data-page="chat"] .cp-empty { margin: 0; font-size: .78125rem; line-height: 1.7; color: var(--r-muted); }
.page[data-page="chat"] .cp-note { padding: 10px 12px; border-radius: 12px; }


/* ── ٧. الهاتف واللوح (تحت 1024) ──────────────────────────────────────
   القائمة صفحةٌ كاملة، والمحادثة طبقةٌ فوقها. الرأس سطران: من العميل
   والحالة، ثم النافذة ومن ردّ — والمرسِل سطرٌ واحد والردود الجاهزة فوقه. */
@media (max-width: 767px) {
  .page[data-page="chat"] .chat-side > .subtabs { margin: 0 0 4px; }
  .page[data-page="chat"] .chat-tools { padding: 8px 0 8px; }
  .page[data-page="chat"] #chat-filters { padding: 0; margin: 0 -16px; padding-inline: 8px; }
  .page[data-page="chat"] #chat-filters .chipbtn { flex: 0 0 auto; padding: 0 10px; }
  .page[data-page="chat"] #chat-channels,
  .page[data-page="chat"] #chat-tagrow { padding-inline: 0; }
  .page[data-page="chat"] .chat-team { padding-inline: 0; }
  .page[data-page="chat"] .chat-list { margin: 0 -16px; }
  .page[data-page="chat"] .chat-sec { position: static; }
}

/* اللوح العمودي (768–1023): الطابور والمحادثة جنباً إلى جنب كالشاشة العريضة —
   كانت القائمة عموداً بعرض 640 وسط الشاشة، والمحادثة طبقةً تغطّي كل شيء.
   الشريط السفلي هنا في مجرى الصفحة (sticky)، فالمكتب يأخذ ما بين الشريطين. */
@media (min-width: 768px) and (max-width: 1023px) {
  .page[data-page="chat"] { --desk-queue: 300px; }
  main:has(> .page[data-page="chat"].active) { max-width: none; width: 100%; margin: 0; }
  .page[data-page="chat"] #chat-back { display: none; }
  .page[data-page="chat"] .chat-head > .chat-hav { margin-inline-start: 4px; }
  .page[data-page="chat"] .chat-head > #chat-window { margin-inline-start: 46px; }
}

@media (max-width: 1023px) {
  .page[data-page="chat"] { --desk-pad: 12px; }
  .page[data-page="chat"] .chat-thread { background: var(--r-bg-2); }
  .page[data-page="chat"] .chat-head {
    flex-wrap: wrap; row-gap: 8px; column-gap: 8px; min-height: 0;
    padding: calc(8px + var(--safe-top, 0px)) 8px 8px;
  }
  /* السطر الأول من العميل وحده (الاسم ورقمه كاملين)، والثاني ما يحكم الرد
     ثم القرار في طرفه: النافذة، ومن ردّ، والحالة. */
  .page[data-page="chat"] .chat-head > #chat-back { order: 1; width: 40px; height: 40px; }
  .page[data-page="chat"] .chat-head > .chat-hav { order: 2; width: 34px; height: 34px; }
  .page[data-page="chat"] .chat-head > .chat-id { order: 3; flex: 1 1 0; }
  .page[data-page="chat"] .chat-head > #chat-info { order: 4; width: 40px; height: 40px; }
  .page[data-page="chat"] .chat-head::after { content: ""; order: 5; flex-basis: 100%; height: 0; }
  .page[data-page="chat"] .chat-head > #chat-window { order: 6; margin-inline-start: 48px; }
  /* «آخر ردّ» يأخذ ما تبقّى من السطر ويُقصّ: في حاويةٍ تلتفّ يقفز العنصر إلى سطرٍ
     جديد قبل أن ينكمش، فكان «تمت» يهبط سطراً ثالثاً. */
  .page[data-page="chat"] .chat-head > #chat-assign { order: 7; max-width: none; flex: 1 1 0; min-width: 0; }
  .page[data-page="chat"] .chat-head > #chat-state { order: 8; margin-inline-start: auto; height: 36px;
    padding-inline: 10px 12px; }
  /* «تمت» بضغطة على الهاتف أيضاً: أيقونةٌ في طرف السطر الثاني، والكلمة لقارئ الشاشة. */
  .page[data-page="chat"] .chat-head > #chat-done:not([hidden]) {
    order: 9; width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .page[data-page="chat"] .chat-state i { display: none; }
  .page[data-page="chat"] .chat-id small .cs-i.cs-x { display: none; }

  .page[data-page="chat"] .chat-composer {
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "q q q q q"
      "n a m t s";
    margin: 0; padding: 8px 8px calc(8px + var(--safe-bottom, 0px));
    border: 0; border-top: 1px solid var(--r-line); border-radius: 0;
    gap: 6px 4px; align-items: end;
  }
  .page[data-page="chat"] .chat-composer:focus-within { box-shadow: none; border-color: var(--r-line); }
  .page[data-page="chat"] .chat-composer > #chat-canned { display: none; }
  .page[data-page="chat"] .chat-composer > .chat-quickbar { margin: 0 0 2px; mask-image: none; }
  .page[data-page="chat"] .chat-composer > textarea {
    min-height: 44px; padding: 10px 14px; font-size: 1rem;
    border: 1px solid var(--r-line-3); border-radius: 22px; background: var(--r-surface);
  }
  .page[data-page="chat"] .chat-composer > textarea:focus {
    border: 1px solid var(--r-primary); box-shadow: 0 0 0 3px rgba(23, 160, 95, .18); }
  .page[data-page="chat"] .chat-composer > .icon-btn { width: 40px; height: 44px; }
  .page[data-page="chat"] .chat-sendbtn { width: 44px; height: 44px; padding: 0; }
  .page[data-page="chat"] .chat-sendbtn .send-l { display: none; }
  .page[data-page="chat"] .chat-composer > #chat-rec { grid-row: 2; grid-column: 1 / 4; }
  .page[data-page="chat"] .chat-composer:has(> #chat-rec:not([hidden])) > #chat-note,
  .page[data-page="chat"] .chat-composer:has(> #chat-rec:not([hidden])) > #chat-attach { display: none; }
  .page[data-page="chat"] .chat-composer.noting { border-top-color: var(--r-warn-line); }
  .page[data-page="chat"] .chat-composer.noting > textarea { border-color: var(--r-warn-line); background: var(--r-surface); }
  .page[data-page="chat"] .chat-quick { margin-inline: 8px; }
  .page[data-page="chat"] .chat-shut,
  .page[data-page="chat"] .fbwarn { margin-inline: 8px; }
  .page[data-page="chat"] .chat-line { max-width: 86%; }
}
@media (prefers-reduced-motion: reduce) {
  .page[data-page="chat"] .chat-row,
  .page[data-page="chat"] .chat-composer,
  .page[data-page="chat"] .chat-sendbtn { transition: none; }
}

/* ── ٨. اللمس بكل العروض ──────────────────────────────────────────────
   الإبهام لا الفأرة: كل ما يُضغط 44px على الأقل، والكتابة 16px حتى لا يكبّر
   iOS الشاشة عند التركيز — على الهاتف وعلى اللوح الأفقي الذي يأخذ قياسات
   الشاشة العريضة. */
@media (pointer: coarse) {
  .page[data-page="chat"] .chat-composer > .icon-btn,
  .page[data-page="chat"] .chat-head > .icon-btn { min-width: 44px; min-height: 44px; }
  .page[data-page="chat"] .chat-head > #chat-state,
  .page[data-page="chat"] .chat-head > #chat-done:not([hidden]),
  .page[data-page="chat"] .chat-sendbtn { min-height: 44px; }
  .page[data-page="chat"] .chat-sendbtn { min-width: 44px; }
  .page[data-page="chat"] .chat-quickbar .qb { height: 44px; min-height: 44px; }
  .page[data-page="chat"] .chat-composer > textarea { font-size: max(16px, 1rem); }
}