/* Henson AI Assistant — login page styling.
 *
 * Loaded via [UI] custom_css in .chainlit/config.toml, which injects it on
 * every page. Every rule below is therefore scoped under `.grid.min-h-svh`,
 * the two-column wrapper Chainlit renders only on the login screen, so none
 * of it can reach the chat UI.
 *
 * Stock Chainlit splits the login screen in two and fills the right half with
 * /favicon stretched edge to edge, greyscaled and dimmed to 20% brightness.
 * That is the artefact this file removes: the grid collapses to one column,
 * the panel is hidden, and what is left is centred.
 */

/* Collapse the split. The `lg:grid-cols-2` utility only applies above 1024px,
 * so overriding the base rule is enough to keep one column at every width. */
.grid.min-h-svh {
    grid-template-columns: 1fr !important;
}

/* The stretched-favicon panel. */
.grid.min-h-svh > .bg-muted {
    display: none !important;
}

/* Centre the remaining column instead of pinning the logo to the top. */
.grid.min-h-svh > div:first-child {
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    padding: 2rem 1.5rem;
}

/* The logo row is `justify-center` on small screens but `md:justify-start`
 * above 768px; with no second column to balance it, always centre. */
.grid.min-h-svh > div:first-child > div:first-child {
    justify-content: center !important;
    width: 100%;
}

.grid.min-h-svh img.logo {
    width: 232px !important;
    max-width: 78vw;
    height: auto;
}

/* Chainlit's own flex-1 wrapper would otherwise push the form down. */
.grid.min-h-svh > div:first-child > div:nth-child(2) {
    flex: 0 1 auto !important;
    width: 100%;
}

.grid.min-h-svh h1 {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    opacity: 0.72;
}

/* Give the provider button a little more presence than the default. */
.grid.min-h-svh form button {
    height: 2.75rem;
    font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
    .grid.min-h-svh > div:first-child {
        animation: henson-login-in 320ms ease-out both;
    }
}

@keyframes henson-login-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}