/* Dark Mode Fix for Chainlit Login Page */

/* Login Container */
body[data-theme="dark"] #cl-auth {
  background-color: #1a1a1a !important;
}

body[data-theme="dark"] .cl-auth-card {
  background-color: #2d2d2d !important;
  border: 1px solid #404040 !important;
}

/* Login Title */
body[data-theme="dark"] .cl-auth-card h1,
body[data-theme="dark"] .cl-auth-card h2,
body[data-theme="dark"] .cl-auth-card h3 {
  color: #ffffff !important;
}

/* Login Labels */
body[data-theme="dark"] .cl-auth-card label {
  color: #e5e5e5 !important;
}

/* Input Fields */
body[data-theme="dark"] .cl-auth-card input[type="text"],
body[data-theme="dark"] .cl-auth-card input[type="email"],
body[data-theme="dark"] .cl-auth-card input[type="password"] {
  background-color: #3a3a3a !important;
  border: 1px solid #555555 !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .cl-auth-card input[type="text"]::placeholder,
body[data-theme="dark"] .cl-auth-card input[type="email"]::placeholder,
body[data-theme="dark"] .cl-auth-card input[type="password"]::placeholder {
  color: #999999 !important;
}

body[data-theme="dark"] .cl-auth-card input[type="text"]:focus,
body[data-theme="dark"] .cl-auth-card input[type="email"]:focus,
body[data-theme="dark"] .cl-auth-card input[type="password"]:focus {
  border-color: #ff006e !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 110, 0.2) !important;
}

/* Sign In Button - Keep pink */
body[data-theme="dark"] .cl-auth-card button[type="submit"] {
  background-color: #ff006e !important;
  color: #ffffff !important;
  border: none !important;
}

body[data-theme="dark"] .cl-auth-card button[type="submit"]:hover {
  background-color: #e6005f !important;
}

/* Error Messages */
body[data-theme="dark"] .cl-auth-card .error,
body[data-theme="dark"] .cl-auth-card .cl-error {
  color: #ff6b6b !important;
  background-color: rgba(255, 107, 107, 0.1) !important;
  border: 1px solid rgba(255, 107, 107, 0.3) !important;
}

/* Links */
body[data-theme="dark"] .cl-auth-card a {
  color: #4dabf7 !important;
}

body[data-theme="dark"] .cl-auth-card a:hover {
  color: #339af0 !important;
}

/* Logo/Icon */
body[data-theme="dark"] .cl-auth-card svg,
body[data-theme="dark"] .cl-auth-card img {
  filter: brightness(0.9);
}

/* ========================================
   LIGHT MODE FIX FOR CHAT INTERFACE
   ======================================== */

/* Main Chat Container */
body[data-theme="light"] {
  background-color: #ffffff !important;
}

body[data-theme="light"] #root {
  background-color: #ffffff !important;
}

/* Chat Messages Area */
body[data-theme="light"] .step {
  background-color: transparent !important;
}

body[data-theme="light"] .step .message {
  color: #1a1a1a !important;
}

/* User Messages */
body[data-theme="light"] .step.user {
  background-color: #f5f5f5 !important;
}

body[data-theme="light"] .step.user .message {
  color: #000000 !important;
  background-color: transparent !important;
}

/* Assistant Messages */
body[data-theme="light"] .step.assistant {
  background-color: #ffffff !important;
}

body[data-theme="light"] .step.assistant .message {
  color: #1a1a1a !important;
}

/* Message Text */
body[data-theme="light"] .message-content,
body[data-theme="light"] .message-content p,
body[data-theme="light"] .message-content span {
  color: #1a1a1a !important;
}

/* Buttons */
body[data-theme="light"] button {
  color: #1a1a1a !important;
}

body[data-theme="light"] button:hover {
  background-color: #f0f0f0 !important;
}

/* Action Buttons (Copy, Edit, etc.) */
body[data-theme="light"] .step-actions button {
  color: #666666 !important;
}

body[data-theme="light"] .step-actions button:hover {
  color: #000000 !important;
  background-color: #e5e5e5 !important;
}

/* Input Area */
body[data-theme="light"] .input-container {
  background-color: #ffffff !important;
  border-top: 1px solid #e0e0e0 !important;
}

body[data-theme="light"] textarea,
body[data-theme="light"] input[type="text"] {
  background-color: #f5f5f5 !important;
  color: #1a1a1a !important;
  border: 1px solid #d0d0d0 !important;
}

body[data-theme="light"] textarea::placeholder,
body[data-theme="light"] input[type="text"]::placeholder {
  color: #666666 !important;
}

/* Send Button */
body[data-theme="light"] button[type="submit"] {
  background-color: #ff006e !important;
  color: #ffffff !important;
}

body[data-theme="light"] button[type="submit"]:hover {
  background-color: #e6005f !important;
}

/* Sidebar */
body[data-theme="light"] .sidebar {
  background-color: #f9f9f9 !important;
  border-right: 1px solid #e0e0e0 !important;
}

body[data-theme="light"] .sidebar-item {
  color: #1a1a1a !important;
}

body[data-theme="light"] .sidebar-item:hover {
  background-color: #f0f0f0 !important;
}

/* Code Blocks */
body[data-theme="light"] pre {
  background-color: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
}

body[data-theme="light"] code {
  background-color: #f5f5f5 !important;
  color: #d63384 !important;
}

/* Links */
body[data-theme="light"] a {
  color: #0066cc !important;
}

body[data-theme="light"] a:hover {
  color: #004499 !important;
}

/* Headers */
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] h4,
body[data-theme="light"] h5,
body[data-theme="light"] h6 {
  color: #1a1a1a !important;
}

/* Tool Calls / Steps */
body[data-theme="light"] .tool-call {
  background-color: #f9f9f9 !important;
  border: 1px solid #e0e0e0 !important;
}

body[data-theme="light"] .tool-call-content {
  color: #1a1a1a !important;
}

/* Inline Code */
body[data-theme="light"] p code,
body[data-theme="light"] li code {
  background-color: #f0f0f0 !important;
  color: #d63384 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}