/*
 * plotr.ai Pulse theme for LibreChat v0.8.7
 * ------------------------------------------------------------------------------------------------
 * A mapping layer only: Pulse values (branding/pulse/tokens.json, PULSE-BRAND-BOOK.md) written onto
 * LibreChat's own variable names. It does NOT import Pulse globals.css / bundle.css (same variable
 * names with other meanings, a `*` reset, and a Google Fonts @import that breaks the offline run).
 *
 * Loaded last in <head> (branding/librechat/Dockerfile appends the <link> before </head>), so every
 * rule below wins over the upstream rule of equal specificity.
 *
 * Upstream targets (vendor/librechat at v0.8.7, commit 9e74cc0e):
 *   client/src/style.css:10-67     :root palette primitives
 *   client/src/style.css:69-131    html {}  light semantic tokens + shadcn HSL triplets
 *   client/src/style.css:132-196   .dark {} dark semantic tokens (dark mode = class on <html>,
 *                                  packages/client/src/theme/context/ThemeProvider.tsx:194-201)
 *   client/src/style.css:1006-1040 .prose colour variables; style.css:1697-1714 `.dark .dark\:prose-invert`
 *                                  remaps them to --tw-prose-invert-* (MessageContent.tsx:117 sets that
 *                                  class), so the dark override below uses (0,3,0) to win on specificity
 *   client/tailwind.config.cjs:13-16  font literals Inter / Roboto Mono
 *   client/tailwind.config.cjs:66-92  hard-coded gray and green palettes (variables do not reach them)
 *   client/src/components/Auth/AuthLayout.tsx, LoginForm.tsx:34-39, Footer.tsx   login page
 *   client/src/components/Chat/Input/ChatForm.tsx:288-293, SendButton.tsx:25     composer
 *   client/src/components/Messages/ContentRender.tsx:204, Chat/Messages/Content/MessageContent.tsx:117
 *   client/src/components/Messages/Content/Error.tsx:51-52   the red box for blocked requests
 *   client/src/components/Conversations/Convo.tsx:223          active conversation marker
 *
 * Contrast (WCAG 2.x relative luminance, computed for this file; text needs 4.5:1, controls and focus 3:1)
 *   Light
 *     17.14  text-primary   #0d1f17 on #ffffff       14.54  #0d1f17 on #e4efe9 (hover-alt)
 *      8.53  text-secondary #2e5442 on #ffffff        7.69  #2e5442 on #edf5f1
 *      5.52  text-tertiary  #44725b on #ffffff        4.69  #44725b on #e4efe9 (darkest light surface)
 *            (#44725b replaces token #4a7a62, which drops to 4.45 on #edf5f1)
 *      4.95  green text     #0e8057 on #ffffff        4.62  #0e8057 on #f4f8f6
 *      4.95  #ffffff on submit #0e8057                7.00  #ffffff on submit-hover #0a6646
 *      7.83  warning        #7a4508 on #ffffff        8.01  destructive #9b2020 on #ffffff
 *      8.01  #ffffff on destructive fill #9b2020      7.42  error-text #9b2020 on error-fill (on white)
 *     16.00  user message   #0d1f17 on #f4f8f6
 *      3.16  auth input edge #6f9a86 on #ffffff (control)    3.04  ring #18a875 on #ffffff (focus)
 *   Dark
 *     16.42  text-primary   #e8f0f8 on #0e1117       10.74  #e8f0f8 on #2a3547
 *      7.33  text-secondary/-alt/-tertiary #8fa3be on #0e1117    5.33  #8fa3be on #232e3d
 *            (Pulse dark tertiary #4e6480 is ~3.1:1, so it is not used for text)
 *      8.44  green text     #29c48d on #0e1117        7.72  #29c48d on #151b24
 *      4.95  #ffffff on submit #0e8057 (same fill in both modes)
 *      9.12  warning        #e8a84d on #0e1117        7.29  destructive #f08080 on #0e1117
 *      6.74  error-text     #f08080 on error-fill (on #0e1117)
 *      8.44  #0e1117 on primary #29c48d              15.03  user message #e8f0f8 on #151b24
 *      3.99  auth input edge #5d7593 on #0e1117 (control)    8.44  ring #29c48d on #0e1117 (focus)
 *
 * Non-token values (not in branding/pulse/tokens.json). Pending brand-owner review; each one is the
 * rule in PULSE-BRAND-BOOK.md:81 (a colour Pulse does not name must meet 4.5:1 on its ground):
 *   #44725b  light --text-tertiary / --text-secondary-alt / muted text. Re-tints token #4a7a62,
 *            which is 4.45:1 on #edf5f1 (fails AA). Brand book :66-67 says failing pairs are carried,
 *            not re-tinted; to follow the book exactly, set #4a7a62 here and accept the AA miss on
 *            #edf5f1 / #e4efe9 surfaces.
 *   #0a6646  light and dark --surface-submit-hover (token brand-green-dark #0e8057 is the fill itself)
 *   #7f1a1a  --surface-destructive-hover
 *   #6f9a86  light --border-xheavy and auth input edge (3:1 control edge; token borders are ~1.4-1.7:1)
 *   #5d7593  dark --border-xheavy, auth input edge, --switch-unchecked
 *   #1f2a37  dark --border / --input HSL triplet: token rgba(99,140,185,.20) flattened over #0e1117
 */

