/* ==============================================================================
   WHITELYIN LOADER STYLES
   Fullscreen overlay loaders with theme-aware rendering and progress indication.
   Supports: color (default), light (--wl-text on light bg), dark (--wl-text on dark bg)
   ============================================================================== */

/* Loader Overlay: Fullscreen Container */
.loader-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
    /* Theme-specific backgrounds applied via data-theme */
}

/* Prevent scroll while loader is visible */
.loader-overlay--active {
    body {
        overflow: hidden;
    }
}

.loader-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
}

/* Loader SVG Animation */
.loader-svg {
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    filter: drop-shadow(0 0 12px var(--wl-loader-glow));
    /* Color variant: uses built-in SVG colors */
    /* Light variant: SVG uses dark colors */
    /* Dark variant: SVG uses light colors */
}

@media (max-width: 768px) {
    .loader-svg {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .loader-svg {
        width: 80px;
        height: 80px;
    }
}

/* Progress Bar (if tool execution provides progress updates) */
.loader-progress-bar {
    width: 200px;
    height: 4px;
    background: var(--wl-border);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

@media (max-width: 480px) {
    .loader-progress-bar {
        width: 150px;
    }
}

.loader-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-accent) 0%, var(--wl-accent-soft) 100%);
    width: 0%;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.loader-progress-bar__fill--indeterminate {
    animation: progress-indeterminate 1.5s ease-in-out infinite;
}

/* Status Message */
.loader-status {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
    max-width: 300px;
    word-wrap: break-word;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .loader-status {
        font-size: 0.8125rem;
        max-width: 80vw;
    }
}

/* Secondary Message (e.g., "Converting PDF...") */
.loader-secondary {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    opacity: 0.7;
    margin: 0;
}

/* ==============================================================================
   THEME-SPECIFIC BACKGROUNDS
   Applied via [data-theme] attribute on the root element
   ============================================================================== */

/* COLOR THEME (Default: WhiteLyin branded colors) */
[data-theme="color"] .loader-overlay,
.loader-overlay[data-theme="color"] {
    background: linear-gradient(135deg, rgba(242, 242, 242, 0.95) 0%, rgba(230, 232, 235, 0.95) 100%);
    backdrop-filter: blur(6px);
}

/* LIGHT THEME */
[data-theme="light"] .loader-overlay,
.loader-overlay[data-theme="light"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 248, 250, 0.92) 100%);
    backdrop-filter: blur(4px);
}

/* DARK THEME */
[data-theme="dark"] .loader-overlay,
.loader-overlay[data-theme="dark"] {
    background: linear-gradient(135deg, rgba(13, 16, 20, 0.98) 0%, rgba(15, 20, 26, 0.98) 100%);
    backdrop-filter: blur(6px);
}

/* AUTO THEME: Respects OS preference via CSS media query */
@media (prefers-color-scheme: light) {
    [data-theme="auto"] .loader-overlay,
    .loader-overlay[data-theme="auto"] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 248, 250, 0.92) 100%);
        backdrop-filter: blur(4px);
    }
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .loader-overlay,
    .loader-overlay[data-theme="auto"] {
        background: linear-gradient(135deg, rgba(13, 16, 20, 0.98) 0%, rgba(15, 20, 26, 0.98) 100%);
        backdrop-filter: blur(6px);
    }
}

/* ==============================================================================
   LOADER VARIANTS BY BRAND
   Each brand family has distinct styling
   ============================================================================== */

.loader-overlay.loader--runtime-boot {
    /* WL Runtime colors */
}

.loader-overlay.loader--auth {
    /* Auth flow styling */
}

.loader-overlay.loader--module {
    /* Module transition styling */
}

.loader-overlay.loader--lyintools {
    /* LyinTools family styling */
}

.loader-overlay.loader--tool-execution {
    /* Tool execution styling - may show progress */
}

/* ==============================================================================
   ANIMATIONS
   ============================================================================== */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes progress-indeterminate {
    0% {
        width: 0%;
        opacity: 1;
    }
    50% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0;
        width: 0%;
    }
}

/* ==============================================================================
   ACCESSIBILITY
   Respect prefers-reduced-motion for users with motion sensitivity
   ============================================================================== */

@media (prefers-reduced-motion: reduce) {
    .loader-svg,
    .loader-progress-bar__fill--indeterminate {
        animation: none;
        opacity: 0.6;
    }

    .loader-overlay {
        animation: none;
    }
}

/* ==============================================================================
   HIGH CONTRAST MODE
   Support high contrast mode for accessibility
   ============================================================================== */

@media (prefers-contrast: more) {
    .loader-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .loader-progress-bar {
        border: 1px solid var(--wl-text);
    }

    .loader-svg {
        filter: brightness(1.2);
    }
}

/* ==============================================================================
   PRINT STYLES
   Hide loader on print (should not appear in printed pages)
   ============================================================================== */

@media print {
    .loader-overlay {
        display: none !important;
    }
}

/* ==============================================================================
   UTILITY CLASSES
   ============================================================================== */

.loader--hidden {
    display: none !important;
}

.loader--visible {
    display: flex !important;
}

.loader--no-progress {
    .loader-progress-bar {
        display: none;
    }
}

.loader--blocking {
    pointer-events: all;
    cursor: wait;
}

.loader--non-blocking {
    pointer-events: none;
    z-index: 1000;
}