:root {
    --hl-font-family: "Manrope", "Roboto", "Arial", sans-serif;
    --hl-gradient-brand: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    --hl-gradient-brand-horizontal: linear-gradient(90deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    --hl-space-1: 0.25rem;
    --hl-space-2: 0.5rem;
    --hl-space-3: 0.75rem;
    --hl-space-4: 1rem;
    --hl-space-5: 1.5rem;
    --hl-space-6: 2rem;
    --hl-space-7: 2.5rem;
    --hl-space-8: 3rem;
    --hl-safe-area-top: env(safe-area-inset-top, 0px);
    --hl-safe-area-right: env(safe-area-inset-right, 0px);
    --hl-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --hl-safe-area-left: env(safe-area-inset-left, 0px);
    --hl-radius-sm: 0.5rem;
    --hl-radius-md: 0.875rem;
    --hl-radius-lg: 1.25rem;
    --hl-radius-xl: 1.5rem;
    --hl-appbar-height: 4.5rem;
    --hl-appbar-total-height: calc(var(--hl-appbar-height) + var(--hl-safe-area-top));
    --hl-appbar-action-size: 3rem;
    --hl-mobile-nav-height: 4.75rem;
    --hl-auth-header-height: 4.5rem;
    --hl-auth-header-total-height: calc(var(--hl-auth-header-height) + var(--hl-safe-area-top));
    --hl-auth-surface-narrow: 31.5rem;
    --hl-auth-surface-default: 36rem;
    --hl-auth-surface-wide: 44rem;
    --hl-auth-surface-photo: 39rem;
    --hl-page-chrome-background: #12101f;
    --hl-page-chrome-text: #fbf7ff;
    --hl-page-container-padding-top: var(--hl-space-6);
    --hl-page-container-padding-bottom: var(--hl-space-8);
    --hl-page-inner-padding-top: var(--hl-space-5);
    --hl-page-gap: var(--hl-space-5);
    --hl-surface-padding: clamp(1.1rem, 3vw, 1.75rem);
}

html[data-hl-theme="light"] {
    --hl-page-chrome-background: #fff7fc;
    --hl-page-chrome-text: #241727;
    color-scheme: light;
}

html[data-hl-theme="dark"] {
    --hl-page-chrome-background: #12101f;
    --hl-page-chrome-text: #fbf7ff;
    color-scheme: dark;
}

/*
 * Keep app.css limited to base/reset, CSS variables, global MudBlazor overrides,
 * and tiny utilities. Layout, page, and reusable component styles belong in
 * scoped .razor.css files next to their owner component.
 */

html {
    height: 100%;
    background: var(--hl-page-chrome-background);
    background-color: var(--hl-page-chrome-background);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    -ms-overflow-style: none;
    color: var(--mud-palette-text-primary, var(--hl-page-chrome-text));
    background: var(--hl-page-chrome-background);
    background-color: var(--hl-page-chrome-background);
    font-family: var(--hl-font-family);
}

/*
 * Hide native scrollbars without disabling scrolling. This prevents layout
 * width jumps when MudBlazor opens dialogs and toggles body scroll handling.
 */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.mud-layout {
    flex: 1 0 auto;
}

.hl-page-container {
    padding-top: var(--hl-page-container-padding-top);
    padding-bottom: var(--hl-page-container-padding-bottom);
}

.hl-page {
    width: 100%;
    min-width: 0;
    padding-top: var(--hl-page-inner-padding-top);
}

.hl-page--stack {
    display: flex;
    flex-direction: column;
    gap: var(--hl-page-gap);
}

.hl-surface {
    box-sizing: border-box;
    padding: var(--hl-surface-padding);
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 75%, transparent);
    border-radius: var(--hl-radius-lg);
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent);
}

h1:focus,
h1:focus-visible {
    outline: none;
}

.mud-button-filled.mud-button-filled-primary {
    background: var(--hl-gradient-brand-horizontal) !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent) !important;
    color: var(--mud-palette-primary-contrast-text) !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 6px 24px color-mix(in srgb, var(--mud-palette-primary) 42%, transparent) !important;
    filter: brightness(1.08);
}

