/* ===========================================================================
   Tirrus — interface theme for LibreChat v0.7.9
   ---------------------------------------------------------------------------
   Injected into client/dist/index.html by librechat/Dockerfile. No markup
   changes: this repo has no LibreChat frontend source, so this layer restyles
   the shipped app so it reads as the same product as the marketing site.

   The site's language, applied here: warm paper (#faf9f7), ink (#16150f), deep
   green (#0a0a0a) used only where it means something, Source Serif 4 for the
   voice, Inter for the body, pills for actions, quiet tonal surfaces and almost
   no lines. Opaque throughout — no glass.

   SELECTORS ARE TAKEN FROM THE v0.7.9 SOURCE, not guessed:
     .user-turn / .agent-turn   the message column, sender name in its h2
     .message-render            a whole message row
     .text-message, .markdown   message body
     #prompt-textarea           composer input     #send-button  send
     [data-testid="convo-item"] sidebar conversation (bg-surface-active-alt when active)
     #chat-history-nav          sidebar history list
     main .sticky.top-0.z-10    the chat header (a div painted with a literal bg-white)
   The token layer (html / .dark / .gizmo variants) does the rest and is stable
   across releases; .gizmo (0,1,0) outranks html (0,0,1), so tokens are set on
   both or they silently lose.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Inter:wght@400;500;600&display=swap');

:root {
  --sv-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sv-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sv-green: #0a0a0a;
  --sv-green-2: #2d2d2d;
  --sv-mint:  #d4f53c;
  --sv-r: 18px;
  --sv-r-sm: 10px;
  --sv-shadow: 0 1px 2px rgba(22,21,15,.05), 0 20px 50px -28px rgba(22,21,15,.35);
  --sv-ease: cubic-bezier(.22,1,.36,1);
  --sv-dur: 140ms;
  --sv-measure: 46rem;
}

/* ===========================================================================
   1. TOKENS — LIGHT  (the site's paper)
   =========================================================================== */
html, html.gizmo {
  --surface-primary: 255 255 255;   /* app ground + conversation */
  --surface-primary-alt: 248 248 247;   /* sidebar */
  --surface-secondary: 248 248 247;
  --surface-secondary-alt: 241 241 239;
  --surface-tertiary: 241 241 239;
  --surface-tertiary-alt: 233 233 231;
  --surface-dialog: 255 255 255;
  --surface-chat: 255 255 255;
  --presentation: 255 255 255;
  --header-primary: 255 255 255;
  --header-hover: 243 243 242;
  --header-button-hover: 236 236 234;
  --surface-hover: 243 243 242;
  --surface-hover-alt: 243 243 242;
  --surface-active: 234 234 232;
  --surface-active-alt: 236 236 234;
  --surface-submit: 10 10 10;          /* channel triplets: consumed as rgb(var(--token)) */
  --surface-submit-hover: 45 45 45;
  --surface-destructive: 140 47 29;
  --surface-destructive-hover: 122 39 23;

  --text-primary: 10 10 10;
  --text-secondary: 63 63 60;
  --text-secondary-alt: 82 82 78;
  --text-tertiary: 116 116 111;

  --border-light: 236 236 234;
  --border-medium: 229 229 227;
  --border-medium-alt: 229 229 227;
  --border-heavy: 213 213 210;
  --border-xheavy: 192 192 188;
  --ring-primary: 10 10 10;
  --accent: 10 10 10;
  --primary: 10 10 10;
  --primary-foreground:     #ffffff;
}

/* ===========================================================================
   2. TOKENS — DARK  (the site's footer green, pushed toward black)
   =========================================================================== */
html.dark, html.gizmo.dark {
  --sv-green:   #d4f53c;
  --sv-green-2: #e2fa6e;
  --sv-shadow:  0 1px 2px rgba(0,0,0,.4), 0 24px 60px -30px rgba(0,0,0,.85);

  --surface-primary: 10 10 10;
  --surface-primary-alt: 16 16 16;
  --surface-secondary: 16 16 16;
  --surface-secondary-alt: 22 22 21;
  --surface-tertiary: 22 22 21;
  --surface-tertiary-alt: 30 30 29;
  --surface-dialog: 20 20 19;
  --surface-chat: 10 10 10;
  --presentation: 10 10 10;
  --header-primary: 10 10 10;
  --header-hover: 26 26 25;
  --header-button-hover: 32 32 31;
  --surface-hover: 26 26 25;
  --surface-hover-alt: 26 26 25;
  --surface-active: 36 36 35;
  --surface-active-alt: 32 32 31;
  --surface-submit: 212 245 60;
  --surface-submit-hover: 226 250 110;

  --text-primary: 245 245 243;
  --text-secondary: 176 176 171;
  --text-secondary-alt: 160 160 155;
  --text-tertiary: 128 128 123;

  --border-light: 29 29 28;
  --border-medium: 40 40 39;
  --border-medium-alt: 40 40 39;
  --border-heavy: 58 58 56;
  --border-xheavy: 78 78 75;
  --ring-primary: 212 245 60;
  --accent: 212 245 60;
  --primary: 212 245 60;
  --primary-foreground:     #ffffff;
}

