/* ======================================================================
   PIXEL AI 2.0 — DYNAMIC LIVING VISUAL SYSTEM (ATMOSPHERE)
   Identity: Black (#0A0A0A), Deep Charcoal, White, Metallic Gold (#D4AF37)
   Atmosphere: Subtle, living, evolving ambient layer behind & around UI.
   ====================================================================== */

:root {
    --pixel-ambient-primary: rgba(212, 175, 55, 0.18);
    --pixel-ambient-secondary: rgba(217, 140, 54, 0.12);
    --pixel-ambient-accent: rgba(212, 175, 55, 0.22);
    --pixel-ambient-glow: rgba(212, 175, 55, 0.26);
    --pixel-ambient-opacity: 0.85;
    --pixel-ambient-temperature: 1;
    --pixel-ambient-depth: 1;
    --pixel-ambient-speed: 32s;
    --pixel-atmosphere-x1: 72%;
    --pixel-atmosphere-y1: 14%;
    --pixel-atmosphere-x2: 18%;
    --pixel-atmosphere-y2: 82%;
    --pixel-atmosphere-x3: 50%;
    --pixel-atmosphere-y3: 45%;
    --pixel-surface-glow: rgba(212, 175, 55, 0.06);
}

/* Base isolation for all UI elements over the living background */
body {
    position: relative;
    background-color: var(--bg, #0A0A0A);
    min-height: 100vh;
}

.app {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

.main {
    background: transparent !important;
}

/* ======================================================================
   Living Ambient Atmosphere Background Layer
   ====================================================================== */

body::before,
body::after {
    content: "";
    position: fixed;
    inset: -15vh -15vw;
    z-index: 0;
    pointer-events: none;
    will-change: transform, opacity;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.6s ease;
}

/* Primary Ambient Gradient Mesh */
body::before {
    background:
        radial-gradient(ellipse 65% 55% at var(--pixel-atmosphere-x1, 72%) var(--pixel-atmosphere-y1, 14%),
            var(--pixel-ambient-primary, rgba(212, 175, 55, 0.18)) 0%,
            transparent 65%),
        radial-gradient(ellipse 55% 50% at var(--pixel-atmosphere-x2, 18%) var(--pixel-atmosphere-y2, 82%),
            var(--pixel-ambient-secondary, rgba(217, 140, 54, 0.12)) 0%,
            transparent 60%),
        radial-gradient(circle 45% at var(--pixel-atmosphere-x3, 50%) var(--pixel-atmosphere-y3, 45%),
            var(--pixel-ambient-accent, rgba(212, 175, 55, 0.10)) 0%,
            transparent 55%);
    filter: blur(42px);
}

/* Secondary Subtle Ambient Glow / Motion Layer */
body::after {
    z-index: 0;
    background:
        radial-gradient(ellipse 75% 60% at 85% 25%,
            var(--pixel-ambient-glow, rgba(212, 175, 55, 0.14)) 0%,
            transparent 58%),
        radial-gradient(circle 50% at 15% 75%,
            var(--pixel-ambient-secondary, rgba(217, 140, 54, 0.09)) 0%,
            transparent 62%);
    filter: blur(56px);
}

/* Active Atmosphere Visibility */
body.pixel-atmosphere-active::before {
    opacity: var(--pixel-ambient-opacity, 0.85);
}

body.pixel-atmosphere-active::after {
    opacity: calc(var(--pixel-ambient-opacity, 0.85) * 0.75);
}

/* Ambient Motion Keyframes (Slow, low amplitude, GPU-friendly) */
@keyframes pixelAtmosphereDriftPrimary {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(3.5vw, -2vh, 0) scale(1.04);
    }
    66% {
        transform: translate3d(-2.5vw, 3vh, 0) scale(0.97);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes pixelAtmosphereDriftSecondary {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(-3vw, -2.5vh, 0) rotate(1.5deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

/* Apply slow continuous drift when motion is enabled */
body.pixel-atmosphere-active:not(.pixel-atmosphere-static):not(.reduce-motion)::before {
    animation: pixelAtmosphereDriftPrimary var(--pixel-ambient-speed, 32s) ease-in-out infinite alternate;
}

body.pixel-atmosphere-active:not(.pixel-atmosphere-static):not(.reduce-motion)::after {
    animation: pixelAtmosphereDriftSecondary calc(var(--pixel-ambient-speed, 32s) * 1.3) ease-in-out infinite alternate;
}

/* ======================================================================
   Intensity Levels (Subtle, Balanced, Expressive)
   ====================================================================== */

body[data-atmosphere-intensity="subtle"] {
    --pixel-ambient-opacity: 0.55;
}

body[data-atmosphere-intensity="balanced"] {
    --pixel-ambient-opacity: 0.85;
}

body[data-atmosphere-intensity="expressive"] {
    --pixel-ambient-opacity: 1.15;
}

/* ======================================================================
   Artistic Mode (Cinematic & Richer Atmosphere)
   ====================================================================== */

body.pixel-atmosphere-artistic::before {
    filter: blur(34px);
    opacity: calc(var(--pixel-ambient-opacity, 0.85) * 1.2);
}

body.pixel-atmosphere-artistic::after {
    filter: blur(46px);
    opacity: calc(var(--pixel-ambient-opacity, 0.85) * 1.05);
}

/* ======================================================================
   Static Modes
   ====================================================================== */

body.pixel-atmosphere-static::before,
body.pixel-atmosphere-static::after {
    animation: none !important;
    transition: opacity 300ms ease;
}

body[data-atmosphere-appearance="static-gold"] {
    --pixel-ambient-primary: rgba(212, 175, 55, 0.16);
    --pixel-ambient-secondary: rgba(184, 134, 11, 0.10);
    --pixel-ambient-accent: rgba(212, 175, 55, 0.18);
    --pixel-ambient-glow: rgba(212, 175, 55, 0.22);
}

body[data-atmosphere-appearance="static-dark"] {
    --pixel-ambient-primary: rgba(30, 32, 42, 0.10);
    --pixel-ambient-secondary: rgba(18, 20, 26, 0.08);
    --pixel-ambient-accent: rgba(35, 38, 50, 0.08);
    --pixel-ambient-glow: rgba(25, 28, 36, 0.10);
    --pixel-ambient-opacity: 0.45;
}

/* ======================================================================
   Reduced Motion / Accessibility
   ====================================================================== */

body.reduce-motion::before,
body.reduce-motion::after,
body.pixel-atmosphere-static::before,
body.pixel-atmosphere-static::after {
    animation: none !important;
    transition: opacity 300ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none !important;
        transition: opacity 300ms ease !important;
    }
}

/* ======================================================================
   Interaction Responses (Pulse, Accent, Focus)
   ====================================================================== */

/* Message Sent Pulse Animation */
@keyframes pixelAtmospherePulseAnimation {
    0% {
        transform: scale(1);
        filter: blur(42px) brightness(1);
    }
    40% {
        transform: scale(1.08);
        filter: blur(34px) brightness(1.35);
    }
    100% {
        transform: scale(1);
        filter: blur(42px) brightness(1);
    }
}

body.atmosphere-pulse::before {
    animation: pixelAtmospherePulseAnimation 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Operation Success Shimmer */
@keyframes pixelAtmosphereSuccessAnimation {
    0% {
        filter: blur(42px) brightness(1);
    }
    50% {
        filter: blur(32px) brightness(1.25);
    }
    100% {
        filter: blur(42px) brightness(1);
    }
}

body.atmosphere-success::before {
    animation: pixelAtmosphereSuccessAnimation 1.4s ease-out !important;
}

/* Error Atmosphere Tint */
body.atmosphere-error::before {
    --pixel-ambient-primary: rgba(220, 60, 60, 0.22) !important;
    --pixel-ambient-accent: rgba(240, 100, 70, 0.16) !important;
    transition: all 400ms ease;
}

/* Depth Response: Modals & Dialogs Open */
body:has(dialog[open])::before,
body:has(dialog[open])::after {
    opacity: calc(var(--pixel-ambient-opacity, 0.85) * 0.55);
    filter: blur(52px);
}

/* Depth Response: Command Palette Focus */
body.atmosphere-palette-open::before {
    opacity: calc(var(--pixel-ambient-opacity, 0.85) * 0.45);
    transform: scale(0.98);
}

.command-palette[open] .command-palette-shell {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 35px var(--pixel-ambient-glow, rgba(212, 175, 55, 0.22));
}

/* Active Dialog Ambient Edge Glow */
dialog[open] {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 28px var(--pixel-ambient-glow, rgba(212, 175, 55, 0.18));
}

/* ======================================================================
   Activity-Based Living Atmosphere Animations
   ====================================================================== */

/* Thinking: Slow soft pulsing ambient wave */
@keyframes atmosphereThinkingPulse {
    0%, 100% {
        opacity: var(--pixel-ambient-opacity, 0.85);
        transform: scale(1);
    }
    50% {
        opacity: calc(var(--pixel-ambient-opacity, 0.85) * 1.2);
        transform: scale(1.05);
    }
}

body[data-pixel-activity="thinking"]:not(.reduce-motion)::before {
    animation: atmosphereThinkingPulse 4s ease-in-out infinite !important;
}

/* Searching: Directional ambient sweep */
@keyframes atmosphereSearchingSweep {
    0% {
        transform: translate3d(-3vw, 0, 0);
    }
    50% {
        transform: translate3d(3vw, 0, 0);
    }
    100% {
        transform: translate3d(-3vw, 0, 0);
    }
}

body[data-pixel-activity="searching"]:not(.reduce-motion)::before {
    animation: atmosphereSearchingSweep 6s ease-in-out infinite !important;
}

/* Generating / Streaming: Gradual ambient expansion */
@keyframes atmosphereGeneratingExpand {
    0% {
        transform: scale(1);
        filter: blur(42px);
    }
    50% {
        transform: scale(1.06);
        filter: blur(36px) brightness(1.15);
    }
    100% {
        transform: scale(1);
        filter: blur(42px);
    }
}

body[data-pixel-activity="generating"]:not(.reduce-motion)::before,
body[data-pixel-activity="streaming"]:not(.reduce-motion)::before {
    animation: atmosphereGeneratingExpand 5s ease-in-out infinite !important;
}

/* Saving: Restrained ambient highlight */
body[data-pixel-activity="saving"]::before {
    filter: blur(36px) brightness(1.2);
    transition: filter 300ms ease;
}

/* ======================================================================
   Workspace Surface Ambient Depth Highlights
   ====================================================================== */

/* Subtle atmosphere edge highlight on composer */
.composer-box:focus-within {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 20px var(--pixel-ambient-glow, rgba(212, 175, 55, 0.2));
}

/* Light mode adjustments */
body.light-mode::before {
    filter: blur(48px);
    mix-blend-mode: multiply;
    opacity: calc(var(--pixel-ambient-opacity, 0.85) * 0.55);
}

body.light-mode::after {
    filter: blur(60px);
    mix-blend-mode: multiply;
    opacity: calc(var(--pixel-ambient-opacity, 0.85) * 0.45);
}

body.light-mode[data-atmosphere-appearance="static-gold"] {
    --pixel-ambient-primary: rgba(184, 134, 11, 0.18);
    --pixel-ambient-secondary: rgba(212, 175, 55, 0.12);
}

/* Research Progress Bar & Buttons */
.research-progress { display: flex; align-items: center; gap: 10px; }
.research-progress[hidden] { display: none; }
.research-progress > span:nth-child(2) { flex: 1; }
.research-stop-btn { border: 1px solid var(--border-color, rgba(255,255,255,.12)); border-radius: 7px; background: transparent; color: inherit; padding: 6px 11px; cursor: pointer; }
.research-stop-btn:hover { border-color: rgba(220, 120, 110, .55); color: #e0a29a; }