/* Persian UI — GapGPT-style (AzarMehr + RTL). Do NOT force font on every descendant
   (that breaks icon fonts and can make the UI look messy). */

@font-face {
  font-family: "AzarMehr";
  src: url("/assets/fonts/persian/AzarMehr-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AzarMehr";
  src: url("/assets/fonts/persian/AzarMehr-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AzarMehr";
  src: url("/assets/fonts/persian/AzarMehr-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AzarMehr";
  src: url("/assets/fonts/persian/AzarMehr-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/persian/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/persian/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/persian/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/persian/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-family-persian: "AzarMehr", "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-family-english: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-code: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html[lang^="fa"],
html[dir="rtl"],
html[dir="rtl"] body {
  font-family: var(--font-family-persian) !important;
  direction: rtl !important;
  text-align: start;
  line-height: 1.75;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  font-feature-settings: "liga" 1, "calt" 1;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Inherit Persian font — do not override icon / code / SVG fonts */
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] label,
html[dir="rtl"] p,
html[dir="rtl"] span:not([class*="icon"]):not([class*="Icon"]):not(.persian-greeting-fixed):not(.sr-only),
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] .markdown,
html[dir="rtl"] .markdown *,
html[dir="rtl"] [class*="message"],
html[dir="rtl"] [class*="Message"],
html[dir="rtl"] [class*="prose"] {
  font-family: var(--font-family-persian) !important;
  letter-spacing: 0 !important;
}

/* Restore icon fonts LibreChat relies on */
html[dir="rtl"] .material-icons,
html[dir="rtl"] .material-icons-outlined,
html[dir="rtl"] [class*="lucide"],
html[dir="rtl"] [data-lucide],
html[dir="rtl"] svg,
html[dir="rtl"] i[class*="icon"] {
  font-family: inherit;
  letter-spacing: normal !important;
}

/* Composer text: Persian RTL typing only — do not flip the whole send bar */
html[dir="rtl"] form textarea,
html[dir="rtl"] form [role="textbox"] {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext;
  font-family: var(--font-family-persian) !important;
}

html[dir="rtl"] form textarea::placeholder {
  text-align: right !important;
  direction: rtl !important;
  opacity: 0.7;
  font-family: var(--font-family-persian) !important;
}

/* Keep the send/tools bar in DEFAULT LibreChat layout (send button on the RIGHT) */
html[dir="rtl"] form.mx-auto.flex.w-full,
html[dir="rtl"] form .flex.w-full.items-center,
html[dir="rtl"] form .relative.flex.w-full.flex-grow.flex-col,
html[dir="rtl"] form .items-between.flex.gap-2.pb-2.flex-row,
html[dir="rtl"] form [class*="items-between"].flex.flex-row {
  direction: ltr !important;
}

/* Explicit: send control stays on the right edge of the composer */
html[dir="rtl"] form button[aria-label="ارسال پیام"],
html[dir="rtl"] form button[aria-label*="Send"],
html[dir="rtl"] form button[aria-label*="ارسال"] {
  /* parent toolbar is LTR; no flip needed */
}

/* Code stays LTR */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] pre *,
html[dir="rtl"] .hljs,
html[dir="rtl"] [class*="language-"],
html[dir="rtl"] .cm-editor,
html[dir="rtl"] .cm-editor *,
html[dir="rtl"] .monaco-editor,
html[dir="rtl"] .monaco-editor * {
  direction: ltr !important;
  text-align: left !important;
  font-family: var(--font-family-code) !important;
  unicode-bidi: isolate;
  letter-spacing: normal !important;
}

html[dir="rtl"] [lang="en"],
html[dir="rtl"] [lang="en"] * {
  font-family: var(--font-family-english) !important;
}

/* Landing greeting — larger, clearer Persian */
html[dir="rtl"] h1,
html[dir="rtl"] [class*="greeting"],
html[dir="rtl"] [class*="Greeting"] {
  font-family: var(--font-family-persian) !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
}

/*
 * LibreChat animates the greeting by splitting EVERY character into its own
 * inline-block <span> (.split-parent). That breaks Arabic/Persian shaping
 * (letters won't join) and reverses Latin names (saeed → deeas).
 * Hide the split animation and show plain text instead (CSS + JS).
 */
html[dir="rtl"] p.split-parent {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

html[dir="rtl"] span.persian-greeting-fixed {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 0 !important;
  font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  /* Match LibreChat primary text (dark mode: light gray, not black) */
  color: var(--text-primary, #ececec) !important;
  font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif !important;
  direction: rtl !important;
  unicode-bidi: isolate !important;
  text-align: center !important;
  display: inline-block !important;
}

html[dir="rtl"] .flex.items-center.justify-center.gap-2 > span.sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 0 !important;
  font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  color: inherit !important;
  font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif !important;
  direction: rtl !important;
  text-align: center !important;
  display: inline-block !important;
}

/* When JS replaced the split greeting, keep sr-only hidden (avoid double text) */
html[dir="rtl"] .flex.items-center.justify-center.gap-2:has(span.persian-greeting-fixed) > span.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 0 !important;
}

/* ==========================================================================
   Sidebar (right menu) — LibreChat uses physical LTR flex + ReactVirtualized.
   Important: do NOT combine direction:rtl with flex-direction:row-reverse
   (they cancel and icons stay on the left). Use direction:rtl + flex row.
   ========================================================================== */

html[dir="rtl"] #chat-history-nav,
html[dir="rtl"] #chat-history-nav .ReactVirtualized__Grid,
html[dir="rtl"] #chat-history-nav .ReactVirtualized__List,
html[dir="rtl"] #chat-history-nav .ReactVirtualized__Grid__innerScrollContainer,
html[dir="rtl"] #chat-history-nav .ReactVirtualized__Grid__innerScrollContainer > div {
  direction: rtl !important;
  text-align: right !important;
}

/* Header "Chats" */
html[dir="rtl"] #chat-history-nav .flex.items-center.justify-between,
html[dir="rtl"] #chat-history-nav button.group.flex.w-full.items-center.justify-between {
  direction: rtl !important;
  flex-direction: row !important;
  text-align: right !important;
}

/* Conversation rows */
html[dir="rtl"] #chat-history-nav .group.relative.flex.h-12,
html[dir="rtl"] #chat-history-nav .group.relative.flex.items-center,
html[dir="rtl"] #chat-history-nav .flex.grow.items-center.gap-2 {
  direction: rtl !important;
  flex-direction: row !important;
  text-align: right !important;
  justify-content: flex-start !important;
}

