/* =====================================================================
   هوشمارک — استایل‌شیت اصلی (نسخه‌ی ۲)
   ساختار: توکن‌ها → پایه → کامپوننت‌ها → صفحات → ریسپانسیو → حرکت
   فقط وزیرمتن اینجا لود می‌شه؛ بقیه‌ی فونت‌ها با theme.js موقع انتخاب لود می‌شن.
   ===================================================================== */
@import url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css");

/* ---------- ۱. توکن‌ها ---------- */
:root {
  color-scheme: dark;

  /* سطوح: خنثی‌هایی با کمی رنگ آبیِ لوگو */
  --bg: #090c14;
  --bg-rgb: 9, 12, 20;
  --surface: #0f1420;
  --surface-2: #151b2a;
  --surface-3: #1d2437;
  --border: #212839;
  --border-strong: #343e57;
  --text: #edf0f7;
  --muted: #8a93a8;
  --accent: var(--brand-text);
  --accent-contrast: #090c14;

  /* معنایی */
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --danger-line: rgba(248, 113, 113, 0.45);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --chart-bar: var(--brand-2);

  /* هویت رنگی برند (بر اساس لوگو) */
  --brand-1: #1c2fef;
  --brand-2: #22c1ff;
  --brand-text: #5cc9ff;       /* رنگ متن/لینک برند؛ روی هر دو تم خوانا */
  --brand-soft: rgba(34, 193, 255, 0.12);
  --brand-gradient: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  --brand-glow: rgba(34, 193, 255, 0.35);
  --ring: 0 0 0 3px rgba(34, 193, 255, 0.22);
  --teal: var(--brand-text);   /* نام قدیمی که تو login/register استفاده شده */

  /* شعاع‌ها: هر سطح یک اندازه‌ی مخصوص خودش */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* سایه‌ها */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 28px 64px -16px rgba(0, 0, 0, 0.7);

  /* تایپوگرافی */
  --font-main: "Vazirmatn", "Tahoma", sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 15px;
  --fs-lg: 18px;
  --fs-xl: clamp(22px, 3vw, 30px);

  /* هاله‌ی پس‌زمینه‌ی هیرو/ورود */
  --glow-a: rgba(28, 47, 239, 0.38);
  --glow-b: rgba(34, 193, 255, 0.24);
  --trace-opacity: 0.55;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-rgb: 244, 246, 251;
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --surface-3: #e3e8f2;
  --border: #e0e5ef;
  --border-strong: #c3cbdc;
  --text: #10152a;
  --muted: #5d6881;
  --accent-contrast: #ffffff;
  --danger: #d13a3a;
  --danger-soft: rgba(209, 58, 58, 0.09);
  --danger-line: rgba(209, 58, 58, 0.4);
  --success: #0f9a68;
  --success-soft: rgba(15, 154, 104, 0.1);
  --brand-text: #1f33e6;
  --brand-soft: rgba(28, 47, 239, 0.08);
  --ring: 0 0 0 3px rgba(28, 47, 239, 0.18);
  --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.08);
  --shadow: 0 12px 32px -10px rgba(20, 30, 70, 0.18), 0 2px 6px rgba(20, 30, 70, 0.06);
  --shadow-lg: 0 28px 64px -18px rgba(20, 30, 70, 0.28);
  --glow-a: rgba(28, 47, 239, 0.16);
  --glow-b: rgba(34, 193, 255, 0.2);
  --trace-opacity: 0.4;
}

/* فونت‌های قابل انتخاب (فایل فونت‌ها با theme.js لود می‌شه) */
:root[data-font="samim"] { --font-main: "Samim", "Tahoma", sans-serif; }
:root[data-font="shabnam"] { --font-main: "Shabnam", "Tahoma", sans-serif; }
:root[data-font="estedad"] { --font-main: "Estedad", "Tahoma", sans-serif; }
:root[data-font="vazirmatn"] { --font-main: "Vazirmatn", "Tahoma", sans-serif; }

/* ---------- ۲. پایه ---------- */
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  line-height: 1.85;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body:has(.modal-overlay.open) { overflow: hidden; }

h1, h2, h3, h4 { line-height: 1.5; margin: 0; }
h1, h2, .section-title, .cta-band h2 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; }
::selection { background: rgba(34, 193, 255, 0.3); color: inherit; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
:root[data-theme="light"] :focus-visible { outline-color: var(--brand-1); }

/* تعویض نرم تم روی سطوح اصلی */
body, .chat-sidebar, .chat-header, .chat-input-bar, .assistant-chip, .card,
.stat-card, .table-wrap, .provider-card, .modal-box, .sidebar, .msg, .btn,
input, select, textarea, th, td, .settings-section, .device-row,
.font-dropdown, .theme-switch, .chat-intro {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); font-size: 14px; }
.hint { color: var(--muted); font-size: 12.5px; margin: -6px 0 18px; }

/* ---------- ۳. دکمه‌ها ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease, filter 0.18s ease, transform 0.12s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn:active { transform: scale(0.98); }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 13px; border-radius: 10px; }
.btn-primary {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #ffffff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 26px -10px var(--brand-glow);
}
.btn-primary:hover { background: var(--brand-gradient); border-color: transparent; filter: brightness(1.1); }
.btn-danger { color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; }

/* ---------- ۴. فرم‌ها ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 7px; }
input[type="text"], input[type="password"], select, textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.7; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--brand-2); box-shadow: var(--ring); }
:root[data-theme="light"] input:focus, :root[data-theme="light"] select:focus, :root[data-theme="light"] textarea:focus { border-color: var(--brand-1); }
input:disabled { opacity: 0.6; cursor: not-allowed; }
select { cursor: pointer; }
.error-box {
  display: none;
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ---------- ۵. لندینگ ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; }
.brand { font-size: 22px; font-weight: 800; letter-spacing: 0; display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand .dot { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-logo { height: 30px; width: auto; flex: none; display: block; }
.chat-sidebar-header .brand .brand-logo, .sidebar .brand .brand-logo { height: 26px; }
.nav-links { display: flex; align-items: center; gap: 10px; }

.hero {
  position: relative;
  isolation: isolate;
  max-width: 780px;
  margin: 9vh auto 0;
  padding: 0 24px;
  text-align: center;
}
/* هاله‌ی برند پشت هیرو */
.hero::before {
  content: "";
  position: absolute;
  inset: -180px -25% auto;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 55% at 32% 32%, var(--glow-a), transparent 72%),
    radial-gradient(34% 50% at 68% 26%, var(--glow-b), transparent 72%);
  filter: blur(28px);
}
/* ردّ مدار، از موتیف خطوط و گره‌های لوگو */
.hero::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 1200px;
  height: 420px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  opacity: var(--trace-opacity);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' fill='none' stroke='rgb(34,193,255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 120H120L160 80H230'/%3E%3Ccircle cx='245' cy='80' r='6'/%3E%3Cpath d='M0 210H180'/%3E%3Ccircle cx='195' cy='210' r='6'/%3E%3Cpath d='M0 300H100L140 340H210'/%3E%3Ccircle cx='225' cy='340' r='6'/%3E%3Cpath d='M1200 120H1080L1040 80H970'/%3E%3Ccircle cx='955' cy='80' r='6'/%3E%3Cpath d='M1200 210H1020'/%3E%3Ccircle cx='1005' cy='210' r='6'/%3E%3Cpath d='M1200 300H1100L1060 340H990'/%3E%3Ccircle cx='975' cy='340' r='6'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-soft);
  border: 1px solid var(--border);
  color: var(--brand-text);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-logo { width: 78px; height: auto; margin: 0 auto 20px; display: block; filter: drop-shadow(0 12px 28px var(--brand-glow)); }
.hero h1 { font-size: clamp(26px, 6.5vw, 50px); font-weight: 800; line-height: 1.4; margin: 0 0 18px; color: var(--text); }
.hero h1 .grad { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--muted); font-size: 17px; margin: 0 auto 32px; max-width: 620px; }
.hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-actions .btn { min-height: 48px; padding: 12px 28px; font-size: 15px; }