/* ===========================================================================
   3. TYPOGRAPHY — Inter for the interface, the serif for the voice.
   =========================================================================== */
body, button, input, textarea, select {
  font-family: var(--sv-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html body, html.dark body { background: rgb(var(--surface-primary)); color: rgb(var(--text-primary)); }

/* Message body: a little larger, noticeably looser, held to a measure. */
.markdown, .prose {
  font-size: 16px;
  line-height: 1.65;
  max-width: var(--sv-measure);
}
.markdown p, .prose p { margin-block: .85em; }
/* Headings INSIDE a reply stay in the interface sans, the way Claude sets them:
   a serif here turns every answer into a magazine article and fights the body
   text. The serif is reserved for brand moments — the greeting, the name above
   a reply, the wordmark. */
.markdown h1, .markdown h2, .markdown h3, .markdown h4,
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--sv-sans);
  font-weight: 600;
  letter-spacing: -.011em;
  line-height: 1.3;
  margin-top: 1.6em;
  margin-bottom: .5em;
}
.markdown h1, .prose h1 { font-size: 1.5rem; }
.markdown h2, .prose h2 { font-size: 1.3rem; }
.markdown h3, .prose h3 { font-size: 1.125rem; }
.markdown h4, .prose h4 { font-size: 1rem; }
/* First heading of an answer should not push a gap above itself. */
.markdown > :first-child, .prose > :first-child { margin-top: 0; }
.markdown li, .prose li { margin-block: .3em; }
.markdown ul, .markdown ol, .prose ul, .prose ol { margin-block: .85em; }
.markdown strong, .prose strong { font-weight: 600; }
.markdown a, .prose a { color: var(--sv-green); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The sender names. Tirrus speaks in the serif, in green — the same voice as
   the site's headlines. The user's name stays quiet. */
.agent-turn > h2 {
  font-family: var(--sv-serif) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
  letter-spacing: -.005em;
  color: var(--sv-green) !important;
}
.user-turn > h2 {
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: rgb(var(--text-tertiary)) !important;
}

/* The empty-state greeting on a new chat: the site's headline voice. */
.transform-gpu.pb-16 .font-medium {
  font-family: var(--sv-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -.02em;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important;
  line-height: 1.1;
}

/* ===========================================================================
   4. SIDEBAR — half a step darker than the page, no dividing line, soft rows.
   =========================================================================== */
/* The sidebar ground is .tirrus-glass now (style.css): translucent over the sky. */
nav { border-right: none !important; }
[data-testid="convo-item"] {
  border-radius: var(--sv-r-sm);
  transition: background-color var(--sv-dur) var(--sv-ease);
}
[data-testid="convo-item"] a, [data-testid="convo-item"] span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===========================================================================
   5. HEADER — the header div is painted with a literal `bg-white`; put it back
   on paper and make the model button a pill, like the site's controls.
   =========================================================================== */
main .sticky.top-0.z-10 {
  background: rgb(var(--header-primary)) !important;
  box-shadow: none;
}
main .sticky.top-0.z-10 button {
  border-radius: 999px;
  transition: background-color var(--sv-dur) var(--sv-ease);
}

/* ===========================================================================
   6. MESSAGES — you in a soft bubble; Tirrus plain on the page.
   =========================================================================== */
.user-turn .text-message {
  background: rgb(var(--surface-secondary));
  /* Evenly rounded: Claude's user bubble has no speech-bubble tail, which is
     what the clipped corner was imitating. */
  border-radius: 18px;
  padding: 11px 17px;
  display: inline-flex;
  max-width: min(100%, 44rem);
}
.user-turn .text-message .markdown, .user-turn .text-message .prose { font-size: 16px; line-height: 1.55; }
/* Space between turns. The default packs question and answer together; Claude
   leaves room so each turn reads as its own unit. */
.user-turn, .agent-turn { padding-block: .35rem; }
.agent-turn { margin-bottom: .6rem; }
.user-turn .text-message p { margin-block: 0; }
html.dark .user-turn .text-message { background: rgb(var(--surface-tertiary)); }

/* ===========================================================================
   7. COMPOSER — the one elevated surface. White, hairline, soft shadow, and a
   green circle to send: the `.f-input` from the site's product frame.
   =========================================================================== */
/* The card itself is styled in ChatForm.tsx (.tirrus-composer). The old :has() rules
   here matched BOTH the card and the textarea's wrapper, drawing a box inside a box. */
#prompt-textarea { background: transparent !important; box-shadow: none !important; }
#prompt-textarea::placeholder { color: rgb(var(--text-tertiary)); }

#send-button, [data-testid="send-button"] {
  border-radius: 999px !important;
  background: rgb(var(--surface-submit)) !important;
  color: #fff !important;
  transition: background-color var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease), opacity var(--sv-dur);
}
#send-button:hover:not(:disabled), [data-testid="send-button"]:hover:not(:disabled) { background: rgb(var(--surface-submit-hover)) !important; }
#send-button:active:not(:disabled) { transform: scale(.95); }
#send-button:disabled, [data-testid="send-button"]:disabled { opacity: .3; }

