/* =========================================================
   Pyamooz AI — Chat-only styles (scoped)
   اثر فقط داخل .chat-panel یا #chatView
   ========================================================= */


/* ====== LAYOUT: پیام‌ها اسکرول، کامپوزر چسبیده پایین ====== */
.chat-panel, #chatView {
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* برای موبایل پایدارتر از 100vh */
}

/* ناحیهٔ اسکرول پیام‌ها */
.chat-panel .chat-scroll,
#chatView .chat-scroll {
  flex: 1 1 auto;
  min-height: 0; /* حیاتی برای فعال‌شدن اسکرول در flex/grid */
}

.chat-panel #chatMessages,
#chatView #chatMessages {
  height: 100%;
  overflow-y: auto;
  padding: var(--gap, 12px);
  padding-bottom: calc(var(--composer-height, 84px) + env(safe-area-inset-bottom, 0) + 12px);
  box-sizing: border-box;
}

/* اسکرول‌بار فقط برای لیست پیام‌ها (زیباتر) */
.chat-panel #chatMessages::-webkit-scrollbar,
#chatView #chatMessages::-webkit-scrollbar { width: 8px; }
.chat-panel #chatMessages::-webkit-scrollbar-thumb,
#chatView #chatMessages::-webkit-scrollbar-thumb {
  background-color: #e1e7f0; border-radius: 10px;
}
.chat-panel #chatMessages::-webkit-scrollbar-thumb:hover,
#chatView #chatMessages::-webkit-scrollbar-thumb:hover {
  background-color: #cdd6e4;
}

/* ====== COMPOSER: sticky پایین + چینش دلخواه ====== */
.chat-panel .composer,
#chatView .composer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--bg-surface, #fff);
  border-top: 1px solid var(--border-light, #e3e3e3);
  padding: 8px 12px;   /* اگر include پدینگ دارد، متناسب کن */
  border-radius: 0;    /* خنثی‌سازی هر radius عمومی */
}

/* نوار داخل کامپوزر — از Grid به Flex برای کنترل بهتر چینش */
.chat-panel .composer-bar,
#chatView .composer-bar {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;          /* به‌جای space-between */

  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-light, #e3e3e3);
  border-radius: 9999px;
  padding: 8px;
  box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,.08));
}
.chat-panel .composer-bar:focus-within,
#chatView .composer-bar:focus-within {
  border-color: var(--primary-border, #7aa7ff);
  box-shadow: 0 0 0 4px rgba(0,144,255,.08);
}

/* ظرف ورودی جهت گسترش خوب */
.chat-panel #composer,
#chatView #composer {
  flex: 1 1 auto;
  min-width: 0;
}

/* textarea داخل کامپوزر */
.chat-panel #composer #inp,
#chatView #composer #inp {
  border: 0; outline: none; background: transparent; color: var(--text, #222);
  width: 100%; min-height: 40px; max-height: 35vh; line-height: 1.6;
  padding: 10px 0; resize: none; overflow-y: hidden;
}

/* دکمه‌ها در کامپوزر (آیکنی) */
.chat-panel #composer .icon-btn,
#chatView #composer .icon-btn {
  width: 36px; height: 36px; min-width: 0 !important; padding: 0 !important;
  border: 1px solid transparent !important; border-radius: 9999px;
  display: inline-grid; place-items: center;
  background: transparent; color: var(--text-2, #444);
  cursor: pointer;
}
.chat-panel #composer .icon-btn--ghost:hover,
#chatView #composer .icon-btn--ghost:hover {
  background: var(--bg-hover, #f0f7ff);
}
.chat-panel #composer .icon-btn--primary,
#chatView #composer .icon-btn--primary {
  background: var(--primary-color, #0090ff); color: #fff;
  box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,.08));
}

