/* Custom CSS for Cendien RFP RAG System */

/* Avatar base sizing (uses Chainlit default avatar image) */
.cl-message-avatar img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

/* Beating animation when the app is processing a response */
@keyframes cendien-beat {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(16,163,127,0.0)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(16,163,127,0.35)); }
}

/* Toggle via document.body.classList.add('processing') in app.py */
/* Apply animation to assistant avatar container for broader compatibility */
body.processing .cl-message[data-author="Assistant"] .cl-message-avatar {
  animation: cendien-beat 0.9s ease-in-out infinite;
  transform-origin: center center;
}

/* Hide the readme button */
#readme-button {
  display: none !important;
}

/* Style the user button directly */
#user-nav-button {
  background-image: url("/public/logout-icon.svg") !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: brightness(1.5) !important;
}

/* Hide the user avatar content */
#user-nav-button span {
  display: none !important;
}

/* Header styling and layout */
#header {
  justify-content: space-between !important;
  background: rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Hide logo only during chat page initial loading */
body:not([data-loaded]) #header img[src*="logo"],
body:not([data-ready]) #header img[src*="logo"],
#header img[src*="logo"]:not([data-loaded]) {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Style the header logo - try different selectors */
#header img, header img {
  height: 32px !important;
  width: auto !important;
  margin-right: 16px !important;
}

/* Position logo to the left of navigation buttons */
#header > div:first-child {
  display: flex !important;
  align-items: center !important;
  position: relative !important; /* Ensure proper stacking */
  z-index: 1 !important; /* Allow clicks on buttons */
}

/* Ensure sidebar control buttons are clickable */
#header > div:first-child button {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Always show logo - position it appropriately */
#header > div:first-child::before {
  content: "";
  background-image: url("/public/cendien_corp_logo.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 140px;
  height: 36px;
  display: block;
  order: 2; /* Place logo after sidebar buttons */
  margin-left: 8px; /* Space from sidebar buttons when collapsed */
  margin-right: 8px; /* Space to navigation when expanded */
}

/* Sidebar logo styling */
.sidebar img[alt*="logo"], .sidebar img[src*="logo"],
[data-testid="sidebar"] img[alt*="logo"], [data-testid="sidebar"] img[src*="logo"] {
  height: 24px !important;
  width: auto !important;
  margin: 8px !important;
}

/* Position sidebar logo at the top right */
.sidebar, [data-testid="sidebar"] {
  position: relative !important;
}

.sidebar img[alt*="logo"]:first-child, [data-testid="sidebar"] img[alt*="logo"]:first-child,
.sidebar img[src*="logo"]:first-child, [data-testid="sidebar"] img[src*="logo"]:first-child {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
}

/* Dark mode background for header */
.dark #header {
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Hide only the empty right container, keep the left one for sidebar toggle */
#header > div:nth-child(3) {
  display: none !important;
}

/* Create wrapper for navigation */
#header > div:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  position: relative !important;
  transform: translateX(-15%) !important; /* Shift navigation buttons 15% to the left */
}

/* Center the navigation buttons accounting for logo width */
#header > div:last-child button:not(#theme-toggle):not(#user-nav-button) {
  position: static !important;
  margin: 0 4px !important;
}

/* Position theme toggle and logout on the right - absolute to header */
#theme-toggle,
#user-nav-button {
  position: absolute !important;
  transform: none !important;
}

#theme-toggle {
  right: 48px !important;
}

#user-nav-button {
  right: 12px !important; /* Match header's right padding exactly */
}


/* Hide header link icons and show text instead */
[data-testid="header-links"] button {
  position: relative;
}

[data-testid="header-links"] button svg {
  display: none !important;
}

[data-testid="header-links"] button::after {
  content: attr(aria-label);
  font-size: 14px;
  font-weight: 500;
  color: currentColor;
}

/* Alternative approach - add text for each button */
[data-testid="header-links"] button[aria-label*="Proposal"]::after {
  content: "Proposal Generator";
}

[data-testid="header-links"] button[aria-label*="Recon"]::after {
  content: "Recon";
}

[data-testid="header-links"] button[aria-label*="Monday"]::after {
  content: "Monday";
}

/* Chat profile dropdown font size - match header links */
/* Target all possible selectors for chat profile button */
#chat-profile-selector button,
#chat-profile-selector button *,
[id*="chat-profile"] button,
[id*="chat-profile"] button *,
button[id*="profile"],
button[id*="profile"] *,
[data-testid*="profile"] button,
[data-testid*="profile"] button *,
.MuiButton-root[aria-label*="profile"],
.MuiButton-root[aria-label*="profile"] * {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Chat profile dropdown menu items */
#chat-profile-selector ul li,
#chat-profile-selector ul li *,
[id*="chat-profile"] ul li,
[id*="chat-profile"] ul li *,
.MuiMenu-list li,
.MuiMenuItem-root {
  font-size: 12px !important;
}

/* Replace ONLY welcome screen logo with custom SVG (not login page) */
/* Welcome screen logo is inside main content area, login page logo is in auth container */
main img[src*="/logo?theme"],
#root > div > div img[src*="/logo?theme"] {
  content: url("/public/welcome-logo.svg") !important;
  width: 320px !important;
  height: 100px !important;
  object-fit: contain !important;
}