/* ==========================================================================
   chat.css — تحسينات بصرية لشاشة المحادثة (إعادة تصميم الواجهة)
   --------------------------------------------------------------------------
   التخطيط الأساسي للمحادثة يقع الآن في design-system.css ضمن .chat-layout
   (واعٍ بالثيم والوضع الداكن والاتجاه المنطقي). هذا الملف يضيف فقط لمسات
   تكميلية مقصورة على .chat-layout كي لا تتعارض مع النظام. أُزيلت كل القواعد
   القديمة ذات الألوان المثبَّتة (الدفعة الثالثة) التي كانت تتصادم مع النظام.
   ========================================================================== */

/* ترويسة القائمة الجانبية للمحادثة */
.chat-layout .sb-head{padding:var(--sp-4);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between}
.chat-layout .sb-head h1,.chat-layout .sb-head .sb-title{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text-1)}
.chat-layout .sb-list{flex:1;overflow-y:auto;padding:var(--sp-2)}

/* أزرار حذف الرسالة تظهر بهدوء داخل الفقاعة */
.chat-layout .bubble .btn-icon{width:28px;height:28px;min-height:28px;font-size:.8rem;
  opacity:.55;color:inherit;margin-inline-start:.25rem}
.chat-layout .bubble .btn-icon:hover{opacity:1;background:transparent}
.chat-layout .bubble.out .btn-icon{color:var(--accent-on)}

/* علامة القراءة */
.chat-layout .read{font-size:.7rem;opacity:.8;margin-inline-start:.4rem}

/* الملحّن: زرّ الإرسال دائري متّسق */
.chat-layout .composer .btn-primary{border-radius:var(--r-pill);padding:.6rem 1.2rem}

/* فاصل لطيف بين رسائلي ورسائل الطرف الآخر يُحسّن القراءة */
.chat-layout .messages{scroll-behavior:smooth}
.chat-layout .bubble{line-height:var(--lh-normal)}

/* حالة فارغة في وسط منطقة المحادثة */
.chat-layout .chat-main > .state{margin:auto}

/* رسالة تعذّر فكّها — مميّزة بصرياً (ليست نصاً فعلياً) */
.chat-layout .bubble.undec{background:var(--bg-raised)!important;border:1px dashed var(--border-strong)!important;
  color:var(--text-3)!important;box-shadow:none!important;font-style:italic}
.chat-layout .bubble.undec .undec-text{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs)}
.chat-layout .bubble.undec i{opacity:.7}

/* ===========================================================================
   صفحة محادثة القروب (دفعة الردم 4 — F3): الصفحة ليست داخل .chat-layout،
   فتحتاج تنسيقها المستقلّ. تطابق نظام الفقاعات القائم وتضيف ما يخصّ القروب:
   أسماء مرسِلين ملوّنة وتجميع السلاسل (أفضل ممارسة المحادثة الجماعية).
   =========================================================================== */
.group-chat{flex:1;display:flex;flex-direction:column;min-width:0;height:100%;
  background:var(--bg-chat)}
.group-chat .messages{flex:1;overflow-y:auto;padding:var(--sp-5) var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-1);scroll-behavior:smooth}

/* صفّ الرسالة: محاذاة حسب المُرسِل */
.group-chat .msg{display:flex;flex-direction:column;max-width:74%}
.group-chat .msg.mine{align-self:flex-end;align-items:flex-end}
.group-chat .msg.theirs{align-self:flex-start;align-items:flex-start}

/* اسم المرسِل فوق فقاعات الآخرين (لون ثابت يُحقن من Razor) */
.group-chat .msg-sender{font-size:var(--fs-xs);font-weight:600;
  margin:0 var(--sp-2) 2px;color:var(--sender-color,var(--text-2))}

/* الفقاعة */
.group-chat .bubble{padding:.55rem .85rem;border-radius:var(--r-lg);
  font-size:var(--fs-sm);line-height:var(--lh-normal);box-shadow:var(--elev-1);
  word-break:break-word;animation:bubble-in var(--t-base,.18s) ease both}
.group-chat .bubble.out{background:var(--accent);color:var(--accent-on);
  border-end-end-radius:4px}
.group-chat .bubble.in{background:var(--bg-surface);color:var(--text-1);
  border:1px solid var(--border);border-end-start-radius:4px}

/* رسالة تعذّر فكّها */
.group-chat .bubble.undec{background:var(--bg-raised)!important;
  border:1px dashed var(--border-strong)!important;color:var(--text-2)!important;
  box-shadow:none!important;font-style:italic}
.group-chat .bubble.undec .undec-text{display:inline-flex;align-items:center;
  gap:.4rem;font-size:var(--fs-xs)}

