/* ═══════════════════════════════════════════════════════════════
   Header layout — چیدمان و دسته‌بندیِ هدر
   ───────────────────────────────────────────────────────────────
   هدر با هر قابلیتِ تازه یک آیکون گرفت و آخرش شد ردیفی بی‌دسته که
   چشم نمی‌داند کجایش را نگاه کند. اینجا آیتم‌ها به سه ناحیه‌ی
   معنادار تقسیم می‌شوند:

     شروع  ← نشان + حالِ سلفا + مودِ گفتگو     «سلفا الان چگونه است»
     وسط   ← هویت (+ نشانِ پروژه کنارش)         «این گفتگو با کیست»
     پایان ← کنش‌های گفتگو ¦ مدل، تنظیمات، خروج «چه کاری می‌شود کرد»

   ⚠️ تنها تغییرِ DOM یک پوششِ نازک (.hdr-center) دورِ هویت و نشانِ
   پروژه است. بقیه‌ی فایل‌های CSS با انتخابگرِ فرزندِ مستقیم به هدر
   وصل‌اند (.header > #providerDropdown و …) و دست‌بردن در ساختار،
   موبایل را می‌شکست.
   ═══════════════════════════════════════════════════════════════ */

/* ⚠️ به‌طور پیش‌فرض این پوشش «وجود ندارد»: display:contents یعنی خودش
   جعبه‌ای نمی‌سازد و فرزندانش دقیقاً همان‌جایی می‌نشینند که پیش از
   افزودنش می‌نشستند. پس موبایل و عرض‌های تنگ بدونِ هیچ ریسکی همان
   چیدمانِ قبلی را دارند؛ فقط در عرض‌های راحت زنده می‌شود. */
.hdr-center { display: contents; }

/* ── وسط‌چینِ واقعیِ هویت — از ۹۰۰px به بالا ───────────────────────
   قبلاً «هویت» وسطِ نوارِ هویت وسط‌چین می‌شد، نه وسطِ هدر؛ چون دو
   طرفِ آن نوار هم‌عرض نیستند، همیشه کمی کج می‌نشست.               */
@media (min-width: 900px) {

  /* فاصله‌ی کلی جمع‌تر تا خودِ دسته‌ها فاصله را بسازند */
  .header { gap: 12px; }

  /* کنش‌های گفتگو (نقشه‌ی ذهن، پاک‌کردن چت، تغییر هویت) = یک قاب،
     هم‌خانواده‌ی قابِ مود، تا سه آیکون «یک چیز» دیده شوند */
  .header > .identity-bar .header-actions,
  .header > #identityBar .header-actions {
    gap: 2px;
    padding: 3px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.12);
    margin-inline-start: auto;          /* به لبه‌ی پایان بچسبد */
  }
  .header > .identity-bar .header-actions .btn-icon,
  .header > #identityBar .header-actions .btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  /* مرزِ «کارِ گفتگو» و «کارِ حساب» — یک خطِ مو، نه یک دیوار */
  .header > #providerDropdown,
  .header > .provider-dd {
    margin-inline-start: 6px;
    padding-inline-start: 12px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.09);
  }
  .header > #settingsBtn,
  .header > .settings-with-ring,
  .header > #logoutBtn {
    margin-inline-start: -4px;          /* سه‌تایی، یک دسته بخوانند */
  }

  /* نوارِ هویت نباید لنگرِ موقعیت باشد، وگرنه «وسط» یعنی وسطِ همان
     نوار و همان کجی برمی‌گردد. لنگر، خودِ هدر است. تنها چیزی که به
     این نوار می‌چسبید پاپ‌آورِ پروژه بود و حالا داخلِ پوشش است، پس
     درست زیرِ نشانِ خودش باز می‌شود. */
  .header > .identity-bar,
  .header > #identityBar { position: static; }

  .header > .identity-bar .hdr-center,
  .header > #identityBar .hdr-center {
    display: flex;
    align-items: center;
    gap: 0;                             /* عرضِ پوشش = عرضِ خودِ هویت */
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;                         /* پاپ‌آورها روی بقیه */
  }

  /* هویت دیگر خودش مطلق نیست؛ relative می‌ماند تا پاپ‌آورِ صفت
     همچنان به خودش بچسبد. */
  /* انتخابگر عمداً بلند است: یک قاعده‌ی قدیمی‌تر margin-inline-start
     می‌گذاشت و همان ۱۰px، «وسط» را ۵px کج می‌کرد. */
  .header > .identity-bar .hdr-center > .identity-display,
  .header > #identityBar .hdr-center > .identity-display {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    /* !important چون قاعده‌ی قدیمیِ فاصله هم !important است و بدون آن
       همان ۱۰px می‌ماند و «وسط» ۵px کج می‌شود. */
    margin: 0 !important;
  }
}

/* ── از ۱۱۰۰px به بالا: خودِ نشانِ هویت دقیقاً روی محور ──────────── */
@media (min-width: 1100px) {
  /* «وسط» یعنی خودِ نشانِ هویت، نه نشان به‌اضافه‌ی پروژه: اگر جفتشان
     را وسط می‌کردیم، با آمدن و رفتنِ نشانِ پروژه نامِ هویت جابه‌جا
     می‌شد — تکانی کوچک که چشم هر بار می‌گیردش. پس نشانِ پروژه از
     جریان بیرون می‌آید و کنارِ هویت آویزان می‌شود. */
  .header .hdr-center > .goals-badge,
  .header .hdr-center > #goalsBadge {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(100% + 10px);
    transform: translateY(-50%);
    margin: 0;
  }
}