/* =========================
   Bertina Professional Theme (Full Layout)
   ========================= */

:root {
  --primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  --radius: 24px;
}

/* --- تنظیمات کلی بدنه و چیدمان دو ستونه --- */
body:has(form input[type="password"]) {
  margin: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: row !important; /* چیدمان افقی */
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  padding: 20px !important;
  gap: 50px !important;
  overflow: hidden !important;
}

/* تصویر ربات در سمت راست */
body:has(form input[type="password"])::after {
  content: "" !important;
  display: block !important;
  width: 40% !important;
  height: 70vh !important;
  background: url("/static/robot.png") center/contain no-repeat !important;
  order: 2 !important;
  animation: float 6s ease-in-out infinite !important; /* انیمیشن شناور بودن */
}

/* تنظیمات فرم در سمت چپ */
body:has(form input[type="password"]) form:has(input[type="password"]) {
  order: 1 !important;
  border-radius: var(--radius) !important;
  padding: 40px !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 !important;
  direction: rtl !important;
  transition: all 0.3s ease !important;
  z-index: 10 !important;
}

/* انیمیشن برای ربات */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* --- حالت لایت (Light Mode) --- */
html.light body:has(form input[type="password"]) {
  background: #f8fafc !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(37, 99, 235, 0.1) 0px, transparent 50%) !important;
}

