/*
 * هویت بصری برند (کارت U1)
 *
 * این فایل در زمان build داخل ایمیج روی /app/client/dist/assets/brand.css کپی
 * می‌شود و با یک <link> در انتهای <head> صفحه‌ی index.html صدا زده می‌شود تا پس از
 * CSS بسته‌بندی‌شده بار شود. ویرایش فایل‌های JS/CSS بسته‌بندی‌شده ممنوع است؛ همه‌ی
 * بازتعریف‌ها اینجا انجام می‌شود.
 *
 * رنگ از لوگو، سرمه‌ای: #415079 (rgb 65 80 121).
 * متغیرهای رنگ تم به‌صورت سه‌گانه‌ی RGB با فاصله‌اند (مثل «65 80 121»).
 */

/* ───── فونت وزیرمتن (متغیر ۱۰۰..۹۰۰) ───── */
@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/brand-fonts/Vazirmatn-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
}

html,
body {
  font-family: "Vazirmatn", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ───── رنگ برند — تم روشن ─────
   فقط لهجه‌های برند بازتعریف می‌شوند؛ سطوح و متنِ پیش‌فرض دست‌نخورده می‌مانند تا
   خوانایی و تضاد حفظ شود. */
:root {
  --brand-purple: 65 80 121 !important; /* لهجه‌ی برند (حباب کاربر، لینک‌ها) */
  --surface-submit: 65 80 121 !important; /* دکمه‌ی اصلی */
  --surface-submit-hover: 52 65 106 !important;
  --ring-primary: 65 80 121 !important; /* حلقه‌ی فوکوس */
}

/* ───── رنگ برند — تم تاریک ───── */
.dark,
html.dark {
  --brand-purple: 123 141 184 !important;
  --surface-submit: 123 141 184 !important;
  --surface-submit-hover: 101 118 163 !important;
  --ring-primary: 123 141 184 !important;
}

/* ───── صفحه‌ی ورود (کارت U4) ─────
   فقط صفحه‌ی ورود نشانه گرفته می‌شود؛ فرم ورود در v0.8.7
   aria-label="Login form" دارد و ریشه‌ی چیدمان ورود div.relative است. */

/* لوگوی صفحه‌ی ورود بزرگ‌تر (ظرف پیش‌فرض h-10 = ۴۰px) */
div.relative:has(form[aria-label="Login form"]) div.mt-6.h-10.bg-cover {
  height: 110px !important;
}

/* متن اصلی h1 («Welcome back») پنهان می‌شود و متن برند جای آن می‌آید */
div.relative:has(form[aria-label="Login form"]) > main > div > h1 {
  font-size: 0 !important;
  line-height: 0 !important;
}
div.relative:has(form[aria-label="Login form"]) > main > div > h1::before {
  content: "به دستیار هوشمند گلرنگ سیستم خوش آمدید";
  display: block;
  direction: rtl;
  font-size: 1.35rem;
  line-height: 1.6;
  font-weight: 700;
}
div.relative:has(form[aria-label="Login form"]) > main > div > h1::after {
  content: "پاسخ دقیق، سریع و فارسی؛ با قوی‌ترین مدل‌های هوش مصنوعی";
  display: block;
  direction: rtl;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  font-weight: 400;
  color: rgb(var(--text-secondary-alt, 107 114 128));
}

/* ───── متن خوش‌آمد صفحه‌ی گفتگوی جدید (کارت D7) ─────
   در صفحه‌ی خالی، کنار آیکون ربات یک عنوان SplitText رندر می‌شود:
   <p class="split-parent ..."> با متن زمان‌محور/ترجمه‌شده. آن را پنهان و با متن
   ثابت برند فارسی جایگزین می‌کنیم. ردیف والد، آیکون Landing را دارد
   (<div class="relative size-10">)؛ پس فقط همین عنوان گرفته می‌شود. */
div:has(> div.relative.size-10) > p.split-parent {
  font-size: 0 !important;
  line-height: 0 !important;
}
div:has(> div.relative.size-10) > p.split-parent::before {
  content: "به دستیار هوش مصنوعی گلرنگ سیستم خوش آمدید";
  display: block;
  direction: rtl;
  font-size: 1.5rem;
  line-height: 1.7;
  font-weight: 500;
}

/* ───── راست‌چین خودکارِ متن (کارت D8) ─────
   جهت هر پاراگراف بر اساس نخستین نویسه‌ی قوی تعیین می‌شود (فارسی از راست، لاتین
   از چپ) و تراز به ابتدای همان جهت می‌رود. متن پیام‌ها (کاربر و دستیار) و textarea
   ورودی. pre/code دست‌نخورده و چپ‌به‌راست می‌مانند. */
.markdown,
.message-content,
.user-turn,
.agent-turn,
textarea[data-testid="text-input"] {
  unicode-bidi: plaintext;
  text-align: start;
}
.markdown pre,
.markdown code {
  unicode-bidi: normal;
  direction: ltr;
  text-align: left;
}

/* ───── لوگوی کوچک بالای نوار کناری (کارت D8) ─────
   ریشه‌ی پنل کناری در UnifiedSidebar با همین کلاس‌ها رندر می‌شود. */
div.flex-col.border-r.border-border-light.bg-surface-primary-alt::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 4px auto 2px;
  background: url("/assets/logo.svg") center / contain no-repeat;
}