.group-chat .msg-window-note{align-self:center;font-size:var(--fs-xs);
  color:var(--text-2);background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:2px var(--sp-3);margin-bottom:var(--sp-2)}

.group-chat .alert-err{margin:0 var(--sp-6) var(--sp-2);color:var(--st-late,#b42318);
  font-size:var(--fs-xs)}

/* صندوق الإدخال */
.group-chat .composer{display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--border);background:var(--bg-surface);align-items:center}
.group-chat .composer input{flex:1;padding:.65rem 1rem;
  border:1px solid var(--border-strong);border-radius:var(--r-pill);
  background:var(--bg-input);color:var(--text-1);font-family:inherit;
  font-size:var(--fs-md,1rem);min-height:var(--touch-min)}
.group-chat .composer input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.group-chat .composer .btn-primary{border-radius:var(--r-pill);
  padding:.6rem 1.4rem;flex-shrink:0}

/* ===========================================================================
   محادثة الفريق (TeamChat.razor — دفعة الردم B، الباب 13)
   ---------------------------------------------------------------------------
   تشارك أساس .group-chat ثم تضيف: هيدر فريق، شريط فلترة، وقت داخل الفقاعة،
   زرّ حذف يظهر عند المرور، وعلامة تاج للمدير. بادئة tc-* معزولة (لا تصادم).
   =========================================================================== */
.team-chat{flex:1;display:flex;flex-direction:column;min-width:0;height:100%;
  background:var(--bg-chat)}
.team-chat .messages{flex:1;overflow-y:auto;padding:var(--sp-5) var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-1);scroll-behavior:smooth}

/* صفّ الرسالة + اسم المرسِل (نفس أساس القروب) */
.team-chat .msg{display:flex;flex-direction:column;max-width:74%}
.team-chat .msg.mine{align-self:flex-end;align-items:flex-end}
.team-chat .msg.theirs{align-self:flex-start;align-items:flex-start}
.team-chat .msg-sender{font-size:var(--fs-xs);font-weight:600;
  margin:0 var(--sp-2) 2px;color:var(--sender-color,var(--text-2));
  display:inline-flex;align-items:center;gap:.3rem}
