/* custom.css - Velina Chat Application Styles */

/* ============================================================================
   TABLE OF CONTENTS
   1. Logo & Branding
   2. Login Form
   3. Buttons
   4. UI Elements
   5. Hidden Elements
   6. Animations
   7. Mobile Responsive
   8. Dark Mode
   ============================================================================ */


/* ============================================================================
   1. LOGO & BRANDING
   ============================================================================ */

/* Center logo above login form */
.MuiPaper-root > img,
.MuiPaper-root img[alt*="logo" i],
img[src*="logo"] {
    display: block !important;
    margin: 0 auto 4px auto !important;
    max-width: 160px !important;
    height: auto !important;
    object-fit: contain !important;
}

.MuiPaper-root > div:first-child:has(img) {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 4px !important;
}

/* Hide login page logo */
#root > div.grid.min-h-svh.lg\:grid-cols-2 > div > div.flex.justify-center.gap-2.md\:justify-start > img {
    display: none !important;
}


/* ============================================================================
   2. LOGIN FORM
   ============================================================================ */

/* Instruction banner */
.MuiPaper-root form::before {
    content: "✨ New user? Enter email & password to create account | Existing user? Just sign in";
    display: block;
    background: linear-gradient(135deg, #2F4858 0%, #E5B896 100%);
    color: white;
    padding: 6px 8px !important;
    border-radius: 6px;
    margin-bottom: 6px !important;
    text-align: center;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.3 !important;
}

/* Ultra compact form layout */
.MuiPaper-root {
    padding: 8px 12px !important;
}

.MuiPaper-root form {
    display: flex;
    flex-direction: column;
    gap: 2px !important;
}

.MuiPaper-root form > * {
    margin-top: 0 !important;
}

/* Input fields */
.MuiPaper-root form input {
    height: 40px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
}

/* Remove placeholder dots/text from email and password fields */
input#email::placeholder,
input#email::-webkit-input-placeholder,
input#email::-moz-placeholder,
input#email:-ms-input-placeholder,
input#password::placeholder,
input#password::-webkit-input-placeholder,
input#password::-moz-placeholder,
input#password:-ms-input-placeholder,
input[name="email"]::placeholder,
input[name="email"]::-webkit-input-placeholder,
input[name="email"]::-moz-placeholder,
input[name="email"]:-ms-input-placeholder,
input[name="password"]::placeholder,
input[name="password"]::-webkit-input-placeholder,
input[name="password"]::-moz-placeholder,
input[name="password"]:-ms-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
    content: "" !important;
}

.MuiPaper-root form > div:has(input) {
    margin: 2px 0 !important;
}

/* Labels */
.MuiPaper-root form label,
.MuiPaper-root form .MuiFormLabel-root {
    margin-bottom: 2px !important;
    font-size: 14px !important;
}

.MuiPaper-root form label[for],
.MuiFormLabel-root {
    margin-bottom: 2px !important;
    font-size: 13px !important;
}

/* Checkbox - minimal spacing */
.MuiPaper-root form label {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.MuiPaper-root form > div:has(input[type="checkbox"]) {
    margin: 0 !important;
    padding: 0 !important;
}

/* OR divider */
.MuiPaper-root form hr,
.MuiPaper-root form > div:has(hr) {
    margin: 4px 0 !important;
}

/* Form controls */
.MuiPaper-root form .MuiFormControl-root {
    margin: 4px 0 !important;
}


/* ============================================================================
   3. BUTTONS
   ============================================================================ */

/* Base button styles */
button[type="submit"],
#create-account-btn,
#guest-login-btn {
    min-height: 40px !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    margin: 2px 0 !important;
}

/* Submit button (CREATE ACCOUNT) */
button[type="submit"] {
    font-size: 0 !important;
    position: relative;
    background: #2F4858 !important;
    border: none !important;
    color: transparent !important;
    box-shadow: 0 2px 4px rgba(47, 72, 88, 0.2) !important;
    overflow: hidden !important;
}

button[type="submit"] * {
    font-size: 0 !important;
    color: transparent !important;
    visibility: hidden !important;
}

button[type="submit"]::before {
    content: "CREATE ACCOUNT";
    display: block;
    font-size: 14px !important;
    font-weight: 600;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    text-align: center;
    line-height: 1 !important;
    color: white !important;
    visibility: visible !important;
    z-index: 10 !important;
}

button[type="submit"]:hover {
    background: #253847 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(47, 72, 88, 0.3) !important;
}

