@keyframes ai-border-dance {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ai-streaming-border {
  position: relative !important;
  z-index: 1 !important;
  border-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ai-streaming-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: #ffffff;
}

.neon-shell .ai-streaming-border::before {
  background: rgba(18, 24, 48, 0.62) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html.perf-mode .neon-shell .ai-streaming-border::before {
  background: rgba(18, 24, 48, 0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ai-streaming-border::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  z-index: 0;
  background: linear-gradient(90deg, #06b6d4, #a855f7, #ec4899, #06b6d4);
  background-size: 300% 100%;
  animation: ai-border-dance 3s ease infinite;
  
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  
  pointer-events: none;
}

html.perf-mode .ai-streaming-border::after {
  animation: none !important;
  background: #06b6d4 !important;
}

[x-cloak] { display: none !important; }

:root {
  --primary-color: 8 75 94;
  --secondary-color: 37 144 184;
  --success-color: 34 197 94;
  --warning-color: 242 164 102;
  --error-color: 239 68 68;
  --info-color: 37 144 184;
  --black-color: 15 23 42;
  --surface-color: 255 255 255;
  --accent-color: 242 164 102;
  --cafe-primary-hex: #084B5E;
  --cafe-primary-soft: rgba(8, 75, 94, 0.08);
  --cafe-shell-bg: #EDF2F8;
  --cafe-surface: #ffffff;
  --cafe-panel-bg: rgba(255, 255, 255, 0.88);
  --cafe-panel-border: rgba(8, 75, 94, 0.08);
  --cafe-panel-text: #084B5E;
  --cafe-panel-muted: rgba(8, 75, 94, 0.58);
  --cafe-panel-hover: rgba(255, 255, 255, 0.62);
  --cafe-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
  --mobile-nav-h: 0px;
}

html, body {
  font-family: 'IRANYekanXVF', Tahoma, sans-serif;
}



.direction-rtl { direction: rtl; }
.direction-ltr { direction: ltr; }
.bg-glass-panel { background: var(--cafe-panel-bg); }
.border-white-color { border-color: #fff; }
.text-primary-color { color: rgb(var(--primary-color)); }
.text-accent-color { color: rgb(var(--accent-color)); }
.bg-secondary-color { background-color: rgb(var(--secondary-color)); }
.w-hug { width: max-content; }
.h-btn-lg { height: 42px; min-height: 42px; }
.px-btn-x-lg { padding-left: 20px; padding-right: 20px; }
.text-btn-lg { font-size: 14px; line-height: 20px; }
.rounded-btn { border-radius: 9999px; }
.hover\:bg-primary-color\/5:hover { background-color: rgb(var(--primary-color) / 0.05); }
.hover\:border-primary-color\/10:hover { border-color: rgb(var(--primary-color) / 0.1); }
.ring-primary-color\/20 { --tw-ring-color: rgb(var(--primary-color) / 0.2); }

.sidebar-container,
#mainContainer,
#rightSidebar {
  min-width: 0;
}
#rightSidebar { border-left: 1px solid rgba(8,75,94,0.07); }

.left-bar-btn {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(8,75,94,0.38); transition: all 0.15s;
  text-decoration: none; border: none; background: none; cursor: pointer;
}
.left-bar-btn:hover { background: rgba(37,144,184,0.08); color: rgb(37,144,184); }
.left-bar-active { background: rgba(37,144,184,0.1); color: rgb(37,144,184); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2590B8; border-radius: 4px; }

@keyframes tdot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.t-dot { animation: tdot 1.3s infinite; }
.t-dot:nth-child(2) { animation-delay: .17s; }
.t-dot:nth-child(3) { animation-delay: .34s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes msgInFromRight { from { opacity: 0; transform: translate(10px,6px); } to { opacity: 1; transform: none; } }
@keyframes msgInFromLeft  { from { opacity: 0; transform: translate(-10px,6px); } to { opacity: 1; transform: none; } }
.msg-anim { animation: fadeUp .25s ease; }
.msg-anim.msg-user { animation: msgInFromRight .25s ease; }
.msg-anim.msg-ai   { animation: msgInFromLeft .25s ease; }

/* Code in answers takes its colours from the theme. It used to be a fixed
   pale-green box everywhere, and the dark theme's near-white text on it was
   unreadable (contrast 1.08). The formatter now emits classes, not colours. */
.code-wrap {
  background: rgba(8, 12, 28, .72);
  color: #e2e8f0;
  border: 1px solid rgba(120, 160, 255, .22);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
  font-family: 'Courier New', monospace;
  font-size: 11.5px;
  direction: ltr;
  text-align: left;
  overflow-x: auto;
}

.stat-blue  { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.stat-teal  { background: linear-gradient(135deg, rgb(var(--primary-color)), rgb(var(--secondary-color))); }
.stat-green { background: linear-gradient(135deg, rgb(var(--success-color)), #4ade80); }
.stat-amber { background: linear-gradient(135deg, rgb(var(--warning-color)), #fbbf24); }

.cafe-exported-shell { background: var(--cafe-shell-bg); }

.cafe-shell-header,
.cafe-shell-sidebar {
  background: transparent !important;
  border-color: var(--cafe-panel-border) !important;
  box-shadow: none;
}

.cafe-shell-header *[class*="text-teal-700"],
.cafe-shell-sidebar *[class*="text-teal-700"] { color: var(--cafe-primary-hex) !important; }

.cafe-shell-header *[class*="text-slate-600"],
.cafe-shell-sidebar *[class*="text-slate-600"] { color: var(--cafe-panel-text) !important; }

.cafe-shell-header *[class*="text-slate-500"],
.cafe-shell-header *[class*="text-teal-400"],
.cafe-shell-sidebar *[class*="text-teal-400"] { color: var(--cafe-panel-muted) !important; }

.cafe-shell-header button:not(.logout-btn):hover,
.cafe-shell-sidebar button:not(.logout-btn):hover { background-color: var(--cafe-panel-hover) !important; }

.cafe-shell-header .cafe-header-primary-button,
.cafe-shell-header .cafe-header-primary-button:hover,
.cafe-shell-header .cafe-header-primary-button:focus-visible {
  background-color: rgb(var(--secondary-color)) !important;
  color: #ffffff !important;
  filter: brightness(0.96);
}
.cafe-shell-header .cafe-header-primary-button:hover,
.cafe-shell-header .cafe-header-primary-button:focus-visible { filter: brightness(0.9); }
.cafe-shell-header .cafe-header-primary-button *,
.cafe-shell-header .cafe-header-primary-button:hover * { color: #ffffff !important; }

.cafe-shell-header {
  height: clamp(58px, 7vh, 72px) !important;
  min-height: 58px;
  padding: 10px;
}
.cafe-header-brand-section { height: 100%; padding: 0 10px; }

.cafe-logo-badge,
.cafe-icon-badge {
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: var(--cafe-panel-bg);
}
.cafe-logo-badge { width: 40px; height: 40px; border-radius: 999px; }
.cafe-icon-badge { width: 34px; height: 34px; border-radius: 999px; }

.cafe-main-selector {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  background: rgb(var(--secondary-color)) !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: var(--cafe-shadow);
}
.cafe-main-selector:hover { background: color-mix(in srgb, rgb(var(--secondary-color)) 92%, #fff 8%) !important; }
.cafe-main-selector img { filter: brightness(0) invert(1); }

.cafe-glass-btn {
  background: var(--cafe-panel-bg) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.cafe-glass-btn:hover {
  background: var(--cafe-panel-hover) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
}

.cafe-exported-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }

.cafe-sessions-glass {
  background: rgba(237, 242, 248, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
}

.cafe-breadcrumb-glass {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.68) !important;
}

.cafe-shell-sidebar { padding: 10px 0; }

/* ══ سایدبار یکپارچه: ریل ناوبری + بخش گفتگوها در یک ستون ══ */
#rightSidebar { overflow: hidden; }
/* در صفحهٔ چت، جمع‌کردن سایدبار به نوار باریک معنا نداره (بخش گفتگوها فضا می‌خواد) */
body[data-page="chat"] .sidebar-toggle-btn { display: none !important; }
/* جداکننده ظریف بین ناوبری اپ و بخش گفتگوها */
.sidebar-chat-divider {
  height: 1px;
  background: linear-gradient(to left, transparent, rgba(8,75,94,0.14), transparent);
}
/* لیست گفتگوها اسکرول مستقل داره و فضای باقی‌مونده رو پر می‌کنه */
#sidebarChatSection #conversation-list { background: transparent; }
/* پس‌زمینهٔ بخش گفتگوها هم‌رنگ ریل (شفاف روی پوستهٔ سایدبار) */
#sidebarChatSection { background: transparent; }
/* رنگ teal دکمه‌ها/آیتم‌ها هماهنگ با پوسته */
#sidebarChatSection .bg-teal-600,
#sidebarChatSection .bg-teal-700 { background-color: var(--cafe-primary-hex) !important; }
#sidebarChatSection .bg-teal-600 img,
#sidebarChatSection .bg-teal-700 img { filter: brightness(0) invert(1); }
/* In the dark theme that primary is a bright cyan, and white on it read at
   1.8:1 — «ایجاد چت» and the icons on each conversation. Dark ink instead. */
html:not(.theme-light) #sidebarChatSection .bg-teal-600,
html:not(.theme-light) #sidebarChatSection .bg-teal-700,
html:not(.theme-light) #sidebarChatSection .bg-teal-600 *,
html:not(.theme-light) #sidebarChatSection .bg-teal-700 * { color: #06121f !important; }
html:not(.theme-light) #sidebarChatSection .bg-teal-600 img,
html:not(.theme-light) #sidebarChatSection .bg-teal-700 img { filter: brightness(0) !important; }

body[data-chat-mode="business"] .cafe-shell-header,
body[data-chat-mode="business"] #rightSidebar {
  background: transparent !important;
  border-color: var(--cafe-panel-border) !important;
  box-shadow: none !important;
}
body[data-chat-mode="business"],
body[data-chat-mode="business"] #mainContainer { background: #EAF9F5 !important; }
body[data-chat-mode="business"] #rightSidebar { border-left: 1px solid var(--cafe-panel-border); padding: 0; }
body[data-chat-mode="business"] #mainContainer > div:last-child { background: #EAF9F5 !important; }
body[data-chat-mode="business"] .cafe-main-panel {
  background: #f8fafc !important;
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(8, 75, 94, 0.06);
}

.cafe-nav-item { min-height: 44px; border: 1px solid transparent; border-radius: 14px; color: rgba(8,75,94,0.65) !important; }
.cafe-nav-active {
  background: rgb(var(--secondary-color)) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37,144,184,0.28);
}
.cafe-nav-active i, .cafe-nav-active span { color: #ffffff !important; }
.cafe-nav-hover:hover { background: rgba(37,144,184,0.07) !important; color: rgb(var(--secondary-color)) !important; }

.cafe-main-panel { background: #f8fafc !important; border-radius: 0; }
.chat-viewport { background: #f8fafc; }

.cafe-sessions-glass .bg-slate-50 { background: rgba(255,255,255,0.25) !important; }
.cafe-sessions-glass input { background: rgba(255,255,255,0.35) !important; border-color: rgba(255,255,255,0.55) !important; }
.cafe-sessions-glass .hover\:bg-slate-100:hover,
.cafe-sessions-glass .hover\:bg-teal-50:hover { background: rgba(255,255,255,0.3) !important; }
.cafe-sessions-glass .bg-teal-100 { background: rgba(255,255,255,0.45) !important; border: 1px solid rgba(255,255,255,0.65) !important; }

.cafe-dropdown-panel { border-color: rgba(8,75,94,0.08) !important; box-shadow: var(--cafe-shadow); }

.cafe-shell-header .bg-teal-700,
.cafe-sessions-glass .bg-teal-600,
.cafe-sessions-glass .bg-teal-700 { background-color: var(--cafe-primary-hex) !important; }
.bg-teal-600 img,
.bg-teal-700 img,
.cafe-main-selector .brightness-0 { filter: brightness(0) invert(1); }

/* ══ تبلت و موبایل (≤1023px): رفتار ریل پوسته ══ */
@media (max-width: 1023px) {
  /* در صفحاتِ غیرچت، ریل به نوار باریک آیکونی جمع می‌شه (مثل قبل) */
  body:not([data-page="chat"]) #rightSidebar {
    width: 62px !important; min-width: 62px !important; flex-shrink: 0;
    transition: width .28s ease, min-width .28s ease;
  }
  body:not([data-page="chat"]) #rightSidebar .sidebar-text,
  body:not([data-page="chat"]) #rightSidebar #sidebar-logo-text { display: none !important; }
  body:not([data-page="chat"]) #rightSidebar .shell-nav-item {
    justify-content: center; padding-left: 0; padding-right: 0; gap: 0;
  }
  body:not([data-page="chat"]).mobile-sidebar-expanded #rightSidebar { width: 210px !important; min-width: 210px !important; }
  body:not([data-page="chat"]).mobile-sidebar-expanded #rightSidebar .sidebar-text { display: block !important; }
  body:not([data-page="chat"]).mobile-sidebar-expanded #rightSidebar #sidebar-logo-text { display: flex !important; }
  body:not([data-page="chat"]).mobile-sidebar-expanded #rightSidebar .shell-nav-item {
    justify-content: flex-start; padding-left: 12px; padding-right: 12px; gap: 12px;
  }

  /* در صفحهٔ چت، سایدبار یکپارچه عرض کاملش (۲۸۰px) رو نگه می‌داره تا ریل و
     لیست گفتگوها هر دو خوانا باشن. ستون چت فضای باقی‌مونده رو می‌گیره. */
  body[data-page="chat"] #rightSidebar { width: 280px !important; min-width: 280px !important; flex-shrink: 0; }

  #leftSidebar { display: none !important; }
  .sidebar-toggle-btn { display: none !important; }
}

/* ══ فقط موبایل (≤767px) ══ */
@media (max-width: 767px) {
  .cafe-shell-header { height: 56px !important; min-height: 56px; padding: 6px 8px !important; }
  #conversation { padding: 12px 10px 12px !important; }

  /* بک‌گراند سبز روشن پشت کارت مرکزی، یکدست با هدر و نوار پایین (هردو شفاف) */
  #mainContainer { height: 100vh; height: 100dvh; background: #EAF9F5 !important; overflow-x: hidden !important; }

  /* کارت مرکزی (چت/داشبورد): مستطیل لبه‌گرد شناور داخل بک‌گراند سبز.
     فاصله از هدر بالا و نوار ناوبری شناور پایین رعایت می‌شه. */
  .chat-main-wrapper {
    width: auto !important;
    /* Edge to edge: the side gutters and rounded top corners only framed the
       card in a strip of background. Padding stays inside the card; the
       bottom keeps its curve above the floating navigation. */
    margin: 0 0 calc(var(--mobile-nav-h) + 24px) !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 8px 28px rgba(8, 75, 94, 0.12) !important;
    overflow: hidden !important;
    height: calc(100vh - 56px - var(--mobile-nav-h) - 24px) !important;
    height: calc(100dvh - 56px - var(--mobile-nav-h) - 24px) !important;
    padding-bottom: 0 !important;
  }

  /* پنل‌های داخلی داخل کارت می‌مونن، لبه‌گردی و حاشیه از خود کارت میاد */
  .cafe-main-panel { border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; }

  /* در business mode هم خود کارت سفید بمونه (override استایل دسکتاپ که
     wrapper را سبز و پنل داخلی را کارت می‌کرد) */
  body[data-chat-mode="business"] .chat-main-wrapper { background: #ffffff !important; }
  body[data-chat-mode="business"] #mainContainer > div:last-child { background: #ffffff !important; }
  body[data-chat-mode="business"] .cafe-main-panel { background: #ffffff !important; }

  /* input bar padding on mobile */
  .chat-input-bar { padding-bottom: 0px !important; }

  /* وقتی روی چت هستیم، navbar پایین مخفی و کارت تمام ارتفاع رو می‌گیره */
  body.mob-in-chat #mobileBottomNav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(120%) !important;
  }
  body.mob-in-chat .chat-main-wrapper {
    margin: 0 !important;
    border-radius: 0 !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
  }
  /* هدر در موبایل چت: دکمه بازگشت نشون داده بشه، بقیه المان‌ها مخفی */
  body.mob-in-chat .mob-chat-hide-on-chat { display: none !important; }
  body.mob-in-chat .mob-chat-back-btn { display: flex !important; }
  body:not(.mob-in-chat) .mob-chat-back-btn { display: none !important; }

  /* ریل پوسته در صفحه‌های غیرچت مخفی (نوار ناوبری پایین جایگزینش می‌شه) */
  body:not([data-page="chat"]) #rightSidebar,
  body:not([data-page="chat"]).mobile-sidebar-expanded #rightSidebar {
    display: none !important;
  }

  /* The chat page's sidebar is the mobile drawer, and it carries what the
     desktop one carries: the sections first, the conversations under them.
     Closed it is not in the page at all, so no layout can scroll to it; the
     button slides the whole panel in.
     The backdrop-filter has to go with it: it makes this element the
     containing block for its own fixed children, which is what let the panel
     widen the document and kept it stacked under the page header. */
  html body[data-page="chat"] #rightSidebar,
  html body.neon-shell[data-page="chat"] #rightSidebar,
  html.theme-light body[data-page="chat"] #rightSidebar {
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 85vw;
    z-index: 201;
    display: none !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
    background: var(--cafe-shell-bg) !important;
    box-shadow: -8px 0 32px rgba(8,75,94,0.18);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body[data-page="chat"].chat-sessions-open #rightSidebar,
  html body.neon-shell[data-page="chat"].chat-sessions-open #rightSidebar,
  html.theme-light body[data-page="chat"].chat-sessions-open #rightSidebar {
    display: flex !important;
    animation: chatSessionsDrawerIn .28s ease;
  }
  /* Inside the drawer everything reads as it does on a wide screen. */
  body[data-page="chat"] #rightSidebar > .flex.items-center,  /* لوگو */
  body[data-page="chat"] #rightSidebar #sidebar-logo-text { display: flex !important; }
  body[data-page="chat"] #rightSidebar .sidebar-text { display: block !important; }
  body[data-page="chat"] #rightSidebar .sidebar-nav-rail,
  body[data-page="chat"] #rightSidebar .sidebar-nav-rail.has-chat-sessions {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
    overflow: visible !important;
  }
  /* Everything except three: the drawer itself, the stylesheet that sits among
     these children (shown, it printed as text), and the flexible spacer, which
     is hidden whenever the conversations are here and otherwise grows and
     leaves the list a sliver of the drawer. */
  body[data-page="chat"] #rightSidebar .sidebar-nav-rail.has-chat-sessions
    > :not(#sidebarChatSection):not(style):not(.sidebar-nav-spacer) {
    display: block !important;
  }
  body[data-page="chat"] #rightSidebar .shell-nav-item {
    justify-content: flex-start !important;
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body[data-page="chat"] #sidebarChatSection {
    position: static !important;
    display: flex !important;
    width: auto !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  #sidebarChatSection .sidebar-chat-divider { display: none; }
  /* Was an inline <style> in the component, where the drawer printed it. */
  .sidebar-chat-section { border-radius: 24px 0 0 24px !important; }

  /* overlay پشت drawer گفتگوها */
  #chatSessionsOverlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(8,23,42,0.42);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  body.chat-sessions-open #chatSessionsOverlay { opacity: 1; pointer-events: auto; }
}


/* دکمه بازگشت به داشبورد فقط موبایل است */
.mob-chat-back-btn { display: none !important; }

/* انتخاب نرم‌افزار فقط در صفحه چت نمایش داده می‌شود (نه تنظیمات/پلن) */
body:not([data-page="chat"]) .app-selector-wrap { display: none !important; }

/* دکمه‌های فقط-موبایل به‌صورت پیش‌فرض مخفی روی دسکتاپ */
.mobile-only-inline { display: none; }
@media (max-width: 767px) { .mobile-only-inline { display: inline-flex; } }

.shell-nav-item.shell-nav-active {
  background: rgb(var(--secondary-color)) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37,144,184,0.28);
}
.shell-nav-item.shell-nav-active img { filter: brightness(0) invert(1) !important; }
.shell-nav-item {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #2590b8 !important;
  transition: all 0.15s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.shell-nav-item img {
  /* Colorize the icon to match #2590b8 */
  filter: brightness(0) saturate(100%) invert(49%) sepia(35%) saturate(1135%) hue-rotate(152deg) brightness(92%) contrast(87%);
  opacity: 0.9;
}
.shell-nav-item:hover:not(.shell-nav-active) { background: rgba(37,144,184,0.07) !important; color: #fff !important; }
.shell-nav-item:hover:not(.shell-nav-active) img { filter: brightness(0) invert(1); }

/* ── The orb behind the empty chat ───────────────────────────────────────────
   Same animation as the dashboard's, but as a backdrop: it sits behind the
   welcome card, takes no pointer events, and has no hover state — on the
   dashboard hovering starts the rings and the core, which would be an
   invitation to click something that is not there. */
/* clip, not hidden: the orb must not be able to widen the page, and clip does
   not make this a scroll container. Nothing is cut off any more because the
   orb is sized to this box rather than overflowing it — see below. */
.chat-welcome { position: relative; overflow: clip; }

/* The closed conversations drawer is not placed off-canvas at all; see the
   drawer rules below. Clipping the page to hide it was the wrong cure: where
   the panel is reachable only by scrolling sideways, clipping takes the
   conversations away entirely. */
@keyframes chatSessionsDrawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* A finger cannot hover. Controls that appear only on hover were unreachable
   on a touch screen: a conversation could not be deleted or pinned there, and
   an attached file could not be taken off again. Where the pointer cannot
   hover they are simply always visible. */
@media (hover: none) {
  [class*="group-hover:opacity-100"] { opacity: 1 !important; }
  #sidebarChatSection [class*="group-hover:opacity-100"] button { color: #64748b !important; }
  #sidebarChatSection [class*="group-hover:opacity-100"] img { opacity: .8; }
}
.chat-welcome > * { position: relative; z-index: 1; }
.chat-welcome-siri {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 124px;
  height: 124px;
  transform: translate(-50%, -50%) scale(2.7);
  pointer-events: none;
  z-index: 0;
  opacity: .42;
}
.chat-welcome-siri .blob {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  filter: blur(18px);
  animation: chatWelcomeSiri 5s ease-in-out infinite;
}
.chat-welcome-siri .blob:nth-child(1) { background: radial-gradient(circle at 32% 30%, #22d3ee, transparent 62%); }
.chat-welcome-siri .blob:nth-child(2) { background: radial-gradient(circle at 70% 38%, #a855f7, transparent 62%); animation-delay: -1.6s; }
.chat-welcome-siri .blob:nth-child(3) { background: radial-gradient(circle at 50% 72%, #ec4899, transparent 62%); animation-delay: -3.2s; }
@keyframes chatWelcomeSiri {
  0%, 100% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.16) translate(7px, -5px); }
  66% { transform: scale(.88) translate(-7px, 5px); }
}
/* On the desktop layout it fills the empty area instead of being scaled by a
   fixed amount: at a fixed size it was cut off at the top and bottom on a
   short window, and letting it hang past the edge made the column scrollable.
   Square, as tall as the space it sits in, and never wider than it.
   The soft look came from the blur growing with the scale (18px at x4.86 is
   about 87px); drawn at full size the blur has to be sized to match, or the
   edge turns crisp and round. So blur, inset and drift are in container units,
   the same proportions the scaled orb had. */
@media (min-width: 1024px) {
  .chat-welcome { container-type: size; }
  /* 88%, not 100%: the blur's halo runs past the box, and at full height it
     met the edges of the area as a faint straight line. */
  .chat-welcome-siri {
    top: 50%;
    width: auto;
    height: 88%;
    aspect-ratio: 1;
    max-width: 100%;
    transform: translate(-50%, -50%);
  }
  .chat-welcome-siri .blob {
    inset: 6.5%;
    filter: blur(14.5cqh);
    animation-name: chatWelcomeSiriLarge;
  }
}
@keyframes chatWelcomeSiriLarge {
  0%, 100% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.16) translate(5.6cqh, -4cqh); }
  66% { transform: scale(.88) translate(-5.6cqh, 4cqh); }
}
html.perf-mode .chat-welcome-siri .blob { animation: none !important; filter: blur(10px) !important; }
@media (max-width: 767px) {
  .chat-welcome-siri { transform: translate(-50%, -50%) scale(1.9); opacity: .34; }
}

/* The gutter that lets the rounded highlight read as a pill rather than a bar
   flush to both edges. It came with the chat sidebar's own stylesheet, which
   no other page loads, so every other section had the same nav sitting tight
   against the rail. */
@media (min-width: 1024px) {
  #rightSidebar .sidebar-nav-rail { padding-inline: 10px; }
}


#sidebarChatSection .chat-mode-tabs { position: relative; isolation: isolate; overflow: visible; }
#sidebarChatSection .chat-mode-tabs::before {
  content: "";
  position: absolute;
  inset-block: 4px;
  right: 4px;
  width: calc((100% - 12px) / 2);
  border: 1px solid rgba(20,184,166,0.68);
  border-radius: 10px;
  background: rgba(255,255,255,0.68);
  box-shadow: 0 8px 18px rgba(15,118,110,0.15), 0 0 0 3px rgba(20,184,166,0.08);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 180ms ease, border-color 180ms ease;
  z-index: 0;
}
#sidebarChatSection .chat-mode-tabs.is-business::before { transform: translateX(calc(-100% - 4px)); }

#sidebarChatSection .chat-mode-tabs > .chat-mode-tab {
  position: relative; z-index: 1; color: #64748b;
  background: transparent !important; border: 1px solid transparent; box-shadow: none;
  transform: translateY(0) scale(1);
  transition: color 180ms ease, transform 180ms ease;
}
#sidebarChatSection .chat-mode-tabs > .chat-mode-tab:hover,
#sidebarChatSection .chat-mode-tabs > .chat-mode-tab:focus-visible { color: #0f766e; }
#sidebarChatSection .chat-mode-tabs > .chat-mode-tab.is-active {
  color: #0f766e; transform: translateY(-1px);
  animation: chat-mode-tab-pop 180ms ease both;
}
#sidebarChatSection .chat-mode-tabs > .chat-mode-tab i { transition: transform 180ms ease; }
#sidebarChatSection .chat-mode-tabs > .chat-mode-tab.is-active i { transform: scale(1.1); }

@keyframes chat-mode-tab-pop {
  0%   { transform: translateY(0) scale(0.98); }
  100% { transform: translateY(-1px) scale(1); }
}

#sidebarChatSection .project-list-shell { position: relative; overflow: hidden; border-radius: 10px; }
#sidebarChatSection .project-list-shell::before,
#sidebarChatSection .project-list-shell::after {
  content: ""; position: absolute; right: 0; left: 7px; height: 18px;
  opacity: 0; pointer-events: none; transition: opacity 160ms ease; z-index: 2;
}
#sidebarChatSection .project-list-shell::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(8,75,94,0.16), rgba(248,250,252,0));
}
#sidebarChatSection .project-list-shell::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(8,75,94,0.18), rgba(248,250,252,0));
}
#sidebarChatSection .project-list-shell.has-top-shadow::before,
#sidebarChatSection .project-list-shell.has-bottom-shadow::after { opacity: 1; }

#sidebarChatSection .project-list-scroll {
  --project-item-height: 46px;
  --project-list-max-height: 273px;
  min-height: var(--project-item-height);
  max-height: var(--project-list-max-height);
  overflow-y: auto; overflow-x: hidden;
  padding-inline-end: 7px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #2590B8 transparent;
}
#sidebarChatSection .project-list-scroll::-webkit-scrollbar { width: 3px; }
#sidebarChatSection .project-list-scroll::-webkit-scrollbar-track { background: transparent; }
#sidebarChatSection .project-list-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#sidebarChatSection .project-list-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #2590B8;
}
#sidebarChatSection .project-list-scroll::-webkit-scrollbar-thumb:hover {
  background: #1e7596;
}
#sidebarChatSection .project-list-item-button { min-height: var(--project-item-height); }

/* --- AI Selection Chat CSS --- */

.selection-chat-btn {
  position: fixed !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgb(8, 75, 94), rgb(37, 144, 184)) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 10px 25px -5px rgba(8, 75, 94, 0.4), 0 8px 10px -6px rgba(8, 75, 94, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation: selectionBtnPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  border: 2px solid #ffffff !important;
}

.selection-chat-btn:hover {
  transform: scale(1.1) translateY(-2px) !important;
  box-shadow: 0 20px 25px -5px rgba(8, 75, 94, 0.5), 0 10px 10px -5px rgba(8, 75, 94, 0.5) !important;
}

@keyframes selectionBtnPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Reset ALL descendants inside the popover */
.selection-chat-popover,
.selection-chat-popover *,
.selection-chat-popover *::before,
.selection-chat-popover *::after {
  box-sizing: border-box !important;
}

.selection-chat-popover {
  position: fixed !important;
  z-index: 99999 !important;
  width: 360px !important;
  max-width: 95vw !important;
  background: #0f172a !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.05) !important;
  overflow: hidden !important;
  color: #f8fafc !important;
  flex-direction: column !important;
  animation: selectionPopoverFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  transform-origin: top center;
}

@keyframes selectionPopoverFade {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.selection-chat-popover::after {
  content: '' !important;
  position: absolute !important;
  border-width: 8px !important;
  border-style: solid !important;
  z-index: 100000 !important;
  display: block !important;
}

.selection-chat-popover.arrow-down::after {
  bottom: -16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-color: #0f172a transparent transparent transparent !important;
}

.selection-chat-popover.arrow-up::after {
  top: -16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-color: transparent transparent #0f172a transparent !important;
}

.sel-chat-header {
  padding: 14px 16px !important;
  background: #1e293b !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 12.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #e2e8f0 !important;
}

.sel-chat-body {
  padding: 16px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #0f172a !important;
}

.sel-msg {
  max-width: 85% !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  word-wrap: break-word !important;
}

.sel-msg-user {
  align-self: flex-end !important;
  background: rgba(20, 184, 166, 0.2) !important;
  border: 1px solid rgba(20, 184, 166, 0.35) !important;
  color: #ccfbf1 !important;
  border-bottom-right-radius: 4px !important;
}

.sel-msg-ai {
  align-self: flex-start !important;
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  border-bottom-left-radius: 4px !important;
}

.sel-chat-footer {
  padding: 12px 16px !important;
  background: #1e293b !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sel-chat-input-wrapper {
  display: flex !important;
  align-items: center !important;
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 4px 6px 4px 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.sel-chat-input-wrapper:focus-within {
  border-color: rgba(20, 184, 166, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}

.sel-chat-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  color: #ffffff !important;
  padding: 6px 0 !important;
  text-align: right !important;
  direction: rtl !important;
}

.sel-chat-input::placeholder {
  color: rgba(148, 163, 184, 0.6) !important;
}

.sel-chat-submit {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: #14b8a6 !important;
  color: #ffffff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  flex-shrink: 0 !important;
}

.sel-chat-submit:hover {
  background: #0d9488 !important;
}

.sel-chat-submit:disabled {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.25) !important;
  cursor: not-allowed !important;
}

/* Custom color for bold text in chat */
#conversation strong,
#conversation b {
  color: #02bbac !important;
}
/* That teal is for the dark theme; on the light one it read at 2.3:1. The
   light theme's own accent, a shade deeper so it passes as body text. */
html.theme-light #conversation strong,
html.theme-light #conversation b {
  color: #c2410c !important;
}

html.theme-light .code-wrap {
  background: #f6f8fa;
  color: #1f2937;
  border-color: rgba(15, 23, 42, .1);
}
.md-code-lang { font-size: 9px; font-family: inherit; color: #94a3b8; }
html.theme-light .md-code-lang { color: #6b7280; }
.md-inline-code {
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
  background: rgba(34, 211, 238, .12);
  color: #67e8f9;
}
html.theme-light .md-inline-code { background: #f3f4f6; color: #ED7C22; }
.md-list-marker { color: #22d3ee; }
html.theme-light .md-list-marker { color: #c2410c; }

/* Custom color for list markers in AI messages */
#conversation .msg-ai ul li::marker,
#conversation .msg-ai ol li::marker {
  color: #0f766e !important;
}
.chat-thinking-box {
  background: rgba(15, 118, 110, 0.06);
  border-right: 3px solid rgba(15, 118, 110, 0.4);
  padding: 12px 16px;
  border-radius: 8px 2px 2px 8px;
  margin-bottom: 16px;
  font-size: 0.88em;
  color: var(--cafe-primary-hex);
  opacity: 0.9;
  line-height: 1.7;
}
.chat-thinking-box summary {
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0f766e;
  outline: none;
  user-select: none;
  font-size: 1.05em;
}
.chat-thinking-box summary::marker {
  display: none;
  content: '';
}
.chat-thinking-box summary::-webkit-details-marker {
  display: none;
}





/* ── Expert swiper ──────────────────────────────────────────────────────────
   Slides move downward: the incoming line enters from above and the outgoing
   one leaves through the bottom. Only one slide is visible at a time, so the
   track is clipped and every slide is absolutely positioned.                */
.expert-swiper-slide {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.expert-swiper-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}

.expert-swiper-slide.is-leaving {
  opacity: 0;
  transform: translateY(100%);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}



/* ── Expert group collapse ───────────────────────────────────────────────────
   Animating grid-template-rows from 0fr to 1fr transitions to the content's
   natural height, which a max-height guess cannot do without either clipping
   long groups or easing against dead space.                                  */
.expert-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.expert-collapse.is-open {
  grid-template-rows: 1fr;
}

.expert-collapse-inner {
  min-height: 0;
  overflow: hidden;
}



/* ── «انیشتین» router card ───────────────────────────────────────────────────
   Translucent gold over whatever the panel background is, rather than a solid
   light fill: the shell paints body text light in its dark theme, so a pale
   card left the title white-on-white and unreadable.                         */
.expert-router-card {
  border-color: rgba(212, 175, 55, 0.55);
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.16),
    0 6px 22px rgba(212, 175, 55, 0.10);
}

.expert-router-card:hover {
  border-color: rgba(212, 175, 55, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.30),
    0 8px 28px rgba(212, 175, 55, 0.22);
}

.expert-router-card.is-selected {
  border-color: rgb(212, 175, 55);
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.45),
    0 8px 30px rgba(212, 175, 55, 0.26);
}

.expert-router-icon {
  background: rgba(212, 175, 55, 0.16);
  color: #d9b64a;
}

/* Set explicitly so neither theme can wash the title out. */
.expert-router-name {
  color: #e8c766;
}

.expert-router-check {
  color: #d9b64a;
}


/* The model picker's search bar. Its colours were an inline style attribute,
   but x-transition rewrites that attribute to animate the element, and the
   browser reserialises the value in the process — so a stylesheet rule
   matching the literal text stopped applying the moment the panel opened. */
.model-search-bar {
  background: rgba(8, 12, 28, .7);
  border: 1.5px solid rgba(120, 160, 255, .18);
}

/* ── Picker tabs and choice chips ─────────────────────────────────────────────
   Their states were inline dark-theme colours bound from the templates, so the
   light theme drew them unchanged: the active tab was white on pale cyan
   (1.03:1), the rest pale blue on white (about 2:1). Classes now, per theme. */
.picker-tab { color: #9fb3d4; background: transparent; }
.picker-tab.is-on {
  color: #fff;
  background: linear-gradient(180deg, rgba(34,211,238,.34), rgba(34,211,238,.22));
  box-shadow: 0 3px 14px rgba(34,211,238,.4), inset 0 0 0 1px rgba(34,211,238,.65);
}
.picker-tab--violet.is-on {
  background: rgba(168,85,247,.22);
  box-shadow: 0 3px 14px rgba(168,85,247,.4), inset 0 0 0 1px rgba(168,85,247,.65);
}
html.theme-light .picker-tab { color: #64748b; }
html.theme-light .picker-tab.is-on,
html.theme-light .picker-tab--violet.is-on {
  color: #c2410c;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.1), inset 0 0 0 1px rgba(237,124,34,.45);
}

.picker-chip { border-color: rgba(120,160,255,.18); color: #9fb3d4; }
.picker-chip.is-on { border-color: #22d3ee; background: rgba(34,211,238,.14); color: #fff; }
html.theme-light .picker-chip { border-color: #d6d9e0; color: #475569; }
html.theme-light .picker-chip.is-on { border-color: #ed7c22; background: rgba(237,124,34,.1); color: #ED7C22; }

/* A hovered conversation turns orange in the light theme, and so did the chip
   its icon sits on (forced to the primary with !important) and the icon
   itself: all three the same colour, the icon gone. The delete glyph was
   tinted orange too. On hover the chip goes white under an orange icon, and
   the row's actions go white. */
html.theme-light #sidebarChatSection .group:hover .bg-teal-600,
html.theme-light #sidebarChatSection .group:hover .bg-amber-500 {
  background-color: #fff !important;
}
html.theme-light #sidebarChatSection .group:hover .bg-teal-600 i,
html.theme-light #sidebarChatSection .group:hover .bg-amber-500 i {
  color: var(--cafe-primary-hex) !important;
}
html.theme-light #sidebarChatSection .group:hover [class*="group-hover:opacity-100"] button {
  color: rgba(255, 255, 255, .92) !important;
}
html.theme-light #sidebarChatSection .group:hover [class*="group-hover:opacity-100"] img {
  filter: brightness(0) invert(1) !important;
}

/* The status dot beside «آنلاین» was pale teal, which the light theme turned
   pale peach on a pale-peach pill: nothing to see. Green means online in
   both themes, with a thin ring so it holds on either pill. */
.chat-online-dot {
  background: #22c55e !important;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7);
}
html.theme-light .chat-online-dot { box-shadow: 0 0 0 1.5px rgba(22, 163, 74, .25); }

/* The open conversation keeps its pale highlight and has no hover colour of
   its own, yet its title, preview, time and actions still turn white on hover
   like every other row's: white on pale peach. Hovered, it takes the same
   fill as any other row, which is what that white text is drawn for. */
html.theme-light #sidebarChatSection .group.bg-teal-100:hover {
  background-color: var(--cafe-primary-hex) !important;
}
/* The open row's title is coloured by a stronger theme rule than its own
   group-hover:text-white, so it stayed dark orange on the orange fill. */
html.theme-light #sidebarChatSection .group:hover [class*="group-hover:text-white"] {
  color: #fff !important;
}

/* ── The message box ─────────────────────────────────────────────────────────
   The accent stroke is always there, not only on focus; focusing deepens it,
   and while keys are coming in it glows. The accent follows the theme: orange
   on light, the cyan the dark theme uses everywhere else. The class is
   doubled to outrank the light theme's own focus rule, which would otherwise
   win by coming later. */
:root { --composer-rgb: 34, 211, 238; }
html.theme-light { --composer-rgb: 237, 124, 34; }
html body .chat-input-bar > .chat-composer.chat-composer {
  border-width: 1.5px !important;
  border-color: rgba(var(--composer-rgb), .7) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .3s ease !important;
}
html body .chat-input-bar > .chat-composer.chat-composer:focus-within {
  border-color: rgb(var(--composer-rgb)) !important;
  box-shadow: 0 0 0 3px rgba(var(--composer-rgb), .16) !important;
}
html body .chat-input-bar > .chat-composer.chat-composer.is-typing {
  border-color: rgb(var(--composer-rgb)) !important;
  box-shadow:
    0 0 0 3px rgba(var(--composer-rgb), .22),
    0 0 26px rgba(var(--composer-rgb), .38) !important;
}

/* The light theme gave the send button its accent through [title="ارسال"],
   which the button never had, so it stayed pale even once there was a message
   to send. Ready is solid accent with a white glyph; not ready stays grey. */
html.theme-light .chat-input-bar button.chat-send:not(:disabled) {
  background: var(--orange-primary) !important;
}
html.theme-light .chat-input-bar button.chat-send:not(:disabled):hover {
  background: var(--orange-hover) !important;
}
html.theme-light .chat-input-bar button.chat-send:not(:disabled) i { color: #fff !important; }
html.theme-light .chat-input-bar button.chat-send:disabled { background: #eef0f3 !important; }
html.theme-light .chat-input-bar button.chat-send:disabled i { color: #a0a7b4 !important; }

/* The name over the empty chat, lifted off the orb behind it. White suits the
   light theme's pale ground; on the dark one a white offset reads as a
   misprint, so there it stays flat. */
/* Outranks the light theme's blanket «nothing glows on paper» rule
   (.neon-shell * { text-shadow: none !important }) for this one element. */
html.theme-light .neon-shell .chat-welcome-brand { text-shadow: 2px 2px #fff !important; }