/* atheer-chat.css — نافذة الدردشة بمعالجة القالب
 * ════════════════════════════════════════════════════════════════════════════
 * `web-chat.js` كانت تبني الفقاعات **بأنماط سطريّة بالكامل بلا صنف واحد** —
 * فلا محدِّد يبلغها، وأيّ تحديث بصريّ يستلزم تعديل الصفحة نفسها. حُوّلت إلى
 * أصناف دلاليّة (بلا تغيير في الشجرة ولا المنطق)، والمظهر هنا.
 *
 * القيم من سلّم Vireo: space 4·8·12·16 · radius sm12 md14 · text-sm 13px.
 * ════════════════════════════════════════════════════════════════════════════ */

.at-chat__row {
  display: flex;
  margin-block-end: 8px;
}
.at-chat__row[data-side="out"] { justify-content: flex-end; }
.at-chat__row[data-side="in"]  { justify-content: flex-start; }

.at-chat__bubble {
  max-inline-size: min(70%, 560px);        /* سقف مطلق: سطرٌ أعرض يُتعب التتبّع */
  padding: 9px 13px;
  font-size: 13px;
  line-height: 1.55;
  border-radius: var(--at-radius-md, 14px);
  word-break: break-word;
  position: relative;
}

/* 🔑 الذيل — توقيع الدردشة البصريّ في كلّ منصّة:
 * الزاوية السفليّة **من جهة المرسِل** تُربَّع، فتبدو الفقاعة خارجةً منه.
 * بالخصائص المنطقيّة كي تنقلب مع RTL/LTR بلا قاعدة ثانية. */
.at-chat__row[data-side="out"] .at-chat__bubble { border-end-end-radius: 4px; }
.at-chat__row[data-side="in"]  .at-chat__bubble { border-end-start-radius: 4px; }

