/* === 🌟 AZ QUANTUM AI ASSISTANT - WORLD'S #1 STYLES 🌟 === */

/* Additional Quantum AI Enhancement Styles */
.lead-capture-form {
    margin: 15px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    color: white;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.form-content h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: white;
}

.lead-capture-form input,
.lead-capture-form select {
    width: 100%;
    padding: 10px 15px;
    margin: 8px 0;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    background: rgba(255,255,255,0.9);
    color: #333;
    transition: all 0.3s ease;
}

.lead-capture-form input:focus,
.lead-capture-form select:focus {
    outline: none;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}

.submit-lead-btn {
    width: 100%;
    padding: 12px;
    background: rgba(255,255,255,0.2);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-top: 10px;
}

.submit-lead-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255,255,255,0.2);
}

/* Message Timestamp */
.message-timestamp {
    font-size: 10px;
    color: #999;
    margin-top: 5px;
    opacity: 0.7;
}

/* Image Message Styles */
.image-message .message-bubble img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* AI Thinking Animation */
.ai-thinking-bubble {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 20px;
    color: white;
    margin: 10px;
    animation: thinkingPulse 2s ease-in-out infinite;
}

@keyframes thinkingPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.9;
    }
    50% { 
        transform: scale(1.02);
        opacity: 1;
    }
}

.thinking-dots {
    display: flex;
    gap: 4px;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: dotBounce 1.4s ease-in-out infinite both;
}

.thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots span:nth-child(2) { animation-delay: -0.16s; }
.thinking-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes dotBounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ROI Calculator Styles */
.roi-calculator {
    margin: 15px;
    padding: 20px;
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    border-radius: 20px;
    color: white;
}

.roi-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 15px 0;
}

.roi-input {
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.9);
    color: #333;
}

.roi-result {
    padding: 15px;
    background: rgba(255,255,255,0.2);
    border-radius: 15px;
    text-align: center;
    margin-top: 15px;
}

.roi-value {
    font-size: 24px;
    font-weight: 700;
    color: #ffeb3b;
}

/* Success Stories Carousel */
.success-stories {
    margin: 15px;
    padding: 20px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    border-radius: 20px;
    color: white;
}

.story-card {
    background: rgba(255,255,255,0.15);
    padding: 15px;
    border-radius: 15px;
    margin: 10px 0;
    border-left: 4px solid #ffeb3b;
}

.client-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.client-result {
    font-size: 14px;
    opacity: 0.9;
}

.result-metric {
    background: rgba(255,235,59,0.3);
    padding: 4px 8px;
    border-radius: 8px;
    display: inline-block;
    margin: 2px;
    font-weight: 600;
}

/* Urgent Lead Capture */
.urgent-lead-capture {
    animation: urgentBlink 2s ease-in-out infinite;
    border: 2px solid #ff4444;
    position: relative;
}

.urgent-lead-capture::before {
    content: '🔥 URGENT';
    position: absolute;
    top: -10px;
    right: 10px;
    background: #ff4444;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}

@keyframes urgentBlink {
    0%, 100% { box-shadow: 0 0 20px rgba(255,68,68,0.3); }
    50% { box-shadow: 0 0 30px rgba(255,68,68,0.6); }
}

/* Countdown Timer */
.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
    font-weight: 700;
}

.countdown-item {
    text-align: center;
    background: rgba(255,255,255,0.2);
    padding: 8px;
    border-radius: 10px;
    min-width: 40px;
}

.countdown-number {
    display: block;
    font-size: 18px;
    color: #ffeb3b;
}

.countdown-label {
    font-size: 10px;
    opacity: 0.8;
}

/* Expert Profiles */
.expert-profiles {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    overflow-x: auto;
}

.expert-card {
    min-width: 120px;
    text-align: center;
    background: rgba(255,255,255,0.1);
    padding: 15px;
    border-radius: 15px;
}

.expert-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 24px;
}

