.chat-page {
  display: flex;
  flex-direction: column;
  /* ۵۶px هدر موبایل + پدینگ بالای #page-root (--space-4) + پدینگ پایین #page-root
     (--bottom-nav-height + --space-5) — این دقیقاً همان مقداری است که layout.css برای
     #page-root در موبایل کم می‌کند؛ قبلاً اینجا به‌جای «--space-4 + --space-5» به‌اشتباه
     «--space-4 * 2» حساب شده بود (۸px کمتر) که باعث می‌شد پایین باکس زیر نویگیشن پایین برود
     و بالای آن زیر هدر بیفتد — مورد #19 Polish.md. */
  height: calc(100vh - 56px - var(--space-4) - var(--bottom-nav-height) - var(--space-5));
  max-height: 720px;
}

/* مورد #12 fix-bug.md — روی iOS Safari، نوار پایین واقعی (bottom-nav) به‌اندازه‌ی
   safe-area-inset-bottom بلندتر از --bottom-nav-height است؛ اگر اینجا همین مقدار کم نشود،
   نوار ورودی پیام (ته .chat-page) زیر نوار ناوبری/نوار خانه‌ی سیستم می‌رود. 100dvh هم علاوه‌بر
   100vh اضافه شده چون روی iOS، 100vh ارتفاع را با فرض جمع‌شدن نوار آدرس محاسبه می‌کند و وقتی نوار
   آدرس باز است باعث می‌شود ته کارت بیرون از ویوپورت واقعی/زیر نویگیشن بیفتد؛ dvh ارتفاع واقعی و
   پویای ویوپورت را در نظر می‌گیرد (مرورگرهای بدون پشتیبانی dvh، قانون قبلی 100vh را همچنان اجرا
   می‌کنند چون این خط بعدش می‌آید و override می‌شود فقط وقتی dvh معتبر باشد). */
@supports (height: 100dvh) {
  .chat-page {
    height: calc(100dvh - 56px - var(--space-4) - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px) - var(--space-5));
  }
}

@media (min-width: 768px) {
  .chat-page {
    height: calc(100vh - 64px - var(--space-5) * 2);
  }

  @supports (height: 100dvh) {
    .chat-page {
      height: calc(100dvh - 64px - var(--space-5) * 2);
    }
  }
}


/* کامپوننت مشترک محتوای گفتگو (پیام‌ها + نوار خلاصه + ورودی) — هم داخل .chat-page (لینک مستقیم)
   و هم داخل ستون چپ .chats-two-pane (حالت واید صفحه‌ی لیست چت‌ها) استفاده می‌شود. */
/* md.md مورد ۳ — روی موبایل .chat-conversation تک‌ستونه می‌ماند (شیت با position:fixed از
   جریان خارج است)؛ روی دسکتاپ به یک ردیف تبدیل می‌شود تا شیت «اطلاعات آگهی» به‌جای شناورشدن
   روی چت، در همان فضای خالیِ کنارِ ناحیه‌ی چت به‌عنوان یک ستون واقعی جا بگیرد. */
.chat-conversation {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chat-conversation-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

@media (min-width: 768px) {
  .chat-conversation {
    flex-direction: row;
    gap: var(--space-3);
  }
}

/* md.md مورد ۲ — حالت تمام‌صفحه: کل چت روی کل ویوپورت (حتی هدر/نویگیشن اپ) قرار می‌گیرد تا
   تمرکز کامل روی گفتگو باشد؛ داده‌ی نوار خلاصه‌ی فشرده و bottom-sheet دقیقاً همان کامپوننت قبلی
   می‌مانند، فقط کانتینر بزرگ‌تر می‌شود. */
.chat-conversation-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: var(--color-surface);
  padding: var(--space-3);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}

/* مورد ۳ — روی موبایل شیت باید یک مودال واقعی باشد (نه یک پنل کناری بی‌بک‌دراپ)؛ این پس‌زمینه‌ی
   تیره دقیقاً همان .modal-overlay پروژه است، فقط چون شیت خودش عنصر جدایی است (نه داخل
   .modal-overlay) به‌صورت یک لایه‌ی مستقل پشت آن رندر می‌شود. روی دسکتاپ اصلاً دیده نمی‌شود چون
   شیت دیگر overlay نیست، یک ستون ثابت کنار چت است. */
.chat-ad-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: 2150;
}

.chat-ad-sheet-backdrop.open {
  display: block;
}