html[dir="rtl"] #chat-history-nav .relative.flex-1.grow.overflow-hidden.whitespace-nowrap {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext;
}

/* Date section labels */
html[dir="rtl"] #chat-history-nav h2 {
  text-align: right !important;
  direction: rtl !important;
  width: 100%;
}

/* User account button — allow plan badge beside name */
html[dir="rtl"] #chat-history-nav [data-testid="nav-user"],
html[dir="rtl"] [data-testid="nav-user"] {
  direction: rtl !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
}

html[dir="rtl"] #chat-history-nav button.mt-text-sm.flex {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
}

/* Title fade mask → left side in RTL */
html[dir="rtl"] #chat-history-nav .absolute.bottom-0.right-0.top-0.w-20 {
  right: auto !important;
  left: 0 !important;
  transform: scaleX(-1);
}

html[dir="rtl"] #chat-history-nav .origin-left {
  transform-origin: right center !important;
}

html[dir="rtl"] aside {
  direction: rtl !important;
}

/* Account plan badge (free / pro / …) */
.xcr9-plan-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  flex-shrink: 0;
  margin-inline-start: 0.35rem;
  min-width: 0;
}

.xcr9-plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem 0.5rem;
  border-radius: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  border: 1px solid transparent;
  font-family: var(--font-family-persian);
}

.xcr9-plan-limit {
  font-size: 0.62rem;
  opacity: 0.75;
  white-space: nowrap;
  line-height: 1.2;
  color: inherit;
  font-family: var(--font-family-persian);
}

.xcr9-plan-badge--free {
  color: #3f3f46;
  background: #f4f4f5;
  border-color: #e4e4e7;
}

.xcr9-plan-badge--starter {
  color: #1e3a5f;
  background: #e8f1fb;
  border-color: #bfd6f2;
}

.xcr9-plan-badge--pro {
  color: #14532d;
  background: #e8f8ee;
  border-color: #a7e3bf;
}

html.dark .xcr9-plan-badge--free,
.dark .xcr9-plan-badge--free {
  color: #e4e4e7;
  background: #27272a;
  border-color: #3f3f46;
}

html.dark .xcr9-plan-badge--starter,
.dark .xcr9-plan-badge--starter {
  color: #dbeafe;
  background: #1e293b;
  border-color: #334155;
}

html.dark .xcr9-plan-badge--pro,
.dark .xcr9-plan-badge--pro {
  color: #bbf7d0;
  background: #14532d55;
  border-color: #166534;
}

.xcr9-plan-menu {
  margin: 0.35rem 0.75rem 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  background: rgba(127, 127, 127, 0.12);
  line-height: 1.6;
  font-size: 0.82rem;
}

.xcr9-settings-plan {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(127, 127, 127, 0.25);
  background: rgba(127, 127, 127, 0.08);
}

.xcr9-settings-plan-title {
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.xcr9-settings-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 0.35rem 0;
}

.xcr9-settings-plan-hint {
  margin: 0.45rem 0 0;
  opacity: 0.7;
  font-size: 0.75rem;
}

/* Hide leftover token-balance UI if config cache still enables it briefly */
[data-testid="nav-user"] ~ * .text-token-text-secondary:has(+ *),
.popover-ui .text-token-text-secondary:has(> :only-child) {
  /* no-op; balance row removed via balance.enabled=false */
}