.model-strip { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 46px; }
.model-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.model-chip:hover { border-color: var(--brand-2); background: var(--brand-soft); }
.model-chip .dot-ico { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gradient); box-shadow: 0 0 8px var(--brand-glow); flex: none; }

.landing-section { margin-top: 96px; }
.section-title { text-align: center; font-size: var(--fs-xl); font-weight: 800; margin: 0 0 10px; }
.section-sub { text-align: center; color: var(--muted); font-size: 15px; margin: 0 auto 10px; max-width: 560px; }

/* آمار: یک نوار پیوسته با جداکننده، نه چهار کارت جدا */
.stats-strip {
  width: min(1000px, calc(100% - 48px));
  margin: 72px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
}
.stat-box { background: var(--surface); padding: 24px 12px; }
.stat-box .num { font-size: 28px; font-weight: 800; line-height: 1.4; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-box .label { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ویژگی‌ها: چیدمان نامتقارن؛ کارت اول و آخر پهن‌ترن */
.feature-grid {
  max-width: 1000px;
  margin: 40px auto 72px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.feature-card {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: border-color 0.2s ease;
}
.feature-card:hover { border-color: var(--border-strong); }
.feature-card:nth-child(1) { grid-column: span 4; background: linear-gradient(160deg, var(--brand-soft), transparent 60%), var(--surface); }
.feature-card:nth-child(6) { grid-column: span 6; }
.feature-card .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  color: var(--brand-text);
  border-radius: 14px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand-text) 28%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card .ico svg { display: block; }
.feature-card:hover .ico { transform: translateY(-2px); box-shadow: 0 6px 20px -6px var(--brand-glow); }
@media (prefers-reduced-motion: reduce) {
  .feature-card .ico, .feature-card:hover .ico { transition: none; transform: none; }
}
.feature-card h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; max-width: 46ch; }

/* مراحل: واقعاً یک توالی‌ان، پس شماره‌گذاری و خط اتصال دارن */
.steps-grid {
  max-width: 1000px;
  margin: 0 auto 64px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.step-card { position: relative; padding: 4px 0; }
.step-num {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 0 0 6px var(--bg), 0 8px 20px -8px var(--brand-glow);
}
.step-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  inset-inline-start: 46px;
  inset-inline-end: -14px;
  border-top: 2px dashed var(--border-strong);
}
.step-card h3 { margin: 0 0 6px; font-size: 16px; }
.step-card p { margin: 0; color: var(--muted); font-size: 13.5px; }

.cta-band {
  position: relative;
  overflow: hidden;
  width: min(1000px, calc(100% - 48px));
  margin: 40px auto 90px;
  padding: 44px 32px;
  border-radius: var(--radius-xl);
  background: radial-gradient(60% 120% at 85% 0%, rgba(255, 255, 255, 0.18), transparent 60%), var(--brand-gradient);
  color: #fff;
  text-align: center;
  box-shadow: 0 30px 60px -30px var(--brand-glow);
}
.cta-band h2 { margin: 0 0 10px; font-size: clamp(20px, 3vw, 28px); }
.cta-band p { margin: 0 0 24px; opacity: 0.92; font-size: 14.5px; }
.cta-band .btn { background: #fff; color: var(--brand-1); border: none; font-weight: 800; }
.cta-band .btn:hover { background: #fff; filter: brightness(0.95); }

.site-footer { border-top: 1px solid var(--border); padding: 28px 24px 36px; text-align: center; color: var(--muted); font-size: 13px; }
.site-footer .brand { justify-content: center; margin-bottom: 8px; font-size: 16px; }
.site-footer .brand-logo { height: 22px; }

/* ---------- ۶. ورود / ثبت‌نام ---------- */
.auth-wrap { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 40% at 25% 15%, var(--glow-a), transparent 70%),
    radial-gradient(40% 40% at 80% 85%, var(--glow-b), transparent 70%);
  filter: blur(30px);
}
.card {
  width: 100%;
  max-width: 410px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 34px;
  box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 24px; font-size: 20px; text-align: center; }
.switch-link { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.switch-link a { color: var(--brand-text); font-weight: 600; }
.switch-link a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- ۷. چت ---------- */
.chat-layout { display: flex; height: 100vh; height: var(--app-h, 100dvh); overflow: hidden; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.chat-sidebar { width: 272px; flex: none; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.chat-sidebar-header { padding: 16px; border-bottom: 1px solid var(--border); }
 .new-chat-btn { width: 100%; border-radius: var(--radius); }
.conv-tools { padding: 10px 10px 6px; border-bottom: 1px solid var(--border); }
.conv-search { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); outline: none; font: inherit; }
.conv-search:focus { border-color: var(--brand-2); }
.conv-tabs { display: flex; gap: 6px; margin-top: 8px; }
.conv-tab { flex: 1; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 8px; padding: 7px 6px; cursor: pointer; font: inherit; }
.conv-tab.active { background: var(--surface-3); color: var(--text); font-weight: 700; border-color: var(--border); }
.conv-actions { position: relative; display: flex; align-items: center; flex: none; opacity: 0; transition: opacity .15s ease; }
.conv-item:hover .conv-actions, .conv-item:focus-within .conv-actions, .conv-item.menu-open .conv-actions { opacity: 1; }
.conv-action { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px; padding: 4px; line-height: 1; }
.conv-action:hover, .conv-action[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }
.conv-action:focus-visible, .conv-menu-item:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.conv-menu { position: fixed; z-index: 1000; right: 8px; top: 8px; width: 248px; max-width: min(248px, calc(100vw - 36px)); padding: 6px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: 0 14px 38px rgba(0,0,0,.2); color: var(--text); direction: rtl; max-height: calc(100vh - 16px); overflow-y: auto; }
.conv-menu[hidden] { display: none !important; }
.conv-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); text-align: right; cursor: pointer; font: inherit; }
.conv-menu-item:hover { background: var(--surface-2); }
.conv-menu-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); color: var(--muted); }
.conv-menu-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.conv-menu-copy strong { font-size: 13px; font-weight: 650; }
.conv-menu-copy small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.conv-menu-item.danger { color: var(--danger); }
.conv-menu-item.danger .conv-menu-icon { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); }
.conv-menu-divider { height: 1px; margin: 5px 8px; background: var(--border); }
.conv-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.conv-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.conv-item:hover { background: var(--surface-2); color: var(--text); }
.conv-item.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
.conv-item.active::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--brand-gradient); }
.conv-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .del-btn { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; opacity: 0; padding: 2px 4px; border-radius: 6px; }
.conv-item:hover .del-btn, .conv-item .del-btn:focus-visible { opacity: 1; }
.conv-item .del-btn:hover { color: var(--danger); }
.conv-empty { padding: 18px 12px; color: var(--muted); font-size: 13px; text-align: center; }

.sidebar-upgrade { padding: 12px; border-top: 1px solid var(--border); }
.upgrade-btn { width: 100%; border-radius: var(--radius); background: var(--brand-soft); border-color: transparent; color: var(--brand-text); font-weight: 700; }
.upgrade-btn:hover { background: var(--brand-soft); border-color: var(--brand-2); }

.plan-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; background: var(--surface-2); }
.plan-card + .plan-card { margin-top: 12px; }
.plan-card-name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.plan-card-price { font-weight: 700; color: var(--brand-text); margin: 2px 0 10px; font-size: 14px; }
.plan-card-details { margin: 0; padding: 0 18px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }

#sidebarOverlay { display: none; }
#sidebarToggleBtn { display: none; }

