/* Cortex Analytics Theme — shadcn/ui "Neutral Dark" v2                      */
/* Overrides LibreChat's `.dark {}` CSS vars directly since `:root` was       */
/* being shadowed. Pure monochrome: no brand accent color anywhere.           */

/* ── CSS Variables — override LibreChat's dark palette at the source ───── */

:root, .dark, html.dark, html[data-theme="dark"] {
  /* Core surfaces (our semantic names) */
  --main-surface-primary: #171717;
  --main-surface-secondary: #141414;
  --main-surface-tertiary: #262626;
  --sidebar-surface-primary: #141414;
  --sidebar-surface-secondary: #171717;

  /* LibreChat's semantic surface vars */
  --surface-primary: #171717 !important;
  --surface-primary-alt: #141414 !important;
  --surface-primary-contrast: #262626 !important;
  --surface-secondary: #1f1f1f !important;
  --surface-tertiary: #262626 !important;
  --surface-dialog: #1f1f1f !important;
  --surface-chat: #171717 !important;
  --surface-hover: #262626 !important;
  --surface-hover-alt: #2a2a2a !important;
  --surface-active: #333333 !important;
  --surface-active-alt: #2a2a2a !important;
  --surface-submit: #fafafa !important;
  --surface-submit-hover: #d4d4d4 !important;

  /* LibreChat's header / nav */
  --header-primary: #141414 !important;
  --header-button-hover: #262626 !important;

  /* LibreChat's brand — was set to #4ecdc4 (cyan) for Cortex. Kill it. */
  --brand-purple: #fafafa !important;

  /* Text semantics */
  --text-primary: #fafafa !important;
  --text-secondary: #d4d4d4 !important;
  --text-tertiary: #a3a3a3 !important;
  --text-warning: #d4d4d4 !important;   /* was amber-500 */

  /* Borders */
  --border-light: rgba(255, 255, 255, 0.06) !important;
  --border-medium: rgba(255, 255, 255, 0.10) !important;
  --border-medium-alt: rgba(255, 255, 255, 0.14) !important;
  --border-heavy: rgba(255, 255, 255, 0.18) !important;
  --border-xheavy: rgba(255, 255, 255, 0.24) !important;

  /* shadcn HSL triplets — used by Tailwind utilities like bg-primary */
  --background: 0 0% 9% !important;
  --foreground: 0 0% 98% !important;
  --card: 0 0% 10% !important;
  --card-foreground: 0 0% 98% !important;
  --popover: 0 0% 10% !important;
  --popover-foreground: 0 0% 98% !important;
  --primary: 0 0% 98% !important;
  --primary-foreground: 0 0% 9% !important;
  --secondary: 0 0% 15% !important;
  --secondary-foreground: 0 0% 98% !important;
  --muted: 0 0% 15% !important;
  --muted-foreground: 0 0% 64% !important;
  --accent: 0 0% 15% !important;
  --accent-foreground: 0 0% 98% !important;
  --border: 0 0% 20% !important;
  --input: 0 0% 15% !important;
  --ring: 0 0% 83% !important;
  --ring-primary: #a3a3a3 !important;

  /* Kill amber tint — LibreChat uses amber-500 in a few indicator badges */
  --amber-400: #a3a3a3 !important;
  --amber-500: #a3a3a3 !important;
  --amber-600: #737373 !important;

  /* Override the entire LibreChat gray scale to neutral (no blue/purple    */
  /* tint). The main chat area (bg-presentation) reads --gray-800 in dark   */
  /* mode — the previous Cortex theme set that to #12121a which has a blue */
  /* undertone. Every gray below is pure luminance, no hue.                 */
  --gray-20:  #f5f5f5 !important;
  --gray-50:  #fafafa !important;
  --gray-100: #ededed !important;
  --gray-200: #d4d4d4 !important;
  --gray-300: #a3a3a3 !important;
  --gray-400: #737373 !important;
  --gray-500: #525252 !important;
  --gray-600: #404040 !important;
  --gray-700: #262626 !important;
  --gray-800: #1a1a1a !important;
  --gray-850: #171717 !important;
  --gray-900: #141414 !important;
  --gray-950: #0f0f0f !important;

  /* --presentation is explicitly overridden too in case a selector skips */
  /* the gray indirection. Same neutral dark as surface-primary.          */
  --presentation: #1a1a1a !important;
}

/* ── Typography ──────────────────────────────────────────────────────── */

body, button, input, textarea, select {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Inter", "Segoe UI", system-ui, sans-serif !important;
  font-size: 15px;
  line-height: 1.5;
}

code, pre, kbd, samp, .font-mono, [class*="code"] code, [class*="code"] pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace !important;
}

.markdown h1, .prose h1 { font-size: 22px !important; font-weight: 700 !important; color: var(--text-primary) !important; }
.markdown h2, .prose h2 { font-size: 19px !important; font-weight: 600 !important; color: var(--text-primary) !important; }
.markdown h3, .prose h3 { font-size: 16px !important; font-weight: 600 !important; color: var(--text-primary) !important; }
.markdown h4, .prose h4 { font-size: 15px !important; font-weight: 600 !important; }
.markdown p, .prose p   { font-size: 15px !important; line-height: 1.55 !important; color: var(--text-secondary) !important; }
.markdown li::marker, .prose li::marker { color: var(--text-tertiary) !important; }

.markdown blockquote, .prose blockquote {
  border-left: 3px solid var(--border-heavy) !important;
  color: var(--text-tertiary) !important;
  font-style: italic;
  padding-left: 12px;
}

/* ── Kill specific Tailwind amber/orange utilities that LibreChat uses ── */

