/* ================================================================
   Claude.ai Pixel-Perfect Theme for LibreChat
   Extracted from live Claude.ai on April 11, 2026
   ================================================================ */

/* ============================================ */
/* 1. CSS VARIABLES - Exact Claude.ai palette   */
/* ============================================ */

:root {
  --claude-bg: #f8f8f6;              /* rgb(248, 248, 246) - body background */
  --claude-text-primary: #121212;     /* rgb(18, 18, 18) - primary text */
  --claude-text-secondary: #373734;   /* rgb(55, 55, 52) - secondary text, nav items, greeting */
  --claude-text-muted: #6b6b65;       /* rgb(107, 107, 101) - muted/placeholder */
  --claude-border: #e5e5e0;           /* border color */
  --claude-input-bg: #ffffff;         /* rgb(255, 255, 255) - input container */
  --claude-hover: #ededea;            /* hover state */
  --claude-active: #e5e5e0;           /* active state */
  --claude-accent: #c4704b;           /* Claude's orange/terracotta accent */
  --claude-white: #ffffff;
  --claude-sidebar-width: 288px;      /* exact sidebar width */
  --claude-input-shadow: rgba(0, 0, 0, 0.075) 0px 4px 20px 0px, rgba(31, 31, 30, 0.3) 0px 0px 0px 0.5px;
  --claude-input-radius: 20px;        /* input container border-radius */
  --claude-font-sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --claude-font-serif: Georgia, "Times New Roman", Times, serif;
}

/* ============================================ */
/* 2. FORCE LIGHT MODE & GLOBAL OVERRIDES       */
/* ============================================ */

html {
  color-scheme: light !important;
}

html, body, #root {
  background-color: var(--claude-bg) !important;
  color: var(--claude-text-primary) !important;
  font-family: var(--claude-font-sans) !important;
  font-size: 16px !important;
}

/* Override ALL dark mode variables used by LibreChat */
:root,
html,
html.light,
html.dark,
.light,
.dark,
[data-theme="dark"],
[data-theme="light"],
:root.dark,
:root.light {
  --surface-primary: #f8f8f6 !important;
  --surface-primary-alt: #f8f8f6 !important;
  --surface-secondary: #f8f8f6 !important;
  --surface-secondary-alt: #f8f8f6 !important;
  --surface-tertiary: #ededea !important;
  --surface-hover: #ededea !important;
  --surface-active: #e5e5e0 !important;
  --text-primary: #121212 !important;
  --text-secondary: #373734 !important;
  --text-tertiary: #6b6b65 !important;
  --border-light: #e5e5e0 !important;
  --border-medium: #d4d4cf !important;
  --border-heavy: #c4c4be !important;
  --accent-primary: #c4704b !important;
  --accent-secondary: #c4704b !important;
  color-scheme: light !important;
}

/* Force remove dark class behavior */
.dark {
  background-color: var(--claude-bg) !important;
  color: var(--claude-text-primary) !important;
}

/* ============================================ */
/* 3. MAIN CONTENT AREA                         */
/* ============================================ */

main, [role="main"] {
  background-color: var(--claude-bg) !important;
  color: var(--claude-text-primary) !important;
}

/* All divs should inherit light bg */
main div, main section, main article {
  color: var(--claude-text-primary);
}

/* ============================================ */
/* 4. SIDEBAR - Match Claude.ai exactly         */
/* ============================================ */

/* Main sidebar container */
aside,
[aria-label="Control Panel"] {
  background-color: var(--claude-bg) !important;
  border-right: 1px solid rgba(31, 31, 30, 0.15) !important;
  width: 49px !important;
  min-width: 49px !important;
  max-width: 49px !important;
}

/* Sidebar inner nav panel */
aside nav,
aside > nav {
  background-color: var(--claude-bg) !important;
  border-right: 1px solid rgba(31, 31, 30, 0.15) !important;
}

/* Left icon strip in LibreChat sidebar */
aside > div:first-child,
aside > div:first-child > div {
  background-color: var(--claude-bg) !important;
  border-right: none !important;
  width: 49px !important;
  min-width: 49px !important;
}

