/* 968.ai — LibreChat skin (design system v2, Brainwave direction).
 *
 * Rule of this file: restyle through LibreChat's OWN theme variables first
 * (surface/text/border tokens + the shadcn HSL set). Those are the contract the
 * app's components are built on, so they survive upgrades. Element selectors are
 * kept to a short, documented list at the bottom — that brittle layer is what
 * kept breaking the previous theme.
 */

/* ---------------- fonts ---------------- */
html, body, button, input, textarea, select {
  font-family: 'Sora', 'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
html[lang^="ar"] body, html[lang^="ar"] button, html[lang^="ar"] input,
html[lang^="ar"] textarea, html[dir="rtl"] body {
  font-family: 'Readex Pro', 'Sora', system-ui, sans-serif !important;
}
code, pre, kbd, samp, .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ---------------- light ---------------- */
html {
  --g-accent: #B0303B;               /* the one accent (Omani red, deepened for white) */
  --g-red: var(--g-accent);
  --g-accent-soft: rgba(176, 48, 59, .10);
  --g-glow: var(--g-accent);

  --brand-purple: #B0303B;
  --presentation: #FFFFFF;
  --text-primary: #111113;
  --text-secondary: #46464C;
  --text-secondary-alt: #63636A;
  --text-tertiary: #8A8A92;
  --header-primary: #FFFFFF;
  --header-hover: #F4F4F5;
  --header-button-hover: #F4F4F5;
  --surface-active: #EBEBED;
  --surface-active-alt: #EFEFF1;
  --surface-hover: #F2F2F3;
  --surface-hover-alt: #E7E7E9;
  --surface-primary: #FFFFFF;
  --surface-primary-alt: #FAFAFA;
  --surface-primary-contrast: #F4F4F5;
  --surface-secondary: #F8F8F9;
  --surface-secondary-alt: #EEEEF0;
  --surface-tertiary: #F2F2F3;
  --surface-tertiary-alt: #FFFFFF;
  --surface-dialog: #FFFFFF;
  --surface-submit: #111113;
  --surface-submit-hover: #2A2A2D;
  --surface-chat: #FFFFFF;
  --border-light: #ECECEE;
  --border-medium-alt: #E1E1E4;
  --border-medium: #E1E1E4;
  --border-heavy: #CBCBD0;
  --border-xheavy: #A9A9B0;

  --background: 0 0% 100%;
  --foreground: 240 6% 7%;
  --card: 0 0% 100%;
  --card-foreground: 240 6% 7%;
  --primary: 240 6% 7%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 5% 97%;
  --secondary-foreground: 240 6% 7%;
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 42%;
  --accent: 240 5% 96%;
  --accent-foreground: 240 6% 7%;
  --border: 240 6% 92%;
  --input: 240 6% 89%;
  --ring: 240 4% 46%;
  --radius: .75rem;
}

/* ---------------- dark (default) ---------------- */
html.dark, .dark {
  --g-accent: #E06A73;
  --g-red: var(--g-accent);
  --g-accent-soft: rgba(200, 65, 75, .14);
  --g-glow: var(--g-accent);

  --brand-purple: #E06A73;
  --presentation: #0C0C0D;
  --text-primary: #FFFFFF;
  --text-secondary: #D9D9DC;
  --text-secondary-alt: #A6A6AD;
  --text-tertiary: #75757C;
  --header-primary: #0C0C0D;
  --header-hover: #1B1B1D;
  --header-button-hover: #1B1B1D;
  --surface-active: #2F2F32;
  --surface-active-alt: #252527;
  --surface-hover: #252527;
  --surface-hover-alt: #2F2F32;
  --surface-primary: #0C0C0D;
  --surface-primary-alt: #141415;
  --surface-primary-contrast: #141415;
  --surface-secondary: #141415;
  --surface-secondary-alt: #1B1B1D;
  --surface-tertiary: #1B1B1D;
  --surface-tertiary-alt: #1B1B1D;
  --surface-dialog: #141415;
  --surface-submit: #E9E9EC;
  --surface-submit-hover: #FFFFFF;
  --surface-chat: #141415;
  --border-light: #262628;
  --border-medium-alt: #2F2F32;
  --border-medium: #2F2F32;
  --border-heavy: #38383B;
  --border-xheavy: #4A4A4F;

  --background: 240 4% 5%;
  --foreground: 0 0% 100%;
  --card: 240 3% 8%;
  --card-foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --primary-foreground: 240 4% 5%;
  --secondary: 240 4% 11%;
  --secondary-foreground: 0 0% 100%;
  --muted: 240 4% 11%;
  --muted-foreground: 240 4% 66%;
  --accent: 240 3% 15%;
  --accent-foreground: 0 0% 100%;
  --border: 240 3% 15%;
  --input: 240 3% 15%;
  --ring: 240 4% 60%;

  --gray-900: #0C0C0D;
  --gray-850: #141415;
  --gray-800: #1B1B1D;
  --gray-700: #252527;
  --gray-600: #2F2F32;
  --gray-500: #38383B;
}
html.dark body, .dark body { background: #0C0C0D; color-scheme: dark; }
::selection { background: rgba(200, 65, 75, .30); }

/* ================= component layer (keep short) ================= */

/* Composer: the one place the brand gradient lives inside the app.
   Hook = the textarea's form wrapper (stable since 0.7: form > div.rounded-*). */
form textarea#prompt-textarea, form textarea[data-testid="text-input"] {
  font-size: 16px !important; line-height: 1.6 !important;
}
form:has(textarea#prompt-textarea) > div > div[class*="rounded-"]:has(textarea) ,
form:has(textarea#prompt-textarea) div[class*="rounded-t-"][class*="rounded-b-"]:has(textarea) {
  border-radius: 24px !important;
  border: 1px solid var(--border-medium) !important;
  background: var(--surface-chat) !important;
  box-shadow: 0 18px 50px -28px rgba(0, 0, 0, .55) !important;
  transition: border-color .2s, box-shadow .2s;
}
.dark form:has(textarea#prompt-textarea:focus) div[class*="rounded-"]:has(> * textarea, > textarea) {
  border-color: rgba(255, 255, 255, .30) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05) !important;
}
html:not(.dark) form:has(textarea#prompt-textarea:focus) div[class*="rounded-"]:has(> * textarea, > textarea) {
  border-color: rgba(17, 17, 19, .35) !important;
  box-shadow: 0 0 0 3px rgba(17, 17, 19, .05) !important;
}
/* send button */
button[data-testid="send-button"] {
  background: var(--text-primary) !important; color: var(--surface-primary) !important;
  border-radius: 999px !important;
}
button[data-testid="send-button"]:disabled { opacity: .3 !important; }
button[data-testid="send-button"] svg { color: inherit !important; }

/* user bubble */
.user-turn .text-message, .user-turn [class*="bg-surface-tertiary"] {
  border-radius: 20px !important;
}
.dark .user-turn .text-message { color: #FFFFFF; }

/* model selector capsule */
button[data-testid="model-selector-button"] {
  border-radius: 999px !important; border: 1px solid var(--border-medium) !important;
  background: var(--surface-secondary) !important; font-weight: 600 !important;
}
button[data-testid="model-selector-button"]:hover { background: var(--surface-hover) !important; }

/* sidebar: active conversation gets an accent edge */
nav [data-testid="convo-item"] { border-radius: 10px !important; }
nav [data-testid="convo-item"][class~="bg-surface-active"],
nav [data-testid="convo-item"][class~="bg-surface-active-alt"] {
  box-shadow: inset 2px 0 0 var(--g-accent);
}
html[dir="rtl"] nav [data-testid="convo-item"][class~="bg-surface-active-alt"] { box-shadow: inset -2px 0 0 var(--g-accent); }

/* primary buttons that LibreChat paints green (Submit/Save) → accent */
.bg-surface-submit, .btn-primary { background-color: var(--surface-submit) !important; color: var(--surface-primary) !important; }
.hover\:bg-surface-submit-hover:hover { background-color: var(--surface-submit-hover) !important; }

/* links in answers */
.markdown a, .prose a { color: var(--g-accent) !important; text-decoration-color: color-mix(in srgb, var(--g-accent) 40%, transparent) !important; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-heavy) transparent; }

/* ================= auth pages (login / register / reset) ================= */
/* LibreChat's auth layout is a centered card on a plain page; give it the
   site's ink background, a glow orb and the gradient mark. */
.dark body:has(#email), .dark body:has(input[name="email"]) {
  background:
    radial-gradient(620px 380px at 50% -15%, rgba(200, 65, 75, .10), transparent 70%),
    #0C0C0D !important;
}
body:has(#email) main, body:has(input[name="email"]) main { background: transparent !important; }
body:has(#email) img[alt*="Logo" i], body:has(#email) img[src*="logo"] {
  content: url(/v2/mark.svg); width: 56px !important; height: 56px !important; object-fit: contain;
}
body:has(#email) h1 { font-weight: 600 !important; letter-spacing: -.01em; }
body:has(#email) input:not([type="checkbox"]) {
  border-radius: 14px !important; height: 50px !important;
}
body:has(#email) button[type="submit"] {
  border-radius: 999px !important; height: 50px !important; font-weight: 600 !important;
  background: var(--text-primary) !important; color: var(--surface-primary) !important;
  box-shadow: none !important; background-image: none !important;
}
body:has(#email) button[type="submit"]:hover { opacity: .9; }
body:has(#email) a[href*="/oauth/"], body:has(#email) button[aria-label*="Google" i] {
  border-radius: 999px !important; height: 50px !important;
}

/* empty-chat greeting (see index.html .g968-landing script) */
.g968-landing .shadow-stroke {
  width: 64px !important; height: 64px !important; box-shadow: none !important;
  background: url(/v2/mark.svg) center / 40px no-repeat, var(--surface-secondary) !important;
  border: 1px solid var(--border-medium); position: relative;
}
.g968-landing .shadow-stroke > * { visibility: hidden; }
html:not(.dark) .g968-landing .shadow-stroke { background: url(/v2/mark-dark.svg) center / 40px no-repeat, var(--surface-secondary) !important; }
.g968-landing .size-10 { width: 64px !important; height: 64px !important; }
.dark .g968-landing .shadow-stroke { box-shadow: 0 20px 50px -20px rgba(0,0,0,.8) !important; }
.g968-landing { max-height: none !important; padding-bottom: 28px !important; }
.g968-hello { text-align: center; margin-top: 18px; padding: 0 16px; }
.g968-hello h1 { margin: 0; font-size: clamp(26px, 3.4vw, 34px); font-weight: 500; letter-spacing: -.02em; color: var(--text-primary); }
html[lang^="ar"] .g968-hello h1 { letter-spacing: 0; }
.g968-hello p { margin: 6px 0 0; font-size: 17px; color: var(--text-secondary); }

/* ================= 968.ai injected controls ================= */
.g968-acct {
  position: fixed; top: 10px; inset-inline-end: 12px; z-index: 30;
  display: flex; align-items: center; gap: 6px;
}
.g968-acct a { text-decoration: none; }
.g968-bal {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--surface-secondary); border: 1px solid var(--border-medium);
  color: var(--text-primary); font-size: 13px; font-weight: 600;
}
.g968-bal:hover { background: var(--surface-hover); }
.g968-bal svg { width: 13px; height: 13px; color: var(--text-secondary); }
.g968-cost { color: var(--text-tertiary); font-weight: 500; padding-inline-start: 6px; border-inline-start: 1px solid var(--border-medium); }
.g968-up {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  border-radius: 999px; color: var(--text-primary); font-size: 13px; font-weight: 600;
}
.g968-up::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2; background: var(--g-red); opacity: .85; }
.g968-up::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; background: var(--surface-primary); transition: background .2s; }
.g968-up:hover::after { background: var(--surface-hover); }
@media (max-width: 767px) {
  .g968-acct { top: 9px; }
  .g968-cost { display: none; }
  .g968-bal ~ .g968-up { display: none; }
  .g968-bal { height: 34px; padding: 0 10px; }
}
/* hidden while the mobile drawer is open (drawer = z-[110] panel on screen) */
body:has(div[class*="z-[110]"][class*="translate-x-0"]) .g968-acct { display: none; }

.g968-a2hs {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 16px;
  background: var(--surface-dialog); border: 1px solid var(--border-medium); color: var(--text-primary);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); font-size: 14px;
}
.g968-a2hs-t { flex: 1; }
.g968-a2hs-go { border: none; border-radius: 999px; padding: 8px 14px; background: var(--text-primary); color: var(--surface-primary); font-weight: 600; cursor: pointer; }
.g968-a2hs-x { border: none; background: none; color: var(--text-tertiary); cursor: pointer; font-size: 16px; padding: 4px 8px; }