.mud-card {
    background: color-mix(in srgb, var(--mud-palette-surface) 78%, transparent) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 64%, transparent) !important;
    box-shadow:
        0 10px 40px color-mix(in srgb, var(--mud-palette-primary) 10%, transparent),
        0 4px 15px color-mix(in srgb, var(--mud-palette-secondary) 8%, transparent) !important;
}

.mud-tooltip.mud-tooltip-default {
    color: var(--mud-palette-text-primary) !important;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-primary) 6%) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 68%, transparent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--mud-palette-dark) 18%, transparent);
    font-family: var(--hl-font-family);
}

.mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after {
    border-color: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-primary) 6%) transparent transparent transparent !important;
}

#components-reconnect-modal.hl-reconnect {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: grid !important;
    place-items: center;
    min-height: 100dvh;
    padding:
        max(var(--hl-space-5), var(--hl-safe-area-top))
        max(var(--hl-space-4), var(--hl-safe-area-right))
        max(var(--hl-space-5), var(--hl-safe-area-bottom))
        max(var(--hl-space-4), var(--hl-safe-area-left));
    color: var(--mud-palette-text-primary, var(--hl-page-chrome-text)) !important;
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent), transparent 34rem),
        color-mix(in srgb, var(--hl-page-chrome-background) 84%, transparent) !important;
    font-family: var(--hl-font-family);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#components-reconnect-modal.components-reconnect-hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hl-reconnect__panel {
    width: min(100%, 24rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hl-space-4);
    padding: clamp(1.5rem, 6vw, 2.25rem);
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 70%, transparent);
    border-radius: var(--hl-radius-xl);
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent);
    box-shadow:
        0 24px 64px color-mix(in srgb, var(--mud-palette-dark) 24%, transparent),
        0 8px 28px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    text-align: center;
}

.hl-reconnect__spinner {
    position: relative;
    width: clamp(4.5rem, 18vw, 6rem);
    aspect-ratio: 1;
    border-radius: 50%;
    animation: hl-reconnect-loader-rotate 2s linear infinite;
}

.hl-reconnect__ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        var(--mud-palette-primary) 25%,
        var(--mud-palette-secondary) 52%,
        transparent 100%
    );
    filter: blur(1.5px);
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 0);
}

.hl-reconnect__spinner::after {
    position: absolute;
    inset: -0.75rem;
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        color-mix(in srgb, var(--mud-palette-primary) 42%, transparent) 25%,
        color-mix(in srgb, var(--mud-palette-secondary) 42%, transparent) 52%,
        transparent 100%
    );
    content: "";
    filter: blur(16px);
}

#components-reconnect-modal.components-reconnect-failed .hl-reconnect__spinner,
#components-reconnect-modal.components-reconnect-rejected .hl-reconnect__spinner {
    animation: none;
}

#components-reconnect-modal.components-reconnect-failed .hl-reconnect__ring,
#components-reconnect-modal.components-reconnect-rejected .hl-reconnect__ring {
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        var(--mud-palette-error) 28%,
        var(--mud-palette-primary) 56%,
        transparent 100%
    );
}

.hl-reconnect__copy {
    display: none;
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-retrying) .hl-reconnect__copy--show,
#components-reconnect-modal.components-reconnect-retrying .hl-reconnect__copy--retrying,
#components-reconnect-modal.components-reconnect-failed .hl-reconnect__copy--failed,
#components-reconnect-modal.components-reconnect-rejected .hl-reconnect__copy--rejected {
    display: block;
}

.hl-reconnect__eyebrow {
    margin: 0 0 var(--hl-space-2);
    color: var(--mud-palette-primary);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hl-reconnect__copy h2 {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: clamp(1.25rem, 4vw, 1.55rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: 0;
}

.hl-reconnect__copy p:not(.hl-reconnect__eyebrow) {
    margin: var(--hl-space-2) 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}

.hl-reconnect__copy span {
    color: var(--mud-palette-primary);
    font-weight: 900;
}

#components-reconnect-modal .hl-reconnect__button {
    min-height: 2.75rem;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 var(--hl-space-5);
    border: 0;
    border-radius: 9999px;
    color: var(--mud-palette-primary-contrast-text);
    background: var(--hl-gradient-brand-horizontal);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition:
        box-shadow 180ms ease,
        filter 180ms ease,
        transform 180ms ease;
}

#components-reconnect-modal.components-reconnect-failed .hl-reconnect__button,
#components-reconnect-modal.components-reconnect-rejected .hl-reconnect__button {
    display: inline-flex;
}

