/* ═══════════════════════════════════════════════════════════════
   چیدمان سه‌ستونی — زیرِ هدر
   ───────────────────────────────────────────────────────────────
     راست ← حالِ درونی سلفا   (نگاهش می‌کنی، دستکاری‌اش نمی‌کنی)
     وسط  ← گفتگوی صوتی       (حضورِ سلفا؛ جایی که چشم اول می‌رود)
     چپ   ← گفتگوی نوشتاری    (می‌نویسی و می‌خوانی؛ بلند و اسکرول‌شونده)

   ⚠️ همه چیز پشتِ کلاسِ body.three-pane است و آن کلاس فقط وقتی
   گذاشته می‌شود که عرض واقعاً جا داشته باشد. زیرِ ۱۲۰۰px هیچ‌کدام از
   این قاعده‌ها فعال نیستند و برنامه دقیقاً همان چیزی است که بود —
   یعنی موبایل و تبلت هیچ ریسکی برنمی‌دارند.
   ═══════════════════════════════════════════════════════════════ */

/* ظرف‌های تازه تا وقتی چیدمان سه‌ستونی روشن نشده، اصلاً وجود ندارند */
#stateDock,
#voiceStage { display: none; }

@media (min-width: 1000px) {

  body.three-pane .main {
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(360px, 1fr) minmax(420px, 1.1fr);
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }

  body.three-pane #stateDock,
  body.three-pane #voiceStage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  body.three-pane #stateDock { overflow: auto; }

  /* مرزِ ستون‌ها — یک خطِ مو، هم‌جنسِ خط‌های هدر */
  body.three-pane #voiceStage,
  body.three-pane .panel-chat { border-inline-start: 1px solid rgba(255, 255, 255, .07); }
  body.three-pane #voiceStage { position: relative; overflow: hidden; }

  /* نقشه‌ی مفاهیم فعلاً قفل است و جای ستونِ وسط را می‌گرفت */
  body.three-pane #mapSection,
  body.three-pane #detailsPanel { display: none !important; }

  body.three-pane .panel-chat {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* ── ستونِ راست: پنلِ حال از مودال به ستون ────────────────────
     همان گره‌ی #happinessPanel است؛ فقط دیگر روی صفحه نمی‌افتد.
     کلاسِ hidden رویش می‌آید و می‌رود (کدِ قدیمی)، ولی اینجا معنایی
     ندارد — ستون همیشه دیده می‌شود. */
  body.three-pane #stateDock .happiness-panel,
  body.three-pane #stateDock .happiness-panel.hidden {
    position: static;
    inset: auto;
    z-index: auto;
    display: flex !important;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
  }
  body.three-pane #stateDock .happiness-overlay,
  body.three-pane #stateDock .happiness-close,
  body.three-pane #stateDock #happinessCloseBtn { display: none !important; }

  body.three-pane #stateDock .happiness-panel-content {
    transform: none !important;          /* در ستون، کوچک‌نمایی لازم نیست */
    max-height: none !important;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  /* ── ستونِ وسط: صحنه‌ی صوتی ───────────────────────────────────
     صفحه‌ی گفتگوی صوتی به‌جای پوشاندنِ کلِ پنجره، داخل همین ستون
     سوار می‌شود. z-index و حجابِ تمام‌صفحه اینجا معنا ندارند. */
  body.three-pane #voiceStage .vm-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background:
      radial-gradient(70% 60% at 50% 42%, rgba(201, 169, 97, .06) 0%, transparent 70%);
  }
  /* ⚠️ صفحه‌ی صوتی برای تمام‌صفحه ساخته شده بود: min-height:100dvh
     داخلِ ستون، نوارِ کنترل را از پایینِ قاب می‌انداخت بیرون. */
  body.three-pane #voiceStage .vm-overlay { min-height: 0; height: 100%; }
  /* ⚠️ همین بود که نوارِ کنترل را بیرون می‌انداخت: قابِ درونی برای
     تمام‌قدِ پنجره ساخته شده بود، نه برای یک ستون. */
  body.three-pane #voiceStage .vm-inner {
    min-height: 0;
    height: 100%;
    width: min(520px, calc(100% - 28px));
  }
  body.three-pane #voiceStage .vm-orb { --vm-size: min(32vmin, 250px); }
  body.three-pane #voiceStage .vm-bar { padding-bottom: 22px; opacity: .72; }

  /* در حالتِ داکی، صفحه‌ی زیرین نه محو می‌شود نه از کار می‌افتد —
     چون اصلاً پوشانده نشده و کاربر باید بتواند هم‌زمان بنویسد. */
  body.three-pane.vm-on #mainApp { filter: none; pointer-events: auto; }
  body.three-pane.vm-on { overflow: hidden; }

  body.three-pane .vs-body {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* دعوتِ ساده وقتی گفتگوی صوتی خاموش است */
  .vs-idle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    padding: 24px;
  }
  .vs-idle-mark {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 169, 97, .16), transparent 68%);
    display: grid;
    place-items: center;
    animation: vsBreathe 4s ease-in-out infinite;
  }
  @keyframes vsBreathe { 0%,100%{opacity:.75;transform:scale(1)} 50%{opacity:1;transform:scale(1.04)} }
  .vs-idle-title { font-size: 13.5px; color: rgba(233,230,223,.62); }
  .vs-idle-sub   { font-size: 11.5px; color: rgba(233,230,223,.34); line-height: 2; max-width: 260px; }
  .vs-idle-btn {
    padding: 11px 24px;
    border: 1px solid rgba(201, 169, 97, .4);
    border-radius: 22px;
    background: transparent;
    color: #e8c877;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
  }
  .vs-idle-btn:hover { background: rgba(201, 169, 97, .12); border-color: rgba(201, 169, 97, .7); }
}