@media (min-width: 768px) {
  .chat-ad-sheet-backdrop {
    display: none !important;
  }
}

/* task.md مورد ۱ — شیت «اطلاعات آگهی» روی موبایل قبلاً از پایین (bottom-sheet) باز می‌شد؛ حالا
   از همان سمتی که دکمه‌ی ⋮ آن قرار دارد (کنار/راست) به‌صورت پنل کشویی باز می‌شود. */
.chat-ad-sheet {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 340px);
  max-height: none;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  /* شیت با right:0 به لبه‌ی راست صفحه می‌چسبد؛ آن لبه اصلاً دیده نمی‌شود، پس بردر باید از سمت
     راست حذف شود نه چپ — لبه‌ی چپ همان مرز قابل‌دیدِ شیت با محتوای چت است و باید بردر داشته باشد
     (قبلاً برعکس بود: بردر سمت راستِ نامرئی می‌ماند و سمت چپِ دیدنی بدون بردر بود). */
  border-right: none;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 2200;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateX(100%);
  transition: transform 220ms ease;
  pointer-events: none;
}

.chat-ad-sheet.open {
  transform: translateX(0);
  pointer-events: auto;
}

.chat-ad-sheet .bottom-sheet-handle-zone {
  display: none;
}

@media (min-width: 768px) {

  /* دیگر overlay شناور نیست — یک ستون ثابت واقعی داخل جریان فلکسِ .chat-conversation، دقیقاً در
     فضای خالیِ کنار ناحیه‌ی چت. همیشه در DOM/چیدمان حاضر است؛ فقط با «باز/بسته» عرضش انیمیت
     می‌شود، نه display:none (تا جابه‌جایی چت هنگام باز/بسته‌شدن هم نرم باشد). */
  .chat-ad-sheet {
    display: flex;
    position: static;
    width: 0;
    min-width: 0;
    overflow: hidden;
    flex-shrink: 0;
    max-height: none;
    height: 100%;
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: width 200ms ease, opacity 200ms ease;
    opacity: 0;
  }

  .chat-ad-sheet.open {
    width: 300px;
    opacity: 1;
    border: solid 1px var(--color-border);
  }

  .chat-ad-sheet .bottom-sheet-handle-zone {
    display: none;
  }

  .chat-ad-sheet-body {
    width: 300px;
  }
}

.chat-ad-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  font-size: 0.9rem;
}

.chat-ad-sheet-body {
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chat-ad-sheet-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: 600;
  font-size: 0.85rem;
}

/* مورد #11 fix-bug.md + bug.md مورد ۲ — نوار خلاصه به ردیف‌های مجزا و هم‌ترازشده تقسیم شده تا در
   موبایل عناصر روی هم نیفتند: هر بخش (.chat-summary-row) عرض کامل کارت را می‌گیرد و خودش با
   flex-wrap محتوایش را مرتب می‌کند. یک خط جداکننده‌ی ظریف بین ردیف‌ها (به‌جز اولی) اضافه شده تا
   بخش‌ها (عنوان / جستجو / اطلاعات پیشنهاد) به‌جای مبهم‌بودن، واضح از هم جدا باشند. */
.chat-summary-bar {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  overflow: hidden;
}

.chat-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) 0;
}

.chat-summary-row:first-child {
  padding-top: 0;
}

.chat-summary-row:not(:first-child) {
  border-top: 1px solid var(--color-border);
}

.chat-summary-top {
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* summary-bug.md مورد ۱ — لیبل وضعیت پیشنهاد (badge) کنار دکمه‌ی جستجو، هر دو در یک گروه ثابت
   سمت چپ ردیف بالا؛ ردیف پایین (چیدمان چیپ‌ها) از این به بعد فقط برای دو کارت مبلغ/زمان است. */
.chat-summary-top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Lakegiri.md مورد ۲ — قبلاً این ردیف flex-wrap تخت بود: چون .chat-summary-metrics هم flex:1 1
   auto داشت هم خودش گرید بود، در عرض‌های واقعی موبایل (مثلاً ۴۲۸px آیفون ۱۳ پرو مکس) به‌جای
   شکستن تمیز به خط بعد، فقط فشرده می‌شد و دو چیپ داخلش روی هم می‌افتادند در حالی که دکمه کنارشان
   با ارتفاع عجیب وسط‌چین می‌ماند (breakpoint قبلی هم فقط تا ۴۲۰px بود، ۴۲۸px را پوشش نمی‌داد).
   حالا این ردیف همیشه (مستقل از بریک‌پوینت) ستونی است: چیپ‌های مبلغ/زمان کنار هم در یک ردیف بالا،
   دکمه‌ی اکشن (پرداخت/ثبت) با عرض کامل درست زیرشان. */
.chat-summary-details {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.chat-summary-info {
  min-width: 0;
  flex: 1 1 auto;
}

.chat-summary-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-strong);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* مورد ۵ task.md — عنوان آگهی حالا یک لینک به صفحه‌ی جزئیات است. متن کوتاه‌شونده (ellipsis) و
   آیکون ثابت کنارش تا در عرض‌های کم (موبایل) بیرون نزند. */
.chat-summary-title-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
  text-decoration: none;
}

