/* =============================================================================
   riester ai - Custom Branding CSS
   Supports Light/Dark mode with riester branding
   ============================================================================= */

/* Font family override */
* {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* =============================================================================
   DARK THEME
   ============================================================================= */

.dark,
[data-theme="dark"],
html.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 98%;
  --card: 0 0% 5%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 5%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 12%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 15%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 18%;
  --input: 0 0% 18%;
  --ring: 0 0% 30%;
}

.dark body,
html.dark body {
  background-color: #000;
  color: #f5f5f5;
}

.dark main,
.dark .main,
.dark [class*="main"] {
  background-color: #000;
}

.dark nav,
.dark aside,
.dark [class*="sidebar"] {
  background-color: #0a0a0a;
  border-color: #1a1a1a;
}

.dark [class*="card"],
.dark .bg-card {
  background-color: #0a0a0a;
  border-color: #222;
}

.dark textarea,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"] {
  background-color: #111;
  border-color: #333;
  color: #fff;
}

.dark textarea::placeholder,
.dark input::placeholder {
  color: #666;
}

.dark a {
  color: #888;
}

.dark a:hover {
  color: #fff;
}

.dark [role="menu"],
.dark [role="listbox"],
.dark [class*="dropdown"],
.dark [class*="popover"] {
  background-color: #111;
  border-color: #333;
}

.dark [role="option"]:hover,
.dark [role="menuitem"]:hover {
  background-color: #222;
}

.dark ::-webkit-scrollbar-track {
  background: #000;
}

.dark ::-webkit-scrollbar-thumb {
  background: #333;
}

/* =============================================================================
   LIGHT THEME
   ============================================================================= */

:root,
.light,
[data-theme="light"],
html:not(.dark) {
  --background: 0 0% 100%;
  --foreground: 0 0% 5%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 5%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 5%;
  --primary: 0 0% 5%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 5%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 40%;
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 5%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 5%;
}

html:not(.dark) body,
.light body {
  background-color: #fff;
  color: #111;
}

.light main,
.light .main,
html:not(.dark) main {
  background-color: #fff;
}

.light nav,
.light aside,
.light [class*="sidebar"],
html:not(.dark) nav,
html:not(.dark) aside {
  background-color: #f8f8f8;
  border-color: #e5e5e5;
}

.light [class*="card"],
.light .bg-card,
html:not(.dark) [class*="card"] {
  background-color: #fff;
  border-color: #e5e5e5;
}

.light textarea,
.light input[type="text"],
.light input[type="email"],
.light input[type="password"],
html:not(.dark) textarea,
html:not(.dark) input[type="text"] {
  background-color: #fff;
  border-color: #ddd;
  color: #111;
}

.light textarea::placeholder,
.light input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #999;
}

.light a,
html:not(.dark) a {
  color: #555;
}

.light a:hover,
html:not(.dark) a:hover {
  color: #000;
}

.light [role="menu"],
.light [role="listbox"],
.light [class*="dropdown"],
html:not(.dark) [role="menu"] {
  background-color: #fff;
  border-color: #e5e5e5;
}

.light [role="option"]:hover,
.light [role="menuitem"]:hover,
html:not(.dark) [role="option"]:hover {
  background-color: #f5f5f5;
}

.light ::-webkit-scrollbar-track,
html:not(.dark) ::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.light ::-webkit-scrollbar-thumb,
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #ccc;
}

/* =============================================================================
   COMMON STYLES (Both themes)
   ============================================================================= */

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  opacity: 0.8;
}

/* Focus states */
textarea:focus,
input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.2);
}

/* Send button */
button[type="submit"],
button[class*="send"],
button[aria-label*="Send"] {
  border-radius: 8px;
  font-weight: 600;
}

.dark button[type="submit"] {
  background-color: #fff;
  color: #000;
}

.dark button[type="submit"]:hover {
  background-color: #e5e5e5;
}

.light button[type="submit"],
html:not(.dark) button[type="submit"] {
  background-color: #000;
  color: #fff;
}

.light button[type="submit"]:hover,
html:not(.dark) button[type="submit"]:hover {
  background-color: #222;
}

/* =============================================================================
   GOOGLE LOGIN BUTTON (Both themes)
   ============================================================================= */

button[class*="google"],
a[href*="google"],
[class*="social"] button {
  background: #fff !important;
  color: #333 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  border: 1px solid #ddd !important;
}

button[class*="google"]:hover,
a[href*="google"]:hover {
  background: #f8f8f8 !important;
  transform: translateY(-1px);
}

/* =============================================================================
   HEADER & FOOTER
   ============================================================================= */

header,
[class*="header"] {
  border-bottom-width: 1px;
}

footer,
[class*="footer"] {
  font-size: 12px;
}

.dark footer {
  color: #555;
}

.light footer,
html:not(.dark) footer {
  color: #999;
}

/* =============================================================================
   HIDE LIBRECHAT BRANDING
   ============================================================================= */

[class*="librechat"],
[class*="LibreChat"],
img[alt*="LibreChat"] {
  display: none !important;
}

/* =============================================================================
   MODEL ICONS - Subtle in both modes
   ============================================================================= */

.dark img[alt*="OpenAI"],
.dark img[alt*="GPT"],
.dark img[alt*="Claude"],
.dark img[alt*="Gemini"] {
  opacity: 0.6;
  filter: brightness(0.8);
}

.light img[alt*="OpenAI"],
.light img[alt*="GPT"],
.light img[alt*="Claude"],
.light img[alt*="Gemini"],
html:not(.dark) img[alt*="OpenAI"] {
  opacity: 0.7;
}

/* =============================================================================
   SMOOTH TRANSITIONS
   ============================================================================= */

body,
main,
nav,
aside,
[class*="sidebar"],
[class*="card"],
textarea,
input,
button,
a {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* =============================================================================
   DIALOGS & MODALS
   ============================================================================= */

.dark [role="dialog"],
.dark [class*="modal"] {
  background-color: #111;
  border-color: #333;
}

.light [role="dialog"],
.light [class*="modal"],
html:not(.dark) [role="dialog"] {
  background-color: #fff;
  border-color: #e5e5e5;
}

/* =============================================================================
   CODE BLOCKS
   ============================================================================= */

.dark pre,
.dark code {
  background-color: #111;
}

.light pre,
.light code,
html:not(.dark) pre {
  background-color: #f5f5f5;
}

/* =============================================================================
   MESSAGE STYLING
   ============================================================================= */

.dark [class*="user-message"],
.dark [data-message-author="user"] {
  background-color: #0a0a0a;
}

.light [class*="user-message"],
.light [data-message-author="user"],
html:not(.dark) [class*="user-message"] {
  background-color: #f8f8f8;
}