#components-reconnect-modal .hl-reconnect__button:hover,
#components-reconnect-modal .hl-reconnect__button:focus-visible {
    box-shadow: 0 10px 30px color-mix(in srgb, var(--mud-palette-primary) 38%, transparent);
    filter: brightness(1.08);
}

#components-reconnect-modal .hl-reconnect__button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mud-palette-primary) 68%, transparent);
    outline-offset: 3px;
}

#components-reconnect-modal .hl-reconnect__button:active {
    transform: translateY(1px);
}

@keyframes hl-reconnect-loader-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal.hl-reconnect {
        transition-duration: 500ms;
    }

    .hl-reconnect__spinner {
        animation-duration: 5s;
    }

    .hl-reconnect__spinner::after {
        filter: blur(12px);
    }
}

/*
 * MudDialog renders its root/content elements inside MudBlazor internals, so
 * these shell sizing rules must stay global rather than in isolated CSS.
 */
.onboarding-interview-dialog {
    --onboarding-dialog-desktop-gap-inline: clamp(4rem, 7.5vw, 7.5rem);
    --onboarding-dialog-desktop-gap-block: 4rem;
    width: min(65.625rem, calc(100vw - (var(--onboarding-dialog-desktop-gap-inline) * 2))) !important;
    height: min(52rem, calc(100dvh - var(--onboarding-dialog-desktop-gap-block))) !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--onboarding-dialog-desktop-gap-block)) !important;
    min-height: 0;
    margin: 0 !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    border-radius: var(--hl-radius-xl) !important;
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent) !important;
    box-shadow:
        0 28px 80px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent),
        0 12px 34px color-mix(in srgb, var(--mud-palette-dark) 18%, transparent) !important;
    transition:
        width 260ms ease,
        height 260ms ease,
        max-height 260ms ease,
        border-radius 260ms ease,
        transform 260ms ease;
}

.onboarding-interview-dialog .mud-dialog-title {
    flex: 0 0 auto;
    padding: var(--hl-space-4) var(--hl-space-5) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 62%, transparent);
}

.onboarding-interview-dialog .mud-dialog-content {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}

.aura-assistant-dialog,
.aura-base-dialog,
.mud-dialog.mud-message-box {
    overflow: hidden;
    border-radius: var(--hl-radius-xl) !important;
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, transparent) !important;
    box-shadow:
        0 24px 64px color-mix(in srgb, var(--mud-palette-dark) 26%, transparent),
        0 8px 28px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) !important;
}

.aura-assistant-dialog .mud-dialog-title,
.aura-base-dialog .mud-dialog-title,
.mud-dialog.mud-message-box .mud-dialog-title {
    padding: var(--hl-space-5) var(--hl-space-6) var(--hl-space-4) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 66%, transparent);
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-primary) 6%);
}

.aura-assistant-dialog .mud-dialog-content,
.aura-base-dialog .mud-dialog-content,
.mud-dialog.mud-message-box .mud-dialog-content {
    padding: var(--hl-space-5) var(--hl-space-6) !important;
}

.aura-assistant-dialog .mud-dialog-actions,
.aura-base-dialog .mud-dialog-actions,
.mud-dialog.mud-message-box .mud-dialog-actions {
    padding: var(--hl-space-4) var(--hl-space-6) var(--hl-space-5) !important;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-divider) 54%, transparent);
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--mud-palette-primary) 4%);
}

.mud-dialog.mud-message-box .mud-dialog-actions .mud-button-root {
    border-radius: 9999px;
    font-weight: 800;
    text-transform: none;
}

