/**
 * THE NANOVERSE - Light Overlay System
 * 
 * Provides a floating mini Light orb trigger and full Cognitive Canvas overlay
 * for all NANOVERSE applications.
 * 
 * Version 1.1.0 - Cross-App Light Access (Dark Grey Organic Blob)
 */

/* ===================================================================
   MINI LIGHT ORB TRIGGER - Matches Cognitive Canvas Orb Style
   =================================================================== */

.light-mini-trigger {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 30% 30%,
        rgba(90, 100, 115, 0.95) 0%,
        rgba(60, 68, 80, 0.9) 30%,
        rgba(45, 52, 62, 0.85) 60%,
        rgba(35, 40, 50, 0.8) 100%
    );
    border: 1px solid rgba(100, 180, 255, 0.15);
    box-shadow: 
        0 0 12px rgba(0, 212, 255, 0.2),
        0 0 25px rgba(0, 212, 255, 0.1),
        inset 0 0 8px rgba(0, 212, 255, 0.1),
        inset 2px 2px 4px rgba(255, 255, 255, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

/* Organic liquid-like surface shimmer */
.light-mini-trigger::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: 
        radial-gradient(ellipse at 25% 25%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(123, 104, 238, 0.1) 0%, transparent 40%);
    animation: light-mini-organic 4s ease-in-out infinite;
    pointer-events: none;
}

/* Inner core glow - mimics the Cognitive Canvas blob */
.light-mini-trigger::after {
    content: '';
    position: absolute;
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(0, 212, 255, 0.4) 0%,
        rgba(0, 180, 220, 0.2) 40%,
        transparent 70%
    );
    animation: light-mini-core-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

/* Mini orb canvas for Three.js (optional enhanced rendering) */
.light-mini-trigger canvas {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    z-index: 1;
}

/* Hover state - awakens the orb */
.light-mini-trigger:hover {
    transform: scale(1.1);
    background: radial-gradient(ellipse at 30% 30%,
        rgba(100, 120, 140, 0.95) 0%,
        rgba(70, 85, 100, 0.9) 30%,
        rgba(50, 60, 75, 0.85) 60%,
        rgba(40, 48, 60, 0.8) 100%
    );
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 
        0 0 20px rgba(0, 212, 255, 0.35),
        0 0 40px rgba(0, 212, 255, 0.2),
        inset 0 0 12px rgba(0, 212, 255, 0.2),
        inset 2px 2px 6px rgba(255, 255, 255, 0.08);
}

.light-mini-trigger:hover::after {
    background: radial-gradient(ellipse at center,
        rgba(0, 212, 255, 0.6) 0%,
        rgba(0, 200, 240, 0.3) 40%,
        transparent 70%
    );
}

.light-mini-trigger:active {
    transform: scale(1.05);
}

/* Organic movement animation */
@keyframes light-mini-organic {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: rotate(90deg) scale(1.02);
        opacity: 0.9;
    }
    50% {
        transform: rotate(180deg) scale(0.98);
        opacity: 0.8;
    }
    75% {
        transform: rotate(270deg) scale(1.01);
        opacity: 0.85;
    }
}

@keyframes light-mini-core-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Listening state - turquoise/green glow */
.light-mini-trigger.listening {
    background: radial-gradient(ellipse at 30% 30%,
        rgba(0, 180, 150, 0.9) 0%,
        rgba(0, 140, 120, 0.85) 30%,
        rgba(0, 100, 90, 0.8) 60%,
        rgba(40, 80, 75, 0.75) 100%
    );
    border-color: rgba(0, 255, 204, 0.5);
    box-shadow: 
        0 0 20px rgba(0, 255, 204, 0.4),
        0 0 40px rgba(0, 255, 204, 0.2),
        inset 0 0 12px rgba(0, 255, 204, 0.2);
}