/* ➡️ دکمه ارسال سمت راست؛ بقیه کنترل‌ها سمت چپ */
.chat-panel .composer-bar .icon-btn--primary,
#chatView .composer-bar .icon-btn--primary,
.chat-panel .composer-bar #btnSend2,
#chatView .composer-bar #btnSend2 {
  margin-inline-start: auto; /* ستون انعطاف را به راست هل می‌دهد */
}

/* اگر مدل‌سلکتور داخل کامپوزر است، کمی جمع‌وجور شود */
.chat-panel .composer .model-selector,
#chatView .composer .model-selector {
  min-width: 180px;
}

/* ====== پیام‌ها / حباب‌ها ====== */
/* بیس خنثی: هر ارث‌بری عمومی را برای چت صفر می‌کنیم */
.chat-panel .msg,
#chatView .msg {
  position: relative;
  padding: 12px 16px;
  border-radius: 12px;
  margin: 10px 0;
  line-height: 1.7;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-inline-start: 0 !important;
}

/* خود حباب (ظرف markdown) */
.chat-panel .bubble,
#chatView .bubble {
  max-width: 70%;
  unicode-bidi: plaintext;
  word-wrap: break-word;
  overflow-wrap: anywhere;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* متن‌های استریم‌شونده شکست‌پذیر و کم‌پرش */
.chat-panel .bubble,
#chatView .bubble {
  white-space: pre-wrap;     /* مهم: نمایش لحظه‌ای بدون به‌هم‌ریختگی */
  word-break: break-word;
}
/* پیام کاربر: خاکستری ملایم */
.chat-panel .msg.user .bubble,
#chatView .msg.user .bubble {
  background: #f3f4f6 !important;       /* خاکستری روشن */
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

/* پاسخ دستیار: بدون پس‌زمینه/کادر */
.chat-panel .msg.assistant .bubble,
#chatView .msg.assistant .bubble {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* چیدمان غیرمتقارن اختیاری */
.chat-panel .msg.user,
#chatView .msg.user { margin-inline-start: 40px; }
.chat-panel .msg.assistant,
#chatView .msg.assistant { margin-inline-end: 40px; }

/* BiDi: وقتی فارسی، راست‌چین */
.chat-panel .bubble[dir="rtl"],
#chatView .bubble[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* code/pre همیشه LTR و ایزوله */
.chat-panel .bubble pre,
.chat-panel .bubble code,
#chatView .bubble pre,
#chatView .bubble code {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}

/* کرسر استریم (▮) */
.chat-panel .streaming-cursor,
#chatView .streaming-cursor {
  display: inline-block;
  animation: chat-blink 1s steps(2, end) infinite;
  opacity: 0.8;
}
@keyframes chat-blink {
  50% { opacity: 0; }
}

/* اکشن‌های پیام (کپی، …) - اختیاری */
.chat-panel .msg-actions,
#chatView .msg-actions {
  position: absolute; top: 8px; inset-inline-start: 8px;
  display: none; gap: 6px;
}
.chat-panel .msg:hover .msg-actions,
#chatView .msg:hover .msg-actions { display: flex; }
.chat-panel .msg-action,
#chatView .msg-action {
  padding: 4px 8px;
  border: 1px solid var(--border-light, #e3e3e3);
  border-radius: 8px;
  background: var(--bg-surface, #fff);
  color: var(--text-2, #444);
  font-size: 12px; cursor: pointer;
}
.chat-panel .msg-action:hover,
#chatView .msg-action:hover { background: var(--bg-hover, #f0f7ff); }

/* ====== FAB «برو پایین» (اختیاری) ====== */
.chat-panel #jumpToBottom,
#chatView #jumpToBottom {
  position: fixed;
  z-index: 99;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--composer-height, 84px) + env(safe-area-inset-bottom,0) + 10px);

  width: 48px; height: 48px;
  display: none; /* با کلاس .show ظاهر شود */
  padding: 0; border: none; border-radius: 9999px;
  background: var(--primary-color, #0090ff); color: #fff;
  place-items: center; line-height: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  cursor: pointer;
}
.chat-panel #jumpToBottom.show,
#chatView #jumpToBottom.show { display: grid }
.chat-panel #jumpToBottom:hover,
#chatView #jumpToBottom:hover {
  transform: translateX(-50%) translateY(-2px);
}