/* ================= generated: LibreChat teal "green" → the single accent ramp, dark grays → neutral ink ================= */
/* regenerate from the bundle CSS when LibreChat is upgraded (swap `ramp` for the green-led variant) */
.border-green-200{--tw-border-opacity:1;border-color:#EDB2B6 !important;border-color:rgba(237, 178, 182, var(--tw-border-opacity)) !important}
.border-green-400{--tw-border-opacity:1;border-color:#E06A73 !important;border-color:rgba(224, 106, 115, var(--tw-border-opacity)) !important}
.border-green-500{--tw-border-opacity:1;border-color:#C8414B !important;border-color:rgba(200, 65, 75, var(--tw-border-opacity)) !important}
.border-green-500\/20{border-color:#C8414B33 !important}
.border-green-500\/30{border-color:#C8414B4d !important}
.border-green-500\/50{border-color:#C8414B80 !important}
.border-green-500\/70{border-color:#C8414Bb3 !important}
.border-green-600{--tw-border-opacity:1;border-color:#B0303B !important;border-color:rgba(176, 48, 59, var(--tw-border-opacity)) !important}
.border-green-600\/40{border-color:#B0303B66 !important}
.bg-green-100{--tw-bg-opacity:1;background-color:#F6D8DA !important;background-color:rgba(246, 216, 218, var(--tw-bg-opacity)) !important}
.bg-green-50{--tw-bg-opacity:1;background-color:#FBEDEE !important;background-color:rgba(251, 237, 238, var(--tw-bg-opacity)) !important}
.bg-green-50\/50{background-color:#FBEDEE80 !important}
.bg-green-50\/80{background-color:#FBEDEEcc !important}
.bg-green-500{--tw-bg-opacity:1;background-color:#C8414B !important;background-color:rgba(200, 65, 75, var(--tw-bg-opacity)) !important}
.bg-green-500\/10{background-color:#C8414B1a !important}
.bg-green-500\/\[0\.06\]{background-color:#C8414B0f !important}
.bg-green-600{--tw-bg-opacity:1;background-color:#B0303B !important;background-color:rgba(176, 48, 59, var(--tw-bg-opacity)) !important}
.bg-green-600\/20{background-color:#B0303B33 !important}
.bg-green-600\/50{background-color:#B0303B80 !important}
.text-green-400{--tw-text-opacity:1;color:rgba(224, 106, 115, var(--tw-text-opacity)) !important}
.text-green-500{--tw-text-opacity:1;color:rgba(200, 65, 75, var(--tw-text-opacity)) !important}
.text-green-600{--tw-text-opacity:1;color:rgba(176, 48, 59, var(--tw-text-opacity)) !important}
.text-green-600\/50{color:#B0303B80 !important}
.text-green-700{--tw-text-opacity:1;color:rgba(150, 39, 51, var(--tw-text-opacity)) !important}
.text-green-800{--tw-text-opacity:1;color:rgba(122, 31, 41, var(--tw-text-opacity)) !important}
.hover\:border-green-500:hover{--tw-border-opacity:1;border-color:#C8414B !important;border-color:rgba(200, 65, 75, var(--tw-border-opacity)) !important}
.hover\:bg-green-100:hover{--tw-bg-opacity:1;background-color:#F6D8DA !important;background-color:rgba(246, 216, 218, var(--tw-bg-opacity)) !important}
.hover\:bg-green-400:hover{--tw-bg-opacity:1;background-color:#E06A73 !important;background-color:rgba(224, 106, 115, var(--tw-bg-opacity)) !important}
.hover\:bg-green-500:hover{--tw-bg-opacity:1;background-color:#C8414B !important;background-color:rgba(200, 65, 75, var(--tw-bg-opacity)) !important}
.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:#B0303B !important;background-color:rgba(176, 48, 59, var(--tw-bg-opacity)) !important}
.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:#962733 !important;background-color:rgba(150, 39, 51, var(--tw-bg-opacity)) !important}
.hover\:bg-green-700\/10:hover{background-color:#9627331a !important}
.hover\:text-green-600:hover{--tw-text-opacity:1;color:rgba(176, 48, 59, var(--tw-text-opacity)) !important}
.hover\:text-green-700:hover{--tw-text-opacity:1;color:rgba(150, 39, 51, var(--tw-text-opacity)) !important}
.hover\:decoration-green-700:hover{text-decoration-color:#962733 !important}
.focus\:border-green-500:focus{--tw-border-opacity:1;border-color:#C8414B !important;border-color:rgba(200, 65, 75, var(--tw-border-opacity)) !important}
.focus\:bg-green-500:focus{--tw-bg-opacity:1;background-color:#C8414B !important;background-color:rgba(200, 65, 75, var(--tw-bg-opacity)) !important}
.focus\:text-green-700:focus{--tw-text-opacity:1;color:rgba(150, 39, 51, var(--tw-text-opacity)) !important}
.focus\:decoration-green-700:focus{text-decoration-color:#962733 !important}
.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(200, 65, 75, var(--tw-ring-opacity))}
.focus\:ring-green-500\/90:focus{--tw-ring-color:#C8414Be6}
.focus-visible\:border-green-500:focus-visible{--tw-border-opacity:1;border-color:#C8414B !important;border-color:rgba(200, 65, 75, var(--tw-border-opacity)) !important}
.disabled\:bg-green-400:disabled{--tw-bg-opacity:1;background-color:#E06A73 !important;background-color:rgba(224, 106, 115, var(--tw-bg-opacity)) !important}
.peer:focus~.peer-focus\:text-green-500{--tw-text-opacity:1;color:rgba(200, 65, 75, var(--tw-text-opacity)) !important}
.peer:focus~.peer-focus\:text-green-600{--tw-text-opacity:1;color:rgba(176, 48, 59, var(--tw-text-opacity)) !important}
.dark .dark\:border-gray-600{--tw-border-opacity:1;border-color:#2F2F32 !important;border-color:rgba(47, 47, 50, var(--tw-border-opacity)) !important}
.dark .dark\:border-gray-700{--tw-border-opacity:1;border-color:#252527 !important;border-color:rgba(37, 37, 39, var(--tw-border-opacity)) !important}
.dark .dark\:border-gray-800{--tw-border-opacity:1;border-color:#1B1B1D !important;border-color:rgba(27, 27, 29, var(--tw-border-opacity)) !important}
.dark .dark\:border-gray-800\/50{border-color:#1B1B1D80 !important}
.dark .dark\:border-green-500{--tw-border-opacity:1;border-color:#C8414B !important;border-color:rgba(200, 65, 75, var(--tw-border-opacity)) !important}
.dark .dark\:border-green-800{--tw-border-opacity:1;border-color:#7A1F29 !important;border-color:rgba(122, 31, 41, var(--tw-border-opacity)) !important}
.dark .dark\:bg-gray-700{--tw-bg-opacity:1;background-color:#252527 !important;background-color:rgba(37, 37, 39, var(--tw-bg-opacity)) !important}
.dark .dark\:bg-gray-800{--tw-bg-opacity:1;background-color:#1B1B1D !important;background-color:rgba(27, 27, 29, var(--tw-bg-opacity)) !important}
.dark .dark\:bg-gray-800\/90{background-color:#1B1B1De6 !important}
.dark .dark\:bg-gray-850{--tw-bg-opacity:1;background-color:#141415 !important;background-color:rgba(20, 20, 21, var(--tw-bg-opacity)) !important}
.dark .dark\:bg-gray-900{--tw-bg-opacity:1;background-color:#0C0C0D !important;background-color:rgba(12, 12, 13, var(--tw-bg-opacity)) !important}
.dark .dark\:bg-green-500\/30{background-color:#C8414B4d !important}
.dark .dark\:bg-green-600{--tw-bg-opacity:1;background-color:#B0303B !important;background-color:rgba(176, 48, 59, var(--tw-bg-opacity)) !important}
.dark .dark\:bg-green-900{--tw-bg-opacity:1;background-color:#5C171F !important;background-color:rgba(92, 23, 31, var(--tw-bg-opacity)) !important}
.dark .dark\:bg-green-900\/20{background-color:#5C171F33 !important}
.dark .dark\:bg-green-900\/30{background-color:#5C171F4d !important}
.dark .dark\:bg-green-900\/40{background-color:#5C171F66 !important}
.dark .dark\:bg-green-950{--tw-bg-opacity:1;background-color:#3A0E13 !important;background-color:rgba(58, 14, 19, var(--tw-bg-opacity)) !important}
.dark .dark\:bg-green-950\/20{background-color:#3A0E1333 !important}
.dark .dark\:bg-green-950\/30{background-color:#3A0E134d !important}
.dark .dark\:text-green-100{--tw-text-opacity:1;color:rgba(246, 216, 218, var(--tw-text-opacity)) !important}
.dark .dark\:text-green-300{--tw-text-opacity:1;color:rgba(227, 138, 144, var(--tw-text-opacity)) !important}
.dark .dark\:text-green-400{--tw-text-opacity:1;color:rgba(224, 106, 115, var(--tw-text-opacity)) !important}
.dark .dark\:text-green-500{--tw-text-opacity:1;color:rgba(200, 65, 75, var(--tw-text-opacity)) !important}
.dark .dark\:hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:#B0303B !important;background-color:rgba(176, 48, 59, var(--tw-bg-opacity)) !important}
.dark .dark\:hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:#962733 !important;background-color:rgba(150, 39, 51, var(--tw-bg-opacity)) !important}
.dark .dark\:hover\:bg-green-950\/50:hover{background-color:#3A0E1380 !important}
.dark .dark\:hover\:text-green-300:hover{--tw-text-opacity:1;color:rgba(227, 138, 144, var(--tw-text-opacity)) !important}
.dark .dark\:hover\:text-green-400:hover{--tw-text-opacity:1;color:rgba(224, 106, 115, var(--tw-text-opacity)) !important}
.dark .dark\:hover\:text-green-500:hover{--tw-text-opacity:1;color:rgba(200, 65, 75, var(--tw-text-opacity)) !important}
.dark .dark\:hover\:decoration-green-400:hover{text-decoration-color:#E06A73 !important}
.dark .dark\:focus\:bg-green-600:focus{--tw-bg-opacity:1;background-color:#B0303B !important;background-color:rgba(176, 48, 59, var(--tw-bg-opacity)) !important}
.dark .dark\:focus\:text-green-400:focus{--tw-text-opacity:1;color:rgba(224, 106, 115, var(--tw-text-opacity)) !important}
.dark .dark\:focus\:decoration-green-400:focus{text-decoration-color:#E06A73 !important}
.dark .dark\:focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(200, 65, 75, var(--tw-ring-opacity))}
.dark .peer:focus~.dark\:peer-focus\:text-green-500{--tw-text-opacity:1;color:rgba(200, 65, 75, var(--tw-text-opacity)) !important}