/* ===========================================================================
   8. CODE, TABLES, MENUS — the site's dark code tile; rounded, hairlined.
   =========================================================================== */
pre, pre > div, code[class*="language-"] {
  border-radius: 12px;
  border: 1px solid rgb(var(--border-light));
  font-size: 13.5px;
  line-height: 1.6;
}
html:not(.dark) pre, html:not(.dark) pre > div { background: #0f1512 !important; color: #d8e2dc; }
:not(pre) > code { background: rgb(var(--surface-tertiary)); border-radius: 5px; padding: .12em .36em; font-size: .89em; }
table { border-radius: 10px; overflow: hidden; font-size: 15px; }
th, td { border-color: rgb(var(--border-light)) !important; }
[role="menu"], [role="dialog"], [role="listbox"] {
  border-radius: 14px !important;
  border: 1px solid rgb(var(--border-light)) !important;
  box-shadow: var(--sv-shadow) !important;
}

/* ===========================================================================
   9. STATES — keyboard focus is a green ring; mouse focus is not.
   =========================================================================== */
:focus-visible { outline: 2px solid rgb(var(--ring-primary)); outline-offset: 2px; border-radius: 8px; }
:focus:not(:focus-visible) { outline: none; }
button:disabled { cursor: not-allowed; }
::selection { background: #d4f53c; color: #0a0a0a; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (max-width: 767px) {
  .markdown, .prose { font-size: 16px; max-width: 100%; }
  form:has(#prompt-textarea) { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ===========================================================================
   10. SIGN-IN SCREEN — LibreChat's auth layout paints itself with literal
   Tailwind colours (bg-white / dark:bg-gray-900). Put it on our paper, give
   the heading our voice, and make the one button — the door into the
   product — the same green pill as the site. Selectors from AuthLayout.tsx,
   Login.tsx and SocialButton.tsx (v0.7.9).
   =========================================================================== */
.relative.flex.min-h-screen.flex-col.bg-white,
.w-authPageWidth { background: rgb(var(--surface-primary)) !important; }
html.dark .relative.flex.min-h-screen.flex-col,
html.dark .w-authPageWidth { background: rgb(var(--surface-primary)) !important; }
h1.text-3xl.font-semibold {
  font-family: var(--sv-serif) !important;
  font-weight: 400 !important;
  font-size: 2.4rem !important;
  letter-spacing: -.02em;
  color: rgb(var(--text-primary)) !important;
}
a[href*="/oauth/openid"] {
  justify-content: center;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgb(var(--surface-submit)) !important;
  color: #fff !important;
  font-weight: 500;
  padding: 14px 22px !important;
  transition: background-color var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
}
a[href*="/oauth/openid"]:hover { background: rgb(var(--surface-submit-hover)) !important; transform: translateY(-1px); }
a[href*="/oauth/openid"] img { filter: brightness(0) invert(1); }

/* Section 11 (body-level background layers) removed: the sky is now a
   component — see components/Chat/Sky.tsx. */
main .sticky.top-0.z-10 { background: transparent !important; }

/* 12. The sky is mounted at the app shell (routes/Root.tsx) and paints the ground
   itself, so nothing here needs to punch holes in surfaces any more. */