/* ====== ریسپانسیو فقط برای چت ====== */
@media (max-width: 768px) {
  .chat-panel #composer #inp,
  #chatView #composer #inp { max-height: 30vh; }
  .chat-panel .composer-bar,
  #chatView .composer-bar { margin: 0 8px; }
}
/* ====== ALIGNMENT (final, direction-proof) ====== */
/* ظرف هر پیام را فلکس و محور را همیشه LTR نگه دار تا flex-start/flex-end ثابت بمانند */
.chat-panel .msg,
#chatView .msg {
  display: flex;
  flex-direction: row;
  direction: ltr;           /* مهم: جهتِ محورِ فلکس را قفل می‌کند */
}

/* کاربر → راست ؛ دستیار → چپ */
.chat-panel .msg.user,
#chatView .msg.user {
  justify-content: flex-end;  /* حباب کاربر می‌رود سمت راست */
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.chat-panel .msg.assistant,
#chatView .msg.assistant {
  justify-content: flex-start; /* حباب دستیار می‌رود سمت چپ */
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* هرگونه مارجین قبلی روی خود حباب را خنثی کن تا جا‌به‌جایی ایجاد نشود */
.chat-panel .msg .bubble,
#chatView .msg .bubble {
  margin: 0 !important;
  max-width: 72%;
}

/* ====== ROUNDED CORNERS (با درنظرگرفتن RTL متن) ====== */
/* LTR پیش‌فرض: کاربر (راست) notch پایین-راست؛ دستیار (چپ) notch پایین-چپ */
.chat-panel .msg.user .bubble,
#chatView .msg.user .bubble {
  border-radius: 16px 16px 4px 16px;    /* tl tr br bl */
}
.chat-panel .msg.assistant .bubble,
#chatView .msg.assistant .bubble {
  border-radius: 16px 16px 16px 4px;
}

/* اگر محتوای حباب RTL شد، notch‌ها را معکوس کن تا طبیعی دیده شوند */
.chat-panel .msg.user .bubble[dir="rtl"],
#chatView .msg.user .bubble[dir="rtl"] {
  border-radius: 16px 16px 16px 4px;
}
.chat-panel .msg.assistant .bubble[dir="rtl"],
#chatView .msg.assistant .bubble[dir="rtl"] {
  border-radius: 16px 16px 4px 16px;
}
/* ====== Assistant full-width (no right gap) ====== */

/* هر ردیف پیام عرض کامل بگیره تا بتونیم حباب assistant رو 100% کنیم */
.chat-panel .msg,
#chatView .msg {
  width: 100%;
}

/* برای ردیف‌های assistant، فاصله‌ی سمت راست ظرف پیام را صفر کن */
.chat-panel .msg.assistant,
#chatView .msg.assistant {
  padding-inline-end: 0; /* چون .msg را قبلاً direction:ltr کردیم، یعنی padding-right:0 */
}

/* خود حبابِ assistant را تمام‌عرض کن و محدودیت max-width را بردار */
.chat-panel .msg.assistant .bubble,
#chatView .msg.assistant .bubble {
  width: 100%;
  max-width: 100% !important; /* override روی max-width عمومی (۷۰/۷۲٪) */
  margin: 0 !important;       /* هر مارجین باقیمانده را خنثی کن */
}