.light-mini-trigger.listening::after {
    background: radial-gradient(ellipse at center,
        rgba(0, 255, 204, 0.6) 0%,
        rgba(0, 220, 180, 0.3) 40%,
        transparent 70%
    );
}

/* Active/Speaking state - cyan blue glow */
.light-mini-trigger.active {
    background: radial-gradient(ellipse at 30% 30%,
        rgba(0, 160, 200, 0.9) 0%,
        rgba(0, 120, 180, 0.85) 30%,
        rgba(0, 90, 150, 0.8) 60%,
        rgba(30, 70, 120, 0.75) 100%
    );
    border-color: rgba(0, 212, 255, 0.6);
    box-shadow: 
        0 0 25px rgba(0, 212, 255, 0.5),
        0 0 50px rgba(0, 212, 255, 0.25),
        inset 0 0 15px rgba(0, 212, 255, 0.25);
    animation: light-mini-speaking 0.8s ease-in-out infinite;
}

.light-mini-trigger.active::after {
    background: radial-gradient(ellipse at center,
        rgba(0, 212, 255, 0.7) 0%,
        rgba(0, 180, 240, 0.4) 40%,
        transparent 70%
    );
}

@keyframes light-mini-speaking {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

/* Hide trigger when overlay is open */
.light-mini-trigger.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
}


/* ===================================================================
   HEADER INTEGRATION STYLES
   Position the mini orb correctly in different app headers
   =================================================================== */

/* Default positioning in header actions */
.header-actions .light-mini-trigger,
.headbar-right .light-mini-trigger,
.nav-actions .light-mini-trigger,
.header-right .light-mini-trigger {
    margin-left: 8px;
}

/* Search page desktop header */
.desktop-main-header .light-mini-trigger {
    margin-right: 12px;
    order: -1; /* Place before other items */
}

/* Search page mobile header */
.mobile-main-header .light-mini-trigger {
    margin-right: 8px;
    order: -1;
}

/* Vector Labs header specific */
.app-header .header-actions .light-mini-trigger {
    margin-left: 10px;
}

/* Blueprint header specific */
#blueprint-header .header-nav .light-mini-trigger {
    margin-left: 12px;
}

/* Team App - no special positioning needed, uses header-actions */

/* Forge Builder header */
.forge-header .header-right .light-mini-trigger {
    margin-left: 8px;
}

/* Community header */
.community-header .header-actions .light-mini-trigger {
    margin-left: 8px;
}


/* ===================================================================
   LIGHT OVERLAY - FULL COGNITIVE CANVAS
   =================================================================== */

.light-overlay *,
.light-overlay *::before,
.light-overlay *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.light-overlay {
    --light-primary: rgba(100, 180, 255, 1);
    --light-secondary: rgba(150, 200, 255, 1);
    --light-glow: rgba(100, 180, 255, 0.3);
    --light-bg-dark: rgba(8, 8, 15, 0.98);
    --light-bg-panel: rgba(15, 15, 25, 0.95);
}

.light-overlay,
#light-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: var(--light-bg-dark);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Aurora background effect */
.light-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(100, 180, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(150, 100, 255, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(100, 255, 180, 0.04) 0%, transparent 60%);
    animation: light-aurora-shift 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes light-aurora-shift {
    0%, 100% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
        opacity: 0.8;
    }
    33% {
        background-position: 30% 70%, 70% 30%, 50% 50%;
        opacity: 1;
    }
    66% {
        background-position: 70% 30%, 30% 70%, 50% 50%;
        opacity: 0.9;
    }
}

/* Visibility states */
.light-overlay.visible,
#light-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.light-overlay.hidden,
#light-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Main container */
.light-overlay-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transform: scale(0.98) translateY(10px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.light-overlay.visible .light-overlay-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Close button */
.light-overlay-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.light-overlay-close:hover {
    background: rgba(255, 82, 82, 0.15);
    border-color: rgba(255, 82, 82, 0.3);
    color: rgba(255, 100, 100, 1);
    box-shadow: 0 0 20px rgba(255, 82, 82, 0.2);
}

/* Embedded iframe container */
.light-overlay-frame-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.light-overlay-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
}