@media (max-width: 1200px) and (min-width: 1025px) {
    .onboarding-interview-dialog {
        width: calc(100vw - 15vw) !important;
        height: min(50rem, calc(100dvh - 3rem)) !important;
        max-height: calc(100dvh - 3rem) !important;
    }
}

@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {
    .onboarding-interview-dialog {
        --onboarding-dialog-safe-top: max(1rem, env(safe-area-inset-top));
        --onboarding-dialog-safe-bottom: max(1rem, env(safe-area-inset-bottom));
        width: 100vw !important;
        height: calc(100dvh - var(--onboarding-dialog-safe-top) - var(--onboarding-dialog-safe-bottom)) !important;
        max-width: 100vw !important;
        max-height: calc(100dvh - var(--onboarding-dialog-safe-top) - var(--onboarding-dialog-safe-bottom)) !important;
        border-radius: var(--hl-radius-lg) !important;
    }
}

@media (max-width: 600px) {
    .hl-page-container {
        padding-top: var(--hl-space-4);
        padding-bottom: calc(var(--hl-mobile-nav-height) + var(--hl-space-6));
    }

    .hl-page {
        padding-top: var(--hl-space-4);
    }

    .scroll-locked,
    .scroll-locked-no-padding {
        padding-right: 0 !important;
        padding-inline-end: 0 !important;
    }

    .scroll-locked .mud-layout .mud-main-content .mud-scroll-to-top {
        padding-right: 0 !important;
        padding-inline-end: 0 !important;
    }

    #mud-snackbar-container {
        left: max(var(--hl-space-3), var(--hl-safe-area-left)) !important;
        right: max(var(--hl-space-3), var(--hl-safe-area-right)) !important;
        width: auto !important;
        transform: none !important;
    }

    #mud-snackbar-container.mud-snackbar-location-top-left,
    #mud-snackbar-container.mud-snackbar-location-top-center,
    #mud-snackbar-container.mud-snackbar-location-top-right {
        top: max(var(--hl-space-3), var(--hl-safe-area-top)) !important;
    }

    #mud-snackbar-container.mud-snackbar-location-bottom-left,
    #mud-snackbar-container.mud-snackbar-location-bottom-center,
    #mud-snackbar-container.mud-snackbar-location-bottom-right {
        bottom: max(var(--hl-space-3), var(--hl-safe-area-bottom)) !important;
    }

    #mud-snackbar-container .mud-snackbar {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .onboarding-interview-dialog {
        --onboarding-dialog-safe-top: max(0.75rem, env(safe-area-inset-top));
        --onboarding-dialog-safe-bottom: max(0.75rem, env(safe-area-inset-bottom));
        width: 100vw !important;
        height: calc(100dvh - var(--onboarding-dialog-safe-top) - var(--onboarding-dialog-safe-bottom)) !important;
        max-height: calc(100dvh - var(--onboarding-dialog-safe-top) - var(--onboarding-dialog-safe-bottom)) !important;
        border-radius: var(--hl-radius-lg) !important;
    }

    .onboarding-interview-dialog .mud-dialog-title {
        padding: var(--hl-space-3) var(--hl-space-4) !important;
    }

    .aura-assistant-dialog,
    .aura-base-dialog,
    .mud-dialog.mud-message-box {
        border-radius: var(--hl-radius-lg) !important;
    }

    .aura-assistant-dialog .mud-dialog-title,
    .aura-base-dialog .mud-dialog-title,
    .mud-dialog.mud-message-box .mud-dialog-title {
        padding: var(--hl-space-4) var(--hl-space-4) var(--hl-space-3) !important;
    }

    .aura-assistant-dialog .mud-dialog-content,
    .aura-base-dialog .mud-dialog-content,
    .mud-dialog.mud-message-box .mud-dialog-content {
        padding: var(--hl-space-4) !important;
    }

    .aura-assistant-dialog .mud-dialog-actions,
    .aura-base-dialog .mud-dialog-actions,
    .mud-dialog.mud-message-box .mud-dialog-actions {
        padding: var(--hl-space-3) var(--hl-space-4) var(--hl-space-4) !important;
    }
}