.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; }
.chat-page { display: flex; flex-direction: column; height: 100%; }
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(var(--bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  gap: 12px;
  flex-wrap: wrap;
}
.header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.model-select { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 8px 6px 14px; }
.model-select select { border: none; background: transparent; padding: 2px 4px; width: auto; font-size: 13px; box-shadow: none; }
.model-select .label { font-size: 12px; color: var(--muted); white-space: nowrap; }

.chat-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}
.msg {
  max-width: 78%;
  padding: 12px 18px;
  border-radius: 20px;
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  position: relative;
  border: 1px solid var(--border);
}
.msg .msg-meta { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.msg .msg-text { display: block; }

/* پیام کاربر: حباب برند */
.msg.user { align-self: flex-end; background: var(--brand-gradient); color: #fff; border-color: transparent; border-bottom-left-radius: 6px; box-shadow: 0 10px 24px -14px var(--brand-glow); }
.msg.user .msg-meta { color: #fff; opacity: 0.75; }

/* پاسخ هوش مصنوعی: بدون حباب، مثل یک متن خوانا روی صفحه */
.msg.assistant { align-self: flex-start; max-width: 100%; background: transparent; border-color: transparent; padding: 4px 2px 16px; border-radius: 0; }
.msg.assistant .msg-meta { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 8px; }
.msg.assistant .msg-text { white-space: normal; line-height: 1.95; }
/* نگه‌داشتن طولانی برای بازشدن منوی عملیات پاسخ مدل، بدون منوی بومی لمس مرورگر */
.msg.assistant { -webkit-touch-callout: none; touch-action: pan-y; }
.msg.assistant .msg-text { -webkit-touch-callout: none; }
.msg.assistant .msg-text > *:first-child { margin-top: 0; }
.msg.assistant .msg-text > *:last-child { margin-bottom: 0; }
.msg.assistant.error { background: var(--danger-soft); border: 1px dashed var(--danger-line); border-radius: var(--radius-lg); padding: 12px 18px; }
.msg.pending { display: flex; align-items: center; gap: 10px; width: fit-content; }
.msg.assistant.pending { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; }
.msg.pending .thinking-label { color: var(--muted); font-size: 13.5px; }
.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); animation: thinking-bounce 1.1s infinite ease-in-out; }
.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinking-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.typing-caret { display: inline-block; width: 2px; height: 1em; background: var(--brand-2); margin-right: 2px; vertical-align: -2px; animation: caret-blink 0.9s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* مارک‌داون داخل پیام */
.msg-text p { margin: 0 0 12px; }
.msg-text h3, .msg-text h4, .msg-text h5, .msg-text h6 { margin: 18px 0 8px; line-height: 1.5; }
.msg-text ul, .msg-text ol { margin: 6px 0 12px; padding-inline-start: 24px; }
.msg-text li + li { margin-top: 4px; }
.msg-text blockquote { margin: 10px 0; padding: 4px 14px; border-inline-start: 3px solid var(--brand-2); color: var(--muted); background: var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.msg-text hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.msg-text a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.msg-text code { direction: ltr; unicode-bidi: embed; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; background: var(--surface-3); padding: 1px 7px; border-radius: 6px; }
.code-block { margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-size: 12px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); font-family: ui-monospace, monospace; }
.code-copy { background: none; border: 1px solid var(--border); color: inherit; border-radius: 8px; padding: 2px 10px; cursor: pointer; font: inherit; transition: background-color 0.15s ease, color 0.15s ease; }
.code-copy:hover { background: var(--surface-3); color: var(--text); }
.code-block pre { margin: 0; padding: 14px 16px; overflow-x: auto; text-align: left; -webkit-overflow-scrolling: touch; }
.code-block pre code { background: none; padding: 0; white-space: pre; font-size: 13px; line-height: 1.7; }
/* عملیات پیام فقط در منوی نگه‌داشتن/کلیک راست نمایش داده می‌شود؛ نوار دکمه‌ها زیر پیام‌ها رندر نمی‌شود. */
.msg[aria-haspopup="menu"] { -webkit-touch-callout: none; }
.msg[aria-haspopup="menu"]:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 12px; }
.msg-context-menu { position: fixed; z-index: 1200; width: 260px; max-width: calc(100vw - 16px); padding: 6px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: 0 14px 38px rgba(0,0,0,.2); color: var(--text); direction: rtl; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.msg-context-menu .conv-menu-item { min-height: 48px; }
.msg-context-menu .conv-menu-item:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.msg-context-menu .conv-menu-item.is-selected { background: var(--brand-soft); color: var(--brand-text); }

/* کادر پیام: شناور و یکپارچه */
.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: min(820px, calc(100% - 32px));
  margin: 8px auto 18px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.chat-input-bar:focus-within { border-color: var(--brand-2); box-shadow: var(--shadow), var(--ring); }
.chat-input-bar textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  min-height: 44px;
  max-height: 160px;
  line-height: 1.7;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 20px;
  box-shadow: none;
}
.chat-input-bar textarea:focus { border: none; box-shadow: none; }
.chat-input-bar .btn-primary { min-height: 44px; border-radius: 999px; padding: 0 22px; }
.voice-input-btn { min-width: 44px; min-height: 44px; border-radius: 999px; padding: 0 12px; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.voice-input-btn.recording { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 14%, transparent); transform: scale(1.03); }

.model-picker { position: relative; }
.model-picker-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.model-picker-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--brand-text); }
.model-picker-btn.active { background: var(--brand-soft); border-color: var(--brand-2); color: var(--brand-text); }
.model-picker-btn svg { display: block; }
.model-picker-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 14px);
  left: 0;
  min-width: 250px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 50;
}
.model-picker-dropdown.open { display: block; animation: pop-up 0.16s ease-out; }
.model-picker-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: none; background: transparent; border-radius: 10px; color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; text-align: right; }
.model-picker-item:hover { background: var(--surface-2); }
.model-picker-item.active { font-weight: 700; background: var(--brand-soft); }
.model-picker-item.disabled { color: var(--muted); cursor: not-allowed; }
.model-picker-item.disabled:hover { background: transparent; }
.model-picker-check { color: var(--brand-text); }
.model-picker-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.model-picker-empty { padding: 12px; font-size: 13px; color: var(--muted); text-align: center; }

.assistant-strip { display: none; gap: 8px; padding: 0 20px 18px; max-width: 820px; width: 100%; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.assistant-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.assistant-chip-ico { display: inline-flex; align-items: center; }
.hm-ico { display: block; flex: none; }
.assistant-chip:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.assistant-chip.active { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-2); font-weight: 700; }

