.auth-input .mud-input-label {

    color: white !important;

}







input.mud-input-slot:-webkit-autofill {

    -webkit-text-fill-color: #fff !important;

    -webkit-box-shadow: 0 0 0 1000px #1F2937 inset !important;

    transition: background-color 5000s ease-in-out 0s !important;

}



    /* preserve on hover/focus too */

    input.mud-input-slot:-webkit-autofill:hover,

    input.mud-input-slot:-webkit-autofill:focus {

        -webkit-box-shadow: 0 0 0 1000px #1F2937 inset !important;

    }



.luna-pane {

    width: 100%; background:none;

}





/* Luna avatar crossfade */

.luna-stage {

    position: relative;

    height: 220px; /* tweak to taste (e.g., 200-260px) */

    width: clamp(160px, 34vmin, 320px); /* avatar max width */

    margin: 0 auto; /* center horizontally */

    display: flex;

    justify-content: center;

    align-items: flex-end;

}

/* Background image */

.luna-bg {

    position: absolute;

    bottom: 0; /* stick to bottom */

    left: 50%; /* center horizontally */

    transform: translateX(-50%); /* actually center */

    width: 100%; /* full width of container */

    height: auto; /* scale by width */

    object-fit: contain; /* keep aspect ratio */

    z-index: 0;

}



/* Avatar image sits on top */

.luna-frame {

    position: relative; /* ensures it's above the .luna-bg */

    width: 100%;

    height: 100%;

    object-fit: contain;

    z-index: 1;

    transform: translateY(-20px);

}



.luna-visible {

    opacity: 1;

}



.luna-hidden {

    opacity: 0;

}



/* Popover panel itself */

.luna-popover .mud-popover {

    /* widen the paper & soften shadow for a floating feel */

    filter: drop-shadow(0 10px 24px rgba(0,0,0,.24));

    border-radius: 18px;

}



/* Chat container "card" */

.luna-chat {

    /* subtle frosted panel that reacts to theme */

    background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent);

    backdrop-filter: saturate(140%) blur(6px);

    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 14%, transparent);

}



/* Header bar: faint tint + hairline bottom border already provided by Divider */

.luna-chat__header {

    background: color-mix(in srgb, var(--mud-palette-surface) 96%, transparent);

}



/* Input bar: slight elevation feel via inner shadow + distinct surface */

.luna-chat__inputbar {

    background: color-mix(in srgb, var(--mud-palette-surface) 98%, transparent);

}



/* Text field: give a little lift on hover/focus */

.luna-chat__textfield .mud-input-root {

    border-radius: 12px;

}



    .luna-chat__textfield .mud-input-root:hover {

        box-shadow: 0 1px 4px rgba(0,0,0,.12);

    }



    .luna-chat__textfield .mud-input-root.mud-input-root-filled.mud-input-root-focused,

    .luna-chat__textfield .mud-input-root.mud-input-root-outlined.mud-input-root-focused {

        box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);

    }



/* Assistant vs user messages */

.luna-msg--assistant {

    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);

    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);

}



.luna-msg {

    overflow-wrap: anywhere;

    word-break: break-word;

}



/* User bubble: primary background, multiline */

.luna-msg--user {

    background: var(--mud-palette-primary);

    color: #fff;

    box-shadow: 0 2px 8px rgba(0,0,0,.35);

    /* If you want a little inner spacing tune, keep padding in code or here */

}



/* Optional: tweak inner MudText spacing */

.luna-msg--user .mud-typography {

    margin: 0;

}



/* Force dark styling for the chat subtree only */

.luna-theme-dark {

    color-scheme: dark; /* native controls/icons prefer dark */

    /* Palette-style variables (MudBlazor v6+ uses CSS vars) */

    --mud-palette-background: #0f1115;

    --mud-palette-surface: #161a22;

    --mud-palette-text-primary: rgba(255,255,255,.87);

    --mud-palette-text-secondary: rgba(255,255,255,.60);

    --mud-palette-lines-default: rgba(255,255,255,.12);

    --mud-palette-divider: rgba(255,255,255,.12);

    /* keep your brand color; change if you want */

    --mud-palette-primary: #ff7a1a;

    /* stronger shadow reads better on dark */

    --mud-elevation-8: 0 10px 24px rgba(0,0,0,.45);

}



/* If you used the earlier classes I suggested, tint those surfaces */

.luna-theme-dark .luna-chat {

   /* background: var(--mud-palette-surface);*/

    border: 1px solid var(--mud-palette-lines-default);

}



.luna-theme-dark .luna-chat__header,

.luna-theme-dark .luna-chat__inputbar {

    background: #1a1f29; /* slightly lighter than surface for contrast */

}



/* Inputs & text colors inside the scope */

.luna-theme-dark .mud-input-root,

.luna-theme-dark .mud-typography,

.luna-theme-dark .mud-chip,

.luna-theme-dark .mud-button,

.luna-theme-dark .mud-paper,

.luna-theme-dark .mud-text {

    color: var(--mud-palette-text-primary);

}



/* Outlined textfield tweaks so borders read in dark */

.luna-theme-dark .mud-input-root-outlined {

    background: #0f1115;

    border-color: var(--mud-palette-lines-default);

}



.luna-theme-dark .mud-input-root.mud-input-root-focused {

    box-shadow: 0 0 0 3px rgba(255,122,26,.22);

}



/* Bubbles */

.luna-theme-dark .luna-msg--assistant {

    background: #1b2230;

    border: 1px solid var(--mud-palette-lines-default);

}



.luna-theme-dark .luna-msg--user {

    /* Primary chip already colored; just give it lift */

    box-shadow: 0 2px 8px rgba(0,0,0,.35);

}




.auth-shell {
    background: #ffffff;
}

.auth-grid {
    align-items: stretch;
    flex-wrap: nowrap;
}

.auth-brand {
    min-height: 100vh;
    flex: 0 1 40%;
    min-width: 180px;
}

.auth-brand__inner {
    padding-top: 2.5rem;
    justify-content: center;
}

.auth-brand__logo {
    width: clamp(100px, 34vw, 420px);
    height: auto;
    margin-left: 0.5rem;
}

.auth-form-rail {
    justify-content: center;
    align-items: center;
    padding: clamp(16px, 4vw, 32px);
    min-height: 100vh;
    background: #ffffff;
    gap: 0;
    flex: 1 1 60%;
    min-width: 320px;
}

.auth-card {
    width: clamp(320px, 70vw, 460px);
    margin-left: 0;
    margin-right: auto;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

@media (max-width: 960px) {
    .auth-brand {
        min-height: 30vh;
        min-width: 140px;
    }

    .auth-brand__inner {
        padding-top: 1.5rem;
    }

    .auth-form-rail {
        min-height: auto;
        background: #ffffff;
        align-items: flex-start;
        min-width: 260px;
    }
}

/*@media (max-width: 600px) {
    .auth-grid {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .auth-form-rail {
        padding: 16px;
        min-height: auto;
        background: #ffffff;
        align-items: flex-start;
        min-width: 0;
        flex: 1 1 100%;
    }

    .auth-card {
        max-height: none;
        box-shadow: none;
        background: transparent;
    }

    .auth-brand__logo {
        width: clamp(140px, 52vw, 260px);
    }

    .auth-brand {
        flex: 1 1 100%;
        min-width: 0;
        min-height: 24vh;
    }
}
*/