/* OAuth buttons spacing */
.MuiPaper-root form button[class*="oauth"],
.MuiPaper-root form button:has(svg[class*="google"]),
.MuiPaper-root form > button:not([type="submit"]) {
    margin: 2px 0 !important;
}


/* ============================================================================
   4. UI ELEMENTS
   ============================================================================ */

/* Profile avatar */
span[data-state="closed"].rounded-full {
    height: 3rem !important;
    width: 3rem !important;
    object-fit: cover !important;
}

/* Theme toggle and call-to-actions */
#theme-toggle,
button[id^="a"] {
    display: inline-flex !important;
}

/* User message bubble */
.step-end,
[class*="step-end"],
div[class*="user"] div[class*="message"],
div.bg-secondary,
.bg-secondary {
    background: hsl(200, 25%, 22%) !important;
}


/* ============================================================================
   5. HIDDEN ELEMENTS
   ============================================================================ */

/* New chat button */
#new-chat-button,
#new-chat-button *,
button#new-chat-button,
[id="new-chat-button"],
button[aria-label*="new chat" i],
button[title*="new chat" i] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Sidebar trigger */
#sidebar-trigger-button,
#sidebar-trigger-button *,
button#sidebar-trigger-button,
[id="sidebar-trigger-button"],
button[aria-label*="sidebar" i],
button[title*="sidebar" i] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Feedback buttons */
div.-ml-1\.5.flex.items-center.flex-wrap > div:has(button.positive-feedback-off),
div.-ml-1\.5.flex.items-center.flex-wrap > div:has(button.negative-feedback-off),
div.-ml-1\.5.flex.items-center.flex-wrap > button.text-muted-foreground:not([id]) {
    display: none !important;
}

/* Readme button */
#readme-button,
#readme-button > span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Watermarks and attribution */
.watermark,
.footer,
.disclaimer,
a[href*='https://github.com/Chainlit/chainlit'] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ============================================================================
   6. ANIMATIONS
   ============================================================================ */

/* Typing indicator */
.flex.flex-col.mx-auto.w-full.flex-grow.p-4 > span::after {
    content: "Typing" !important;
    position: absolute !important;
    bottom: -30px !important;
    left: 50% !important;
    transform: translateX(-40%) !important;
    white-space: nowrap !important;
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    animation: fade-pulse 1.5s ease-in-out infinite !important;
}

@keyframes fade-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}


/* ============================================================================
   7. MOBILE RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    /* Typing indicator - center on mobile */
    .flex.flex-col.mx-auto.w-full.flex-grow.p-4 > span::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding-left: 13px !important;
    }

    /* AI message avatar optimization */
    .ai-message.flex.gap-4 {
        gap: 0.5rem !important;
    }

    .ai-message > span.inline-block {
        flex: 0 0 auto !important;
        width: 28px !important;
        min-width: 28px !important;
    }

    .ai-message > span.inline-block > span.rounded-full {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    .ai-message > span.inline-block > span.rounded-full > img {
        width: 26px !important;
        height: 26px !important;
    }

    .ai-message > div.flex.flex-col {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 36px) !important;
    }

    .ai-message .message-content {
        width: 100% !important;
    }

    /* Cookie banner - move up from bottom */
    #cookie-banner {
        bottom: 123px !important;
    }
}


/* ============================================================================
   8. DARK MODE
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    /* Form banner */
    .MuiPaper-root form::before {
        background: linear-gradient(135deg, #2F4858 0%, #6B5744 100%);
    }

    /* Submit button */
    button[type="submit"] {
        background: #E5B896 !important;
        color: #2F4858 !important;
    }

    button[type="submit"]:hover {
        background: #d9a67f !important;
    }

    /* Create account button */
    #create-account-btn {
        border-color: #E5B896 !important;
        color: #E5B896 !important;
    }

    #create-account-btn:hover {
        background: rgba(229, 184, 150, 0.15) !important;
    }

    /* User message bubble */
    .step-end,
    [class*="step-end"],
    div[class*="user"] div[class*="message"],
    div.bg-secondary,
    .bg-secondary {
        background: hsl(200, 25%, 22%) !important;
    }
}

/* Dark mode via data attribute or class */
[data-theme="dark"] .step-end,
[data-theme="dark"] [class*="step-end"],
[data-theme="dark"] div.bg-secondary,
[data-theme="dark"] .bg-secondary,
.dark .step-end,
.dark [class*="step-end"],
.dark div.bg-secondary,
.dark .bg-secondary {
    background: hsl(200, 25%, 22%) !important;
}