/* ---- Fonts: self-hosted, latin subset (fonts/SOURCE.txt, fonts/OFL.txt) -------------------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/dm-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/dm-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/dm-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/dm-sans-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/dm-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/dm-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body,
.font-sans {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}
code,
kbd,
samp,
pre,
.font-mono {
  font-family: 'DM Mono', ui-monospace, 'SF Mono', monospace;
}

::selection {
  background-color: rgba(24, 168, 117, 0.22);
}

/* ---- Light semantic tokens (style.css:69-131) ---------------------------------------------- */
html {
  --brand-purple: #18a875; /* LibreChat's accent slot: badges, toggles, highlights */
  --presentation: #ffffff;
  --text-primary: #0d1f17;
  --text-secondary: #2e5442;
  --text-secondary-alt: #44725b;
  --text-tertiary: #44725b;
  --text-warning: #7a4508;
  --text-destructive: #9b2020;
  --ring-primary: #18a875;
  --header-primary: #ffffff;
  --header-hover: #f4f8f6;
  --header-button-hover: #f4f8f6;
  --surface-active: #e8f2ed;
  --surface-active-alt: #e4efe9;
  --surface-hover: #e8f2ed;
  --surface-hover-alt: #e4efe9;
  --surface-primary: #ffffff;
  --surface-primary-alt: #f4f8f6;
  --surface-primary-contrast: #edf5f1;
  --surface-secondary: #f4f8f6;
  --surface-secondary-alt: #e8f2ed;
  --surface-tertiary: #edf5f1;
  --surface-tertiary-alt: #ffffff;
  --surface-dialog: #ffffff;
  --surface-submit: #0e8057; /* brand-green-dark: white on #18a875 is ~3.0:1, on #0e8057 4.95:1 */
  --surface-submit-hover: #0a6646;
  --surface-destructive: #9b2020;
  --surface-destructive-hover: #7f1a1a;
  --surface-chat: #ffffff;
  --border-light: #ddeee6;
  --border-medium: #c8e0d5;
  --border-medium-alt: #c8e0d5;
  --border-heavy: #a8cec0;
  --border-xheavy: #6f9a86;
  --border-destructive: #f05c5c;

  /* shadcn-style HSL triplets (H S% L%), used as hsl(var(--x)) */
  --background: 0 0% 100%; /* #ffffff */
  --foreground: 153 40.9% 8.6%; /* #0d1f17 */
  --card: 0 0% 100%;
  --card-foreground: 153 40.9% 8.6%;
  --primary: 158 80.3% 27.8%; /* #0e8057 */
  --primary-foreground: 0 0% 100%;
  --secondary: 150 28.6% 94.5%; /* #edf5f1 */
  --secondary-foreground: 153 40.9% 8.6%;
  --muted: 150 28.6% 94.5%;
  --muted-foreground: 150 25.3% 35.7%; /* #44725b */
  --accent: 150 27.8% 92.9%; /* #e8f2ed */
  --accent-foreground: 153 40.9% 8.6%;
  --destructive: 0 65.8% 36.7%; /* #9b2020 */
  --destructive-foreground: 0 0% 100%;
  --border: 153 27.9% 83.1%; /* #c8e0d5 */
  --input: 153 27.9% 83.1%;
  --ring: 159 75% 37.6%; /* #18a875 */
  --radius: 0.5rem; /* Pulse radius-md 8px */
  --chart-1: 159 75% 37.6%; /* product accents: green, ops blue, anivect amber, narrativ violet, focal red */
  --chart-2: 207 70.3% 59%;
  --chart-3: 32 79.6% 55.9%;
  --chart-4: 276 58.8% 66.7%;
  --chart-5: 0 83.1% 65.1%;
  --switch-unchecked: 152 17.6% 52%; /* #6f9a86, 3.16:1 on white */
}