/* ───── موبایل/تبلت و تم تیره (کارت D9) ─────
   کشوی کناری موبایل در UnifiedSidebar با کلاس‌های
   «fixed left-0 top-0 z-[110] ...» و حالت بسته «-translate-x-full» رندر می‌شود. */

/* ۱) در RTL کشو از راست باز شود و به راست بسته شود */
[dir="rtl"] .fixed.left-0.top-0.z-\[110\] {
  left: auto;
  right: 0;
}
[dir="rtl"] .fixed.left-0.top-0.z-\[110\].-translate-x-full {
  transform: translateX(100%) !important;
}
/* ۳ب/۶) کشوی موبایل زیر نوار مرورگر/نُچ نرود */
.fixed.left-0.top-0.z-\[110\] {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ۲) لینک‌های CUSTOM_FOOTER در موبایل هم دیده شوند.
   فوتر چت پیش‌فرض «hidden ... sm:flex» است (زیر ۶۴۰px پنهان).
   D9b: فوتر یک‌خطی بماند و کادر پیام بالای آن بنشیند (هم‌پوشانی نداشته باشد). */
@media (max-width: 639px) {
  .absolute.bottom-0.left-0.right-0.hidden.sm\:flex {
    display: flex !important;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    font-size: 11px;
    padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom));
    background: rgb(var(--surface-primary-alt));
  }
  /* کادر پیام بالای فوتر بایستد: به‌اندازه‌ی ارتفاع فوتر (~۲۸px) + safe-area */
  form.mx-auto.flex.w-full.flex-row {
    padding-bottom: calc(1.75rem + env(safe-area-inset-bottom));
  }
}

/* ۳) صفحه‌ی ورود در موبایل: لوگو کوچک‌تر و متن‌ها فشرده‌تر تا دکمه بدون اسکرول دیده شود */
@media (max-width: 640px) {
  div.relative:has(form[aria-label="Login form"]) div.mt-6.h-10.bg-cover {
    height: 72px !important;
  }
  div.relative:has(form[aria-label="Login form"]) > main > div > h1::before {
    font-size: 1.05rem;
  }
  div.relative:has(form[aria-label="Login form"]) > main > div > h1::after {
    font-size: 0.72rem;
  }
}

/* ۴) تم تیره: متن‌های برند با کنتراست بالا (> 4.5:1) */
.dark div.relative:has(form[aria-label="Login form"]) > main > div > h1::before,
.dark div:has(> div.relative.size-10) > p.split-parent::before {
  color: #f3f4f6;
}
.dark div.relative:has(form[aria-label="Login form"]) > main > div > h1::after {
  color: #cbd5e1;
}

/* ۶) ارتفاع دینامیک موبایل تا کادر پیام با باز/بسته شدن کیبورد جابه‌جا نشود */
.h-screen {
  height: 100dvh !important;
}
@supports (height: 100dvh) {
  html,
  body {
    min-height: 100dvh;
  }
}

/* ۷) دکمه‌ی ارسال غیرفعال با کنتراست کافی (به‌جای opacity 0.1 پیش‌فرض) */
#send-button:disabled {
  opacity: 1 !important;
  background-color: #6b7280 !important;
  color: #f9fafb !important;
}