.chat-summary-title-link:hover .chat-summary-title-text {
  color: var(--color-primary);
  text-decoration: underline;
}

.chat-summary-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.chat-summary-title-icon {
  font-size: 0.7em;
  flex-shrink: 0;
  opacity: 0.7;
}

/* گروه چیپ‌های اطلاعاتی (مبلغ/زمان پیشنهادی) — به‌صورت گرید تا در موبایل هم‌عرض و مرتب کنار هم
   قرار بگیرند، نه اینکه با flex-wrap ساده هر کدام عرض متفاوت و ناموزون بگیرند. */
.chat-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

/* چیپ آیکون‌دار مبلغ/زمان پیشنهادی — bug.md مورد ۲: قبلاً متن ساده‌ی بدون قاب بود («گنگ و مبهم»)؛
   حالا یک باکس بردردار با پس‌زمینه‌ی ملایم است تا هر مقدار به‌وضوح به‌عنوان یک واحد اطلاعاتی جدا
   دیده شود، مطابق بقیه‌ی چیپ‌های پروژه. */
.chat-summary-price-block {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  padding: var(--space-2) var(--space-3);
}

/* task-jadid.md دسته ۸ مورد ۱۸ — نشانِ کوچکِ متنی «مبلغ در امانت است» / «وجه آزاد شد». */
.chat-summary-escrow-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.chat-summary-escrow-note--done {
  color: var(--color-success);
}

.chat-summary-price-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.chat-summary-price-text {
  min-width: 0;
  flex: 1 1 auto;
}

.chat-summary-price-label {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-bottom: 1px;
}

.chat-summary-status-badge {
  flex-shrink: 0;
  align-self: center;
}

/* task.md مورد ۳ — دکمه‌ی فشرده‌ی «ثبت پیشنهاد قیمت» داخل نوار خلاصه؛ عرض کامل نمی‌گیرد، فقط به
   اندازه‌ی متنش، و در عرض‌های خیلی کم (که جای دو دکمه/آیکون دیگر هم لازم است) کاملاً پنهان
   می‌شود و اقدام از طریق ⋮ (شیت اطلاعات آگهی) انجام می‌شود. */
.chat-summary-quick-offer-btn {
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.35rem 0.65rem;
  font-size: 0.76rem;
}

@media (max-width: 380px) {
  .chat-summary-quick-offer-btn {
    display: none;
  }
}

/* فرم ثبت پیشنهاد قیمت — mobile-first: در موبایل هر ورودی عرض قابل‌انعطاف می‌گیرد و در صورت
   نیاز به خط بعد می‌رود (flex-wrap ارثی از .chat-summary-row)، بنابراین دکمه‌ی «ثبت» هرگز از
   کارت بیرون نمی‌زند — مورد #11 fix-bug.md. */
.chat-offer-price-form input {
  min-width: 0;
  flex: 1 1 130px;
}

.chat-offer-days-input {
  flex: 0 1 90px !important;
}

/* مورد ۶ Hot-Fix.md — در حالت واید (دسکتاپ) که فضای اضافی زیادی در ردیف هست، فیلد مدت‌زمان با
   basisِ ثابت ۹۰px خیلی کوچک به‌نظر می‌رسید؛ از این بریک‌پوینت به بعد اجازه‌ی رشد هم دارد. */
@media (min-width: 768px) {
  .chat-offer-days-input {
    flex: 1 1 160px !important;
  }
}

/* عرض دکمه‌ی ثبت با min-width قفل شده تا وقتی متن به «در حال ثبت…» تغییر می‌کند، دکمه بزرگ‌تر
   از فضای رزروشده نشود و کارت را نشکند (مورد #11 fix-bug.md). */
