/* ============================================================
   CHAT PAGE STYLES
   - Video background with overlays
   - Chatbot widget positioning
   ============================================================ */

/* Page-specific overrides */
.chat-page {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Hide only viewpoint nav and particles (keep mobile bar for consistency) */
.chat-page .viewpoint-nav,
.chat-page #particles-canvas {
    display: none !important;
}

/* Ensure mobile bar is visible */
@media (max-width: 768px) {
    .chat-page .mobile-bottom-bar {
        display: flex !important;
    }
    
    .chat-main-viewport {
        padding-bottom: 80px; /* Space for mobile bar */
    }
}

/* Main viewport - exactly one screen height */
.chat-main-viewport {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Video Container */
.chat-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background: var(--bg-base);
}

/* Video element */
.chat-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}

/* ============================================================
   ANIMATED GRADIENT OVERLAYS
   ============================================================ */
@keyframes chatOverlayShift {
    0%, 100% {
        background-position: 0% 0%;
        opacity: 0.95;
    }
    50% {
        background-position: 100% 100%;
        opacity: 0.85;
    }
}

@keyframes chatAccentShift {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 1;
    }
    33% {
        background-position: 100% 50%;
        opacity: 0.8;
    }
    66% {
        background-position: 50% 100%;
        opacity: 0.9;
    }
}

/* Dark theme overlay */
.chat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 26, 0.95) 0%,
        rgba(26, 26, 26, 0.75) 30%,
        rgba(26, 26, 26, 0.65) 50%,
        rgba(26, 26, 26, 0.75) 70%,
        rgba(26, 26, 26, 0.95) 100%
    );
    background-size: 200% 200%;
    animation: chatOverlayShift 12s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

/* Dark theme accent overlay */
.chat-accent-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(var(--primary-accent-rgb), 0.12) 0%,
        rgba(var(--primary-accent-rgb), 0.06) 25%,
        transparent 50%,
        rgba(var(--secondary-accent-rgb), 0.06) 75%,
        rgba(var(--secondary-accent-rgb), 0.12) 100%
    );
    background-size: 300% 300%;
    animation: chatAccentShift 18s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

/* Light theme overlays */
[data-theme="light"] .chat-overlay {
    background: linear-gradient(
        180deg,
        rgba(248, 250, 249, 0.98) 0%,
        rgba(248, 250, 249, 0.8) 30%,
        rgba(248, 250, 249, 0.7) 50%,
        rgba(248, 250, 249, 0.8) 70%,
        rgba(248, 250, 249, 0.98) 100%
    );
    background-size: 200% 200%;
    animation: chatOverlayShift 12s ease-in-out infinite;
}

[data-theme="light"] .chat-accent-overlay {
    background: linear-gradient(
        135deg,
        rgba(var(--primary-accent-rgb), 0.18) 0%,
        rgba(var(--primary-accent-rgb), 0.1) 25%,
        rgba(var(--secondary-accent-rgb), 0.08) 50%,
        rgba(var(--secondary-accent-rgb), 0.1) 75%,
        rgba(101, 163, 13, 0.18) 100%
    );
    background-size: 300% 300%;
    animation: chatAccentShift 18s ease-in-out infinite;
}

/* ============================================================
   CHATBOT WIDGET
   ============================================================ */
.chat-widget-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 100%;
    max-width: 400px;
    padding: 0 1rem;
}

/* ============================================================
   MOBILE STYLES
   ============================================================ */
@media (max-width: 768px) {
    .chat-video-bg {
        object-fit: cover;
    }
    
    .chat-widget-container {
        bottom: 10px;
        max-width: 100%;
    }
}