/* Loading state */
.light-overlay-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--light-bg-dark);
    z-index: 10;
    transition: opacity 0.5s ease;
}

.light-overlay-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.light-overlay-loading-orb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 30% 30%,
        rgba(90, 100, 115, 0.95) 0%,
        rgba(60, 68, 80, 0.9) 30%,
        rgba(45, 52, 62, 0.85) 60%,
        rgba(35, 40, 50, 0.8) 100%
    );
    border: 1px solid rgba(0, 212, 255, 0.2);
    box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.3),
        0 0 60px rgba(0, 212, 255, 0.15),
        inset 0 0 15px rgba(0, 212, 255, 0.15);
    animation: light-loading-pulse 2s ease-in-out infinite;
    position: relative;
}

/* Inner core glow for loading orb */
.light-overlay-loading-orb::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(0, 212, 255, 0.5) 0%,
        rgba(0, 180, 220, 0.2) 50%,
        transparent 70%
    );
}

@keyframes light-loading-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.light-overlay-loading-text {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* Status indicator */
.light-overlay-status {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: rgba(15, 15, 25, 0.9);
    border: 1px solid rgba(100, 180, 255, 0.2);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.light-overlay-status.visible {
    opacity: 1;
}

.light-overlay-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(100, 255, 180, 0.8);
    animation: light-status-blink 2s ease-in-out infinite;
}

@keyframes light-status-blink {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}


/* ===================================================================
   RESPONSIVE ADJUSTMENTS
   =================================================================== */

@media (max-width: 768px) {
    .light-mini-trigger {
        width: 42px;
        height: 42px;
        top: 12px;
        right: 12px;
    }
    
    .light-overlay-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .light-mini-trigger {
        width: 38px;
        height: 38px;
        top: 10px;
        right: 10px;
    }
}


/* ===================================================================
   ANIMATION UTILITIES
   =================================================================== */

.light-fade-in {
    animation: light-fade-in 0.4s ease forwards;
}

@keyframes light-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.light-fade-out {
    animation: light-fade-out 0.3s ease forwards;
}

@keyframes light-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}


/* ===================================================================
   ACCESSIBILITY
   =================================================================== */

.light-mini-trigger:focus-visible,
.light-overlay-close:focus-visible {
    outline: 2px solid rgba(100, 180, 255, 0.8);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .light-mini-trigger,
    .light-mini-trigger::before,
    .light-mini-trigger::after,
    .light-overlay,
    .light-overlay-container,
    .light-overlay-loading-orb {
        animation: none;
        transition-duration: 0.1s;
    }
}

/* ===================================================================
   AGENT MODE - Transparent Overlay for UI Automation
   When Light enters agent mode to interact with the host app
   =================================================================== */

/* Agent mode: transparent background so user can see host app */
/* CRITICAL: pointer-events: none allows clicks to pass through to host app */
.light-overlay.agent-mode,
#light-overlay.agent-mode {
    background: transparent;
    pointer-events: none;
    transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide the aurora effect in agent mode */
.light-overlay.agent-mode::before {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-out;
}

/* Make container non-blocking for clicks outside Light */
.light-overlay.agent-mode .light-overlay-container {
    pointer-events: none;
}

/* But keep the iframe clickable */
.light-overlay.agent-mode .light-overlay-frame-container {
    pointer-events: auto;
    /* Light's orb area - compact to the corner during agent mode */
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: visible;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hide close button in agent mode - user can't close while automation is running */
.light-overlay.agent-mode .light-overlay-close {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Agent mode exit button - top left corner */
.agent-mode-exit-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100002;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(0, 212, 255, 0.6);
    background: rgba(10, 15, 25, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8) translateX(-20px);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 212, 255, 0.2);
}

.agent-mode-exit-btn:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.9);
    transform: scale(1.05);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 212, 255, 0.35);
}