.chat-offer-submit-btn {
  flex-shrink: 0;
  min-width: 84px;
  white-space: nowrap;
}

/* summary-bug.md مورد ۲ — مقدار طولانی (مبلغ چند‌رقمی + «تومان») با white-space:nowrap قبلی از
   سمت چپ چیپ بیرون می‌زد چون چیپ عرض ثابت/محدودی دارد؛ حالا به‌جای بیرون‌زدن، در صورت نیاز به
   دو خط می‌شکند و کامل داخل کادر چیپ می‌ماند. */
.chat-summary-price {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.85rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}

/* fix.md — داخل شیت «اطلاعات آگهی» (چه بات‌شیت موبایل، چه سایدبار ۳۰۰px دسکتاپ) این دو چیپ
   دیگر کنار هم در گرید دوستونه نیستند؛ عرض هرکدام برای مقادیری مثل «۵۰۰,۰۰۰ تومان» ناکافی بود و
   به دو خط می‌شکست. حالا زیر هم و تمام‌عرض‌اند تا مقدار همیشه در یک خط جا شود. */
.chat-ad-sheet-body .chat-summary-metrics {
  grid-template-columns: 1fr;
}

.chat-summary-counterpart {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-search-toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
  /* مورد ۶ task.md — آیکون‌ها (سرچ/ضربدر/مکسیمایز/سه‌نقطه) دقیقاً وسطِ گردالی قرار بگیرند؛
     قبلاً به‌خاطر نبود flex-centering و متریک‌های عمودی فونت‌آیکون، کمی رو به بالا بودند. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

.chat-search-toggle-btn>i {
  display: block;
  line-height: 1;
  /* مورد ۶ Hot-Fix.md — flex-centering بالا کافی نبود؛ گلیف‌های Font Awesome به‌خاطر باکس فونت
     نامتقارن (فضای descender رزروشده حتی برای آیکون‌های بدون دنباله) کمی بالاتر از وسط واقعی
     دایره افتاده‌اند؛ یک نُدج ظریف عمودی این عدم‌تقارن نوری را جبران می‌کند. */
  transform: translateY(1px);
}

.chat-search-toggle-btn[aria-pressed='true'] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* نوار جستجو حالا یک ردیف مستقل ولی همچنان داخل خودِ کارت خلاصه است — یک واحد یکپارچه
   به‌جای عنصر پراکنده‌ی جدا از کارت (مورد #11 fix-bug.md). */
.chat-search-bar {
  position: relative;
  flex-wrap: nowrap;
}

.chat-search-bar>i {
  position: absolute;
  right: var(--space-3);
  color: var(--color-text-faint);
  font-size: 0.85rem;
  pointer-events: none;
}

.chat-search-bar input {
  width: 100%;
  padding-right: calc(var(--space-3) * 2 + 14px);
  padding-left: calc(var(--space-3) * 2 + 14px);
}

.chat-search-bar button {
  position: absolute;
  left: var(--space-3);
  background: none;
  border: none;
  color: var(--color-text-faint);
}

@media (max-width: 420px) {
  .chat-summary-bar {
    padding: var(--space-2) var(--space-3);
  }

  .chat-summary-title {
    font-size: 0.82rem;
  }

  .chat-summary-counterpart {
    font-size: 0.74rem;
  }

  .chat-summary-metrics {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: var(--space-1);
  }

  .chat-summary-price-block {
    padding: 6px var(--space-2);
    gap: 6px;
  }

  .chat-summary-price-icon {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
  }

  .chat-summary-price {
    font-size: 0.8rem;
  }

  .chat-summary-price-label {
    font-size: 0.64rem;
  }

  .chat-summary-details {
    gap: var(--space-2);
  }
}

/* جداکننده‌ی روز بین گروه‌های پیام — مورد #15 Polish.md */
.chat-day-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-2) 0;
}

.chat-day-separator span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-faint);
  background: var(--color-surface-alt);
  padding: 3px 12px;
  border-radius: 999px;
}

/* رویداد سیستمی داخل تایم‌لاین چت (مثل پرداخت موفق مبلغ پیشنهادی) — allllll.png: دقیقاً مثل
   جداکننده‌ی روز بالا، یک پیل وسط‌چین مستقل، اما با رنگ موفقیت تا از جداکننده‌ی روز متمایز باشد. */
.chat-event-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: var(--space-2) 0;
  text-align: center;
}

