/*
 * chat.css — گفتگوی تیکت (گام ۳۹)
 * ---------------------------------------------------------------------------
 * ⚠️ چرا فایلِ جدا، وقتی هر دو مصرف‌کننده می‌توانستند در فایلِ خودشان داشته باشند؟
 *
 * این قاعده‌ها **دو مصرف‌کننده** دارند: پنلِ مدیر (`admin/tickets/{id}`) و
 * پورتالِ موکل (`client/tickets/{id}`). وقتی در `panel.css` بود، پورتال آن را
 * نمی‌دید — یعنی گفتگوی موکل که در گام ۳۹ ساخته شد **کاملاً بدونِ استایل** بود:
 * `.chat-head`, `.chat-messages`, `.chat-msg`, `.chat-bubble`, `.chat-text`,
 * `.chat-time`, `.chat-presence`, `.chat-files` هیچ‌کدام تعریفی در صفحاتی که
 * واقعاً رندر می‌شدند نداشتند.
 *
 * دو راه: تکرارِ قاعده‌ها در `panel.css` و `portal.css` (دو نسخه که کم‌کم از هم
 * جدا می‌افتند) یا یک فایلِ مشترک. یکی.
 *
 * متغیرها از `design-system.css` می‌آیند که هر دو layout آن را دارند.
 */

/* ------------------------------------------------------------------ */
/* ناحیهٔ پیام‌ها                                                        */
/* ------------------------------------------------------------------ */
.chat-messages {
  max-height: 420px; overflow-y: auto;
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  list-style: none; margin: 0 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.chat-msg { display: flex; gap: var(--space-2); max-width: 80%; }
.chat-msg.from-client { align-self: flex-start; }
.chat-msg.from-lawyer { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.chat-msg.from-client .chat-bubble {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-bottom-right-radius: 4px;
}
.chat-msg.from-lawyer .chat-bubble {
  background: var(--gradient-navy);
  color: #fff;
  border-bottom-left-radius: 4px;
}
.chat-time { font-size: var(--text-2xs); color: var(--color-ink-muted); margin-top: 0.3rem; }

/*
 * ⚠️ `.chat-text { white-space: pre-wrap }` یک تصمیمِ **امنیتی/یکدستی** است،
 * نه تزئین.
 *
 * رندرِ پیام دو راه دارد: PHP (بارِ اول) و JavaScript (پیام‌هایِ تازه در
 * polling). اگر PHP از `nl2br()` استفاده کند و JS از `textContent`، دو
 * خروجیِ متفاوت برای **یک** پیام می‌شود — و تفاوت فقط در پیام‌های *تازه*
 * دیده می‌شود، یعنی دقیقاً جایی که کاربر حوصله‌اش را سر می‌برد.
 *
 * `pre-wrap` هر دو را یکی می‌کند و نیاز به `<br>` را حذف می‌کند. مزیتِ دوم و
 * مهم‌تر: با `textContent` هیچ HTML از سمتِ کاربر وارد DOM نمی‌شود — یعنی
 * XSS در پیام‌های تازه ساختاری ممکن نیست، نه با `escape` کردنِ دستی.
 */
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble strong { display: block; font-size: var(--text-2xs); opacity: .7; margin-bottom: .2rem; }

/* ------------------------------------------------------------------ */
/* سربرگ و حضور                                                         */
/* ------------------------------------------------------------------ */
.chat-head { margin-bottom: var(--space-4); }
.chat-presence { font-size: var(--text-2xs); margin-inline-start: var(--space-2); }

/* ------------------------------------------------------------------ */
/* پیوست‌ها: یک ردیفِ فشرده بالای گفتگو، نه داخلِ حباب‌ها.                */
/* ------------------------------------------------------------------ */
.chat-files {
  list-style: none; padding: 0; margin: 0 0 var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.chat-files a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .6rem; font-size: var(--text-2xs);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  text-decoration: none;
}

@media (max-width: 640px) {
  .chat-msg { max-width: 95%; }
}