/* برای پیام کاربر همان محدودیت عرض را نگه داریم (راست‌چینِ خاکستری) */
.chat-panel .msg.user .bubble,
#chatView .msg.user .bubble {
  max-width: 72%;
}
/* ====== User bubble comfy spacing (inner + outer) ====== */
/* فاصلهٔ داخلی راحت برای متن داخل حباب کاربر */
.chat-panel .msg.user .bubble,
#chatView .msg.user .bubble {
  padding: var(--bubble-pad-y, 10px) var(--bubble-pad-x, 14px); /* داخل حباب */
  /* فاصلهٔ بیرونی نرم تا به لبهٔ کانتینر نچسبد */
  margin-inline-end: 8px;  /* چون حباب کاربر سمت راست‌ـه */
  margin-inline-start: 8px; /* کمی فاصله از سمت مقابل برای تعادل */
  border-radius: 16px;     /* گردی یکنواخت؛ اگر قبلاً notch گذاشتی، می‌تونی نگه‌داری */
}

/* اگر از notchهای سفارشی استفاده می‌کنی، این‌ها را هم نگه دار تا با padding جدید هماهنگ بماند */
.chat-panel .msg.user .bubble[dir="rtl"],
#chatView .msg.user .bubble[dir="rtl"] {
  border-radius: 16px 16px 16px 4px; /* مطابق تنظیمات قبلی‌ات؛ دلخواه */
}
.chat-panel .msg.user .bubble:not([dir="rtl"]),
#chatView .msg.user .bubble:not([dir="rtl"]) {
  border-radius: 16px 16px 4px 16px;
}

/* کمی اصلاح فاصله پاراگراف‌ها داخل حباب (دلخواه) */
.chat-panel .msg.user .bubble p,
#chatView .msg.user .bubble p {
  margin: 0.3em 0;
}
/* === Centered Jump-to-Bottom inside Composer === */
.chat-panel .composer-holder { position: relative; }

/* دکمهٔ وسط کامپوزر */
.chat-panel .composer-holder #jumpToBottom {
  position: absolute !important;         /* override هر استایل قبلی */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);      /* دقیقاً وسطِ کامپوزر */
  z-index: 30;

  width: 40px;
  height: 40px;
  display: none;                         /* با کلاس .show ظاهر می‌شود */
  place-items: center;
  border-radius: 9999px;
  border: 1px solid var(--border-light, #e3e3e3);
  background: var(--bg-surface, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  color: var(--text-2, #444);
  cursor: pointer;
}

.chat-panel .composer-holder #jumpToBottom.show { display: grid; }

.chat-panel .composer-holder #jumpToBottom:hover {
  background: var(--bg-hover, #f0f7ff);
}

.chat-panel .composer-holder #jumpToBottom svg {
  width: 20px; height: 20px; display: block;
  fill: currentColor;
}

/* اگر کامپوزر خیلی شلوغ است و می‌خواهی دکمه کمی بالاتر/پایین‌تر باشد، یکی از این‌ها را فعال کن: */
/* .chat-panel .composer-holder #jumpToBottom { top: 45%; } */
/* .chat-panel .composer-holder #jumpToBottom { top: 55%; } */
/* =========================================================
   🔧 FIX: Composer z-index برای موبایل
   ========================================================= */

/* در موبایل، کامپوزر باید زیر سایدبار باشد */
@media (max-width: 991.98px) {
  .chat-panel .composer,
  #chatView .composer {
    z-index: 10 !important; /* کمتر از سایدبار (z-index: 20) */
  }
  
  /* دکمه jump-to-bottom هم باید زیر سایدبار باشد */
  .chat-panel .composer-holder #jumpToBottom,
  #chatView .composer-holder #jumpToBottom {
    z-index: 15 !important; /* کمتر از سایدبار اما بالاتر از کامپوزر */
  }
  
  /* اطمینان از اینکه کامپوزر در موبایل پشت backdrop هم باشد */
  .chat-panel .composer,
  #chatView .composer {
    position: relative; /* به جای sticky در موبایل */
  }
  
  /* وقتی سایدبار باز است، کامپوزر کمی محو شود (اختیاری) */
  body.sidebar-open-mobile .chat-panel .composer,
  body.sidebar-open-mobile #chatView .composer {
    opacity: 0.3;
    pointer-events: none; /* غیرفعال کردن کلیک روی کامپوزر */
    transition: opacity 0.3s ease;
  }
}

