/*
 * Sisifo.ai Custom Chainlit Styles
 * Brand Colors:
 *   Peak:   #4698C7 (lightest blue)
 *   Slopes: #337AB7 (medium blue)
 *   Face:   #274A81 (logo blue)
 *   Base:   #0F3858 (darkest blue)
 *   
 * Dashboard Colors:
 *   Negative: #D64545 (red)
 *   Warning:  #F7C029 (yellow)
 *   Positive: #4CAF50 (green)
 */

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Apply Montserrat font globally */
body,
.font-sans {
  font-family: 'Montserrat', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Headings - Montserrat Bold */
h1, h2, h3, h4, h5, h6,
[class*="font-bold"],
[class*="font-semibold"] {
  font-family: 'Montserrat', 'Segoe UI', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================
   LOGO AND HEADER STYLING
   ============================================ */

/* Logo container styling */
[data-testid="logo"] img,
.logo img {
  max-height: 40px;
  width: auto;
}

/* Header styling */
header {
  border-bottom: 1px solid rgba(70, 152, 199, 0.2);
}

/* ============================================
   CHAT MESSAGE STYLING
   ============================================ */

/* Assistant message bubbles */
[data-testid="message"][data-author="assistant"],
.message-assistant {
  border-left: 3px solid #337AB7;
}

/* User message bubbles */
[data-testid="message"][data-author="user"],
.message-user {
  border-left: 3px solid #4698C7;
}

/* ============================================
   BUTTONS AND INTERACTIVE ELEMENTS
   ============================================ */

/* Primary buttons */
button[class*="primary"],
.btn-primary {
  background-color: #274A81 !important;
  border-color: #274A81 !important;
  transition: all 0.2s ease;
}

button[class*="primary"]:hover,
.btn-primary:hover {
  background-color: #337AB7 !important;
  border-color: #337AB7 !important;
}

/* Send button */
[data-testid="send-button"],
button[aria-label="send"] {
  background-color: #274A81 !important;
}

[data-testid="send-button"]:hover,
button[aria-label="send"]:hover {
  background-color: #337AB7 !important;
}

/* ============================================
   INPUT FIELD STYLING
   ============================================ */

/* Chat input */
[data-testid="composer"] textarea,
.composer textarea {
  border-color: rgba(51, 122, 183, 0.3);
}

[data-testid="composer"] textarea:focus,
.composer textarea:focus {
  border-color: #337AB7;
  box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.2);
}

/* ============================================
   SIDEBAR STYLING
   ============================================ */

/* Sidebar accent */
[data-testid="sidebar"] [class*="active"],
.sidebar-item.active {
  background-color: rgba(70, 152, 199, 0.1);
  border-left: 3px solid #337AB7;
}

/* ============================================
   LINKS AND ACCENTS
   ============================================ */

a {
  color: #337AB7;
}

a:hover {
  color: #274A81;
}

/* ============================================
   STATUS INDICATORS (Dashboard Colors)
   ============================================ */

/* Success/Positive states */
.success,
.positive,
[class*="success"] {
  color: #4CAF50 !important;
}

/* Warning states */
.warning,
[class*="warning"] {
  color: #F7C029 !important;
}

/* Error/Negative states */
.error,
.negative,
[class*="error"],
[class*="destructive"] {
  color: #D64545 !important;
}

/* ============================================
   LOADING AND ANIMATIONS
   ============================================ */

/* Loading spinner color */
[class*="spinner"],
[class*="loading"] {
  border-color: rgba(51, 122, 183, 0.2);
  border-top-color: #337AB7;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 56, 88, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(51, 122, 183, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 122, 183, 0.6);
}

/* ============================================
   WELCOME SCREEN
   ============================================ */

/* Welcome screen styling */
[data-testid="welcome-screen"],
.welcome-screen {
  background: linear-gradient(135deg, rgba(15, 56, 88, 0.02) 0%, rgba(70, 152, 199, 0.05) 100%);
}

/* Starter buttons */
[data-testid="starter"],
.starter-button {
  border: 1px solid rgba(51, 122, 183, 0.3);
  transition: all 0.2s ease;
}

[data-testid="starter"]:hover,
.starter-button:hover {
  border-color: #337AB7;
  background-color: rgba(51, 122, 183, 0.05);
}

/* ============================================
   CODE BLOCKS
   ============================================ */

/* Code block styling */
pre,
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

pre {
  border-left: 3px solid #274A81;
  background-color: rgba(15, 56, 88, 0.05);
}

/* ============================================
   DARK MODE SPECIFIC OVERRIDES
   ============================================ */

[data-theme="dark"] {
  /* Dark mode message styling */
  [data-testid="message"][data-author="assistant"] {
    border-left-color: #4698C7;
  }

  /* Dark mode code blocks */
  pre {
    background-color: rgba(15, 56, 88, 0.3);
    border-left-color: #4698C7;
  }

  /* Dark mode scrollbar */
  ::-webkit-scrollbar-track {
    background: rgba(15, 56, 88, 0.3);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(70, 152, 199, 0.4);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(70, 152, 199, 0.6);
  }
}
/* ============================================
   LOGO FIXES (Simplified)
   ============================================ */

/* Markdown logo: make image display cleanly */
.step .markdown img[alt="Sisifo Logo"] {
  display: block !important;
  height: 80px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 16px auto !important;
  object-fit: contain !important;
}

/* Neutralize aspect wrapper ONLY when it contains the logo */
.step .markdown div[data-radix-aspect-ratio-wrapper]:has(img[alt="Sisifo Logo"]) {
  padding-bottom: 0 !important;
  height: auto !important;
}

/* Header/Login logo when class is on the <img> itself */
img.logo {
  height: 48px !important;
  width: auto !important;
  max-height: 60px !important;
  object-fit: contain !important;
}

/* ============================================
   LOGIN PAGE STYLING
   ============================================ */

/* Login container */
[data-testid="auth-login"],
.auth-login,
form[class*="login"],
div[class*="auth"] {
  background: linear-gradient(180deg, #0F3858 0%, #274A81 100%) !important;
  min-height: 100vh;
}

/* Login card/box */
[data-testid="auth-login"] > div,
.login-card,
div[class*="card"] {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  padding: 40px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

/* Login logo */
[data-testid="auth-login"] img,
.login-logo,
.auth-logo {
  max-height: 100px !important;
  width: auto !important;
  margin: 0 auto 30px !important;
  display: block !important;
  padding: 10px !important;
}

/* Login title */
[data-testid="auth-login"] h1,
[data-testid="auth-login"] h2,
.login-title {
  color: #274A81 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  text-align: center !important;
  margin-bottom: 24px !important;
  letter-spacing: 0.05em !important;
}

/* Login input fields */
[data-testid="auth-login"] input,
.login-input {
  border: 2px solid rgba(51, 122, 183, 0.3) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 1rem !important;
  transition: all 0.2s ease !important;
  background: #ffffff !important;
}

[data-testid="auth-login"] input:focus,
.login-input:focus {
  border-color: #337AB7 !important;
  box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.2) !important;
  outline: none !important;
}

[data-testid="auth-login"] input::placeholder {
  color: rgba(39, 74, 129, 0.5) !important;
}

/* Login labels */
[data-testid="auth-login"] label {
  color: #274A81 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Login button */
[data-testid="auth-login"] button[type="submit"],
.login-button {
  background: linear-gradient(135deg, #274A81 0%, #337AB7 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  margin-top: 16px !important;
  text-transform: uppercase !important;
}

[data-testid="auth-login"] button[type="submit"]:hover,
.login-button:hover {
  background: linear-gradient(135deg, #337AB7 0%, #4698C7 100%) !important;
  box-shadow: 0 6px 20px rgba(51, 122, 183, 0.4) !important;
  transform: translateY(-2px) !important;
}

[data-testid="auth-login"] button[type="submit"]:active,
.login-button:active {
  transform: translateY(0) !important;
}

/* Login error message */
[data-testid="auth-login"] [class*="error"],
.login-error {
  background: rgba(214, 69, 69, 0.1) !important;
  border: 1px solid #D64545 !important;
  color: #D64545 !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
  font-size: 0.875rem !important;
}

/* Login form spacing */
[data-testid="auth-login"] form > div {
  margin-bottom: 20px !important;
}

/* Dark mode login adjustments */
[data-theme="dark"] [data-testid="auth-login"] > div,
[data-theme="dark"] .login-card {
  background: rgba(15, 56, 88, 0.95) !important;
  border: 1px solid rgba(70, 152, 199, 0.3) !important;
}

[data-theme="dark"] [data-testid="auth-login"] h1,
[data-theme="dark"] [data-testid="auth-login"] h2,
[data-theme="dark"] .login-title {
  color: #4698C7 !important;
}

[data-theme="dark"] [data-testid="auth-login"] label {
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] [data-testid="auth-login"] input {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(70, 152, 199, 0.4) !important;
  color: white !important;
}

[data-theme="dark"] [data-testid="auth-login"] input:focus {
  border-color: #4698C7 !important;
  box-shadow: 0 0 0 3px rgba(70, 152, 199, 0.3) !important;
}

[data-theme="dark"] [data-testid="auth-login"] input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   MARKDOWN TEXT CONTRAST FIX
   ============================================ */

/* Fix contraste en bloques markdown - texto visible en ambos temas */
.step .markdown,
.step .markdown p,
.step .markdown li,
.step .markdown span {
  color: inherit;
}

/* Light theme: texto oscuro */
[data-theme="light"] .step .markdown,
[data-theme="light"] .step .markdown p,
[data-theme="light"] .step .markdown li {
  color: #1a1a1a !important;
}

/* Dark theme: texto claro */
[data-theme="dark"] .step .markdown,
[data-theme="dark"] .step .markdown p,
[data-theme="dark"] .step .markdown li {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Headings en markdown */
.step .markdown h1,
.step .markdown h2,
.step .markdown h3,
.step .markdown h4 {
  color: inherit;
}

[data-theme="light"] .step .markdown h1,
[data-theme="light"] .step .markdown h2,
[data-theme="light"] .step .markdown h3,
[data-theme="light"] .step .markdown h4 {
  color: #274A81 !important;
}

[data-theme="dark"] .step .markdown h1,
[data-theme="dark"] .step .markdown h2,
[data-theme="dark"] .step .markdown h3,
[data-theme="dark"] .step .markdown h4 {
  color: #4698C7 !important;
}

/* ============================================
   LOGIN BACKGROUND IMAGE (Artboard5)
   ============================================ */

/* Hide the favicon image in the right panel */
.relative.hidden.bg-muted.lg\\:block img[src*="favicon"],
.relative.hidden.lg\\:block img[src*="favicon"],
img[src*="favicon"][class*="absolute"][class*="cover"] {
  display: none !important;
}

/* Background image on the right panel container */
.relative.hidden.bg-muted.lg\\:block,
.relative.hidden.lg\\:block.bg-muted {
  background-image: url("/public/Artboard5.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Dark overlay for readability */
.relative.hidden.bg-muted.lg\\:block::after,
.relative.hidden.lg\\:block.bg-muted::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  pointer-events: none !important;
}

/* ============================================
   COMPOSER (CHAT INPUT) - FIX TEXT VISIBILITY
   ============================================ */

/* Base: ensure typed text + caret are visible */
[data-testid="composer"] textarea,
.composer textarea {
  color: #0F3858 !important;        /* text */
  caret-color: #0F3858 !important;  /* cursor */
}

/* Placeholder visibility */
[data-testid="composer"] textarea::placeholder,
.composer textarea::placeholder {
  color: rgba(15, 56, 88, 0.55) !important;
}

/* Dark theme: use light text */
[data-theme="dark"] [data-testid="composer"] textarea,
[data-theme="dark"] .composer textarea {
  color: rgba(255, 255, 255, 0.92) !important;
  caret-color: rgba(255, 255, 255, 0.92) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] [data-testid="composer"] textarea::placeholder,
[data-theme="dark"] .composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}