/* Custom CSS to match admin theme */

/* Root variables for consistent theming */
:root {
  --primary-color: #2563eb;  /* Blue-600, matching admin nav */
  --primary-hover: #1d4ed8;  /* Blue-700 */
  --primary-light: #dbeafe;  /* Blue-100 */
  --background: #f9fafb;     /* Gray-50 */
  --paper: #ffffff;
  --text-primary: #111827;   /* Gray-900 */
  --text-secondary: #6b7280; /* Gray-500 */
  --border: #e5e7eb;         /* Gray-200 */
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Main app background */
.MuiCssBaseline-root {
  background-color: var(--background) !important;
}

/* Header customization - less aggressive */
.MuiAppBar-root {
  background: var(--primary-color);
  box-shadow: var(--shadow);
}

/* Chat container */
.MuiContainer-root {
  background-color: var(--background) !important;
  min-height: 100vh;
}

/* Chat messages area */
.MuiPaper-root {
  background-color: var(--paper) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 0.5rem !important;
}

/* Message bubbles */
.MuiPaper-elevation1 {
  box-shadow: var(--shadow) !important;
}

/* User message styling */
.cl-message[data-author="user"] {
  background-color: var(--primary-color) !important;
  color: white !important;
  border-radius: 1rem 1rem 0.25rem 1rem !important;
  margin-left: 2rem !important;
  margin-right: 0.5rem !important;
}

/* Assistant message styling */
.cl-message[data-author="AI Insights Assistant"] {
  background-color: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 1rem 1rem 1rem 0.25rem !important;
  margin-left: 0.5rem !important;
  margin-right: 2rem !important;
  box-shadow: var(--shadow) !important;
}

/* Message content */
.cl-message-content {
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1.6 !important;
}

/* Input field styling */
.MuiOutlinedInput-root {
  background-color: var(--paper) !important;
  border-radius: 1.5rem !important;
  border: 1px solid var(--border) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-color) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-color) !important;
  border-width: 2px !important;
}

/* Send button - match admin dashboard blue exactly */
.MuiIconButton-root[aria-label="Send"],
.MuiIconButton-root[data-testid="send-button"],
button[type="submit"] .MuiSvgIcon-root,
.cl-chat-input button .MuiSvgIcon-root {
  color: #2563eb !important;  /* Exact blue-600 from admin nav */
}

.MuiIconButton-root[aria-label="Send"]:hover,
.MuiIconButton-root[data-testid="send-button"]:hover,
button[type="submit"]:hover {
  background-color: rgba(37, 99, 235, 0.1) !important;  /* Blue-600 with opacity */
  color: #1d4ed8 !important;  /* Blue-700 on hover */
}

/* File upload button - match send button */
.MuiIconButton-root[aria-label="Upload"],
.cl-chat-input .MuiIconButton-root {
  color: #2563eb !important;
}

.MuiIconButton-root[aria-label="Upload"]:hover {
  background-color: rgba(37, 99, 235, 0.1) !important;
}

/* Starter buttons */
.cl-starter {
  background: linear-gradient(135deg, var(--paper) 0%, #f8fafc 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--shadow) !important;
  transition: all 0.2s ease !important;
  padding: 1rem !important;
  margin: 0.5rem !important;
}

.cl-starter:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 25px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05) !important;
  border-color: var(--primary-color) !important;
}

.cl-starter .MuiTypography-root {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Typing indicator */
.cl-typing-indicator {
  background-color: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 1rem !important;
  padding: 0.75rem 1rem !important;
  box-shadow: var(--shadow) !important;
}

/* Loading step */
.cl-step {
  background-color: var(--primary-light) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: 0.5rem !important;
  margin: 0.5rem 0 !important;
}

.cl-step .MuiTypography-root {
  color: var(--primary-color) !important;
  font-weight: 500 !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Header logo area */
.MuiToolbar-root .MuiTypography-h6 {
  color: white !important;
  font-weight: 700 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Welcome message styling */
.cl-message h1 {
  color: var(--primary-color) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

.cl-message h2, .cl-message h3 {
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 600 !important;
  margin: 1rem 0 0.5rem 0 !important;
}

/* Lists and bullet points */
.cl-message ul {
  margin: 0.5rem 0 !important;
  padding-left: 1.5rem !important;
}

.cl-message li {
  margin: 0.25rem 0 !important;
  color: var(--text-primary) !important;
}

/* Code blocks and inline code */
.cl-message code {
  background-color: var(--primary-light) !important;
  color: var(--primary-color) !important;
  padding: 0.125rem 0.25rem !important;
  border-radius: 0.25rem !important;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
}

.cl-message pre {
  background-color: var(--background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  margin: 0.5rem 0 !important;
  overflow-x: auto !important;
}

/* Emphasis and strong text */
.cl-message strong {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.cl-message em {
  font-style: italic !important;
  color: var(--text-secondary) !important;
}

/* Horizontal rules */
.cl-message hr {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 1.5rem 0 !important;
}

/* Custom emoji and icon styling */
.cl-message .emoji {
  font-size: 1.2em !important;
  margin-right: 0.25rem !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cl-message[data-author="user"] {
    margin-left: 1rem !important;
  }
  
  .cl-message[data-author="AI Insights Assistant"] {
    margin-right: 1rem !important;
  }
  
  .MuiToolbar-root {
    padding: 1rem !important;
  }
}

/* Login page customization */
.cl-login-container,
.cl-auth-container,
body[data-testid="login-page"],
div[data-testid="login-page"] {
  background: url('./login-bg.svg') center/cover, linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  min-height: 100vh !important;
}

.cl-login-form,
.cl-auth-form,
form[data-testid="login-form"] {
  background: var(--paper) !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04) !important;
  padding: 2rem !important;
  backdrop-filter: blur(10px) !important;
}


/* Target the actual logo element that exists */
img.logo.w-\[150px\].ai-style-change- {
  content: url('./logo-small.svg') !important;
  width: 120px !important;
  height: auto !important;
}

/* Alternative selectors for logo element */
img.logo,
img[class*="logo"],
img[class*="w-[150px]"] {
  content: url('./logo-small.svg') !important;
  width: 120px !important;
  height: auto !important;
}

.cl-login-title {
  color: var(--primary-color) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

.cl-login-description {
  color: var(--text-secondary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.875rem !important;
  margin-bottom: 1.5rem !important;
}

.cl-login-background {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.8 !important;
}

/* Favicon and browser tab styling */
link[rel="icon"],
link[rel="shortcut icon"] {
  content: url('./favicon.svg') !important;
}

/* Light theme variables only - less aggressive */
:root {
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #dbeafe;
  --background: #f9fafb;
  --paper: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
}

/* Don't force sidebar - let Chainlit handle it naturally */

/* Animation for smooth transitions */
.cl-message {
  animation: fadeInUp 0.3s ease-out !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}