/**
 * Immersive Mode Styles
 * =====================
 * Full-screen, distraction-free experience for Chat, Documents, and Blog.
 * Hides header/footer, enables cinematic transitions.
 *
 * Dependencies: design-system.css (CSS variables)
 * Load order: After workspace.css
 */

/* ==========================================================================
   IMMERSIVE MODE - FULL SCREEN EXPERIENCE
   ========================================================================== */

/**
 * When body has .immersive-mode class:
 * - Header slides up and disappears
 * - Footer fades out
 * - Services expand to fill 100vh × 100vw
 * - Body scroll is locked
 */

/* Lock body scroll in immersive mode */
body.immersive-mode {
    overflow: hidden;
}

/* ==========================================================================
   HEADER ANIMATION - SLIDE UP AND HIDE
   ========================================================================== */

/* Prepare site header for animation
   NOTE: Do NOT use bare 'header' selector — it catches <header class="document-header">
   inside the document writer. Use class-based selectors only. */
.site-header,
header.site-header,
.quantum-nav,
nav.quantum-nav {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide site header up in immersive mode */
body.immersive-mode .site-header,
body.immersive-mode header.site-header,
body.immersive-mode .quantum-nav,
body.immersive-mode nav.quantum-nav {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Remove body padding in immersive mode (header adds 90px padding normally) */
html body.immersive-mode {
    padding-top: 0;
}

/* ==========================================================================
   FOOTER ANIMATION - FADE OUT
   ========================================================================== */

/* Prepare site footer for animation
   NOTE: Do NOT use bare 'footer' selector — it catches <footer class="editor-footer">
   inside the document writer. Use class-based selectors only. */
.quantum-footer,
.site-footer {
    transition: opacity 0.2s ease-out;
}

/* Hide site footer in immersive mode */
body.immersive-mode .quantum-footer,
body.immersive-mode .site-footer {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    bottom: -9999px;
}

/* ==========================================================================
   CONTAINER OVERRIDES - REMOVE ALL PADDING
   ========================================================================== */

/* Remove container padding in immersive mode */
body.immersive-mode .container {
    padding: 0;
    padding-top: 0;
    max-width: 100%;
    min-height: 100vh;
}

/* ==========================================================================
   SERVICE VIEWS - FULL VIEWPORT
   ========================================================================== */

/* All service views fill entire viewport */
body.immersive-mode .chat-view-wrapper {
    height: 100vh;
    min-height: 100vh;
}

body.immersive-mode .modern-chat-container {
    height: 100vh;
    height: 100dvh; /* Preferred — respects dynamic viewport on iOS Safari */
    min-height: 100vh;
    min-height: 100dvh;
}

body.immersive-mode #documents-view,
body.immersive-mode #documents-view.documents-view {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
}

body.immersive-mode .blog-view-wrapper {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
}

body.immersive-mode #external-service-view {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ==========================================================================
   HIDE MODE TOGGLE IN IMMERSIVE MODE
   (Replaced by floating nav)
   ========================================================================== */

body.immersive-mode .top-mode-toggle-container {
    display: none;
}

/* ==========================================================================
   CINEMATIC TRANSITIONS
   ========================================================================== */

/* Dashboard transition - prepare for animation */
.dashboard-view {
    transition: opacity 0.2s ease-out,
                transform 0.2s ease-out,
                filter 0.2s ease-out;
}

/* Dashboard exits with fade + blur */
.dashboard-view.transitioning-out {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(4px);
}

/* Service views enter with scale up */
.chat-view-wrapper,
#documents-view,
.blog-view-wrapper,
#external-service-view {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Initial state for service entering */
.chat-view-wrapper.transitioning-in,
#documents-view.transitioning-in,
.blog-view-wrapper.transitioning-in,
#external-service-view.transitioning-in {
    opacity: 0;
    transform: scale(0.95);
}

/* Final state after transition */
.chat-view-wrapper.transitioned,
#documents-view.transitioned,
.blog-view-wrapper.transitioned,
#external-service-view.transitioned {
    opacity: 1;
    transform: scale(1);
}

/* Mobile/tablet: disable cinematic transitions — instant show for reliability.
   Prevents opacity:0/transform:scale() from stranding views invisible
   when requestAnimationFrame is delayed on mobile/tablet hardware. */
@media (max-width: 1024px) {
    .chat-view-wrapper,
    #documents-view,
    .blog-view-wrapper,
    #external-service-view {
        transition: none;
    }

    .chat-view-wrapper.transitioning-in,
    #documents-view.transitioning-in,
    .blog-view-wrapper.transitioning-in,
    #external-service-view.transitioning-in {
        opacity: 1;
        transform: none;
    }

    .chat-view-wrapper.transitioned,
    #documents-view.transitioned,
    .blog-view-wrapper.transitioned,
    #external-service-view.transitioned {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   TOP EDGE INDICATOR
   Subtle glow at top edge hinting navigation is available
   ========================================================================== */

body.immersive-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 242, 254, 0.3) 20%,
        rgba(0, 242, 254, 0.5) 50%,
        rgba(0, 242, 254, 0.3) 80%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--z-floating-nav, 600);
    pointer-events: none;
}

/* Show edge indicator on hover near top */
body.immersive-mode.nav-hint::before {
    opacity: 1;
}

/* ==========================================================================
   MOBILE ADJUSTMENTS
   On mobile/tablet, we need persistent navigation
   ========================================================================== */

@media (max-width: 1024px) {
    /* On mobile, don't use hover-based nav hint */
    body.immersive-mode::before {
        display: none;
    }

    /* Ensure services fill viewport on mobile with floating nav.
       Use min-height: 100dvh (not 0) to prevent flex children collapsing. */
    body.immersive-mode .chat-view-wrapper,
    body.immersive-mode .modern-chat-container {
        height: 100dvh;
        min-height: 100dvh;
    }

    body.immersive-mode #documents-view,
    body.immersive-mode .blog-view-wrapper,
    body.immersive-mode #external-service-view {
        height: 100dvh;
        min-height: 100dvh;
    }
}

/* ==========================================================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .quantum-nav,
    .site-header,
    .quantum-nav.site-header,
    .quantum-footer,
    .site-footer,
    .dashboard-view,
    .chat-view-wrapper,
    #documents-view,
    .blog-view-wrapper,
    #external-service-view {
        transition: none;
    }

    .dashboard-view.transitioning-out {
        filter: none;
    }
}