/* ================================================================
   The Butler — Branding Styles
   Injected into LibreChat via index.html <link>
   Text-based branding (no image dependency).
   ================================================================ */

/* --- Top Nav Bar Branding --- */
#the-butler-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 20px;
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #161630 100%);
  border-bottom: 1px solid rgba(232, 197, 71, 0.15);
  z-index: 100;
  position: relative;
  flex-shrink: 0;
}

#the-butler-topbar .brand-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#the-butler-topbar .brand-logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#the-butler-topbar .brand-logo-link:hover {
  opacity: 0.9;
}

/* Text-only monogram — no image dependency */
#the-butler-topbar .brand-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e8c547 0%, #d4a82f 100%);
  color: #1a1a2e;
  font-size: 16px;
  font-weight: 800;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(232, 197, 71, 0.25);
}

#the-butler-topbar .brand-title-group {
  display: flex;
  flex-direction: column;
}

#the-butler-topbar .brand-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

#the-butler-topbar .brand-subtitle {
  font-size: 9px;
  font-weight: 500;
  color: rgba(232, 197, 71, 0.75);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 1px;
}

#the-butler-topbar .brand-badge {
  font-size: 10px;
  font-weight: 600;
  color: #e8c547;
  background: rgba(232, 197, 71, 0.1);
  padding: 3px 12px;
  border-radius: 12px;
  border: 1px solid rgba(232, 197, 71, 0.2);
  letter-spacing: 0.5px;
}

/* The topbar is a SIBLING of #root (both inside body).
   Make body a flex column so topbar stays on top and #root fills remaining space. */
body.has-branding,
body.branded-init {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

body.has-branding #root,
body.branded-init #root {
  flex: 1;
  min-height: 0;
}

/* Hide top bar on login/register pages */
body.auth-page #the-butler-topbar {
  display: flex;
}

/* --- Hide LibreChat's default nav on chat pages --- */
/* LibreChat renders a sticky top-0 header for its navigation.
   We hide it since we have our own branded top bar. */

/* Target any sticky header or bar LibreChat renders inside #root */
#root > [class*="fixed"]:where([class*="top-0"]),
#root > [class*="sticky"]:where([class*="top-0"]) {
  display: none !important;
}

/* Hide LibreChat's mobile nav open button (hamburger) since topbar replaces it */
#root button[data-testid="nav-new-chat-button"] {
  display: none !important;
}

/* Hide any LibreChat logo or branding inside the React tree */
#root img[alt="LibreChat Logo"],
#root [class*="librechat"],
#root [class*="LibreChat"],
#root a[href="/"] img[alt*="LibreChat"] {
  display: none !important;
}

/* --- Sidebar refinement --- */
/* Subtle accent on the active sidebar icon */
[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgba(232, 197, 71, 0.3);
}

/* --- Auth Page Whitelabelling --- */
/* Hide LibreChat's default React-rendered logo */
body.auth-page img[alt="LibreChat Logo"] {
  display: none !important;
}

/* Dark gradient background for auth pages */
body.auth-page {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #1f1f4a 100%) !important;
}

/* Auth form card — dark glassmorphic */
body.auth-page main > div[class*="w-authPageWidth"] {
  background: rgba(26, 26, 46, 0.92) !important;
  border: 1px solid rgba(232, 197, 71, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(232, 197, 71, 0.05) !important;
  padding: 2rem !important;
}

/* "Welcome back" heading — restyled for Butler */
body.auth-page h1.text-3xl {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 0.5rem !important;
}

/* Input fields — dark futuristic */
body.auth-page input[type="text"],
body.auth-page input[type="password"],
body.auth-page input[type="email"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(232, 197, 71, 0.15) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

body.auth-page input[type="text"]:focus,
body.auth-page input[type="password"]:focus,
body.auth-page input[type="email"]:focus {
  border-color: #e8c547 !important;
  box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Floating labels */
body.auth-page label {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Continue button — Butler gold */
body.auth-page button[data-testid="login-button"],
body.auth-page button[type="submit"] {
  background: linear-gradient(135deg, #e8c547 0%, #d4a82f 100%) !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: none !important;
  border-radius: 12px !important;
  height: 48px !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.3px !important;
}

body.auth-page button[data-testid="login-button"]:hover,
body.auth-page button[type="submit"]:hover {
  background: linear-gradient(135deg, #f0d055 0%, #dbb03a 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232, 197, 71, 0.3) !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  #the-butler-topbar .brand-subtitle,
  #the-butler-topbar .brand-badge {
    display: none;
  }
  #the-butler-topbar {
    height: 50px;
    padding: 0 12px;
  }
  #the-butler-topbar .brand-title {
    font-size: 15px;
  }
  #the-butler-topbar .brand-monogram {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}