/* Orange & Brown Theme Override for LibreChat
 * Mount this file to override built-in theme colors
 */

/* ===========================
   NAV (LEFT PANEL) STYLES
   =========================== */

/* All text in the nav - dark for light background */
.nav,
.nav * {
  color: #333333 !important;
}

/* Nav buttons and interactive elements */
.nav button {
  color: #333333 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Nav icons */
.nav svg {
  color: #333333 !important;
}

/* Search bar container - keep it transparent like original */
.nav input[type="text"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #333333 !important;
}

.nav input[type="text"]::placeholder {
  color: #111111 !important;
  opacity: 1 !important;
}

/* Search bar focus state - add subtle background on focus */
.nav input[type="text"]:focus {
  outline: none !important;
}


/* Conversation items hover state */
.nav [class*="hover:bg-"],
.nav button:hover,
.nav [role="button"]:hover,
.nav a:hover {
  background-color: #cfcfce !important;
  color: #333333 !important;
}

/* Active/selected conversation */
.nav [class*="bg-surface-active"],
.nav button[data-state="open"],
.nav button[aria-expanded="true"],
.nav [aria-current="page"] {
  background-color: #bfbfbe !important;
  color: #333333 !important;
}




/* Account settings button - no border */
.nav [class*="AccountSettings"] button {
  background-color: transparent !important;
}

/* Remove interfering backgrounds in Nav */
.nav [class*="bg-surface"],
.nav [class*="bg-gray"],
.nav [class*="bg-white"],
.nav div[class*="bg-"],
.nav span[class*="bg-"] {
  background-color: transparent !important;
}

/* Nested content areas maintain background */
.nav > div,
.nav > div > div {
  background-color: #dadad9 !important;
}

/* All nested content */
.nav * {
  background-color: inherit !important;
}

/* Reset specific elements that need different backgrounds */
.nav button,
.nav input,
.nav textarea,
.nav select {
  background-color: transparent !important;
}


/* ===========================
   BORDERS & DIVIDERS IN NAV
   =========================== */

/* Specific borders that should exist */
.nav hr,
.nav [class*="divider"],
.nav [class*="separator"] {
  border-color: #9a9a99 !important;
}

/* Horizontal dividers */
.nav hr {
  background-color: #9a9a99 !important;
}

/* ===========================
   CONVERSATION LIST ITEMS
   =========================== */

/* Text colors for secondary text (timestamps, metadata) */
.nav [class*="text-text-secondary"],
.nav .text-text-secondary {
  color: #666666 !important;
}

/* Primary text in nav */
.nav [class*="text-text-primary"],
.nav .text-text-primary {
  color: #333333 !important;
}

/* Chats header */
.nav [class*="ChatsHeader"] {
  color: #666666 !important;
}

/* Date labels in conversation list */
.nav h2 {
  color: #666666 !important;
}

/* ===========================
   REMOVE CHAT ITEM GRADIENTS
   =========================== */

/* Hide the gradient overlay on conversation items */
.nav [class*="bg-gradient-to-l"] {
  display: none !important;
}

/* Alternative: Make gradient completely transparent */
.nav [class*="bg-gradient-to-l"] {
  background: transparent !important;
  background-image: none !important;
}

/* ===========================
   AGENT MARKETPLACE BUTTON
   =========================== */

/* Agent Marketplace button icon - darker color */
.nav [data-testid="nav-agents-marketplace-button"] svg,
.nav [data-testid="nav-agents-marketplace-button"] .h-5.w-5 {
  color: #111111 !important;
}

/* Agent Marketplace button text */
.nav [data-testid="nav-agents-marketplace-button"] span {
  color: #111111 !important;
}

/* ===========================
   SEND BUTTON STYLES
   =========================== */

/* Send button - orange background with white text */
#send-button {
  background-color: #FF5A00 !important;
  color: white !important;
}

/* Send button icon color */
#send-button svg {
  color: white !important;
}

/* Send button hover state */
#send-button:not(:disabled):hover {
  background-color: #E65100 !important; /* Slightly darker orange on hover */
}

/* Send button disabled state */
#send-button:disabled {
  background-color: #FF5A00 !important;
  opacity: 0.5 !important;
  color: white !important;
}

#send-button:disabled svg {
  color: white !important;
}

/* ===========================
   CUSTOM LOGO ABOVE WELCOME MESSAGE
   =========================== */

/* Fix the parent container max-height issue */
.flex.h-full.transform-gpu.flex-col.items-center.justify-center.pb-16 {
  max-height: none !important;
  padding-bottom: 2rem !important;
}

/* Force the container to always be vertical (override md:flex-row) */
.flex.flex-col.md\:flex-row.items-center.justify-center.gap-2 {
  flex-direction: column !important;
}

/* Hide the default LibreChat SVG icon */
.flex.flex-col.md\:flex-row > .relative.size-10 {
  display: none !important;
}

/* Add custom logo - smaller size to prevent overflow */
.flex.flex-col.md\:flex-row.items-center.justify-center.gap-2::before {
  content: '';
  display: block;
  width: 200px;
  height: 200px;          
  margin: 0 auto 2rem;
  background-image: url('./logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Fade in animation */
  animation: fadeInLogo 2s ease-in;
}

@keyframes fadeInLogo {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================
   WELCOME MESSAGE BRANDING
   =========================== */
/* AllRoundGothic Medium font */
@font-face {
 font-family: 'AllRoundGothic';
 src: url('./fonts/AllRoundGothic-Medium.otf') format('opentype');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}

/* Apply AllRoundGothic Medium font to entire welcome message */
p.split-parent {
  font-family: 'AllRoundGothic', 'AllRound Gothic', sans-serif !important;
  font-weight: 500 !important; /* Medium weight */
}

/* Target the third word span which contains "orange.chat" */
p.split-parent > span:nth-child(3) span {
  color: #FF5A00 !important;
}

/* Optional: Make orange.chat slightly bolder for emphasis */
p.split-parent > span:nth-child(3) {
  font-weight: 600;
}


/* ===========================
   BUTTONS STYLES
   =========================== */

/* Speichern/Auswählen buttons (with bg-surface-submit class) */
button.bg-surface-submit {
  background-color: #FF5A00 !important;
  color: white !important;
}

button.bg-surface-submit:not(:disabled):hover {
  background-color: #E65100 !important;
}

button.bg-surface-submit:disabled {
  background-color: #FF5A00 !important;
  opacity: 0.5 !important;
  color: white !important;
}

/* Hinzufügen/Speichern buttons (with btn-primary class) */
button.btn-primary {
  background-color: #FF5A00 !important;
  color: white !important;
}

button.btn-primary svg {
  color: white !important;
}

button.btn-primary:not(:disabled):hover {
  background-color: #E65100 !important;
}

button.btn-primary:disabled {
  background-color: #FF5A00 !important;
  opacity: 0.5 !important;
  color: white !important;
}

button.btn-primary:disabled svg {
  color: white !important;
}

/* Speichern button (with bg-green-500 class) */
button.bg-green-500 {
  background-color: #FF5A00 !important;
  color: white !important;
}

button.bg-green-500:not(:disabled):hover {
  background-color: #E65100 !important;
}

button.bg-green-500:disabled {
  background-color: #FF5A00 !important;
  opacity: 0.5 !important;
  color: white !important;
}

/* Toast notification (with alert-root class) */
.alert-root {
  background-color: #FF5A00 !important;
  border-color: #FF5A00 !important;
  color: white !important;
}