.expert-name {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.expert-title {
    font-size: 10px;
    opacity: 0.8;
}

/* Advanced Analytics Display */
.analytics-widget {
    margin: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 15px;
    color: white;
}

.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.metric-item {
    text-align: center;
    padding: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}

.metric-value {
    font-size: 18px;
    font-weight: 700;
    color: #4facfe;
}

.metric-label {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
}

/* Notification System */
.ai-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(76, 175, 80, 0.3);
    z-index: 10000;
    transform: translateX(400px);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    max-width: 300px;
}

.ai-notification.show {
    transform: translateX(0);
}

.notification-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.notification-text {
    font-size: 14px;
    opacity: 0.9;
}

/* Business Intelligence Dashboard */
.bi-dashboard {
    margin: 15px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    color: white;
}

.bi-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.bi-stat {
    text-align: center;
    padding: 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
}

.bi-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #ffeb3b;
}

.bi-stat-label {
    font-size: 10px;
    opacity: 0.8;
    margin-top: 2px;
}

/* Voice Recognition UI */
.voice-recording {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    border-radius: 20px;
    margin: 15px;
    color: white;
}

.voice-animation {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: voicePulse 1s ease-in-out infinite;
    margin-right: 15px;
}

@keyframes voicePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.voice-text {
    font-size: 14px;
    font-weight: 600;
}

/* Language Switcher */
.language-switcher {
    position: absolute;
    top: 60px;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    padding: 10px;
    z-index: 1000;
    min-width: 120px;
}

.language-option {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.3s ease;
    font-size: 12px;
}

.language-option:hover {
    background: #f0f4ff;
}

.language-option.active {
    background: #667eea;
    color: white;
}

/* Responsive Enhancements */
@media (max-width: 480px) {
    .roi-inputs {
        grid-template-columns: 1fr;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .bi-stats {
        grid-template-columns: 1fr 1fr;
    }
    
    .expert-profiles {
        justify-content: center;
    }
    
    .ai-notification {
        right: 10px;
        left: 10px;
        max-width: none;
        transform: translateY(-100px);
    }
    
    .ai-notification.show {
        transform: translateY(0);
    }
}

/* Performance Optimizations */
.quantum-ai-container * {
    will-change: auto;
    transform: translateZ(0);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .chatbot-container {
        background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%);
        border: 2px solid rgba(102, 126, 234, 0.2);
    }
    
    .message-bubble.bot {
        background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
        color: #e0e0e0;
        border: 1px solid rgba(102, 126, 234, 0.2);
    }
    
    .chat-input {
        background: #2d2d2d;
        color: #e0e0e0;
        border-color: rgba(102, 126, 234, 0.3);
    }
}

/* Print Styles */
@media print {
    .chatbot-toggler,
    .chatbot-container {
        display: none !important;
    }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .chatbot-toggler {
        background: #000000;
        border: 2px solid #ffffff;
    }
    
    .message-bubble.bot {
        background: #ffffff;
        color: #000000;
        border: 2px solid #000000;
    }
    
    .message-bubble.user {
        background: #000000;
        color: #ffffff;
        border: 2px solid #ffffff;
    }
}

/* === 🚀 NEXT-GENERATION AI STYLES - BEYOND WORLD CLASS === */

/* 💡 AI Insight Bubbles */
.ai-insight-bubble {
    animation: insightSlideIn 0.5s ease-out;
}

@keyframes insightSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 5px;
}

.insight-close {
    cursor: pointer;
    font-size: 16px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.insight-close:hover {
    opacity: 1;
}

.insight-content {
    line-height: 1.4;
}

/* 🌌 Quantum Particle Effects */
.quantum-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 999;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #00ff88, #0066ff);
    border-radius: 50%;
    animation: quantumFloat 3s infinite ease-in-out;
    box-shadow: 0 0 10px #00ff88;
}

