/* =========================================================
   «محیط هوشمند» — Chat Engine مشترک نابغه (Claude و بعداً بقیه)
   حس‌وحال: کاغذیِ گرم، آرام، مینیمال — نزدیک به فضای شناخته‌شدهٔ دستیارهای
   AI امروزی (رنگ‌های خنثیِ گرم + یک لهجهٔ زمینی واحد)، اما پالت دقیق و
   برندینگ (لوگو/Powered by) کاملاً خودِ نابغه است، نه کپی رنگ به رنگ.
   تم روشن/تاریک به‌صورت خودکار از prefers-color-scheme مرورگر می‌آید.
   ========================================================= */
.env-shell{
  --env-paper: #FAF9F5;
  --env-paper-2: #EFEDE3;
  --env-ink: #3B372B;
  --env-ink-muted: #85817A;
  --env-border: #E5E1D3;
  --env-accent: var(--env-family-accent, #C2694A);
  --env-accent-deep: var(--env-family-accent-deep, #94472E);
  --env-bubble-user: linear-gradient(135deg, var(--env-accent), var(--env-accent-deep));
  --env-hover: rgba(0,0,0,0.04);

  position: fixed; inset: 0; z-index: 40;
  display: flex; background: var(--env-paper); color: var(--env-ink);
  font-family: 'Vazirmatn', sans-serif;
}
/* .env-shell خودش position:fixed;inset:0 دارد و کل صفحه را می‌پوشاند — بدون
   این، هر flash() که سمت سرور ست می‌شود (کد تخفیف نامعتبر، دورهٔ نامعتبر، …)
   پشتِ همین overlay مخفی می‌ماند و کاربر هیچ خطایی نمی‌بیند، انگار صفحه فقط
   ری‌لود شده — همان چیزی که واقعاً موقع خرید اشتراک اتفاق می‌افتاد. */
.env-flash-overlay{
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 300; width: min(92vw, 480px);
}
.env-flash-overlay:empty{ display: none; }
.env-flash-overlay .flash-stack{ display: flex; flex-direction: column; gap: 8px; }
.env-flash-overlay .flash{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 12px; border: 1px solid; font-size: 0.85rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
/* تم تاریک — سه حالت: خودکار (پیش‌فرض، از prefers-color-scheme مرورگر)،
   یا انتخاب دستی کاربر از ⚙️ تنظیمات نمایش (کلاس env-force-light/dark
   روی خودِ envShell، در localStorage نگه داشته می‌شود). انتخاب دستی همیشه
   برندهٔ نهایی است، چه سیستم روشن باشد چه تاریک. */
@media (prefers-color-scheme: dark){
  .env-shell:not(.env-force-light){
    --env-paper: #262523;
    --env-paper-2: #1E1D1B;
    --env-ink: #EDE9DE;
    --env-ink-muted: #9C978C;
    --env-border: #3D3B36;
    --env-accent-deep: var(--env-family-accent-dark, var(--env-family-accent, #D9835F));
    --env-hover: rgba(255,255,255,0.06);
  }
}
.env-shell.env-force-dark{
  --env-paper: #262523;
  --env-paper-2: #1E1D1B;
  --env-ink: #EDE9DE;
  --env-ink-muted: #9C978C;
  --env-border: #3D3B36;
  --env-accent-deep: var(--env-family-accent-dark, var(--env-family-accent, #D9835F));
  --env-hover: rgba(255,255,255,0.06);
}

/* اندازهٔ فونت پیام‌ها — از ⚙️ تنظیمات نمایش، هم فونت هم فاصله‌ها را
   جمع‌وجورتر می‌کند (کلاس روی خودِ envShell، در localStorage). */
.env-shell.env-font-small .env-bubble{ font-size:0.8rem; line-height:1.7; padding:9px 13px; }
.env-shell.env-font-small .env-messages-inner{ gap:12px; }
.env-shell.env-font-small .env-msg{ gap:3px; }
.env-shell.env-font-small .env-msg-meta{ font-size:0.6rem; }
.env-shell.env-font-small .env-composer textarea{ font-size:0.82rem; }

/* ---------- sidebar ---------- */
.env-side{
  width: 264px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--env-paper-2); border-inline-end: 1px solid var(--env-border);
}
.env-side-top{ padding: 16px 14px 10px; display:flex; flex-direction:column; gap:10px; }
.env-brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--env-ink); }
.env-brand img{ width:26px; height:26px; border-radius:7px; }
.env-brand b{ font-size:0.95rem; }
.env-family-label{ font-size:0.72rem; color:var(--env-ink-muted); margin-inline-start:34px; margin-top:-6px; }

/* ناوبریِ بین‌استودیویی — کم‌اهمیت/جمع‌وجور، عمداً کوچک‌تر و کم‌رنگ‌تر از
   دکمهٔ اصلیِ «گفتگویِ جدید»؛ روی همهٔ صفحاتِ محیطِ هوشمند دیده می‌شود
   (۱۴۰۵/۰۷/۰۲) تا رفتن به یک استودیویِ دیگر نیاز به برگشتن به هاب نداشته باشد. */
.env-studio-nav{ position:relative; margin-inline-start:34px; }
.env-studio-nav-btn{
  display:flex; align-items:center; gap:5px; border:none; background:none; padding:2px 0;
  color:var(--env-ink-muted); font-size:0.72rem; font-family:inherit; cursor:pointer;
}
.env-studio-nav-btn:hover{ color:var(--env-ink); }
.env-studio-nav-arrow{ font-size:0.65rem; transition: transform .15s; }
.env-studio-nav-btn[aria-expanded="true"] .env-studio-nav-arrow{ transform:rotate(180deg); }
.env-studio-nav-panel{
  position:absolute; z-index:30; top:calc(100% + 4px); inset-inline-start:0; min-width:200px;
  background:var(--env-paper); border:1.5px solid var(--env-border); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px;
}
/* :not([hidden]) لازم است — یک قانونِ نویسنده با display بدونِ‌شرط روی
   همین کلاس، با تساویِ specificity، قانونِ پیش‌فرضِ مرورگر [hidden]{display:none}
   را می‌بَرد (دقیقاً همان دامی که قبلاً در env-modal-backdrop/.rz-panel افتاده بودیم). */
.env-studio-nav-panel:not([hidden]){ display:flex; flex-direction:column; gap:2px; }
.env-studio-nav-item{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:9px; text-decoration:none;
  color:var(--env-ink); font-size:0.78rem; transition: background .12s;
}
.env-studio-nav-item:hover{ background:var(--env-hover); }
.env-studio-nav-icon{
  width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; background: color-mix(in srgb, var(--nav-accent) 16%, transparent); flex-shrink:0;
}
.env-new-btn{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:10px 14px; border-radius:11px; border:none; cursor:pointer;
  background: var(--env-bubble-user); color:#fff; font-size:0.85rem; font-weight:700;
  text-decoration:none; box-shadow: 0 2px 10px -4px var(--env-accent-deep);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.env-new-btn:hover{ filter:brightness(1.06); box-shadow: 0 4px 14px -3px var(--env-accent-deep); }
.env-new-btn:active{ transform: scale(.98); }
.env-new-btn-icon{ font-size:0.9rem; }
.env-back-to-studio-btn{
  background: transparent; color: var(--env-ink-muted); border: 1px dashed var(--env-border);
  box-shadow: none; margin-bottom: 8px;
}
.env-back-to-studio-btn:hover{ filter:none; background: var(--env-paper-2); color: var(--env-ink); box-shadow:none; }

.env-convos{ flex:1; overflow-y:auto; padding: 4px 10px 10px; display:flex; flex-direction:column; gap:3px; }
.env-convo-section-label{
  font-size:0.66rem; font-weight:700; color: var(--env-ink-muted); letter-spacing:.3px;
  padding:10px 8px 4px; text-transform:uppercase;
}
#envConvosPinned:empty, #envConvosMain:empty{ display:none; }
.env-convo-row{
  display:flex; align-items:center; gap:2px; border-radius:9px; position:relative;
  border:1px solid transparent;
}
.env-convo-row:hover{ background: var(--env-hover); }
.env-convo-row.active{ background: var(--env-paper); border-color: var(--env-border); }
.env-convo-row.active .env-convo{ font-weight:600; }
.env-convo{
  display:flex; flex-direction:column; flex:1; min-width:0; padding:8px 6px 8px 10px; text-decoration:none;
  color: var(--env-ink); font-size:0.82rem; gap:2px; overflow:hidden;
}
.env-convo-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.env-convo-pin-mark{ font-size:0.68rem; margin-inline-end:3px; }
.env-convo-time{ color: var(--env-ink-muted); font-size:0.66rem; font-weight:400; }
.env-convo-title-input{
  width:100%; border:1px solid var(--env-accent); border-radius:6px; background: var(--env-paper);
  color: var(--env-ink); font-size:0.82rem; font-family:inherit; padding:3px 6px; outline:none;
}
.env-convo-menu-btn{
  flex-shrink:0; width:26px; height:26px; margin-inline-end:6px; border:none; border-radius:7px;
  background:transparent; color: var(--env-ink-muted); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; transition: opacity .12s, background .12s, color .12s;
}
.env-convo-row:hover .env-convo-menu-btn, .env-convo-row.active .env-convo-menu-btn{ opacity:1; }
.env-convo-menu-btn:hover{ background: var(--env-border); color: var(--env-ink); }
@media (hover:none){ .env-convo-menu-btn{ opacity:1; } }

/* منوی سه‌نقطهٔ هر گفتگو — یک المان مشترک، با موقعیتِ محاسبه‌شده در JS
   نزدیک دکمهٔ کلیک‌شده باز می‌شود (به‌جای یک پاپ‌آور جدا برای هر ردیف). */
.env-convo-menu{
  position:absolute; z-index:55; min-width:170px; padding:5px;
  background: var(--env-paper); border:1px solid var(--env-border); border-radius:11px;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.28); display:none;
}
.env-convo-menu:not([hidden]){ display:block; }
.env-convo-menu-item{
  width:100%; display:flex; align-items:center; gap:8px; padding:8px 9px; border:none; border-radius:8px;
  background:transparent; color: var(--env-ink); font-size:0.8rem; font-family:inherit; cursor:pointer;
  text-align:start;
}
.env-convo-menu-item:hover{ background: var(--env-hover); }
.env-convo-menu-item.danger{ color:#C0392B; }
.env-convo-menu-item.danger:hover{ background: rgba(192,57,43,.1); }
.env-convo-menu-icon{ font-size:0.9rem; width:18px; text-align:center; }
.env-convos-empty{ padding:14px 8px; font-size:0.78rem; color:var(--env-ink-muted); text-align:center; }
.env-side-bottom{ padding: 10px 14px 14px; border-top:1px solid var(--env-border); display:flex; flex-direction:column; gap:8px; }
.env-powered{ font-size:0.68rem; color: var(--env-ink-muted); text-align:center; letter-spacing:.2px; }
.env-powered b{ color: var(--env-ink); }
.env-back{
  font-size:0.78rem; color: var(--env-ink-muted); text-decoration:none; display:flex; align-items:center; gap:5px;
}
.env-back:hover{ color: var(--env-accent); }
.env-side-actions{ display:flex; flex-direction:column; gap:4px; margin-bottom:4px; }
.env-side-action-btn{
  display:flex; align-items:center; gap:6px; padding:7px 8px; border-radius:8px; border:none;
  background:transparent; color:var(--env-ink-muted); font-size:0.76rem; font-family:inherit;
  cursor:pointer; text-align:start; transition: background .15s, color .15s;
}
.env-side-action-btn:hover{ background: var(--env-hover); color:var(--env-ink); }

/* ---------- main column ---------- */
.env-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
/* نوار بالا از دو گروه مستقل تشکیل شده (هویت/عنوان و کنترل‌ها) — در دسکتاپ
   کنار هم در یک ردیف، در موبایل هرکدام یک ردیفِ کامل جدا (پایین را ببینید).
   این گروه‌بندی صریح، به‌جای تکیه بر flex-wrap/order، رفتار هر دو حالت را
   قابل‌پیش‌بینی نگه می‌دارد. */
.env-topbar{
  display:flex; align-items:center; gap:12px; padding:12px 20px;
  border-bottom:1px solid var(--env-border); flex-shrink:0;
}

/* ── «کدنویسی نابغه» — فایل‌های مرجعِ پایدارِ پروژه ───────────────────────── */
.env-project-files{ padding:10px 20px; border-bottom:1px solid var(--env-border); flex-shrink:0; }
.env-project-files-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:0.78rem; font-weight:700; color: var(--env-ink-muted);
}
.env-project-files-hint{ font-weight:400; font-size:0.72rem; }
.env-project-files-add{
  cursor:pointer; color: var(--env-family-accent); font-weight:800; font-size:0.76rem;
  padding:4px 10px; border-radius:999px; border:1px dashed var(--env-family-accent);
  transition: background .15s ease;
}
.env-project-files-add:hover{ background: color-mix(in srgb, var(--env-family-accent) 10%, transparent); }
.env-project-files-list{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.env-project-files-list:empty{ display:none; }
.env-pf-chip{
  display:inline-flex; align-items:center; gap:6px; background: var(--env-paper-2);
  border:1px solid var(--env-border); border-radius:999px; padding:4px 6px 4px 12px;
  font-size:0.75rem; font-family: var(--font-mono); direction:ltr;
}
.env-pf-chip-del{
  border:none; background:rgba(220,60,60,0.15); color:#ff6b6b; border-radius:50%;
  width:18px; height:18px; font-size:0.7rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ── «کدنویسی نابغه» — دکمه‌های میان‌بر ───────────────────────────────────── */
.env-quick-actions{ display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 10px; }
.env-quick-action-btn{
  background: var(--env-paper-2); border:1px solid var(--env-border); color: var(--env-ink);
  border-radius:999px; padding:6px 14px; font-size:0.78rem; font-weight:700; cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.env-quick-action-btn:hover{ background: color-mix(in srgb, var(--env-family-accent) 12%, var(--env-paper-2)); border-color: var(--env-family-accent); }
@media (max-width:600px){
  .env-project-files{ padding:8px 12px; }
  .env-quick-actions{ padding:0 12px 8px; }
  .env-quick-action-btn{ padding:5px 11px; font-size:0.72rem; }
}
.env-topbar-id{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
/* همان باگِ شناخته‌شدهٔ .env-sub-gate — یک کلاسِ display:flex همیشه روی
   [hidden] پیش‌فرضِ مرورگر می‌برد مگر صریحاً شرطی شود (۱۴۰۵/۰۷/۱۰، صفحهٔ
   استودیوی نابغه اولین‌جایی بود که واقعاً این دکمه‌ها باید مخفی می‌ماندند). */
.env-topbar-ctrl{ display:none; align-items:center; gap:10px; flex-shrink:0; }
.env-topbar-ctrl:not([hidden]){ display:flex; }
.env-topbar h1{ font-size:0.95rem; margin:0; font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.env-model-btn{
  display:flex; align-items:center; gap:7px; border:1px solid var(--env-border); background: var(--env-paper-2);
  color: var(--env-ink); border-radius:9px; padding:6px 12px; font-size:0.78rem; font-family:inherit;
  cursor:pointer; max-width:220px; transition: border-color .15s;
}
.env-model-btn:hover{ border-color: var(--env-accent); }
.env-model-btn-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.env-model-btn-arrow{ color: var(--env-ink-muted); font-size:0.7rem; flex-shrink:0; }
/* ابزارهای Nabeghe AI مدلشان قفل است — فقط برچسب مدل را نشان بده، بدون فلش دراپ‌داون */
.env-model-btn[data-locked] .env-model-btn-arrow{ display:none; }
.env-model-btn[data-locked]{ cursor:default; }

/* مُدال انتخاب مدل */
.env-model-modal-list{ display:flex; flex-direction:column; gap:5px; max-height:min(60vh, 420px); overflow-y:auto; }
.env-model-row{
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:start; padding:10px 12px;
  border:1px solid var(--env-border); border-radius:11px; background: var(--env-paper); color: var(--env-ink);
  font-family:inherit; cursor:pointer; transition: border-color .15s, background .15s;
}
.env-model-row:hover{ border-color: var(--env-accent); }
.env-model-row.current{ border-color: var(--env-accent); background: var(--env-paper-2); }
.env-model-row-top{ display:flex; align-items:center; gap:7px; }
.env-model-row-name{ font-size:0.85rem; font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.env-model-row-default{
  flex-shrink:0; font-size:0.62rem; font-weight:700; padding:2px 7px; border-radius:999px;
  background: var(--env-accent); color:#fff; white-space:nowrap;
}
.env-model-row-badges{ display:flex; gap:4px; flex-shrink:0; }
.env-model-badge{ font-size:0.78rem; }
.env-model-row-check{ color: var(--env-accent-deep); font-weight:700; flex-shrink:0; }
.env-model-row-sub{ font-size:0.72rem; color: var(--env-ink-muted); }
.env-balance-chip{
  display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background: var(--env-paper-2); border:1px solid var(--env-border); font-size:0.78rem; white-space:nowrap;
  color: var(--env-ink); font-family:inherit; cursor:pointer; transition: border-color .15s, background .15s;
}
.env-balance-chip:hover{ border-color: var(--env-accent); background: var(--env-paper); }
.env-balance-chip b{ font-family: var(--font-mono, monospace); color: var(--env-accent-deep); }
.env-balance-chip-hint{ font-size:0.66rem; color: var(--env-ink-muted); }
.env-balance-chip:hover .env-balance-chip-hint{ color: var(--env-accent-deep); }
/* موجودی منفی (سقف اعتبار جبرانی) — باید فوراً به چشم بیاید و کاربر بداند
   همین جعبه قابل‌کلیک برای شارژ است. */
.env-balance-chip.negative{ border-color:#C0392B; background: rgba(192,57,43,.08); }
.env-balance-chip.negative b{ color:#C0392B; }
.env-balance-chip.negative .env-balance-chip-hint{ color:#C0392B; font-weight:700; }
.env-topup-btn{
  padding:6px 13px; border-radius:999px; border:none; cursor:pointer; font-size:0.78rem; font-weight:700;
  background: var(--env-bubble-user); color:#fff; white-space:nowrap;
}

/* تمِ شخصی‌سازیِ رنگِ محیط هوشمند (۱۴۰۵/۰۷/۱۰) — یک دکمه + پاپ‌آورِ کوچک از
   سواچ‌هایِ رنگِ از‌قبل‌موجود؛ کاملاً سمتِ کاربر، بدون ارتباط با سرور. */
.env-theme-wrap{ position:relative; flex-shrink:0; }
.env-theme-btn{
  width:34px; height:34px; border-radius:999px; border:1px solid var(--env-border); background: var(--env-paper);
  cursor:pointer; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.env-theme-btn:hover{ border-color: var(--env-family-accent); }
.env-theme-pop{
  position:absolute; inset-inline-end:0; top: calc(100% + 8px); z-index:30; width:220px;
  background: var(--env-paper); border:1px solid var(--env-border); border-radius:14px;
  box-shadow: 0 16px 36px -12px rgba(0,0,0,.28); padding:12px;
}
.env-theme-pop-title{ font-size:0.76rem; font-weight:700; color: var(--env-ink-muted); margin-bottom:9px; }
.env-theme-swatches{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-bottom:10px; }
.env-theme-swatch{
  width:32px; height:32px; border-radius:50%; cursor:pointer; position:relative;
  background: var(--sw-color); border:2px solid transparent; box-shadow: 0 0 0 1px var(--env-border) inset;
  transition: transform .15s ease;
}
.env-theme-swatch:hover{ transform: scale(1.1); }
.env-theme-swatch.active{ border-color: var(--env-ink); }
.env-theme-swatch.active::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:0.8rem; font-weight:900; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.env-theme-reset{
  width:100%; padding:7px; border-radius:9px; border:1px dashed var(--env-border); background:transparent;
  color: var(--env-ink-muted); font-size:0.72rem; font-family:inherit; cursor:pointer;
}
.env-theme-reset:hover{ border-color: var(--env-family-accent); color: var(--env-family-accent); }

.env-messages{ flex:1; overflow-y:auto; padding: 22px 0 12px; }
.env-messages-inner{ max-width: 760px; margin: 0 auto; padding: 0 22px; display:flex; flex-direction:column; gap:18px; }
.env-msg{ display:flex; flex-direction:column; gap:5px; max-width: 78%; }
.env-msg.user{ align-self:flex-end; align-items:flex-end; }
.env-msg.assistant{ align-self:flex-start; align-items:flex-start; }
.env-bubble{ border-radius:16px; padding:11px 15px; font-size:0.9rem; line-height:1.85; white-space:pre-wrap; word-break:break-word; }
.env-msg.user .env-bubble{ background: var(--env-bubble-user); color:#fff; border-bottom-left-radius:4px; }
.env-msg.assistant .env-bubble{ background: var(--env-paper-2); border:1px solid var(--env-border); border-bottom-right-radius:4px; }
.env-msg-meta{ font-size:0.66rem; color: var(--env-ink-muted); padding: 0 4px; font-family: var(--font-mono, monospace); }
.env-msg-actions{ display:flex; gap:6px; padding:0 4px; margin-top:2px; }
.env-msg-action-btn{
  font-size:0.68rem; padding:4px 9px; border-radius:8px; border:1px solid var(--env-border);
  background: var(--env-paper-2); color: var(--env-ink-muted); cursor:pointer;
  text-decoration:none; transition: background .12s, color .12s;
}
.env-msg-action-btn:hover{ background: var(--env-paper); color: var(--env-ink); }

/* ── رندرِ Markdownِ پاسخِ اسیستنت — قبلاً کل صفحه فقط متنِ خام نشان می‌داد ── */
.env-msg.assistant .env-bubble{ white-space:normal; max-width:100%; }
.env-bubble p{ margin:0 0 10px; }
.env-bubble p:last-child{ margin-bottom:0; }
.env-bubble ul, .env-bubble ol{ margin:0 0 10px; padding-inline-start:22px; }
.env-bubble li{ margin-bottom:4px; }
.env-bubble li:last-child{ margin-bottom:0; }
.env-bubble a{ color: var(--env-family-accent); text-decoration:underline; }
.env-bubble blockquote{
  margin:0 0 10px; padding-inline-start:12px; border-inline-start:3px solid var(--env-border);
  color:var(--env-ink-muted);
}
.env-bubble code:not(pre code){
  background: var(--env-paper); border:1px solid var(--env-border); border-radius:4px;
  padding:1px 5px; font-family: var(--font-mono); font-size:0.85em; direction:ltr; unicode-bidi:embed;
}
.env-bubble h1, .env-bubble h2, .env-bubble h3, .env-bubble h4{ margin:14px 0 8px; font-weight:800; line-height:1.5; }
.env-bubble h1:first-child, .env-bubble h2:first-child, .env-bubble h3:first-child, .env-bubble h4:first-child{ margin-top:0; }
.env-bubble table{ border-collapse:collapse; margin:0 0 10px; font-size:0.85em; display:block; overflow-x:auto; }
.env-bubble th, .env-bubble td{ border:1px solid var(--env-border); padding:5px 9px; }
.env-bubble hr{ border:none; border-top:1px solid var(--env-border); margin:12px 0; }
.env-bubble img{ max-width:100%; border-radius:8px; }

.code-block{
  margin:10px 0; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.1);
  background:#282c34; direction:ltr; text-align:left; max-width:100%;
}
.code-block-head{
  display:flex; align-items:center; justify-content:space-between; padding:6px 12px;
  background:rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono); font-size:0.72rem; color:rgba(255,255,255,0.55);
}
.code-block-lang{ text-transform:lowercase; }
.code-block-copy{
  border:none; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.85);
  padding:3px 10px; border-radius:999px; font-family:inherit; font-size:0.7rem; font-weight:700;
  cursor:pointer; transition: background .15s ease, color .15s ease; white-space:nowrap;
}
.code-block-copy:hover{ background:rgba(255,255,255,0.16); }
.code-block-copy.copied{ background: var(--env-family-accent); color:#fff; }
.code-block pre{ margin:0; padding:12px 14px; overflow-x:auto; }
.code-block pre code{ font-family: var(--font-mono); font-size:0.82rem; line-height:1.6; direction:ltr; background:transparent !important; }
@media (max-width:600px){
  .code-block pre{ padding:10px 11px; }
  .code-block pre code{ font-size:0.76rem; }
  .code-block-head{ padding:5px 9px; }
}

.env-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding: 20px; }
.env-empty .env-empty-mark{ width:56px; height:56px; border-radius:16px; background: var(--env-bubble-user); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem; }
.env-empty h2{ margin:6px 0 2px; font-size:1.15rem; }
.env-empty p{ margin:0; color:var(--env-ink-muted); font-size:0.85rem; max-width:340px; }

.env-composer-wrap{ padding: 12px 22px 18px; flex-shrink:0; }
/* وقتی اشتراک فعال نیست و مکالمهٔ قبلی هم نداریم، خودِ #envSubGate تمام‌قد
   بالای صفحه است — این ناحیه دیگر جایی برای گِیت اضافه ندارد، فقط یک
   کامپوزر غیرفعال دارد که هرچه کوچک‌تر بهتر (تا جای بیشتری برای گِیت اصلی
   در نمایش موبایل بماند). */
.env-composer-wrap--gated{ padding: 6px 22px 10px; }
.env-composer.env-composer--gated{ max-width:760px; opacity:.5; padding:5px 8px; min-height:0; }
.env-composer.env-composer--gated textarea{ padding:4px 0; font-size:0.78rem; }
.env-hint.env-hint--gated{ display:none; }
/* :not([hidden]) لازم است — همان تلهٔ specificity که پایین‌تر (envModalBackdrop)
   مستندشده: بدونش، این قانونِ author با display:flex رویِ [hidden] پیش‌فرضِ
   مرورگر غالب می‌شود (specificity برابر، رتبهٔ author>UA) و فرم با هر
   ویژگیِ hidden هم دیده می‌ماند — دقیقاً چیزی که برایِ resume (اولین موردی
   که کلِ #envComposer را hidden می‌کند، نه فقط یک دکمه) رخ داد. */
.env-composer:not([hidden]){
  max-width:760px; margin:0 auto; display:flex; align-items:flex-end; gap:8px;
  background: var(--env-paper-2); border:1px solid var(--env-border); border-radius:16px; padding:8px 8px 8px 12px;
}
.env-composer textarea{
  flex:1; border:none; background:transparent; color:var(--env-ink); resize:none; font-family:inherit;
  font-size:0.9rem; line-height:1.6; max-height:160px; padding:7px 0; outline:none;
}
.env-composer textarea::placeholder{ color: var(--env-ink-muted); }
/* «کدنویسی نابغه» به فضای افقیِ بیشتری نیاز دارد (بلوک‌های کد/جدول‌ها) —
   حسِ یک محیطِ IDE به‌جای یک چتِ باریکِ معمولی. */
.env-shell[data-family="coding"] .env-messages-inner{ max-width:1040px; }
.env-shell[data-family="coding"] .env-composer{ max-width:1040px; }
.env-shell[data-family="coding"] .env-quick-actions{ max-width:1040px; margin:0 auto 8px; }
.env-send-btn{
  width:36px; height:36px; border-radius:11px; border:none; flex-shrink:0; cursor:pointer;
  background: var(--env-bubble-user); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition: opacity .15s;
}
.env-send-btn:disabled{ opacity:.45; cursor:default; }
.env-send-btn--waiting{ opacity:.7; cursor:wait; }
/* رونویسی نابغه — دکمهٔ ارسال این خانواده یک برچسبِ متنی است («ارسال برای
   رونویسی»)، نه یک تک‌نویسه («↑») مثل بقیه؛ باکسِ گِردِ ۳۶×۳۶ برای متن جا
   کم می‌آورد و بد شکسته می‌شد — این‌جا یک قرصِ عریض‌تر جایگزین می‌شود. */
.env-send-btn--wide{
  width:100%; height:46px; padding:0 18px; border-radius:23px; font-size:0.85rem;
  white-space:nowrap; font-weight:700; box-shadow:0 3px 12px rgba(0,0,0,.14);
}
.env-hint{ text-align:center; font-size:0.68rem; color: var(--env-ink-muted); margin-top:8px; }
/* رزومه‌ساز (و هر خانوادهٔ فرم‌محورِ مشابهِ آینده) به فضایِ نفسِ بیشتری زیرِ
   دکمهٔ ارسال نیاز دارد — فرمِ بالایِ آن به‌جایِ یک متن‌باکسِ کوتاه، خودش
   می‌تواند تقریباً نیمی از صفحه را بگیرد. */
.env-shell[data-family-mode="resume"] .env-composer-wrap{ padding-bottom:26px; }
@media (max-width:600px){
  .env-shell[data-family-mode="resume"] .env-composer-wrap{ padding-bottom:20px; }
}

/* ── پیش‌بینیِ هزینه پیش از ارسال ─────────────────────────────────────── */
.env-cost-estimate{
  text-align:center; font-size:0.72rem; color: var(--env-ink-muted); margin:6px auto 0;
  padding:5px 12px; border-radius:10px; background: var(--env-paper-2); width:fit-content; max-width:100%;
}
.env-cost-estimate[hidden]{ display:none; }
.env-cost-estimate--warn{ color:#B23A3A; background: rgba(228,83,79,0.1); font-weight:600; }

/* ── پیوست تصویر (Vision) ───────────────────────────────────────────── */
.env-attach-btn{
  width:36px; height:36px; border-radius:11px; border:none; flex-shrink:0; cursor:pointer;
  background:transparent; color: var(--env-ink-muted); display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; transition: background .15s, color .15s;
}
.env-attach-btn:hover:not(:disabled){ background: var(--env-border); color: var(--env-ink); }
.env-attach-btn:disabled{ opacity:.35; cursor:default; }
.env-thumb-strip{
  max-width:760px; margin:0 auto 8px; display:none; gap:8px; flex-wrap:wrap; padding:0 4px;
}
.env-thumb-strip:not([hidden]){ display:flex; }
.env-thumb{
  position:relative; width:56px; height:56px; border-radius:10px; overflow:hidden;
  border:1px solid var(--env-border); flex-shrink:0;
}
.env-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.env-thumb-remove{
  position:absolute; top:2px; inset-inline-end:2px; width:16px; height:16px; border-radius:50%;
  background:rgba(0,0,0,.62); color:#fff; font-size:11px; line-height:1; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.env-bubble-images{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; max-width:320px; }
.env-msg.user .env-bubble-images{ margin-inline-start:auto; }
.env-bubble-images img{
  max-width:150px; max-height:150px; border-radius:14px; object-fit:cover; border:1px solid var(--env-border);
}

/* ── پیوست سند (PDF/Word/Excel/متن/کد) ──────────────────────────────── */
.env-thumb-doc{
  display:flex; align-items:center; gap:6px; height:40px; padding:0 8px 0 6px; border-radius:10px;
  border:1px solid var(--env-border); background: var(--env-paper-2); max-width:180px; flex-shrink:0;
}
.env-thumb-doc-icon{ font-size:1.05rem; flex-shrink:0; }
.env-thumb-doc-name{
  font-size:0.74rem; color: var(--env-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.env-thumb-doc .env-thumb-remove{ position:static; flex-shrink:0; }

/* ── حالتِ «در حال آپلود» — چرخِ لودینگ روی پیش‌نمایش/چیپ، تا کاربر واقعاً
   ببیند چه اتفاقی دارد می‌افتد (قبلاً هیچ نشانه‌ای در این لحظه نبود). ────── */
.env-thumb.uploading img{ opacity:.45; filter: blur(1px); }
.env-thumb-doc.uploading .env-thumb-doc-name{ opacity:.6; }
.env-spinner{
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--env-border); border-top-color: var(--env-accent);
  animation: env-spin .7s linear infinite;
}
.env-thumb .env-spinner{ position:absolute; inset:0; margin:auto; width:20px; height:20px; }
@keyframes env-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .env-spinner{ animation-duration: 1.6s; } }

/* ── حالتِ «ناموفق» — به‌جای alert() مبهم، همین‌جا با پیام دقیق + دکمهٔ
   تلاشِ دوباره (فایل دوباره انتخاب نمی‌شود، همان File در حافظه نگه داشته می‌شود). */
.env-thumb.errored img{ opacity:.35; filter: grayscale(1); }
.env-thumb-err-overlay{
  position:absolute; inset:0; margin:auto; width:22px; height:22px; border-radius:50%;
  background:#C0392B; color:#fff; font-weight:800; font-size:0.85rem;
  display:flex; align-items:center; justify-content:center;
}
.env-thumb-retry{
  position:absolute; bottom:2px; inset-inline-start:2px; width:18px; height:18px; border-radius:50%;
  background: var(--env-accent); color:#fff; font-size:11px; line-height:1; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.env-thumb-doc.errored{ border-color:#C0392B; background: rgba(192,57,43,.07); max-width:280px; }
.env-thumb-doc.errored .env-thumb-doc-name{ color:#C0392B; }
.env-thumb-doc .env-thumb-retry{ position:static; margin-inline-start:2px; flex-shrink:0; }

.env-bubble-files{ display:flex; flex-direction:column; gap:5px; margin-bottom:6px; max-width:280px; }
.env-msg.user .env-bubble-files{ margin-inline-start:auto; align-items:flex-end; }
.env-doc-chip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:12px;
  border:1px solid var(--env-border); background: var(--env-paper-2); text-decoration:none;
  color: var(--env-ink); font-size:0.78rem; max-width:100%;
}
.env-doc-chip-icon{ font-size:1rem; flex-shrink:0; }
.env-doc-chip-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.env-doc-row{ display:inline-flex; align-items:center; gap:6px; max-width:100%; }
.env-doc-row .env-doc-chip{ min-width:0; flex:1; }
.env-doc-dl{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--env-paper-2); border:1px solid var(--env-border); color: var(--env-ink-muted);
  transition: background .15s, color .15s;
}
.env-doc-dl:hover{ background: var(--env-hover); color: var(--env-ink); }
.env-doc-dl svg{ width:14px; height:14px; fill:currentColor; }

.env-subtitle-translate{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.env-subtitle-translate-select{
  font-size:0.76rem; padding:6px 8px; border-radius:9px; border:1px solid var(--env-border);
  background: var(--env-paper-2); color: var(--env-ink); max-width:170px;
}

/* ── تبدیل متن به صدا («صدای نابغه») — پخش‌کنندهٔ سفارشی (eap) ──────────
   به‌جای <audio controls> خام؛ کنترل‌های بومیِ مرورگر در RTL/موبایل خیلی
   ناهماهنگ و بعضاً غیرقابل‌لمس رندر می‌شوند — این‌جا کاملاً دستی و یکدست
   طراحی شده، با دکمهٔ دانلود که وقتی audio بومی نبود اصلاً نداشتیم. */
.eap{
  display:flex; align-items:center; gap:10px; max-width:300px; width:100%;
  padding:9px 10px 9px 12px; margin-bottom:6px; border-radius:16px;
  background: var(--env-paper-2); border:1px solid var(--env-border);
}
.env-msg.user .eap{ margin-inline-start:auto; }
.eap-play{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background: linear-gradient(135deg, var(--env-accent), var(--env-accent-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.eap-ic{ width:18px; height:18px; fill:currentColor; }
.eap-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.eap-bar{ position:relative; height:14px; display:flex; align-items:center; cursor:pointer; }
.eap-bar::before{
  content:''; position:absolute; inset-inline:0; height:4px; border-radius:99px; background: var(--env-border);
}
.eap-bar-fill{
  position:absolute; inset-inline-start:0; height:4px; border-radius:99px; width:0%;
  background: linear-gradient(90deg, var(--env-accent), var(--env-accent-deep));
}
.eap-bar-knob{
  position:absolute; width:11px; height:11px; border-radius:50%; background: var(--env-accent-deep);
  inset-inline-start:0%; transform:translateX(50%); box-shadow:0 0 0 2px var(--env-paper-2);
}
.eap-time{ font-size:0.68rem; color: var(--env-ink-muted); direction:ltr; text-align:end; }
.eap-dl{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: var(--env-ink-muted); transition: background .15s, color .15s;
}
.eap-dl:hover{ background: var(--env-hover); color: var(--env-ink); }
.eap-dl svg{ width:16px; height:16px; fill:currentColor; }

/* تصویرساز نابغه (M39) — خروجیِ تولیدشده، بزرگ‌تر از تامبنیلِ پیوستِ ورودی
   (.env-bubble-images img) چون این‌جا خودِ تصویر، محتوای اصلیِ پاسخ است. */
.env-img-result{ position:relative; display:inline-block; max-width:340px; width:100%; }
.env-img-result img, .env-img-result video{
  width:100%; height:auto; border-radius:16px; display:block; border:1px solid var(--env-border);
}
.env-img-dl{
  position:absolute; top:8px; inset-inline-end:8px; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(20,20,20,.55); color:#fff;
  backdrop-filter: blur(2px); transition: background .15s;
}
.env-img-dl:hover{ background:rgba(20,20,20,.8); }
.env-img-dl svg{ width:16px; height:16px; fill:currentColor; }
@media (max-width: 640px){
  .eap{ max-width:none; padding:8px 8px 8px 10px; gap:8px; }
  .eap-play{ width:36px; height:36px; }
}
.env-tts-tone{
  max-width:760px; margin:0 auto 8px; display:flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:12px; background: var(--env-paper-2); border:1px solid var(--env-border);
}
.env-tts-tone[hidden]{ display:none; }
.env-tts-tone-label{ font-size:0.76rem; color: var(--env-ink-muted); flex-shrink:0; }
.env-tts-tone-tag{ font-size:0.68rem; color: var(--env-ink-muted); flex-shrink:0; white-space:nowrap; }
.env-tts-tone input[type="range"]{ flex:1; accent-color: var(--env-family-accent); }

/* تصویرساز نابغه — قالبِ تصویر (همان نوارِ .env-tts-tone، فقط ۳ دکمهٔ قرص‌مانند) */
.env-aspect-btn{
  border:1px solid var(--env-border); background: var(--env-paper); color: var(--env-ink-muted);
  cursor:pointer; padding:6px 14px; border-radius:999px; font-size:0.76rem; transition: all .15s ease;
}
.env-aspect-btn:hover{ color: var(--env-ink); }
.env-aspect-btn.active{ background: var(--env-family-accent); color:#fff; border-color: var(--env-family-accent); }

/* ── رونویسیِ صدا/ویدیو («رونویسی نابغه» — M37) — ضبطِ زنده یا آپلودِ فایل ── */
.env-stt-composer{
  max-width:760px; margin:0 auto 8px; padding:10px 14px; border-radius:14px;
  background: var(--env-paper-2); border:1px solid var(--env-border);
}
.env-stt-composer[hidden]{ display:none; }
/* پرسونا (۲۰۲۶-۰۹-۲۲): برخلافِ stt/voicechat که این جعبه تنها راهِ ورودی
   است، این‌جا کادرِ متنیِ زیرش هم فعال می‌ماند — این ویجت فقط یک گزینهٔ
   اضافیِ فشرده‌تر است، نه جایگزینِ چتِ فوری. */
.env-stt-composer--inline{ padding:8px 12px; margin-bottom:6px; }
.env-stt-inline-hint{ font-size:0.78rem; color: var(--env-ink-muted); }
@media (max-width: 640px){ .env-stt-inline-hint{ width:100%; text-align:center; margin-bottom:2px; } }
.env-stt-idle{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.env-stt-idle[hidden]{ display:none; }
.env-stt-record-btn, .env-stt-upload-btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:12px;
  border:1px solid var(--env-border); background: var(--env-paper); color: var(--env-ink);
  font-size:0.82rem; cursor:pointer; transition: background .15s, border-color .15s;
}
.env-stt-record-btn:hover, .env-stt-upload-btn:hover{ background: var(--env-hover); border-color: var(--env-accent); }
.env-stt-record-btn:disabled{ opacity:.5; cursor:default; }
.env-stt-upload-btn--busy{ opacity:.6; pointer-events:none; }
.env-stt-recording{ display:flex; align-items:center; justify-content:center; gap:12px; }
.env-stt-recording[hidden]{ display:none; }
.env-stt-rec-dot{
  width:11px; height:11px; border-radius:50%; background:#D6453F; flex-shrink:0;
  animation: env-stt-pulse 1.1s ease-in-out infinite;
}
@keyframes env-stt-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.78); } }
@media (prefers-reduced-motion: reduce){ .env-stt-rec-dot{ animation-duration: 2.2s; } }
.env-stt-rec-timer{ font-size:0.86rem; font-variant-numeric: tabular-nums; direction:ltr; color: var(--env-ink); }
.env-stt-stop-btn{
  padding:7px 14px; border-radius:10px; border:none; cursor:pointer;
  background:#D6453F; color:#fff; font-size:0.78rem;
}
.env-stt-preview{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.env-stt-preview[hidden]{ display:none; }
.env-stt-preview-player{ flex:1; min-width:200px; }
.env-stt-preview-player .eap{ margin-bottom:0; max-width:none; }
.env-stt-preview-meta{ font-size:0.72rem; color: var(--env-ink-muted); white-space:nowrap; direction:ltr; }
.env-stt-discard-btn{
  padding:7px 12px; border-radius:10px; border:1px solid var(--env-border); background:transparent;
  color: var(--env-ink-muted); cursor:pointer; font-size:0.76rem; flex-shrink:0;
}
.env-stt-discard-btn:hover{ background: var(--env-hover); color:#C0392B; border-color:#C0392B; }
@media (max-width: 640px){
  .env-stt-idle{ flex-direction:column; align-items:stretch; }
  .env-stt-record-btn, .env-stt-upload-btn{ justify-content:center; }
}

.env-typing{ display:inline-flex; align-items:center; gap:4px; padding:4px 2px; }
.env-typing span{ width:6px; height:6px; border-radius:50%; background: var(--env-ink-muted); animation: env-blink 1.1s infinite ease-in-out; }
.env-typing span:nth-child(2){ animation-delay:.15s; }
.env-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes env-blink{ 0%,80%,100%{ opacity:.25; transform:scale(.8);} 40%{ opacity:1; transform:scale(1);} }
/* مکالمهٔ صوتی — برچسبِ مرحله («در حال شنیدن...») کنارِ نقطه‌های تایپ؛ باید
   از قانونِ عمومیِ بالا (که هر span را یک نقطهٔ ۶×۶ می‌کند) معاف شود. */
.env-typing .env-voicechat-status{
  width:auto; height:auto; border-radius:0; background:none; animation:none;
  font-size:0.78rem; color: var(--env-ink-muted); white-space:nowrap;
}
/* نوارِ پیشرفتِ پردازش‌هایِ طولانی (ویدیو/تصویر) — عمداً یک <div>، نه
   <span>، تا از قاعدهٔ بالا (هر span یک نقطهٔ ۶×۶) معاف باشد. زمانِ
   سپری‌شده همیشه واقعی است؛ درصد یا از رویدادهای واقعیِ nabeghe-status
   (مرحله‌به‌مرحله) می‌آید یا — وقتی مرحله‌ای در کار نیست — یک تخمینِ
   محافظه‌کارانه که هیچ‌وقت به ۱۰۰٪ نمی‌رسد تا واقعاً تمام نشود (۱۴۰۵/۰۷/۰۳). */
/* .env-typing--proc فقط برایِ فرستادن‌هایی که پیشرفتِ واقعی/تخمینی دارند
   (ویدیو/فیس‌سواپ) اضافه می‌شود — نسخهٔ پیش‌فرض (سه‌نقطهٔ ساده برایِ چتِ
   معمولی) دست‌نخورده می‌ماند. */
.env-typing.env-typing--proc{ flex-direction:column; align-items:stretch; gap:6px; width:100%; max-width:260px; }
.env-proc-progress{ display:flex; flex-direction:column; gap:5px; width:100%; }
.env-proc-bar-outer{ width:100%; height:6px; border-radius:99px; background: var(--env-border); overflow:hidden; }
.env-proc-bar-fill{ height:100%; border-radius:99px; background: var(--env-family-accent); transition: width .5s ease; width:2%; }
.env-proc-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:0.72rem; color: var(--env-ink-muted); }
.env-proc-stage{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.env-proc-time{ flex-shrink:0; font-variant-numeric:tabular-nums; }
.env-proc-hint{ font-size:0.7rem; color: var(--env-ink-muted); opacity:.85; }

.env-error-bubble{ background: rgba(228,83,79,0.12); border:1px solid rgba(228,83,79,0.35); color:#8C2622; }
@media (prefers-color-scheme: dark){ .env-shell:not(.env-force-light) .env-error-bubble{ color:#FF9E98; } }
.env-shell.env-force-dark .env-error-bubble{ color:#FF9E98; }

/* کمبود موجودی Wallet — عمداً یک رنگ دیگر (کهربایی) نسبت به قرمزِ خطای
   عمومی/انقضای اشتراک، تا این دو وضعیت هیچ‌وقت با هم اشتباه گرفته نشوند. */
.env-error-bubble--balance{ background: rgba(240,180,41,0.14); border-color: rgba(240,180,41,0.4); color:#8A5A00; }
@media (prefers-color-scheme: dark){ .env-shell:not(.env-force-light) .env-error-bubble--balance{ color:#F0B429; } }
.env-shell.env-force-dark .env-error-bubble--balance{ color:#F0B429; }
.env-inline-topup-btn{
  margin-top:8px; padding:6px 14px; border-radius:999px; border:none; cursor:pointer;
  background: var(--env-bubble-user); color:#fff; font-size:0.78rem; font-weight:700; font-family:inherit;
}

/* ---------- اشتراک دسترسی — کاملاً جدا از موجودی/اعتبار بالا ---------- */
.env-sub-badge{
  font-size:0.68rem; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap;
  border:none; cursor:pointer; font-family:inherit; transition: filter .15s;
}
.env-sub-badge:hover{ filter:brightness(0.95); }
.env-sub-badge:focus-visible{ outline:2px solid var(--env-accent); outline-offset:2px; }
.env-sub-badge.ok{ background: rgba(120,170,90,0.16); color:#4C7A2E; }
.env-sub-badge.off{ background: rgba(228,83,79,0.14); color:#A5342F; }
@media (prefers-color-scheme: dark){
  .env-shell:not(.env-force-light) .env-sub-badge.ok{ color:#9CDB7A; }
  .env-shell:not(.env-force-light) .env-sub-badge.off{ color:#FF9E98; }
}
.env-shell.env-force-dark .env-sub-badge.ok{ color:#9CDB7A; }
.env-shell.env-force-dark .env-sub-badge.off{ color:#FF9E98; }

/* همان دستهٔ باگِ بالا: این کلاس هم روی #envRenewPanel (که با hidden
   نمایش/عدم‌نمایشش کنترل می‌شود) استفاده می‌شود — display باید شرطی باشد. */
.env-sub-gate{
  flex:1; padding:24px; -webkit-overflow-scrolling:touch;
  background: var(--env-paper-2); border-bottom:1px solid var(--env-border); overflow-y:auto;
  display:none;
  /* align-items/justify-content: center به‌تنهایی یک باگ شناخته‌شدهٔ CSS دارد:
     وقتی محتوا از ارتفاع کانتینر بلندتر شود، بخشی که بالای مرکز افتاده اصلاً
     با اسکرول قابل‌دسترسی نمی‌شود (نه گم شدن واقعی، ولی از دید کاربر همان
     چیز است: "بخشی از پلن‌ها گم شده"). safe center همان مرکزچینی را حفظ
     می‌کند اما وقتی سرریز شد، به‌جای قفل‌شدن، به حالت قابل‌اسکرول برمی‌گردد.
     خط center قبلی برای مرورگرهای خیلی قدیمی به‌عنوان fallback باقی می‌ماند. */
  align-items:center; justify-content:center;
  align-items:safe center; justify-content:safe center;
}
.env-sub-gate:not([hidden]){ display:flex; }
.env-sub-gate--inline{
  flex:none; padding:16px; border-radius:14px; border:1.5px solid var(--env-border);
  margin-bottom:10px; max-width:760px; margin-inline:auto;
}
.env-sub-gate--inline .env-sub-gate-inner{ max-width:none; }
.env-sub-gate--compact{ padding:10px 16px; }
.env-renew-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.env-renew-text{ font-size:0.8rem; color:var(--env-ink-muted); }
.env-renew-text b{ color:var(--env-ink); }
.env-renew-toggle-btn{
  padding:5px 12px; border-radius:999px; border:1px solid var(--env-border); background:transparent;
  color:var(--env-accent-deep); font-size:0.76rem; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.env-renew-toggle-btn:hover{ border-color:var(--env-accent); }
.env-renew-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* «افزایش اعتبار» عمداً پررنگ‌تر از «تمدید» است — این همان دکمهٔ مهمی است
   که کاربر واقعاً برای ادامهٔ چت‌کردن به آن نیاز دارد، نه فقط دسترسی به صفحه. */
.env-renew-topup-btn{
  padding:5px 12px; border-radius:999px; border:none; cursor:pointer; font-family:inherit;
  background: var(--env-bubble-user); color:#fff; font-size:0.76rem; font-weight:700; white-space:nowrap;
}
.env-renew-plans{ margin-top:12px; }
.env-sub-gate-inner{ max-width:640px; text-align:center; }
.env-sub-gate-icon{ font-size:2rem; margin-bottom:6px; }
.env-sub-gate-inner h2{ font-size:1.05rem; margin:0 0 8px; }
.env-sub-gate-inner p{ font-size:0.84rem; color:var(--env-ink-muted); margin:0 0 20px; line-height:1.8; }
.env-sub-gate-tagline{ margin:0 0 16px !important; }

/* بنرِ اعتبارِ هدیه — عمداً قبل از لیستِ پلن‌ها، تا کاربر قبل از دیدنِ
   قیمت، ببیند بخشی از همین اولین پرداخت رایگان به او برمی‌گردد. */
.env-sub-welcome{
  display:flex; align-items:center; gap:10px; text-align:start;
  padding:12px 14px; margin:0 0 16px; border-radius:12px;
  background: color-mix(in srgb, var(--env-accent) 12%, var(--env-paper));
  border:1px solid color-mix(in srgb, var(--env-accent) 35%, var(--env-border));
}
.env-sub-welcome-icon{ font-size:1.4rem; flex-shrink:0; }
.env-sub-welcome-text{ font-size:0.8rem; color:var(--env-ink); line-height:1.7; }
.env-sub-welcome-text b{ color: var(--env-accent-deep); }

.env-sub-trust{
  list-style:none; margin:0 0 20px; padding:0; text-align:start;
  display:flex; flex-direction:column; gap:6px;
}
.env-sub-trust li{ font-size:0.78rem; color:var(--env-ink-muted); line-height:1.7; }
.env-sub-plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.env-sub-plan-btn{
  width:100%; display:flex; flex-direction:column; gap:4px; align-items:center;
  padding:14px 10px; border-radius:14px; border:1.5px solid var(--env-border);
  background: var(--env-paper); cursor:pointer; transition: border-color .15s, transform .1s;
  font-family:inherit;
}
.env-sub-plan-btn:hover{ border-color: var(--env-accent); transform: translateY(-2px); }
.env-sub-plan-btn.selected{ border-color: var(--env-accent); background: var(--env-paper-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--env-accent) 25%, transparent); }
.env-sub-plan-dur{ font-size:0.8rem; font-weight:700; color:var(--env-ink); }
.env-sub-plan-price-group{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.env-sub-plan-price{ font-size:0.92rem; font-weight:800; color:var(--env-accent-deep); font-family: var(--font-mono, monospace); white-space:nowrap; }
.env-sub-plan-permo{ font-size:0.66rem; color:var(--env-ink-muted); font-family: var(--font-mono, monospace); white-space:nowrap; }

.env-sub-checkout{
  margin-top:14px; padding:14px; border-radius:12px; background: var(--env-paper); border:1px solid var(--env-border);
  text-align:start;
}
.env-sub-checkout-summary{
  display:flex; align-items:center; justify-content:space-between; font-size:0.85rem; font-weight:700;
  padding-bottom:10px; margin-bottom:10px; border-bottom:1px dashed var(--env-border);
}
.env-sub-checkout-price{ color: var(--env-accent-deep); }
.env-sub-code-field{ margin-bottom:10px; }
.env-sub-code-row{ display:flex; gap:8px; }
.env-sub-code-input{
  flex:1; min-width:0; padding:9px 12px; border-radius:9px; border:1px solid var(--env-border);
  background: var(--env-paper-2); color: var(--env-ink); font-size:0.8rem; font-family:inherit;
}
.env-sub-code-input::placeholder{ color: var(--env-ink-muted); font-family:'Vazirmatn',sans-serif; }
.env-sub-code-apply-btn{
  flex-shrink:0; padding:0 14px; border-radius:9px; border:1px solid var(--env-accent); background:transparent;
  color: var(--env-accent-deep); font-size:0.78rem; font-weight:700; font-family:inherit; cursor:pointer;
  transition: background .15s, color .15s;
}
.env-sub-code-apply-btn:hover:not(:disabled){ background: var(--env-accent); color:#fff; }
.env-sub-code-apply-btn:disabled{ opacity:.6; cursor:default; }
.env-sub-code-feedback{ font-size:0.74rem; margin-top:6px; line-height:1.6; }
.env-sub-code-feedback.ok{ color:#2E7D46; }
.env-sub-code-feedback.err{ color:#A5342F; }
@media (prefers-color-scheme: dark){
  .env-shell:not(.env-force-light) .env-sub-code-feedback.ok{ color:#5FBE7C; }
  .env-shell:not(.env-force-light) .env-sub-code-feedback.err{ color:#FF9E98; }
}
.env-shell.env-force-dark .env-sub-code-feedback.ok{ color:#5FBE7C; }
.env-shell.env-force-dark .env-sub-code-feedback.err{ color:#FF9E98; }
.env-sub-pay-btn{
  width:100%; padding:11px; border-radius:10px; border:none; cursor:pointer;
  background: var(--env-bubble-user); color:#fff; font-weight:700; font-size:0.86rem; font-family:inherit;
}

/* ---------- مُدال عمومی (تنظیمات / شارژ اعتبار / لیست قیمت) ---------- */
/* باگِ جدی که همین امروز پیدا شد: display:flex اینجا بدون هیچ شرطی نوشته
   شده بود، همان وزن (specificity) قانون پیش‌فرض مرورگر برای [hidden] را
   داشت و چون بعد از آن می‌آمد، رویش را می‌گرفت — یعنی این پردهٔ تیره
   همیشه روی کل صفحه نمایش داده می‌شد (حتی با وجود hidden) و جلوی هر
   کلیکی را می‌گرفت. الان صریحاً با :not([hidden]) کنترل می‌شود. */
.env-modal-backdrop{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45);
  align-items:center; justify-content:center; padding:20px;
  display:none;
}
.env-modal-backdrop:not([hidden]){ display:flex; }
.env-modal{
  position:relative; width:100%; max-width:420px; max-height:85vh; overflow-y:auto;
  background: var(--env-paper); border:1px solid var(--env-border); border-radius:18px;
  padding:24px 22px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  font-family:'Vazirmatn',sans-serif; color:var(--env-ink);
  animation: env-modal-in .18s ease;
}
@keyframes env-modal-in{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.env-modal-close{
  position:absolute; top:12px; inset-inline-end:12px; width:30px; height:30px; border-radius:50%;
  border:none; background:var(--env-paper-2); color:var(--env-ink-muted); font-size:1.1rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.env-modal-close:hover{ background:var(--env-hover); color:var(--env-ink); }
.env-modal-content h3{ margin:0 0 6px; font-size:1.05rem; }
.env-modal-sub{ margin:0 0 18px; font-size:0.78rem; color:var(--env-ink-muted); line-height:1.7; }
.env-modal-content--wide{ }
.env-modal.wide, .env-modal:has(.env-modal-content--wide){ max-width:560px; }

.env-settings-group{ margin-bottom:18px; }
.env-settings-group:last-child{ margin-bottom:0; }
.env-settings-label{ font-size:0.8rem; font-weight:700; margin-bottom:8px; }
.env-settings-options{ display:flex; gap:8px; flex-wrap:wrap; }
.env-settings-opt{
  padding:8px 14px; border-radius:10px; border:1.5px solid var(--env-border); background:var(--env-paper-2);
  color:var(--env-ink); font-size:0.8rem; font-family:inherit; cursor:pointer; transition:border-color .15s;
}
.env-settings-opt.active{ border-color:var(--env-accent); background:var(--env-bubble-user); color:#fff; font-weight:700; }

.env-topup-presets{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.env-topup-preset{
  padding:9px 4px; border-radius:10px; border:1.5px solid var(--env-border); background:var(--env-paper-2);
  color:var(--env-ink); font-size:0.7rem; font-family:inherit; cursor:pointer; font-weight:700;
  direction:ltr; line-height:1.3;
}
.env-topup-preset.active{ border-color:var(--env-accent); background:var(--env-bubble-user); color:#fff; }
.env-topup-input{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--env-border); background:var(--env-paper-2);
  color:var(--env-ink); font-size:0.95rem; font-family:inherit; text-align:center; direction:ltr; margin-bottom:6px;
  box-sizing:border-box;
}
.env-topup-err{ color:#A5342F; font-size:0.76rem; min-height:1.2em; margin-bottom:6px; }
.env-topup-wallet-opt{
  display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:10px;
  border:1.5px solid var(--env-border); background: var(--env-paper-2); margin-bottom:6px;
  font-size:0.8rem; color: var(--env-ink); cursor:pointer; line-height:1.6;
}
.env-topup-wallet-opt input{ margin-top:2px; flex-shrink:0; accent-color: var(--env-accent); }
.env-topup-wallet-note{ font-size:0.72rem; color: var(--env-ink-muted); margin:-2px 0 8px 2px; line-height:1.6; }
.env-topup-wallet-note.err{ color:#A5342F; }
.env-topup-submit{
  width:100%; padding:12px; border-radius:10px; border:none; cursor:pointer;
  background: var(--env-bubble-user); color:#fff; font-weight:700; font-size:0.9rem; font-family:inherit;
}

.env-price-list{ display:flex; flex-direction:column; gap:8px; max-height:55vh; overflow-y:auto; }
.env-price-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--env-border); background:var(--env-paper-2);
}
.env-price-row.current{ border-color:var(--env-accent); background:color-mix(in srgb, var(--env-accent) 8%, var(--env-paper-2)); }
.env-price-row-left{ min-width:0; }
.env-price-row-name{ font-size:0.82rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.env-price-row-id{ font-size:0.66rem; color:var(--env-ink-muted); font-family: var(--font-mono, monospace); direction:ltr; text-align:start; }
.env-price-row-right{ flex-shrink:0; text-align:end; }
.env-price-row-line{ font-size:0.7rem; color:var(--env-ink-muted); font-family: var(--font-mono, monospace); white-space:nowrap; }
.env-price-row.current .env-price-row-line{ color:var(--env-accent-deep); font-weight:700; }

/* ── مُدالِ «ساختنِ پرسونای جدید» (۲۰۲۶-۰۹-۲۲) ────────────────────────────
   قبل از این، هیچ کدام از کلاس‌های pc-* استایل نداشتند — فرم با
   input/textarea/select و دکمهٔ .btn-primary خامِ سایتِ اصلی (که رنگِ
   برندِ صورتی/قرمز دارد، نه پالتِ گرم/تیرهٔ همین صفحه) رندر می‌شد؛ این
   بخش کل مُدال را با همان زبانِ طراحیِ env-modal هماهنگ می‌کند. */
.pc-modal-form .form-group{ margin-bottom:16px; }
.pc-modal-form label{ display:block; font-size:0.8rem; font-weight:700; margin-bottom:7px; color:var(--env-ink); }
.pc-modal-form input[type="text"],
.pc-modal-form textarea,
.pc-modal-form select{
  width:100%; box-sizing:border-box; padding:11px 13px; border-radius:10px;
  border:1.5px solid var(--env-border); background:var(--env-paper-2); color:var(--env-ink);
  font-family:inherit; font-size:0.86rem; line-height:1.6; transition:border-color .15s;
}
.pc-modal-form input[type="text"]:focus,
.pc-modal-form textarea:focus,
.pc-modal-form select:focus{ outline:none; border-color:var(--env-accent); }
.pc-modal-form textarea{ resize:vertical; min-height:70px; }
.pc-modal-form .hint{ font-size:0.72rem; color:var(--env-ink-muted); margin:6px 2px 0; line-height:1.7; }

.pc-preview-mini{
  display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:18px; border-radius:14px;
  background: var(--env-paper-2); border:1px solid var(--env-border);
}
.pc-preview-avatar{
  width:52px; height:52px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; overflow:hidden; color:#fff;
}
.pc-preview-avatar img{ width:100%; height:100%; object-fit:cover; }
.pc-preview-mini b{ display:block; font-size:0.92rem; color:var(--env-ink); margin-bottom:2px; }
.pc-preview-mini p{ margin:0; font-size:0.76rem; color:var(--env-ink-muted); line-height:1.6; }

.pc-avatar-tabs{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.pc-avatar-tab{
  padding:7px 14px; border-radius:999px; border:1.5px solid var(--env-border); background:var(--env-paper-2);
  color:var(--env-ink-muted); font-family:inherit; font-size:0.78rem; cursor:pointer; transition:.15s;
}
.pc-avatar-tab.active{ border-color:var(--env-accent); background:var(--env-bubble-user); color:#fff; font-weight:700; }
.pc-avatar-panel[hidden]{ display:none; }
.pc-preset-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(46px, 1fr)); gap:8px; }
.pc-preset{
  width:46px; height:46px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:.15s;
}
.pc-preset.active{ border-color:var(--env-ink); transform:scale(1.08); }
.pc-avatar-upload-drop{
  display:flex; align-items:center; justify-content:center; padding:22px; border-radius:12px;
  border:1.5px dashed var(--env-border); color:var(--env-ink-muted); font-size:0.82rem; cursor:pointer;
  text-align:center; transition:border-color .15s;
}
.pc-avatar-upload-drop:hover{ border-color:var(--env-accent); color:var(--env-ink); }
.pc-ai-avatar-row{ display:flex; gap:8px; }
.pc-ai-avatar-row input{ flex:1; }
.pc-ai-avatar-hint{ font-size:0.72rem; color:var(--env-ink-muted); margin:8px 2px 0; line-height:1.7; }

.pc-model-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.pc-model-card{
  padding:12px 14px; border-radius:12px; border:1.5px solid var(--env-border); background:var(--env-paper-2);
  cursor:pointer; transition:.15s;
}
.pc-model-card b{ display:block; font-size:0.84rem; color:var(--env-ink); margin-bottom:4px; }
.pc-model-card span{ display:block; font-size:0.72rem; color:var(--env-ink-muted); line-height:1.6; }
.pc-model-card.active{ border-color:var(--env-accent); background:color-mix(in srgb, var(--env-accent) 8%, var(--env-paper-2)); }

.pc-switch-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pc-switch{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.pc-switch input{ opacity:0; width:0; height:0; }
.pc-switch .track{
  position:absolute; inset:0; background:var(--env-border); border-radius:999px; cursor:pointer; transition:.15s;
}
.pc-switch .track::before{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff;
  top:3px; inset-inline-start:3px; transition:.15s;
}
.pc-switch input:checked + .track{ background:var(--env-accent); }
.pc-switch input:checked + .track::before{ transform:translateX(-18px); }
[dir="ltr"] .pc-switch input:checked + .track::before{ transform:translateX(18px); }

.pc-create-error{
  color:#A5342F; background:color-mix(in srgb, #A5342F 10%, transparent); border:1px solid color-mix(in srgb, #A5342F 30%, transparent);
  padding:9px 12px; border-radius:10px; font-size:0.78rem; margin-bottom:14px;
}
.pc-create-error[hidden]{ display:none; }

/* دکمه‌های .btn-primary/.btn-outline اصلیِ سایت رنگِ برندِ صورتی دارند —
   داخلِ این مُدالِ تیره جایگزین می‌شوند تا با پالتِ خانوادهٔ فعلی هماهنگ باشند. */
.pc-modal-form .btn-primary{
  background: var(--env-bubble-user); border:none; color:#fff; box-shadow:none;
}
.pc-modal-form .btn-primary:hover{ box-shadow:0 12px 28px -12px color-mix(in srgb, var(--env-accent) 60%, transparent); transform:translateY(-1px); }
.pc-modal-form .btn-outline{
  background:transparent; border:1.5px solid var(--env-border); color:var(--env-ink);
}
.pc-modal-form .btn-outline:hover{ background:var(--env-hover); }

/* مودالِ «کدنویسیِ پیشرفته» (chat.html → buildCodingAgentModal) از کلاس‌های
   عمومیِ سایت (static/css/style.css → .ca-*) استفاده می‌کند که رنگ‌بندیِ
   روشن/برندِ صورتی دارند — همان override‌ای که .pc-modal-form بالا برایِ
   دکمه‌ها انجام می‌دهد، این‌جا هم برایِ کارت‌ها/جعبهٔ قیمت لازم است. */
.env-ca-modal .btn-primary{ background: var(--env-bubble-user); border:none; color:#fff; box-shadow:none; }
.env-ca-modal .btn-primary:hover{ box-shadow:0 12px 28px -12px color-mix(in srgb, var(--env-accent) 60%, transparent); transform:translateY(-1px); }
.env-ca-modal .btn-primary[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.env-ca-modal .btn-outline{ background:transparent; border:1.5px solid var(--env-border); color:var(--env-ink); }
.env-ca-modal .btn-outline:hover{ background:var(--env-hover); }
.env-ca-modal h4{ font-size:0.92rem; margin:0 0 8px; color: var(--env-ink); }
.env-ca-modal .ca-tool-card{
  border-color: var(--env-border); color: var(--env-ink); background: var(--env-paper-2);
}
.env-ca-modal .ca-tool-card:hover{ border-color: var(--env-accent); }
.env-ca-modal .ca-tool-card.active{ border-color: var(--env-accent); background: color-mix(in srgb, var(--env-accent) 10%, transparent); color: var(--env-accent); }
.env-ca-modal .ca-price-box{ background: var(--env-paper-2); border-color: var(--env-border); color: var(--env-ink); }
.env-ca-modal .ca-price-box b{ color: var(--env-accent); }
.env-ca-modal input[type="text"]{
  width:100%; padding:9px 12px; border-radius:9px; border:1.5px solid var(--env-border);
  background: var(--env-paper-2); color: var(--env-ink); font-family:inherit; box-sizing:border-box;
}
.env-ca-modal label{ display:block; font-size:0.78rem; color: var(--env-ink-muted); margin-bottom:4px; }
.env-ca-modal .ca-step + .ca-step{ margin-top:4px; }
@media (max-width:600px){
  .pc-avatar-tabs{ justify-content:center; }
  .pc-model-grid{ grid-template-columns:1fr; }
}

/* پردهٔ تیرهٔ پشتِ سایدبار در حالت موبایل — با کلیک بسته می‌شود؛ بدون این،
   سایدبارِ بازشده فقط روی محتوا شناور به‌نظر می‌رسید، بدون هیچ جدایی بصری. */
.env-side-backdrop{
  display:none; position:fixed; inset:0; z-index:4; background:rgba(0,0,0,.4);
}
.env-side-backdrop.open{ display:block; }

@media (max-width: 820px){
  /* env-side با inset-inline-start:0 در سایت RTL یعنی «چسبیده به لبهٔ راست».
     transform (برخلاف inset منطقی) همیشه فیزیکی/جهت‌ثابت است — یعنی برای
     پنهان‌کردنِ کامل یک پنلِ چسبیده به راست، باید آن را بیشتر به راست برد
     (translateX مثبت)، نه منفی. قبلاً اینجا یک override با علامتِ برعکس
     برای [dir="rtl"] بود که فقط بخشی از سایدبار را می‌برد بیرون، نه کامل
     — همان چیزی که در حالت بسته هنوز کمی از سایدبار دیده می‌شد. */
  .env-side{
    position:fixed; inset-inline-start:0; top:0; bottom:0; z-index:5;
    width:80vw; max-width:290px; transform:translateX(110%); transition:transform .22s ease;
    box-shadow: 0 0 28px rgba(0,0,0,.3);
  }
  .env-side.open{ transform:none; }
  .env-msg{ max-width:92%; }

  /* نوار بالا از همان دو گروهِ صریحِ HTML (env-topbar-id / env-topbar-ctrl)
     دو ردیفِ کامل و جدا می‌سازد — به‌جای تکیه بر flex-wrap/order که
     نمی‌شد رفتارش را روی صفحه‌های باریک تضمین کرد. */
  .env-topbar{ flex-direction:column; align-items:stretch; gap:8px; padding:10px 12px; }
  .env-topbar-id{ gap:8px; }
  .env-topbar h1{ font-size:0.86rem; }
  .env-sub-badge{ font-size:0.64rem; padding:3px 8px; flex-shrink:0; }
  .env-topbar-ctrl{ gap:8px; }
  .env-model-btn{ flex:1 1 auto; min-width:0; max-width:none; }
  .env-balance-chip{ flex-shrink:0; font-size:0.72rem; padding:5px 10px; }
  .env-topup-btn{ flex-shrink:0; font-size:0.72rem; padding:5px 10px; }

  .env-messages{ padding:14px 0 8px; }
  .env-messages-inner{ padding:0 12px; gap:14px; }
  .env-composer-wrap{ padding:10px 12px 14px; }
  /* اندازهٔ لمسِ دکمه‌های ارسال/پیوست روی موبایل — نسخهٔ دسکتاپ (36px) از
     حداقلِ توصیه‌شدهٔ اپل/اندروید (۴۴px) کوچک‌تر بود و لمسِ دقیق را سخت
     می‌کرد؛ همین‌طور دکمهٔ سه‌نقطهٔ هر گفتگو. */
  .env-send-btn, .env-attach-btn{ width:44px; height:44px; font-size:1.15rem; }
  .env-send-btn.env-send-btn--wide{ width:auto; height:44px; padding:0 16px; font-size:0.78rem; }
  .env-convo-menu-btn{ width:34px; height:34px; opacity:1; }
  .env-sub-gate{ padding:16px; }
  .env-sub-gate-inner h2{ font-size:0.95rem; }
  .env-sub-gate--inline{ padding:12px; }
  .env-sub-code-input{ min-width:120px; }
  .env-renew-row{ gap:8px; }
  .env-composer-wrap--gated{ padding: 4px 12px 8px; }
  .env-composer.env-composer--gated{ padding:3px 6px; }
  .env-composer.env-composer--gated textarea{ font-size:0.72rem; }
  .env-composer.env-composer--gated .env-attach-btn,
  .env-composer.env-composer--gated .env-send-btn{ width:30px; height:30px; font-size:0.85rem; }

  /* پلن‌ها روی موبایل: به‌جای گرید فشرده، یک لیست عمودی — هر ردیف یک دوره،
     مدت سمت شروع و قیمت سمت پایان (مثل یک لیست قیمت معمولی)، تا هیچ متنی
     در یک باکس کوچک له/سرریز نشود. */
  .env-sub-plans{ display:flex; flex-direction:column; gap:8px; }
  .env-sub-plan-btn{
    flex-direction:row; align-items:center; justify-content:space-between;
    text-align:start; padding:12px 14px;
  }
  .env-sub-plan-price-group{ align-items:flex-end; }

  .env-modal-backdrop{ padding:0; align-items:flex-end; }
  .env-modal{ max-width:none; width:100%; max-height:88vh; border-radius:18px 18px 0 0; animation: env-modal-in-mobile .2s ease; }
  .env-modal.wide, .env-modal:has(.env-modal-content--wide){ max-width:none; }
}
@keyframes env-modal-in-mobile{ from{ transform:translateY(100%);} to{ transform:none;} }

@media (max-width: 420px){
  .env-balance-chip, .env-topup-btn{ font-size:0.68rem; padding:5px 9px; }
  .env-sub-plan-btn{ padding:10px 12px; }
  .env-sub-plan-dur{ font-size:0.76rem; }
  .env-sub-plan-price{ font-size:0.84rem; }
  .env-topup-presets{ grid-template-columns:repeat(2,1fr); }
  .env-price-row{ flex-direction:column; align-items:stretch; gap:6px; }
  .env-price-row-right{ text-align:start; display:flex; gap:10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   گالریِ صداها («صدای نابغه») — M35c
   ═══════════════════════════════════════════════════════════════════════ */

/* بنرِ تمام‌عرضِ launch — زیرِ نوار بالا، همیشه دیده می‌شود (چه مشترک باشی چه نه) */
.vg-banner{
  flex-shrink:0; display:flex; align-items:center; gap:12px; width:100%; border:none; cursor:pointer;
  padding:11px 18px; background:linear-gradient(90deg,
    color-mix(in srgb, var(--env-accent) 16%, var(--env-paper)),
    color-mix(in srgb, var(--env-accent-deep) 10%, var(--env-paper)));
  border-bottom:1px solid var(--env-border); text-align:start; position:relative; overflow:hidden;
}
.vg-banner::after{
  content:''; position:absolute; inset-block:0; inset-inline-start:-40%; width:35%;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--env-accent) 22%, transparent), transparent);
  animation: vg-banner-sheen 3.2s ease-in-out infinite;
}
@keyframes vg-banner-sheen{ 0%{ inset-inline-start:-40%; } 60%,100%{ inset-inline-start:110%; } }
.vg-banner-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--env-accent), var(--env-accent-deep)); color:#fff;
  box-shadow:0 4px 12px color-mix(in srgb, var(--env-accent) 45%, transparent); z-index:1;
}
.vg-banner-icon svg{ width:18px; height:18px; }
.vg-banner-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; z-index:1; }
.vg-banner-text b{ font-size:0.86rem; color: var(--env-ink); }
.vg-banner-text span{ font-size:0.72rem; color: var(--env-ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vg-banner-arrow{ flex-shrink:0; font-size:1.2rem; color: var(--env-accent); z-index:1; }
.vg-banner:hover .vg-banner-icon{ transform:scale(1.08); }

/* بنرِ «بازگشت به استودیوی نابغه» — بالایِ همهٔ صفحاتِ عضوِ یک استودیو (نه
   رنگِ خودِ family، یک قرمزِ ثابت/برندِ سایت تا همیشه قابلِ‌تشخیص باشد) —
   کلیک می‌کند به صفحهٔ اصلیِ استودیوی نابغه (nabeghe_env.studio_hub)، نه
   صفحهٔ قدیمیِ انتخابِ حالتِ همان استودیو (۱۴۰۵/۰۷/۱۱، اصلاحِ کاربر —
   قبلاً گمراه‌کننده بود: اسمش «استودیو» بود و به یک زیرمجموعه می‌رفت). */
.studio-banner{
  flex-shrink:0; display:flex; align-items:center; gap:12px; width:100%; border:none; cursor:pointer;
  padding:11px 18px; text-decoration:none;
  background:linear-gradient(90deg, color-mix(in srgb, var(--ruby, #C81243) 18%, var(--env-paper)),
    color-mix(in srgb, var(--ruby-deep, #7E0B31) 10%, var(--env-paper)));
  border-bottom:1px solid var(--env-border); text-align:start; position:relative; overflow:hidden;
  transition: filter .12s;
}
.studio-banner:hover{ filter:brightness(1.06); }
.studio-banner-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--ruby-light, #FF4368), var(--ruby-deep, #7E0B31)); color:#fff;
  box-shadow:0 4px 12px color-mix(in srgb, var(--ruby, #C81243) 45%, transparent); z-index:1;
}
.studio-banner-icon svg{ width:18px; height:18px; }
.studio-banner-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; z-index:1; }
.studio-banner-text b{ font-size:0.86rem; color: var(--env-ink); }
.studio-banner-text span{ font-size:0.72rem; color: var(--env-ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-banner-arrow{ flex-shrink:0; font-size:1.2rem; color: var(--ruby, #C81243); z-index:1; }

/* CTA داخلِ envSubGate */
.env-gallery-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; max-width:420px; margin:14px auto 18px; border:none; border-radius:16px;
  padding:14px 18px; font-size:0.86rem; font-weight:700; cursor:pointer; color:#fff;
  background:linear-gradient(120deg, var(--env-accent), var(--env-accent-deep) 60%, var(--env-accent));
  background-size:200% 100%; box-shadow:0 10px 26px color-mix(in srgb, var(--env-accent) 38%, transparent);
  animation: vg-cta-sheen 4s ease-in-out infinite;
  transition:transform .15s ease;
}
.env-gallery-cta svg{ width:18px; height:18px; flex-shrink:0; }
.env-gallery-cta:hover{ transform:translateY(-2px) scale(1.01); }
@keyframes vg-cta-sheen{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* بک‌دراپ + پنل اصلی */
.vg-backdrop{
  position:fixed; inset:0; z-index:70; display:none; align-items:flex-start; justify-content:center;
  padding:min(5vh,40px) 16px; overflow-y:auto;
  background:radial-gradient(ellipse at 50% 0%, rgba(30,20,15,.55), rgba(0,0,0,.72));
  backdrop-filter: blur(6px);
}
.vg-backdrop:not([hidden]){ display:flex; }
.vg-panel{
  position:relative; width:100%; max-width:1080px; background:var(--env-paper);
  border:1px solid var(--env-border); border-radius:26px; padding:30px clamp(16px,4vw,40px) 34px;
  box-shadow:0 30px 90px rgba(0,0,0,.5); animation: vg-panel-in .25s cubic-bezier(.2,.8,.3,1);
  color:var(--env-ink);
}
@keyframes vg-panel-in{ from{ opacity:0; transform:translateY(24px) scale(.97); } to{ opacity:1; transform:none; } }
.vg-close{
  position:absolute; top:16px; inset-inline-end:16px; width:34px; height:34px; border-radius:50%;
  border:none; background:var(--env-paper-2); color:var(--env-ink-muted); font-size:1.2rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2;
}
.vg-close:hover{ background:var(--env-hover); color:var(--env-ink); }

/* هدر */
.vg-head{ text-align:center; max-width:560px; margin:0 auto 22px; }
.vg-head-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700; padding:5px 14px; border-radius:999px;
  background:linear-gradient(135deg, var(--env-accent), var(--env-accent-deep)); color:#fff; margin-bottom:10px;
  letter-spacing:.02em;
}
.vg-head-badge svg{ width:14px; height:14px; }
.vg-head h2{ margin:0 0 8px; font-size:1.5rem; font-weight:800; }
.vg-head p{ margin:0; color:var(--env-ink-muted); font-size:0.86rem; line-height:1.8; }

/* فیلتر جنسیت — مهم‌ترین فیلتر، به‌همین‌خاطر جدا و برجسته (نه یک چیپِ دیگر) */
.vg-gender-filters{
  display:flex; gap:2px; max-width:400px; margin:0 auto 14px; padding:4px;
  background:var(--env-paper-2); border:1px solid var(--env-border); border-radius:14px;
}
.vg-gfilter{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  border:none; background:transparent; color:var(--env-ink-muted); cursor:pointer;
  padding:9px 10px; border-radius:10px; font-size:0.82rem; font-weight:700; transition:all .15s ease;
}
.vg-gfilter .vg-gender-ic{ font-size:0.95rem; }
.vg-gfilter:hover{ color:var(--env-ink); }
.vg-gfilter.active{ background:var(--env-paper); color:var(--env-ink); box-shadow:0 3px 10px rgba(0,0,0,.12); }

/* فیلتر دسته‌بندی — ظریف‌تر، با یک نقطهٔ رنگی به‌جای ایموجی */
.vg-filters{
  display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-bottom:22px;
}
.vg-filter{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--env-border); background:transparent; color:var(--env-ink-muted);
  border-radius:999px; padding:6px 14px; font-size:0.74rem; font-weight:600; cursor:pointer;
  transition:all .15s ease; white-space:nowrap;
}
.vg-filter-dot{ width:7px; height:7px; border-radius:50%; background:var(--vg-accent, var(--env-ink-muted)); flex-shrink:0; }
.vg-filter[data-cat="all"] .vg-filter-dot{ display:none; }
.vg-filter:hover{ border-color:color-mix(in srgb, var(--vg-accent, var(--env-accent)) 55%, var(--env-border)); color:var(--env-ink); }
.vg-filter.active{
  background:var(--env-paper-2); border-color:var(--vg-accent, var(--env-accent)); color:var(--env-ink);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--vg-accent, var(--env-accent)) 30%, transparent) inset;
}

/* فهرستِ جمع‌وجورِ صداها — ردیفی، نه کارت‌های بزرگ */
.vg-grid{
  display:flex; flex-direction:column; gap:6px;
  max-height:60vh; overflow-y:auto; padding:4px 2px 8px;
}
.vg-row{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:14px;
  border:1px solid var(--env-border); background:var(--env-paper);
  transition:background .15s ease, border-color .15s ease;
}
.vg-row:hover{ background:var(--env-paper-2); border-color:color-mix(in srgb, var(--vg-accent) 35%, var(--env-border)); }
.vg-row[hidden]{ display:none; }

/* دکمهٔ پخش — آیکنِ ثابت (نه ایموجی، نه hover-reveal)، با یک حلقهٔ ظریف دور خودش */
.vg-row-play{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1.5px solid color-mix(in srgb, var(--vg-accent) 45%, var(--env-border));
  background:transparent; color:var(--vg-accent); display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.vg-row-play:hover{ background:color-mix(in srgb, var(--vg-accent) 14%, transparent); border-color:var(--vg-accent); }
.vg-row-play.playing{ background:var(--vg-accent); color:#fff; border-color:var(--vg-accent); }
.vg-ic{ width:19px; height:19px; fill:currentColor; }

.vg-row-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; text-align:start; }
.vg-row-top{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.vg-row-gender{ display:inline-flex; color:var(--env-ink-muted); }
.vg-gender-ic{ font-size:0.82rem; line-height:1; }
.vg-row-persona{ font-size:0.86rem; font-weight:800; color:var(--env-ink); }
.vg-row-tagline{
  font-size:0.72rem; color:var(--env-ink-muted); line-height:1.5; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

.vg-row-pick{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; border:1px solid var(--env-border);
  background:transparent; color:var(--env-ink-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.vg-row-pick svg{ width:16px; height:16px; fill:currentColor; }
.vg-row-pick:hover{ border-color:var(--vg-accent); color:var(--vg-accent); }
.vg-row-pick.picked{ background:#1a9c82; border-color:#1a9c82; color:#fff; }

@media (max-width: 620px){
  .vg-panel{ padding:24px 14px 26px; border-radius:22px 22px 0 0; }
  .vg-backdrop{ align-items:flex-end; padding:0; }
  .vg-head h2{ font-size:1.25rem; }
  .vg-grid{ max-height:64vh; }
  .vg-row{ padding:8px 9px; gap:9px; }
  .vg-row-tagline{ display:none; }
  .vg-banner{ padding:9px 12px; gap:9px; }
  .vg-banner-icon{ width:32px; height:32px; }
  .vg-banner-icon svg{ width:15px; height:15px; }
  .vg-banner-text b{ font-size:0.78rem; }
  .vg-banner-text span{ font-size:0.66rem; }
}

/* ── دستیار شخصی — گالریِ انتخاب/ساختِ پرسونا، داخلِ خودِ محیط هوشمند
   (۲۰۲۶-۰۹-۲۱) — قبل‌تر «+ ساختن پرسونای جدید» کاربر را از این فضای تیره به
   یک صفحهٔ معمولیِ سایت می‌برد؛ الان همه‌چیز همین‌جا، در همین ظاهر، اتفاق
   می‌افتد (شبکه‌ای جمع‌وجور از پرسوناهای موجود + یک مودال برای ساختن). ── */
.env-persona-picker{ flex:1; overflow-y:auto; padding: 28px 22px 20px; }
.env-persona-picker-head{ max-width:760px; margin:0 auto 24px; text-align:center; }
.env-persona-picker-eyebrow{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
  background: color-mix(in srgb, var(--env-family-accent) 16%, transparent);
  color: var(--env-family-accent); font-weight:800; font-size:0.72rem; margin-bottom:10px;
}
.env-persona-picker-head h2{ margin:0 0 8px; font-size:1.2rem; color: var(--env-ink); }
.env-persona-picker-head p{ margin:0; color: var(--env-ink-muted); font-size:0.86rem; line-height:1.8; }
.env-persona-features{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px;
}
.env-persona-feature{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  background: var(--env-paper-2); border:1px solid var(--env-border); color: var(--env-ink-muted);
  font-size:0.72rem; line-height:1.5;
}
@media (max-width:640px){
  .env-persona-feature{ width:100%; justify-content:flex-start; text-align:right; }
}
.env-persona-card--roundtable{
  border-style:solid; border-color: color-mix(in srgb, var(--env-family-accent) 40%, var(--env-border));
  background: color-mix(in srgb, var(--env-family-accent) 8%, var(--env-paper-2)); font-weight:800;
  color: var(--env-family-accent);
}
.env-persona-card--roundtable:hover{ border-color: var(--env-family-accent); }
.env-persona-card--roundtable .env-persona-new-plus{ font-size:1.6rem; }
.env-persona-grid{
  max-width:900px; margin:0 auto; display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:14px;
}

/* صفحهٔ «استودیوی نابغه» (env_bp.studio_hub) — همان گالریِ picker بالا، فقط
   این‌بار شش بار پشتِ‌سرهم زیرِ یک سرتیترِ بخش (۱۴۰۵/۰۷/۱۰). */
.env-studiohub-section{ max-width:900px; margin:0 auto 32px; }
.env-studiohub-section-head{
  display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:10px;
  border-bottom:1px solid var(--env-border);
}
.env-studiohub-section-ico{
  flex-shrink:0; width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; background: color-mix(in srgb, var(--persona-accent) 18%, transparent);
}
.env-studiohub-section-text b{ display:block; font-size:0.96rem; color: var(--env-ink); }
.env-studiohub-section-text span{ font-size:0.78rem; color: var(--env-ink-muted); }
.env-studiohub-section--muted{ margin-top:6px; padding-top:22px; border-top:1px dashed var(--env-border); opacity:.9; }
.env-studiohub-section--muted .env-persona-grid{ max-width:280px; }
@media (max-width:640px){
  .env-studiohub-section{ margin-bottom:24px; }
  .env-studiohub-section-ico{ width:34px; height:34px; border-radius:10px; font-size:1.05rem; }
  .env-studiohub-section-text b{ font-size:0.86rem; }
  .env-studiohub-section-text span{ font-size:0.72rem; }
}
.env-persona-card, .env-persona-card--new{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background: var(--env-paper-2); border:1px solid var(--env-border); border-radius:16px;
  padding:22px 14px; text-decoration:none; color: var(--env-ink); cursor:pointer; min-height:150px;
  justify-content:center; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.env-persona-card:hover{
  transform: translateY(-4px); border-color: var(--persona-accent, var(--env-family-accent));
  box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--persona-accent, var(--env-family-accent)) 55%, transparent);
}
.env-persona-card--new{ border-style:dashed; color: var(--env-family-accent); font-weight:800; }
.env-persona-card--new:hover{ border-color: var(--env-family-accent); background: color-mix(in srgb, var(--env-family-accent) 6%, var(--env-paper-2)); }
.env-persona-new-plus{ font-size:2rem; line-height:1; }
.env-persona-avatar{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; overflow:hidden; flex-shrink:0;
  background: color-mix(in srgb, var(--persona-accent, var(--env-family-accent)) 18%, transparent);
}
.env-persona-avatar img{ width:100%; height:100%; object-fit:cover; }
.env-persona-card b{ font-size:0.9rem; }
.env-persona-tagline{ font-size:0.76rem; color: var(--env-ink-muted); line-height:1.6; }
.env-persona-public-badge{
  position:absolute; top:8px; inset-inline-start:8px; font-size:0.62rem; font-weight:700; padding:2px 8px;
  border-radius:999px; background: rgba(46,143,135,0.18); color:#4fd1c5;
}
/* «سایرِ محصولاتِ منتخب» — پایینِ صفحهٔ انتخابِ حالتِ هر استودیو، عمداً
   کوچک‌تر/کم‌رنگ‌تر از گالریِ اصلیِ همان استودیو (۱۴۰۵/۰۷/۰۳). */
.env-featured-section{ max-width:900px; margin:34px auto 0; padding-top:22px; border-top:1px dashed var(--env-border); }
.env-featured-head{ text-align:center; font-size:0.78rem; color: var(--env-ink-muted); font-weight:700; margin-bottom:14px; }
.env-featured-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
.env-featured-card{
  display:flex; align-items:center; gap:13px; text-decoration:none; color: var(--env-ink);
  background: var(--env-paper-2); border:1px solid var(--env-border); border-radius:14px;
  padding:16px 16px; transition: border-color .15s ease, transform .15s ease;
  /* بدونِ این، آیتمِ گرید به‌جایِ جمع‌شدن با track، به عرضِ محتوایِ
     نچسبیده (تگ‌لاینِ nowrap) بزرگ می‌شود و از قاب بیرون می‌زند — دقیقاً
     باگِ گزارش‌شدهٔ کاربر روی موبایل (۱۴۰۵/۰۷/۰۳). */
  min-width:0;
}
.env-featured-card:hover{ border-color: var(--persona-accent, var(--env-family-accent)); transform: translateY(-2px); }
.env-featured-ico{
  width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background: color-mix(in srgb, var(--persona-accent, var(--env-family-accent)) 16%, transparent);
  color: var(--persona-accent, var(--env-family-accent));
}
.env-featured-ico svg{ width:24px; height:24px; }
.env-featured-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.env-featured-body b{ font-size:0.92rem; }
.env-featured-tagline{ font-size:0.74rem; color: var(--env-ink-muted); line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:600px){
  .env-featured-grid{ grid-template-columns: 1fr; }
  .env-featured-body b{ font-size:0.82rem; }
  .env-featured-tagline{ white-space:normal; overflow:visible; text-overflow:clip; }
}

.env-persona-card-del{
  position:absolute; top:6px; inset-inline-end:6px; width:26px; height:26px; border-radius:50%;
  border:none; background: transparent; color: var(--env-ink-muted); font-size:0.85rem; cursor:pointer;
  opacity:0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.env-persona-card:hover .env-persona-card-del{ opacity:1; }
.env-persona-card-del:hover{ background: rgba(220,60,60,0.18); color:#ff6b6b; }
.env-persona-side-hint{ padding:14px 18px; font-size:0.78rem; color: var(--env-ink-muted); line-height:1.7; }
@media (max-width:600px){
  .env-persona-card-del{ opacity:1; }
  .env-persona-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
}

/* ── تحلیل‌گر ویدیوی نابغه (۲۰۲۶-۰۹-۲۲) ──────────────────────────────────── */
.env-video-composer{
  max-width:760px; margin:0 auto 8px; padding:14px; border-radius:14px;
  background: var(--env-paper-2); border:1px solid var(--env-border);
}
.env-video-composer[hidden]{ display:none; }
.env-video-idle{ display:flex; align-items:center; justify-content:center; }
.env-video-idle[hidden]{ display:none; }
.env-video-upload-btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:12px;
  border:1.5px dashed var(--env-border); background: var(--env-paper); color: var(--env-ink);
  font-size:0.85rem; cursor:pointer; transition: background .15s, border-color .15s;
}
.env-video-upload-btn:hover{ background: var(--env-hover); border-color: var(--env-accent); }
.env-video-uploading[hidden]{ display:none; }
.env-video-progress{
  height:8px; border-radius:999px; background: var(--env-border); overflow:hidden; margin-bottom:6px;
}
.env-video-progress-fill{ height:100%; width:0%; background: var(--env-family-accent); transition: width .2s ease; }
.env-video-progress-label{ font-size:0.76rem; color: var(--env-ink-muted); direction:ltr; display:block; text-align:center; }
.env-video-preview[hidden]{ display:none; }
.env-video-preview{ display:flex; align-items:center; gap:10px; }
.env-video-preview-icon{ font-size:1.6rem; flex-shrink:0; }
.env-video-preview-info{ flex:1; min-width:0; }
.env-video-preview-info b{ display:block; font-size:0.85rem; color: var(--env-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.env-video-preview-meta{ font-size:0.72rem; color: var(--env-ink-muted); }
@media (max-width: 640px){
  .env-video-upload-btn{ width:100%; justify-content:center; }
}

/* ── میزگرد (چندپرسونا، ۲۰۲۶-۰۹-۲۲) ───────────────────────────────────── */
.env-roundtable-form{ max-width:900px; margin:0 auto; }
.env-persona-grid--pick{ margin:0 0 20px; }
.env-persona-card--pick{ position:relative; }
.env-roundtable-check{ position:absolute; top:10px; inset-inline-start:10px; width:18px; height:18px; cursor:pointer; }
.env-persona-card--pick:has(.env-roundtable-check:checked){
  border-color: var(--persona-accent, var(--env-family-accent));
  background: color-mix(in srgb, var(--persona-accent, var(--env-family-accent)) 10%, var(--env-paper-2));
}
.env-roundtable-submit{
  display:block; margin:0 auto; padding:12px 28px; border-radius:12px; font-weight:800;
  background: var(--env-family-accent); color:#fff; border:none;
}
.env-roundtable-submit:disabled{ opacity:.45; cursor:default; }
.env-roundtable-hint{ max-width:600px; margin:0 auto; text-align:center; font-size:0.84rem; color: var(--env-ink-muted); line-height:1.8; }
.env-roundtable-hint a{ color: var(--env-family-accent); font-weight:700; }
.env-roundtable-speaker{
  display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:0.8rem; font-weight:700;
  color: var(--persona-accent, var(--env-family-accent));
}
.env-roundtable-speaker-avatar{
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; overflow:hidden; flex-shrink:0;
  background: color-mix(in srgb, var(--persona-accent, var(--env-family-accent)) 20%, transparent);
}
.env-roundtable-speaker-avatar img{ width:100%; height:100%; object-fit:cover; }

/* ── «عکست رو بذار جای هر چیزی» — درونِ خودِ محیط هوشمند، جایِ کادرِ متنی ── */
.fs-inline-boxes{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.fs-plus{ font-size:1.3rem; color: var(--env-ink-muted); font-weight:900; }
.fs-box{
  position:relative; border-radius:16px; border:2px dashed var(--env-border); background: var(--env-paper-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden;
  transition: border-color .15s, background .15s;
}
.fs-box--sm{ width:150px; height:150px; }
.fs-box:hover{ border-color: var(--env-family-accent); background: color-mix(in srgb, var(--env-family-accent) 6%, var(--env-paper-2)); }
.fs-box.fs-drag{ border-color: var(--env-family-accent); background: color-mix(in srgb, var(--env-family-accent) 12%, var(--env-paper-2)); }
.fs-box-inner{ text-align:center; padding:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; }
.fs-box-inner[hidden]{ display:none; }
.fs-box-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: var(--env-family-accent); background: color-mix(in srgb, var(--env-family-accent) 12%, transparent);
}
.fs-box-icon svg{ width:19px; height:19px; }
.fs-box-inner b{ font-size:0.74rem; font-weight:600; color: var(--env-ink); }
.fs-box-preview{ width:100%; height:100%; object-fit:cover; display:block; }
.fs-box-preview[hidden]{ display:none; }
.fs-box-remove{
  position:absolute; top:6px; left:6px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,0.55); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.fs-box-remove svg{ width:11px; height:11px; }
.fs-box-remove[hidden]{ display:none; }
.fs-gallery{ margin-bottom:14px; }
.fs-gallery-label{ text-align:center; font-size:0.76rem; color: var(--env-ink-muted); margin-bottom:10px; }
.fs-gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; max-width:560px; margin:0 auto; }
.fs-gallery-item{
  border:2px solid transparent; border-radius:12px; overflow:hidden; cursor:pointer; background:none; padding:0;
  display:flex; flex-direction:column; transition: border-color .15s, transform .15s;
}
.fs-gallery-item:hover{ transform:translateY(-2px); }
.fs-gallery-item.fs-selected{ border-color: var(--env-family-accent); }
.fs-gallery-item img{ width:100%; aspect-ratio:1; object-fit:cover; }
.fs-gallery-item span{ font-size:0.62rem; text-align:center; padding:4px 2px; color: var(--env-ink-muted); }
.env-modal-content--fs-gallery .fs-gallery-grid{ max-width:none; grid-template-columns:repeat(3, 1fr); }
.fs-choice-grid{ display:flex; gap:12px; margin-top:16px; }
.fs-choice-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 12px;
  border-radius:14px; border:1.5px solid var(--env-border); background: var(--env-paper-2); cursor:pointer;
  transition: border-color .15s, transform .15s;
}
.fs-choice-btn:hover{ border-color: var(--env-family-accent); transform:translateY(-2px); }
.fs-choice-icon{ font-size:1.8rem; }
.fs-choice-btn b{ font-size:0.82rem; }

/* ── رزومه‌ساز نابغه (فازِ ۲، ۱۴۰۵/۰۷/۰۲) — دیگر فرمِ همیشه‌بازِ روی
   composer-wrap نیست: فقط یک FAB («+») است که یک Modal (زیرساختِ عمومیِ
   openModal/closeModal، همان الگویِ envPersonaCreateTpl) باز می‌کند. چون
   .env-modal خودش max-height:85vh;overflow-y:auto دارد، دیگر نیازی به
   محاسبهٔ دستیِ ارتفاع (نسخهٔ قبلی) نیست. */
.rz-fab-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 0; }
.rz-fab{
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background: linear-gradient(135deg, var(--env-family-accent), var(--env-family-accent-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition: transform .15s;
}
.rz-fab:hover{ transform:translateY(-2px); }
.rz-fab svg{ width:26px; height:26px; }
.rz-fab-label{ font-size:0.76rem; color: var(--env-ink-muted); font-weight:600; }
/* مودالِ رزومه‌ساز چندستونه است (row-2/row-3) — نسخهٔ wide (۵۶۰px) عمومی
   کمی تنگ است؛ این قانون با ترتیبِ آمدنش بعد از قانونِ wide روی آن غالب می‌شود. */
.env-modal:has(.rz-modal){ max-width:640px; }
.rz-modal h3{ margin-bottom:14px; }
.rz-outer-tabs{ display:flex; gap:18px; border-bottom:1.5px solid var(--env-border); margin-bottom:16px; }
.rz-outer-tab{
  border:none; background:none; color: var(--env-ink-muted); font-size:0.85rem; font-weight:700;
  padding:0 2px 10px; cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1.5px;
  transition: color .15s, border-color .15s;
}
.rz-outer-tab.active{ color: var(--env-family-accent); border-color: var(--env-family-accent); }
.rz-panel:not([hidden]){ display:flex; flex-direction:column; gap:14px; }
/* :not([hidden]) لازم است — #rzBulkMode همین کلاس را دارد و با JS مخفی/آشکار
   می‌شود (تبِ یک‌جا‌بچسبونم/پرکردنِ فرم)؛ بدونش همون تلهٔ specificity رخ می‌دهد.
   هر .rz-section یک «کارت» است (بردر+سایه‌ی ظریف) — گروه‌بندیِ بصریِ
   بخش‌های فرم، به‌جایِ دیوارِ یکدستِ فیلدهای هم‌رنگِ نسخهٔ قبلی. */
.rz-section:not([hidden]){
  display:flex; flex-direction:column; gap:10px; background: var(--env-paper);
  border:1px solid var(--env-border); border-radius:14px; padding:14px 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.rz-section-head{ display:flex; align-items:center; justify-content:space-between; }
.rz-section-head b{ font-size:0.82rem; color: var(--env-ink); font-weight:800; }
.rz-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rz-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
/* فیلد+لیبل — لیبلِ کوچیکِ ثابت بالایِ هر ورودی (به‌جایِ تکیه بر placeholder
   که با شروعِ تایپ ناپدید می‌شود)، ظاهرِ فرم را حرفه‌ای‌تر می‌کند. */
.rz-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.rz-label{ font-size:0.7rem; color: var(--env-ink-muted); font-weight:600; padding-inline-start:2px; }
.rz-input, .rz-textarea{
  width:100%; box-sizing:border-box; border:1.5px solid var(--env-border); border-radius:10px;
  background: var(--env-paper-2); color: var(--env-ink); font-family:inherit; font-size:0.8rem;
  padding:9px 11px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.rz-textarea{ resize:vertical; min-height:38px; }
.rz-textarea--sm{ min-height:34px; font-size:0.76rem; }
.rz-input:hover, .rz-textarea:hover{ border-color: color-mix(in srgb, var(--env-family-accent) 35%, var(--env-border)); }
.rz-input:focus, .rz-textarea:focus{
  outline:none; border-color: var(--env-family-accent); background: var(--env-paper);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--env-family-accent) 16%, transparent);
}
/* دکمهٔ «افزودن» — زیرِ لیستِ ردیف‌ها (نه کنارِ عنوانِ بخش)، تمام‌عرض و
   نقطه‌چین: الگویِ رایجِ «افزودنِ آیتم» که هم واضح‌تره هم شیک‌تر. */
.rz-add-btn{
  width:100%; border:1.5px dashed var(--env-family-accent); color: var(--env-family-accent); background:none;
  border-radius:10px; padding:9px; font-size:0.78rem; font-weight:700; cursor:pointer;
  transition: background .15s, border-style .15s;
}
.rz-add-btn:hover{ background: color-mix(in srgb, var(--env-family-accent) 8%, transparent); border-style:solid; }
.rz-repeat-row{
  display:flex; flex-direction:column; gap:7px; padding:11px 11px 11px 13px; padding-inline-end:32px;
  border-radius:10px; border-inline-start:3px solid var(--env-family-accent);
  background: var(--env-paper-2); position:relative;
}
.rz-repeat-row + .rz-repeat-row{ margin-top:0; }
#rzExperienceRows, #rzEducationRows{ display:flex; flex-direction:column; gap:8px; }
.rz-row-remove{
  position:absolute; top:7px; inset-inline-end:7px; width:20px; height:20px; border-radius:50%;
  border:none; background: var(--env-paper); color: var(--env-ink-muted); cursor:pointer; font-size:0.85rem;
  line-height:1; display:flex; align-items:center; justify-content:center; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.rz-row-remove:hover{ color:#C0392B; }
/* pill-group — بازاستفاده‌شده برایِ سه انتخابگرِ تکی: طرح/تراکم/شکلِ عکس. */
.rz-pill-group{ display:flex; gap:7px; flex-wrap:wrap; }
.rz-pill-btn{
  border:1.5px solid var(--env-border); background: var(--env-paper-2); color: var(--env-ink);
  border-radius:9px; padding:7px 12px; font-size:0.76rem; cursor:pointer; transition: border-color .15s;
}
.rz-pill-btn.active{ border-color: var(--env-family-accent); color: var(--env-family-accent); font-weight:700; }
/* کشوییِ انتخابِ طرح (۱۳ تمپلیت) — سفارشی و مستقل از openModal عمومیِ
   صفحه (که تک‌لایه‌ست و بازکردنش فرمِ همین مودال را پاک می‌کرد). */
.rz-theme-dropdown{ position:relative; }
.rz-theme-dd-btn{
  width:100%; display:flex; align-items:center; gap:10px; border:1.5px solid var(--env-border);
  background: var(--env-paper-2); color: var(--env-ink); border-radius:10px; padding:8px 12px;
  font-size:0.8rem; cursor:pointer; text-align:start;
}
.rz-theme-dd-btn:hover{ border-color: color-mix(in srgb, var(--env-family-accent) 35%, var(--env-border)); }
.rz-theme-dd-btn span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rz-theme-dd-chevron{ width:16px; height:16px; flex-shrink:0; color: var(--env-ink-muted); }
.rz-theme-dd-thumb{
  width:28px; height:40px; object-fit:cover; border-radius:4px; flex-shrink:0; border:1px solid var(--env-border);
  background:#fff;
}
.rz-theme-dd-panel{
  position:absolute; z-index:20; top:calc(100% + 6px); inset-inline:0; max-height:280px; overflow-y:auto;
  background: var(--env-paper); border:1.5px solid var(--env-border); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); padding:6px;
}
.rz-theme-dd-row{
  display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:9px; cursor:pointer;
  transition: background .12s;
}
.rz-theme-dd-row:hover{ background: var(--env-hover); }
.rz-theme-dd-row.active{ background: color-mix(in srgb, var(--env-family-accent) 10%, transparent); }
.rz-theme-dd-name{ flex:1; min-width:0; font-size:0.78rem; color: var(--env-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rz-theme-dd-row.active .rz-theme-dd-name{ font-weight:700; color: var(--env-family-accent); }
.rz-theme-dd-preview{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: var(--env-ink-muted); transition: background .15s, color .15s;
}
.rz-theme-dd-preview:hover{ background: var(--env-hover); color: var(--env-family-accent); }
.rz-theme-dd-preview svg{ width:15px; height:15px; }
.rz-color-row{ display:flex; gap:10px; flex-wrap:wrap; }
.rz-color-swatch{
  width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
  background: var(--sw); box-shadow: inset 0 0 0 2px var(--env-paper);
  transition: transform .12s, border-color .12s;
}
.rz-color-swatch:hover{ transform:scale(1.08); }
.rz-color-swatch.active{ border-color: var(--env-ink); }
.rz-checkbox-row{
  display:flex; align-items:center; gap:8px; font-size:0.8rem; color: var(--env-ink); cursor:pointer;
}
.rz-checkbox-row input{ width:16px; height:16px; accent-color: var(--env-family-accent); cursor:pointer; }
.rz-submit-btn{ margin-top:18px; }
.rz-mode-toggle{ display:flex; gap:6px; background: var(--env-paper-2); border-radius:11px; padding:4px; flex-shrink:0; }
.rz-mode-btn{
  flex:1; border:none; background:none; color: var(--env-ink-muted); border-radius:8px;
  padding:7px 9px; font-size:0.76rem; font-weight:600; cursor:pointer; transition: background .15s, color .15s;
}
.rz-mode-btn.active{ background: var(--env-paper); color: var(--env-ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.rz-textarea--bulk{ min-height:160px; font-size:0.78rem; line-height:1.75; }

/* موبایل — طبقِ بازخوردِ واقعی، فیلدها روی گوشی خیلی بزرگ/کشیده بودند.
   راه‌حل فقط کوچیک‌کردنِ فونت/پدینگ نیست: نگه‌داشتنِ چیدمانِ چندستونه
   (به‌جایِ اینکه هر فیلد یک ردیفِ تمام‌عرضِ جدا بشود) خودِ «طولِ» هر فیلد را
   کوتاه‌تر می‌کند و فرم را متراکم‌تر/حرفه‌ای‌تر نشان می‌دهد. */
@media (max-width:600px){
  .rz-row-3{ grid-template-columns:1fr 1fr; }
  .rz-row-3 > *:last-child{ grid-column:1 / -1; }
  .rz-panel{ gap:10px; }
  .rz-section{ gap:7px; padding:10px 10px 12px; border-radius:12px; }
  .rz-row-2, .rz-row-3{ gap:6px; }
  .rz-field{ gap:3px; }
  .rz-label{ font-size:0.64rem; }
  .rz-input, .rz-textarea{ padding:7px 9px; font-size:0.72rem; border-radius:8px; }
  .rz-textarea{ min-height:32px; }
  .rz-textarea--sm{ min-height:28px; font-size:0.68rem; }
  .rz-textarea--bulk{ min-height:120px; }
  .rz-repeat-row{ padding:9px 9px 9px 11px; gap:5px; }
  #rzExperienceRows, #rzEducationRows{ gap:6px; }
  .rz-section-head b{ font-size:0.76rem; }
  .rz-add-btn{ padding:8px; font-size:0.72rem; }
  .rz-pill-btn{ padding:6px 10px; font-size:0.7rem; }
  .rz-color-swatch{ width:26px; height:26px; }
  .rz-fab{ width:52px; height:52px; }
  .rz-outer-tabs{ gap:12px; }
  .rz-outer-tab{ font-size:0.8rem; }
  .rz-mode-btn{ padding:6px 7px; font-size:0.72rem; }
}

/* ── پلیرِ زیرنویس‌دار (تحلیل‌گر ویدیو) — پخشِ زنده + آرشیوی ──────────────
   .rz-pill-group/.rz-pill-btn/.rz-color-row/.rz-color-swatch از بالا
   (رزومه‌ساز) بازاستفاده می‌شن؛ این‌جا فقط چیدمانِ خودِ پلیر/overlay/پنل. */
.env-vcap{ position:relative; max-width:480px; border-radius:14px; overflow:hidden; background:#000; }
.env-vcap video{ display:block; width:100%; max-height:70vh; border-radius:14px; }
.env-vcap-overlay{
  position:absolute; inset-inline:6%; bottom:9%; text-align:center; pointer-events:none;
  font-family:'Vazirmatn', sans-serif; font-size: var(--vcap-fs, 1.05rem); color: var(--vcap-color, #fff);
  line-height:1.5; border-radius:8px; word-break:break-word;
}
.env-vcap-gear{
  position:absolute; top:8px; inset-inline-start:8px; width:32px; height:32px; border-radius:50%;
  border:none; background:rgba(0,0,0,.5); color:#fff; font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:3; transition: background .15s;
}
.env-vcap-gear:hover{ background:rgba(0,0,0,.72); }
.env-vcap-panel{
  position:absolute; top:46px; inset-inline-start:8px; z-index:4; width:min(280px, calc(100% - 16px));
  background: var(--env-paper); border:1.5px solid var(--env-border); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.22); padding:12px;
}
/* :not([hidden]) لازم است — بدونش این قانون با specificityِ برابر، قانونِ
   پیش‌فرضِ مرورگر [hidden]{display:none} را می‌برد و پنل هیچ‌وقت واقعاً
   بسته نمی‌شود (باگِ گزارش‌شدهٔ کاربر، ۱۴۰۵/۰۷/۰۳ — دقیقاً همان دامِ
   .env-studio-nav-panel/.rz-panel که قبلاً برطرف شده بود). */
.env-vcap-panel:not([hidden]){ display:flex; flex-direction:column; gap:10px; }
.env-vcap-row{ display:flex; flex-direction:column; gap:6px; }
.env-vcap-row > b{ font-size:0.74rem; color: var(--env-ink-muted); font-weight:600; }
.env-vcap-select{
  width:100%; border:1.5px solid var(--env-border); background: var(--env-paper-2); color: var(--env-ink);
  border-radius:9px; padding:7px 9px; font-size:0.78rem; cursor:pointer;
}
/* دکمهٔ «دانلود با زیرنویسِ سوخته» — کنارِ دکمهٔ دانلودِ خامِ موجود (که
   .env-img-dl مطلق‌جای‌گذاری‌شده در گوشهٔ بالا-راست است)؛ همین کلاس را
   دارد ولی کمی به چپ جابه‌جا می‌شود تا رویِ هم نیفتند. */
.env-vcap-burn-btn{ inset-inline-end:48px; font-size:0.95rem; border:none; cursor:pointer; }
.env-vcap-burn-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.env-vcap-burn-spin{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation: env-vcap-spin .7s linear infinite;
}
@keyframes env-vcap-spin{ to { transform:rotate(360deg); } }
@media (max-width:600px){
  .env-vcap{ max-width:100%; }
  .env-vcap-panel{ width:min(240px, calc(100% - 16px)); padding:10px; }
}

/* ── استودیوی زیرنویس — پلیر + ویرایشگرِ حرفه‌ای (static/js/nabeghe_vcap.js، ۱۴۰۵/۰۷/۱۷) ── */
.vcs{ width:100%; max-width:760px; display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.vcs-screen{ position:relative; background:#000; border-radius:14px; overflow:hidden; max-width:520px; width:100%; align-self:center; }
.vcs-screen video{ display:block; width:100%; max-height:70vh; background:#000; }
.vcs-stage{ position:absolute; left:0; top:0; pointer-events:none; overflow:hidden; }
.vcs-line{
  position:absolute; left:50%; text-align:center; pointer-events:auto; cursor:grab; touch-action:none;
  line-height:1.3; white-space:pre-line; word-break:break-word;
}
.vcs-line.dragging{ cursor:grabbing; outline:1.5px dashed rgba(255,255,255,.7); outline-offset:4px; border-radius:4px; }
.vcs-line-text{ paint-order:stroke fill; -webkit-box-decoration-break:clone; box-decoration-break:clone; border-radius:.18em; }
.vcs-toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.vcs-btn{
  display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--env-border); background:var(--env-paper-2);
  color:var(--env-ink); border-radius:10px; padding:8px 12px; font-size:.8rem; font-family:inherit; cursor:pointer;
  transition:border-color .15s, background .15s; white-space:nowrap; text-decoration:none;
}
.vcs-btn:hover{ border-color:color-mix(in srgb, var(--env-family-accent) 45%, var(--env-border)); }
.vcs-btn.active{ border-color:var(--env-family-accent); color:var(--env-family-accent); font-weight:700; }
.vcs-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.vcs-btn-primary{ background:var(--env-family-accent); border-color:var(--env-family-accent); color:#fff; font-weight:700; }
.vcs-btn-primary:hover{ background:var(--env-family-accent-deep, var(--env-family-accent)); }
.vcs-btn-primary.busy{ opacity:.75; }
.vcs-btn-sm{ padding:6px 10px; font-size:.74rem; }
.vcs-btn-ghost{ background:none; }
.vcs-btn-save.dirty{ background:var(--env-family-accent); border-color:var(--env-family-accent); color:#fff; font-weight:700; }
.vcs-select, .vcs-input{
  border:1.5px solid var(--env-border); background:var(--env-paper-2); color:var(--env-ink); border-radius:10px;
  padding:7px 10px; font-size:.78rem; font-family:inherit;
}
.vcs-input-num{ width:80px; }
.vcs-more{ position:relative; }
.vcs-menu{
  position:absolute; z-index:30; top:calc(100% + 6px); inset-inline-end:0; min-width:220px; background:var(--env-paper);
  border:1.5px solid var(--env-border); border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.16); padding:6px;
}
.vcs-menu:not([hidden]){ display:flex; flex-direction:column; }
.vcs-menu-item{
  text-align:start; background:none; border:none; padding:9px 10px; border-radius:8px; font-size:.8rem; color:var(--env-ink);
  cursor:pointer; text-decoration:none; font-family:inherit;
}
.vcs-menu-item:hover{ background:var(--env-hover); }
.vcs-progress:not([hidden]){ display:flex; flex-direction:column; gap:6px; }
.vcs-progress-bar{ height:8px; border-radius:99px; background:var(--env-paper-2); border:1px solid var(--env-border); overflow:hidden; }
.vcs-progress-fill{ height:100%; width:0; background:var(--env-family-accent); transition:width .4s; }
.vcs-progress-label{ font-size:.78rem; color:var(--env-ink-muted); }
.vcs-ready-link{ color:var(--env-family-accent); font-weight:700; }
.vcs-panel{ border:1.5px solid var(--env-border); background:var(--env-paper); border-radius:14px; padding:14px; }
.vcs-panel:not([hidden]){ display:flex; flex-direction:column; gap:12px; }
.vcs-panel-head{ display:flex; flex-direction:column; gap:3px; }
.vcs-panel-foot{ display:flex; justify-content:flex-end; }
.vcs-hint{ font-size:.72rem; color:var(--env-ink-muted); }
.vcs-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px 16px; }
.vcs-grid[hidden], .vcs-field[hidden]{ display:none; }
.vcs-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.vcs-field-label{ font-size:.74rem; font-weight:600; color:var(--env-ink-muted); }
.vcs-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.vcs-pill{
  border:1.5px solid var(--env-border); background:var(--env-paper-2); color:var(--env-ink); border-radius:9px;
  padding:6px 11px; font-size:.75rem; cursor:pointer; font-family:inherit;
}
.vcs-pill.active{ border-color:var(--env-family-accent); color:var(--env-family-accent); font-weight:700; }
.vcs-presets{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.vcs-preset{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 10px; min-width:78px;
  border:1.5px solid var(--env-border); border-radius:11px; background:var(--env-paper-2); cursor:pointer;
  font-size:.7rem; color:var(--env-ink); font-family:inherit;
}
.vcs-preset:hover{ border-color:var(--env-family-accent); }
.vcs-preset-sample{
  display:flex; align-items:center; justify-content:center; width:44px; height:30px; border-radius:7px;
  background:linear-gradient(135deg, #5a6b7d, #2c3440); font-size:1.05rem; paint-order:stroke fill;
}
.vcs-range-wrap{ display:flex; align-items:center; gap:8px; }
.vcs-range{ flex:1; accent-color:var(--env-family-accent); min-width:0; }
.vcs-range-val{ font-size:.74rem; min-width:42px; color:var(--env-ink); text-align:center; }
.vcs-colors{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.vcs-swatch{
  width:26px; height:26px; border-radius:50%; background:var(--sw); border:2px solid var(--env-border); cursor:pointer; padding:0;
  box-shadow:inset 0 0 0 2px var(--env-paper);
}
.vcs-swatch.active{ border-color:var(--env-family-accent); transform:scale(1.1); }
.vcs-color-input{ width:32px; height:28px; border:1.5px solid var(--env-border); border-radius:8px; padding:0; background:none; cursor:pointer; }
.vcs-checks{ display:flex; flex-wrap:wrap; gap:12px; }
.vcs-check{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:var(--env-ink); cursor:pointer; }
.vcs-check input{ width:16px; height:16px; accent-color:var(--env-family-accent); }
.vcs-editor-bar{ display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; }
.vcs-editor-bar-start, .vcs-editor-bar-end{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.vcs-icon-btn{
  width:34px; height:32px; border:1.5px solid var(--env-border); background:var(--env-paper-2); color:var(--env-ink);
  border-radius:9px; font-size:1rem; cursor:pointer;
}
.vcs-icon-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.vcs-save-state{ font-size:.72rem; color:#2e7d4f; }
.vcs-save-state.dirty{ color:#b26a00; }
.vcs-subrow:not([hidden]){ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px; border-radius:10px; background:var(--env-paper-2); }
.vcs-subrow .vcs-input{ flex:1 1 140px; }
.vcs-subrow .vcs-input-num{ flex:0 0 80px; }
.vcs-editor-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:space-between; }
.vcs-stats{ font-size:.74rem; font-weight:700; color:var(--env-ink); }
.vcs-list{ max-height:440px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:2px; position:relative; }
.vcs-empty{ font-size:.8rem; color:var(--env-ink-muted); text-align:center; padding:18px; }
.vcs-row{
  border:1.5px solid var(--env-border); border-radius:12px; padding:8px 10px; display:flex; flex-direction:column; gap:6px;
  background:var(--env-paper-2); transition:border-color .15s, box-shadow .15s;
}
.vcs-row.active{ border-color:var(--env-family-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--env-family-accent) 18%, transparent); }
.vcs-row.match{ background:color-mix(in srgb, #ffd54a 18%, var(--env-paper-2)); }
.vcs-row-head{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.vcs-num{
  border:none; background:var(--env-paper); color:var(--env-family-accent); font-weight:700; font-size:.74rem;
  border-radius:8px; padding:5px 8px; cursor:pointer; font-family:inherit;
}
.vcs-time-wrap{ display:inline-flex; align-items:center; gap:2px; }
.vcs-time{
  width:86px; border:1.5px solid var(--env-border); background:var(--env-paper); color:var(--env-ink); border-radius:8px;
  padding:4px 6px; font-size:.76rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; text-align:center;
}
.vcs-arrow{ color:var(--env-ink-muted); font-size:.8rem; }
.vcs-info{ margin-inline-start:auto; font-size:.7rem; color:var(--env-ink-muted); }
.vcs-mini{
  min-width:26px; height:26px; border:1px solid var(--env-border); background:var(--env-paper); color:var(--env-ink);
  border-radius:7px; font-size:.78rem; cursor:pointer; padding:0 5px; font-family:inherit;
}
.vcs-mini:hover{ border-color:var(--env-family-accent); }
.vcs-mini-danger:hover{ border-color:#c0392b; background:color-mix(in srgb, #c0392b 10%, var(--env-paper)); }
.vcs-text{
  width:100%; resize:vertical; min-height:44px; border:1.5px solid var(--env-border); background:var(--env-paper);
  color:var(--env-ink); border-radius:9px; padding:7px 9px; font-size:.86rem; font-family:'Vazirmatn', sans-serif; line-height:1.6;
  box-sizing:border-box;
}
.vcs-text:focus, .vcs-time:focus, .vcs-input:focus{ outline:none; border-color:var(--env-family-accent); }
.vcs-row-foot{ display:flex; justify-content:space-between; align-items:center; gap:6px; flex-wrap:wrap; }
.vcs-warn{ display:flex; gap:4px; flex-wrap:wrap; }
.vcs-actions{ display:flex; gap:4px; margin-inline-start:auto; }
.vcs-badge{ font-size:.66rem; padding:2px 7px; border-radius:99px; }
.vcs-badge-warn{ background:color-mix(in srgb, #f0a020 18%, transparent); color:#a86400; }
.vcs-badge-err{ background:color-mix(in srgb, #c0392b 16%, transparent); color:#b03020; }
@media (max-width:600px){
  .vcs-screen{ max-width:100%; }
  .vcs-toolbar .vcs-btn-primary{ flex:1 1 100%; justify-content:center; padding:11px; font-size:.86rem; }
  .vcs-panel{ padding:11px; }
  .vcs-list{ max-height:60vh; }
  .vcs-time{ width:78px; }
  .vcs-info{ width:100%; margin-inline-start:0; }
}
.vcs .vcs-select, .vcs .vcs-input{ width:auto; max-width:100%; }
.vcs .vcs-field .vcs-select{ width:100%; }
.vcs-toolbar .vcs-select{ flex:0 1 auto; min-width:0; }
.vcs .vcs-text{ width:100%; }
/* style.css یک قانونِ سراسری برایِ input/textarea/select دارد (padding/width بزرگ) — این‌جا خنثی می‌شود */
.vcs input[type=text].vcs-time{ width:86px; min-width:0; padding:4px 6px; font-size:.76rem; border-radius:8px; background:var(--env-paper); flex:none; height:auto; }
.vcs input[type=text].vcs-input, .vcs input[type=number].vcs-input{ padding:7px 10px; font-size:.78rem; border-radius:10px; background:var(--env-paper); width:auto; }
.vcs input[type=number].vcs-input-num{ width:80px; }
.vcs textarea.vcs-text{ padding:7px 9px; font-size:.86rem; border-radius:9px; background:var(--env-paper); }
.vcs select.vcs-select{ padding:7px 10px; font-size:.78rem; border-radius:10px; background:var(--env-paper-2); }
.vcs input:focus, .vcs textarea:focus, .vcs select:focus{ background:var(--env-paper); border-color:var(--env-family-accent); }
@media (max-width:600px){ .vcs input[type=text].vcs-time{ width:76px; } }