.chat-event-separator i {
  color: var(--color-success);
  font-size: 0.8rem;
}

.chat-event-separator span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-success);
  background: var(--color-success-soft);
  padding: 4px 14px;
  border-radius: 999px;
}

/* FinalTAsk.md مورد ۴ — رویداد کنسلی/استرداد باید بصری از رویداد پرداخت موفق متمایز باشد. */
.chat-event-separator--danger i {
  color: var(--color-danger);
}

.chat-event-separator--danger span {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
}

/* پیام‌های خودم سمت راست، پیام‌های طرف مقابل سمت چپ — مثل تلگرام/واتساپ RTL. قبلاً برعکس
   بود چون flex-end در RTL یعنی چپ (نه راست)، و پیش‌فرض بدون justify-content هم flex-start یعنی
   راست بود — یعنی «مال من» می‌رفت چپ و «مال طرف مقابل» می‌رفت راست. */
.chat-bubble-row {
  display: flex;
  justify-content: flex-end;
}

.chat-bubble-row.mine {
  justify-content: flex-start;
}

.chat-bubble-row.admin-centered {
  justify-content: center;
}

/* ستون بیرونی حباب+متادیتا — max-width اینجاست تا هم حباب هم ردیف زیرش هم‌عرض بمانند. */
.chat-bubble-stack {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  align-items: flex-end;
}

.chat-bubble-row.mine .chat-bubble-stack {
  align-items: flex-start;
}

.chat-bubble-row.admin-centered .chat-bubble-stack {
  align-items: center;
  max-width: 92%;
}

.chat-bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.chat-bubble-row.mine .chat-bubble {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* پیام مدیر — کارت زرد با نوار تاکید سمت راست و آیکون، مطابق رفرنس ارسالی کاربر. */
.chat-bubble.admin-broadcast {
  position: relative;
  background: #ffde22;
  border-color: #dbba00;
  color: #3a2f00;
  padding-right: calc(var(--space-3) + 4px);
  overflow: hidden;
}

.chat-bubble.admin-broadcast::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: #dbba00;
}

.chat-bubble-admin-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-weight: 700;
  margin-bottom: 4px;
}

/* پیام مخفی‌شده توسط ادمین — پس‌زمینه‌ی معمولی حباب، فقط متن/آیکون قرمز (نه کل حباب قرمز). */
.chat-bubble.hidden-message {
  color: var(--color-danger);
}

.chat-bubble img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

/* سایز کوچک‌تر پیش‌نمایش عکس داخل حباب — کلیک/دانلود سایز اصلی را در تب جدید باز می‌کند (مورد #53 BigTasks). */
.chat-bubble-image {
  max-width: 160px;
  max-height: 160px;
  object-fit: cover;
  cursor: zoom-in;
}

/* ردیف متادیتای پیام — بیرون از حباب رنگی، زیر آن (مورد #5 fix-bug.md). */
.chat-bubble-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  color: var(--color-text-muted);
  opacity: 0.85;
  margin-top: 3px;
  padding: 0 2px;
}

.chat-bubble-sender {
  font-weight: 600;
}

/* آیکن «سین» — خاکستری‌کم‌رنگ یعنی فقط ارسال شده، رنگی یعنی طرف مقابل دیده است. */
.chat-seen-icon {
  font-size: 0.7rem;
  opacity: 0.6;
}

.chat-seen-icon.is-seen {
  color: var(--color-info);
  opacity: 1;
}

.chat-input-area {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  /* مورد #12 fix-bug.md — safe-area روی iPhone‌های دارای نوار خانه، تا دکمه‌ی ارسال هیچ‌وقت
     زیر نوار سیستمی/نوار پایین اپ گیر نکند. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.chat-input-area .chat-input-bar {
  border-top: none;
}

.chat-closed-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 12px 16px;
  color: var(--color-success, #1e9e5a);
  background: var(--color-success-soft, rgba(30, 158, 90, 0.08));
  font-size: 0.9rem;
  text-align: center;
}

/* پیش‌نمایش فایل ضمیمه پیش از ارسال — کاربر می‌تواند کپشن آن را در اینپوت متن بنویسد — مورد #۱ (تنظیم Caption). */
.chat-attachment-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.chat-attachment-preview-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.chat-attachment-preview-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-attachment-preview-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-preview-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  flex-shrink: 0;
}

.chat-input-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.chat-attach-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.chat-send-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}