/* =====================================================================
   968.ai — ChatGPT-style MONOCHROME theme (loaded AFTER LibreChat's CSS)
   Black / white / gray, no accent color, Geist font, light default.
   ===================================================================== */
:root {
  --font-968: 'Geist', 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --radius: 0.75rem;
  /* monochrome accent = near-black */
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --ring: 0 0% 9%;
  --ring-primary: #0d0d0d;
  --brand-purple: #0d0d0d;   /* neutralize any brand-purple usage */
}

html, body, button, input, textarea, select, .font-sans {
  font-family: var(--font-968) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Light monochrome surfaces (ChatGPT-like) */
html.light, html:not(.dark) {
  --surface-primary: #ffffff;
  --surface-primary-alt: #f9f9f9;
  --surface-primary-contrast: #ffffff;
  --surface-secondary: #f9f9f9;
  --surface-secondary-alt: #ececec;
  --surface-tertiary: #f4f4f4;
  --surface-chat: #ffffff;
  --surface-active-alt: #ececec;
  --surface-hover: #f0f0f0;
  --border-light: #ececec;
  --border-medium: #e5e5e5;
  --border-heavy: #d9d9d9;
  --text-primary: #0d0d0d;
  --text-secondary: #5d5d5d;
  --background: 0 0% 100%;
}

/* Moderate rounding — ChatGPT isn't super-round */
.rounded-md { border-radius: .6rem !important; }
.rounded-lg { border-radius: .75rem !important; }
.rounded-xl, .rounded-2xl { border-radius: 1rem !important; }

/* Composer: soft rounded box */
form textarea, [class*="chat"] textarea { border-radius: 1.5rem !important; }

/* Primary / send button -> solid black (white in dark) */
button[type="submit"]:not(:disabled),
button[data-testid="send-button"],
[aria-label="Send message"], [aria-label*="Send"] {
  background: #0d0d0d !important; background-image: none !important;
  color: #fff !important; border: none !important;
}
html.dark button[type="submit"]:not(:disabled),
html.dark button[data-testid="send-button"],
html.dark [aria-label*="Send"] { background: #ffffff !important; color: #0d0d0d !important; }

/* Neutral links + focus */
a { color: #0d0d0d; }
html.dark a { color: #ececec; }
*:focus-visible { outline-color: #0d0d0d !important; }
html.dark *:focus-visible { outline-color: #ececec !important; }

/* Welcome heading -> solid, no gradient. NO letter-spacing (breaks Arabic joining). */
.landing-title, h1.text-4xl, h1.text-3xl,
[class*="welcome"] h1, [class*="Welcome"] h1, [class*="landing"] h1 {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--text-primary) !important; font-weight: 600; letter-spacing: normal !important;
}

/* Arabic-safe: never letter-space Arabic (it disconnects the cursive letters). */
:lang(ar), [dir="rtl"], [lang="ar"] { letter-spacing: normal !important; }

/* Logo: black wordmark, invert to white in dark mode */
html.dark img[src*="logo.svg"] { filter: invert(1) brightness(1.7); }

/* Calmer scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 9999px; }
html.dark *::-webkit-scrollbar-thumb { background: #3a3a3a; }
*::-webkit-scrollbar-track { background: transparent; }
#loading-container { background: #ffffff; }
html.dark #loading-container { background: #0d0d0d; }

/* ===== Suggestion chips (monochrome) ===== */
.g968-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 760px; margin: 4px auto 14px; padding: 0 12px;
}
.g968-chip {
  font-family: var(--font-968); font-size: 14px; color: #0d0d0d;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 9999px;
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.g968-chip:hover { background: #f0f0f0; border-color: #d9d9d9; }
html.dark .g968-chip { background: #1a1a1a; color: #ececec; border-color: #333; }
html.dark .g968-chip:hover { background: #262626; border-color: #444; }

/* ===== Kill LibreChat's green accent (#10a37f) -> monochrome ===== */
.text-green-300, .text-green-400, .text-green-500, .text-green-600, .text-green-700, .text-green-800 {
  color: #0d0d0d !important;
}
html.dark .text-green-300, html.dark .text-green-400, html.dark .text-green-500,
html.dark .text-green-600, html.dark .text-green-700 { color: #ececec !important; }

.border-green-400, .border-green-500, .border-green-600, .border-green-700 { border-color: #0d0d0d !important; }
html.dark .border-green-400, html.dark .border-green-500, html.dark .border-green-600 { border-color: #ececec !important; }

.ring-green-400, .ring-green-500, .ring-green-600 { --tw-ring-color: #0d0d0d !important; }
html.dark .ring-green-400, html.dark .ring-green-500, html.dark .ring-green-600 { --tw-ring-color: #ececec !important; }

.bg-green-500, .bg-green-600, .bg-green-700 { background-color: #0d0d0d !important; color: #fff !important; }
html.dark .bg-green-500, html.dark .bg-green-600, html.dark .bg-green-700 { background-color: #fff !important; color: #0d0d0d !important; }

/* pale green badge backgrounds -> neutral gray */
.bg-green-50, .bg-green-100 { background-color: #f4f4f4 !important; }
html.dark .bg-green-900, html.dark .bg-green-950 { background-color: #1f1f1f !important; }

/* caret/selection + focus accents neutral */
input, textarea { caret-color: #0d0d0d; accent-color: #0d0d0d; }
html.dark input, html.dark textarea { caret-color: #ececec; accent-color: #ececec; }

/* ===== Green variant states (focus/hover/peer) -> monochrome ===== */
[class*="border-green-"]:focus, [class*="border-green-"]:focus-visible,
[class*="border-green-"]:focus-within, [class*="border-green-"]:hover {
  border-color: #0d0d0d !important;
}
html.dark [class*="border-green-"]:focus, html.dark [class*="border-green-"]:hover { border-color: #ececec !important; }

[class*="ring-green-"]:focus, [class*="ring-green-"]:focus-visible { --tw-ring-color: #0d0d0d !important; }
html.dark [class*="ring-green-"]:focus { --tw-ring-color: #ececec !important; }

[class*="text-green-"]:focus, [class*="text-green-"]:hover { color: #0d0d0d !important; }
html.dark [class*="text-green-"]:focus, html.dark [class*="text-green-"]:hover { color: #ececec !important; }

/* floating label turns green when its peer input is focused */
.peer:focus ~ [class*="peer-focus:text-green"] { color: #0d0d0d !important; }
html.dark .peer:focus ~ [class*="peer-focus:text-green"] { color: #ececec !important; }

[class*="bg-green-"]:focus, [class*="bg-green-"]:hover { background-color: #0d0d0d !important; color: #fff !important; }
html.dark [class*="bg-green-"]:hover { background-color: #ffffff !important; color: #0d0d0d !important; }

/* submit token used by some buttons */
:root, html.light, html:not(.dark) { --surface-submit: #0d0d0d; --surface-submit-hover: #000000; }
html.dark { --surface-submit: #ffffff; --surface-submit-hover: #f0f0f0; }

/* =====================================================================
   TIER-ONE POLISH v2 — structural ChatGPT layout (2026-08-10)
   Hooks verified against the live v0.8.7 bundle (index.BHS-ABOD.js):
   .final-completion row · .agent-turn assistant col · rounded-t-3xl composer
   ===================================================================== */

/* --- 1 · Reading typography: ChatGPT is 16px / 1.75 --- */
:root { --markdown-font-size: 1rem; }
.markdown-body, .prose, .message-render {
  font-size: 1rem !important;
  line-height: 1.75 !important;
}
.prose p { margin-top: 0; margin-bottom: 1rem; }
.prose li { margin-block: .25rem; }
.prose h1, .prose h2, .prose h3 { font-weight: 600; letter-spacing: normal; }
.prose :where(code):not(pre code) {
  background: #f4f4f4; border-radius: .375rem; padding: .125rem .375rem;
  font-size: .875em; font-weight: 500;
}
html.dark .prose :where(code):not(pre code) { background: #ffffff14; }

/* --- 2 · ChatGPT dark palette (deep neutral, no blue-gray) --- */
html.dark {
  --surface-primary: #212121;
  --surface-primary-alt: #171717;
  --surface-primary-contrast: #2f2f2f;
  --surface-secondary: #2f2f2f;
  --surface-secondary-alt: #424242;
  --surface-tertiary: #424242;
  --surface-tertiary-alt: #2f2f2f;
  --surface-chat: #2f2f2f;
  --surface-dialog: #2f2f2f;
  --surface-hover: #303030;
  --surface-hover-alt: #303030;
  --surface-active-alt: #303030;
  --presentation: #212121;
  --text-primary: #ececec;
  --text-secondary: #b4b4b4;
  --text-secondary-alt: #b4b4b4;
  --border-light: #ffffff0f;
  --border-medium: #ffffff1a;
  --border-heavy: #ffffff26;
}
html.dark .gpt-dark-gray, html.dark .dark\:gpt-dark-gray { background-color: #212121 !important; }
html.dark body, html.dark #root { background: #212121; }

/* --- 3 · Messages: no avatars, no sender labels, user turns as bubbles --- */
.final-completion > .flex-shrink-0 { display: none !important; }        /* avatar col */
.final-completion .select-none.font-semibold { display: none !important; } /* "You"/model + time */
.final-completion { gap: 0 !important; margin-bottom: .875rem; }
.final-completion > .w-11\/12 { width: 100% !important; }

/* user column (no .agent-turn) -> right-aligned; flips correctly in RTL */
.final-completion > .w-11\/12:not(.agent-turn) { align-items: flex-end; }
.final-completion > .w-11\/12:not(.agent-turn) > .flex-col {
  background: #f4f4f4;
  border-radius: 1.375rem;
  padding: .4375rem 1.125rem;
  max-width: min(85%, 42rem);
  width: fit-content;
}
html.dark .final-completion > .w-11\/12:not(.agent-turn) > .flex-col { background: #2f2f2f; }
/* inside the bubble, kill the trailing paragraph margin */
.final-completion > .w-11\/12:not(.agent-turn) .prose p:last-child { margin-bottom: 0; }

/* --- 4 · Composer: floating white card with soft depth --- */
[class*="rounded-t-3xl"] {
  border-radius: 1.75rem !important;
  border-color: var(--border-light) !important;
  box-shadow: 0 0 1px rgba(0,0,0,.14), 0 2px 16px rgba(0,0,0,.05);
  transition: box-shadow .15s ease;
}
[class*="rounded-t-3xl"]:focus-within {
  box-shadow: 0 0 1px rgba(0,0,0,.2), 0 6px 28px rgba(0,0,0,.08);
}
html.dark [class*="rounded-t-3xl"] {
  box-shadow: none;
  border-color: #ffffff14 !important;
}
button[data-testid="send-button"] { border-radius: 9999px !important; }

/* --- 5 · Sidebar: flat, borderless, rounded rows (ChatGPT) --- */
nav { border: none !important; }
nav a, nav [data-testid="nav-new-chat-button"], nav li > div, nav button {
  border-radius: .625rem;
}
nav a { transition: background-color .12s ease; }

/* --- 6 · Softer elevation everywhere --- */
.shadow-xl { box-shadow: 0 8px 30px rgba(0,0,0,.08) !important; }
.shadow-lg { box-shadow: 0 4px 20px rgba(0,0,0,.07) !important; }
.shadow-md { box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; }
html.dark .shadow-xl, html.dark .shadow-lg, html.dark .shadow-md {
  box-shadow: 0 8px 30px rgba(0,0,0,.4) !important;
}

/* --- 7 · Auth screens: tall calm inputs, black focus ring --- */
input.webkit-dark-styles {
  height: 52px;
  border-radius: .75rem !important;
  border-color: #d9d9d9 !important;
  font-size: 1rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input.webkit-dark-styles:focus, input.webkit-dark-styles:focus-visible {
  border-color: #0d0d0d !important;
  box-shadow: 0 0 0 1px #0d0d0d;
  outline: none;
}
html.dark input.webkit-dark-styles { border-color: #ffffff26 !important; }
html.dark input.webkit-dark-styles:focus {
  border-color: #ececec !important;
  box-shadow: 0 0 0 1px #ececec;
}

/* --- 8 · Micro-interactions --- */
button, a { transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
.hover-button { border-radius: .5rem !important; }

/* =====================================================================
   v3 — ChatGPT-style centered empty state + motion (2026-08-10)
   ===================================================================== */

/* Hide LibreChat's plain-text greeting (we render our own hero).
   The :not(:has()) guards are a blank-screen safety net: if this class ever
   lands on a container instead of a leaf label, anything wrapping real UI
   stays visible. */
.g968-hide:not(:has(form)):not(:has(textarea)):not(:has(button)):not(:has(nav)) {
  visibility: hidden !important; height: 0 !important;
  margin: 0 !important; padding: 0 !important; overflow: hidden !important;
}

/* vertically center hero + composer + chips on the empty screen */
html.g968-empty .g968-center {
  transform: translateY(-26vh);
  transition: transform .25s ease;
}
@media (max-height: 760px) {
  html.g968-empty .g968-center { transform: translateY(-18vh); }
}
@media (max-width: 640px) {
  html.g968-empty .g968-center { transform: translateY(-16vh); }
}

/* hero greeting */
.g968-hero { text-align: center; margin: 0 auto 22px; padding: 0 16px; }
.g968-hero-ar {
  font-family: 'IBM Plex Sans Arabic', var(--font-968);
  font-size: 30px; font-weight: 600; color: var(--text-primary);
  letter-spacing: normal; line-height: 1.5;
}
.g968-hero-en {
  font-size: 16px; font-weight: 400; color: var(--text-secondary);
  margin-top: 6px;
}
@media (max-width: 640px) {
  .g968-hero-ar { font-size: 24px; }
}

/* chips sit under the composer on the empty screen */
html.g968-empty .g968-chips { margin-top: 14px; }

/* messages ease in like ChatGPT */
@keyframes g968-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.message-render { animation: g968-in .3s ease both; }
@media (prefers-reduced-motion: reduce) {
  .message-render { animation: none; }
  html.g968-empty .g968-center { transition: none; }
}

/* =====================================================================
   v5 — empty-state fixes + calmer Upgrade affordance (2026-08-10)
   ===================================================================== */

/* Upgrade: quiet outline pill, not a competing black button.
   On narrow screens it collapses to the ✦ glyph so it stops crowding
   the model picker. */
.g968-upgrade {
  position: fixed; top: 10px; right: 12px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px var(--font-968);
  color: var(--text-primary); text-decoration: none;
  background: var(--surface-primary);
  border: 1px solid var(--border-medium);
  padding: 6px 13px; border-radius: 9999px;
  transition: background-color .12s ease, border-color .12s ease;
}
.g968-upgrade:hover { background: var(--surface-hover); border-color: var(--border-heavy); }
@media (max-width: 640px) {
  .g968-upgrade { padding: 6px 9px; }
  .g968-up-label { display: none; }
}

/* Empty state: optical centering. LibreChat's composer sits in a flex column;
   nudging it up reads as "centered" better than true center. */
html.g968-empty .g968-center {
  transform: translateY(-14vh);
}
@media (max-width: 640px) {
  html.g968-empty .g968-center { transform: translateY(-8vh); }
}

/* hero spacing now that it is the ONLY greeting */
.g968-hero { margin-bottom: 26px; }
.g968-hero-ar { font-size: 32px; line-height: 1.6; }
.g968-hero-en { font-size: 15px; margin-top: 8px; }
@media (max-width: 640px) {
  .g968-hero-ar { font-size: 25px; }
  .g968-hero-en { font-size: 14px; }
}

/* chips: tighter, scrollable on mobile instead of wrapping into a block */
html.g968-empty .g968-chips { margin-top: 16px; }
@media (max-width: 640px) {
  .g968-chips {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .g968-chips::-webkit-scrollbar { display: none; }
  .g968-chip { font-size: 13px; padding: 8px 14px; }
}

/* LibreChat renders a blank greeting node now — collapse its empty box */
.g968-hide { display: none !important; }

/* =====================================================================
   v6 — composer frame fix (2026-08-10)
   The global focus-visible outline was landing on the composer TEXTAREA,
   drawing a hard black rounded rect around just the text row (and running
   off-screen on mobile, since the textarea is full-bleed). ChatGPT puts the
   focus state on the CONTAINER, never the field.
   ===================================================================== */

/* 1 · No outline/ring on the composer field itself */
form textarea,
form textarea:focus,
form textarea:focus-visible,
[class*="rounded-t-3xl"] textarea:focus,
[class*="rounded-t-3xl"] textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;   /* radius belongs to the container */
  background: transparent !important;
}

/* 2 · The container is the frame — visible border, focus lifts the shadow */
[class*="rounded-t-3xl"] {
  border: 1px solid var(--border-medium) !important;
  background: var(--surface-primary);
}
[class*="rounded-t-3xl"]:focus-within {
  border-color: var(--border-heavy) !important;
}

/* 3 · Mobile: inset the composer so the pill's curves are actually on-screen */
@media (max-width: 640px) {
  [class*="rounded-t-3xl"] {
    border-radius: 1.75rem !important;
    margin-left: 10px;
    margin-right: 10px;
    width: auto !important;
  }
}

/* =====================================================================
   v7 — ChatGPT parity pass (verified against a local LibreChat instance)
   ===================================================================== */

/* 1 · Empty state: LibreChat pins the composer to the BOTTOM on phones
   (`justify-end`, with `sm:justify-center` only from 640px up). The old
   translateY() hack fought that and lost. Flip the real property on the
   direct parent of our centering target instead. */
html.g968-empty :has(> .g968-center) {
  justify-content: center !important;
}
html.g968-empty .g968-center {
  transform: none !important;   /* retire the v5 translateY hack */
}

/* 1b · justify-content alone does nothing: the sibling is LibreChat's own
   landing block (the robot glyph + default greeting) and it is `h-full`, so it
   occupies 633 of 932px and leaves zero free space to centre into. Hiding it
   removes the marooned robot AND frees the space in one move. Scoped to the
   empty state, so live conversations are untouched. */
html.g968-empty :has(> .g968-center) > :not(.g968-center) {
  display: none !important;
}

/* 3 · The v1 global focus outline was still landing on INPUTS (the model
   search box drew a heavy black rounded ring). v6 fixed textareas only. */
input:focus,
input:focus-visible,
[role="combobox"]:focus,
[role="combobox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 4 · Chips: wrap onto a second row instead of running off the screen edge. */
#g968-chips {
  flex-wrap: wrap !important;
  justify-content: center;
  overflow: visible !important;
  gap: 8px;
  padding-inline: 12px;
}

/* =====================================================================
   v8 — header legibility + real drawer/settings selectors
   ===================================================================== */

/* 5 · Scrolled conversation text was running UNDER the floating header.
   LibreChat's header bar is `absolute top-0 z-10` and paints itself with a
   gradient whose `from-` stop only exists at `md:` and up — on a phone the
   computed background is rgba(0,0,0,0), i.e. fully transparent. Give it the
   page colour plus a short fade so content dissolves under it like ChatGPT
   instead of colliding with the model pill. Keyed off #open-sidebar-button,
   which is unique to this bar. */
div.absolute.top-0.z-10:has(#open-sidebar-button) {
  background-color: var(--presentation, #ffffff);
}
div.absolute.top-0.z-10:has(#open-sidebar-button)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px;
  background: linear-gradient(to bottom, var(--presentation, #ffffff), transparent);
  pointer-events: none;
}

/* =====================================================================
   v9 — ChatGPT-style message turns
   Verified against the real DOM (probe8): each turn is
     .user-turn|.agent-turn > h2(name + <time>) + .flex.flex-col.gap-1
   ===================================================================== */

/* 6 · Drop the "QA Tester · 3 minutes ago" / "AI · 3 minutes ago" headers.
   ChatGPT labels neither turn. Collapsing with font-size/height instead of
   `display:none` because that h2 also carries a .sr-only "Prompt 1:" span that
   is the only thing telling a screen reader whose turn this is — hiding the
   h2 outright would strip the turn structure from assistive tech. */
.user-turn > h2,
.agent-turn > h2 {
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}
.user-turn > h2 > time,
.agent-turn > h2 > time { display: none !important; }
/* restore a real font-size on the a11y-only label so AT still reads it */
.user-turn > h2 > .sr-only,
.agent-turn > h2 > .sr-only { font-size: 12px !important; line-height: 1 !important; }

/* 7 · User messages become a right-aligned rounded bubble. LibreChat renders
   them flat and full-width, identical to the assistant turn, so a thread reads
   as one undifferentiated column. Shrink-to-fit comes from align-items on the
   column, which is why each level of the chain needs it. */
.user-turn { align-items: flex-end !important; }
.user-turn > .flex.flex-col.gap-1 {
  align-items: flex-end !important;
  max-width: 85%;
  margin-inline-start: auto;
}
.user-turn .text-message {
  background: #f4f4f4;
  border-radius: 22px;
  padding: 10px 16px;
}
html.dark .user-turn .text-message { background: #303030; }

/* the hover actions under a user message follow the bubble to the right */
.user-turn .mt-1.flex { justify-content: flex-end !important; }

/* 8 · Drop the per-message avatar column. It left an orphaned "QT" circle
   stranded to the LEFT of the now right-aligned user bubble, and the assistant
   robot rendered white-on-white in light mode (visible only in dark). ChatGPT
   shows no avatar on either turn in the thread. probe9 confirmed this element
   is the turn's only preceding sibling, so :has(+ .turn) targets exactly it. */
div:has(+ .user-turn),
div:has(+ .agent-turn) { display: none !important; }
/* reclaim the 36px gutter the avatar column used to occupy */
.user-turn, .agent-turn { width: 100% !important; }