html,
body {
  background: var(--color-bg);
  color: var(--color-text);
}

#app-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#page-root {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

/* md.md مورد ۴ — سقف عمومی ۱۲۰۰px روی صفحه‌ی چت باعث می‌شد در مانیتورهای عریض، فضای زیادی
   (سمت چپ کارت چت، بیرون از دوستونه) کاملاً بلااستفاده بماند؛ همان فضا دقیقاً جایی است که باید
   صرف عریض‌تر شدن ناحیه‌ی چت شود، تا وقتی شیت «اطلاعات آگهی» باز می‌شود (۳۰۰px) چت را فشرده نکند.
   فقط همین صفحه سقف بازتری دارد، نه کل سایت. */
@media (min-width: 1024px) {
  #page-root:has(.chats-page) {
    max-width: 1600px;
  }
}

@media (max-width: 767px) {
  #page-root {
    /* پدینگ پایین همیشه ارتفاع واقعی نوار پایین + یک فاصله‌ی امن باشد — معیار یکسان برای همه‌ی
       صفحات، تا محتوا زیر نویگیشن باتن موبایل نرود (مورد #2 task.md). */
    /* مورد #12 fix-bug.md — safe-area-inset-bottom (نوار خانه‌ی iOS) هم به پدینگ اضافه می‌شود تا
       محتوا زیر نوار پایین واقعی (که خودش الان همین مقدار را دارد) پنهان نشود. */
    padding: var(--space-4) var(--space-3) calc(var(--bottom-nav-height) + var(--space-5) + env(safe-area-inset-bottom, 0px));
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* تعریف کامل .btn/.btn-primary/.btn-secondary/.btn-block در components/form.css قرار دارد
   تا از تداخل دو تعریف با ترتیب لود متفاوت جلوگیری شود. */

.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}