/* برای دسکتاپ، z-index عادی را حفظ کن */
@media (min-width: 992px) {
  .chat-panel .composer,
  #chatView .composer {
    z-index: 20; /* در دسکتاپ مشکلی نیست */
  }
}

/* === DENSITY: فاصله خطوط و هدینگ‌ها/لیست‌ها فشرده‌تر === */
.chat-panel .bubble,
#chatView .bubble {
  line-height: 1.55;
}

/* هدینگ‌ها داخل پاسخ دستیار */
.chat-panel .bubble .markdown-body h1,
.chat-panel .bubble .markdown-body h2,
.chat-panel .bubble .markdown-body h3,
.chat-panel .bubble .markdown-body h4,
.chat-panel .bubble .markdown-body h5,
.chat-panel .bubble .markdown-body h6,
#chatView .bubble .markdown-body h1,
#chatView .bubble .markdown-body h2,
#chatView .bubble .markdown-body h3,
#chatView .bubble .markdown-body h4,
#chatView .bubble .markdown-body h5,
#chatView .bubble .markdown-body h6 {
  margin-top: 0.6em;
  margin-bottom: 0.35em;
  line-height: 1.35;
}

/* پاراگراف‌ها */
.chat-panel .bubble .markdown-body p,
#chatView .bubble .markdown-body p {
  margin: 0.35em 0;
}

/* آیتم لیست‌ها */
.chat-panel .bubble .markdown-body li,
#chatView .bubble .markdown-body li {
  margin: 0.2em 0;
  line-height: 1.5;
}

/* فاصله خودِ OL/UL */
.chat-panel .bubble .markdown-body ol,
.chat-panel .bubble .markdown-body ul,
#chatView   .bubble .markdown-body ol,
#chatView   .bubble .markdown-body ul {
  margin: 0.4em 0 0.6em;
}

/* === RTL OL: تلاش برای نوع فارسی/هندی؛ اگر نبود می‌ریم سراغ Fallback ::before === */
.chat-panel .bubble[dir="rtl"] .markdown-body ol,
#chatView .bubble[dir="rtl"] .markdown-body ol {
  list-style-position: outside;
  padding-inline-start: 1.25em;
  list-style-type: persian;
}

@supports not (list-style-type: persian) {
  .chat-panel .bubble[dir="rtl"] .markdown-body ol,
  #chatView .bubble[dir="rtl"] .markdown-body ol {
    list-style-type: arabic-indic;
  }
}

/* === Fallback نهایی: وقتی کلاس fa-ol ست شد، مارکر بومی خاموش + مارکر ::before فارسی === */
.chat-panel .bubble .markdown-body ol.fa-ol,
#chatView .bubble .markdown-body ol.fa-ol {
  list-style: none;          /* مارکر بومی کاملاً خاموش */
  padding: 0;
  margin: 0.4em 0 0.6em;
}

.chat-panel .bubble .markdown-body ol.fa-ol > li,
#chatView .bubble .markdown-body ol.fa-ol > li {
  position: relative;
  padding-inline-start: 0;   /* چون در RTL مارکر سمت راست است */
  padding-inline-end: 1.6em; /* جا برای مارکر سمت راست */
}

/* مارکر با ::before روی همان خط (نه روی خط جدا) */
.chat-panel .bubble .markdown-body ol.fa-ol > li::before,
#chatView .bubble .markdown-body ol.fa-ol > li::before {
  content: attr(data-i) "．";
  position: absolute;
  inset-inline-end: 0;       /* در RTL سمت راست */
  top: 0.05em;
  font-weight: 600;
  opacity: 0.9;
}