/* ═══ سه‌تاییِ هدر: کنارِ هم، روی محورِ ستونِ صوتی ═════════════════
   در هدر می‌مانند (جایشان همان‌جاست)، ولی به‌جای محورِ صفحه روی محورِ
   ستونِ وسط می‌نشینند تا درست بالای همان بخشی باشند که به آن مربوط‌اند.
   مقدارِ ‎--vs-center-x را three-pane.js از عرضِ واقعیِ ستون می‌سازد،
   چون عرضِ ستون‌ها کسری است و CSS خودش نمی‌تواند حسابش کند.
   ⚠️ انتخابگرها عمداً بلندند: قاعده‌های header-layout با شناسه نوشته
   شده‌اند و بدونِ این طول، وزنشان کمتر می‌شد.                        */
@media (min-width: 1000px) {
  body.three-pane .header > .identity-bar .hdr-center,
  body.three-pane .header > #identityBar .hdr-center {
    left: var(--vs-center-x, 50%);
    gap: 10px;
  }
  /* نشانِ پروژه دیگر آویزان نیست؛ عضوِ همان سه‌تایی است */
  body.three-pane .header > #identityBar .hdr-center > .goals-badge,
  body.three-pane .header > #identityBar .hdr-center > #goalsBadge {
    position: static;
    transform: none;
    margin: 0;
  }
  body.three-pane .header > #identityBar .hdr-center > .mode-switcher,
  body.three-pane .header > #identityBar .hdr-center > #modeSwitcher {
    margin: 0 !important;
    flex-shrink: 0;
  }
}


/* ═══ دسته‌های هدر روی محورِ ستون‌های زیرشان ═══════════════════════
   نوارِ هویت در حالتِ عادی کشسان است (flex:1) و کنش‌ها را به لبه‌ی
   صفحه می‌چسباند؛ اینجا باید به اندازه‌ی خودش باشد تا سه‌کلاژِ پایانی
   دقیقاً روی محورِ ستونِ چت بنشیند. جابه‌جاییِ افقی را
   three-pane.js با یک margin حساب‌شده می‌دهد. */
@media (min-width: 1000px) {
  body.three-pane .header > .identity-bar,
  body.three-pane .header > #identityBar {
    flex: 0 0 auto;
    margin-inline-start: 0;
  }
}