/* Sidebar nav links */
aside nav a,
aside nav button,
aside nav [role="button"],
[aria-label="Conversations"] a,
[aria-label="Conversations"] button {
  color: var(--claude-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 430 !important;
  line-height: 20px !important;
  border-radius: 8px !important;
  background-color: transparent !important;
}

aside nav a:hover,
aside nav button:hover,
aside nav [role="button"]:hover {
  background-color: var(--claude-hover) !important;
}

/* Sidebar icon buttons */
aside > div:first-child button,
aside > div:first-child a {
  color: var(--claude-text-secondary) !important;
}

aside > div:first-child button:hover,
aside > div:first-child a:hover {
  background-color: var(--claude-hover) !important;
}

/* Conversation items in sidebar */
[aria-label="Conversations"] > div > div > div,
div[tabindex="0"][aria-label*="conversation"] {
  border-radius: 8px !important;
  color: var(--claude-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 430 !important;
}

div[tabindex="0"][aria-label*="conversation"]:hover {
  background-color: var(--claude-hover) !important;
}

/* Search input in sidebar */
aside input[type="text"],
aside [aria-label="Search messages"] {
  background-color: var(--claude-white) !important;
  color: var(--claude-text-primary) !important;
  border: 1px solid var(--claude-border) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* Sidebar section titles (Today, Yesterday, etc) */
aside h2, aside h3 {
  color: var(--claude-text-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Resize handle */
[aria-label="Resize sidebar"] {
  background-color: transparent !important;
}
[aria-label="Resize sidebar"]:hover {
  background-color: var(--claude-border) !important;
}

/* ============================================ */
/* 5. INPUT / CHAT BOX - Claude.ai style        */
/* ============================================ */

/* The main form container - white box with shadow like Claude */
main form {
  background-color: var(--claude-input-bg) !important;
  border: 1px solid transparent !important;
  border-radius: var(--claude-input-radius) !important;
  box-shadow: var(--claude-input-shadow) !important;
  max-width: 672px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Textarea inside the form */
main form textarea,
[aria-label="Message input"] {
  background-color: var(--claude-input-bg) !important;
  color: var(--claude-text-primary) !important;
  font-family: var(--claude-font-sans) !important;
  font-size: 16px !important;
  border: none !important;
  box-shadow: none !important;
  resize: none !important;
}

/* Placeholder text */
main form textarea::placeholder,
[aria-label="Message input"]::placeholder {
  color: var(--claude-text-muted) !important;
  font-size: 16px !important;
}

/* Buttons inside the input area */
main form button {
  color: var(--claude-text-muted) !important;
  background-color: transparent !important;
  border: none !important;
}

main form button:hover {
  color: var(--claude-text-secondary) !important;
  background-color: var(--claude-hover) !important;
}

/* Send button - Claude uses coral/salmon color */
main form button[type="submit"],
main form [aria-label="Send message"] {
  background-color: #c4704b !important;
  color: var(--claude-white) !important;
  border-radius: 50% !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Claude hides send button when disabled/empty - show muted version */
main form button[type="submit"]:disabled,
main form [aria-label="Send message"]:disabled {
  background-color: #ddd5cc !important;
  color: var(--claude-white) !important;
  opacity: 0.4 !important;
}

/* ============================================ */
/* 6. GREETING TEXT - Serif font like Claude     */
/* ============================================ */

/* The "Good evening, Harry Roger" heading */
main h2,
main [class*="text-4xl"],
main [class*="text-3xl"],
main [class*="text-2xl"] {
  font-family: var(--claude-font-serif) !important;
  font-weight: 330 !important;
  font-size: 40px !important;
  color: var(--claude-text-secondary) !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
}

/* Fix greeting animation/overflow clipping - the split-parent class clips words */
.split-parent,
p.split-parent,
[class*="split-parent"] {
  overflow: visible !important;
  display: inline !important;
  white-space: nowrap !important;
}

/* Fix the greeting container to display in a row */
.flex.flex-col.md\:flex-row.items-center.justify-center.gap-2 {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

/* Ensure greeting spans are visible */
.split-parent span {
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Style the greeting icon to match Claude's coral sparkle appearance */
.flex.flex-col.md\:flex-row .relative.size-10 svg,
.flex.flex-col.md\:flex-row .shadow-stroke svg {
  color: var(--claude-accent) !important;
  fill: var(--claude-accent) !important;
}

/* Make the icon container match Claude's style - no white circle bg */
.flex.flex-col.md\:flex-row .shadow-stroke {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.flex.flex-col.md\:flex-row .shadow-stroke::after {
  display: none !important;
}

/* ============================================ */
/* 7. MODEL SELECTOR - Claude.ai style          */
/* ============================================ */

/* Model button - move inside input area bottom-right like Claude */
[aria-label="Select a model"],
button[aria-label="Select a model"] {
  font-family: var(--claude-font-sans) !important;
  font-size: 12px !important;
  font-weight: 430 !important;
  color: var(--claude-text-secondary) !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  /* Move into the input form area */
  position: fixed !important;
  z-index: 100 !important;
}

[aria-label="Select a model"]:hover {
  background-color: var(--claude-hover) !important;
}

/* Model selector SVG icon - hide the gear icon, keep only text */
[aria-label="Select a model"] > svg:first-child {
  display: none !important;
}

[aria-label="Select a model"] svg:last-child {
  color: var(--claude-text-secondary) !important;
  width: 12px !important;
  height: 12px !important;
}

/* Model dropdown menu */
[role="listbox"],
[role="menu"],
div[class*="popover"] {
  background-color: var(--claude-white) !important;
  border: 1px solid var(--claude-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
  color: var(--claude-text-primary) !important;
}

[role="option"],
[role="menuitem"] {
  color: var(--claude-text-primary) !important;
  font-size: 14px !important;
}

[role="option"]:hover,
[role="menuitem"]:hover {
  background-color: var(--claude-hover) !important;
}

/* ============================================ */
/* 8. HEADER BAR                                */
/* ============================================ */

header,
.sticky.top-0,
main > div:first-child {
  background-color: var(--claude-bg) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Hide elements Claude doesn't have */
[aria-label="Add multi-conversation"],
[aria-label="Temporary Chat"] {
  display: none !important;
}

/* Hide Agent Marketplace - Claude doesn't have this */
[aria-label="Agent Marketplace"] {
  display: none !important;
}

/* ============================================ */
/* 9. CHAT MESSAGES                             */
/* ============================================ */

/* All message containers */
[data-testid*="message"],
[class*="message-content"],
[class*="markdown"] {
  color: var(--claude-text-primary) !important;
  font-family: var(--claude-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* Code blocks */
pre {
  background-color: #2b2b2b !important;
  color: #e6e6e6 !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace !important;
  font-size: 13px !important;
  padding: 16px !important;
  overflow-x: auto !important;
}

/* Inline code */
code:not(pre code) {
  background-color: #f0f0ec !important;
  color: var(--claude-text-primary) !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: "Menlo", "Monaco", "Consolas", monospace !important;
  font-size: 13px !important;
  padding: 2px 6px !important;
}

/* ============================================ */
/* 10. HIDE ALL LIBRECHAT & AWS BRANDING        */
/* ============================================ */

/* Hide footer "LibreChat v0.8.5-rc1 - Every AI for Everyone" */
a[href="https://librechat.ai"],
a[href*="librechat.ai"] {
  display: none !important;
}

/* Hide the entire footer line containing the LibreChat link */
main > div:last-child > a[href*="librechat"],
main > div:last-child:has(a[href*="librechat"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide any remaining "LibreChat" or "Every AI" text */
footer {
  display: none !important;
}

/* The "LibreChat v0.8.5..." text and "Every AI for Everyone" beside it */
main a[href="https://librechat.ai"] {
  display: none !important;
}

/* Hide the text node " - Every AI for Everyone." that follows the link */
main > a[href="https://librechat.ai"],
main > a[href="https://librechat.ai"] + * {
  display: none !important;
}

/* ============================================ */
/* 11. LOGIN / AUTH PAGES                       */
/* ============================================ */

/* Login page background */
body:has(form[aria-label="Login form"]),
body:has(form[aria-label="Registration form"]) {
  background-color: var(--claude-bg) !important;
}

/* Login card */
form[aria-label="Login form"],
form[aria-label="Registration form"] {
  background-color: var(--claude-white) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

/* Login form inputs */
form[aria-label="Login form"] input,
form[aria-label="Registration form"] input {
  background-color: var(--claude-white) !important;
  border: 1px solid var(--claude-border) !important;
  border-radius: 8px !important;
  color: var(--claude-text-primary) !important;
  font-size: 14px !important;
}

/* Login submit button - style like Claude's login */
form[aria-label="Login form"] button[type="submit"],
form[aria-label="Registration form"] button[type="submit"] {
  background-color: var(--claude-text-primary) !important;
  color: var(--claude-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Login page logo */
main img[src*="logo"] {
  max-width: 40px !important;
  max-height: 40px !important;
}

/* ============================================ */
/* 12. SCROLLBARS - Thin, subtle                */
/* ============================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ============================================ */
/* 13. ARTIFACTS / SIDE PANEL                   */
/* ============================================ */

[class*="artifact"],
[class*="side-panel"],
[class*="preview"] {
  background-color: var(--claude-white) !important;
  border-left: 1px solid var(--claude-border) !important;
}

/* ============================================ */
/* 14. TOOLTIPS & POPOVERS                      */
/* ============================================ */

[role="tooltip"] {
  background-color: var(--claude-text-primary) !important;
  color: var(--claude-white) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================ */
/* 15. MISC OVERRIDES                           */
/* ============================================ */

/* Selection color - Claude uses orange tint */
::selection {
  background-color: rgba(196, 112, 75, 0.2);
}

/* Focus rings - subtle like Claude */
*:focus-visible {
  outline: 2px solid rgba(31, 31, 30, 0.15) !important;
  outline-offset: 2px !important;
}

/* No focus ring on textarea/input inside the chat form */
main form textarea:focus-visible,
main form textarea:focus,
main form [aria-label="Message input"]:focus-visible,
main form [aria-label="Message input"]:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove green/teal accent from LibreChat */
.bg-green-500, .bg-green-600, .bg-teal-500, .bg-teal-600,
[class*="bg-green"], [class*="bg-teal"],
.text-green-500, .text-teal-500 {
  background-color: var(--claude-accent) !important;
  color: var(--claude-white) !important;
}

/* Override ALL dark backgrounds */
.bg-gray-900, .bg-gray-800, .bg-gray-700, .bg-gray-600,
.bg-zinc-900, .bg-zinc-800, .bg-zinc-700,
.bg-neutral-900, .bg-neutral-800,
.bg-slate-900, .bg-slate-800,
.dark .bg-gray-900, .dark .bg-gray-800,
.dark .bg-gray-700, .dark .bg-gray-600,
[class*="bg-surface"],
[class*="bg-token"] {
  background-color: var(--claude-bg) !important;
}

/* Override text colors on dark backgrounds */
.text-white,
.dark .text-white,
.text-gray-100,
.dark .text-gray-100 {
  color: var(--claude-text-primary) !important;
}

/* Borders and dividers */
hr, [class*="divider"], [class*="separator"] {
  border-color: var(--claude-border) !important;
  opacity: 1 !important;
}

/* Tags, badges, chips */
[class*="badge"], [class*="tag"], [class*="chip"] {
  background-color: var(--claude-hover) !important;
  color: var(--claude-text-secondary) !important;
  border: 1px solid var(--claude-border) !important;
  border-radius: 16px !important;
}

/* Dialog/Modal */
[role="dialog"],
[class*="modal"] {
  background-color: var(--claude-white) !important;
  color: var(--claude-text-primary) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Dialog overlay */
[class*="overlay"],
[class*="backdrop"] {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

/* MCP Servers button */
[aria-label*="MCP"],
[class*="mcp"] {
  color: var(--claude-text-muted) !important;
  font-size: 13px !important;
}

/* Agent Marketplace */
[aria-label="Agent Marketplace"] {
  color: var(--claude-text-secondary) !important;
}

/* Settings button (user avatar at bottom of sidebar) */
[aria-label*="Settings"] {
  color: var(--claude-text-secondary) !important;
}

/* ============================================ */
/* 16. LOADING / SPLASH SCREEN                  */
/* ============================================ */

#loading-container {
  background-color: var(--claude-bg) !important;
}

/* ============================================ */
/* 17. ACCOUNT SETTINGS PAGE                    */
/* ============================================ */

[class*="settings"],
[class*="Settings"] {
  background-color: var(--claude-bg) !important;
  color: var(--claude-text-primary) !important;
}

/* ============================================ */
/* 18. THEME TOGGLE - Force light appearance    */
/* ============================================ */

/* Hide theme toggle since we're forcing light mode */
[aria-label="Toggle theme"] {
  display: none !important;
}

/* ============================================ */
/* 19. ADDITIONAL BRANDING CLEANUP              */
/* ============================================ */

/* Hide version footer text below chat input */
div:has(> a[href="https://librechat.ai"]) {
  display: none !important;
}

/* Hide "AWS Bedrock" and "My Agents" from model dropdown by their IDs */
#endpoint-bedrock-menu,
#endpoint-agents-menu {
  display: none !important;
}

/* ============================================ */
/* 20. SIDEBAR CLEANUP - Match Claude.ai       */
/* ============================================ */

/* Hide sidebar buttons that Claude.ai doesn't have */
[aria-label="Agent Builder"],
[aria-label="Prompts"],
[aria-label="Memories"],
[aria-label="Attach Files"],
[aria-label="Parameters"],
[aria-label="Bookmarks"] {
  display: none !important;
}

/* ============================================ */
/* 21. INPUT AREA CLEANUP                       */
/* ============================================ */

/* Style Tools Options and MCP buttons to match Claude aesthetic */
[aria-label="Tools Options"] {
  color: var(--claude-text-secondary) !important;
  font-size: 13px !important;
  background-color: transparent !important;
  border: none !important;
}

/* MCP Servers button styling */
main form button:not([aria-label="Attach File Options"]):not([aria-label="Send message"]):not([type="submit"]):not([aria-label="Tools Options"]) {
  color: var(--claude-text-muted) !important;
  font-size: 13px !important;
  background-color: transparent !important;
}

/* Ensure all input buttons are visible and properly styled */
main form [aria-label="Attach File Options"],
main form [aria-label="Send message"],
main form button[type="submit"] {
  display: inline-flex !important;
}

/* Fix Attach File button background - should be transparent like Claude */
main form [aria-label="Attach File Options"] {
  background-color: transparent !important;
  color: var(--claude-text-secondary) !important;
}

/* ============================================ */
/* 22. LOGIN PAGE - Claude-style               */
/* ============================================ */

/* Hide the LibreChat logo on login page - the img is NOT inside main, it's a sibling */
img[src*="logo.svg"],
img[src*="logo.png"],
img[alt*="Logo"],
img[alt*="logo"] {
  display: none !important;
}

/* Style "Welcome back" text to match Claude */
main > h1 {
  font-family: var(--claude-font-serif) !important;
  font-weight: 330 !important;
  font-size: 32px !important;
  color: var(--claude-text-secondary) !important;
}

/* ============================================ */
/* 23. MODEL SELECTOR REPOSITIONING            */
/* ============================================ */

/* Use JavaScript-injected positioning for model selector */
/* The model selector button should appear inside the input box, bottom-right */
/* This is handled by repositioning it absolutely relative to the form */
main form {
  position: relative !important;
}

/* ============================================ */
/* 24. FINAL POLISH                            */
/* ============================================ */

/* FIX: Prevent page from scrolling beyond content (causes dark bar at bottom) */
/* LibreChat's chat uses internal scroll containers, so page-level overflow: hidden is safe */
html {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background-color: var(--claude-bg) !important;
}

body {
  height: 100% !important;
  overflow: hidden !important;
  background-color: var(--claude-bg) !important;
  margin: 0 !important;
}

#root {
  height: 100% !important;
  overflow: hidden !important;
  background-color: var(--claude-bg) !important;
}

/* Force every div under root to have correct bg and fill height */
#root > div {
  background-color: var(--claude-bg) !important;
  height: 100% !important;
  overflow-y: auto !important;
}

/* Remove any pseudo-elements that could cause dark areas */
body::after,
body::before {
  content: none !important;
  display: none !important;
}

/* Override any dark mode remnants */
.dark,
[class*="bg-gray-9"],
[class*="bg-gray-8"],
[class*="bg-gray-7"],
[class*="bg-black"] {
  background-color: var(--claude-bg) !important;
  color: var(--claude-text-primary) !important;
}