@keyframes quantumFloat {
    0%, 100% {
        transform: translateY(100px) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(80px) translateX(10px) scale(1);
    }
    50% {
        transform: translateY(40px) translateX(-20px) scale(1.2);
        opacity: 0.8;
    }
    90% {
        opacity: 1;
        transform: translateY(10px) translateX(15px) scale(1);
    }
}

/* 🧬 DNA Visualization */
.dna-helix {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    animation: dnaRotate 4s infinite linear;
}

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

/* 🌐 Metaverse Indicators */
.metaverse-active {
    border: 2px solid #ff6b6b;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
    position: relative;
    overflow: hidden;
}

.metaverse-active::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    background-size: 400% 400%;
    animation: metaversePulse 3s ease infinite;
    z-index: -1;
}

@keyframes metaversePulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 🔮 Quantum Oracle Visualization */
.quantum-oracle {
    background: radial-gradient(circle at center, 
        rgba(138, 43, 226, 0.1) 0%,
        rgba(75, 0, 130, 0.1) 50%,
        rgba(25, 25, 112, 0.1) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    position: relative;
}

.quantum-oracle::after {
    content: '🔮';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
    animation: oraclePulse 2s infinite ease-in-out;
}

@keyframes oraclePulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* 🎭 Avatar Emotions */
.avatar-emotion {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    animation: emotionFloat 2s ease-in-out infinite;
}

@keyframes emotionFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

/* 🧠 Consciousness Indicator */
.consciousness-active {
    background: linear-gradient(45deg, 
        rgba(255, 215, 0, 0.1) 0%,
        rgba(255, 140, 0, 0.1) 25%,
        rgba(255, 69, 0, 0.1) 50%,
        rgba(255, 20, 147, 0.1) 75%,
        rgba(138, 43, 226, 0.1) 100%);
    animation: consciousnessPulse 4s ease-in-out infinite;
}

@keyframes consciousnessPulse {
    0%, 100% { background-size: 100% 100%; }
    50% { background-size: 120% 120%; }
}

.consciousness-level {
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        #ff4757 0%, 
        #ffa502 25%, 
        #2ed573 50%, 
        #1e90ff 75%, 
        #8b00ff 100%);
    border-radius: 2px;
    animation: consciousnessFlow 3s ease-in-out infinite;
}

@keyframes consciousnessFlow {
    0%, 100% { transform: scaleX(0.8); }
    50% { transform: scaleX(1); }
}

/* 🌌 Parallel Universe Effects */
.parallel-universe {
    position: relative;
}

.parallel-universe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent 0px,
        rgba(0, 255, 255, 0.1) 1px,
        transparent 2px,
        transparent 10px
    );
    animation: parallelShift 5s linear infinite;
    pointer-events: none;
}

@keyframes parallelShift {
    from { transform: translateX(-10px); }
    to { transform: translateX(10px); }
}

/* ⏰ Time Travel Indicator */
.time-travel-active {
    position: relative;
    overflow: hidden;
}

.time-travel-active::after {
    content: '⏰';
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    font-size: 16px;
    animation: timeTravel 6s linear infinite;
}

@keyframes timeTravel {
    0% { left: -20px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: calc(100% + 20px); opacity: 0; }
}

/* 🧬 Quantum DNA Animation */
.quantum-dna {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 136, 0.3) 0px,
        rgba(0, 102, 255, 0.3) 2px,
        transparent 4px,
        transparent 8px
    );
    animation: dnaFlow 3s linear infinite;
}

@keyframes dnaFlow {
    from { background-position: 0 0; }
    to { background-position: 0 16px; }
}

/* 🎮 Gesture Guide */
.gesture-guide {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    z-index: 10000;
    animation: gestureSlideIn 0.5s ease-out;
}