.team-chat .tc-mgr-mark{color:#ca8a04;font-size:.72rem}

/* الفقاعة: نسبية لاحتواء الوقت وزرّ الحذف */
.team-chat .bubble{position:relative;padding:.5rem .8rem .95rem;
  border-radius:var(--r-lg);font-size:var(--fs-sm);line-height:var(--lh-normal);
  box-shadow:var(--elev-1);word-break:break-word;
  animation:bubble-in var(--t-base,.18s) ease both}
.team-chat .bubble.out{background:var(--accent);color:var(--accent-on);
  border-end-end-radius:4px}
.team-chat .bubble.in{background:var(--bg-surface);color:var(--text-1);
  border:1px solid var(--border);border-end-start-radius:4px}
.team-chat .bubble-text{display:block}

/* وقت الإرسال داخل الفقاعة (نمط واتساب): أسفل اليسار، خافت */
.team-chat .bubble-time{position:absolute;bottom:3px;inset-inline-end:.7rem;
  font-size:.62rem;opacity:.7;white-space:nowrap;font-variant-numeric:tabular-nums}
.team-chat .bubble.in .bubble-time{color:var(--text-3)}

/* زرّ حذف الرسالة: يظهر عند المرور على الفقاعة (لا يزاحم النصّ) */
.team-chat .bubble-del{position:absolute;top:2px;inset-inline-start:-30px;
  width:26px;height:26px;border:none;background:transparent;cursor:pointer;
  color:var(--text-3);opacity:0;transition:opacity var(--t-fast,.12s),color var(--t-fast,.12s);
  border-radius:var(--r-md);display:grid;place-items:center;font-size:.78rem}
.team-chat .msg:hover .bubble-del{opacity:1}
.team-chat .bubble-del:hover{color:var(--st-late,#b42318);background:var(--bg-raised)}

.team-chat .bubble.undec{background:var(--bg-raised)!important;
  border:1px dashed var(--border-strong)!important;color:var(--text-2)!important;
  box-shadow:none!important;font-style:italic}
.team-chat .bubble.undec .undec-text{display:inline-flex;align-items:center;
  gap:.4rem;font-size:var(--fs-xs)}

.team-chat .msg-window-note{align-self:center;font-size:var(--fs-xs);
  color:var(--text-2);background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:2px var(--sp-3);margin-bottom:var(--sp-2)}
.team-chat .alert-err{margin:0 var(--sp-6) var(--sp-2);color:var(--st-late,#b42318);
  font-size:var(--fs-xs)}

/* صندوق الإدخال (نفس القروب) */
.team-chat .composer{display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--border);background:var(--bg-surface);align-items:center}
.team-chat .composer input{flex:1;padding:.65rem 1rem;
  border:1px solid var(--border-strong);border-radius:var(--r-pill);
  background:var(--bg-input);color:var(--text-1);font-family:inherit;
  font-size:var(--fs-md,1rem);min-height:var(--touch-min)}
.team-chat .composer input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.team-chat .composer .btn-primary{border-radius:var(--r-pill);
  padding:.6rem 1.4rem;flex-shrink:0}

/* هيدر الفريق: متغيّر عن ConversationHeader العام (اسم الفريق + منزلة + عدد) */
.team-chat .tc-head{border-bottom:1px solid var(--border)}
.team-chat .tc-id{display:flex;flex-direction:column;min-width:0;flex:1}
.team-chat .tc-head-ic{color:var(--accent);margin-inline-end:.35rem}
.team-chat .tc-meta{font-size:var(--fs-xs);color:var(--text-2)}

/* شريط الفلترة: الكل / المدير / عضو محدّد */
.team-chat .tc-filterbar{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--border);
  background:var(--bg-surface)}
.team-chat .tc-filter{display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .8rem;border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--bg-chat);color:var(--text-2);font-size:var(--fs-xs);
  font-weight:600;cursor:pointer;transition:all var(--t-fast,.12s)}
.team-chat .tc-filter:hover{border-color:var(--accent);color:var(--text-1)}
.team-chat .tc-filter.on{background:var(--accent);color:var(--accent-on);
  border-color:var(--accent)}
.team-chat .tc-filter-member{display:inline-flex;align-items:center;gap:.4rem;
  color:var(--text-3);font-size:var(--fs-xs)}
.team-chat .tc-member-select{padding:.32rem .7rem;border:1px solid var(--border);
  border-radius:var(--r-pill);background:var(--bg-chat);color:var(--text-2);
  font-family:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;
  min-height:var(--touch-min)}
.team-chat .tc-member-select.on{background:var(--accent-soft);
  border-color:var(--accent);color:var(--text-1)}

@media (max-width:768px){
  .team-chat .msg{max-width:90%}
  .team-chat .bubble-del{inset-inline-start:auto;inset-inline-end:2px;
    top:auto;bottom:2px;opacity:.5}
}

/* ── مرفقات الدردشة (الفردي + القروب + الفريق) — أصناف معزولة att-*/attach-* ──
   غير مقصورة على .chat-layout كي تعمل في group-chat/team-chat أيضاً؛ الأسماء
   فريدة (فُحصت ضد Bootstrap)، فلا تعارض. */
.msg-attach{margin-bottom:.35rem}
.att-img{max-width:240px;max-height:280px;border-radius:var(--r-md);
  display:block;cursor:zoom-in;object-fit:cover}
.att-load{display:inline-flex;align-items:center;gap:.4rem;
  background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);
  padding:.5rem .75rem;cursor:pointer;color:inherit;font:inherit}
.att-load:hover{background:var(--bg-surface)}
.att-doc{display:inline-flex;align-items:center;gap:.5rem;
  background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);
  padding:.5rem .75rem;cursor:pointer;color:inherit;font:inherit;max-width:260px}
.att-doc:hover{background:var(--bg-surface)}
.att-doc i{font-size:1.1rem;opacity:.8;flex:0 0 auto}
.att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-size{font-size:var(--fs-xs);opacity:.7;flex:0 0 auto;margin-inline-start:auto}
.att-cap{display:block}
.attach-pending{display:flex;align-items:center;gap:.5rem;
  padding:.4rem .75rem;margin:.25rem .75rem 0;background:var(--bg-raised);
  border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-sm)}
.attach-pending .ap-name{overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:1 1 auto}
.composer .attach-btn{cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center}

/* ── لايت‌بوكس تكبير الصورة (إصلاح التكبير المطلوب) — طبقة فوق الكل ───────────
   تُغطّي الشاشة، النقر على الخلفية أو زرّ الإغلاق يُغلق، الصورة تتمدّد لأقصى
   حدّ مع الحفاظ على نسبتها. z-index عالٍ كي تعلو شريط التحكّم والفقاعات. */
.att-lightbox{position:fixed;inset:0;z-index:1080;display:flex;
  align-items:center;justify-content:center;padding:2rem;
  background:rgba(0,0,0,.82);cursor:zoom-out;animation:att-lb-in .15s ease}
.att-lightbox img{max-width:92vw;max-height:92vh;border-radius:var(--r-md);
  box-shadow:0 8px 40px rgba(0,0,0,.5);cursor:default;object-fit:contain}
