/* Hide Chainlit branding and footer */
/* Hide "Built with Chainlit" text */
[data-testid="base-footer"],
.chainlit-footer,
footer[data-testid="chainlit-footer"],
div[data-testid="chainlit-footer"],
.css-1v0mbdj,
.css-1v0mbdj > div,
.MuiBox-root[data-testid="chainlit-footer"],
div[class*="MuiBox-root"][class*="css-"] > div:last-child:has-text("Built with"),
div:has(> a[href*="chainlit"]),
a[href*="chainlit.io"],
a[href*="docs.chainlit.io"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide any text containing "Built with Chainlit" */
*:contains("Built with Chainlit"),
*:contains("Built with"),
span:contains("Built with Chainlit"),
div:contains("Built with Chainlit"),
p:contains("Built with Chainlit") {
    display: none !important;
}

/* Additional targeting for common Chainlit footer selectors */
.chainlit-watermark,
.chainlit-branding,
[class*="watermark"],
[class*="branding"],
[data-cy="chainlit-footer"],
[data-cy="footer"],
.MuiTypography-root:contains("Built with"),
.MuiLink-root[href*="chainlit"] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide the bottom margin/padding where footer was */
.css-1d3z3hw {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure main content takes full height */
#root {
    height: 100vh !important;
}

/* Hide any remaining chainlit links or references */
a[href*="chainlit"],
a[title*="Chainlit"],
*[alt*="Chainlit"],
*[title*="Chainlit"] {
    display: none !important;
}

/* Performance optimizations for faster UI */
* {
    transform: translateZ(0); /* Enable hardware acceleration */
}

/* Faster transitions for immediate feedback */
.MuiTextField-root input,
.MuiOutlinedInput-root,
button,
[role="button"] {
    transition: all 0.1s ease-out !important;
}

.logo{
    display: none !important;
}
/* Instant message appearance */
.message-content,
.MuiBox-root {
    animation: fadeInFast 0.1s ease-out;
}

@keyframes fadeInFast {
    from { 
        opacity: 0;
        transform: translateY(5px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduce any loading delays */
img, svg {
    loading: eager !important;
}

/* Optimize scrolling */
* {
    scroll-behavior: auto !important;
}

/* Custom styles for namespace selection and file upload */
.namespace-selector {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.namespace-selector label {
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

/* Style for multi-select dropdown */
.MuiSelect-select[aria-labelledby*="selected_namespaces"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
}

/* Style for file upload area */
.file-upload-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.file-upload-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.file-upload-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

/* Settings panel styling */
.MuiDrawer-paper {
    background: hsl(0, 0%, 13%) !important;
}

.MuiFormControl-root {
    margin-bottom: 16px !important;
}

.MuiInputLabel-root {
    color: rgba(255, 255, 255, 0.8) !important;
}

.MuiSelect-icon {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Improve checkbox styling in multi-select */
.MuiCheckbox-root {
    color: rgba(255, 255, 255, 0.6) !important;
}

.MuiCheckbox-root.Mui-checked {
    color: #667eea !important;
}

/* Menu items in dropdown */
.MuiMenuItem-root {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.MuiMenuItem-root:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.MuiMenuItem-root.Mui-selected {
    background: rgba(102, 126, 234, 0.2) !important;
}

.MuiMenuItem-root.Mui-selected:hover {
    background: rgba(102, 126, 234, 0.3) !important;
}

/* Login Page Customization */
/* Remove the right-side icon/logo and center the login form */

/* Hide the right side decoration/icon */
.login-page [class*="MuiGrid-root"]:last-child,
[data-testid="login-decoration"],
.login-decoration,
[class*="login-right"],
[class*="decoration"],
/* Target the specific image container from your HTML */
.relative.hidden.bg-muted.lg\\:block,
div.relative.hidden.bg-muted,
.lg\\:block,
div[class*="relative"][class*="hidden"][class*="bg-muted"],
div[class*="lg:block"],
img[src*="favicon"],
img[alt="Image"],
/* Hide any container with the specific classes */
.relative.hidden,
.bg-muted,
div.relative.hidden.bg-muted.lg\\:block {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Target Tailwind CSS classes specifically */
[class*="relative"][class*="hidden"][class*="lg:block"],
[class*="bg-muted"][class*="lg:block"] {
    display: none !important;
}

/* More aggressive targeting for the specific favicon image container */
div.relative.hidden.bg-muted.lg\:block,
.relative.hidden.bg-muted.lg\:block,
div[class="relative hidden bg-muted lg:block"],
[class="relative hidden bg-muted lg:block"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Target the image itself */
img[src="http://localhost:8000/favicon"],
img[src*="/favicon"],
img[alt="Image"][src*="favicon"],
img[class*="absolute"][class*="inset-0"][class*="h-full"][class*="w-full"] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide any parent container that might contain these elements */
div:has(> img[src*="favicon"]),
div:has(> img[alt="Image"]) {
    display: none !important;
}

/* Force single column layout by targeting grid containers */
.grid-cols-2,
[class*="grid-cols-2"],
.lg\\:grid-cols-2,
[class*="lg:grid-cols-2"],
/* Target the specific grid container from the HTML */
.grid.min-h-svh.lg\\:grid-cols-2,
div[class*="grid"][class*="min-h-svh"][class*="lg:grid-cols-2"],
.grid.min-h-svh[class*="lg:grid-cols-2"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Hide the second grid item if it exists */
.grid > div:last-child:has(img),
.grid > div:nth-child(2):has(img),
/* More specific targeting for the second div */
.grid.min-h-svh.lg\\:grid-cols-2 > div:nth-child(2),
div[class*="grid"][class*="min-h-svh"] > div:last-child,
div[class*="grid"][class*="lg:grid-cols-2"] > div:nth-child(2) {
    display: none !important;
}

/* Ensure the first div (login form container) takes full width */
.grid.min-h-svh.lg\\:grid-cols-2 > div:first-child,
div[class*="grid"][class*="min-h-svh"] > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Target the main grid container more aggressively */
div.grid.min-h-svh,
div[class="grid min-h-svh lg:grid-cols-2"],
[class*="grid"][class*="min-h-svh"] {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    background: hsl(0, 0%, 13%) !important;
}

/* Hide the second div completely */
div.grid.min-h-svh > div:nth-child(2),
div[class="grid min-h-svh lg:grid-cols-2"] > div:nth-child(2),
div.relative.hidden.bg-muted {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Center the login form */
.login-page,
[data-testid="login-page"],
.MuiContainer-root:has([data-testid="login-form"]) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    background: hsl(0, 0%, 13%) !important;
}

/* Style the login container */
.login-container,
[data-testid="login-form"],
.MuiPaper-root:has([data-testid="email-input"]) {
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Login form title */
.login-container h1,
.login-container h2,
[data-testid="login-form"] h1,
[data-testid="login-form"] h2 {
    color: #ffffff !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
    font-weight: 600 !important;
}

/* Input fields styling */
.login-container .MuiTextField-root,
[data-testid="email-input"],
[data-testid="password-input"] {
    margin-bottom: 1rem !important;
    width: 100% !important;
}

.login-container .MuiOutlinedInput-root,
[data-testid="email-input"] .MuiOutlinedInput-root,
[data-testid="password-input"] .MuiOutlinedInput-root {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

.login-container .MuiOutlinedInput-notchedOutline,
[data-testid="email-input"] .MuiOutlinedInput-notchedOutline,
[data-testid="password-input"] .MuiOutlinedInput-notchedOutline {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.login-container .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
[data-testid="email-input"]:hover .MuiOutlinedInput-notchedOutline,
[data-testid="password-input"]:hover .MuiOutlinedInput-notchedOutline {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.login-container .MuiInputLabel-root,
[data-testid="email-input"] .MuiInputLabel-root,
[data-testid="password-input"] .MuiInputLabel-root {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Login button styling */
.login-container .MuiButton-root,
[data-testid="login-button"],
button[type="submit"] {
    width: 100% !important;
    padding: 12px !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-top: 1rem !important;
    transition: all 0.3s ease !important;
}

.login-container .MuiButton-root:hover,
[data-testid="login-button"]:hover,
button[type="submit"]:hover {
    transform: translateY(-2px) !important;
}

/* Remove any grid layout that creates two columns */
.MuiGrid-container:has([data-testid="login-form"]) {
    justify-content: center !important;
}

.MuiGrid-container:has([data-testid="login-form"]) .MuiGrid-item {
    max-width: 100% !important;
    flex-basis: 100% !important;
}

/* Target the main login page container */
body:has([data-testid="login-form"]) {
    background: hsl(0, 0%, 13%) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure full viewport height */
#root:has([data-testid="login-form"]) {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}