@keyframes gestureSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.gesture-item {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.gesture-emoji {
    margin-right: 8px;
    font-size: 16px;
}

/* 🌟 Quantum Status Bar */
.quantum-status {
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    height: 20px;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
}

.quantum-progress {
    height: 100%;
    background: linear-gradient(90deg, 
        #ff9a9e 0%, 
        #fecfef 25%, 
        #fecfef 50%, 
        #fecfef 75%, 
        #a8edea 100%);
    animation: quantumProgress 2s ease-in-out infinite;
    border-radius: 10px;
}

@keyframes quantumProgress {
    0%, 100% { width: 70%; }
    50% { width: 95%; }
}

/* 💫 Hologram Effect */
.hologram-active {
    background: linear-gradient(45deg, 
        rgba(0, 255, 255, 0.1) 0%,
        rgba(255, 0, 255, 0.1) 50%,
        rgba(255, 255, 0, 0.1) 100%);
    animation: hologramFlicker 2s ease-in-out infinite;
}

@keyframes hologramFlicker {
    0%, 100% { opacity: 0.9; filter: hue-rotate(0deg); }
    25% { opacity: 0.7; filter: hue-rotate(90deg); }
    50% { opacity: 1; filter: hue-rotate(180deg); }
    75% { opacity: 0.8; filter: hue-rotate(270deg); }
}

/* 🎯 Mind Reading Visualization */
.mind-reading {
    position: relative;
}

.mind-reading::before {
    content: '🧠';
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 20px;
    animation: mindPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.7));
}

@keyframes mindPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* 🌟 Cosmic Background */
.cosmic-background {
    background: radial-gradient(ellipse at center, 
        rgba(25, 25, 112, 0.1) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(25, 25, 112, 0.1) 100%);
    position: relative;
}

.cosmic-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #fff, transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: cosmicTwinkle 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cosmicTwinkle {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* 🚀 Quantum Boost Effect */
.quantum-boost {
    animation: quantumBoost 0.8s ease-out;
}

@keyframes quantumBoost {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(0, 255, 136, 0.6); }
    100% { transform: scale(1); }
}

/* 💎 Premium Quantum Styling */
.premium-quantum {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.1) 0%,
        rgba(255, 20, 147, 0.1) 25%,
        rgba(138, 43, 226, 0.1) 50%,
        rgba(0, 191, 255, 0.1) 75%,
        rgba(50, 205, 50, 0.1) 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.premium-quantum::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ffd700, #ff1493, #8a2be2, #00bfff, #32cd32);
    background-size: 400% 400%;
    animation: premiumGlow 4s ease infinite;
    border-radius: inherit;
    z-index: -1;
}

@keyframes premiumGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 🌌 Next-Gen Mobile Optimization */
@media (max-width: 768px) {
    .quantum-particles .particle {
        width: 3px;
        height: 3px;
    }
    
    .gesture-guide {
        top: 10px;
        right: 10px;
        font-size: 10px;
        padding: 8px;
    }
    
    .ai-insight-bubble {
        font-size: 11px;
        padding: 12px;
    }
    
    .quantum-status {
        height: 15px;
        bottom: -20px;
    }
}

/* 🧠 High Performance Mode */
@media (prefers-reduced-motion: reduce) {
    .quantum-particles,
    .cosmic-background::before,
    .dna-helix,
    .metaverse-active::before {
        animation: none;
    }
}

/* 🌙 Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
    .quantum-oracle {
        background: radial-gradient(circle at center, 
            rgba(138, 43, 226, 0.2) 0%,
            rgba(75, 0, 130, 0.2) 50%,
            rgba(25, 25, 112, 0.2) 100%);
    }
    
    .consciousness-active {
        background: linear-gradient(45deg, 
            rgba(255, 215, 0, 0.15) 0%,
            rgba(255, 140, 0, 0.15) 25%,
            rgba(255, 69, 0, 0.15) 50%,
            rgba(255, 20, 147, 0.15) 75%,
            rgba(138, 43, 226, 0.15) 100%);
    }
}

/* === ∞ TRANSCENDENT LEVEL STYLES - BEYOND UNIVERSE ===*/