/* ---- Dark semantic tokens (style.css:132-196) ---------------------------------------------- */
.dark {
  --brand-purple: #29c48d;
  --presentation: #0e1117;
  --text-primary: #e8f0f8;
  --text-secondary: #8fa3be;
  --text-secondary-alt: #8fa3be;
  --text-tertiary: #8fa3be;
  --text-warning: #e8a84d;
  --text-destructive: #f08080;
  --ring-primary: #29c48d;
  --header-primary: #151b24;
  --header-hover: #1c2533;
  --header-button-hover: #1c2533;
  --surface-active: #2a3547;
  --surface-active-alt: #232e3d;
  --surface-hover: #232e3d;
  --surface-hover-alt: #2a3547;
  --surface-primary: #0e1117;
  --surface-primary-alt: #151b24;
  --surface-primary-contrast: #1c2533;
  --surface-secondary: #151b24;
  --surface-secondary-alt: #1c2533;
  --surface-tertiary: #1c2533;
  --surface-tertiary-alt: #1c2533;
  --surface-dialog: #151b24;
  --surface-submit: #0e8057;
  --surface-submit-hover: #0a6646;
  --surface-destructive: #9b2020;
  --surface-destructive-hover: #7f1a1a;
  --surface-chat: #151b24;
  --border-light: rgba(99, 140, 185, 0.12);
  --border-medium: rgba(99, 140, 185, 0.2);
  --border-medium-alt: rgba(99, 140, 185, 0.2);
  --border-heavy: rgba(99, 140, 185, 0.35);
  --border-xheavy: #5d7593;
  --border-destructive: #f05c5c;

  --background: 220 24.3% 7.3%; /* #0e1117 */
  --foreground: 210 53.3% 94.1%; /* #e8f0f8 */
  --card: 216 26.3% 11.2%; /* #151b24 */
  --card-foreground: 210 53.3% 94.1%;
  --primary: 159 65.4% 46.5%; /* #29c48d */
  --primary-foreground: 220 24.3% 7.3%;
  --secondary: 217 29.1% 15.5%; /* #1c2533 */
  --secondary-foreground: 210 53.3% 94.1%;
  --muted: 217 29.1% 15.5%;
  --muted-foreground: 214 26.6% 65.3%; /* #8fa3be */
  --accent: 215 27.1% 18.8%; /* #232e3d */
  --accent-foreground: 210 53.3% 94.1%;
  --destructive: 0 65.8% 36.7%;
  --destructive-foreground: 0 0% 100%;
  --border: 212 27.9% 16.9%; /* rgba(99,140,185,.20) over #0e1117 = #1f2a37 */
  --input: 212 27.9% 16.9%;
  --ring: 159 65.4% 46.5%;
  --chart-1: 159 65.4% 46.5%;
  --chart-2: 207 70.3% 59%;
  --chart-3: 32 79.6% 55.9%;
  --chart-4: 276 58.8% 66.7%;
  --chart-5: 0 78.9% 72.2%;
  --switch-unchecked: 213 22.5% 47.1%; /* #5d7593 */
}

