/* ===== Login page: hide right-side image, center form ===== */

/*
 * Chainlit 2.x login page structure (from compiled React bundle):
 *   div.grid.min-h-svh.lg\:grid-cols-2
 *     div.flex.flex-col.gap-4.p-6   ← form column
 *     div.relative.hidden.bg-muted.lg\:block  ← image column
 *
 * Strategy: override the grid to single column, hide the image column.
 */

/* Force the login grid to a single centered column */
.grid.min-h-svh {
    grid-template-columns: 1fr !important;
    place-items: center !important;
}

/* Hide the image panel (it has bg-muted and is the second grid child) */
.grid.min-h-svh > .bg-muted {
    display: none !important;
}

/* Constrain and center the form column */
.grid.min-h-svh > .flex.flex-col {
    max-width: 420px !important;
    width: 100% !important;
}

/* Center the logo container on the login page
 * (Chainlit uses "justify-center md:justify-start" — override to always center) */
.grid.min-h-svh .logo {
    display: block !important;
    margin: 0 auto !important;
}

.grid.min-h-svh a:has(.logo),
.grid.min-h-svh div:has(> a > .logo) {
    justify-content: center !important;
    text-align: center !important;
}

/* Push the logo higher above the login title */
.grid.min-h-svh .logo {
    margin-bottom: 2rem !important;
}

.grid.min-h-svh > .flex.flex-col {
    margin-top: -80px !important;
}

/* ===== User avatar — copper/beige tone matching brand ===== */

.message-avatar--user,
[class*="userAvatar"],
.cl-avatar--user {
    background-color: #C4A088 !important;
    color: white !important;
}

/* ===== Send button and primary action buttons ===== */

button[class*="primary"],
.cl-send-button {
    background-color: #C4A088 !important;
}

button[class*="primary"]:hover,
.cl-send-button:hover {
    background-color: #B08E76 !important;
}