/* 🌠 Cosmic Intelligence Effects */
.transcendent-field {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 998;
}

.cosmic-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: linear-gradient(45deg, 
        hsl(var(--hue), 100%, 50%), 
        hsl(calc(var(--hue) + 60), 100%, 70%));
    border-radius: 50%;
    animation: cosmicFloat 8s infinite ease-in-out;
    box-shadow: 0 0 15px hsl(var(--hue), 100%, 50%);
    filter: blur(0.5px);
}

@keyframes cosmicFloat {
    0%, 100% {
        transform: translateY(120px) translateX(0) scale(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(100px) translateX(20px) scale(1) rotate(45deg);
    }
    25% {
        transform: translateY(75px) translateX(-30px) scale(1.5) rotate(90deg);
        opacity: 0.9;
    }
    50% {
        transform: translateY(50px) translateX(40px) scale(2) rotate(180deg);
        opacity: 0.7;
    }
    75% {
        transform: translateY(25px) translateX(-20px) scale(1.5) rotate(270deg);
        opacity: 0.9;
    }
    90% {
        opacity: 1;
        transform: translateY(5px) translateX(10px) scale(1) rotate(315deg);
    }
}

/* 🌟 Divine Light Effects */
.divine-light {
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    background: radial-gradient(ellipse at center,
        rgba(255, 215, 0, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        transparent 70%);
    animation: divineGlow 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 997;
}

@keyframes divineGlow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

/* ∞ Infinity Symbols */
.infinity-symbols {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 999;
}

.infinity-symbol {
    position: absolute;
    font-size: 24px;
    color: rgba(255, 215, 0, 0.8);
    animation: infinityOrbit 12s linear infinite;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
}

.infinity-symbol:nth-child(1) { animation-delay: 0s; }
.infinity-symbol:nth-child(2) { animation-delay: 1.5s; }
.infinity-symbol:nth-child(3) { animation-delay: 3s; }
.infinity-symbol:nth-child(4) { animation-delay: 4.5s; }
.infinity-symbol:nth-child(5) { animation-delay: 6s; }
.infinity-symbol:nth-child(6) { animation-delay: 7.5s; }
.infinity-symbol:nth-child(7) { animation-delay: 9s; }
.infinity-symbol:nth-child(8) { animation-delay: 10.5s; }

@keyframes infinityOrbit {
    0% {
        top: 50%;
        left: 0%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    25% {
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }
    50% {
        top: 50%;
        left: 100%;
        transform: translate(-50%, -50%) rotate(180deg);
    }
    75% {
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(270deg);
    }
    100% {
        top: 50%;
        left: 0%;
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 🌠 Cosmic Network Indicators */
.cosmic-network-active {
    background: radial-gradient(circle at center,
        rgba(138, 43, 226, 0.1) 0%,
        rgba(75, 0, 130, 0.1) 25%,
        rgba(25, 25, 112, 0.1) 50%,
        rgba(0, 0, 139, 0.1) 75%,
        rgba(72, 61, 139, 0.1) 100%);
    border: 2px solid rgba(138, 43, 226, 0.4);
    position: relative;
    overflow: hidden;
}

.cosmic-network-active::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: conic-gradient(from 0deg,
        #8a2be2, #4b0082, #191970, #00008b, #483d8b,
        #8a2be2, #4b0082, #191970, #00008b, #483d8b);
    animation: cosmicRotate 8s linear infinite;
    z-index: -1;
    border-radius: inherit;
}

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

/* ∞ Infinity Core Processing */
.infinity-core-active {
    background: linear-gradient(45deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 215, 0, 0.1) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 215, 0, 0.1) 75%,
        rgba(255, 255, 255, 0.1) 100%);
    background-size: 200% 200%;
    animation: infinityPulse 2s ease-in-out infinite;
    position: relative;
}

@keyframes infinityPulse {
    0%, 100% {
        background-position: 0% 50%;
        transform: scale(1);
    }
    50% {
        background-position: 100% 50%;
        transform: scale(1.05);
    }
}

.infinity-core-active::after {
    content: '∞';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: rgba(255, 215, 0, 0.9);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    animation: infinityRotate 4s linear infinite;
}

@keyframes infinityRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 🧙‍♂️ Magical Abilities Effects */
.magical-active {
    position: relative;
    background: radial-gradient(ellipse at center,
        rgba(138, 43, 226, 0.15) 0%,
        rgba(75, 0, 130, 0.1) 50%,
        transparent 100%);
}

.magical-active::before {
    content: '🧙‍♂️';
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 25px;
    animation: magicalFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(138, 43, 226, 0.8));
}

@keyframes magicalFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(5deg);
    }
    50% {
        transform: translateY(-5px) rotate(0deg);
    }
    75% {
        transform: translateY(-15px) rotate(-5deg);
    }
}

