/* custom.css — im LibreChat-Projektroot ablegen */


/* -- Farben über CSS-Variablen überschreiben -- */
:root {
  /* Primärfarbe (Buttons, Akzente) */
  --primary: 0 80% 50%;
  --input: 0 0% 0%;
  --color-primary: #e51b1a;
  --color-primary-hover: #b71615;

  /* Hintergrundfarben */
  --color-surface: #edf0f3;
  --color-surface-chat: #ffffff;

  --surface-primary-alt: #edf0f3;
  --surface-active: #edf0f3;
  --surface-active-alt: #fff;
  --surface-hover: #fff;
  --surface-secondary: #fff;
  --surface-tertiary: #fff;

  --switch-unchecked: 0 0% 0%;

  --border-light: #000;
  --border-medium: #000;

  /* Sidebar */
  --color-sidebar-bg: #edf0f3;
  --color-sidebar-text: #e0e0e0;

  /* Schriftart */
  --font-family-base: 'Outfit 300', sans-serif;

  --color-text: #000;
}

/* -- Dark Mode Overrides -- */
.dark {
  --color-surface: #333;
  --color-surface-chat: #333;
  --color-sidebar-bg: #11111b;

  --surface-primary-alt: #333;
  --surface-active-alt: #555;
  --surface-hover: #333;
  --surface-secondary: #333;
  --surface-tertiary: #333;

  --input: 0 0% 60%;


  --switch-unchecked: 0 0% 33%;

  --color-text: #fff;
  --border-light: #999;
  --border-medium: #999;

}

/* -- Chat-Bubble Styling -- */
.message-content {
  border-radius: 12px;
  line-height: 1.7;
}

/* -- Code-Blöcke -- */
pre, code {
  background-color: #f0f0f0 !important;
  color: #333 !important;
  border-radius: 8px;
}

/* -- Eingabefeld -- */
#prompt-textarea {
  border: 2px solid var(--color-primary) !important;
  border-radius: 12px;
}

/* -- Buttons -- */
.btn-primary {
  background-color: var(--color-primary) !important;
}
.btn-primary:hover {
  background-color: var(--color-primary-hover) !important;
}
.prose {
  --tw-prose-links: var(--color-primary)!important;
}
.flex-row:has(#prompt-textarea) {align-items: center;}
.flex-row .flex-1:has(#prompt-textarea) {padding: 10px 10px 0 10px; flex: 0 0 100%;}

.text-text-secondary .select-none {color: var(--color-primary);}

.bg-surface-submit {background: var(--color-primary);}
.bg-surface-submit:hover {background: var(--color-primary-hover);}

.prose :where(hr):not(:where([class~=not-prose] *)) {border-color: #000; border-top-width: 2px;}

.text-green-100,
.text-green-200,
.text-green-300,
.text-green-400,
.text-green-500,
.text-green-600,
.text-green-700,
.text-green-800,
.text-cyan-700 {color: var(--color-primary);}
.hover\:text-green-400:hover,
.hover\:text-green-600:hover {color: var(--color-primary-hover);}

p.whitespace-pre-wrap a, li a {color: #000;}

* {border-radius:0!important; box-shadow: none!important;}
.border-violet-100\/60,
.border-violet-200\/60,
.border-violet-300\/60,
.border-violet-400\/60,
.border-violet-500\/60,
.border-violet-600\/60,
.border-violet-700\/60,
.border-violet-800\/60  {border-color:var(--border-light);}

.bg-violet-950\/10 {background: var(--surface-primary-alt);}
pre, code,
code.hljs, code[class*=language-], pre[class*=language-] {background: var(--surface-primary-alt)!important; color:var(--color-text)!important;}

.text-surface-submit {color:var(--color-primary);}

.btn-neutral {border-color:var(--border-light)!important; border-width: 2px;}

.dark .btn-neutral,
.dark .dark\:border-gray-600 {border-color:var(--border-light)!important;}

.text-red-500 {color: var(--color-primary);}

.hover\:text-accent-foreground:hover {color: var(--color-primary);}
.bg-surface-active-alt {color: var(--color-primary);}


.prose ul>li, .markdown ul>li {display: block;}
.prose ul>li:before, .markdown ul>li:before {content: "/";position: absolute;left: 0;color: #e51b1a;font-weight: 300;}

.border {border-width: 2px!important;}
.\[\&_tr\]\:border-b tr {border-bottom-width: 2px;}
.border-r {border-right-width: 2px;}
.border-l {border-left-width: 2px;}