.chat-intro { text-align: center; margin: 56px auto 6px; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.chat-intro .chat-intro-icon { color: var(--brand-text); display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; font-size: 36px; line-height: 1; margin-bottom: 10px; border-radius: 24px; background: var(--brand-soft); border: 1px solid var(--border); box-shadow: 0 16px 40px -18px var(--brand-glow); }
.chat-intro .chat-intro-name { font-size: 20px; font-weight: 800; color: var(--text); }
.chat-intro .chat-intro-sub { font-size: 14px; color: var(--muted); max-width: 420px; }

/* ---------- ۸. پنل ادمین ---------- */
.admin-layout { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar { width: 244px; flex: none; background: var(--surface); border-left: 1px solid var(--border); padding: 22px 14px; display: flex; flex-direction: column; }
.sidebar .brand { padding: 0 10px; margin-bottom: 26px; }
.sidebar nav { display: flex; flex-direction: column; gap: 3px; }
.tab-link { position: relative; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 10px; transition: background-color 0.15s ease, color 0.15s ease; }
.tab-link:hover { background: var(--surface-2); color: var(--text); }
.tab-link.active { background: var(--surface-3); color: var(--text); font-weight: 700; }
.tab-link.active::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--brand-gradient); }
.nav-ico { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.nav-ico svg { width: 100%; height: 100%; }
.tab-link.active .nav-ico { color: var(--brand-text); }
.tab-link .badge { background: var(--brand-gradient); color: #fff; border: none; padding: 1px 8px; font-size: 10.5px; margin-right: 4px; }

.admin-main { flex: 1; min-width: 0; padding: 34px 40px; max-width: 1100px; }
.admin-main h1 { font-size: 22px; margin: 0 0 22px; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.stat-ico { width: 38px; height: 38px; padding: 9px; margin-bottom: 14px; color: var(--brand-text); background: var(--brand-soft); border-radius: 11px; }
.stat-ico svg { width: 100%; height: 100%; }
.stat-card .num { font-size: 30px; font-weight: 800; line-height: 1.4; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-card .label { color: var(--muted); font-size: 13px; margin-top: 2px; }

.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 13px 16px; text-align: right; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12.5px; background: var(--surface-2); white-space: nowrap; }
tbody tr { transition: background-color 0.12s ease; }
tbody tr:hover { background: var(--surface-2); }
tr:last-child td { border-bottom: none; }
td.cell-wrap { white-space: normal; min-width: 180px; max-width: 360px; overflow-wrap: anywhere; }
.empty-state { text-align: center; color: var(--muted); padding: 32px !important; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.7; background: var(--surface-3); color: var(--muted); border: 1px solid transparent; }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.banned { background: var(--danger-soft); color: var(--danger); }
.badge.admin { background: var(--brand-gradient); color: #fff; }
.badge.provider { background: var(--surface-3); color: var(--muted); }
.badge.current { background: var(--brand-soft); color: var(--brand-text); }

.settings-form { max-width: 640px; }
.provider-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.provider-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; }
.provider-card:hover { border-color: var(--border-strong); }
.provider-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.provider-card-head .name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.provider-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.provider-card-body .field { margin-bottom: 0; }
.provider-card.disabled { opacity: 0.5; }

.fab-add-btn {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 30px -10px var(--brand-glow);
  transition: transform 0.15s ease, filter 0.15s ease;
  z-index: 40;
}
.fab-add-btn:hover { transform: scale(1.06); filter: brightness(1.08); }

/* سوییچ */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 999px; transition: background-color 0.2s ease, border-color 0.2s ease; }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; right: 3px; bottom: 3px; background: var(--muted); border-radius: 50%; transition: transform 0.2s ease, background-color 0.2s ease; }
.switch input:checked + .slider { background: var(--brand-gradient); border-color: transparent; }
.switch input:checked + .slider::before { background: #fff; transform: translateX(-18px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* نمودار بازدید */
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-top: 18px; }
.chart-card h3 { margin: 0 0 18px; font-size: 14.5px; color: var(--muted); font-weight: 600; }
.traffic-chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.traffic-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.traffic-bar { width: 100%; max-width: 26px; background: linear-gradient(to top, var(--brand-1), var(--brand-2)); border-radius: 6px 6px 3px 3px; min-height: 3px; transition: height 0.5s ease; }
.traffic-bar-label { font-size: 10px; color: var(--muted); white-space: nowrap; }
.traffic-bar-count { font-size: 10.5px; color: var(--muted); }

/* ---------- ۹. مودال، توست و تنظیمات ---------- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(4, 7, 14, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal-overlay.open { display: flex; animation: fade-in 0.18s ease-out; }
.modal-box { width: 100%; max-width: 560px; max-height: 78vh; max-height: min(78dvh, 720px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.modal-overlay.open .modal-box { animation: pop-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 20px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }

.toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(20px); max-width: calc(100vw - 32px); text-align: center; background: var(--text); color: var(--accent-contrast); padding: 12px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; box-shadow: var(--shadow); z-index: 100; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.settings-section { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.settings-section + .settings-section { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--border); }
.settings-section-title { font-size: 13px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-row label { margin-bottom: 0; font-size: 13.5px; }

.theme-switch { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.theme-switch button { flex: 1; border: 1px solid transparent; background: transparent; color: var(--muted); font-family: inherit; font-size: 12.5px; padding: 7px 8px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: background-color 0.2s ease, color 0.2s ease; }
.theme-switch button.active { background: var(--surface); color: var(--text); font-weight: 700; border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.font-picker { position: relative; }
.font-picker-trigger { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--text); font-family: inherit; font-size: 13.5px; cursor: pointer; width: 100%; justify-content: space-between; }
.font-picker-trigger:hover { border-color: var(--border-strong); }
.font-picker-trigger .ico { font-size: 15px; }
.font-dropdown { position: absolute; top: calc(100% + 6px); right: 0; left: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 20; }
.font-dropdown.open { display: flex; animation: pop-down 0.16s ease-out; }
.font-dropdown button { text-align: right; background: transparent; border: none; color: var(--text); font-family: inherit; font-size: 13.5px; padding: 10px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.font-dropdown button:hover { background: var(--surface-2); }
.font-dropdown button.active { font-weight: 700; background: var(--brand-soft); }

.device-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.device-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.device-row .device-ico { font-size: 18px; flex: none; }
.device-row .device-info { flex: 1; min-width: 0; }
.device-row .device-os { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.device-row .device-meta { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-row .device-del { flex: none; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.device-row .device-del:hover { color: var(--danger); }

/* آیکون ادمین (جایگزین تیک آبی): سپر با ستاره، به رنگ برند */
.admin-mark { display: inline-flex; align-items: center; justify-content: center; color: var(--brand-text); flex: none; margin-inline: 0 4px; vertical-align: middle; filter: drop-shadow(0 0 6px var(--brand-glow)); }
.admin-mark .hm-ico { vertical-align: 0; }

/* ---------- ۱۰. حرکت ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pop-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sheet-up { from { transform: translateY(32px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* تنها حرکت خودکار صفحه: ورود پلکانی هیرو، فقط یک‌بار موقع لود */
@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero > *:nth-child(2) { animation-delay: 0.06s; }
  .hero > *:nth-child(3) { animation-delay: 0.12s; }
  .hero > *:nth-child(4) { animation-delay: 0.18s; }
  .hero > *:nth-child(5) { animation-delay: 0.24s; }
  .hero > *:nth-child(6) { animation-delay: 0.3s; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- ۱۱. ریسپانسیو ---------- */
.chat-body, .conv-list, .modal-body, .model-picker-dropdown { overscroll-behavior: contain; }

@media (hover: none) {
  .btn:hover { background: transparent; border-color: var(--border-strong); }
  .btn-primary:hover { background: var(--brand-gradient); filter: none; }
  .fab-add-btn:hover { transform: none; filter: none; }
  .conv-actions { opacity: 1; }
  .conv-item .del-btn { opacity: 0.8; }
  .conv-menu { width: min(280px, calc(100vw - 16px)); }
  .msg-copy { opacity: 0.75; }
}
@media (pointer: coarse) {
  .conv-item .del-btn { padding: 8px 10px; margin: -8px -4px; }
  .device-row .device-del { padding: 10px; }
  .code-copy { padding: 6px 12px; }
  .msg-copy { padding: 6px 10px; }
  .theme-switch button { padding: 11px 8px; }
  .model-picker-item, .font-dropdown button { padding: 12px; }
}
@media (max-width: 900px), (pointer: coarse) {
  input[type="text"], input[type="password"], select, textarea { font-size: 16px; }
}

@media (max-width: 1100px) {
  .hero::after { display: none; }
}

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card, .feature-card:nth-child(1), .feature-card:nth-child(6) { grid-column: span 1; }
  .feature-card:nth-child(1), .feature-card:nth-child(6) { grid-column: span 2; }

  .admin-layout { flex-direction: column; }
  .sidebar { width: 100%; border-left: none; border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .sidebar .brand { margin: 0 0 12px; padding: 0; }
  .sidebar nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 6px; margin: 0 -16px; padding-right: 16px; padding-left: 16px; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { height: 0; }
  .sidebar nav .tab-link { flex: none; white-space: nowrap; }
  .tab-link.active::before { display: none; }
  .sidebar > div:last-child { margin-top: 12px !important; flex-direction: row !important; gap: 8px; }
  .sidebar > div:last-child a, .sidebar > div:last-child button { width: auto !important; flex: 1; }
  .admin-main { padding: 22px 18px; }
  .table-wrap table { min-width: 560px; }
  .table-wrap th, .table-wrap td { white-space: nowrap; }
  .table-wrap td.cell-wrap { white-space: normal; }

  .has-sidebar #sidebarToggleBtn { display: inline-flex; }
  .chat-sidebar { position: fixed; top: 0; bottom: 0; right: 0; width: 82%; max-width: 310px; transform: translateX(100%); transition: transform 0.25s ease; z-index: 60; box-shadow: var(--shadow-lg); }
  .chat-sidebar.open { transform: translateX(0); }
  #sidebarOverlay.show { display: block; position: fixed; inset: 0; background: rgba(4, 7, 14, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 55; }
}

@media (max-width: 720px) {
  .topbar { padding: 14px 16px; }
  .brand { font-size: 19px; }
  .brand-logo { height: 26px; }
  .hero { margin-top: 5vh; padding: 0 18px; }
  .hero-logo { width: 62px; }
  .hero .eyebrow { display: block; border-radius: 16px; line-height: 1.7; padding: 8px 14px; font-size: 12.5px; }
  .hero p { font-size: 15.5px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .model-strip { margin-top: 32px; gap: 8px; }
  .model-chip { padding: 7px 12px; font-size: 12.5px; }
  .stats-strip { margin-top: 48px; width: calc(100% - 36px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-box { padding: 18px 8px; }
  .stat-box .num { font-size: 23px; }
  .landing-section { margin-top: 60px; }
  .feature-grid { margin: 28px auto 44px; padding: 0 18px; gap: 12px; grid-template-columns: 1fr; }
  .feature-card, .feature-card:nth-child(1), .feature-card:nth-child(6) { grid-column: span 1; padding: 22px; }
  .steps-grid { grid-template-columns: 1fr; padding: 0 18px; margin-bottom: 44px; gap: 22px; }
  .step-card { padding-inline-start: 50px; }
  .step-num { position: absolute; inset-inline-start: 0; top: 2px; margin: 0; }
  .step-card:not(:last-child)::after { top: 40px; bottom: -22px; inset-inline-start: 16px; inset-inline-end: auto; border-top: none; border-inline-start: 2px dashed var(--border-strong); }
  .cta-band { width: calc(100% - 36px); margin: 24px auto 56px; padding: 32px 20px; }
  .site-footer { padding: 22px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }

  .auth-wrap { padding: 16px; }
  .card { padding: 26px 20px; border-radius: var(--radius-lg); }

  .chat-header { padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px; flex-wrap: nowrap; gap: 8px; }
  .header-right { gap: 6px; flex-wrap: nowrap; min-width: 0; }
  .header-right .btn-sm { padding: 7px 10px; white-space: nowrap; }
  .hide-sm { display: none; }
  #usernameLabel { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #previewBanner, #guestBanner { padding: 8px 12px !important; font-size: 12.5px !important; }

  .chat-page { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .chat-body { padding: 18px 12px 8px; gap: 14px; }
  .msg { max-width: 92%; }
  .chat-input-bar { position: relative; width: calc(100% - 20px); margin: 6px auto 10px; padding: 6px; border-radius: 26px; }
  .chat-input-bar textarea { font-size: 16px; }
  .chat-input-bar .btn-primary { padding: 0 18px; height: 44px; }
  .model-picker { position: static; }
  .model-picker-dropdown { left: 6px; right: 6px; bottom: calc(100% + 10px); min-width: 0; max-height: 50vh; max-height: 50dvh; }
  .assistant-strip { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 0 12px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .assistant-strip::-webkit-scrollbar { display: none; }
  .assistant-chip { flex: none; white-space: nowrap; }
  #authPrompt { padding: 14px 16px 20px !important; }
  #authPrompt > div { flex-wrap: wrap; }
  .chat-intro { margin-top: 28px; padding: 0 12px; }
  .chat-sidebar-header { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .sidebar-upgrade { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
  .provider-card-body { grid-template-columns: 1fr; }
  .settings-form { max-width: none; }
}

@media (max-width: 560px) {
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 16px 14px; }
  .stat-card .num { font-size: 24px; }
  .stat-card .label { font-size: 12px; }
  .admin-main h1 { font-size: 19px; }
  .chart-card { padding: 16px; overflow-x: auto; }
  .traffic-chart { min-width: 440px; }
  .provider-card { padding: 14px; }
  .provider-card-head { flex-wrap: wrap; gap: 8px; }
  .fab-add-btn { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 20px; }

  /* مودال به‌شکل bottom-sheet */
  .modal-overlay { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  .modal-box { max-height: 88vh; max-height: 88dvh; border-radius: 22px 22px 14px 14px; }
  .modal-overlay.open .modal-box { animation: sheet-up 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .modal-header, .modal-body { padding: 14px; }
  .ticket-modal-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  #usernameLabel { display: none; }
  .chat-header .brand-name { display: none; }
}
@media (max-width: 380px) {
  .topbar .btn-sm { padding: 6px 11px; font-size: 12.5px; }
  .brand { font-size: 17px; }
  .msg { max-width: 96%; }
}

/* موبایل در حالت افقی (ارتفاع کم) */
@media (max-height: 520px) and (orientation: landscape) {
  .auth-wrap { align-items: flex-start; }
  .hero { margin-top: 3vh; }
  .chat-intro { margin-top: 12px; }
  .chat-input-bar textarea { max-height: 90px; }
  .chat-header { padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
}

/* ---------- آیکون‌های SVG (جایگزین ایموجی) ---------- */
.hm-ico { display: inline-block; flex: none; vertical-align: -0.2em; }
.hm-ico.gap { margin-inline-end: 6px; }
.msg-copy, .conv-item .del-btn, .device-row .device-del { display: inline-flex; align-items: center; justify-content: center; }
.font-picker-trigger .ico { display: inline-flex; }
.device-row .device-ico { display: inline-flex; color: var(--muted); }
.model-picker-check { display: inline-flex; }
.success-box .hm-ico { vertical-align: -0.25em; }


/* منطقه‌ی خطر در تنظیمات ادمین */
.danger-zone {
  margin-top: 34px;
  padding: 18px;
  border: 1px solid var(--danger-line);
  border-radius: 12px;
  background: var(--danger-soft);
  max-width: 720px;
}


/* ==========================================================
   پلن‌ها، سفارش و پرداخت
   ========================================================== */

/* تب‌های داخلی (پلن‌ها / سفارش‌ها / درگاه) */
.subtabs { display: flex; gap: 6px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; margin: 22px 0 18px; }
.subtab { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background-color 0.15s ease, color 0.15s ease; }
.subtab:hover { color: var(--text); }
.subtab.active { background: var(--surface); color: var(--brand-text); box-shadow: var(--shadow-sm); }
.stat-card .num .unit { font-size: 12px; font-weight: 600; color: var(--muted); }
#salesStats .stat-card .num { font-size: 22px; }

/* کارت پلن (نمای مشترک ادمین و کاربر) */
.pt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 20px 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); height: 100%; }
.pt-hl { border-color: transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--brand-gradient) border-box; border: 1.5px solid transparent; box-shadow: 0 18px 40px -22px var(--brand-glow); }
.pt-current { border-color: var(--success); }
.pt-inactive { opacity: 0.55; }
.pt-badge { position: absolute; top: -11px; inset-inline-start: 18px; background: var(--brand-gradient); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 12px; border-radius: 999px; line-height: 1.7; }
.pt-badge-cur { background: var(--success); inset-inline-start: auto; inset-inline-end: 18px; }
.pt-name { font-size: 17px; font-weight: 800; }
.pt-tagline { font-size: 12.5px; color: var(--muted); min-height: 1.4em; }
.pt-price { margin: 10px 0 12px; padding: 12px 0; border-block: 1px dashed var(--border-strong); }
.pt-old-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pt-old { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.pt-off { background: var(--success-soft); color: var(--success); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.pt-amount { display: flex; align-items: baseline; gap: 6px; }
.pt-amount b { font-size: 26px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pt-amount small { color: var(--muted); font-size: 12.5px; }
.pt-period { font-size: 12.5px; color: var(--brand-text); font-weight: 600; margin-top: 2px; }
.pt-permonth { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pt-feats { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.pt-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.7; }
.pt-feats li .pt-ico { width: 16px; height: 16px; margin-top: 4px; flex: none; }
.pt-feats li.yes .pt-ico { color: var(--success); }
.pt-feats li.no { color: var(--muted); }
.pt-feats li.no span { text-decoration: line-through; opacity: 0.75; }
.pt-feats li.no .pt-ico { color: var(--muted); opacity: 0.7; }
.pt-feats li.auto span { font-weight: 600; }
.pt-buy { width: 100%; margin-top: auto; }

/* پنل ادمین: گرید کارت‌ها */
.plans-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px 16px; padding-top: 14px; margin-bottom: 90px; align-items: start; }
.pa-card { display: flex; flex-direction: column; gap: 10px; }
.pa-card .pt { height: auto; }
.pa-card.is-off .pa-toolbar { opacity: 1; }
.pa-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pa-active { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pa-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pa-actions .btn[disabled] { opacity: 0.35; pointer-events: none; }
.pa-stats { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 0 6px; }
.pa-stats b { color: var(--text); }

/* ویرایشگر پلن */
.plan-editor-box { max-width: 980px; max-height: 90vh; max-height: min(90dvh, 860px); }
.plan-editor { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; align-items: start; }
.plan-form { display: flex; flex-direction: column; }
.plan-preview { position: sticky; top: 0; }
.preview-title { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.switch-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.switch-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.feat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.feat-row { display: flex; align-items: center; gap: 6px; }
.feat-row .feat-text { flex: 1; min-width: 0; }
.feat-toggle { width: 34px; height: 34px; flex: none; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); font-size: 15px; font-weight: 800; cursor: pointer; color: var(--muted); }
.feat-toggle.yes { background: var(--success-soft); color: var(--success); border-color: transparent; }
.feat-row .btn-sm { padding-inline: 9px; }
.feat-row .btn[disabled] { opacity: 0.35; pointer-events: none; }

/* سفارش‌ها و درگاه */
.orders-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.orders-toolbar select { max-width: 240px; }
.gateway-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; max-width: 720px; margin-bottom: 16px; }
.gateway-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gateway-steps { margin: 10px 0 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.9; }
.gateway-steps code, .gateway-card code { background: var(--surface-3); padding: 1px 6px; border-radius: 6px; font-size: 12px; color: var(--text); }

/* مودال پلن‌ها در صفحه‌ی چت */
.plans-modal { max-width: 980px; }
.plans-head { display: flex; align-items: center; gap: 10px; }
.plans-modal-body { gap: 14px; }
.plans-modal-body .subtabs { margin: 0; }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 14px; padding-top: 12px; }
.sub-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--success-soft); border: 1px solid var(--success); border-radius: var(--radius); font-size: 13.5px; }
.sub-badge { margin-top: 8px; text-align: center; font-size: 12px; color: var(--success); font-weight: 600; }

.checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: 20px; align-items: start; }
.checkout-plan { padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; }
.checkout-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.checkout-rows { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.checkout-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.checkout-row:last-child { border-bottom: none; }
.checkout-row.disc { color: var(--success); }
.checkout-row.total { background: var(--brand-soft); font-weight: 800; font-size: 15px; color: var(--brand-text); }
.checkout-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
.checkout-note { padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; line-height: 1.9; color: var(--muted); }
.checkout-note.warn { background: rgba(245, 180, 60, 0.12); border-color: rgba(245, 180, 60, 0.5); color: var(--text); }
.checkout-pay { padding-block: 13px; font-size: 15px; }

.order-row { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.order-row + .order-row { margin-top: 10px; }
.order-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-meta { font-size: 12.5px; }
.order-actions { display: flex; gap: 8px; margin-top: 4px; }

.result-box { text-align: center; padding: 26px 16px 10px; max-width: 460px; margin: 0 auto; }
.result-ico { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.result-box.ok .result-ico { background: var(--success-soft); color: var(--success); }
.result-box.bad .result-ico { background: var(--danger-soft); color: var(--danger); }
.result-box h3 { margin: 6px 0; font-size: 19px; }
.result-detail { font-size: 13.5px; margin-top: 6px; }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

@media (max-width: 820px) {
  .plan-editor { grid-template-columns: 1fr; }
  .plan-preview { position: static; order: 2; }
  .checkout { grid-template-columns: 1fr; }
  .checkout-side { position: static; }
}
@media (max-width: 600px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .plans-grid { grid-template-columns: 1fr; }
  .plans-admin-grid { grid-template-columns: 1fr; }
  .feat-row { flex-wrap: wrap; }
  .feat-row .feat-text { flex-basis: calc(100% - 44px); }
  .subtabs { width: 100%; }
  .pt-amount b { font-size: 24px; }
}

.plan-hint { margin: 0 0 16px; padding: 10px 14px; background: var(--brand-soft); border-radius: var(--radius); line-height: 1.9; }
.plan-hint:empty { display: none; }
.plans-modal-body > * { flex-shrink: 0; }
.gateway-card .hint { margin: 6px 0 0; }

/* پیام موفقیت (صفحه‌های بازیابی رمز و تأیید ایمیل) */
.success-box {
  background: var(--success-soft);
  border: 1px solid var(--success);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
}

/* =====================================================================
   بنر «دریافت اپلیکیشن» + راهنمای نصب (js/app-install.js)
   ===================================================================== */
.hm-app-banner {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(90deg, var(--brand-soft), transparent 75%), var(--surface);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top, 0px);
  animation: hm-banner-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes hm-banner-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
.hm-app-banner-inner { display: flex; align-items: center; gap: 12px; max-width: 1120px; margin: 0 auto; padding: 8px 16px; }
.hm-app-banner-icon { flex: none; border-radius: 10px; }
.hm-app-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.hm-app-banner-text strong { font-size: var(--fs-sm); font-weight: 800; }
.hm-app-banner-text span { font-size: var(--fs-xs); color: var(--muted); }
.hm-app-banner-cta { flex: none; white-space: nowrap; }
.hm-app-banner-close {
  flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font: inherit; font-size: 22px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.hm-app-banner-close:hover { background: var(--surface-2); color: var(--text); }
.hm-app-banner-close:focus-visible { outline: none; box-shadow: var(--ring); }

/* صفحه‌هایی که ارتفاع کامل صفحه را می‌گیرند، ارتفاع بنر را کم می‌کنند تا اسکرول اضافه نیاید */
body.hm-has-app-banner .chat-layout {
  height: calc(100vh - var(--hm-banner-h, 0px));
  height: calc(var(--app-h, 100dvh) - var(--hm-banner-h, 0px));
}
body.hm-has-app-banner .auth-wrap {
  min-height: calc(100vh - var(--hm-banner-h, 0px));
  min-height: calc(100dvh - var(--hm-banner-h, 0px));
}

.hm-app-modal-box { max-width: 440px; padding: 20px 22px 18px; }
.hm-app-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.hm-app-modal-title { margin: 0; font-size: var(--fs-lg); }
.hm-app-steps { margin: 0 0 18px; padding: 0 20px 0 0; display: flex; flex-direction: column; gap: 10px; color: var(--text); font-size: var(--fs-sm); line-height: 1.9; overflow-y: auto; }
.hm-app-steps li::marker { color: var(--brand-text); font-weight: 800; }
.hm-app-modal-actions { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }

@media (max-width: 480px) {
  .hm-app-banner-inner { gap: 8px; padding: 8px 12px; }
  .hm-app-banner-icon { width: 32px; height: 32px; }
  .hm-app-banner-text strong { display: none; }
  .hm-app-banner-text span { font-size: 12.5px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hm-app-banner-cta { padding: 6px 12px; font-size: 12.5px; }
  .hm-app-modal-actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .hm-app-banner { animation: none; } }


/* ---------- دکمه‌ی نمایش/پنهان کردن رمز عبور ---------- */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-inline-end: 42px; }
.pw-eye { position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.pw-eye:hover, .pw-eye:focus-visible { color: var(--text); background: var(--surface-3); outline: none; }
.pw-eye[aria-pressed="true"] { color: var(--brand-text); }

.web-search-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); border-radius:10px; padding:8px 10px; font-family:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.web-search-btn:hover { border-color:var(--border-strong); color:var(--text); }
.web-search-btn.active { background:var(--brand-soft); color:var(--brand-text); border-color:var(--brand-2); }
.web-search-icon { font-size:18px; line-height:1; }
.web-sources { margin-top:12px; padding-top:10px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
.web-sources-title { font-size:12px; color:var(--muted); font-weight:700; margin-bottom:2px; }
.web-source { display:flex; align-items:flex-start; gap:8px; text-decoration:none; color:var(--text); padding:7px 8px; border-radius:8px; background:var(--surface-2); }
.web-source:hover { background:var(--surface-3); }
.web-source strong { display:block; font-size:12px; line-height:1.5; }
.web-source small { display:block; color:var(--muted); font-size:10px; direction:ltr; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:460px; }
.web-source-index { flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--brand-soft); color:var(--brand-text); font-size:10px; font-weight:700; }
@media (max-width:640px) { .web-search-btn { padding:8px; } .web-search-btn span:last-child { display:none; } .web-source small { max-width:250px; } }
.attachment-preview{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 8px 6px}.attachment-chip{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--border,#ddd);border-radius:10px;background:var(--surface,#fff);font-size:12px}.attachment-chip .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-chip button{border:0;background:transparent;cursor:pointer;font-size:16px}.message-attachments{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.message-attachment{font-size:11px;padding:4px 7px;border-radius:8px;border:1px solid var(--border,#ddd);opacity:.9}.attach-btn{min-width:42px;padding:8px}

.compare-btn{border-color:var(--brand-2);}.compare-panel{position:fixed;z-index:1000;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 28px));padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2);box-shadow:var(--shadow);direction:rtl}.compare-panel-head{display:flex;align-items:center;justify-content:space-between}.compare-panel-head button{border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--muted)}.compare-panel p{font-size:12px;color:var(--muted);line-height:1.7}.compare-options{display:grid;gap:7px;max-height:240px;overflow:auto}.compare-option{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--border);border-radius:10px;cursor:pointer}.compare-option small{display:block;color:var(--muted);font-size:10px;direction:ltr}.compare-panel-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:14px}.compare-details{margin-top:12px;border-top:1px solid var(--border);padding-top:9px}.compare-details summary{cursor:pointer;color:var(--brand-text);font-size:12px}.compare-answer-list{display:grid;gap:10px;margin-top:10px}.compare-answer{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.compare-answer strong{display:block;font-size:12px;margin-bottom:7px}

/* ---------- Multi-model compare: polished modal ---------- */
.compare-btn .compare-icon{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px}
.compare-btn .compare-icon svg{width:17px;height:17px}
.compare-backdrop{position:fixed;inset:0;z-index:990;background:rgba(4,7,14,.58);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.compare-panel{position:fixed;z-index:1000;left:50%;top:50%;transform:translate(-50%,-50%);width:min(500px,calc(100vw - 28px));max-height:min(720px,calc(100vh - 40px));overflow:auto;padding:22px;border:1px solid var(--border-strong);border-radius:22px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg);direction:rtl}
.compare-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px}
.compare-kicker{display:block;color:var(--brand-text);font-size:11px;font-weight:700;margin-bottom:3px}
.compare-panel-head h2{margin:0;font-size:19px;line-height:1.4}
.compare-panel-head button.compare-close{width:34px;height:34px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);font-size:20px;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.compare-panel-head button.compare-close:hover{background:var(--surface-3);color:var(--text)}
.compare-description{font-size:12px;color:var(--muted);line-height:1.8;margin:0 0 16px}
.compare-options{display:grid;gap:9px;max-height:330px;overflow:auto;padding:2px}
.compare-option{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s,transform .15s;user-select:none}
.compare-option:hover{border-color:var(--border-strong);background:var(--surface-3);transform:translateY(-1px)}
.compare-option.selected{border-color:var(--brand-2);background:var(--brand-soft)}
.compare-option input{position:absolute;opacity:0;pointer-events:none}
.compare-option-main{display:flex;align-items:center;gap:10px;min-width:0}
.compare-provider-icon{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--border);border-radius:10px;background:var(--surface);display:grid;place-items:center;color:var(--brand-text);font-weight:800;font-size:13px}
.compare-option-main strong{display:block;font-size:13px;line-height:1.5}
.compare-option-main small{display:block;color:var(--muted);font-size:10px;margin-top:2px;direction:ltr;text-align:right}
.compare-check{width:19px;height:19px;flex:0 0 19px;border:1.5px solid var(--muted);border-radius:6px;position:relative;background:var(--surface)}
.compare-option.selected .compare-check{border-color:var(--brand-2);background:var(--brand-2)}
.compare-option.selected .compare-check:after{content:"";position:absolute;width:5px;height:9px;border:solid var(--accent-contrast);border-width:0 2px 2px 0;transform:rotate(45deg);left:6px;top:3px}
.compare-panel-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.compare-panel-actions .btn{min-height:40px}
.compare-details{margin-top:12px;border-top:1px solid var(--border);padding-top:9px}.compare-details summary{cursor:pointer;color:var(--brand-text);font-size:12px}.compare-answer-list{display:grid;gap:10px;margin-top:10px}.compare-answer{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.compare-answer strong{display:block;font-size:12px;margin-bottom:7px}
@media (max-width:640px){.compare-panel{width:calc(100vw - 20px);padding:18px;border-radius:18px}.compare-options{max-height:45vh}.compare-panel-actions{flex-direction:column}.compare-panel-actions .btn{width:100%}}

/* ---------- Final UI/UX cleanup ---------- */
.settings-modal-box{max-width:820px!important;width:min(820px,calc(100vw - 24px));max-height:min(88dvh,820px)}
.settings-layout{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0;flex:1;overflow:hidden}
.settings-nav{padding:14px;border-left:1px solid var(--border);background:var(--surface-2);display:flex;flex-direction:column;gap:5px;overflow:auto}
.settings-nav-item{display:flex;align-items:center;gap:9px;width:100%;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:11px;padding:10px 11px;font:inherit;font-size:12px;text-align:right;cursor:pointer;transition:.15s ease}
.settings-nav-item:hover{background:var(--surface-3);color:var(--text)}
.settings-nav-item.active{background:var(--surface);border-color:var(--border);color:var(--text);font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.settings-nav-icon{width:20px;height:20px;display:grid;place-items:center;flex:0 0 20px;color:var(--brand-text)}
.settings-content{overflow:auto;min-width:0;padding:20px}
.settings-tab-panel{display:none!important;margin:0!important;padding:0!important;border:0!important}
.settings-tab-panel.active{display:flex!important}
.settings-tab-panel + .settings-tab-panel{margin-top:0!important}
.settings-option-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)}
.settings-option-card strong{display:block;font-size:13px;margin-bottom:3px}
.settings-option-card .muted{font-size:11px;line-height:1.7}
.settings-inline-select{min-width:140px;width:auto}
.settings-archive-list{display:grid;gap:8px}
.settings-archive-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.settings-archive-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.settings-archive-main strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-archive-main .muted{font-size:10px}
.settings-archive-actions{display:flex;gap:6px;flex:none}
.settings-title-icon{display:inline-grid;place-items:center;color:var(--brand-text)}
.hm-icon-slot{display:inline-flex;vertical-align:middle;margin-left:5px}
.new-chat-btn{display:flex;align-items:center;justify-content:center}
.attachment-chip-icon{display:inline-flex;align-items:center;color:var(--brand-text)}
.voice-timer{font-size:11px;margin-inline-start:3px;direction:ltr}
.web-search-btn{background:var(--surface-2)}
@media (max-width:720px){
  .settings-modal-box{width:calc(100vw - 12px);max-height:92dvh}
  .settings-layout{grid-template-columns:1fr;display:flex;flex-direction:column}
  .settings-nav{border-left:0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;max-height:190px}
  .settings-nav-item{justify-content:flex-start}
  .settings-content{padding:15px}
  .settings-option-card,.settings-archive-item{align-items:flex-start;flex-direction:column}
  .settings-inline-select{width:100%}
  .settings-archive-actions{width:100%}
  .settings-archive-actions .btn{flex:1}
}

/* ---------- Settings model picker: reliable custom control ---------- */
.settings-model-picker{position:relative;width:min(100%,360px);z-index:4}
.settings-model-trigger{width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--text);font:inherit;font-size:13px;cursor:pointer;text-align:right}
.settings-model-trigger:hover{border-color:var(--border-strong);background:var(--surface-3)}
.settings-model-trigger:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.settings-model-dropdown{display:none;position:absolute;top:calc(100% + 7px);right:0;left:0;max-height:280px;overflow:auto;padding:6px;border:1px solid var(--border-strong);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-lg);z-index:1200}
.settings-model-dropdown.open{display:grid;gap:3px}
.settings-model-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border:0;border-radius:9px;background:transparent;color:var(--text);font:inherit;font-size:12px;cursor:pointer;text-align:right}
.settings-model-option:hover{background:var(--surface-2)}
.settings-model-option.selected{background:var(--brand-soft);font-weight:700;color:var(--brand-text)}
.settings-model-check{display:inline-flex;flex:none;color:var(--brand-text)}
@media(max-width:720px){.settings-model-picker{width:100%}.settings-model-dropdown{max-height:240px}}

/* ---------- Native Brain management ---------- */
.brain-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.brain-page-head h1{margin:2px 0 4px}.brain-page-head p{margin:0;max-width:760px;font-size:12px;line-height:1.9}.brain-kicker{font-size:10px;letter-spacing:.16em;color:var(--brand-text);font-weight:800}.brain-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.brain-stat-card{padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;gap:10px}.brain-stat-card span{font-size:11px;color:var(--muted)}.brain-stat-card strong{font-size:21px}.brain-filterbar{display:flex;gap:8px;margin-bottom:12px}.brain-filterbar input,.brain-filterbar select{min-height:42px}.brain-filterbar input{flex:1}.brain-filterbar select{width:190px}.brain-queue-list{display:grid;gap:10px}.brain-queue-card{border:1px solid var(--border);border-radius:16px;background:var(--surface-2);padding:15px}.brain-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.brain-card-top time{font-size:10px;color:var(--muted)}.brain-status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:700;border:1px solid var(--border)}.brain-status-pending{color:var(--brand-text);background:var(--brand-soft)}.brain-status-review{color:#fbbf24;background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.28)}.brain-status-approved{color:var(--success);background:var(--success-soft);border-color:rgba(52,211,153,.28)}.brain-status-rejected{color:var(--danger);background:var(--danger-soft);border-color:var(--danger-line)}.brain-source{font-size:10px;color:var(--muted);margin-right:7px}.brain-qa{display:grid;grid-template-columns:1fr 1fr;gap:10px}.brain-qa>div{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:11px}.brain-qa small{font-size:10px;color:var(--brand-text);font-weight:700}.brain-qa p{margin:5px 0 0;font-size:12px;line-height:1.9;white-space:pre-wrap;max-height:170px;overflow:auto}.brain-reason{margin-top:10px;padding:9px 11px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size:11px;line-height:1.8;color:var(--muted)}.brain-reason strong{color:var(--text)}.brain-reason span{margin-right:10px}.brain-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.brain-card-actions:empty{display:none}@media(max-width:800px){.brain-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.brain-qa{grid-template-columns:1fr}.brain-filterbar{flex-direction:column}.brain-filterbar select{width:100%}}@media(max-width:560px){.brain-page-head{flex-direction:column}.brain-page-head .btn{width:100%}.brain-stats{grid-template-columns:1fr 1fr}.brain-card-top{align-items:flex-start;flex-direction:column}.brain-card-actions .btn{flex:1}}

/* Native Brain inline management */
.brain-inline-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.brain-btn-icon{display:inline-flex;vertical-align:middle;margin-left:4px}.brain-inline-panel{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.brain-inline-panel[hidden]{display:none}.brain-inline-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.brain-inline-head>div{display:flex;align-items:center;gap:8px}.brain-inline-head .muted{font-size:10px}.brain-inline-head svg{vertical-align:middle}.brain-inline-panel .brain-stats{margin-bottom:12px}.brain-inline-panel .brain-queue-card{background:var(--surface)}.brain-inline-panel .brain-card-actions .btn{min-height:36px}.brain-inline-panel .btn svg{vertical-align:-3px}.brain-inline-toolbar .btn.is-open{border-color:var(--brand);background:var(--brand-soft)}.brain-chevron{display:inline-block;transition:transform .2s ease;margin-right:3px}.brain-inline-toolbar .btn.is-open .brain-chevron{transform:rotate(180deg)}
.brain-status svg{width:13px;height:13px;flex:none}.brain-status-icon{display:inline-flex;align-items:center;margin-left:4px}.brain-action-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:5px;vertical-align:-3px}.brain-card-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:3px}
@media(max-width:560px){.brain-inline-head{align-items:flex-start;flex-direction:column}.brain-inline-head .btn{width:100%}.brain-inline-toolbar .btn{flex:1}}

/* Native Brain — controlled internal access */
.brain-access-card{margin-top:12px;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.brain-access-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.brain-access-head>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.brain-access-head strong{font-size:12px}.brain-access-head .muted{font-size:10px}.brain-access-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;color:var(--success);background:var(--success-soft);border:1px solid rgba(52,211,153,.25);font-size:10px;font-weight:700;white-space:nowrap}.brain-permissions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.brain-permissions span{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:10px;color:var(--muted)}.brain-permissions svg{color:var(--brand-text)}
@media(max-width:560px){.brain-access-head{align-items:flex-start;flex-direction:column}.brain-access-badge{align-self:flex-start}}

/* Native Brain internal-site access state */
.brain-access-badge.is-off{opacity:.82}
.brain-access-toggle{padding-top:10px;border-top:1px solid var(--border,#2a2f3a)}
.brain-access-toggle .switch{flex:0 0 auto}