/* AxelSpire Custom Styles */

/* Logo area styling - AxelSpire logo */
.cl-logo,
#cl-logo,
[class*="logo"],
[id*="logo"] {
    max-height: 40px;
    width: auto;
}

/* Replace Chainlit logo with AxelSpire logo */
/* Note: Update these paths if APP_PATH changes from /chatbot */
.cl-logo img,
#cl-logo img {
    content: url('/chatbot/public/logo-wide.png');
    max-height: 40px;
    width: auto;
}

/* Header logo override */
header img[alt*="Chainlit"],
header img[alt*="chainlit"],
nav img[alt*="Chainlit"],
nav img[alt*="chainlit"] {
    content: url('/chatbot/public/logo-wide.png');
    max-height: 40px;
    width: auto;
}

/* Hide Chainlit branding text */
header a[href*="chainlit.io"],
[class*="chainlit-text"],
[class*="powered-by"] {
    display: none !important;
}


/* Login page customization */
/* Base blue: #100870 = HSL(244, 86%, 23%) */
/* Brighter by 50: HSL(244, 86%, 73%) */
.cl-login-container,
body:has(input[type="password"]),
body:has(input[name="email"]) {
    background: #eeeeee !important;
}

.cl-login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}


/* Login page - custom text and content on the LEFT side with login form */
/* Hide on chat page to prevent showing after login */
body:has(textarea[placeholder*="Type"]) #login-right-content,
body:has([class*="message-"]) #login-right-content,
body:has([class*="thread"]) #login-right-content {
    display: none !important;
}

#login-right-content {
    position: fixed !important;
    left: 25% !important;
    top: 50% !important;
    transform: translate(-50%, calc(-50% - 180px)) !important;
    width: 450px !important;
    max-width: 40vw !important;
    color: #000000 !important;
    text-align: center !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    display: block !important;
}

#login-right-content .logo {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-bottom: 30px;
    opacity: 0.95;
}

#login-right-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

#login-right-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #000000;
}

#login-right-content .highlight {
    font-weight: 600;
    color: #100870;
}

#login-right-content a {
    color: #100870;
    text-decoration: none;
}

#login-right-content a:hover {
    text-decoration: underline;
}

#login-right-content ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

#login-right-content ul li {
    padding: 8px 0;
    padding-left: 30px;
    position: relative;
    font-size: 1rem;
}

#login-right-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Login form container - position on RIGHT side */
#auth-form,
.cl-auth-form {
    border-radius: 16px;
    padding: 40px;
    max-width: 400px;
    width: 100%;
    margin-left: auto;
    margin-right: 100px;
}

/* Login form fields - white background with black text */
.cl-login-container input,
.cl-auth-form input,
form input[type="text"],
form input[type="email"],
form input[type="password"],
input[name="email"],
input[name="identifier"],
input[name="username"],
input[id*="email"],
input[placeholder*="email"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Login form labels - base blue color */
.cl-login-container label,
.cl-auth-form label,
form label {
    color: #100870 !important;
}


/* Responsive: hide right content on smaller screens */
@media (max-width: 1200px) {
    #login-right-content {
        display: none;
    }
    
    #auth-form,
    .cl-auth-form {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    #auth-form,
    .cl-auth-form {
        margin: 20px;
        padding: 30px 20px;
    }
}

/* Source citations styling */
.cl-message[data-author="Sources"] {
    font-size: 0.85em;
    opacity: 0.9;
    padding-left: 12px;
    margin-top: 8px;
}