.att-lightbox-close{position:fixed;top:1rem;inset-inline-end:1rem;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.15);color:#fff;font-size:1.3rem;
  display:inline-flex;align-items:center;justify-content:center}
.att-lightbox-close:hover{background:rgba(255,255,255,.28)}
@keyframes att-lb-in{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   ملاءمة الجوّال (دفعة ما بعد النشر 1) — نمط الشاشتين المتبادلتين
   --------------------------------------------------------------------------
   على ≤768px تُلغى القائمة المنزلقة لصالح النمط الجوّالي المعياري:
   لا محادثة مختارة ⇒ القائمة ملء الشاشة؛ محادثة مختارة (.conv-open على
   .chat-layout من Razor) ⇒ المحادثة ملء الشاشة بزرّ رجوع (.conv-back).
   يصلح ضمنياً عيب اتجاه الانزلاق في RTL (translateX الفيزيائي) بإلغائه كلياً.
   ========================================================================== */
.conv-back{display:none}

@media (max-width:768px){
  /* الشاشة ١ — القائمة: تحلّ محلّ الانزلاق، ملء العرض، بلا غطاء */
  .chat-layout .sidebar,
  .chat-layout .sidebar.collapsed{
    position:static;transform:none;transition:none;
    width:100%;max-width:none;height:100%;display:flex;
    border-inline-end:none}
  .chat-layout .scrim{display:none}
  .chat-layout .chat-main{display:none}

  /* الشاشة ٢ — المحادثة المفتوحة */
  .chat-layout.conv-open .sidebar,
  .chat-layout.conv-open .sidebar.collapsed{display:none}
  .chat-layout.conv-open .chat-main{display:flex;width:100%}

  /* زرّ الرجوع يظهر، وزرّ القائمة المنزلقة يختفي (لا انزلاق بعد الآن) */
  .conv-back{display:grid}
  .chat-layout .sidebar-toggle{display:none}

  /* الملحّن مثبّت أسفل منطقة العرض فوق لوحة المفاتيح، بهامش أمان iOS */
  .chat-layout .composer{position:sticky;bottom:0;background:var(--bg-surface);
    padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px))}
  .chat-layout .messages{padding:var(--sp-3) var(--sp-3)}
  .chat-layout .msg{max-width:88%}

  /* صفحتا القروب والفريق (صفحتان مستقلّتان): عرض كامل وملحّن مستقر */
  .group-chat .messages,.team-chat .messages{padding:var(--sp-3) var(--sp-3)}
  .group-chat .msg{max-width:88%}
  .group-chat .composer,.team-chat .composer{position:sticky;bottom:0;
    background:var(--bg-surface);
    padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px))}

  /* المرفقات: صور أعرض تليق بشاشة الجوّال */
  .att-img{max-width:78vw;max-height:46vh}
  .att-doc{max-width:78vw}
}

/* لمسات ≤480px: أحجام لمس ولا تمرير أفقي */
@media (max-width:480px){
  .chat-layout .li{min-height:var(--touch-min)}
  .chat-layout .composer .btn-primary{padding:.6rem .95rem}
  .chat-layout,.group-chat,.team-chat{overflow-x:hidden}
}

/* أيقونة اتجاهية: سهم الرجوع صحيح في RTL كما هو، ويُقلَب في LTR */
html[dir="ltr"] .rtl-flip{transform:scaleX(-1)}

/* ── صفحة الإشعارات (دفعة ما بعد النشر 1) ──────────────────────────────── */
.notif-count-pill{margin-inline-start:var(--sp-2);padding:.15rem .6rem;
  border-radius:var(--r-pill);background:var(--accent);color:var(--accent-on);
  font-size:var(--fs-xs);font-weight:700}
.notif-list{display:flex;flex-direction:column;gap:var(--sp-2);max-width:720px}
.notif-item{display:flex;align-items:center;gap:var(--sp-3);
  padding:.8rem 1rem;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg-raised);cursor:pointer;min-height:var(--touch-min)}
.notif-item:hover{background:var(--bg-surface);border-color:var(--border-strong)}
.notif-ic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;
  border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.notif-ic.k-task{background:var(--st-warn-soft);color:var(--st-warn)}
.notif-ic.k-meet{background:var(--st-ok-soft,var(--accent-soft));color:var(--st-ok,var(--accent))}
.notif-meta{flex:1;min-width:0}
.notif-summary{font-weight:600;font-size:var(--fs-sm);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-time{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
.notif-item > .rtl-only{color:var(--text-3);font-size:.8rem}
html[dir="ltr"] .notif-item > .rtl-only{transform:scaleX(-1)}