/* Kazumi custom styles — theme colors handled by theme.json */

/* Avatar size — override the default h-5 w-5 (20px) container */
img[alt="Avatar for Kazumi"] {
    width: 28px !important;
    height: 28px !important;
}
img[alt="Avatar for Kazumi"] + span,
span:has(> img[alt="Avatar for Kazumi"]) {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
}

/* Input box — target only the direct parent of the chat textarea */
div:has(> #chat-input) {
    border: 1px solid #94a3b8 !important;
    border-radius: 0.75rem;
}

/* Crisis support line */
a[href="tel:988"] {
    color: #dc2626 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
   OAuth / Sign-in page branding
   Chainlit renders the login page with the same CSS file.
   ============================================================ */

/* Page background */
.cl-auth-page,
[data-testid="auth-page"],
body:has([data-testid="auth-page"]) {
    background-color: #f8fafc !important;
}

/* Login card */
.cl-auth-card,
[data-testid="auth-card"] {
    background: #ffffff !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 24px rgba(37, 99, 235, 0.10) !important;
    border: 1px solid #e2e8f0 !important;
    max-width: 420px !important;
}

/* "Login to access the app" heading — patched by custom_auth.js at runtime */
.cl-auth-card h1,
.cl-auth-card h2,
[data-testid="auth-card"] h1,
[data-testid="auth-card"] h2 {
    color: #1e293b !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* "Continue with Cognito" / "Sign in or register" button */
.cl-auth-card button,
[data-testid="auth-card"] button,
[data-testid="oauth-button"] {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    width: 100% !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    transition: background-color 0.2s !important;
}

.cl-auth-card button:hover,
[data-testid="auth-card"] button:hover,
[data-testid="oauth-button"]:hover {
    background-color: #1d4ed8 !important;
}

/* Logo area */
.cl-auth-card img,
[data-testid="auth-card"] img {
    display: block !important;
    margin: 0 auto 1rem auto !important;
}

/* Right-side image panel — remove Chainlit's default dark overlay */
[data-testid="auth-page"] > div > div:last-child:not(:first-child)::after,
[data-testid="auth-page"] > div > *:nth-child(2)::after {
    display: none !important;
}

/* Also kill any filter/opacity on the image itself */
[data-testid="auth-page"] > div > div:last-child:not(:first-child),
[data-testid="auth-page"] > div > *:nth-child(2) {
    filter: none !important;
    opacity: 1 !important;
}

[data-testid="auth-page"] > div > div:last-child:not(:first-child) img,
[data-testid="auth-page"] > div > *:nth-child(2) img {
    filter: none !important;
    opacity: 1 !important;
}