/* =========================================================
   CHAINLIT BRANDING
========================================================= */

a[href*="chainlit.io"] {
    display: none !important;
}


/* =========================================================
   DEFAULT LOGO RESET
   Keep Chainlit logo visible everywhere
========================================================= */

img.logo {
    object-fit: contain !important;
}


/* =========================================================
   LOGIN PAGE LOGO
   Smaller logo inside login card
========================================================= */

form img.logo,
div:has(input[type="password"]) img.logo {
    width: 140px !important;
    height: auto !important;
    max-height: 90px !important;
    margin: 0 auto 28px auto !important;
    display: none !important;
}


/* =========================================================
   CHAT / NEW CHAT WELCOME LOGO
   Larger logo above chat input
========================================================= */

main img.logo,
div:has(textarea) img.logo {
    width: min(220px, 70vw) !important;
    height: auto !important;
    max-height: 120px !important;
    margin: 0 auto 24px auto !important;
    display: block !important;
}



/* =========================================================
   REMOVE RIGHT PANEL COMPLETELY
========================================================= */

div.relative.hidden.bg-muted.lg\:block.overflow-hidden {
    display: none !important;
}

/* =========================================================
   SINGLE COLUMN LOGIN LAYOUT
========================================================= */

div.grid.min-h-svh.lg\:grid-cols-2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100vw !important;
    height: 100vh !important;

    background: hsl(var(--background)) !important;
}

/* =========================================================
   CENTER CONTENT
========================================================= */

div.flex.flex-col.gap-4.p-6.md\:p-10 {
    width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    padding: 20px !important;
}

/* =========================================================
   LOGIN WRAPPER
========================================================= */

div.w-full.max-w-xs {
    width: min(92vw, 520px) !important;
    max-width: 520px !important;
}

/* =========================================================
   LOGIN CARD
========================================================= */

form {
    position: relative;

    padding: 40px !important;

    background: hsl(var(--card)) !important;

    border-radius: 24px !important;

    border: 1px solid hsl(var(--border)) !important;

    box-shadow:
        0 10px 40px rgba(
            0,
            0,
            0,
            0.15
        ) !important;
}

/* =========================================================
   APP LOGO
========================================================= */

form::before {
    content: "";

    display: block;

    width: 180px;
    height: 150px;

    margin: 0 auto 20px auto;

    background-image:
        url("/public/logo.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* =========================================================
   TITLE
========================================================= */

h1 {
    text-align: center !important;
}

h1 span {
    font-size: clamp(
        1.5rem,
        2vw,
        2rem
    ) !important;

    line-height: 1.2 !important;

    display: block !important;

    color: hsl(var(--foreground)) !important;
}

/* =========================================================
   LABELS
========================================================= */

label {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
}

/* =========================================================
   INPUTS
========================================================= */

input {
    min-height: 58px !important;

    border-radius: 16px !important;

    background: hsl(var(--background)) !important;

    border: 1px solid hsl(var(--border)) !important;

    color: hsl(var(--foreground)) !important;
}

input::placeholder {
    color: hsl(var(--muted-foreground)) !important;
}

input:focus {
    border-color: hsl(var(--primary)) !important;

    box-shadow:
        0 0 0 2px hsl(
            var(--primary) / 0.15
        ) !important;
}

/* =========================================================
   BUTTON
========================================================= */

button[type="submit"] {
    min-height: 58px !important;

    border-radius: 16px !important;

    font-weight: 600 !important;
}

/* =========================================================
   PASSWORD EYE BUTTON
========================================================= */

button[type="button"] {
    color: hsl(var(--muted-foreground)) !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    div.w-full.max-w-xs {
        width: 95vw !important;
    }

    form {
        padding: 28px !important;
    }

    form::before {
        width: 130px;
        height: 80px;
    }

    h1 span {
        font-size: 1.5rem !important;
    }
}


/* Account-menu feedback from custom_js.js */
[data-pa-change-password] {
    cursor: pointer !important;
}

[data-pa-change-password]:hover,
[data-pa-change-password]:focus,
[data-pa-change-password]:focus-visible {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
}

[data-pa-change-password][aria-disabled="true"] {
    cursor: wait !important;
    opacity: 0.65;
}

.pa-chainlit-account-notice {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 10000;
    max-width: min(380px, calc(100vw - 32px));
    padding: 12px 15px;
    border: 1px solid hsl(var(--destructive) / 35%);
    border-radius: 10px;
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    box-shadow: 0 14px 40px rgb(0 0 0 / 22%);
    font-size: 14px;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.pa-chainlit-account-notice--show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 640px) {
    .pa-chainlit-account-notice {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
    }
}