html.light body:has(form input[type="password"]) form:has(input[type="password"]) {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

/* --- حالت دارک (Dark Mode) --- */
html.dark body:has(form input[type="password"]) {
  background: #020617 !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(30, 58, 138, 0.2) 0px, transparent 50%) !important;
}

html.dark body:has(form input[type="password"]) form:has(input[type="password"]) {
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* لوگو بالای فرم */
body:has(form input[type="password"]) form:has(input[type="password"])::before {
  content: "" !important;
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 24px auto !important;
  background: url("/static/favicon.png") center/contain no-repeat !important;
  filter: drop-shadow(0 8px 16px rgba(14, 165, 233, 0.3)) !important;
}

/* استایل اینپوت‌ها */
body:has(form input[type="password"]) input {
  width: 100% !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
  border: 1px solid rgba(128, 128, 128, 0.2) !important;
  outline: none !important;
}

/* دکمه ورود */
body:has(form input[type="password"]) button[type="submit"] {
  background: var(--primary-gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px !important;
  font-weight: 700 !important;
  width: 100% !important;
  cursor: pointer !important;
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3) !important;
}

/* بهینه‌سازی موبایل */
@media (max-width: 900px) {
  body:has(form input[type="password"]) {
    flex-direction: column !important;
  }
  body:has(form input[type="password"])::after {
    display: none !important; /* حذف ربات در موبایل */
  }
}






/* === پیام راهنما فقط زیر باکس چت === */

/* حذف ::after از کانتینر بالایی */
.font-primary > .flex.justify-center > div[class*="max-w-6xl"]::after {
  display: none !important;
}

/* فقط کانتینر پایینی (زیر چت باکس) */
.font-primary > .bg-transparent:not(.flex) > div[class*="max-w-6xl"]::after {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  font-size: 12px !important;
  padding: 8px 16px !important;
  margin-top: 4px !important;
  border-radius: 10px !important;
  line-height: 1.8 !important;
  direction: rtl !important;
}

/* --- متن فارسی با آیکون --- */
html[lang="fa-IR"] .font-primary > .bg-transparent:not(.flex) > div[class*="max-w-6xl"]::after {
  content: "جهت استفاده از وب سرچ و یا قابلیت ایجاد تصویر، از دکمه " url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230ea5e9' stroke-width='1.5' width='16' height='16'%3E%3Cpath d='M5.21173 15.1113L2.52473 12.4243C2.29041 12.1899 2.29041 11.8101 2.52473 11.5757L5.21173 8.88873C5.44605 8.65442 5.82595 8.65442 6.06026 8.88873L8.74727 11.5757C8.98158 11.8101 8.98158 12.1899 8.74727 12.4243L6.06026 15.1113C5.82595 15.3456 5.44605 15.3456 5.21173 15.1113Z'/%3E%3Cpath d='M11.5757 21.475L8.88874 18.788C8.65443 18.5537 8.65443 18.1738 8.88874 17.9395L11.5757 15.2525C11.8101 15.0182 12.19 15.0182 12.4243 15.2525L15.1113 17.9395C15.3456 18.1738 15.3456 18.5537 15.1113 18.788L12.4243 21.475C12.19 21.7094 11.8101 21.7094 11.5757 21.475Z'/%3E%3Cpath d='M11.5757 8.7475L8.88874 6.06049C8.65443 5.82618 8.65443 5.44628 8.88874 5.21197L11.5757 2.52496C11.8101 2.29065 12.19 2.29065 12.4243 2.52496L15.1113 5.21197C15.3456 5.44628 15.3456 5.82618 15.1113 6.06049L12.4243 8.7475C12.19 8.98181 11.8101 8.98181 11.5757 8.7475Z'/%3E%3Cpath d='M17.9396 15.1113L15.2526 12.4243C15.0183 12.1899 15.0183 11.8101 15.2526 11.5757L17.9396 8.88873C18.174 8.65442 18.5539 8.65442 18.7882 8.88873L21.4752 11.5757C21.7095 11.8101 21.7095 12.1899 21.4752 12.4243L18.7882 15.1113C18.5539 15.3456 18.174 15.3456 17.9396 15.1113Z'/%3E%3C/svg%3E") " در کنار باکس چت استفاده کنید." !important;
}

/* --- متن انگلیسی با آیکون --- */
html:not([lang="fa-IR"]) .font-primary > .bg-transparent:not(.flex) > div[class*="max-w-6xl"]::after {
  content: "To use Web Search or Image Generation, click the " url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230ea5e9' stroke-width='1.5' width='16' height='16'%3E%3Cpath d='M5.21173 15.1113L2.52473 12.4243C2.29041 12.1899 2.29041 11.8101 2.52473 11.5757L5.21173 8.88873C5.44605 8.65442 5.82595 8.65442 6.06026 8.88873L8.74727 11.5757C8.98158 11.8101 8.98158 12.1899 8.74727 12.4243L6.06026 15.1113C5.82595 15.3456 5.44605 15.3456 5.21173 15.1113Z'/%3E%3Cpath d='M11.5757 21.475L8.88874 18.788C8.65443 18.5537 8.65443 18.1738 8.88874 17.9395L11.5757 15.2525C11.8101 15.0182 12.19 15.0182 12.4243 15.2525L15.1113 17.9395C15.3456 18.1738 15.3456 18.5537 15.1113 18.788L12.4243 21.475C12.19 21.7094 11.8101 21.7094 11.5757 21.475Z'/%3E%3Cpath d='M11.5757 8.7475L8.88874 6.06049C8.65443 5.82618 8.65443 5.44628 8.88874 5.21197L11.5757 2.52496C11.8101 2.29065 12.19 2.29065 12.4243 2.52496L15.1113 5.21197C15.3456 5.44628 15.3456 5.82618 15.1113 6.06049L12.4243 8.7475C12.19 8.98181 11.8101 8.98181 11.5757 8.7475Z'/%3E%3Cpath d='M17.9396 15.1113L15.2526 12.4243C15.0183 12.1899 15.0183 11.8101 15.2526 11.5757L17.9396 8.88873C18.174 8.65442 18.5539 8.65442 18.7882 8.88873L21.4752 11.5757C21.7095 11.8101 21.7095 12.1899 21.4752 12.4243L18.7882 15.1113C18.5539 15.3456 18.174 15.3456 17.9396 15.1113Z'/%3E%3C/svg%3E") " button next to the chat box." !important;
  direction: ltr !important;
}

/* --- حالت لایت --- */
html.light .font-primary > .bg-transparent:not(.flex) > div[class*="max-w-6xl"]::after {
  color: #64748b !important;
  background: rgba(14, 165, 233, 0.05) !important;
  border: 1px dashed rgba(14, 165, 233, 0.25) !important;
}

/* --- حالت دارک --- */
html.dark .font-primary > .bg-transparent:not(.flex) > div[class*="max-w-6xl"]::after {
  color: #94a3b8 !important;
  background: rgba(14, 165, 233, 0.08) !important;
  border: 1px dashed rgba(14, 165, 233, 0.2) !important;
}