.at-chat__bubble[data-tone="out"] {
  background: var(--at-accent, #2a5fcc);
  color: #fff;
}
.at-chat__bubble[data-tone="in"] {
  background: var(--at-surface-2, #f0f3f9);
  color: var(--at-text-primary, #151b27);
  border: 1px solid var(--at-border, #cfd7e6);
}
.at-chat__bubble[data-tone="error"] {
  background: var(--at-danger-bg, #fbe9e6);
  color: var(--at-danger, #a6372a);
  border: 1px solid var(--at-danger, #a6372a);
}

/* اسم المرسِل في المجموعات */
.at-chat__sender {
  font-size: 11px; font-weight: 700;
  margin-block-end: 3px;
  opacity: .9;
}
.at-chat__text { white-space: pre-wrap; }

/* الوقت وإيصال القراءة */
.at-chat__meta {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 4px;
  margin-block-start: 3px;
  font-size: 10.5px;
  opacity: .75;
}
.at-chat__time { font-variant-numeric: tabular-nums; }
.at-chat__receipt { font-size: 14px; line-height: 1; }
/* ⚠️ الإيصال داخل فقاعة صادرة (خلفيّة لهجة) — فألوانه تُقاس عليها لا على السطح */
.at-chat__bubble[data-tone="out"] .at-chat__receipt[data-state="sent"] { color: rgba(255,255,255,.6); }
.at-chat__bubble[data-tone="out"] .at-chat__receipt[data-state="read"] { color: #a8e0ff; }
.at-chat__bubble[data-tone="in"]  .at-chat__receipt { color: var(--at-text-muted); }

/* ── تجميع الرسائل المتتالية ──────────────────────────────────────────────
 * رسالتان متتاليتان من الطرف نفسه تلتصقان قليلًا وتفقد الثانية ذيلها —
 * فتُقرأ الدفعة ككتلة واحدة بدل خمس فقاعات متساوية البُعد. هذا ما يجعل
 * الخيط يبدو محادثةً لا قائمة. */
.at-chat__row + .at-chat__row[data-side="out"]:not(:first-child) { margin-block-start: -4px; }
.at-chat__row[data-side="out"] + .at-chat__row[data-side="out"] .at-chat__bubble { border-end-end-radius: var(--at-radius-md, 14px); }
.at-chat__row[data-side="in"]  + .at-chat__row[data-side="in"]  .at-chat__bubble { border-end-start-radius: var(--at-radius-md, 14px); }
/* وآخر فقاعة في الدفعة تستعيد ذيلها */
.at-chat__row[data-side="out"]:last-child .at-chat__bubble { border-end-end-radius: 4px; }
.at-chat__row[data-side="in"]:last-child  .at-chat__bubble { border-end-start-radius: 4px; }

@media (max-width: 720px) {
  .at-chat__bubble { max-inline-size: 86%; }
}


/* ── قائمة المحادثات ──────────────────────────────────────────────────────
 * كانت هي الأخرى بأنماط سطريّة بلا صنف. البنية: صورة · (اسم + كتم + غير
 * مقروء) · معاينة آخر رسالة. */
.at-conv {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-block-end: 1px solid var(--at-border, #e2e8f0);
  transition: background 120ms ease;
}
.at-conv:hover { background: var(--at-surface-2, #f0f3f9); }
.at-conv[data-active="true"] {
  background: var(--at-accent-soft-bg, #e7edfb);
  /* شريط لهجة على الحافّة الداخليّة — يُقرأ من طرف القائمة، وإشارةٌ ثانية
   * غير اللون وحده. منطقيّ فينقلب مع الاتّجاه. */
  box-shadow: inset 3px 0 0 0 var(--at-accent, #2a5fcc);
}
[dir="rtl"] .at-conv[data-active="true"] { box-shadow: inset -3px 0 0 0 var(--at-accent, #2a5fcc); }

.at-conv__avatar { display: inline-flex; flex: 0 0 auto; }
.at-conv__body   { flex: 1 1 auto; min-width: 0; }
.at-conv__top    { display: flex; align-items: center; gap: 6px; }

/* ⚠️ `min-width: 0` شرطٌ لعمل `text-overflow` داخل flex — بدونه يتمدّد
 * العنصر بمحتواه ولا يُقصّ أبدًا، فينكسر الصفّ كلّه. */
.at-conv__name {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 600;
  color: var(--at-text-primary, #151b27);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.at-conv__preview {
  margin-block-start: 2px;
  font-size: 12px;
  color: var(--at-text-muted, #535e74);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.at-conv__muted { flex: 0 0 auto; line-height: 1; color: var(--at-text-muted, #535e74); }

/* عدّاد غير المقروء — كبسولة صغيرة، وهي الموضع الذي تُستعمل فيه الكبسولة
 * بحقّ (عدّاد لا حالة). */
.at-conv__unread {
  flex: 0 0 auto;
  min-inline-size: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--at-danger, #a6372a);
  color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}


/* ── صندوق الإنشاء ───────────────────────────────────────────────────────
 * ⚠️ `display` على اللوحة يبقى سطريًّا بقصد: الصفحة تبدّله (`none`/`flex`)
 * بجافاسكربت لفتحها وإغلاقها. قاعدة CSS تُثبّته كانت ستكسر الفتح — فالأنماط
 * هنا لكلّ شيء **عدا** `display`. */
.at-composer { display: flex; flex-direction: column; }
.at-composer__bar {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px;
  border-block-start: 1px solid var(--at-border, #cfd7e6);
  background: var(--at-surface-1, #fff);
}
/* الحقل يبتلع المساحة، والأزرار تبقى بقياسها */
.at-composer__bar .form-control,
.at-composer__bar input { flex: 1 1 auto; min-width: 0; }
.at-composer__bar .btn { flex: 0 0 auto; }

.at-composer__emoji {
  flex-wrap: wrap; gap: 2px;
  padding: 8px 10px;
  max-block-size: 132px; overflow-y: auto;
  border-block-start: 1px solid var(--at-border, #cfd7e6);
  background: var(--at-surface-2, #f0f3f9);
}
.at-composer__emoji-btn {
  border: none; background: transparent;
  font-size: 19px; line-height: 1.3;
  padding: 3px 5px; cursor: pointer;
  border-radius: var(--at-radius-xs, 8px);
  transition: background 100ms ease, transform 100ms ease;
}
.at-composer__emoji-btn:hover { background: var(--at-surface-3, #e2e8f0); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .at-composer__emoji-btn:hover { transform: none; } }


/* ── خيط الردود داخل بطاقة (صندوق التعليقات) ────────────────────────────
 * نفس الفقاعات، بحيّز أضيق: الخيط داخل نافذة لا داخل لوحة كاملة. */
.at-chat__thread { display: flex; flex-direction: column; margin-block-start: 8px; }
.at-chat__thread .at-chat__bubble { max-inline-size: min(82%, 460px); }