/* Active conversation row was using amber in some forks. Force it back to */
/* a gray surface in our theme regardless of class. */
[class*="bg-amber"] { background-color: var(--surface-active) !important; }
[class*="text-amber"] { color: var(--text-tertiary) !important; }
[class*="border-amber"] { border-color: var(--border-heavy) !important; }
[class*="from-amber"], [class*="to-amber"] { --tw-gradient-from: var(--surface-active) !important; --tw-gradient-to: var(--surface-active) !important; }

/* ── Sidebar conversation rows — clean, no per-row icons ──────────── */
/* Hide ONLY the per-row icons in the sidebar conversation list.       */
/* The endpoint header chip and message avatars keep their brain SVG.  */

/* Left sidebar (aside) — hide every convo-icon inside. This catches the */
/* per-row brains in the conversation list without touching the endpoint  */
/* chip (which lives in the main header, not inside aside) or the         */
/* message avatars (which live inside the main chat area).                 */
aside [data-testid="convo-icon"],
aside [class*="EndpointIcon"],
aside [class*="ConvoIconURL"] img {
  display: none !important;
}
nav [class*="ConvoLink"] [class*="EndpointIcon"],
nav a[href*="/c/"] > div:first-child > div:first-child svg,
nav li [data-context="menu-item"],
[class*="conversation-item"] > div:first-child img,
[class*="conversation-item"] > div:first-child svg:not([class*="chevron"]):not([class*="pin"]):not([class*="close"]) {
  display: none !important;
}

/* ── Brain icons in the endpoint chip + message avatars ─────────────── */
/* These are the ones Richard wants VISIBLE + throbbing.                 */
/* Apply the subtle throb directly on the convo-icon img. Brains in the  */
/* sidebar conv list are still hidden by the block above.                */

[data-testid="convo-icon"] img {
  animation: cortex-throb-subtle 2.4s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}

/* ── Old "hide bot avatar" stub (kept as dead placeholder for diff) ─── */
[class*="message"] [class*="avatar"] img[src*="DOES_NOT_EXIST"],
[class*="message"] > div:first-child > div:first-child > svg:not([class*="user"]) {
  display: none !important;
}

/* ── DateLabel headers ──────────────────────────────────────────────── */

[class*="DateLabel"],
nav h3, nav [role="heading"], nav li[role="separator"], nav div[data-date-group] {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-muted, #737373) !important;
  letter-spacing: 0.02em !important;
  padding: 14px 12px 6px 12px !important;
  margin: 0 !important;
}

nav [class*="ConvoLink"] span,
nav a[href*="/c/"] span {
  font-size: 14px !important;
  color: var(--text-primary) !important;
  font-weight: 400 !important;
}

/* ── Tables ──────────────────────────────────────────────────────────── */

.markdown table, .prose table { border-collapse: collapse; font-size: 13px !important; margin: 8px 0; width: 100%; }
.markdown th, .prose th {
  background: var(--main-surface-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-medium) !important;
  padding: 7px 10px; text-align: left; font-size: 11px !important; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.markdown td, .prose td {
  background: var(--main-surface-secondary) !important;
  border: 1px solid var(--border-light) !important;
  padding: 6px 10px; color: var(--text-secondary) !important; font-size: 13px !important;
}

/* ── Code blocks ─────────────────────────────────────────────────────── */

pre {
  background-color: #0f0f0f !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 6px; padding: 10px !important; font-size: 13px !important;
}
code {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text-primary) !important;
  border-radius: 3px; padding: 1px 5px; font-size: 0.92em;
}
pre code { background: transparent !important; color: var(--text-secondary) !important; padding: 0; }

/* ── Scrollbar ───────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ── Hide unused LibreChat affordances ──────────────────────────────── */

[aria-label="Agents Marketplace"], button[aria-label*="agents marketplace" i],
[class*="Favorites"], [data-feature="favorites"] { display: none !important; }

/* ── Brain animations ─────────────────────────────────────────────────── */
/*                                                                          */
/* Two distinct motions so users read them differently:                    */
/*                                                                          */
/*   .cortex-throb-subtle  — ambient "alive" signal. Shown on:              */
/*                          endpoint header chip + assistant message avatar */
/*                          Scale 1.0 → 1.08, 2.4s cycle, minimal opacity. */
/*                                                                          */
/*   .cortex-wobble        — active "reasoning" signal. Shown on:           */
/*                          the Thoughts dropdown indicator.                */
/*                          Rotate -4° → +4° wobble, 2.2s, no scale.       */
/*                          Reads like the brain tilting while thinking.   */
/*                                                                          */
/* prefers-reduced-motion disables all animations.                          */

@keyframes cortex-throb-subtle {
  0%, 100% { transform: scale(1);    opacity: 0.88; }
  50%      { transform: scale(1.08); opacity: 1.0; }
}

.cortex-throb-subtle {
  animation: cortex-throb-subtle 2.4s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes cortex-wobble {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

.cortex-wobble {
  animation: cortex-wobble 2.2s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

/* Legacy — keep .cortex-throb as an alias so existing components don't   */
/* break during the transition. Resolves to the subtle variant.            */
.cortex-throb { animation: cortex-throb-subtle 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .cortex-throb-subtle,
  .cortex-wobble,
  .cortex-throb,
  [data-testid="convo-icon"] img {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ── Mobile overrides ───────────────────────────────────────────────── */

@media (max-width: 900px) {
  .markdown pre, .prose pre, pre { max-width: 100% !important; overflow-x: auto !important; }
  .markdown table, .prose table { display: block; overflow-x: auto; }
}