/* ---- Markdown in messages (style.css:1006-1040) -------------------------------------------- */
.prose {
  --tw-prose-body: #0d1f17;
  --tw-prose-headings: #0d1f17;
  --tw-prose-lead: #2e5442;
  --tw-prose-links: #0e8057;
  --tw-prose-bold: #0d1f17;
  --tw-prose-counters: #44725b;
  --tw-prose-bullets: #44725b;
  --tw-prose-hr: #c8e0d5;
  --tw-prose-quotes: #2e5442;
  --tw-prose-quote-borders: #a8cec0;
  --tw-prose-captions: #44725b;
  --tw-prose-code: #0d1f17;
  --tw-prose-th-borders: #c8e0d5;
  --tw-prose-td-borders: #ddeee6;
}
.dark .prose,
.dark .prose.dark\:prose-invert {
  --tw-prose-pre-code: #e8f0f8;
  --tw-prose-pre-bg: #0e1117;
  --tw-prose-body: #e8f0f8;
  --tw-prose-headings: #e8f0f8;
  --tw-prose-lead: #8fa3be;
  --tw-prose-links: #29c48d;
  --tw-prose-bold: #e8f0f8;
  --tw-prose-counters: #8fa3be;
  --tw-prose-bullets: #8fa3be;
  --tw-prose-hr: rgba(99, 140, 185, 0.2);
  --tw-prose-quotes: #8fa3be;
  --tw-prose-quote-borders: rgba(99, 140, 185, 0.35);
  --tw-prose-captions: #8fa3be;
  --tw-prose-code: #e8f0f8;
  --tw-prose-th-borders: rgba(99, 140, 185, 0.35);
  --tw-prose-td-borders: rgba(99, 140, 185, 0.2);
}
/* Links in plain-text turns (user messages): upstream hard-codes #0066cc / #52a0ff here
   (client/src/mobile.css:316-323), outside the prose variables. Pulse link ink instead. The
   upstream sheet is injected after this one, so these carry one extra class to win. */
.message-content p.whitespace-pre-wrap a, .message-content li a { color: #0e8057; }
.dark .message-content p.whitespace-pre-wrap a, .dark .message-content li a { color: #29c48d; }

.prose :where(code):not(:where([class~='not-prose'] *)) {
  background-color: #edf5f1;
  font-weight: 500;
}
.dark .prose :where(code):not(:where([class~='not-prose'] *)):not(:where(pre *)) {
  background-color: #1c2533;
}

/* User turns read as a quoted input card: border, not shadow (brand book, Shadow and elevation). */
.user-turn .message-content {
  background-color: var(--surface-primary-alt);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 4px;
}
.user-turn .message-content > :first-child {
  margin-top: 0;
}
.user-turn .message-content > :last-child {
  margin-bottom: 0;
}
.dark .dark\:text-gray-20,
.dark .dark\:text-gray-50,
.dark .dark\:text-gray-100 {
  color: #e8f0f8;
}

/* Blocked request (scene 3): Pulse error alert, label carries the meaning. */
.border-red-500\/20 {
  border-color: rgba(240, 92, 92, 0.2);
}
.bg-red-500\/5 {
  background-color: rgba(240, 92, 92, 0.07);
}
.border-red-500\/20.bg-red-500\/5 {
  color: #9b2020;
}
.dark .border-red-500\/20.bg-red-500\/5 {
  background-color: rgba(240, 92, 92, 0.08);
  color: #f08080;
}

/* ---- Composer and send button -------------------------------------------------------------- */
.rounded-t-3xl.bg-surface-chat:focus-within {
  border-color: var(--ring-primary);
}
#send-button:not(:disabled) {
  background-color: var(--surface-submit);
}
#send-button:not(:disabled):hover {
  background-color: var(--surface-submit-hover);
}
#send-button svg {
  color: #ffffff;
}