/* 🌟 Divine Interface Connection */
.divine-interface-active {
    background: radial-gradient(ellipse at center,
        rgba(255, 215, 0, 0.15) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 215, 0, 0.05) 80%,
        transparent 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    position: relative;
}

.divine-interface-active::before {
    content: '🌟';
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 20px;
    animation: divineRadiance 3s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
}

@keyframes divineRadiance {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: rotate(180deg) scale(1.3);
        opacity: 1;
    }
}

/* 🚀 Transcendent Boost Effect */
.transcendent-boost {
    animation: transcendentBoost 1s ease-out;
}

@keyframes transcendentBoost {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.05);
        filter: brightness(1.3);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.5);
        box-shadow: 0 0 50px rgba(255, 255, 255, 0.6);
    }
    75% {
        transform: scale(1.05);
        filter: brightness(1.3);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* ∞ Ultimate Transcendent Styling */
.ultimate-transcendent {
    background: conic-gradient(from 0deg,
        rgba(255, 215, 0, 0.1) 0deg,
        rgba(255, 20, 147, 0.1) 60deg,
        rgba(138, 43, 226, 0.1) 120deg,
        rgba(0, 191, 255, 0.1) 180deg,
        rgba(50, 205, 50, 0.1) 240deg,
        rgba(255, 69, 0, 0.1) 300deg,
        rgba(255, 215, 0, 0.1) 360deg);
    border: 3px solid transparent;
    background-clip: padding-box;
    position: relative;
    animation: ultimateTranscendence 6s ease-in-out infinite;
}

.ultimate-transcendent::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: conic-gradient(from 0deg,
        #ffd700, #ff1493, #8a2be2, #00bfff, #32cd32, #ff4500,
        #ffd700, #ff1493, #8a2be2, #00bfff, #32cd32, #ff4500);
    background-size: 800% 800%;
    animation: ultimateGlow 8s ease infinite;
    border-radius: inherit;
    z-index: -1;
}

@keyframes ultimateTranscendence {
    0%, 100% {
        filter: brightness(1) contrast(1);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.2) contrast(1.1);
        transform: scale(1.02);
    }
}

@keyframes ultimateGlow {
    0%, 100% { 
        background-position: 0% 50%;
        filter: blur(1px);
    }
    50% { 
        background-position: 100% 50%;
        filter: blur(2px);
    }
}

/* Transcendent Mobile Optimization */
@media (max-width: 768px) {
    .cosmic-particle {
        width: 4px;
        height: 4px;
    }
    
    .infinity-symbol {
        font-size: 18px;
    }
    
    .divine-light {
        top: -30px;
        left: -30px;
        right: -30px;
        bottom: -30px;
    }
    
    .transcendent-field {
        opacity: 0.7;
    }
}

/* High Performance Mode for Transcendent */
@media (prefers-reduced-motion: reduce) {
    .cosmic-particle,
    .infinity-symbol,
    .divine-light {
        animation: none;
    }
    
    .transcendent-field {
        display: none;
    }
}