.agent-mode-exit-btn:active {
    transform: scale(0.95);
}

/* Arrow icon pointing left (back) */
.agent-mode-exit-btn::before {
    content: '';
    width: 12px;
    height: 12px;
    border-left: 2.5px solid rgba(0, 212, 255, 0.9);
    border-bottom: 2.5px solid rgba(0, 212, 255, 0.9);
    transform: rotate(45deg) translateX(2px);
    transition: border-color 0.3s ease;
}

.agent-mode-exit-btn:hover::before {
    border-color: #00d4ff;
}

/* Show exit button when in agent mode */
.light-overlay.agent-mode ~ .agent-mode-exit-btn,
.agent-mode-exit-btn.visible {
    opacity: 1;
    transform: scale(1) translateX(0);
    pointer-events: auto;
}

/* Tooltip on hover */
.agent-mode-exit-btn::after {
    content: 'Return to Light';
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: rgba(10, 15, 25, 0.95);
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 8px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.agent-mode-exit-btn:hover::after {
    opacity: 1;
}

/* Compact iframe to show just Light's orb in corner */
.light-overlay.agent-mode .light-overlay-frame {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(0, 212, 255, 0.3),
        inset 0 0 20px rgba(0, 212, 255, 0.1);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Agent mode entrance animation */
@keyframes agent-mode-enter {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.2);
        opacity: 0.95;
    }
}

/* Agent mode exit animation - cinematic return */
@keyframes agent-mode-exit {
    0% {
        transform: scale(0.2);
        opacity: 0.95;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Pulsing border while executing */
.light-overlay.agent-mode.executing .light-overlay-frame {
    animation: agent-pulse-border 1.5s ease-in-out infinite;
}

@keyframes agent-pulse-border {
    0%, 100% {
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.4),
            0 0 40px rgba(0, 212, 255, 0.3),
            inset 0 0 20px rgba(0, 212, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 8px 40px rgba(0, 0, 0, 0.5),
            0 0 60px rgba(0, 212, 255, 0.5),
            inset 0 0 30px rgba(0, 212, 255, 0.2);
    }
}

/* Success state when automation completes */
.light-overlay.agent-mode.completed .light-overlay-frame {
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(0, 255, 180, 0.4),
        inset 0 0 25px rgba(0, 255, 180, 0.15);
}

/* ===================================================================
   AGENT MODE - Floating Control Bar
   Mute/End buttons moved to bottom center of screen during agent mode
   =================================================================== */

.agent-mode-controls {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    z-index: 100003;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(10, 10, 18, 0.85);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 212, 255, 0.15);
}

.agent-mode-controls.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Control buttons in agent mode bar */
.agent-mode-controls .agent-ctrl-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.agent-mode-controls .agent-ctrl-btn i {
    font-size: 18px;
}

.agent-mode-controls .agent-ctrl-btn .btn-label {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.7;
}

.agent-mode-controls .agent-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.5);
    color: #fff;
}

.agent-mode-controls .agent-ctrl-btn:active {
    transform: scale(0.95);
}

/* Mic button active state */
.agent-mode-controls .agent-mic-btn.active {
    background: linear-gradient(135deg, #00d4ff, #7b68ee);
    border-color: transparent;
    color: white;
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.5);
}

/* Mic button muted state */
.agent-mode-controls .agent-mic-btn.muted {
    background: rgba(255, 100, 100, 0.2);
    border-color: rgba(255, 100, 100, 0.4);
    color: #ff6464;
}

/* End button */
.agent-mode-controls .agent-end-btn {
    background: rgba(255, 80, 80, 0.15);
    border-color: rgba(255, 80, 80, 0.3);
    color: #ff6464;
}

.agent-mode-controls .agent-end-btn:hover {
    background: rgba(255, 80, 80, 0.3);
    border-color: rgba(255, 80, 80, 0.5);
    color: #ff8080;
}