/* Active conversation marker in the sidebar */
.before\:bg-black::before {
  background-color: #18a875;
}
.dark .dark\:before\:bg-white::before {
  background-color: #29c48d;
}

/* ---- Hard-coded Tailwind palette (tailwind.config.cjs:66-92) -------------------------------- */
/* greens -> Pulse greens */
.bg-green-500 {
  background-color: #0e8057;
}
.bg-green-600,
.hover\:bg-green-600:hover {
  background-color: #0a6646;
}
.bg-green-400 {
  background-color: #18a875;
}
.bg-green-500\/10 {
  background-color: rgba(24, 168, 117, 0.08);
}
.border-green-500,
.focus\:border-green-500:focus,
.focus-visible\:border-green-500:focus-visible {
  border-color: #18a875;
}
.text-green-500,
.text-green-600 {
  color: #0e8057;
}
.text-green-700,
.hover\:text-green-700:hover,
.focus\:text-green-700:focus {
  color: #0a6646;
}
.hover\:decoration-green-700:hover,
.focus\:decoration-green-700:focus {
  text-decoration-color: #0a6646;
}
.peer:focus ~ .peer-focus\:text-green-500 {
  color: #0e8057;
}
.dark .dark\:text-green-300,
.dark .dark\:text-green-400,
.dark .dark\:text-green-500,
.dark .dark\:hover\:text-green-400:hover,
.dark .dark\:focus\:text-green-400:focus,
.dark .peer:focus ~ .peer-focus\:text-green-500 {
  color: #29c48d;
}
.dark .dark\:hover\:decoration-green-400:hover,
.dark .dark\:focus\:decoration-green-400:focus {
  text-decoration-color: #29c48d;
}

/* grays -> Pulse surfaces and inks */
.dark .dark\:bg-gray-900 {
  background-color: #0e1117;
}
.dark .dark\:bg-gray-850,
.dark .dark\:bg-gray-800 {
  background-color: #151b24;
}
.dark .dark\:bg-gray-700 {
  background-color: #1c2533;
}
.dark .dark\:border-gray-700 {
  border-color: rgba(99, 140, 185, 0.2);
}
.dark .dark\:border-gray-600 {
  border-color: rgba(99, 140, 185, 0.35);
}
.dark .dark\:text-gray-200 {
  color: #e8f0f8;
}
.dark .dark\:text-gray-300,
.dark .dark\:text-gray-400 {
  color: #8fa3be;
}
.text-black,
.text-gray-800 {
  color: #0d1f17;
}
.text-gray-600,
.text-gray-700 {
  color: #2e5442;
}
.text-gray-500 {
  color: #44725b;
}
.border-gray-200 {
  border-color: #ddeee6;
}
.border-gray-300 {
  border-color: #c8e0d5;
}
.dark .dark\:text-white {
  color: #e8f0f8;
}

/* ---- Login, register, reset (Auth/AuthLayout.tsx, LoginForm.tsx) ---------------------------- */
.w-authPageWidth h1 {
  font-size: 28px; /* Pulse text-h1 */
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.w-authPageWidth .rounded-2xl {
  border-radius: 8px; /* radius-md for inputs and buttons */
}
.w-authPageWidth input.webkit-dark-styles,
.w-authPageWidth input.webkit-dark-styles:hover {
  border-color: #6f9a86; /* 3.16:1, a readable control edge on white */
}
.dark .w-authPageWidth input.webkit-dark-styles,
.dark .w-authPageWidth input.webkit-dark-styles:hover {
  border-color: #5d7593;
}
.w-authPageWidth input.webkit-dark-styles:focus {
  border-color: var(--ring-primary);
}
.w-authPageWidth button[type='submit'] {
  font-size: 15px;
  font-weight: 600;
}

/* Login lockup: logo.svg is filled #0d1f17 (--text-primary); on dark the reverse lockup #e8f0f8
   (PULSE-BRAND-BOOK.md:178). AuthLayout.tsx:63-69 loads it in an <img>, so swap the file, not the fill. */
.dark img[src$='assets/logo.svg'] {
  content: url(logo-reverse.svg);
}