/* ================================================================
   THE ORACLE - COMPONENT STYLES
   Created by: Dakota Stewart
   Delphi Labs - AGI MODEL 7
   ================================================================ */

/* ================================================================
   THE ORACLE ULTIMATE AGI INTERFACE v5.0
   4000+ Lines of Pure Excellence
   Created by: Dakota Stewart
   ================================================================ */

/* ================================================================
   THE ORACLE ULTIMATE AGI INTERFACE v5.0
   Premium Production Interface
   Created by: Dakota Stewart
   ================================================================ */

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

/* ================================================================
   iOS TOUCH FIX - Comprehensive touch handling for all buttons
   ================================================================ */

/* Base touch properties for all interactive elements */
button,
.sidebar-btn,
.action-btn,
.modal-close,
.panel-close,
.palace-close,
.dropdown-close,
.mobile-toggle,
.mobile-menu-btn,
.mobile-quick-btn,
.mobile-entity-switcher,
.mode-chip,
.toggle-switch,
.theme-btn,
.entity-option,
.game-card,
.device-card,
.integration-item,
.balance-item,
[onclick] {
    -webkit-tap-highlight-color: rgba(0, 212, 255, 0.3);
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

/* Touch active state for visual feedback */
.touch-active {
    opacity: 0.7 !important;
    transform: scale(0.97) !important;
    transition: all 0.1s ease !important;
}

/* Ensure minimum touch target size (44px Apple recommendation) */
@media (pointer: coarse) {
    button,
    .modal-close,
    .panel-close,
    .palace-close,
    .dropdown-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Fix for iOS fixed position elements */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific fixes */
    .sidebar,
    .panel,
    .modal,
    .entity-category-dropdown {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent iOS rubber-banding interfering with buttons */
    button:active,
    .sidebar-btn:active,
    .action-btn:active {
        transform: scale(0.97);
    }
}

/* PREMIUM KEYFRAME ANIMATIONS */

/* ADVANCED NEURAL VISUALIZATIONS */

/* ================================================================
   OVERDRIVE TIME WARP - Hyperspeed Visual Effect
   ================================================================ */
.overdrive-active {
    --overdrive-glow: rgba(0, 255, 255, 0.3);
}

.time-warp-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

.time-warp-overlay.active {
    animation: timeWarpFlash 1s ease-out;
}

.warp-star {
    position: absolute;
    width: 2px;
    height: 100px;
    background: linear-gradient(180deg, transparent, #00ffff, #ffffff, #00ffff, transparent);
    border-radius: 50%;
    animation: warpStarFly 0.6s linear forwards;
}

.warp-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid #00ffff;
    border-radius: 50%;
    animation: warpRingExpand 0.8s ease-out forwards;
}

.overdrive-speed-indicator {
    position: fixed;
    top: 80px;
    right: 20px;
    background: linear-gradient(135deg, rgba(0,255,255,0.2), rgba(0,100,255,0.1));
    border: 2px solid #00ffff;
    border-radius: 10px;
    padding: 10px 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: #00ffff;
    z-index: 1000;
    display: none;
    animation: speedPulse 0.5s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(0,255,255,0.5), inset 0 0 20px rgba(0,255,255,0.1);
}

.overdrive-speed-indicator.show {
    display: flex;
    align-items: center;
    gap: 10px;
}

.speed-icon {
    font-size: 1.5rem;
    animation: speedIconSpin 0.3s linear infinite;
}

/* Overdrive body effects */
body.overdrive-mode {
    --message-typing-speed: 5ms;
}

body.overdrive-mode .main-content {
    box-shadow: inset 0 0 100px rgba(0,255,255,0.1);
}

body.overdrive-mode .chat-container {
    border-color: rgba(0,255,255,0.3);
}

body.overdrive-mode #agiCoreOrb {
    filter: hue-rotate(180deg) brightness(1.3);
    animation: overdriveCoreGlow 0.5s ease-in-out infinite;
}

.warp {
    animation: warpPulse 0.6s ease-out;
}

.neural-active {
    animation: neuralFire 0.5s ease-out;
}

.cortical-spark {
    position: fixed;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(rgba(0,212,255,0.5), transparent, rgba(0,255,255,0.3), transparent);
    animation: flashArc 0.8s ease-out forwards;
    z-index: 2;
}

.quantum-spark {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #00d4ff 0%, transparent 70%);
    box-shadow: 0 0 15px #00d4ff, 0 0 30px rgba(0,212,255,0.5);
    animation: synapticPulse 0.4s ease-out forwards;
    z-index: 3;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    /* iOS Dark Mode - Pure black like iPhone */
    background: var(--ios-bg-primary, #000000);
    color: var(--text-primary, #FFFFFF);
    line-height: var(--line-height-normal);

    /* Premium font rendering - Apple quality */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ================================================================
   BACKGROUND SYSTEM - MULTI-LAYER CYBER EFFECTS
   ================================================================ */

.cyber-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.cyber-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,212,255,0.03) 2px, rgba(0,212,255,0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,212,255,0.03) 2px, rgba(0,212,255,0.03) 4px);
    background-size: 60px 60px;
    animation: gridScroll 30s linear infinite;
}

.cyber-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--red);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--red), 0 0 20px var(--red);
    animation: particleFloat 20s linear infinite;
    opacity: 0;
}

.scanline {
    position: absolute;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.4), transparent);
    animation: scanlineMove 4s linear infinite;
    box-shadow: 0 0 20px var(--red-glow);
}

.noise-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

.matrix-rain {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 1;
    z-index: 0;
    background: #000000;
}

.matrix-column {
    position: absolute;
    top: -100%;
    font-family: 'Share Tech Mono', monospace;
    font-size: 18px;
    color: var(--red);
    text-shadow: 
        0 0 5px var(--red),
        0 0 15px var(--red),
        0 0 30px var(--cyan),
        0 0 50px var(--cyan);
    writing-mode: vertical-rl;
    animation: matrixFall linear infinite;
    filter: brightness(1.3);
}

.matrix-column:nth-child(odd) {
    color: var(--cyan);
    text-shadow: 
        0 0 5px var(--cyan),
        0 0 15px var(--cyan),
        0 0 30px #00ffc8,
        0 0 50px #00ffc8;
    font-size: 16px;
}

.matrix-column:nth-child(3n) {
    color: #00ffc8;
    text-shadow: 
        0 0 8px #00ffc8,
        0 0 20px #00ffc8,
        0 0 40px var(--cyan),
        0 0 60px var(--cyan);
    font-size: 20px;
    opacity: 0.9;
}

.matrix-column:nth-child(5n) {
    color: #ffffff;
    text-shadow: 
        0 0 10px #ffffff,
        0 0 20px var(--cyan),
        0 0 40px var(--cyan),
        0 0 80px var(--red);
    font-size: 22px;
    filter: brightness(1.5);
}

/* Glowing streaks behind matrix */
.matrix-rain::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(180deg, transparent 0%, rgba(0,212,255,0.03) 50%, transparent 100%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 50px,
            rgba(0,212,255,0.02) 50px,
            rgba(0,212,255,0.02) 51px
        );
    pointer-events: none;
    animation: matrixGlow 3s ease-in-out infinite;
}

/* ================================================================
   MAIN LAYOUT
   ================================================================ */

.app-container {
    display: flex;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* ================================================================
   SIDEBAR
   ================================================================ */

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100%;
    /* iOS Dark Mode - Elevated surface */
    background: var(--ios-bg-secondary, #1C1C1E);
    border-right: 1px solid var(--ios-separator, #38383A);
    display: flex;
    flex-direction: column;
    box-shadow: none;
    z-index: 100;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ================================================================
   SIDEBAR COLLAPSE BUTTON & COLLAPSED STATE
   ================================================================ */
.sidebar-collapse-btn {
    position: fixed;
    left: calc(var(--sidebar-width) - 12px);
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 48px;
    /* iOS Style - Dark glass effect */
    background: var(--ios-bg-tertiary, #2C2C2E);
    border: 1px solid var(--ios-separator, #38383A);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 2px 0 8px rgba(0,0,0,0.3);
}

.sidebar-collapse-btn:hover {
    background: var(--ios-gray-4, #3A3A3C);
    box-shadow: 2px 0 12px rgba(0,0,0,0.4);
}

.sidebar-collapse-btn .collapse-icon {
    font-size: 0.75rem;
    color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    transition: transform 0.3s ease;
}

/* Collapsed state */
.app-container.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    width: 0;
    min-width: 0;
}

.app-container.sidebar-collapsed .sidebar-collapse-btn {
    left: 0;
    border-radius: 0 8px 8px 0;
}

.app-container.sidebar-collapsed .sidebar-collapse-btn .collapse-icon {
    transform: rotate(180deg);
}

.app-container.sidebar-collapsed .main-content {
    margin-left: 0;
}

/* ================================================================
   WELCOME OVERLAY - Shows in chat area until first message
   ================================================================ */
.welcome-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.welcome-content {
    text-align: center;
    max-width: 600px;
    padding: 40px;
    animation: welcomeFadeIn 0.6s ease-out;
}

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

.welcome-brain {
    margin-bottom: 32px;
    position: relative;
}

.welcome-brain video {
    filter: drop-shadow(0 8px 32px rgba(138, 43, 226, 0.3));
    background: transparent !important;
    background-color: transparent !important;
}

/* iOS Safari - hide video controls and black box */
.welcome-brain video::-webkit-media-controls {
    display: none !important;
    -webkit-appearance: none !important;
}

.welcome-brain video::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none !important;
}

.welcome-brain video::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none !important;
}

.welcome-brain video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
}

/* Ensure video doesn't show black poster */
.welcome-brain video[poster] {
    object-fit: contain;
}

/* Brain container video fix */
.brain-container-corporate video {
    background: transparent !important;
}

.brain-container-corporate video::-webkit-media-controls,
.brain-container-corporate video::-webkit-media-controls-panel,
.brain-container-corporate video::-webkit-media-controls-play-button,
.brain-container-corporate video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
}

.welcome-greeting {
    font-family: 'Tiempos Text', 'New York', 'New York Small', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: #d4d4d4;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.welcome-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 1.1rem;
    color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    margin: 0 0 40px 0;
}

.welcome-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
}

.welcome-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    /* iOS Style - Elevated card */
    background: var(--ios-bg-tertiary, #2C2C2E);
    border: 1px solid var(--ios-separator, #38383A);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.welcome-action-btn:hover {
    background: var(--ios-gray-4, #3A3A3C);
    border-color: var(--ios-gray-3, #48484A);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

.welcome-action-btn .action-icon {
    font-size: 1.5rem;
}

.welcome-action-btn span:last-child {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary, #FFFFFF);
}

/* Hide welcome when chat has messages */
.app-container.has-messages .welcome-overlay {
    display: none !important;
}

/* Mobile adjustments for welcome */
@media (max-width: 768px) {
    .sidebar-collapse-btn {
        display: none;
    }

    .welcome-overlay {
        display: flex;
    }

    .welcome-greeting {
        font-size: 1.5rem;
    }

    .welcome-quick-actions {
        grid-template-columns: 1fr;
    }

    /* CRITICAL: Remove brain container backgrounds on mobile */
    .brain-container-corporate {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .welcome-brain,
    .welcome-brain video {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* CRITICAL: Ensure all sidebar elements are clickable */
    .sidebar-btn,
    .mobile-entity-switcher,
    .sidebar-buttons button {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
    }
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}

.sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    width: 2px;
    height: 100%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
}

/* Sidebar Header */
.sidebar-header {
    padding: 25px 20px;
    border-bottom: 1px solid var(--ios-separator, #38383A);
    /* iOS Style - Slightly elevated */
    background: var(--ios-bg-secondary, #1C1C1E);
    text-align: center;
    flex-shrink: 0;
    position: relative;
}

/* Subtle glow at top of sidebar */
.sidebar-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 10px var(--cyan);
}

.brain-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
}

/* Mystical ambient glow */
.brain-container::before {
    content: '';
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: 
        radial-gradient(circle at center, 
            rgba(147, 51, 234, 0.5) 0%, 
            rgba(139, 92, 246, 0.3) 30%,
            rgba(0, 212, 255, 0.2) 50%, 
            transparent 70%);
    animation: oracleAmbientPulse 4s ease-in-out infinite;
    filter: blur(15px);
}

/* Floating energy particles */
.brain-container::after {
    content: '✦ ✧ ⋆ ✦ ✧';
    position: absolute;
    inset: -50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    letter-spacing: 20px;
    color: rgba(255, 200, 100, 0.8);
    text-shadow: 0 0 10px rgba(255, 150, 50, 0.8);
    animation: oracleParticlesSpin 15s linear infinite;
    pointer-events: none;
}

.brain-core {
    position: absolute;
    inset: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Crystal ball glass effect */
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.1) 0%, transparent 30%),
        radial-gradient(circle at center, 
            rgba(200, 150, 255, 0.3) 0%,
            rgba(139, 92, 246, 0.4) 20%,
            rgba(88, 28, 135, 0.6) 40%,
            rgba(30, 10, 60, 0.9) 70%,
            rgba(10, 5, 30, 1) 100%);
    border: 2px solid rgba(200, 150, 255, 0.4);
    box-shadow: 
        0 0 30px rgba(147, 51, 234, 0.6),
        0 0 60px rgba(139, 92, 246, 0.4),
        0 0 100px rgba(0, 212, 255, 0.3),
        inset 0 0 40px rgba(147, 51, 234, 0.5),
        inset 0 -20px 40px rgba(255, 100, 50, 0.2),
        inset 0 20px 30px rgba(0, 212, 255, 0.2);
    animation: oracleOrbFloat 4s ease-in-out infinite;
    z-index: 5;
    overflow: hidden;
}

/* Inner lightning energy */
.brain-core::before {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: 
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, transparent 20%),
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(200, 100, 255, 0.6) 30deg,
            transparent 60deg,
            rgba(255, 150, 50, 0.5) 120deg,
            transparent 150deg,
            rgba(0, 212, 255, 0.6) 210deg,
            transparent 240deg,
            rgba(147, 51, 234, 0.6) 300deg,
            transparent 330deg
        );
    animation: oracleInnerEnergy 3s linear infinite;
    filter: blur(3px);
}

/* Bright core center */
.brain-core::after {
    content: '🧠';
    position: absolute;
    font-size: 2rem;
    text-shadow: 
        0 0 10px rgba(255,255,255,0.9),
        0 0 20px rgba(200, 150, 255, 0.8),
        0 0 40px rgba(147, 51, 234, 0.6);
    animation: oracleEyePulse 2s ease-in-out infinite;
    z-index: 10;
}

.brain-ring {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: oracleRingSpin 4s linear infinite;
}

/* Outer mystical ring - purple */
.brain-ring:nth-child(1) {
    inset: -5px;
    border-top-color: rgba(147, 51, 234, 0.8);
    border-right-color: rgba(255, 150, 50, 0.4);
    box-shadow: 
        0 0 15px rgba(147, 51, 234, 0.6),
        0 0 30px rgba(147, 51, 234, 0.3);
    animation-duration: 4s;
}

.brain-ring:nth-child(2) {
    inset: 8px;
    border-top-color: rgba(139, 92, 246, 0.7);
    border-left-color: rgba(0, 212, 255, 0.4);
    animation-duration: 3s;
    animation-direction: reverse;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.brain-ring:nth-child(3) {
    inset: 20px;
    border-top-color: rgba(0, 212, 255, 0.6);
    border-bottom-color: rgba(255, 150, 50, 0.3);
    animation-duration: 2.5s;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

.brain-ring:nth-child(4) {
    inset: 32px;
    border-top-color: rgba(255, 180, 100, 0.6);
    border-right-color: rgba(147, 51, 234, 0.4);
    animation-duration: 2s;
    animation-direction: reverse;
    box-shadow: 0 0 10px rgba(255, 180, 100, 0.4);
}

/* Floating wisps around the orb */
.brain-ring::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 200, 150, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 150, 50, 0.8), 0 0 20px rgba(255, 100, 50, 0.5);
    animation: wispFloat 3s ease-in-out infinite;
}

.brain-ring:nth-child(1)::before { top: 10%; left: 50%; animation-delay: 0s; }
.brain-ring:nth-child(2)::before { top: 50%; right: 5%; animation-delay: 0.5s; }
.brain-ring:nth-child(3)::before { bottom: 10%; left: 30%; animation-delay: 1s; }
.brain-ring:nth-child(4)::before { top: 30%; left: 5%; animation-delay: 1.5s; }

.emotion-ring {
    position: absolute;
    inset: -15px;
    border: 2px solid var(--red);
    border-radius: 50%;
    animation: emotionPulse 2s ease-out infinite;
    opacity: 0;
}

.emotion-ring:nth-child(6) { animation-delay: 0.5s; }
.emotion-ring:nth-child(7) { animation-delay: 1s; }
.emotion-ring:nth-child(8) { animation-delay: 1.5s; }

.neural-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.neural-line {
    position: absolute;
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, var(--red), transparent);
    animation: neuralPulse 2s ease-in-out infinite;
}

.sidebar-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 5px;
    background: linear-gradient(135deg, #00d4ff, #00e5ff, #00ffc8, #00e5ff, #00d4ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: logoShine 3s linear infinite;
    filter: drop-shadow(0 0 10px rgba(0,212,255,0.8)) drop-shadow(0 0 20px rgba(0,212,255,0.5));
    position: relative;
}

/* Glow behind logo text */
.sidebar-logo::after {
    content: 'THE ORACLE';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: linear-gradient(135deg, #00d4ff, #00e5ff, #00ffc8, #00e5ff, #00d4ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: blur(8px);
    opacity: 0.6;
    animation: logoShine 3s linear infinite;
    z-index: -1;
}

.version-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: var(--cyan);
    margin-top: 8px;
    letter-spacing: 3px;
    text-shadow: 0 0 15px var(--cyan-glow), 0 0 30px rgba(0,255,255,0.3);
    animation: versionGlow 2s ease-in-out infinite;
}

.power-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
    padding: 12px 20px;
    background: rgba(0,212,255,0.15);
    border: 2px solid var(--red);
    border-radius: 25px;
    animation: statusPulse 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(0,212,255,0.3), inset 0 0 20px rgba(0,212,255,0.1);
}

.power-dot {
    width: 12px;
    height: 12px;
    background: var(--red);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--red);
    animation: dotPulse 1s ease-in-out infinite;
}

.power-dot:nth-child(2) { animation-delay: 0.2s; }
.power-dot:nth-child(3) { animation-delay: 0.4s; }

.power-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--red);
    letter-spacing: 3px;
    text-shadow: 0 0 10px var(--red);
}

/* Emotion Meter */
.emotion-meter {
    padding: 15px 20px;
    background: linear-gradient(180deg, rgba(0,212,255,0.08) 0%, transparent 100%);
    border-bottom: 1px solid var(--panel-border);
    flex-shrink: 0;
}

.emotion-meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.emotion-meter-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    color: var(--red);
    letter-spacing: 2px;
}

.emotion-meter-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: var(--cyan);
    text-shadow: 0 0 10px var(--cyan-glow);
}

.emotion-bar-container {
    height: 10px;
    background: rgba(0,212,255,0.15);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

.emotion-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--red-dark), var(--red), var(--gold), var(--cyan));
    border-radius: 5px;
    transition: width 0.5s ease;
    box-shadow: 0 0 15px var(--red-glow);
    position: relative;
}

.emotion-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
    border-radius: 5px 5px 0 0;
}

.emotion-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.65rem;
    color: var(--text-tertiary);
    letter-spacing: 1px;
}

.emotion-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--panel-border);
}

.emotion-state-dot {
    width: 8px;
    height: 8px;
    background: var(--cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--cyan-glow);
    animation: stateDot 1.5s ease-in-out infinite;
}

.emotion-state span:last-child {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    color: var(--cyan);
    letter-spacing: 2px;
}

/* ================================================================
   CORPORATE/PROFESSIONAL SIDEBAR STYLES
   ================================================================ */

/* Sidebar Header — Clean corporate, compact */
.sidebar-header.corporate {
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    text-align: center;
}

.sidebar-header.corporate::before {
    display: none;
}

.brain-container-corporate {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    background: transparent;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.brain-container-corporate video {
    width: 48px !important;
    height: 48px !important;
}

.sidebar-logo.corporate {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #e0e0e0;
    -webkit-text-fill-color: #e0e0e0;
    background: none;
    animation: none;
    filter: none;
}

.sidebar-logo.corporate::after {
    display: none;
}

.version-tag.corporate {
    display: none; /* Hide "Enterprise AI Platform" */
}

.status-indicator {
    display: none; /* Hide "System Online" badge */
}

/* Corporate System Status Bar */
/* Status bar hidden — unnecessary clutter */
.system-status-bar {
    display: none;
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.status-row:last-of-type {
    margin-bottom: 10px;
}

.status-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.7rem;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-value {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    color: #22c55e;
    font-weight: 600;
}

.progress-bar-corporate {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* User Info — Clean corporate */
.user-info {
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: #3a3a3c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: none;
    box-shadow: none;
    position: relative;
}

.user-avatar::after {
    display: none;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-weight: 500;
    font-size: 0.8rem;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-status {
    font-size: 0.65rem;
    color: #888;
    display: none; /* Hide "Online" — unnecessary */
}

.user-pro-badge {
    padding: 3px 8px;
    background: rgba(102, 126, 234, 0.2);
    border-radius: 6px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    color: #667eea;
    letter-spacing: 0.5px;
}

/* Sidebar Buttons — Clean corporate, no borders */
.sidebar-buttons {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.sidebar-btn {
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #d0d0d0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
}

.sidebar-btn::before {
    display: none;
}

.sidebar-btn::after {
    display: none;
}

.sidebar-btn:hover {
    transform: none;
    background: rgba(255,255,255,0.06);
    color: #fff;
    box-shadow: none;
}

.sidebar-btn:active {
    transform: none;
    background: rgba(255,255,255,0.1);
}

.sidebar-btn.secondary {
    background: transparent;
    border: none;
    box-shadow: none;
}

.sidebar-btn.secondary:hover {
    background: rgba(255,255,255,0.06);
    border: none;
    box-shadow: none;
}

.sidebar-btn.logout {
    background: transparent;
    font-size: 0.8rem;
    padding: 10px 14px;
    border: none;
    color: #999;
}

.sidebar-btn.logout:hover {
    color: #ff6b6b;
    background: rgba(255,107,107,0.08);
}

.btn-icon {
    font-size: 1rem;
    filter: none;
    opacity: 0.7;
}

/* Section Labels */
.section-label {
    padding: 12px 20px;
    /* iOS Style - Grouped header */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ios-separator, #38383A);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: var(--ios-bg-secondary, #1C1C1E);
    text-shadow: none;
}

.section-add-btn {
    /* iOS Style - Add button */
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
    border: none;
    color: var(--red, #0A84FF);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.section-add-btn:hover {
    background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
    color: var(--red-bright, #409CFF);
    transform: scale(1.05);
}

/* Balance Display — Clean corporate, no borders */
.balance-display {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.balance-header {
    margin-bottom: 4px;
}

.balance-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    border: none !important;
    background: transparent;
    margin-bottom: 2px;
    font-size: 0.8rem;
    color: #aaa;
    cursor: pointer;
    transition: background 0.15s;
}

.balance-item:hover {
    background: rgba(255,255,255,0.06);
}

.balance-icon {
    font-size: 0.85rem;
    opacity: 0.7;
}

.balance-label {
    font-size: 0.78rem;
    color: #888;
}

.balance-value {
    font-size: 0.78rem;
    color: #d0d0d0;
    font-weight: 500;
}

.balance-action {
    margin-left: auto;
    font-size: 0.7rem;
    color: #667eea;
    font-weight: 500;
}

.balance-manage-btn,
.balance-cancel-btn {
    width: 100%;
    padding: 8px 14px;
    background: transparent !important;
    border: none !important;
    border-radius: 6px;
    color: #aaa !important;
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
    margin-top: 2px !important;
    transition: background 0.15s;
}

.balance-manage-btn:hover,
.balance-cancel-btn:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #d0d0d0 !important;
}

.tier-badge {
    font-size: 0.6rem;
    padding: 2px 6px;
    background: rgba(102, 126, 234, 0.2);
    color: #667eea;
    border-radius: 4px;
    font-weight: 600;
}

/* Lists */
.projects-list, .chats-list {
    overflow-y: auto;
    padding: 10px 12px;
}

.projects-list {
    max-height: 200px;
    min-height: 100px;
    flex: 0 0 auto;
    /* iOS Style - Grouped list */
    background: var(--ios-bg-secondary, #1C1C1E);
    border-bottom: 1px solid var(--ios-separator, #38383A);
}

.chats-list {
    flex: 1 1 auto;
    min-height: 150px;
    max-height: calc(100vh - 550px);
}

.list-item {
    padding: 12px 14px;
    margin-bottom: 6px;
    /* iOS Style - List row */
    background: var(--ios-bg-tertiary, #2C2C2E);
    border: none;
    border-left: 3px solid var(--red, #0A84FF);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.list-item:hover {
    background: var(--ios-gray-4, #3A3A3C);
    border-left-color: var(--red-bright, #409CFF);
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.list-item.active {
    /* iOS Style - Selected state with blue accent */
    background: rgba(10, 132, 255, 0.15);
    border-left-color: var(--red, #0A84FF);
    box-shadow: 0 2px 12px rgba(10, 132, 255, 0.2);
}

.list-item-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #FFFFFF);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 25px;
}

.list-item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-item-badge {
    display: inline-block;
    /* iOS Style - Badge */
    background: rgba(10, 132, 255, 0.15);
    border: none;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--red, #0A84FF);
}

/* Delete button on items */
.list-item-delete {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: #000000;
    border: 1px solid rgba(0,212,255,0.3);
    border-radius: 4px;
    color: var(--cyan);
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-item:hover .list-item-delete {
    opacity: 1;
}

.list-item-delete:hover {
    background: rgba(0,212,255,0.5);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

/* ================================================================
   MAIN CONTENT AREA
   ================================================================ */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    position: relative;
}

/* Top Bar - iOS Style Header */
.topbar {
    position: relative;
    /* iOS Style - Navigation bar with proper height for buttons */
    background: var(--ios-bg-secondary, #1C1C1E);
    border-bottom: 1px solid var(--ios-separator, #38383A);
    padding: 4px 12px;
    min-height: 38px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    box-shadow: none;
    z-index: 10;
}

/* Desktop Topbar - Consistent 8px gaps and proper alignment */
@media (min-width: 769px) {
    .topbar {
        gap: 8px;
        padding: 6px 16px;
    }

    .topbar > .header-mode-dropdown,
    .topbar > .action-btn,
    .topbar > .oracle-tools-dropdown {
        flex-shrink: 0;
    }

    .topbar .settings-btn {
        margin-left: auto;
        height: 32px;
        width: 32px;
        min-width: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .topbar .settings-btn .icon {
        font-size: 1rem;
    }
}

.topbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    /* iOS Style - Subtle blue accent line */
    background: linear-gradient(90deg, transparent, var(--red, #0A84FF), transparent);
    opacity: 0.5;
    animation: none;
}

.chat-title {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #FFFFFF);
    letter-spacing: -0.01em;
    text-shadow: none;
    animation: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    flex-shrink: 0;

    /* Premium rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================================
   🎛️ HEADER MODE DROPDOWN - ChatGPT Style Mode Selector
   Always visible in the header to switch between modes
   ================================================================ */
.header-mode-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.header-mode-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    /* Clean style - no grey box, transparent background */
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--text-primary, #FFFFFF);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    height: 24px;
}

.header-mode-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.header-mode-btn:active {
    transform: scale(0.98);
}

.header-mode-btn .mode-current-icon {
    font-size: 13px;
}

.header-mode-btn .mode-current-name {
    font-weight: 500;
}

.header-mode-btn .mode-arrow {
    font-size: 10px;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.header-mode-btn.open .mode-arrow {
    transform: rotate(180deg);
}

/* Header Mode Menu (dropdown popup) - iOS Style */
.header-mode-menu {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    /* iOS Style - Action sheet */
    background: var(--ios-bg-elevated, #1C1C1E);
    border: 1px solid var(--ios-separator, #38383A);
    border-radius: 14px;
    padding: 8px;
    min-width: 220px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: none;
    flex-direction: column;
    gap: 2px;
}

.header-mode-menu.show {
    display: flex;
}

.header-mode-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.header-mode-option:hover {
    /* iOS Style - Hover with blue tint */
    background: rgba(10, 132, 255, 0.1);
    color: var(--text-primary, #FFFFFF);
}

.header-mode-option.selected {
    /* iOS Style - Selected with blue accent */
    background: rgba(10, 132, 255, 0.15);
    color: var(--red, #0A84FF);
}

.header-mode-option .option-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.header-mode-option .option-check {
    margin-left: auto;
    /* iOS Style - Checkmark blue */
    color: var(--red, #0A84FF);
    opacity: 0;
}

.header-mode-option.selected .option-check {
    opacity: 1;
}

.header-mode-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999998;
    display: none;
}

.header-mode-backdrop.show {
    display: block;
}

/* Michael Code styles removed - see git history */

/* ================================================================
   🎭 ENTITY SYSTEM - Premium Character Selection
   Mind-Blowing Visual Experience
   ================================================================ */
.personality-switcher {
    position: relative;
    display: inline-block;
}

/* Entity Button - Clean black like others */
/* Entity button - use standard action-btn styling */
#entityBtn {
    /* Uses base .action-btn styling for consistency */
}
#entityBtn::before {
    display: none;
}
#entityBtn:hover::before {
    display: none;
}
#entityIcon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* OLD personality-menu CSS - disabled, using new entityDropdown instead */
.personality-menu {
    display: none !important;
}

/* Menu Header */
.personality-menu::before {
    content: '⚡ SELECT ENTITY';
    display: block;
    padding: 16px 22px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #00f7ff;
    border-bottom: 2px solid rgba(0,247,255,0.3);
    background: rgba(0,247,255,0.05);
    text-align: center;
}

.personality-option {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
    background: #0a0a12;
    pointer-events: auto !important;
    z-index: 9999999;
}

.personality-option * {
    pointer-events: none;
}

.personality-option:hover {
    background: rgba(0,247,255,0.15) !important;
}

.personality-option:active {
    background: rgba(0,247,255,0.25) !important;
}

.personality-option:last-child {
    border-bottom: none;
    border-radius: 0 0 14px 14px;
}

.personality-option:first-child {
    border-radius: 0;
}

/* Left accent bar on hover/active */
.personality-option::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: all 0.2s ease;
    pointer-events: none;
}

/* ORACLE - Red Theme */
.personality-option[data-personality="oracle"]:hover,
.personality-option[data-personality="oracle"].active {
    background: linear-gradient(90deg, rgba(255,0,68,0.15), transparent) !important;
}
.personality-option[data-personality="oracle"]:hover::before,
.personality-option[data-personality="oracle"].active::before {
    background: #ff0044;
    box-shadow: 0 0 15px #ff0044;
}
.personality-option[data-personality="oracle"] .p-name { color: #ff0044; }
.personality-option[data-personality="oracle"] .p-icon {
    filter: drop-shadow(0 0 10px rgba(255,0,68,0.5));
}

/* SIREN - Pink Theme */
.personality-option[data-personality="siren"]:hover,
.personality-option[data-personality="siren"].active {
    background: linear-gradient(90deg, rgba(255,20,147,0.15), transparent) !important;
}
.personality-option[data-personality="siren"]:hover::before,
.personality-option[data-personality="siren"].active::before {
    background: #ff1493;
    box-shadow: 0 0 15px #ff1493;
}
.personality-option[data-personality="siren"] .p-name { color: #ff1493; }
.personality-option[data-personality="siren"] .p-icon { 
    filter: drop-shadow(0 0 10px rgba(255,20,147,0.5));
}

/* NEMESIS - Red Theme */
.personality-option[data-personality="nemesis"]:hover,
.personality-option[data-personality="nemesis"].active {
    background: linear-gradient(90deg, rgba(255,0,68,0.15), transparent) !important;
}
.personality-option[data-personality="nemesis"]:hover::before,
.personality-option[data-personality="nemesis"].active::before {
    background: linear-gradient(180deg, #ff0044, #990000);
    box-shadow: 0 0 20px #ff0044;
}
.personality-option[data-personality="nemesis"] .p-name { color: #ff0044; }
.personality-option[data-personality="nemesis"] .p-icon { 
    filter: drop-shadow(0 0 10px rgba(255,0,68,0.5));
}

.personality-option .p-icon {
    font-size: 2.5rem;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.personality-option:hover .p-icon {
    transform: scale(1.15) rotate(-5deg);
}

.personality-option .p-info {
    flex: 1;
}

.personality-option .p-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 5px;
    transition: text-shadow 0.3s ease;
}

.personality-option:hover .p-name {
    text-shadow: 0 0 20px currentColor;
}

.personality-option .p-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 1px;
}

/* Active checkmark */
.personality-option.active .p-check {
    display: flex;
}
.p-check {
    display: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00ff88, #00cc66);
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #000;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(0,255,136,0.5);
}

/* iOS Style Topbar Actions Container */
.topbar-actions {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Transparent background - no grey box */
    background: transparent;
    padding: 0;
    margin: 0 8px;
}

.topbar-actions::-webkit-scrollbar {
    display: none;
}

/* Settings Button - iOS Style */
.settings-btn {
    flex-shrink: 0;
    margin-left: auto;
    min-width: 32px;
    height: 28px;
    padding: 4px 8px;
    /* iOS Style - Settings button */
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
    border: none;
    border-radius: 8px;
    color: var(--text-secondary, rgba(235, 235, 245, 0.6));
}
.settings-btn:hover {
    background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
    color: var(--text-primary, #FFFFFF);
}
.settings-btn .icon {
    font-size: 0.9rem;
}

/* ================================================================
   ACTION BUTTONS - iOS STYLE
   ================================================================ */
.action-btn {
    /* iOS Style - Pill button (matching header-mode-btn sizing) */
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
    border: none;
    color: var(--text-primary, #FFFFFF);
    padding: 3px 8px;
    border-radius: 12px;
    height: 24px;

    /* Apple typography */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: -0.01em;
    line-height: 1.4;

    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: none;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    white-space: nowrap;

    /* Premium rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle hover effect */
.action-btn::before {
    display: none;
}

.action-btn:hover::before {
    display: none;
}

/* Clean bottom accent */
.action-btn::after {
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
}

.action-btn:hover::after {
    display: none;
}

/* iOS Style Hover */
.action-btn:hover {
    background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
    transform: translateY(-1px);
    color: var(--text-primary, #FFFFFF);
}

.action-btn.active {
    /* iOS Style - Active with blue accent */
    background: rgba(10, 132, 255, 0.2);
    color: var(--red, #0A84FF);
}

.action-btn.active::after {
    display: none;
}

.action-btn .icon {
    font-size: 11px;
    filter: none;
}

.action-btn:hover .icon {
    animation: none;
}

.action-btn .text {
    position: relative;
    z-index: 1;
}

/* iOS Style button active states */
#overdriveBtn.active {
    /* iOS Style - Yellow/Gold accent */
    background: rgba(255, 214, 10, 0.2);
    color: var(--gold, #FFD60A);
    animation: none;
}

#oracleBtn {
    /* iOS Style - Purple accent */
}

#oracleBtn:hover {
    background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
}

/* Web mode button active - consistent styling */
#webModeBtn.active {
    /* Use standard active styling for consistency */
    background: rgba(10, 132, 255, 0.2);
    color: var(--text-primary, #FFFFFF);
}

/* ================================================================
   MYSTICAL VOICE ORB - Matrix/Crystal Ball Style
   Purple/Gold Lightning with Bloom Effects
   ================================================================ */
#voiceBtn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Crystal ball gradient - purple core with gold accents */
    background: 
        radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.25) 0%, transparent 40%),
        radial-gradient(circle at center,
            rgba(180, 130, 255, 0.4) 0%,
            rgba(147, 51, 234, 0.5) 25%,
            rgba(88, 28, 135, 0.7) 50%,
            rgba(30, 10, 60, 0.95) 100%);
    border: 2px solid rgba(180, 130, 255, 0.6);
    box-shadow: 
        0 0 20px rgba(147, 51, 234, 0.5),
        0 0 40px rgba(147, 51, 234, 0.3),
        0 0 60px rgba(255, 180, 100, 0.15),
        inset 0 0 25px rgba(147, 51, 234, 0.4);
    animation: voiceOrbFloat 4s ease-in-out infinite, voiceOrbPulse 3s ease-in-out infinite;
    overflow: visible;
    z-index: 10;
}

/* Soft bloom glow behind orb */
#voiceBtn::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, 
        rgba(147, 51, 234, 0.4) 0%, 
        rgba(255, 180, 100, 0.2) 40%, 
        transparent 70%);
    border-radius: 50%;
    animation: voiceBloomPulse 3s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

/* Inner lightning energy ring */
#voiceBtn::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, 
        transparent, 
        rgba(255, 180, 100, 0.5), 
        transparent, 
        rgba(180, 130, 255, 0.4), 
        transparent,
        rgba(255, 200, 150, 0.3),
        transparent);
    animation: voiceLightningSpin 3s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

#voiceBtn .icon {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 8px rgba(255, 200, 150, 0.8));
    z-index: 5;
    position: relative;
}

#voiceBtn:hover {
    transform: translateY(-5px) scale(1.1);
    border-color: rgba(255, 180, 100, 0.8);
    box-shadow: 
        0 0 40px rgba(147, 51, 234, 0.8),
        0 0 80px rgba(255, 180, 100, 0.4),
        0 0 120px rgba(147, 51, 234, 0.3),
        inset 0 0 40px rgba(180, 130, 255, 0.5);
}

#voiceBtn:hover::before {
    animation: voiceBloomPulse 1.5s ease-in-out infinite;
}

#voiceBtn:hover::after {
    animation: voiceLightningSpin 1.5s linear infinite;
}

/* ACTIVE STATE - Listening/Speaking - Intense Energy */
#voiceBtn.active {
    background: 
        radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.4) 0%, transparent 35%),
        radial-gradient(circle at center,
            rgba(255, 220, 180, 0.6) 0%,
            rgba(255, 180, 100, 0.5) 20%,
            rgba(200, 100, 255, 0.6) 45%,
            rgba(147, 51, 234, 0.8) 70%,
            rgba(50, 20, 80, 0.95) 100%);
    border-color: rgba(255, 200, 150, 0.9);
    box-shadow: 
        0 0 50px rgba(255, 180, 100, 0.8),
        0 0 100px rgba(147, 51, 234, 0.6),
        0 0 150px rgba(255, 200, 150, 0.3),
        inset 0 0 40px rgba(255, 180, 100, 0.4);
    animation: voiceOrbFloat 2s ease-in-out infinite, voiceOrbActiveGlow 0.8s ease-in-out infinite;
}

#voiceBtn.active::before {
    background: radial-gradient(circle, 
        rgba(255, 180, 100, 0.6) 0%, 
        rgba(147, 51, 234, 0.4) 40%, 
        transparent 70%);
    animation: voiceBloomPulse 1s ease-in-out infinite;
}

#voiceBtn.active::after {
    background: conic-gradient(from 0deg, 
        transparent, 
        rgba(255, 220, 150, 0.7), 
        transparent, 
        rgba(255, 180, 100, 0.6), 
        transparent,
        rgba(200, 150, 255, 0.5),
        transparent,
        rgba(255, 200, 150, 0.6),
        transparent);
    animation: voiceLightningSpin 1s linear infinite;
}

/* Ripple effect when speaking */
#voiceBtn.active .voice-ripple {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 180, 100, 0.6);
    animation: voiceRippleExpand 1.5s ease-out infinite;
    pointer-events: none;
}

/* Edge distortion shimmer */
#voiceBtn.active::before {
    filter: blur(2px);
}

/* ================================================================
   CHAT CONTAINER
   ================================================================ */

.chat-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px 220px 30px 40px; /* Extra right padding for matrix rain */
    display: flex;
    flex-direction: column;
    gap: 24px;
    scroll-behavior: smooth;
    /* iOS Style - Pure black background */
    background: var(--ios-bg-primary, #000000);
    /* iOS Style scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--ios-gray-3, #48484A) transparent;
}

.chat-container::-webkit-scrollbar {
    width: 8px;
}

.chat-container::-webkit-scrollbar-track {
    background: transparent;
}

.chat-container::-webkit-scrollbar-thumb {
    background: var(--ios-gray-3, #48484A);
    border-radius: 4px;
}

.chat-container::-webkit-scrollbar-thumb:hover {
    background: var(--ios-gray-2, #636366);
}

/* Drag & Drop overlay */
.chat-container.drag-over {
    position: relative;
}

.chat-container.drag-over::after {
    content: '📂 DROP FILES HERE';
    position: absolute;
    inset: 0;
    background: rgba(0,212,255,0.15);
    border: 3px dashed rgba(0,212,255,0.6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: #00d4ff;
    text-shadow: 0 0 20px rgba(0,212,255,0.5);
    z-index: 100;
    pointer-events: none;
}

/* ================================================================
   CHAT MATRIX RAIN - Right side decoration - MORE BLACK
   ================================================================ */
.chat-matrix-rain {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 1;
    /* iOS Style - Match background */
    background: var(--ios-bg-primary, #000000);
}

/* ================================================================
   MESSAGE LAYOUT - ChatGPT-Style Full Width
   ================================================================ */
.message {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 0 var(--spacing-edge, 16px);
    margin-bottom: var(--spacing-message-gap, 18px);
    animation: messageIn 0.3s ease-out;
    box-sizing: border-box;
}

.message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
    justify-content: flex-start;
    max-width: 85%;
    margin-left: auto;
    padding-right: var(--spacing-edge, 16px);
}

.message.ai {
    align-self: flex-start;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
}

.message-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    position: relative;
}

.message.user .message-avatar {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border: 2px solid #7c3aed;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

.message.ai .message-avatar {
    background: linear-gradient(135deg, rgba(0,212,255,0.3), rgba(0,80,100,0.5));
    border: 3px solid var(--red);
    box-shadow: 0 0 30px var(--red-glow), 0 0 60px rgba(0,212,255,0.3);
    animation: aiAvatarPulse 2s ease-in-out infinite;
}

/* Spinning ring around AI avatar */
.message.ai .message-avatar::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--cyan);
    border-bottom-color: var(--gold);
    animation: avatarRingSpin 3s linear infinite;
    opacity: 0.7;
}

.message-content {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    position: relative;
    /* iOS Style - Primary text */
    color: var(--text-primary, #FFFFFF);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font-body);
    font-size: var(--font-size-base, 17px);
    line-height: var(--line-height-normal, 1.6);
}

.message.user .message-content {
    /* iOS Style - User bubble with purple accent (matching theme) */
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border: none;
    border-radius: 20px 20px 6px 20px;
    padding: 14px 18px;
    color: #FFFFFF;
    max-width: 100%;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* ================================================================
   THE ORACLE WELCOME MESSAGE - EPIC BOOT DISPLAY
   ================================================================ */
.oracle-welcome {
    background: #000000 !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    padding: 0 !important;
    overflow: hidden;
    min-width: 450px;
    max-width: 600px;
    position: relative;
}

/* Animated border glow - disabled for clean look */
.oracle-welcome::before {
    display: none;
}

/* HOLOGRAM EFFECT: Diagonal light streak + glass reflection */
.oracle-welcome::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        /* Diagonal hologram light streak */
        linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 30%, transparent 50%),
        /* Top edge reflection */
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 15%),
        /* Subtle noise texture via gradient */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255,255,255,0.01) 2px,
            rgba(255,255,255,0.01) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255,255,255,0.01) 2px,
            rgba(255,255,255,0.01) 4px
        );
    pointer-events: none;
    z-index: 100;
    border-radius: inherit;
    mix-blend-mode: overlay;
    animation: holoSheen 6s ease-in-out infinite;
}

.welcome-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 25px 20px;
    background: 
        radial-gradient(ellipse at 50% 100%, rgba(147, 51, 234, 0.2) 0%, transparent 60%),
        linear-gradient(180deg, rgba(147, 51, 234, 0.1) 0%, transparent 100%);
    border-bottom: 1px solid rgba(147, 51, 234, 0.4);
    position: relative;
    overflow: hidden;
}

/* Mystical particles in header */
.welcome-header::before {
    content: '✦ ✧ ⋆ ✦ ✧ ⋆ ✦';
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8px;
    letter-spacing: 15px;
    color: rgba(255, 200, 100, 0.6);
    text-shadow: 0 0 10px rgba(255, 150, 50, 0.8);
    animation: headerParticles 3s ease-in-out infinite;
}

.welcome-orb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
    position: relative;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 40%),
        radial-gradient(circle at center, 
            rgba(200, 150, 255, 0.4) 0%,
            rgba(139, 92, 246, 0.5) 30%,
            rgba(88, 28, 135, 0.7) 60%,
            rgba(30, 10, 60, 0.95) 100%);
    border: 2px solid rgba(200, 150, 255, 0.5);
    box-shadow: 
        0 0 30px rgba(147, 51, 234, 0.6),
        0 0 60px rgba(139, 92, 246, 0.4),
        inset 0 0 30px rgba(147, 51, 234, 0.4);
    animation: welcomeOrbFloat 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

/* POWER PULSE: Expanding magenta glow behind main orb */
.welcome-orb::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 0, 255, 0.4) 0%, rgba(147, 51, 234, 0.2) 40%, transparent 70%);
    border-radius: 50%;
    animation: mainOrbPowerPulse 2.5s ease-in-out infinite;
    z-index: -1;
}

/* Inner spinning energy ring */
.welcome-orb::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(0,212,255,0.4), transparent, rgba(255,150,50,0.3), transparent);
    animation: orbInnerSpin 4s linear infinite;
}

.welcome-logo {
    font-family: 'Audiowide', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 6px;
    background: linear-gradient(135deg, #c084fc, #a855f7, #00d4ff, #00ffc8);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.6));
    animation: logoShimmer 4s ease-in-out infinite;
    text-transform: uppercase;
}

.welcome-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(0,255,136,0.15), rgba(0,255,200,0.1));
    border: 1px solid rgba(0,255,136,0.5);
    border-radius: 25px;
    margin-top: 12px;
    box-shadow: 0 0 20px rgba(0,255,136,0.2), inset 0 0 15px rgba(0,255,136,0.1);
}

.status-dot {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #00ff88 30%, #00ffc8 100%);
    border-radius: 50%;
    animation: statusPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 15px #00ff88, 0 0 30px rgba(0,255,136,0.5);
}

.status-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #00ff88;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(0,255,136,0.8);
}

.welcome-divider {
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(122, 44, 255, 0.3) 10%,
        #7a2cff 30%,
        #e82bff 50%,
        #7a2cff 70%,
        rgba(122, 44, 255, 0.3) 90%,
        transparent 100%
    );
    margin: 0;
    box-shadow: 
        0 0 15px rgba(147, 51, 234, 0.5),
        0 0 30px rgba(232, 43, 255, 0.3);
    position: relative;
    animation: lineGlow 2s linear infinite, lineEnergy 4s ease-in-out infinite;
}

.welcome-divider::after {
    content: '◆';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #00ffc8;
    font-size: 12px;
    text-shadow: 0 0 10px #00ffc8, 0 0 20px #00ffc8;
    background: rgba(10,5,20,1);
    padding: 0 10px;
    animation: dividerGemPulse 2s ease-in-out infinite;
}

.welcome-section {
    padding: 25px;
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #c084fc;
    letter-spacing: 4px;
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(147, 51, 234, 0.6);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-title::before,
.section-title::after {
    content: '═══';
    color: rgba(147, 51, 234, 0.5);
    font-size: 0.6rem;
}

.systems-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.system-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 15px 10px;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(147, 51, 234, 0.15) 0%, transparent 70%),
        linear-gradient(180deg, rgba(147, 51, 234, 0.08) 0%, rgba(0,212,255,0.05) 100%);
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    /* CINEMATIC BOOT-UP: Staggered fade-in animation */
    opacity: 0;
    transform: translateY(12px);
    animation: systemBootUp 0.5s forwards ease-out;
}

/* Staggered delays for "systems coming online" effect */
.system-item:nth-child(1) { animation-delay: 0.2s; }
.system-item:nth-child(2) { animation-delay: 0.35s; }
.system-item:nth-child(3) { animation-delay: 0.5s; }
.system-item:nth-child(4) { animation-delay: 0.65s; }
.system-item:nth-child(5) { animation-delay: 0.8s; }
.system-item:nth-child(6) { animation-delay: 0.95s; }

.system-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s;
}

.system-item:hover::before {
    left: 100%;
}

.system-item:hover {
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(147, 51, 234, 0.25) 0%, transparent 70%),
        linear-gradient(180deg, rgba(147, 51, 234, 0.15) 0%, rgba(0,212,255,0.1) 100%);
    border-color: rgba(0, 212, 255, 0.5);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(147, 51, 234, 0.3), 0 0 20px rgba(0,212,255,0.2);
}

.system-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 8px rgba(147, 51, 234, 0.5));
    animation: iconFloat 3s ease-in-out infinite;
    position: relative;
}

/* Power pulse glow behind each system icon */
.system-icon::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(0, 212, 255, 0.2) 40%, transparent 70%);
    border-radius: 50%;
    animation: iconPowerPulse 2.5s ease-in-out infinite;
    z-index: -1;
}

.system-item:nth-child(1) .system-icon { animation-delay: 0s; }
.system-item:nth-child(2) .system-icon { animation-delay: 0.3s; }
.system-item:nth-child(3) .system-icon { animation-delay: 0.6s; }
.system-item:nth-child(4) .system-icon { animation-delay: 0.9s; }
.system-item:nth-child(5) .system-icon { animation-delay: 1.2s; }
.system-item:nth-child(6) .system-icon { animation-delay: 1.5s; }

.system-item:nth-child(1) .system-icon::before { animation-delay: 0s; }
.system-item:nth-child(2) .system-icon::before { animation-delay: 0.3s; }
.system-item:nth-child(3) .system-icon::before { animation-delay: 0.6s; }
.system-item:nth-child(4) .system-icon::before { animation-delay: 0.9s; }
.system-item:nth-child(5) .system-icon::before { animation-delay: 1.2s; }
.system-item:nth-child(6) .system-icon::before { animation-delay: 1.5s; }

.system-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.system-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
}

.system-desc {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: rgba(200, 180, 255, 0.7);
    letter-spacing: 0.5px;
}

.system-status {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    letter-spacing: 1px;
    margin-top: 5px;
}

.system-status.online {
    background: linear-gradient(135deg, rgba(0,255,136,0.2), rgba(0,255,200,0.15));
    border: 1px solid rgba(0,255,136,0.5);
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0,255,136,0.8);
    box-shadow: 0 0 15px rgba(0,255,136,0.3);
    animation: statusGlow 2s ease-in-out infinite;
}

.system-status.standby {
    background: linear-gradient(135deg, rgba(255,200,0,0.2), rgba(255,150,0,0.15));
    border: 1px solid rgba(255,200,0,0.5);
    color: #ffc800;
    text-shadow: 0 0 8px rgba(255,200,0,0.8);
}

.welcome-footer {
    padding: 25px;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.1) 0%, transparent 60%),
        linear-gradient(180deg, transparent 0%, rgba(147, 51, 234, 0.1) 100%);
    border-top: 1px solid rgba(147, 51, 234, 0.3);
    position: relative;
}

.footer-prompt {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: 15px 25px;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(0, 212, 255, 0.1));
    border: 1px solid rgba(147, 51, 234, 0.4);
    border-radius: 30px;
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.2), inset 0 0 20px rgba(147, 51, 234, 0.1);
}

.prompt-icon {
    color: #ffffff;
    font-size: 1.2rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    position: relative;
    display: inline-block;
}

/* POWER PULSE: Living core node effect behind Oracle icon */
.prompt-icon::before {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 70%);
    border-radius: 50%;
    animation: oraclePowerPulse 2s ease-in-out infinite;
    z-index: -1;
}

/* Secondary pulse ring */
.prompt-icon::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: oracleRingPulse 2s ease-in-out infinite 0.5s;
    z-index: -1;
}

.prompt-text {
    font-family: 'Audiowide', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ORACLE WHISPER: Ancient AI signal flicker */

.prompt-cursor {
    width: 3px;
    height: 20px;
    background: #ffffff;
    animation: cursorBlink 1s step-end infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .oracle-welcome {
        min-width: unset;
        max-width: 100%;
    }
    
    .welcome-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .welcome-logo {
        font-size: 1.4rem;
    }
    
    .system-item {
        padding: 10px 12px;
    }
    
    .system-name {
        font-size: 0.75rem;
    }
    
    .system-desc {
        display: none;
    }
    
    .prompt-text {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }
}

/* ================================================================
   AI MESSAGE - NO BOX, NO BUBBLE - Just clean text
   ================================================================ */
.message.ai .message-content {
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    overflow: visible;
    padding: 0 !important;
}

/* Remove all effects - clean minimal style */
.message.ai .message-content::before {
    display: none;
}

.message.ai .message-content::after {
    display: none;
}

.message-text {
    /* ChatGPT-quality typography - 17px minimum for mobile readability */
    font-family: var(--font-body);
    font-size: var(--font-size-base, 17px);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal, 1.6);
    /* iOS Style - Bright white text for dark background */
    color: #FFFFFF;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
    z-index: 1;
    letter-spacing: var(--tracking-normal, 0);

    /* Premium text rendering - crisp on all devices */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;

    /* Smooth, elegant text appearance */
    font-optical-sizing: auto;
    font-synthesis: none;
}

/* ================================================================
   USER MESSAGE TEXT - Premium clean style
   ================================================================ */
.message.user .message-text {
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    letter-spacing: -0.01em;
    line-height: var(--line-height-relaxed);
    text-shadow: none;

    /* Premium rendering for user messages */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* No command prompt prefix - cleaner look */
.message.user .message-text::before {
    content: '';
}

/* ================================================================
   AI MESSAGE TEXT - ChatGPT-Quality Premium Typography
   NO BOX, NO BUBBLE - Just clean text on background
   ================================================================ */
.message.ai .message-text {
    /* Premium editorial typography — inspired by Claude's serif approach */
    color: #ECECEC;

    /* Serif font stack for premium editorial feel — 'New York' is Apple's system serif */
    font-family: 'Tiempos Text', 'New York', 'New York Small', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.7;

    /* Premium text rendering - ChatGPT quality */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    font-optical-sizing: auto;

    /* CRITICAL: No container, no bubble, no box - just text */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-shadow: none;
}

/* Remove the pulsing animation - cleaner */

/* Clean first letter - no special styling */
.message.ai .message-text::first-letter {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-shadow: inherit;
    font-family: inherit;
    float: none;
    margin-right: 0;
    margin-top: 0;
    line-height: inherit;
    -webkit-text-stroke: none;
}

/* Claude-style heading typography inside AI messages */
.message.ai .message-text h1,
.message.ai .message-text h2,
.message.ai .message-text h3 {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 1.2em 0 0.5em 0;
}
.message.ai .message-text h1 { font-size: 22px; }
.message.ai .message-text h2 { font-size: 18px; }
.message.ai .message-text h3 { font-size: 16px; }

/* Clean paragraphs with proper breathing room */
.message.ai .message-text p {
    margin: 0 0 16px 0;
}

.message.ai .message-text p:last-child {
    margin-bottom: 0;
}

/* Bold text - premium weight for AI messages */
.message.ai .message-text strong, .message.ai .message-text b {
    color: #ffffff;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
}

/* Bold text for user messages */
.message.user .message-text strong, .message.user .message-text b {
    color: #ffffff;
    font-weight: var(--font-weight-semibold);
}

/* Italic text - subtle and elegant */
.message-text em, .message-text i {
    color: inherit;
    font-style: italic;
    letter-spacing: 0.01em;
}

/* Links - iOS Style blue */
.message-text a {
    color: var(--red, #0A84FF);
    text-decoration: underline;
    text-decoration-color: rgba(10, 132, 255, 0.4);
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

.message-text a:hover {
    color: var(--red-bright, #409CFF);
    text-decoration-color: rgba(64, 156, 255, 0.6);
    text-shadow: none;
}

/* Lists in messages - ChatGPT-style clean formatting */
.message-text ul, .message-text ol {
    margin: 14px 0;
    padding-left: 20px;
}

.message-text li {
    margin-bottom: 10px;
    position: relative;
    font-size: var(--font-size-base, 17px);
    line-height: var(--line-height-normal, 1.6);
}

.message-text li:last-child {
    margin-bottom: 0;
}

.message-text ul li::marker {
    color: var(--text-secondary, rgba(235, 235, 245, 0.6));
}

.message-text ol li::marker {
    color: var(--text-primary, #FFFFFF);
    font-weight: 500;
}

/* Inline code - iOS Style */
.message-text code {
    /* iOS Style - Subtle dark code bg */
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
    padding: 3px 7px;
    border-radius: 6px;
    font-family: 'SF Mono', var(--font-mono);
    font-size: 0.875em;
    color: var(--pink, #FF375F);
    border: none;
    letter-spacing: 0;
    font-feature-settings: 'calt' 0;
}

/* Code blocks - iOS Style Dark */
.message-text pre {
    background: var(--ios-bg-tertiary, #2C2C2E);
    padding: 16px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 16px 0;
    border: 1px solid var(--ios-separator, #38383A);
}

/* Remove the CODE header */
.message-text pre::before {
    content: '';
    display: none;
}

/* ================================================================
   TYPING CURSOR
   ================================================================ */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    /* iOS Style - Subtle gray cursor */
    background: var(--ios-gray, #8E8E93);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursorBlink 1s ease-in-out infinite;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ================================================================
   🚀 ULTIMATE MARKDOWN STYLES - RENDERS EVERYTHING!
   ================================================================ */

/* Code block container with header - iOS Style */
.code-block-container {
    margin: 16px 0;
    border-radius: 12px;
    overflow: visible;
    border: 1px solid var(--ios-separator, #38383A);
    background: var(--ios-bg-tertiary, #2C2C2E);
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--ios-bg-secondary, #1C1C1E);
    border-bottom: 1px solid var(--ios-separator, #38383A);
}

.code-lang {
    font-size: 0.75rem;
    color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    font-family: 'SF Mono', monospace;
    font-weight: 600;
    user-select: none;
}

.code-copy-btn {
    /* iOS Style - Pill button */
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    color: var(--red, #0A84FF);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    user-select: none;
}

.code-copy-btn:hover {
    background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
    color: var(--red-bright, #409CFF);
}

.code-copy-btn:active {
    transform: scale(0.95);
    opacity: 0.8;
}

.code-copy-btn:focus-visible {
    outline: 2px solid rgba(100, 210, 255, 0.5);
    outline-offset: 2px;
}

.code-block {
    margin: 0;
    padding: 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);
}

.code-block::-webkit-scrollbar { height: 6px; }
.code-block::-webkit-scrollbar-track { background: transparent; }
.code-block::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.code-block code {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #e0e0e0;
}

/* Inline code - iOS Style */
.inline-code {
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
    padding: 3px 7px;
    border-radius: 6px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.85em;
    color: var(--cyan, #64D2FF);
}

/* Rendered images */
.rendered-image-container {
    margin: 16px 0;
    text-align: center;
}

/* Image loading spinner - hidden when image loads */
.image-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: rgba(255,255,255,0.03);
    border: 2px dashed rgba(0,212,255,0.3);
    border-radius: 12px;
    color: #888;
    font-size: 0.9rem;
    gap: 12px;
}

/* When loader is hidden, collapse it completely */
.image-loading[style*="display: none"],
.image-loading[style*="display:none"] {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.image-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0,212,255,0.2);
    border-top-color: #00d4ff;
    border-radius: 50%;
    animation: spinImage 1s linear infinite;
}

.rendered-image {
    max-width: 100%;
    max-height: 500px;
    border-radius: 12px;
    border: 2px solid rgba(0,212,255,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.rendered-image:hover {
    border-color: rgba(0,212,255,0.6);
    box-shadow: 0 0 30px rgba(0,212,255,0.3);
    transform: scale(1.02);
}

.image-caption {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}

.image-error {
    color: #66e8ff;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: rgba(0,212,255,0.05);
    border: 2px dashed rgba(0,212,255,0.3);
    border-radius: 12px;
}

.image-error .error-icon {
    font-size: 2rem;
}

.retry-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.retry-btn:hover {
    background: rgba(0,212,255,0.3);
    border-color: rgba(0,212,255,0.5);
}

/* Image Generation Loading & Results */
.image-gen-loading {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(0,212,255,0.05));
    border: 2px solid rgba(0,212,255,0.3);
    border-radius: 16px;
    animation: genPulse 2s ease-in-out infinite;
}

.image-gen-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0,212,255,0.2);
    border-top-color: #00d4ff;
    border-radius: 50%;
    animation: spinImage 1s linear infinite;
    flex-shrink: 0;
}

.image-gen-text {
    flex: 1;
}

.image-gen-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #00d4ff;
    margin-bottom: 6px;
}

.image-gen-subtitle {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 10px;
}

.image-gen-prompt {
    font-size: 0.9rem;
    color: #aaa;
    font-style: italic;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border-left: 3px solid #00d4ff;
}

.image-gen-result {
    text-align: center;
}

.image-gen-result .generated-image {
    max-width: 100%;
    max-height: 500px;
    border-radius: 12px;
    border: 2px solid rgba(0,212,255,0.4);
    box-shadow: 0 4px 30px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-gen-result .generated-image:hover {
    border-color: #00d4ff;
    box-shadow: 0 0 40px rgba(0,212,255,0.3);
    transform: scale(1.02);
}

.image-gen-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 10px 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    font-size: 0.85rem;
}

.image-gen-prompt-small {
    color: #888;
    font-style: italic;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-gen-cost {
    color: #00ff88;
    font-family: 'Share Tech Mono', monospace;
}

.image-gen-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.image-download-btn, .image-fullscreen-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.image-download-btn {
    background: linear-gradient(135deg, rgba(0,255,100,0.2), rgba(0,200,100,0.1));
    border: 1px solid rgba(0,255,100,0.4);
    color: #00ff88;
}

.image-download-btn:hover {
    background: rgba(0,255,100,0.3);
    box-shadow: 0 0 20px rgba(0,255,100,0.3);
}

.image-fullscreen-btn {
    background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(0,212,255,0.1));
    border: 1px solid rgba(0,212,255,0.4);
    color: #66e8ff;
}

.image-fullscreen-btn:hover {
    background: rgba(0,212,255,0.3);
    box-shadow: 0 0 20px rgba(0,212,255,0.3);
}

.image-gen-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px;
    background: rgba(0,212,255,0.1);
    border: 2px dashed rgba(0,212,255,0.3);
    border-radius: 12px;
    color: #66e8ff;
}

/* Video Generation Styles */
.video-generating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 40px;
    background: linear-gradient(135deg, rgba(170,0,255,0.1), rgba(0,212,255,0.1));
    border: 2px solid rgba(170,0,255,0.3);
    border-radius: 15px;
}
.video-generating .generating-spinner {
    font-size: 3rem;
    animation: spinPulse 1s ease-in-out infinite;
}

.video-generating .generating-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--cyan);
    text-shadow: 0 0 20px rgba(0,212,255,0.5);
}
.video-generating .generating-subtext {
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.generated-video-container {
    text-align: center;
}
.video-gen-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #aa00ff;
    margin-bottom: 15px;
    text-shadow: 0 0 15px rgba(170,0,255,0.5);
}
.generated-video-container video {
    max-width: 100%;
    border-radius: 12px;
    border: 2px solid rgba(170,0,255,0.4);
    box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.video-gen-info {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
    padding: 10px 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #888;
}
.video-download-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 25px;
    background: linear-gradient(135deg, rgba(170,0,255,0.2), rgba(170,0,255,0.1));
    border: 1px solid rgba(170,0,255,0.4);
    border-radius: 8px;
    color: #bb66ff;
    text-decoration: none;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.video-download-btn:hover {
    background: rgba(170,0,255,0.3);
    box-shadow: 0 0 20px rgba(170,0,255,0.3);
}

/* Fullscreen image overlay */
.fullscreen-image-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.fullscreen-image-container {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
}

.fullscreen-image {
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

.fullscreen-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.fullscreen-close:hover {
    background: rgba(0,212,255,0.5);
}

.fullscreen-download {
    position: absolute;
    bottom: -40px;
    right: 0;
    background: rgba(255,255,255,0.1);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.fullscreen-download:hover {
    background: rgba(0,212,255,0.4);
}

/* PDF card with download button */
.pdf-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.pdf-card.inline-pdf {
    display: inline-flex;
    margin: 4px 8px 4px 0;
}

.pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(100,220,255,0.1));
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(0,212,255,0.3);
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pdf-link:hover {
    background: linear-gradient(135deg, rgba(0,212,255,0.4), rgba(100,220,255,0.2));
    border-color: rgba(0,212,255,0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,212,255,0.3);
}

.pdf-icon {
    font-size: 1.5rem;
}

.pdf-text {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-badge {
    background: #00d4ff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
}

.pdf-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, rgba(0,255,100,0.2), rgba(0,200,100,0.1));
    border: 1px solid rgba(0,255,100,0.3);
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.pdf-download-btn:hover {
    background: linear-gradient(135deg, rgba(0,255,100,0.4), rgba(0,200,100,0.2));
    border-color: rgba(0,255,100,0.6);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0,255,100,0.4);
}

/* Video embeds */
.video-embed {
    margin: 16px 0;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid rgba(0,212,255,0.3);
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Markdown links */
.md-link {
    color: #7dd3fc;
    text-decoration: none;
    border-bottom: 1px solid rgba(125,211,252,0.3);
    transition: all 0.2s;
}

.md-link:hover {
    color: #bae6fd;
    border-bottom-color: rgba(186,230,253,0.5);
}

.md-link .link-icon {
    font-size: 0.75em;
    opacity: 0.7;
}

.auto-link {
    color: #7dd3fc;
    word-break: break-all;
}

/* Headers - Premium Typography Hierarchy */
.md-h1 {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: var(--font-weight-semibold);
    color: #fff;
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0,212,255,0.3);
    letter-spacing: -0.02em;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}

.md-h2 {
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: var(--font-weight-semibold);
    color: #f0f0f0;
    margin: 20px 0 12px 0;
    letter-spacing: -0.02em;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}

.md-h3 {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    color: #e0e0e0;
    margin: 16px 0 10px 0;
    letter-spacing: -0.01em;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

/* Blockquotes */
.md-quote {
    border-left: 4px solid rgba(0,212,255,0.5);
    padding-left: 16px;
    margin: 16px 0;
    color: #aaa;
    font-style: italic;
    background: rgba(255,255,255,0.03);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
}

/* Horizontal rule */
.md-hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent);
    margin: 24px 0;
}

/* Lists */
.md-ul, .md-ol {
    margin: 12px 0;
    padding-left: 24px;
}

.md-li, .md-oli {
    margin-bottom: 6px;
    line-height: 1.6;
}

/* Task lists */
.task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.task-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #00d4ff;
}

/* Tables */
.md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.9rem;
}

.md-table td {
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.2);
}

.md-table tr:first-child td {
    background: rgba(0,212,255,0.15);
    font-weight: 600;
    color: #fff;
}

/* Strikethrough */
del {
    color: #888;
    text-decoration: line-through;
}

/* Typing cursor */
.typing-cursor {
    color: #00d4ff;
    animation: cursorBlink 1s step-end infinite;
}

.message-text pre code {
    background: none;
    padding: 0;
    border: none;
    color: var(--code-text, #d4d4d4);
    font-size: 1rem;
    line-height: var(--code-line-height, 1.5);
}

.message-time {
    font-size: 0.75rem;
    color: #000000;
    margin-top: 14px;
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 1.5px;
    opacity: 0.7;
}

.message.ai .message-time {
    color: #000000;
}

.message.ai .message-time::before {
    content: '⟨ ';
    color: #000000;
}

.message.ai .message-time::after {
    content: ' ⟩';
    color: #000000;
}

/* Thinking Indicator */
/* ================================================================
   CORPORATE THINKING INDICATOR - Clean, Professional
   ================================================================ */
.thinking-indicator {
    display: flex;
    gap: 15px;
    animation: fadeIn 0.3s ease;
    align-self: flex-start;
    padding: 8px 0;
}

/* Fade out transition for thinking indicator */
.thinking-indicator.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ================================================================
   DESKTOP THINKING LOADER - Animated "Thinking..." dots
   ================================================================ */
.thinking-loader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
}

.thinking-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-top-color: #8B5CF6;
    border-radius: 50%;
    animation: thinkingSpin 0.8s linear infinite;
}

@keyframes thinkingSpin {
    to { transform: rotate(360deg); }
}

.thinking-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #9CA3AF;
    display: flex;
    align-items: baseline;
}

.thinking-text-label {
    color: #9CA3AF;
}

.thinking-dots {
    display: inline-flex;
    width: 18px;
    margin-left: 1px;
}

.thinking-dots .dot {
    opacity: 0;
    animation: thinkingDots 1.5s infinite;
}

.thinking-dots .dot:nth-child(1) {
    animation-delay: 0s;
}

.thinking-dots .dot:nth-child(2) {
    animation-delay: 0.3s;
}

.thinking-dots .dot:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes thinkingDots {
    0%, 20% { opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 1; }
    80%, 100% { opacity: 0; }
}

/* Corporate thinking content */
.thinking-content-corporate {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    min-width: 200px;
    max-width: 300px;
}

.thinking-header-corporate {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.thinking-dots .dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    animation: dotPulse 1.4s ease-in-out infinite;
}

.thinking-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.thinking-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

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

.thinking-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #667eea;
    letter-spacing: 0.3px;
}

.thinking-steps-corporate {
    margin-top: 8px;
}

.thinking-step-corporate {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Legacy support - hide old matrix elements */
.thinking-content {
    display: none;
}

.thinking-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.thinking-step {
    color: rgba(0,255,136,0.5);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    padding-left: 25px;
    opacity: 0.5;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 1px;
}

.thinking-step::before {
    content: '>';
    position: absolute;
    left: 8px;
    color: rgba(0,255,136,0.4);
    font-weight: bold;
}

.thinking-step.active {
    color: #00ff88;
    font-weight: 600;
    opacity: 1;
    text-shadow: 0 0 10px rgba(0,255,136,0.6);
    transform: translateX(5px);
}

.thinking-step.active::before {
    content: '▸';
    color: #00ff88;
    animation: caretBlink 0.5s infinite;
}

.thinking-step.completed {
    color: rgba(0,255,136,0.7);
    opacity: 0.8;
}

.thinking-step.completed::before {
    content: '✓';
    color: #00ff88;
}

/* Matrix code stream animation */
.matrix-stream {
    display: flex;
    gap: 3px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,255,136,0.2);
    justify-content: center;
    overflow: hidden;
}

.matrix-char {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.2rem;
    color: #00ff88;
    text-shadow: 0 0 10px #00ff88;
    animation: matrixCharFall 0.8s ease-in-out infinite;
    opacity: 0;
}

/* ================================================================
   CONSCIOUSNESS / DEEP THINK VISUALIZATION
   ================================================================ */

.thinking-indicator.deep-think {
    margin-bottom: 20px;
}

.deep-think-content {
    background: linear-gradient(135deg, rgba(15,0,30,0.98) 0%, rgba(5,0,15,0.99) 100%);
    border: 2px solid rgba(138,43,226,0.6);
    box-shadow:
        0 0 40px rgba(138,43,226,0.3),
        0 0 80px rgba(138,43,226,0.1),
        inset 0 0 50px rgba(138,43,226,0.05);
}

.mood-indicator {
    margin-left: auto;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    padding: 4px 12px;
    background: rgba(0,0,0,0.4);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}

.consciousness-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    padding: 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    border: 1px solid rgba(138,43,226,0.3);
}

.check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.check-item.pending {
    opacity: 0.4;
    color: #888;
}

.check-item.checking {
    opacity: 1;
    color: #ffaa00;
    background: rgba(255,170,0,0.1);
    border-left: 3px solid #ffaa00;
}

.check-item.checking .check-icon {
    animation: spin 1s linear infinite;
}

.check-item.complete {
    opacity: 1;
    color: #00ff88;
    background: rgba(0,255,136,0.1);
    border-left: 3px solid #00ff88;
}

.check-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.check-text {
    flex: 1;
}

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

/* AI Mood Indicator in UI */
.ai-mood-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    padding: 4px 10px;
    background: rgba(0,0,0,0.5);
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.15);
}

/* ================================================================
   AUTONOMOUS THOUGHT SYSTEM - AI Speaks First
   ================================================================ */

/* Pre-thinking indicator */
.autonomous-thinking-indicator {
    display: flex;
    justify-content: center;
    padding: 15px;
    animation: fadeIn 0.5s ease;
}

.autonomous-pre-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(138,43,226,0.15) 0%, rgba(75,0,130,0.1) 100%);
    border: 1px solid rgba(138,43,226,0.3);
    border-radius: 25px;
    animation: subtlePulse 2s ease-in-out infinite;
}

.autonomous-glow-orb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: orbPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 15px currentColor;
}

.autonomous-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
    letter-spacing: 1px;
}

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

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

/* Autonomous typing indicator */
.autonomous-typing-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    animation: fadeIn 0.3s ease;
}

.autonomous-typing-indicator.paused .typing-dot {
    animation-play-state: paused;
    opacity: 0.3;
}

.typing-bubble.autonomous-bubble {
    background: linear-gradient(135deg, rgba(20,10,30,0.9) 0%, rgba(10,5,20,0.95) 100%);
    padding: 15px 20px;
    border-radius: 20px;
    display: flex;
    gap: 6px;
}

/* Autonomous message styling */
.message.autonomous-message {
    animation: autonomousAppear 0.6s ease-out;
}

@keyframes autonomousAppear {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    50% {
        transform: translateY(-2px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.autonomous-content {
    background: linear-gradient(135deg, rgba(15,5,25,0.95) 0%, rgba(10,3,20,0.98) 100%) !important;
    position: relative;
    overflow: hidden;
}

.autonomous-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--personality-color, #8a2be2), transparent);
    animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.autonomous-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 8px;
    padding: 3px 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
}

.autonomous-icon {
    font-size: 0.8rem;
}

.autonomous-label {
    opacity: 0.7;
}

/* Ghost typing (AI reconsidered) */
.ghost-typing {
    display: flex;
    justify-content: flex-start;
    padding: 10px 20px;
    animation: fadeIn 0.3s ease;
}

.ghost-typing.fading {
    animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-5px); }
}

.typing-bubble.ghost {
    background: rgba(30,20,40,0.5);
    padding: 12px 18px;
    border-radius: 18px;
    display: flex;
    gap: 5px;
    opacity: 0.6;
}

/* Autonomous tooltip */
.autonomous-tooltip {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 10000;
    animation: slideInRight 0.4s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.autonomous-tooltip .tooltip-content {
    background: linear-gradient(135deg, #1a0a2e 0%, #0f051a 100%);
    border: 1px solid rgba(138,43,226,0.4);
    border-radius: 15px;
    padding: 20px;
    max-width: 300px;
    box-shadow: 0 10px 40px rgba(138,43,226,0.3);
}

.autonomous-tooltip .tooltip-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 10px;
}

.autonomous-tooltip p {
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.autonomous-tooltip button {
    background: linear-gradient(135deg, #8a2be2 0%, #6a1b9a 100%);
    border: none;
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.autonomous-tooltip button:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(138,43,226,0.5);
}

/* Autonomous message footer with listen button */
.autonomous-message-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(138,43,226,0.1);
}

.autonomous-listen-btn {
    background: rgba(138,43,226,0.2);
    border: 1px solid rgba(138,43,226,0.3);
    border-radius: 16px;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.autonomous-listen-btn:hover {
    background: rgba(138,43,226,0.4);
    transform: scale(1.05);
}

.autonomous-listen-btn .listen-icon {
    font-size: 0.9rem;
}

/* Ghost typing "never mind" text */
.ghost-typing.never-mind {
    display: flex;
    justify-content: center;
    padding: 10px;
    animation: ghostAppear 0.5s ease-out;
}

.ghost-typing.never-mind .typing-bubble {
    background: rgba(138,43,226,0.1);
    padding: 8px 16px;
    border-radius: 16px;
}

.ghost-typing.never-mind .ghost-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    color: rgba(138,43,226,0.5);
    font-style: italic;
}

.ghost-typing.fading {
    animation: ghostFade 0.8s ease-out forwards;
}

@keyframes ghostAppear {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Reconsidering state */
.autonomous-typing-indicator.reconsidering .typing-dot {
    animation-play-state: paused;
    background: rgba(138,43,226,0.3);
}

/* Dream state special glow */
.autonomous-message[data-trigger="dream_state"] .autonomous-content {
    background: linear-gradient(135deg, rgba(25,10,45,0.95) 0%, rgba(15,5,30,0.98) 100%) !important;
    border-color: rgba(147,112,219,0.4) !important;
}

.autonomous-message[data-trigger="dream_state"] .autonomous-badge {
    color: #9370db !important;
}

/* Typing dots animation */
.typing-dot {
    width: 8px;
    height: 8px;
    background: #8a2be2;
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0s; }

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

/* ================================================================
   INPUT AREA
   ================================================================ */

.input-area {
    background: var(--ios-bg-secondary, #1C1C1E);
    border-top: 1px solid var(--ios-separator, #38383A);
    padding: 8px 16px;
    /* Add bottom padding to account for fixed legal footer (approx 35px) */
    padding-bottom: 40px;
    flex-shrink: 0;
    box-shadow: none;
    position: relative;
    /* Ensure input area is always visible at bottom */
    min-height: fit-content;
}

/* ================================================================
   CHAT MODE SELECTOR - ChatGPT Style Mode Toggles
   Deep Thinking, Web Search, Code, etc.
   ================================================================ */
.chat-mode-selector {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-mode-selector::-webkit-scrollbar {
    display: none;
}

.mode-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    position: relative;
    overflow: hidden;
    height: 24px;
}

.mode-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(0, 0, 0, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Only apply hover effects on devices with hover capability (not touch) */
@media (hover: hover) {
    .mode-chip:hover {
        background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
        color: var(--text-primary, #FFFFFF);
        transform: translateY(-1px);
    }

    .mode-chip:hover::before {
        opacity: 1;
    }
}

.mode-chip.active {
    background: rgba(10, 132, 255, 0.2);
    color: var(--red, #0A84FF);
    box-shadow: none;
}

.mode-chip.active .mode-icon {
    animation: modeIconPulse 2s ease-in-out infinite;
}

.mode-chip .mode-icon {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.mode-chip .mode-label {
    font-size: 0.75rem;
    letter-spacing: 0;
}

/* Deep Thinking Mode - iOS Style */
.mode-chip.deep-think {
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
}

@media (hover: hover) {
    .mode-chip.deep-think:hover {
        background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
        color: var(--text-primary, #FFFFFF);
    }
}

.mode-chip.deep-think.active {
    background: rgba(191, 90, 242, 0.2);
    color: var(--purple, #BF5AF2);
    box-shadow: none;
    animation: none;
}

/* Web Search Mode - iOS Style */
.mode-chip.web-search {
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
}

@media (hover: hover) {
    .mode-chip.web-search:hover {
        background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
        color: var(--text-primary, #FFFFFF);
    }
}

.mode-chip.web-search.active {
    background: rgba(48, 209, 88, 0.2);
    color: var(--green, #30D158);
    box-shadow: none;
}

/* Code Mode - iOS Style */
.mode-chip.code-mode {
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
}

@media (hover: hover) {
    .mode-chip.code-mode:hover {
        background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
        color: var(--text-primary, #FFFFFF);
    }
}

.mode-chip.code-mode.active {
    background: rgba(255, 159, 10, 0.2);
    color: var(--orange, #FF9F0A);
    box-shadow: none;
}

/* Image Gen Mode - iOS Style */
.mode-chip.image-mode {
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
}

@media (hover: hover) {
    .mode-chip.image-mode:hover {
        background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
        color: var(--text-primary, #FFFFFF);
    }
}

.mode-chip.image-mode.active {
    background: rgba(255, 55, 95, 0.2);
    color: var(--pink, #FF375F);
    box-shadow: none;
}

/* Reason Mode - iOS Style */
.mode-chip.reason-mode {
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
}

@media (hover: hover) {
    .mode-chip.reason-mode:hover {
        background: var(--ios-fill-secondary, rgba(120, 120, 128, 0.32));
        color: var(--text-primary, #FFFFFF);
    }
}

.mode-chip.reason-mode.active {
    background: rgba(94, 92, 230, 0.2);
    color: var(--indigo, #5E5CE6);
    box-shadow: none;
}

/* Mode Divider */
.mode-divider {
    width: 1px;
    height: 20px;
    background: var(--ios-separator, #38383A);
    margin: 0 4px;
}

/* Deep Thinking Indicator - Shows when active */
.deep-thinking-indicator {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(147, 51, 234, 0.4);
    border-radius: 10px;
    margin-bottom: 12px;
    animation: thinkingFadeIn 0.3s ease;
}

.deep-thinking-indicator.show {
    display: flex;
}

.thinking-brain {
    font-size: 1.2rem;
    animation: brainPulse 1.5s ease-in-out infinite;
}

.thinking-brain-video {
    width: 28px;
    height: 28px;
    object-fit: contain;
    animation: brainPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(147, 51, 234, 0.8)) drop-shadow(0 0 15px rgba(0, 212, 255, 0.5));
}

.thinking-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #c084fc;
    letter-spacing: 2px;
    animation: thinkingTextPulse 2s ease-in-out infinite;
}

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

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

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

.input-wrapper {
    display: flex;
    gap: 10px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-end;
}

.input-container {
    flex: 1;
    position: relative;
}

textarea {
    width: 100%;
    min-height: 52px;
    max-height: 200px;
    /* Clean input bar - Claude-style larger input */
    background: var(--ios-bg-tertiary, #2C2C2E);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 50px 14px 48px;
    color: var(--text-primary, #FFFFFF);

    /* Apple typography for input - 16px+ prevents iOS zoom */
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font-sans);
    font-size: 16px !important; /* Minimum 16px to prevent iOS zoom */
    font-weight: var(--font-weight-normal);
    line-height: 1.5 !important;
    letter-spacing: var(--tracking-normal);
    resize: none;
    box-shadow: none;

    /* Premium text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* iOS Input Accessory Bar Prevention & Zoom Prevention */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;

    /* White text cursor instead of default iOS blue */
    caret-color: #FFFFFF;

    /* iOS Smooth Typing - Prevent cursor jumping */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: height;
    contain: layout style;

    /* Prevent iOS keyboard scroll issues */
    position: relative;

    /* Smooth height transitions - not on transform to prevent cursor jump */
    transition: height 0.1s ease-out, border-color 0.2s ease, background 0.2s ease;
}

textarea:focus {
    outline: none;
    /* Clean focus - subtle border only */
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--ios-bg-tertiary, #2C2C2E);
    box-shadow: none;
}

textarea::placeholder {
    color: var(--text-tertiary, rgba(235, 235, 245, 0.3));
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--tracking-normal);
}

.input-actions {
    position: absolute;
    right: 10px;
    bottom: 8px;
    display: flex;
    gap: 4px;
}

.input-action-btn {
    width: 28px;
    height: 28px;
    /* iOS Style - Subtle button */
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--text-secondary, rgba(235, 235, 245, 0.6));
    transition: all 0.2s ease;
}

.input-action-btn:hover {
    background: var(--ios-fill-tertiary, rgba(118, 118, 128, 0.24));
    color: var(--text-primary, #FFFFFF);
}

.input-action-btn.active {
    /* iOS Style - Active with blue */
    background: var(--red, #0A84FF);
    color: white;
}

/* Web search toggle removed — always on */

.input-buttons {
    display: flex;
    gap: 8px;
}

.send-btn {
    width: 36px;
    height: 36px;
    /* iOS Style - Blue send button */
    background: var(--red, #0A84FF);
    border: none;
    border-radius: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #FFFFFF;
    transition: all 0.2s ease;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.send-btn:hover {
    background: var(--red-bright, #409CFF);
    transform: scale(1.05);
}

.send-btn:active {
    transform: scale(0.95);
}

.stop-btn {
    width: 36px;
    height: 36px;
    /* iOS Style - Stop button */
    background: var(--ios-gray-4, #3A3A3C);
    border: none;
    border-radius: 18px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-primary, #FFFFFF);
}

.stop-btn.visible {
    display: flex;
}

.voice-indicator {
    position: absolute;
    top: 50%;
    right: 60px;
    transform: translateY(-50%);
    display: none;
    gap: 4px;
}

.voice-indicator.active {
    display: flex;
}

.voice-bar {
    width: 4px;
    height: 20px;
    background: var(--red);
    border-radius: 2px;
    animation: voiceBar 0.5s ease-in-out infinite;
}

.voice-bar:nth-child(2) { animation-delay: 0.1s; }
.voice-bar:nth-child(3) { animation-delay: 0.2s; }
.voice-bar:nth-child(4) { animation-delay: 0.15s; }

.input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ios-separator, #38383A);
}

.input-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.input-hint kbd {
    background: rgba(0,212,255,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Share Tech Mono', monospace;
    border: 1px solid var(--panel-border);
}

.char-counter {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.char-counter.warning {
    color: var(--gold);
}

.char-counter.danger {
    color: var(--red);
}

/* ================================================================
   PANELS & OVERLAYS - Corporate Style
   ================================================================ */

.panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    cursor: pointer;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.panel-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

.side-panel {
    position: fixed;
    top: 0;
    right: -450px;
    width: 420px;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid #e5e5e5;
    z-index: 10000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    pointer-events: auto;
    backdrop-filter: none;
    overflow-y: auto;
}

.side-panel.show { right: 0; pointer-events: auto; }

.panel-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
    flex-shrink: 0;
}

.panel-title {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    color: #1a1a1a;
    letter-spacing: -0.01em;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}

.panel-close {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #666;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-close:hover { background: #eee; color: #333; }
.panel-close:active { background: #ddd; transform: scale(0.95); }

.panel-content { flex: 1; overflow-y: auto; padding: 20px; background: #ffffff; }

.agent-grid { display: grid; gap: 12px; }

.agent-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}

.agent-card:hover { border-color: #667eea; box-shadow: 0 2px 8px rgba(102,126,234,0.1); }
.agent-card.active { border-color: #667eea; background: #f0f4ff; }

.agent-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

.agent-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
}

.agent-status { width: 10px; height: 10px; border-radius: 50%; background: #ddd; }
.agent-status.online { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.4); }

.agent-info { font-size: 0.85rem; color: #666; margin-bottom: 10px; }
.agent-bar { height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; }
.agent-bar-fill { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 3px; }

.goal-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.goal-card:hover { border-color: #667eea; box-shadow: 0 2px 8px rgba(102,126,234,0.1); }
.goal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.goal-title { font-weight: 600; font-size: 0.95rem; color: #1a1a2e; flex: 1; }

.goal-priority {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.goal-priority.critical { background: #fee2e2; color: #dc2626; }
.goal-priority.high { background: #fef3c7; color: #d97706; }
.goal-priority.medium { background: #e0e7ff; color: #4f46e5; }
.goal-priority.low { background: #f3f4f6; color: #6b7280; }

.goal-progress { margin-top: 10px; }
.goal-progress-bar { height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; }
.goal-progress-fill { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 3px; }
.goal-progress-text { font-size: 0.75rem; color: #888; margin-top: 6px; text-align: right; }
.goal-deadline { font-size: 0.75rem; color: #667eea; margin-top: 8px; }

.memory-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
}

.memory-type { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.7rem; font-weight: 600; color: #667eea; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.memory-content { font-size: 0.9rem; color: #1a1a2e; }
.memory-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.7rem; color: #888; }

.metric-section { margin-bottom: 20px; }
.metric-section-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.8rem; font-weight: 600; color: #667eea; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e9ecef; }
.metric-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.metric-label { font-size: 0.9rem; color: #666; }
.metric-value { font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; color: var(--cyan); }

/* Side panel text colors - ensure visibility on white background */
.side-panel .metric-label { color: #333 !important; font-size: 0.9rem; }
.side-panel .metric-value { color: #000 !important; font-size: 0.9rem; }
.side-panel .metric-section-title { color: #667eea !important; }

.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
    background: rgba(0,212,255,0.2);
    border: 2px solid var(--panel-border);
    border-radius: 13px;
    cursor: pointer;
}

.toggle-switch.active { background: var(--red); border-color: var(--red); }
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: all 0.3s; }
.toggle-switch.active::after { left: 26px; }

/* OVERDRIVE OVERLAY */
.overdrive-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(0,212,255,0.3), transparent 60%), rgba(0,0,0,0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 950;
}

.overdrive-overlay.show { display: flex; animation: overdriveIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.overdrive-container {
    position: relative;
    width: min(900px, 95%);
    padding: 40px;
    border-radius: 30px;
    border: 3px solid var(--red);
    background: radial-gradient(circle at 0 0, rgba(0,212,255,0.2), transparent 50%), rgba(0,8,12,0.98);
    box-shadow: 0 0 100px var(--red-glow);
}

.overdrive-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--red);
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.3s;
}

.overdrive-close:hover { background: var(--red); transform: rotate(90deg) scale(1.1); }

.overdrive-header { text-align: center; margin-bottom: 30px; }

.overdrive-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 6px;
    background: linear-gradient(135deg, var(--red), var(--gold), var(--red));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: logoShine 3s linear infinite;
}

.overdrive-subtitle { font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; color: var(--cyan); letter-spacing: 3px; }

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

.overdrive-brain-section {
    padding: 30px;
    border-radius: 20px;
    border: 2px solid var(--panel-border);
    background: linear-gradient(180deg, rgba(0,212,255,0.1), transparent);
    text-align: center;
}

.overdrive-brain-core {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 4px solid var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    box-shadow: 0 0 50px var(--red-glow);
    animation: overdriveBrainPulse 1.5s ease-in-out infinite;
}

.overdrive-wave { display: flex; justify-content: center; gap: 6px; margin: 20px 0; }

.overdrive-wave-bar {
    width: 6px;
    height: 30px;
    background: var(--red);
    border-radius: 3px;
    animation: overdriveWave 1s ease-in-out infinite;
}

.overdrive-wave-bar:nth-child(2) { animation-delay: 0.1s; }
.overdrive-wave-bar:nth-child(3) { animation-delay: 0.2s; }
.overdrive-wave-bar:nth-child(4) { animation-delay: 0.3s; }
.overdrive-wave-bar:nth-child(5) { animation-delay: 0.4s; }

.overdrive-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.overdrive-metric { padding: 15px; border-radius: 12px; background: rgba(0,212,255,0.1); border: 1px solid var(--panel-border); }
.overdrive-metric-label { font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 5px; }
.overdrive-metric-value { font-family: 'Share Tech Mono', monospace; font-size: 1.2rem; color: var(--cyan); }

.overdrive-modules-section { padding: 30px; border-radius: 20px; border: 2px solid var(--panel-border); background: rgba(0,0,0,0.3); }
.overdrive-modules-title { font-family: 'Orbitron', sans-serif; font-size: 1rem; color: var(--red); letter-spacing: 2px; margin-bottom: 20px; }
.overdrive-module-list { list-style: none; }
.overdrive-module-item { padding: 12px 0; border-bottom: 1px solid var(--panel-border); color: var(--text-secondary); font-size: 0.9rem; }
.overdrive-module-item::before { content: '⚡'; margin-right: 10px; color: var(--red); }

.overdrive-badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.overdrive-badge { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; padding: 6px 14px; border-radius: 20px; border: 2px solid var(--panel-border); text-transform: uppercase; }
.overdrive-badge.active { border-color: var(--red); color: var(--red); }
.overdrive-badge.safe { border-color: var(--cyan); color: var(--cyan); }

/* MODALS */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
    pointer-events: auto;
}

.modal.show { display: flex; animation: modalIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); pointer-events: auto !important; }

.modal-content {
    background: linear-gradient(180deg, rgba(0,15,20,0.99), rgba(0,8,12,0.99));
    border: 3px solid var(--red);
    border-radius: 25px;
    padding: 35px;
    max-width: 500px;
    position: relative;
    z-index: 99999999;
    pointer-events: auto !important;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 0 80px var(--red-glow);
}

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid var(--panel-border); }
.modal-title {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}
.modal-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.3s;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.modal-close:hover { color: #ffffff; transform: rotate(90deg); background: rgba(255,255,255,0.1); }
.modal-close:active { transform: scale(0.9); background: rgba(255,255,255,0.15); }

.modal-input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    letter-spacing: -0.01em;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal-input:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
    background: rgba(255, 255, 255, 0.15);
}
.modal-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: var(--font-weight-normal);
}

.modal-select {
    width: 100%;
    padding: 14px 18px;
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    color: #1a1a1a;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    letter-spacing: -0.01em;
    margin-bottom: 15px;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    transition: border-color 0.2s ease;
}
.modal-select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.modal-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;

    /* Premium button typography */
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}

.modal-btn:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); background: linear-gradient(135deg, #4a4a4a, #3a3a3a); }
.modal-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.modal-btn.small {
    padding: 10px 15px;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.modal-btn.warning {
    background: linear-gradient(135deg, #00e5ff, #cc7700);
    border-color: #00e5ff;
    box-shadow: 0 0 20px rgba(255,153,0,0.3);
}
.modal-btn.warning:hover {
    box-shadow: 0 0 30px rgba(255,153,0,0.5);
}

.modal-btn.danger {
    background: linear-gradient(135deg, #00e5ff, #007799);
    border-color: #00e5ff;
    box-shadow: 0 0 20px rgba(255,51,51,0.3);
}
.modal-btn.danger:hover {
    box-shadow: 0 0 30px rgba(255,51,51,0.5);
}

/* Video Generation Modal Styles */
.modal-field {
    margin-bottom: 15px;
}
.modal-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
}
.modal-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 8px;
    background: rgba(0,229,255,0.2);
    border-radius: 4px;
    outline: none;
}
.modal-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--red);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 15px var(--red-glow);
}
.slider-value {
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    min-width: 40px;
}
.aspect-buttons {
    display: flex;
    gap: 10px;
}
.aspect-btn {
    padding: 10px 20px;
    background: rgba(0,0,0,0.4);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.aspect-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}
.aspect-btn.active {
    background: rgba(0,229,255,0.15);
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 0 15px var(--red-glow-subtle);
}
.file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: rgba(0,0,0,0.2);
}
.file-upload-area:hover {
    border-color: var(--cyan);
    background: rgba(0,229,255,0.05);
}
.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.upload-placeholder .upload-icon {
    font-size: 2.5rem;
}
.upload-placeholder .upload-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.upload-preview {
    max-width: 100%;
    max-height: 150px;
    border-radius: 10px;
}
.video-result {
    margin-top: 15px;
}
.video-result video {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0,229,255,0.3);
}
/* Chat video display */
.chat-video {
    max-width: 100%;
    border-radius: 15px;
    margin-top: 10px;
    box-shadow: 0 0 20px rgba(0,229,255,0.2);
}

.upload-zone {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s;
}

.upload-zone:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.5); }
.upload-zone.dragover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); }

.upload-icon { font-size: 4rem; margin-bottom: 20px; animation: uploadIconFloat 2s ease-in-out infinite; }

.upload-text { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.upload-hint { font-size: 0.9rem; color: var(--text-tertiary); }

.file-list { max-height: 200px; overflow-y: auto; margin-bottom: 20px; }
.file-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: rgba(0,212,255,0.1); border: 1px solid var(--panel-border); border-radius: 10px; margin-bottom: 10px; }
.file-name { font-weight: 700; }
.file-size { font-size: 0.75rem; color: var(--text-tertiary); }
.file-remove { background: rgba(0,212,255,0.3); border: 1px solid var(--red); color: white; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.file-remove:hover { background: var(--red); }

.image-result { margin-top: 20px; text-align: center; }
.generated-image { max-width: 100%; border-radius: 15px; border: 3px solid var(--red); box-shadow: 0 0 40px var(--red-glow); }

/* TOAST */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: white;
    padding: 18px 35px;
    border-radius: 15px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    box-shadow: 0 0 40px var(--red-glow);
    z-index: 2000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 2px solid var(--red-bright);
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: linear-gradient(135deg, #00aa00, #006600); border-color: var(--green); }
.toast.error { background: linear-gradient(135deg, #007799, #660000); }

/* LOADING */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.loading-overlay.show { display: flex; }

.loading-spinner {
    width: 80px;
    height: 80px;
    border: 5px solid var(--panel-border);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

.loading-text { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; color: var(--red); letter-spacing: 3px; text-align: center; }

/* MOBILE MENU TOGGLE - just lines, no box */
.mobile-toggle {
    display: none;
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 1.3rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    color: #ffffff;
    transition: all 0.2s ease;
}
.mobile-toggle:active {
    transform: scale(0.95);
    background: rgba(255,255,255,0.1);
}

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 1100; }
.sidebar-overlay.show { display: block; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 5px; }

/* ================================================================
   ⚔️ ULTIMATE DEBATE ARENA - MORTAL KOMBAT SUPREME EDITION
   ================================================================ */
.debate-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,25,35,0.98) 0%, rgba(0,0,0,0.99) 100%);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.debate-overlay.show {
    display: flex;
    animation: debateFadeIn 0.5s ease;
}

/* ================================================================
   🎮 GAME HUB OVERLAY - Neural Arena
   ================================================================ */
.game-hub-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,15,25,0.98) 0%, rgba(0,0,0,0.99) 100%);
    z-index: 10000;
    display: none;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.game-hub-overlay.show {
    display: flex;
    animation: debateFadeIn 0.3s ease;
}

/* Particle Canvas */
.debate-particles-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Arena Background Effects */
.arena-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.arena-flames {
    position: absolute;
    bottom: 0;
    width: 300px;
    height: 500px;
    background: linear-gradient(0deg, rgba(0,212,255,0.7), rgba(255,50,0,0.4), rgba(0,212,255,0.2), transparent);
    filter: blur(30px);
    animation: flameFlicker 0.3s ease-in-out infinite alternate;
}

.flame-left { left: -50px; }
.flame-right { right: -50px; }

.arena-sparks {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(2px 2px at 10% 20%, rgba(255,200,0,0.9), transparent),
        radial-gradient(3px 3px at 25% 45%, rgba(0,212,255,0.9), transparent),
        radial-gradient(2px 2px at 40% 15%, rgba(255,200,0,0.9), transparent),
        radial-gradient(2px 2px at 55% 70%, rgba(255,150,0,0.9), transparent),
        radial-gradient(3px 3px at 70% 35%, rgba(0,212,255,0.9), transparent),
        radial-gradient(2px 2px at 85% 55%, rgba(255,200,0,0.9), transparent),
        radial-gradient(2px 2px at 95% 25%, rgba(255,150,0,0.9), transparent);
    animation: sparkFloat 2s ease-in-out infinite;
}

.arena-lightning {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    opacity: 0;
}

.arena-lightning.flash {
    opacity: 1;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.3), transparent 70%);
    animation: lightningFlash 0.15s ease;
}

.arena-chain {
    position: absolute;
    top: 0;
    width: 20px;
    height: 100%;
    background: 
        repeating-linear-gradient(180deg, 
            rgba(100,100,100,0.8) 0px, 
            rgba(60,60,60,0.9) 20px,
            rgba(100,100,100,0.8) 40px);
    filter: drop-shadow(0 0 10px rgba(0,212,255,0.5));
}

.chain-left { left: 30px; transform: rotate(-5deg); }
.chain-right { right: 30px; transform: rotate(5deg); }

/* Announcer Voice Box */
.announcer-voice-box {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 5px;
    align-items: center;
    padding: 10px 30px;
    background: rgba(0,0,0,0.8);
    border: 2px solid #00e5ff;
    border-radius: 30px;
    z-index: 100;
}

.announcer-voice-box.active {
    display: flex;
    animation: voiceBoxPulse 0.5s ease-in-out infinite;
}

.voice-wave {
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #00e5ff, #00d4ff);
    border-radius: 2px;
    animation: voiceWave 0.3s ease-in-out infinite;
}

.voice-wave:nth-child(2) { animation-delay: 0.1s; }
.voice-wave:nth-child(3) { animation-delay: 0.2s; }

.debate-arena {
    width: 98%;
    max-width: 1400px;
    height: 98vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    position: relative;
    z-index: 2;
}

/* Logo & Header */
.debate-logo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo-dragon {
    font-size: 3rem;
    animation: dragonFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(0,212,255,0.8));
}

.dragon-left { animation-delay: 0s; }
.dragon-right { animation-delay: 1s; transform: scaleX(-1); }

.dragon-right { 
    animation-name: dragonFloatRight;
}

.logo-text {
    text-align: center;
}

.debate-header {
    text-align: center;
    margin-bottom: 5px;
}

.debate-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 12px;
    background: linear-gradient(135deg, #00d4ff, #00e5ff, #00ffc8, #00e5ff, #00d4ff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleFire 2s ease infinite;
    filter: drop-shadow(0 0 30px rgba(0,212,255,0.8));
}

.debate-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 12px;
    color: #00d4ff;
    text-shadow: 0 0 20px rgba(0,212,255,0.5);
    margin-top: 5px;
}

.debate-topic-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.topic-icon {
    font-size: 1.5rem;
    animation: iconPulse 1s ease-in-out infinite;
}

.debate-topic {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: #00ffcc;
    padding: 8px 25px;
    border: 2px solid rgba(0,255,200,0.5);
    border-radius: 30px;
    background: rgba(0,255,200,0.1);
    text-shadow: 0 0 15px rgba(0,255,200,0.6);
    max-width: 500px;
    box-shadow: 0 0 30px rgba(0,255,200,0.2);
}

.debate-mode-indicator {
    margin-top: 8px;
    padding: 5px 15px;
    background: rgba(0,212,255,0.2);
    border: 1px solid rgba(0,212,255,0.5);
    border-radius: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
}

.mode-label { color: #888; }
.mode-value { color: #66e8ff; letter-spacing: 3px; }

/* STAGE */
.debate-stage {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    min-height: 250px;
}

/* FIGHTERS */
.debate-fighter {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: all 0.5s ease;
}

.debate-fighter.dead {
    opacity: 0.3;
    filter: grayscale(1);
    transform: scale(0.7) rotate(10deg);
}

.debate-fighter.winner {
    transform: scale(1.15);
    filter: drop-shadow(0 0 50px gold);
}

.fighter-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(60px);
    animation: fighterGlow 2s ease-in-out infinite;
    z-index: -1;
}

.fighter-left .fighter-glow { background: rgba(0,212,255,0.6); }
.fighter-right .fighter-glow { background: rgba(0,150,255,0.6); }

.fighter-aura {
    position: absolute;
    width: 180px;
    height: 220px;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: -1;
}

.fighter-aura.active {
    opacity: 1;
    animation: auraFlare 0.5s ease infinite;
}

.fighter-left .fighter-aura { 
    background: radial-gradient(ellipse, rgba(0,212,255,0.8), transparent 70%);
}
.fighter-right .fighter-aura { 
    background: radial-gradient(ellipse, rgba(0,150,255,0.8), transparent 70%);
}

.fighter-power-meter {
    position: absolute;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 120px;
    background: rgba(0,0,0,0.7);
    border: 2px solid rgba(255,200,0,0.5);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.fighter-right .fighter-power-meter {
    left: auto;
    right: -35px;
}

.power-fill {
    width: 100%;
    background: linear-gradient(0deg, #00d4ff, #00ffc8, #00ff00);
    transition: height 0.3s ease;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 0 20px rgba(255,200,0,0.8);
}

.power-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    color: #00ffc8;
    white-space: nowrap;
    font-family: 'Orbitron', sans-serif;
}

.fighter-hologram {
    width: 150px;
    height: 180px;
    position: relative;
    animation: hologramFloat 3s ease-in-out infinite;
}

.fighter-body {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fighter-head {
    font-size: 4rem;
    animation: headBob 2s ease-in-out infinite;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 20px currentColor);
}

.fighter-head.hit {
    animation: headHit 0.3s ease !important;
}

.fighter-torso {
    width: 70px;
    height: 50px;
    background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
    border-radius: 12px;
    margin-top: -10px;
    position: relative;
    overflow: hidden;
}

.torso-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.3), transparent);
    animation: torsoGlow 2s ease-in-out infinite;
}

.fighter-left .fighter-torso {
    border: 2px solid rgba(0,212,255,0.7);
    box-shadow: 0 0 30px rgba(0,212,255,0.5), inset 0 0 20px rgba(0,212,255,0.3);
}

.fighter-right .fighter-torso {
    border: 2px solid rgba(0,150,255,0.7);
    box-shadow: 0 0 30px rgba(0,150,255,0.5), inset 0 0 20px rgba(0,150,255,0.3);
}

.fighter-arm {
    position: absolute;
    width: 14px;
    height: 55px;
    background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    border-radius: 12px;
    top: 70px;
    transition: all 0.2s ease;
}

.fighter-arm.arm-left { left: 25px; transform: rotate(25deg); transform-origin: top center; }
.fighter-arm.arm-right { right: 25px; transform: rotate(-25deg); transform-origin: top center; }

.fighter-left .fighter-arm { border: 2px solid rgba(0,212,255,0.5); }
.fighter-right .fighter-arm { border: 2px solid rgba(0,150,255,0.5); }

.fighter-arm.punching {
    animation: punchAnim 0.3s ease !important;
}

.fighter-shadow {
    position: absolute;
    bottom: -10px;
    width: 80px;
    height: 20px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.6), transparent);
    border-radius: 50%;
}

.fighter-platform {
    width: 110px;
    height: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    border-radius: 50%;
    margin-top: 10px;
    box-shadow: 0 0 30px rgba(255,255,255,0.1);
}

.fighter-nameplate {
    text-align: center;
    margin-top: 8px;
}

.fighter-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 4px;
}

.fighter-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    opacity: 0.7;
}

.fighter-left .fighter-name { color: #00d4ff; text-shadow: 0 0 25px rgba(0,212,255,0.8); }
.fighter-left .fighter-title { color: #66e8ff; }
.fighter-right .fighter-name { color: #00aaff; text-shadow: 0 0 25px rgba(0,150,255,0.8); }
.fighter-right .fighter-title { color: #66ccff; }

.fighter-stance {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    padding: 4px 14px;
    border-radius: 15px;
    margin-top: 5px;
    letter-spacing: 2px;
}

.fighter-left .fighter-stance { background: rgba(0,212,255,0.3); border: 1px solid rgba(0,212,255,0.7); color: #66e8ff; }
.fighter-right .fighter-stance { background: rgba(0,150,255,0.3); border: 1px solid rgba(0,150,255,0.7); color: #66ccff; }

/* Health Bar - Enhanced */
.fighter-health {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.health-bar {
    width: 150px;
    height: 20px;
    background: rgba(0,0,0,0.7);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.4);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.5);
    position: relative;
}

.health-fill {
    height: 100%;
    transition: width 0.5s ease;
    border-radius: 8px;
    position: relative;
    z-index: 2;
}

.fighter-left .health-fill {
    background: linear-gradient(90deg, #00d4ff, #66e8ff, #00d4ff);
    box-shadow: 0 0 15px rgba(0,212,255,0.8), inset 0 2px 10px rgba(255,255,255,0.3);
}

.fighter-right .health-fill {
    background: linear-gradient(90deg, #0066ff, #00aaff, #0066ff);
    box-shadow: 0 0 15px rgba(0,100,255,0.8), inset 0 2px 10px rgba(255,255,255,0.3);
}

.health-damage {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: #00d4ff;
    transition: width 0.3s ease 0.2s;
    z-index: 1;
}

.health-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
    min-width: 45px;
}

/* Combo Counter */
.fighter-combo-counter {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.fighter-combo-counter.active {
    opacity: 1;
    animation: comboPopIn 0.3s ease;
}

.combo-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #00ffc8;
    text-shadow: 0 0 20px rgba(255,200,0,0.8), 0 0 40px rgba(0,212,255,0.6);
}

.combo-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    color: #00e5ff;
    letter-spacing: 3px;
}

.fighter-status {
    position: absolute;
    bottom: -40px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    padding: 3px 12px;
    border-radius: 10px;
    opacity: 0;
    transition: all 0.3s ease;
}

.fighter-status.show {
    opacity: 1;
    animation: statusPop 0.5s ease;
}

/* VS Symbol - EPIC */
.debate-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 120px;
    height: 120px;
}

.vs-outer-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(0,212,255,0.5);
    border-radius: 50%;
    animation: ringRotate 8s linear infinite;
}

.vs-inner-ring {
    position: absolute;
    width: 80%;
    height: 80%;
    border: 3px solid rgba(255,200,0,0.5);
    border-radius: 50%;
    animation: ringRotate 6s linear infinite reverse;
}

.vs-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(180deg, #00e5ff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(0,212,255,0.8));
    z-index: 2;
}

.vs-lightning {
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.2), transparent 50%);
    animation: vsLightning 2s ease-in-out infinite;
}

.vs-sparks {
    position: absolute;
    width: 200%;
    height: 200%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255,200,0,0.9), transparent),
        radial-gradient(2px 2px at 80% 70%, rgba(0,212,255,0.9), transparent),
        radial-gradient(2px 2px at 50% 20%, rgba(255,255,255,0.9), transparent);
    animation: vsSparks 1s ease-in-out infinite;
}

.fighter-left .health-fill {
    background: linear-gradient(90deg, #00d4ff, #00d4ff, #66e8ff);
    box-shadow: 0 0 15px rgba(0,212,255,0.6);
}

.fighter-right .health-fill {
    background: linear-gradient(90deg, #0088ff, #00ccff, #66ddff);
    box-shadow: 0 0 15px rgba(0,150,255,0.6);
}

.health-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    min-width: 45px;
}

.debate-vs {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    position: relative;
}

.vs-text {
    background: linear-gradient(135deg, #00d4ff, #00ffc8, #00d4ff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: vsFire 1s ease-in-out infinite;
}

.vs-lightning {
    position: absolute;
    width: 150px;
    height: 150px;
    top: -50px;
    left: -50px;
    background: radial-gradient(circle, rgba(255,200,0,0.4) 0%, transparent 70%);
    animation: lightningFlash 0.3s ease-in-out infinite;
}

/* ARGUMENT BOXES - ULTRA ENHANCED */
.debate-arguments {
    width: 100%;
    display: flex;
    gap: 25px;
    margin: 10px 0;
}

.argument-box {
    flex: 1;
    padding: 15px 20px;
    border-radius: 20px;
    background: rgba(0,0,0,0.6);
    min-height: 130px;
    max-height: 150px;
    overflow-y: auto;
    position: relative;
    backdrop-filter: blur(10px);
}

.argument-left {
    border: 2px solid rgba(0,212,255,0.6);
    border-left: 6px solid #00d4ff;
    box-shadow: 
        inset 0 0 40px rgba(0,212,255,0.15),
        0 0 30px rgba(0,212,255,0.2);
}

.argument-right {
    border: 2px solid rgba(0,150,255,0.6);
    border-right: 6px solid #00aaff;
    box-shadow: 
        inset 0 0 40px rgba(0,150,255,0.15),
        0 0 30px rgba(0,150,255,0.2);
}

.argument-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.argument-avatar {
    font-size: 2rem;
    filter: drop-shadow(0 0 10px currentColor);
}

.argument-info {
    flex: 1;
}

.argument-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 3px;
    font-weight: 700;
}

.argument-left .argument-label { color: #66e8ff; }
.argument-right .argument-label { color: #66aaff; }

.argument-typing {
    display: none;
    gap: 4px;
}

.argument-typing.active {
    display: flex;
}

.argument-typing span {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    animation: typingDot 1s ease-in-out infinite;
}

.argument-typing span:nth-child(2) { animation-delay: 0.2s; }
.argument-typing span:nth-child(3) { animation-delay: 0.4s; }

.argument-strength {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.argument-strength span {
    font-size: 0.5rem;
    color: #888;
    letter-spacing: 1px;
}

.strength-bar {
    width: 60px;
    height: 8px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 4px;
}

.argument-left .strength-fill {
    background: linear-gradient(90deg, #00d4ff, #66e8ff);
}

.argument-right .strength-fill {
    background: linear-gradient(90deg, #0066ff, #66aaff);
}

.argument-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #ddd;
    text-shadow: 0 0 5px rgba(255,255,255,0.1);
}

.argument-stats {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.stat-item {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

.stat-icon {
    font-size: 0.8rem;
}

/* Match Info Bar */
.debate-match-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 8px 0;
    padding: 8px 30px;
    background: rgba(0,0,0,0.4);
    border-radius: 30px;
    border: 1px solid rgba(255,200,0,0.3);
}

.round-display, .timer-display, .score-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: #00ffc8;
}

.round-icon, .timer-icon {
    font-size: 1.2rem;
}

.score-display {
    gap: 15px;
}

.score-axiom {
    color: #66e8ff;
    font-size: 1.5rem;
    font-weight: 900;
    text-shadow: 0 0 15px rgba(0,212,255,0.8);
}

.score-contrarian {
    color: #66aaff;
    font-size: 1.5rem;
    font-weight: 900;
    text-shadow: 0 0 15px rgba(0,150,255,0.8);
}

.score-separator {
    color: #888;
    font-size: 1.2rem;
}

/* ULTRA CONTROLS */
.debate-controls {
    display: flex;
    gap: 15px;
    margin: 10px 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.control-center {
    display: flex;
    gap: 10px;
}

.debate-btn {
    padding: 12px 20px;
    border-radius: 15px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
    overflow: hidden;
}

.btn-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.debate-btn:hover .btn-glow {
    opacity: 1;
}

.btn-icon {
    font-size: 1.5rem;
}

.btn-text {
    font-size: 0.75rem;
}

.btn-sub {
    font-size: 0.5rem;
    opacity: 0.6;
}

.vote-btn {
    min-width: 140px;
}

.vote-axiom {
    background: linear-gradient(135deg, rgba(0,212,255,0.4), rgba(0,212,255,0.1));
    border-color: #00d4ff;
    color: #66e8ff;
}

.vote-axiom:hover {
    background: linear-gradient(135deg, rgba(0,212,255,0.6), rgba(0,212,255,0.3));
    box-shadow: 0 0 50px rgba(0,212,255,0.6), inset 0 0 30px rgba(0,212,255,0.3);
    transform: scale(1.08) translateY(-3px);
}

.vote-contrarian {
    background: linear-gradient(135deg, rgba(0,150,255,0.4), rgba(0,150,255,0.1));
    border-color: #00aaff;
    color: #66ccff;
}

.vote-contrarian:hover {
    background: linear-gradient(135deg, rgba(0,150,255,0.6), rgba(0,150,255,0.3));
    box-shadow: 0 0 50px rgba(0,150,255,0.6), inset 0 0 30px rgba(0,150,255,0.3);
    transform: scale(1.08) translateY(-3px);
}

.next-btn {
    background: linear-gradient(135deg, rgba(255,200,0,0.4), rgba(255,150,0,0.1));
    border-color: #00ffc8;
    color: #66ffe8;
}

.next-btn:hover {
    background: linear-gradient(135deg, rgba(255,200,0,0.6), rgba(255,150,0,0.3));
    box-shadow: 0 0 50px rgba(255,200,0,0.6);
    transform: scale(1.05);
}

.special-btn {
    background: linear-gradient(135deg, rgba(150,0,255,0.4), rgba(100,0,200,0.1));
    border-color: #aa00ff;
    color: #cc66ff;
}

.special-btn:hover {
    background: linear-gradient(135deg, rgba(150,0,255,0.6), rgba(100,0,200,0.3));
    box-shadow: 0 0 50px rgba(150,0,255,0.6);
    transform: scale(1.05);
}

.special-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.auto-btn {
    background: linear-gradient(135deg, rgba(0,200,150,0.4), rgba(0,150,100,0.1));
    border-color: #00cc99;
    color: #66ffcc;
}

.auto-btn:hover {
    background: linear-gradient(135deg, rgba(0,200,150,0.6), rgba(0,150,100,0.3));
    box-shadow: 0 0 50px rgba(0,200,150,0.6);
    transform: scale(1.05);
}

.auto-btn.active {
    background: linear-gradient(135deg, rgba(0,200,150,0.8), rgba(0,150,100,0.5));
    animation: autoPulse 1s ease-in-out infinite;
}

/* Exit Button */
.debate-exit {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 10px 20px;
    background: rgba(100,100,100,0.4);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 25px;
    color: #aaa;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.debate-exit:hover {
    background: rgba(0,212,255,0.4);
    border-color: #00d4ff;
    color: #fff;
    box-shadow: 0 0 20px rgba(0,212,255,0.5);
}

/* Fight Announcer - EPIC */
.fight-announcer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 6rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 
        0 0 50px rgba(0,212,255,0.9),
        0 0 100px rgba(0,212,255,0.7),
        0 0 150px rgba(255,200,0,0.5);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    letter-spacing: 15px;
    text-align: center;
}

.fight-announcer.show {
    animation: announcerSlam 1.5s ease-out forwards;
}

.announcer-sub {
    font-size: 1.5rem;
    color: #00ffc8;
    letter-spacing: 5px;
    margin-top: 10px;
}

/* Hit Effects Container */
.hit-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}

/* Special Move Overlay */
.special-move-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(150,0,255,0.3), rgba(0,0,0,0.9));
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 150;
}

.special-move-overlay.show {
    display: flex;
    animation: specialOverlayIn 0.5s ease;
}

.special-move-content {
    text-align: center;
}

.special-move-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 15px;
    background: linear-gradient(135deg, #aa00ff, #00ffc8, #00ffc8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: specialNamePulse 0.3s ease infinite;
}

.special-move-anim {
    font-size: 8rem;
    margin-top: 30px;
    animation: specialAnim 1s ease-in-out infinite;
}

/* Attack animations */
.fighter-attacking {
    animation: attackLunge 0.5s ease-out;
}

.fighter-right.fighter-attacking {
    animation: attackLungeRight 0.5s ease-out;
}

.fighter-hit {
    animation: fighterHit 0.4s ease;
}

.fighter-right.fighter-hit {
    animation: fighterHitRight 0.4s ease;
}

/* FATALITY OVERLAY */
.fatality-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.95);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.fatality-overlay.show {
    display: flex;
    animation: fatalityFadeIn 0.5s ease;
}

.fatality-content {
    text-align: center;
}

.fatality-winner {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: #00ff00;
    letter-spacing: 8px;
    margin-bottom: 20px;
    animation: winnerGlow 1s ease-in-out infinite;
}

.fatality-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 8rem;
    font-weight: 900;
    letter-spacing: 15px;
    background: linear-gradient(180deg, #00d4ff, #005577);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fatalityPulse 0.5s ease-in-out infinite;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(0,212,255,0.8));
}

.fatality-victim {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: #00d4ff;
    letter-spacing: 5px;
    margin-top: 20px;
}

.fatality-scene {
    margin-top: 30px;
}

.fatality-emoji {
    font-size: 8rem;
    animation: sceneShake 0.1s ease-in-out infinite;
}

.fatality-move-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: #00e5ff;
    letter-spacing: 5px;
    margin-top: 20px;
    text-shadow: 0 0 20px rgba(0,212,255,0.8);
}

.fatality-description {
    font-size: 1rem;
    color: #888;
    margin-top: 10px;
}

/* Topic Selector */
.topic-selector-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    overflow-y: auto;
}

.topic-selector-content {
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.topic-selector-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 8px;
    background: linear-gradient(135deg, #00d4ff, #00e5ff, #00ffc8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    animation: titleFire 2s ease infinite;
}

.topic-selector-subtitle {
    font-family: 'Share Tech Mono', monospace;
    color: #888;
    margin-bottom: 30px;
}

.topic-custom-input {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.topic-custom-input input {
    flex: 1;
    padding: 15px 20px;
    border-radius: 10px;
    border: 2px solid rgba(0,212,255,0.4);
    background: rgba(20,0,30,0.9);
    color: #fff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
}

.topic-custom-input input:focus {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0,212,255,0.3);
}

.topic-custom-input button {
    padding: 15px 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00d4ff, #cc0033);
    border: none;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.topic-custom-input button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0,212,255,0.5);
}

.topic-divider {
    color: #666;
    font-size: 0.9rem;
    margin: 20px 0;
    letter-spacing: 3px;
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}

.topic-option {
    padding: 15px 20px;
    border-radius: 10px;
    background: rgba(30,0,50,0.8);
    border: 2px solid rgba(0,212,255,0.3);
    color: #ddd;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.topic-option:hover {
    background: rgba(0,212,255,0.2);
    border-color: #00d4ff;
    transform: translateY(-2px);
}

.topic-random-btn {
    padding: 15px 40px;
    border-radius: 30px;
    background: linear-gradient(135deg, #00ffc8, #00ffc8);
    border: none;
    color: #000;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.topic-random-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255,200,0,0.5);
}

.topic-cancel-btn {
    padding: 10px 30px;
    border-radius: 20px;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
    color: #888;
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.topic-cancel-btn:hover {
    border-color: #00d4ff;
    color: #66e8ff;
}

/* Victory Screen */
.victory-screen {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(20,10,30,0.98), rgba(0,0,0,0.99));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: victoryFadeIn 0.5s ease;
}

.victory-content {
    text-align: center;
    padding: 40px;
}

.victory-crown {
    font-size: 5rem;
    animation: crownBounce 1s ease-in-out infinite;
}

.victory-icon {
    font-size: 6rem;
    margin: 20px 0;
}

.victory-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 10px;
    text-shadow: 0 0 50px currentColor;
    animation: victoryPulse 1s ease-in-out infinite;
}

.victory-topic {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: #888;
    margin-top: 15px;
    font-style: italic;
}

.victory-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 40px 0;
}

.stat-box {
    padding: 20px 30px;
    border-radius: 15px;
    min-width: 150px;
}

.stat-axiom {
    background: rgba(0,212,255,0.2);
    border: 2px solid rgba(0,212,255,0.5);
}

.stat-contrarian {
    background: rgba(0,150,255,0.2);
    border: 2px solid rgba(0,150,255,0.5);
}

.stat-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 3px;
}

.stat-axiom .stat-name { color: #66e8ff; }
.stat-contrarian .stat-name { color: #66aaff; }

.stat-hp {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.5rem;
    color: #fff;
    margin-top: 10px;
}

.stat-winner {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: #00ff00;
    margin-top: 10px;
    text-shadow: 0 0 10px rgba(0,255,0,0.5);
}

.stat-vs {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: #666;
}

.victory-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.victory-btn {
    padding: 15px 30px;
    border-radius: 10px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid;
}

.rematch-btn {
    background: linear-gradient(135deg, rgba(255,200,0,0.3), rgba(255,150,0,0.2));
    border-color: #00ffc8;
    color: #66ffe8;
}

.new-btn {
    background: linear-gradient(135deg, rgba(0,200,255,0.3), rgba(0,150,200,0.2));
    border-color: #00ccff;
    color: #66ddff;
}

.exit-btn {
    background: rgba(100,100,100,0.3);
    border-color: rgba(255,255,255,0.3);
    color: #aaa;
}

.victory-btn:hover {
    transform: scale(1.05);
}

/* Combo & Damage Animations */

/* Vote button pulse when ready */
.pulse-ready {
    animation: pulseReady 1s ease-in-out infinite !important;
}

/* Critical hit flash */
.critical-hit {
    animation: criticalFlash 0.3s ease !important;
}

/* Finishing move animation */
.finishing-move {
    animation: finishingMove 0.8s ease-in-out !important;
}

.fighter-right.finishing-move {
    animation: finishingMoveRight 0.8s ease-in-out !important;
}

/* Screen shake */
.screen-shake {
    animation: screenShake 0.5s ease-in-out;
}

/* Announcer subtitle */
.announcer-sub {
    font-size: 1.5rem;
    color: #00ffc8;
    margin-top: 10px;
}

/* ================================================================
   🎬 CINEMATIC MODE - HOLLYWOOD BLOCKBUSTER EXPERIENCE
   ================================================================ */
.cinematic-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.cinematic-overlay.show {
    display: flex;
    animation: cinematicFadeIn 1.5s ease;
}

.cinematic-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 30%, rgba(0,40,55,0.3) 0%, transparent 50%),
                radial-gradient(ellipse at 20% 80%, rgba(0,50,100,0.2) 0%, transparent 40%),
                radial-gradient(ellipse at 80% 80%, rgba(100,0,50,0.2) 0%, transparent 40%),
                #000;
}

/* Epic particle field */
.cinematic-particles {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,200,100,0.2), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(100,200,255,0.3), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(100,220,255,0.2), transparent),
        radial-gradient(1px 1px at 160px 30px, rgba(255,255,255,0.2), transparent);
    background-size: 200px 100px;
    animation: particleFloat 20s linear infinite;
    opacity: 0.5;
}

/* Horizontal lens flares */
.cinematic-flare {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,150,50,0.8) 20%, 
        rgba(255,255,255,1) 50%, 
        rgba(100,200,255,0.8) 80%, 
        transparent 100%);
    top: 50%;
    opacity: 0;
    filter: blur(1px);
    animation: flarePass 4s ease-in-out infinite;
}

.cinematic-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.15) 2px,
        rgba(0,0,0,0.15) 4px
    );
    pointer-events: none;
    z-index: 10;
    animation: scanlineMove 0.1s linear infinite;
}

.cinematic-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.95) 100%);
    pointer-events: none;
    z-index: 5;
}

/* Letterbox bars for that movie feel */
.cinematic-letterbox-top,
.cinematic-letterbox-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 12%;
    background: #000;
    z-index: 20;
}

.cinematic-letterbox-top {
    top: 0;
    border-bottom: 1px solid rgba(0,212,255,0.3);
    box-shadow: 0 5px 30px rgba(0,0,0,0.8);
}

.cinematic-letterbox-bottom {
    bottom: 0;
    border-top: 1px solid rgba(0,212,255,0.3);
    box-shadow: 0 -5px 30px rgba(0,0,0,0.8);
}

.cinematic-header {
    text-align: center;
    margin-bottom: 60px;
    animation: cinematicHeaderIn 2s ease;
    position: relative;
    z-index: 15;
}

.cinematic-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: 20px;
    background: linear-gradient(180deg, #fff 0%, #00e5ff 50%, #00d4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(0,212,255,0.8)) drop-shadow(0 0 60px rgba(255,50,0,0.5));
    animation: logoEpic 3s ease-in-out infinite, logoPulse 0.1s ease-in-out infinite;
    position: relative;
}

.cinematic-logo::before {
    content: 'THE ORACLE';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,212,255,0.3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: glitchShift 5s ease-in-out infinite;
}

.cinematic-subtitle {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.8rem;
    letter-spacing: 15px;
    color: #00ffcc;
    margin-top: 20px;
    text-shadow: 0 0 30px rgba(0,255,200,0.8), 0 0 60px rgba(0,255,200,0.4);
    animation: subtitleGlow 2s ease-in-out infinite;
}

.cinematic-content {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    position: relative;
    z-index: 15;
}

.cinematic-reveal {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 10px;
    color: #fff;
    opacity: 0;
    animation: revealIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    text-shadow: 0 0 50px rgba(255,255,255,0.5);
}

.cinematic-stat {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 15px 0;
    opacity: 0;
    padding: 20px 40px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.cinematic-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    animation: statShine 2s ease-in-out infinite;
}

.cinematic-stat.positive {
    color: #00ff88;
    text-shadow: 0 0 40px rgba(0,255,100,0.8);
    background: rgba(0,255,100,0.1);
    border: 2px solid rgba(0,255,100,0.3);
}

.cinematic-stat.negative {
    color: #00d4ff;
    text-shadow: 0 0 40px rgba(0,212,255,0.8);
    background: rgba(0,212,255,0.1);
    border: 2px solid rgba(0,212,255,0.3);
}

.cinematic-stat.neutral {
    color: #00ffc8;
    text-shadow: 0 0 40px rgba(255,200,0,0.8);
    background: rgba(255,200,0,0.1);
    border: 2px solid rgba(255,200,0,0.3);
}

.cinematic-stats {
    display: flex;
    gap: 40px;
    margin-top: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.cinematic-footer {
    position: absolute;
    bottom: 15%;
    width: 70%;
    text-align: center;
    z-index: 15;
}

.cinematic-progress {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border: 1px solid rgba(0,212,255,0.3);
}

.cinematic-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00d4ff, #00e5ff, #00ffc8, #00ffcc);
    background-size: 200% 100%;
    animation: progressGradient 2s linear infinite;
    transition: width 0.3s ease;
    box-shadow: 0 0 20px rgba(255,150,0,0.8);
}

.cinematic-status {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: rgba(255,150,100,0.8);
    letter-spacing: 5px;
    margin-top: 20px;
    text-shadow: 0 0 10px rgba(0,212,255,0.5);
    animation: statusBlink 1s ease-in-out infinite;
}

.cinematic-skip {
    position: absolute;
    bottom: 5%;
    right: 5%;
    padding: 12px 25px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    color: rgba(255,255,255,0.5);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 25;
}

.cinematic-skip:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

/* Epic sound wave visualization */
.cinematic-soundwave {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 60px;
    z-index: 15;
}

.soundwave-bar {
    width: 4px;
    background: linear-gradient(180deg, #00d4ff, #00e5ff, #00ffc8);
    border-radius: 2px;
    animation: soundwave 0.5s ease-in-out infinite;
}

/* ================================================================
   MEMORY PALACE - Dark Sidebar UI (Claude-inspired)
   ================================================================ */
.memory-palace-overlay {
    position: fixed;
    inset: 0;
    background: #1a1a1a;
    z-index: 10000;
    display: none;
}

.memory-palace-overlay.show {
    display: flex;
    animation: palaceFadeIn 0.3s ease;
}

.palace-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    background: #1a1a1a;
}

/* ---- Sidebar Navigation ---- */
.palace-sidebar {
    width: 260px;
    min-width: 260px;
    background: #202020;
    border-right: 1px solid #333;
    display: flex;
    flex-direction: column;
}

.palace-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    color: #e0e0e0;
    border-bottom: 1px solid #333;
}

.palace-sidebar-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #e0e0e0;
}

.palace-sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.palace-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #999;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
}

.palace-nav-item:hover {
    background: #2a2a2a;
    color: #e0e0e0;
}

.palace-nav-item.active {
    background: #333;
    color: #fff;
    font-weight: 500;
}

.palace-nav-label {
    flex: 1;
}

.palace-nav-count {
    background: #444;
    color: #aaa;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 24px;
    text-align: center;
}

.palace-nav-item.active .palace-nav-count {
    background: #555;
    color: #ddd;
}

.palace-sidebar-bottom {
    padding: 8px;
    border-top: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.palace-nav-secondary {
    font-size: 0.85rem;
    color: #777;
    padding: 8px 14px;
}

.palace-nav-secondary:hover {
    color: #bbb;
}

.palace-nav-danger:hover {
    color: #ef5350 !important;
    background: rgba(239, 83, 80, 0.1);
}

/* ---- Main Content Area ---- */
.palace-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    position: relative;
    overflow: hidden;
}

.palace-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    color: #777;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.palace-close:hover {
    background: #333;
    color: #e0e0e0;
}

.palace-close:active {
    background: #444;
    transform: scale(0.95);
}

/* ---- Content Header ---- */
.palace-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.palace-content-header h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0;
}

.palace-content-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.palace-content-toolbar {
    display: flex;
    padding: 0 24px 8px;
    gap: 8px;
}

/* ---- Search Input ---- */
.palace-search-input {
    padding: 9px 14px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #e0e0e0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.88rem;
    width: 220px;
    transition: all 0.2s ease;
}

.palace-search-input:focus {
    outline: none;
    border-color: #666;
    background: #333;
}

.palace-search-input::placeholder {
    color: #666;
}

/* ---- Select Dropdown ---- */
.palace-select {
    padding: 9px 14px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #e0e0e0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.88rem;
    cursor: pointer;
}

.palace-select:focus {
    outline: none;
    border-color: #666;
}

.palace-select option {
    background: #2a2a2a;
    color: #e0e0e0;
}

/* ---- Buttons ---- */
.palace-btn {
    padding: 9px 18px;
    background: #e0e0e0;
    border: none;
    border-radius: 8px;
    color: #1a1a1a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.palace-btn:hover {
    background: #fff;
}

.palace-btn.primary {
    background: #e0e0e0;
    border: none;
    color: #1a1a1a;
}

.palace-btn.primary:hover {
    background: #fff;
}

.palace-btn.small {
    padding: 6px 14px;
    font-size: 0.8rem;
}

/* iOS Safari touch fix */
.ios-touch-btn {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.palace-btn.secondary {
    background: #333;
    color: #ccc;
}

.palace-btn.secondary:hover {
    background: #444;
    color: #fff;
}

.palace-btn.danger {
    background: rgba(239, 83, 80, 0.15);
    border: none;
    color: #ef5350;
}

.palace-btn.danger:hover {
    background: rgba(239, 83, 80, 0.25);
}

/* ---- Tab Content ---- */
.palace-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    flex-direction: column;
}

/* ---- Memories ---- */
.memories-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.memory-categories {
    display: none;
}

.category-header {
    display: none;
}

.small-btn {
    width: 28px;
    height: 28px;
    background: #555;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.small-btn:hover {
    background: #666;
}

.category-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 4px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.category-item:hover {
    background: #333;
    border-color: #555;
}

.category-item.active {
    background: #3a3a3a;
    border-color: #666;
}

.category-icon {
    font-size: 1.3rem;
}

.category-info {
    flex: 1;
}

.category-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #e0e0e0;
}

.category-count {
    font-size: 0.75rem;
    color: #777;
    margin-top: 2px;
}

/* Memory Items Panel */
.memory-items-panel {
    display: flex;
    flex-direction: column;
}

.memory-items-header {
    display: none;
}

.memory-items-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 24px;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #666;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    color: #666;
}

.memory-item {
    padding: 14px 16px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.memory-item:hover {
    background: #333;
    border-color: #555;
}

.memory-item-content {
    flex: 1;
    min-width: 0;
}

.memory-item-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #e0e0e0;
    margin-bottom: 4px;
}

.memory-item-date {
    font-size: 0.75rem;
    color: #666;
}

.memory-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.memory-item:hover .memory-item-actions {
    opacity: 1;
}

.memory-action-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: #888;
    font-size: 0.85rem;
    transition: all 0.15s;
}

.memory-action-btn:hover {
    background: #444;
    color: #e0e0e0;
}

.memory-action-btn.delete:hover {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
}

/* ---- Projects & Chats containers ---- */
.projects-container,
.chats-container {
    padding: 0;
}

.projects-header,
.chats-header {
    display: none;
}

.chats-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-search {
    padding: 9px 14px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #e0e0e0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.88rem;
    width: 220px;
    transition: all 0.2s ease;
}

.chat-search:focus {
    outline: none;
    border-color: #666;
    background: #333;
}

.chat-search::placeholder {
    color: #666;
}

/* ---- Cards Grid ---- */
.palace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 0 24px 24px;
}

.palace-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 24px 24px;
}

.palace-card {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.palace-card:hover {
    border-color: #555;
    background: #333;
}

.palace-card.active {
    border-color: #888;
    background: #333;
}

.palace-card-icon {
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.palace-card-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #e0e0e0;
    margin-bottom: 6px;
}

.palace-card-meta {
    font-size: 0.8rem;
    color: #777;
}

.palace-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    opacity: 0;
    transition: opacity 0.15s;
}

.palace-card:hover .palace-card-actions {
    opacity: 1;
}

.palace-item-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    color: #888;
    font-size: 0.85rem;
    transition: all 0.15s;
}

.palace-item-btn:hover {
    background: #444;
    color: #e0e0e0;
}

.palace-item-btn.delete:hover {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
}

/* ---- Chat List Items ---- */
.palace-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.palace-list-item:hover {
    background: #2a2a2a;
}

.palace-list-item.active {
    background: #333;
}

.palace-item-icon {
    font-size: 1.3rem;
    opacity: 0.7;
}

.palace-item-info {
    flex: 1;
    min-width: 0;
}

.palace-item-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.93rem;
    font-weight: 400;
    color: #e0e0e0;
}

.palace-item-meta {
    font-size: 0.78rem;
    color: #666;
    margin-top: 3px;
}

.palace-item-preview {
    font-size: 0.8rem;
    color: #555;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 500px;
}

.palace-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.palace-list-item:hover .palace-item-actions {
    opacity: 1;
}

/* ---- Footer (hidden) ---- */
.palace-footer { display: none; }
.palace-stats { display: none; }
.stat-item { display: none; }
.stat-icon { display: none; }
.palace-actions { display: none; }

/* ---- Category Delete Button ---- */
.category-delete {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    color: #666;
    font-size: 0.85rem;
    opacity: 0;
    transition: all 0.15s;
}

.category-item:hover .category-delete {
    opacity: 1;
}

.category-delete:hover {
    color: #ef5350;
}

@keyframes palaceFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ================================================================
   MEMORY PALACE - Mobile Responsive
   ================================================================ */
@media (max-width: 768px) {
    .palace-container {
        flex-direction: column;
    }

    .palace-sidebar {
        width: 100%;
        min-width: 100%;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid #333;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: env(safe-area-inset-top, 44px);
    }

    .palace-sidebar-brand {
        display: none;
    }

    .palace-sidebar-nav {
        flex-direction: row;
        padding: 8px;
        gap: 4px;
        flex: 1;
    }

    .palace-nav-item {
        flex-direction: column;
        gap: 4px;
        padding: 8px 14px;
        min-width: fit-content;
        font-size: 0.75rem;
        align-items: center;
    }

    .palace-nav-item svg {
        width: 20px;
        height: 20px;
    }

    .palace-nav-count {
        display: none;
    }

    .palace-sidebar-bottom {
        flex-direction: row;
        padding: 6px 8px;
        border-top: 1px solid #333;
        gap: 4px;
    }

    .palace-sidebar-bottom .palace-nav-item {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    .palace-close {
        top: env(safe-area-inset-top, 44px);
        right: 8px;
        z-index: 10001;
    }

    .palace-content-header {
        padding: 14px 16px 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .palace-content-header h2 {
        font-size: 1.2rem;
    }

    .palace-content-actions {
        width: 100%;
    }

    .palace-search-input {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .palace-content-toolbar {
        padding: 0 16px 8px;
    }

    .palace-grid {
        grid-template-columns: 1fr;
        padding: 0 16px 16px;
    }

    .palace-list {
        padding: 0 16px 16px;
    }

    .palace-list-item {
        padding: 12px;
    }

    .palace-item-preview {
        max-width: 200px;
    }

    .memory-items-list {
        padding: 0 16px 16px;
    }

    .palace-item-actions {
        opacity: 1;
    }

    .memory-item-actions {
        opacity: 1;
    }

    .palace-card-actions {
        opacity: 1;
    }
}

/* ================================================================
   ORACLE MODE - FULLSCREEN VOICE ORB
   ================================================================ */
.oracle-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    /* Pure black background so orbs pop */
    background: #000000;
    backdrop-filter: blur(30px);
    display: none;  /* Completely hide when not active */
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.oracle-overlay.show {
    display: flex;  /* Show when active */
    opacity: 1;
    visibility: visible;
}

/* Completely hide all glow effects when overlay is not visible */
.oracle-overlay:not(.show) .oracle-orb-container,
.oracle-overlay:not(.show) .oracle-orb,
.oracle-overlay:not(.show) .oracle-deep-glow,
.oracle-overlay:not(.show) .oracle-mid-glow,
.oracle-overlay:not(.show) .oracle-inner-glow,
.oracle-overlay:not(.show) .oracle-core-glow {
    display: none !important;
}
body.oracle-active .app-container {
    filter: blur(20px);
    pointer-events: none;
}
.oracle-orb-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
}

/* ================================================================
   3D CHARACTER DISPLAY - For Siren & Nemesis
   ================================================================ */
.character-3d-container {
    width: 400px;
    height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#character3DCanvas {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.character-glow-ring {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, 
        var(--character-glow, rgba(255, 20, 147, 0.4)) 0%,
        transparent 70%);
    filter: blur(20px);
    animation: glowPulse 2s ease-in-out infinite;
}

/* Siren-specific glow */
.entity-siren .character-glow-ring {
    --character-glow: rgba(155, 48, 255, 0.5);
    box-shadow: 0 0 60px rgba(155, 48, 255, 0.3);
}

/* Nemesis-specific glow */
.entity-nemesis .character-glow-ring {
    --character-glow: rgba(255, 69, 0, 0.5);
    box-shadow: 0 0 60px rgba(255, 69, 0, 0.3);
}

/* Speaking animation for 3D character */
.character-3d-container.speaking .character-glow-ring {
    animation: speakingGlow 0.3s ease-in-out infinite alternate;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .character-3d-container {
        width: 300px;
        height: 380px;
    }
    .character-glow-ring {
        width: 220px;
        height: 45px;
    }
}

/* ================================================================
   MOVIE-QUALITY ORACLE ORB - 14 CINEMATIC EFFECTS
   Based on Reference Image - Full AAA Implementation
   ================================================================ */

/* === EFFECT 11 & 12: DISABLED for pure black background === */
.oracle-orb-container::before,
.oracle-orb-container::after {
    display: none !important;
}

/* 🔮 ORACLE ORB - Clean centered display */
.oracle-orb {
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    /* No default glows - video orbs display clean */
}

/* Hide the ::before glow for video orb entities */
.oracle-orb::before {
    display: none;
}

/* ================================================================
   ENTITY-SPECIFIC ORB COLORS - Override CSS Variables
   ================================================================ */

/* ORACLE - Red with electric fragments */
body.entity-oracle .oracle-orb,
.entity-oracle .oracle-orb {
    --orb-r: 255;
    --orb-g: 0;
    --orb-b: 68;
}

/* SIREN - Electric Purple */
body.entity-siren .oracle-orb,
.entity-siren .oracle-orb {
    --orb-r: 155;
    --orb-g: 48;
    --orb-b: 255;
}

/* NEMESIS - Fiery Orange */
body.entity-nemesis .oracle-orb,
.entity-nemesis .oracle-orb {
    --orb-r: 255;
    --orb-g: 69;
    --orb-b: 0;
}

/* ROSE - Magenta */
body.entity-rose .oracle-orb,
.entity-rose .oracle-orb {
    --orb-r: 233;
    --orb-g: 30;
    --orb-b: 140;
}

/* JOHN - Deep Blue */
body.entity-john .oracle-orb,
.entity-john .oracle-orb {
    --orb-r: 21;
    --orb-g: 101;
    --orb-b: 192;
}

/* SAM - Pink/Coral */
body.entity-sam .oracle-orb,
.entity-sam .oracle-orb {
    --orb-r: 233;
    --orb-g: 30;
    --orb-b: 99;
}

/* MATT - Green */
body.entity-matt .oracle-orb,
.entity-matt .oracle-orb {
    --orb-r: 46;
    --orb-g: 125;
    --orb-b: 50;
}

/* DRUNK UNCLE - Amber */
body.entity-drunkuncle .oracle-orb,
.entity-drunkuncle .oracle-orb {
    --orb-r: 184;
    --orb-g: 134;
    --orb-b: 11;
}

/* CUPID - Red/Pink */
body.entity-cupid .oracle-orb,
.entity-cupid .oracle-orb {
    --orb-r: 255;
    --orb-g: 77;
    --orb-b: 109;
}

/* ALEX - Gold */
body.entity-alex .oracle-orb,
.entity-alex .oracle-orb {
    --orb-r: 255;
    --orb-g: 215;
    --orb-b: 0;
}

/* NOVA - Neon Green */
body.entity-nova .oracle-orb,
.entity-nova .oracle-orb {
    --orb-r: 0;
    --orb-g: 255;
    --orb-b: 136;
}

/* ================================================================
   DYNAMIC ORB GLOW LAYERS - Use CSS Variables
   ================================================================ */

/* Layer 1: Outermost atmospheric haze - extremely soft */
.oracle-deep-glow {
    position: absolute;
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.3) 0%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.2) 20%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.15) 35%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.1) 50%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.05) 65%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.02) 80%,
        transparent 100%);
    animation: deepPulse 4s ease-in-out infinite;
    filter: blur(30px);
    z-index: 1;
}

/* Layer 2: Mid glow - transition zone */
.oracle-mid-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.4) 0%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.35) 20%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.25) 40%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.15) 60%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.08) 80%,
        transparent 100%);
    animation: midPulse 3.5s ease-in-out infinite;
    filter: blur(15px);
    z-index: 2;
}

/* Layer 3: Inner glow - intensity zone */
.oracle-inner-glow {
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.5) 0%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.45) 25%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.35) 45%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.25) 65%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.12) 85%,
        transparent 100%);
    animation: innerPulse 3s ease-in-out infinite;
    filter: blur(8px);
    z-index: 3;
}

/* Layer 4: Core hotspot glow - brightest center */
.oracle-orb::before {
    content: '';
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.6) 0%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.5) 20%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.4) 40%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.25) 60%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.1) 80%,
        transparent 100%);
    filter: blur(5px);
    z-index: 4;
    animation: coreHotspot 2.5s ease-in-out infinite;
}

/* Video wrapper - clean centered display */
.oracle-orb-video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: transparent;
}

/* The video orb - clean display */
.oracle-orb-webp {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/* Subtle energy rings */
.oracle-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.3);
    animation: ringExpand 4s ease-out infinite;
    pointer-events: none;
}

.oracle-ring-1 { width: 600px; height: 600px; animation-delay: 0s; }
.oracle-ring-2 { width: 600px; height: 600px; border-color: rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.25); animation-delay: 2s; }

/* Listening - breathing animation gives orb life while waiting */
.oracle-orb-listening { animation: orbFloat 5s ease-in-out infinite, orbListenBreath 2s ease-in-out infinite; }

/* Listening state - add pulsing to inner layers for more life */
.oracle-orb-listening .oracle-deep-glow {
    animation: deepListening 2.5s ease-in-out infinite alternate;
}
.oracle-orb-listening .oracle-mid-glow {
    animation: midListening 2s ease-in-out infinite alternate;
}
.oracle-orb-listening .oracle-inner-glow {
    animation: innerListening 1.5s ease-in-out infinite alternate;
}

/* Speaking - intense glow */
.oracle-orb-speaking { animation: orbFloat 5s ease-in-out infinite, orbSpeakBreath 0.2s ease-in-out infinite; }

.oracle-orb-speaking .oracle-deep-glow { 
    animation: deepSpeaking 0.3s ease-in-out infinite alternate;
    background: radial-gradient(circle at center,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.5) 0%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.4) 30%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.25) 50%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.15) 70%,
        transparent 85%);
}

.oracle-orb-speaking .oracle-mid-glow { animation: midSpeaking 0.2s ease-in-out infinite alternate; }

.oracle-orb-speaking .oracle-inner-glow { 
    animation: innerSpeaking 0.15s ease-in-out infinite alternate;
    background: radial-gradient(circle at center,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.7) 0%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.6) 40%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.4) 60%,
        rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.25) 80%,
        transparent 100%);
}

.oracle-orb-speaking .oracle-orb-video-wrapper {
    animation: videoSpeakPulse 0.1s ease-in-out infinite alternate;
}

.oracle-orb-speaking .oracle-ring { 
    animation-duration: 0.8s; 
    border-color: rgba(180, 40, 40, 0.5); 
}

.oracle-orb-wave, .oracle-orb-core { display: none; }

/* === ROTATING PLASMA RINGS === DISABLED for pure black background */
.oracle-plasma-ring,
.oracle-plasma-ring-2 {
    display: none !important;
}

/* === ELECTRIC ARCS === DISABLED for pure black background */
.oracle-arc-container,
.oracle-arc {
    display: none !important;
}

/* === EMBER PARTICLES === DISABLED for pure black background */
.oracle-embers,
.ember {
    display: none !important;
}

.ember:nth-child(1) { top: 5%; left: 50%; animation-delay: 0s; }
.ember:nth-child(2) { top: 15%; left: 85%; animation-delay: 0.25s; width: 3px; height: 3px; }
.ember:nth-child(3) { top: 35%; left: 95%; animation-delay: 0.5s; }
.ember:nth-child(4) { top: 60%; left: 92%; animation-delay: 0.75s; width: 5px; height: 5px; }
.ember:nth-child(5) { top: 85%; left: 80%; animation-delay: 1s; width: 3px; height: 3px; }
.ember:nth-child(6) { top: 95%; left: 50%; animation-delay: 1.25s; }
.ember:nth-child(7) { top: 85%; left: 20%; animation-delay: 1.5s; width: 5px; height: 5px; }
.ember:nth-child(8) { top: 60%; left: 8%; animation-delay: 1.75s; }
.ember:nth-child(9) { top: 35%; left: 5%; animation-delay: 2s; width: 3px; height: 3px; }
.ember:nth-child(10) { top: 15%; left: 15%; animation-delay: 2.25s; }
.ember:nth-child(11) { top: 25%; left: 70%; animation-delay: 2.5s; width: 3px; height: 3px; }
.ember:nth-child(12) { top: 75%; left: 30%; animation-delay: 2.75s; }

/* === EDGE GLOW OVERLAY === DISABLED for pure black background */
.oracle-edge-glow {
    display: none !important;
}

/* === CORONA EFFECT === DISABLED for pure black background */
.oracle-corona,
.oracle-corona-2 {
    display: none !important;
}

/* Speaking mode - ALL EFFECTS INTENSIFY */
.oracle-orb-speaking .oracle-plasma-ring { animation: plasmaRotate 3s linear infinite; border-top-color: rgba(255, 120, 80, 0.8); }
.oracle-orb-speaking .oracle-plasma-ring-2 { animation: plasmaRotateReverse 2.5s linear infinite; }
.oracle-orb-speaking .oracle-arc { animation: arcFlickerFast 0.08s ease-in-out infinite; }

.oracle-orb-speaking .ember { animation: emberSpeaking 0.5s ease-in-out infinite; background: radial-gradient(circle, rgba(255, 220, 150, 1) 0%, rgba(255, 150, 80, 1) 50%, transparent 100%); }

.oracle-orb-speaking .oracle-edge-glow { animation: edgeGlowSpeaking 0.12s ease-in-out infinite alternate; }

.oracle-orb-speaking .oracle-corona { animation: coronaSpeaking 0.15s ease-in-out infinite alternate; border-color: rgba(255, 150, 100, 0.6); }

/* === EFFECT 1: RADIAL GRADIENT CORE (Base Sphere) === */
/* === EFFECT 3: OUTER RIM FRESNEL LIGHT === */
/* === EFFECT 4: GLASS DISTORTION LAYER === */
.oracle-orb-core {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* Multi-layer sphere gradient - white hot core → pink/blue mid → cold shadow outer */
    background: 
        /* Glass highlight top-left */
        radial-gradient(circle at 25% 20%, rgba(255,255,255,0.4) 0%, transparent 25%),
        /* Glass highlight bottom-right subtle */
        radial-gradient(circle at 75% 80%, rgba(255,255,255,0.15) 0%, transparent 15%),
        /* Main sphere gradient */
        radial-gradient(ellipse at 40% 40%, 
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 200, 220, 0.8) 8%,
            rgba(255, 120, 180, 0.6) 20%,
            rgba(180, 80, 160, 0.5) 35%,
            rgba(100, 60, 140, 0.6) 50%,
            rgba(40, 40, 100, 0.8) 70%,
            rgba(10, 10, 40, 0.95) 100%);
    /* Fresnel rim light effect */
    border: 2px solid rgba(150, 180, 255, 0.5);
    box-shadow: 
        /* Inner glow */
        inset 0 0 60px rgba(255, 150, 200, 0.4),
        inset 0 0 100px rgba(255, 100, 180, 0.2),
        /* Fresnel edge glow */
        0 0 2px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(200, 150, 255, 0.6),
        0 0 30px rgba(255, 100, 180, 0.5),
        0 0 60px rgba(180, 80, 200, 0.4),
        0 0 100px rgba(100, 80, 180, 0.3);
}

/* === EFFECT 2: BLOOM / GLOW (Inner + Outer) === */
.oracle-orb-core::before {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 150, 200, 0.3) 0%,
        rgba(255, 100, 180, 0.2) 30%,
        rgba(180, 80, 200, 0.1) 50%,
        transparent 70%);
    filter: blur(20px);
    animation: bloomPulse 3s ease-in-out infinite;
    mix-blend-mode: screen;
}

.oracle-orb-core::after {
    content: '';
    position: absolute;
    inset: -60px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 120, 180, 0.15) 0%,
        rgba(180, 100, 200, 0.1) 40%,
        transparent 60%);
    filter: blur(40px);
    animation: bloomPulse 4s ease-in-out infinite 0.5s;
    mix-blend-mode: screen;
}

.oracle-orb-listening .oracle-orb-core {
    box-shadow: 
        inset 0 0 60px rgba(255, 150, 200, 0.5),
        inset 0 0 100px rgba(255, 100, 180, 0.3),
        0 0 2px rgba(255, 255, 255, 0.9),
        0 0 15px rgba(200, 150, 255, 0.7),
        0 0 40px rgba(255, 100, 180, 0.6),
        0 0 80px rgba(180, 80, 200, 0.5),
        0 0 120px rgba(100, 80, 180, 0.3);
}

.oracle-orb-speaking .oracle-orb-core {
    box-shadow: 
        inset 0 0 80px rgba(255, 180, 220, 0.6),
        inset 0 0 120px rgba(255, 120, 180, 0.4),
        0 0 3px rgba(255, 255, 255, 1),
        0 0 20px rgba(255, 200, 230, 0.9),
        0 0 50px rgba(255, 120, 180, 0.8),
        0 0 100px rgba(200, 100, 220, 0.6),
        0 0 150px rgba(150, 80, 200, 0.4);
    animation: coreIntensify 0.4s ease-in-out infinite alternate;
}

/* === INNER ENERGY CENTER === */
.oracle-orb-core-pupil {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* Hot white/pink core */
    background: 
        radial-gradient(circle at 45% 45%, 
            rgba(255,255,255,1) 0%, 
            rgba(255, 220, 240, 0.95) 10%,
            rgba(255, 150, 200, 0.8) 25%, 
            rgba(255, 100, 180, 0.5) 40%,
            transparent 60%);
    animation: plasmaCore 2s ease-in-out infinite;
}

/* === EFFECT 6: LIGHTNING VEIN TEXTURE (Layer 1 - Sharp Cracks) === */
.oracle-orb-core-pupil::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: 
        /* Hot white center */
        radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0%, rgba(255, 200, 220, 0.7) 15%, transparent 40%);
    /* Lightning crack pattern using box-shadows */
    box-shadow:
        /* Main lightning veins - sharp pink/white */
        45px -35px 8px -4px rgba(255, 150, 200, 0.9),
        -55px 25px 10px -4px rgba(255, 100, 180, 0.85),
        35px 55px 8px -4px rgba(255, 180, 220, 0.9),
        -45px -45px 10px -4px rgba(255, 120, 180, 0.85),
        65px 15px 12px -5px rgba(255, 150, 200, 0.8),
        -25px 65px 10px -4px rgba(255, 100, 180, 0.85),
        /* Secondary branches */
        70px -25px 6px -3px rgba(255, 200, 220, 0.95),
        -75px 35px 6px -3px rgba(255, 180, 210, 0.9),
        25px 75px 6px -3px rgba(255, 200, 220, 0.95),
        /* Micro sparks */
        80px -10px 4px -2px rgba(255, 255, 255, 1),
        -80px 20px 4px -2px rgba(255, 255, 255, 0.95),
        15px 85px 4px -2px rgba(255, 255, 255, 1),
        -60px -60px 4px -2px rgba(255, 255, 255, 0.95);
    animation: lightningCrackRotate 8s linear infinite;
}

/* === EFFECT 6: LIGHTNING VEIN TEXTURE (Layer 2 - Glowing Version) === */
.oracle-orb-core-pupil::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255, 150, 200, 0.4) 20%, transparent 50%);
    /* Glowing lightning overlay - softer, blurred */
    box-shadow:
        /* Glow version of main veins */
        -35px -55px 15px -5px rgba(255, 100, 180, 0.6),
        55px -30px 18px -5px rgba(255, 80, 160, 0.55),
        -65px 35px 15px -5px rgba(255, 120, 190, 0.6),
        45px 50px 18px -5px rgba(255, 80, 160, 0.55),
        -15px -70px 15px -5px rgba(255, 100, 180, 0.5),
        70px 25px 20px -6px rgba(255, 80, 150, 0.5),
        /* Extended glow branches */
        -50px 60px 12px -4px rgba(255, 150, 200, 0.5),
        60px -50px 12px -4px rgba(255, 130, 190, 0.5);
    animation: lightningGlowRotate 6s linear infinite reverse;
    filter: blur(2px);
    mix-blend-mode: screen;
}

.oracle-orb-listening .oracle-orb-core-pupil {
    background: 
        radial-gradient(circle at 45% 45%, 
            rgba(255,255,255,1) 0%, 
            rgba(255, 200, 230, 0.9) 12%,
            rgba(255, 120, 190, 0.7) 28%, 
            rgba(200, 100, 180, 0.4) 45%,
            transparent 65%);
    box-shadow: 
        0 0 50px rgba(255, 150, 200, 0.8),
        0 0 100px rgba(255, 100, 180, 0.5);
}

.oracle-orb-speaking .oracle-orb-core-pupil {
    background: 
        radial-gradient(circle at 45% 45%, 
            rgba(255,255,255,1) 0%, 
            rgba(255, 230, 245, 0.95) 8%,
            rgba(255, 180, 220, 0.85) 20%, 
            rgba(255, 120, 180, 0.6) 35%,
            transparent 55%);
    box-shadow: 
        0 0 70px rgba(255, 180, 220, 1),
        0 0 120px rgba(255, 120, 180, 0.7),
        0 0 180px rgba(200, 100, 200, 0.5);
    animation: plasmaCoreIntense 0.6s ease-in-out infinite;
}

/* === EFFECT 7: PLASMA TENDRILS / ENERGY STRANDS === */
.plasma-tendril {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: 
        conic-gradient(from 0deg at 50% 50%, 
            transparent 0deg, 
            rgba(255, 100, 180, 0.5) 15deg, 
            transparent 35deg,
            rgba(255, 150, 200, 0.4) 70deg,
            transparent 95deg,
            rgba(200, 80, 180, 0.5) 140deg,
            transparent 165deg,
            rgba(255, 120, 190, 0.45) 210deg,
            transparent 235deg,
            rgba(180, 100, 200, 0.4) 280deg,
            transparent 305deg,
            rgba(255, 100, 180, 0.5) 345deg,
            transparent 360deg
        );
    animation: tendrilSpin 4s linear infinite;
    mix-blend-mode: screen;
}

.plasma-tendril:nth-child(1) { 
    animation-duration: 5s; 
    filter: blur(1px);
}
.plasma-tendril:nth-child(2) { 
    animation-duration: 7s; 
    animation-direction: reverse; 
    opacity: 0.8;
    background: 
        conic-gradient(from 45deg at 50% 50%, 
            transparent 0deg, 
            rgba(150, 80, 200, 0.4) 25deg, 
            transparent 50deg,
            rgba(200, 100, 220, 0.35) 100deg,
            transparent 130deg,
            rgba(180, 80, 200, 0.4) 180deg,
            transparent 210deg,
            rgba(150, 100, 220, 0.35) 260deg,
            transparent 290deg,
            rgba(200, 80, 200, 0.4) 330deg,
            transparent 360deg
        );
    filter: blur(2px);
}
.plasma-tendril:nth-child(3) { 
    animation-duration: 9s; 
    animation-delay: -3s; 
    opacity: 0.6;
    background: 
        conic-gradient(from 90deg at 50% 50%, 
            transparent 0deg, 
            rgba(100, 150, 255, 0.3) 40deg, 
            transparent 70deg,
            rgba(150, 180, 255, 0.25) 140deg,
            transparent 170deg,
            rgba(100, 150, 255, 0.3) 230deg,
            transparent 260deg,
            rgba(130, 170, 255, 0.25) 320deg,
            transparent 360deg
        );
    filter: blur(3px);
}

.oracle-orb-speaking .plasma-tendril {
    animation-duration: 2s !important;
}

.oracle-orb-speaking .plasma-tendril:nth-child(1) {
    background: 
        conic-gradient(from 0deg at 50% 50%, 
            transparent 0deg, 
            rgba(255, 150, 200, 0.7) 12deg, 
            transparent 30deg,
            rgba(255, 180, 220, 0.6) 65deg,
            transparent 90deg,
            rgba(255, 130, 190, 0.7) 135deg,
            transparent 160deg,
            rgba(255, 160, 210, 0.65) 205deg,
            transparent 230deg,
            rgba(255, 140, 200, 0.6) 275deg,
            transparent 300deg,
            rgba(255, 150, 200, 0.7) 340deg,
            transparent 360deg
        );
}

/* === EFFECT 8: ELECTRIC SPARKS / MICRO FLASHES === */
/* Added via JavaScript for random positioning */

/* Oracle electric arcs SVG styling */
.oracle-arcs {
    opacity: 0.9;
    animation: arcFlicker 0.08s infinite;
}

/* === EFFECT 10: FLOATING DEBRIS SHARDS === DISABLED for pure black background */
.oracle-debris,
.debris-shard {
    display: none !important;
}

.debris-shard:nth-child(1) {
    width: 25px; height: 30px;
    top: -40px; left: 50%;
    --orbit-duration: 25s;
    filter: blur(1px);
    opacity: 0.9;
}
.debris-shard:nth-child(2) {
    width: 18px; height: 22px;
    top: 30%; right: -35px;
    --orbit-duration: 30s;
    animation-delay: -8s;
    clip-path: polygon(30% 0%, 100% 20%, 70% 100%, 0% 80%);
}
.debris-shard:nth-child(3) {
    width: 22px; height: 28px;
    bottom: -30px; left: 40%;
    --orbit-duration: 22s;
    animation-delay: -15s;
    filter: blur(0.5px);
}
.debris-shard:nth-child(4) {
    width: 15px; height: 18px;
    top: 20%; left: -30px;
    --orbit-duration: 28s;
    animation-delay: -5s;
    clip-path: polygon(20% 0%, 100% 30%, 80% 100%, 0% 70%);
    filter: blur(1.5px);
    opacity: 0.7;
}
.debris-shard:nth-child(5) {
    width: 20px; height: 25px;
    bottom: 20%; right: -25px;
    --orbit-duration: 35s;
    animation-delay: -20s;
}
.debris-shard:nth-child(6) {
    width: 12px; height: 15px;
    top: -25px; right: 30%;
    --orbit-duration: 18s;
    animation-delay: -12s;
    filter: blur(2px);
    opacity: 0.6;
}

/* === EFFECT 13: LENS DISTORTION / CHROMATIC ABERRATION === */
.oracle-lens-distortion {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    z-index: 20;
    animation: lensWarp 8s ease-in-out infinite;
}

/* === EFFECT 14: SCREEN GLITCH / RIPPLE (Event-based via JS) === */
.oracle-orb.glitch-active {
    animation: orbGlitch 0.1s ease-in-out;
}

/* Chromatic aberration on speaking */
.oracle-orb-speaking .oracle-orb-core {
    position: relative;
}

.oracle-orb-speaking .oracle-lens-distortion {
    animation: chromaticPulse 0.5s ease-in-out infinite alternate;
}

/* Voice mode controls container - positioned at bottom of screen */
.oracle-controls-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    align-items: center;
    z-index: 10000;
}

/* Stop button - 10% bg, 20% border (visible) */
.oracle-stop-btn {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.oracle-stop-btn:hover {
    background: rgba(255, 100, 100, 0.2);
    border-color: rgba(255, 100, 100, 0.4);
    color: #ff6b6b;
}
/* Active state - color change when clicked before returning to ready */
.oracle-stop-btn:active,
.oracle-stop-btn.stopping {
    transform: scale(0.95);
    background: rgba(255, 100, 100, 0.3);
    border-color: rgba(255, 100, 100, 0.5);
    color: #ff6b6b;
}
.oracle-stop-btn svg {
    width: 18px;
    height: 18px;
}

/* Screen share button - rounded rect, blue accent */
.oracle-screen-share-btn {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.oracle-screen-share-btn:hover {
    background: rgba(100, 150, 255, 0.2);
    border-color: rgba(100, 150, 255, 0.4);
    color: #6b9fff;
}
.oracle-screen-share-btn:active {
    transform: scale(0.95);
    background: rgba(100, 150, 255, 0.3);
    border-color: rgba(100, 150, 255, 0.5);
    color: #6b9fff;
}
/* Active sharing state */
.oracle-screen-share-btn.sharing {
    background: rgba(100, 200, 100, 0.2);
    border-color: rgba(100, 200, 100, 0.5);
    color: #6bff6b;
}
.oracle-screen-share-btn.sharing:hover {
    background: rgba(100, 200, 100, 0.3);
    border-color: rgba(100, 200, 100, 0.6);
    color: #6bff6b;
}
.oracle-screen-share-btn svg {
    width: 18px;
    height: 18px;
}

/* X close button - circular, 10% bg, 20% border */
.oracle-close-btn {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.oracle-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.oracle-close-btn:active {
    transform: scale(0.95);
}
.oracle-close-btn svg {
    width: 20px;
    height: 20px;
}

/* ===========================
   CODE LAB – RIGHT SIDE PANEL - EPIC SCI-FI TERMINAL
   =========================== */

@media (max-width: 1200px) { .topbar-actions .text { display: none; } .action-btn { padding: 8px 12px; } }

@media (max-width: 1024px) { .overdrive-grid { grid-template-columns: 1fr; } .chat-title { max-width: 200px; font-size: 1rem; } }

/* ================================================================
   MOBILE STYLES - CLEAN & FUNCTIONAL
   ================================================================ */
@media (max-width: 768px) {
    /* ============================================
       MOBILE LAYOUT - COMPLETE OVERHAUL v2
       ============================================ */
    
    /* Root fixes - prevent scroll bounce */
    html {
        height: 100%;
        overflow: hidden;
    }
    body {
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    
    /* App container - full screen */
    .app-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile */
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    
    /* Mobile menu toggle - always visible, transparent with white lines */
    .mobile-toggle {
        display: flex !important;
        position: fixed;
        top: 8px;
        left: 10px;
        z-index: 1000;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 8px;
        color: #ffffff;
        font-size: 1.5rem;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .mobile-toggle:active {
        transform: scale(0.9);
        background: rgba(255,255,255,0.1);
    }
    
    /* Sidebar as slide-out drawer */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        transform: translateX(-100%);
        z-index: 1200;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--ios-bg-secondary, #1C1C1E);
        border-right: 1px solid rgba(255,255,255,0.08);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar.open {
        transform: translateX(0) !important;
        box-shadow: none !important;
    }

    /* Sidebar overlay */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 1100;
        -webkit-tap-highlight-color: transparent;
    }
    .sidebar-overlay.show {
        display: block;
    }
    
    /* Topbar - blends with chat (transparent) */
    .topbar {
        position: relative;
        padding: 0 10px 0 60px;
        height: 56px;
        min-height: 56px;
        gap: 8px;
        background: transparent;
        border-bottom: none;
        box-shadow: none;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    /* Hide chat title on mobile */
    .chat-title { 
        display: none !important;
    }
    
    /* Topbar actions container */
    .topbar-actions { 
        display: flex;
        gap: 8px; 
        flex: 0;
        justify-content: flex-end;
        align-items: center;
    }
    
    /* Hide ALL action buttons on mobile - features in quick bar */
    .topbar-actions .action-btn,
    .topbar-actions .personality-switcher {
        display: none !important;
    }

    /* Hide topbar actions completely - Micheal only, features in quick bar */
    .topbar-actions {
        display: none !important;
    }

    /* Hide entity dropdown on mobile */
    .entity-category-dropdown {
        display: none !important;
    }

    /* Clean topbar - centered title */
    .topbar {
        justify-content: center !important;
        padding: 0 15px !important;
    }

    /* Show app title centered on mobile */
    .chat-title {
        display: block !important;
        font-size: 1.1rem !important;
        text-align: center;
        font-family: 'Orbitron', sans-serif;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
        letter-spacing: 2px;
    }
    
    /* Settings button - accessible via sidebar on mobile */
    /* Mobile toggle - MUST be visible for sidebar access */
    
    /* ENTITY MENU - Mobile Fullscreen Modal */
    .personality-menu {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.9) !important;
        min-width: 90vw;
        max-width: 340px;
        border-radius: 20px;
        opacity: 0;
        visibility: hidden;
        z-index: 9999999 !important;
        pointer-events: none;
        background: #0a0a12 !important;
        border: 2px solid rgba(0,247,255,0.6) !important;
    }
    body.entity-menu-open .personality-menu {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    /* Make sure options are clickable */
    .personality-option {
        padding: 20px 22px;
        pointer-events: auto !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        background: transparent !important;
    }
    
    .personality-option:active {
        background: rgba(0,247,255,0.2) !important;
    }
    
    .personality-menu::before {
        padding: 18px 20px;
        font-size: 0.8rem;
        letter-spacing: 4px;
    }
    .personality-option .p-icon {
        font-size: 2.5rem;
        pointer-events: none;
    }
    .personality-option .p-info {
        pointer-events: none;
    }
    .personality-option .p-name {
        font-size: 1.1rem;
    }
    .personality-option .p-desc {
        font-size: 0.85rem;
    }
    .p-check {
        width: 28px;
        height: 28px;
        pointer-events: none;
    }
    
    /* Entity transition on mobile */
    .entity-transition-content {
        padding: 20px;
    }
    .entity-icon-large {
        font-size: 5rem !important;
    }
    .entity-name-large {
        font-size: 1.8rem !important;
        letter-spacing: 4px !important;
    }
    .entity-desc-large {
        font-size: 1rem !important;
    }
    
    /* Hide desktop elements */
    #agiHudStrip,
    #thoughtWave,
    .code-lab {
        display: none !important;
    }
    
    /* Main content - flex fill */
    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        position: relative;
    }
    
    /* Chat container - scrollable */
    .chat-container { 
        flex: 1;
        padding: 12px;
        padding-bottom: 10px;
        background: linear-gradient(180deg, rgba(10,0,20,0.95), rgba(5,0,15,0.98));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Messages */
    .message {
        max-width: 92%;
        padding: 12px 14px;
        border-radius: 16px;
        margin-bottom: 10px;
    }
    .message.ai {
        background: linear-gradient(135deg, rgba(20,0,40,0.9), rgba(10,0,25,0.95));
        border: 1px solid rgba(0,212,255,0.3);
    }
    /* User message - iMessage style: just the bubble, no container */
    .message.user {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        max-width: 100% !important;
        margin-right: 12px;
    }
    /* Hide user avatar - iMessage doesn't show user avatar */
    .message.user .message-avatar {
        display: none !important;
    }
    /* User bubble - clean iMessage style */
    .message.user .message-content {
        max-width: 75%;
        border-radius: 20px 20px 4px 20px;
    }
    .message-avatar { 
        width: 34px; 
        height: 34px; 
        font-size: 1rem;
        flex-shrink: 0;
    }
    .message-text {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    .message.ai .message-text {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    
    /* Input area - above quick bar */
    /* iOS CRITICAL: Ensure input is fully visible above bottom nav */
    .input-area {
        flex-shrink: 0;
        padding: 10px 12px;
        /* Increase padding to ensure input + send button fully visible above bottom nav */
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 12px)) !important;
        background: linear-gradient(180deg, rgba(15,0,30,0.95), rgba(10,0,20,0.98));
        border-top: 1px solid rgba(255,0,64,0.3);
    }
    
    /* Chat Mode Selector - Mobile */
    .chat-mode-selector {
        padding: 6px 8px;
        margin-bottom: 8px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .mode-chip {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
    .mode-chip .mode-icon {
        font-size: 0.9rem;
    }
    .mode-chip .mode-label {
        font-size: 0.7rem;
    }
    .mode-divider {
        height: 20px;
    }
    .deep-thinking-indicator {
        padding: 8px 12px;
        margin-bottom: 8px;
    }
    .thinking-brain {
        font-size: 1rem;
    }
    .thinking-text {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }
    
    .input-wrapper {
        display: flex;
        gap: 10px;
        align-items: flex-end;
    }
    .input-container {
        flex: 1;
        padding: 10px 14px;
        border-radius: 22px;
        background: linear-gradient(135deg, rgba(20,0,40,0.9), rgba(10,0,25,0.95));
        border: 2px solid rgba(255,0,64,0.4);
    }
    #messageInput {
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 40px;
        max-height: 100px;
        color: #f0e0f5;
        -webkit-appearance: none;
    }
    .input-actions {
        display: none;
    }
    .send-btn, .stop-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        border-radius: 50%;
        font-size: 1.2rem;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        color: #000000;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .send-btn:active, .stop-btn:active {
        transform: scale(0.9);
    }
    .input-footer {
        display: none;
    }
    .action-buttons-row {
        display: none !important;
    }
    
    /* Side panels - full screen */
    .side-panel {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        z-index: 10000;
        border-radius: 0;
        transition: right 0.3s ease;
    }
    .side-panel.show {
        right: 0;
        pointer-events: auto;
    }
    
    /* Modals */
    .modal {
        padding: 10px;
    }
    .modal-content {
        padding: 20px;
        border-radius: 16px;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(180deg, rgba(15,15,20,0.99), rgba(8,8,14,0.99));
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }

    /* Oracle overlay - full screen, touch friendly */
    .oracle-overlay {
        padding: 20px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    .oracle-orb-container {
        transform: translate(-50%, -50%) scale(0.65);
        position: absolute;
        top: 45%;
        left: 50%;
    }
    /* Controls container - mobile, position at bottom center */
    .oracle-controls-container {
        position: fixed;
        top: auto;
        right: auto;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%);
    }
    .oracle-stop-btn,
    .oracle-close-btn,
    .oracle-screen-share-btn {
        width: 52px;
        height: 52px;
    }
    .oracle-stop-btn svg {
        width: 20px;
        height: 20px;
    }
    .oracle-close-btn svg {
        width: 22px;
        height: 22px;
    }
    .oracle-screen-share-btn svg {
        width: 20px;
        height: 20px;
    }
    
    /* Boot overlay - tap anywhere */
    #bootOverlay {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        cursor: pointer;
    }
    #mobileAudioPrompt {
        bottom: 80px !important;
    }
    #mobileAudioPrompt > div {
        padding: 20px 40px !important;
        font-size: 1rem !important;
    }
    
    /* AGI Core Orb */
    #agiCoreOrb {
        display: none !important;
    }
    
    /* Mobile oracle floating btn */
    .mobile-oracle-btn {
        display: none;
    }
}

/* ============================================
   MOBILE INPUT STYLES (max-width: 768px) continued
   ============================================ */
@media (max-width: 768px) {
    #messageInput {
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 42px;
        color: #f0e0f5;
    }
    .input-actions {
        display: none;
    }
    .send-btn, .stop-btn {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        border-radius: 50%;
        font-size: 1.2rem;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        color: #000000;
        flex-shrink: 0;
    }
    .send-btn:active, .stop-btn:active {
        transform: scale(0.95);
    }
    .input-footer {
        display: none;
    }
    
    /* Action buttons row - compact */
    .action-buttons-row {
        display: none !important;
    }
    
    /* Side panels - full screen overlay */
    .side-panel {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        z-index: 10000;
        border-radius: 0;
        transition: right 0.3s ease;
    }
    .side-panel.show {
        right: 0;
        pointer-events: auto;
    }
    
    /* Modals - mobile friendly */
    .modal-content {
        padding: 20px;
        border-radius: 20px;
        margin: 10px;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(180deg, rgba(15,15,20,0.99), rgba(8,8,14,0.99));
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }
    
    /* Overdrive - compact */
    .overdrive-container { 
        padding: 16px; 
    }
    .overdrive-title { 
        font-size: 1.1rem; 
    }
    
    /* AGI Core Orb - hidden on mobile */
    #agiCoreOrb {
        display: none !important;
    }
    
    /* Mobile oracle floating btn - hidden when quick bar is active */
    .mobile-oracle-btn { 
        display: none;
    }
}

/* ============================================
   SMALL PHONES (480px and below)
   ============================================ */
@media (max-width: 480px) {
    .mobile-toggle {
        width: 40px;
        height: 40px;
        top: 6px;
        left: 8px;
    }
    .topbar {
        padding-left: 52px;
        height: 50px;
    }
    .chat-title {
        font-size: 0.8rem;
        max-width: 100px;
    }
    .message {
        max-width: 95%;
        padding: 10px 12px;
    }
    .message-avatar {
        width: 32px;
        height: 32px;
    }
    .message-text {
        font-size: 0.9rem;
    }
    .input-area {
        padding: 8px 10px;
        /* Ensure input fully visible above bottom nav */
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 12px));
    }
    .send-btn, .stop-btn {
        width: 46px;
        height: 46px;
        min-width: 46px;
        min-height: 46px;
    }

    /* Debate Arena Mobile */
    .debate-arena {
        padding: 10px;
        height: 100vh;
    }
    .debate-title {
        font-size: 1.5rem;
        letter-spacing: 4px;
    }
    .debate-subtitle {
        font-size: 0.7rem;
        letter-spacing: 4px;
    }
    .debate-topic {
        font-size: 0.85rem;
        padding: 8px 15px;
        max-width: 95%;
    }
    .debate-stage {
        min-height: 200px;
    }
    .fighter-hologram {
        width: 100px;
        height: 130px;
    }
    .fighter-head {
        font-size: 2.5rem;
    }
    .fighter-torso {
        width: 40px;
        height: 30px;
    }
    .fighter-name {
        font-size: 1rem;
        letter-spacing: 2px;
    }
    .fighter-stance {
        font-size: 0.7rem;
        padding: 3px 10px;
    }
    .health-bar {
        width: 100px;
        height: 12px;
    }
    .health-text {
        font-size: 0.75rem;
    }
    .debate-vs {
        font-size: 2rem;
    }
    .debate-arguments {
        flex-direction: column;
        gap: 10px;
    }
    .argument-box {
        min-height: 80px;
        max-height: 100px;
        padding: 12px;
    }
    .argument-text {
        font-size: 0.85rem;
    }
    .debate-round {
        font-size: 0.9rem;
        padding: 6px 15px;
    }
    .debate-controls {
        flex-direction: column;
        gap: 10px;
    }
    .debate-btn {
        padding: 12px 20px;
        font-size: 0.75rem;
        min-width: 100%;
    }
    .debate-exit {
        top: 10px;
        right: 10px;
        padding: 8px 15px;
        font-size: 0.7rem;
    }
    .fight-announcer {
        font-size: 3rem;
    }
    .fatality-text {
        font-size: 4rem;
        letter-spacing: 8px;
    }
    .fatality-winner {
        font-size: 1.2rem;
    }
    .fatality-victim {
        font-size: 1rem;
    }
    .fatality-scene {
        font-size: 4rem;
    }
    
    /* Memory Palace Mobile */
    .memory-palace-overlay .palace-container {
        width: 98% !important;
        max-height: 95vh;
        padding: 15px;
    }
    .palace-header h2 {
        font-size: 1.5rem;
    }
    .palace-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }
    .palace-tab {
        padding: 10px 15px;
        font-size: 0.8rem;
    }
    .memories-container {
        flex-direction: column;
    }
    .memory-categories {
        width: 100%;
        max-height: 150px;
        border-right: none;
        border-bottom: 1px solid rgba(0,212,255,0.3);
    }
    .memory-items-panel {
        padding: 15px;
    }
    .palace-card {
        padding: 15px;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .sidebar-logo { font-size: 1.3rem; letter-spacing: 3px; }
    .brain-container { width: 70px; height: 70px; }
    .brain-core { font-size: 1.8rem; }
    .sidebar-btn { 
        padding: 12px 14px; 
        font-size: 0.8rem;
        border-radius: 12px;
    }
    
    /* Even simpler topbar */
    .topbar {
        padding: 0 8px 0 50px;
        height: 50px;
    }
    .chat-title {
        font-size: 0.85rem;
        max-width: 120px;
    }
    
    /* Compact topbar buttons */
    .topbar-actions #entityBtn,
    .topbar-actions #oracleVoiceBtn,
    .topbar-actions #overdriveBtn,
    .topbar-actions #voiceBtn {
        min-width: 40px;
        height: 40px;
        padding: 8px;
    }
    .topbar-actions .action-btn .icon {
        font-size: 1.1rem;
    }
    
    /* Messages - full width */
    .message {
        max-width: 95%;
        padding: 12px 14px;
        border-radius: 16px;
    }
    .message-avatar {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    .message-text {
        font-size: 0.95rem;
    }
    
    /* Input - compact but beautiful */
    .input-area {
        padding: 10px;
        /* Ensure input fully visible above bottom nav */
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 12px));
    }
    .input-container {
        padding: 10px 14px;
        border-radius: 22px;
    }
    .send-btn, .stop-btn {
        width: 46px;
        height: 46px;
    }
    
    /* Mobile oracle button */
    .mobile-oracle-btn {
        width: 54px;
        height: 54px;
        bottom: 85px;
        right: 12px;
        font-size: 1.6rem;
    }
    
    /* Mobile hamburger */
    .mobile-toggle {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    /* Debate arena compact */
    .debate-title {
        font-size: 1.2rem;
    }
    .debate-topic {
        font-size: 0.75rem;
    }
    .fighter-head {
        font-size: 2rem;
    }
    .fight-announcer {
        font-size: 2.5rem;
    }
    .fatality-text {
        font-size: 3rem;
    }
}

/* Landscape phone - hide even more */
@media (max-width: 768px) and (orientation: landscape) {
    .topbar {
        height: 44px;
    }
    .chat-container {
        padding: 8px;
    }
    .input-area {
        padding: 8px;
        /* Ensure input fully visible above bottom nav */
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 12px));
    }
    #agiCoreOrb {
        display: none !important;
    }
    .mobile-oracle-btn {
        bottom: 70px;
        width: 44px;
        height: 44px;
    }
}

/* Mobile Oracle floating button as backup */
.mobile-oracle-btn {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a0030, #0a0015);
    border: 2px solid #9900ff;
    color: #cc66ff;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 0 30px rgba(153, 0, 255, 0.5), inset 0 0 20px rgba(153, 0, 255, 0.2);
    animation: oracleFloat 3s ease-in-out infinite;
    align-items: center;
    justify-content: center;
}

/* Oracle overlay mobile fixes */
@media (max-width: 768px) {
    .oracle-overlay {
        padding: 15px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        background: #000000;
        overflow: hidden;
    }
    .oracle-orb-container {
        transform: scale(0.75);
        margin-top: -30px;
    }
    .oracle-orb {
        width: 200px;
        height: 200px;
    }
    .oracle-orb-core {
        width: 160px;
        height: 160px;
    }
    .oracle-orb-core-pupil {
        width: 120px;
        height: 120px;
    }
    .oracle-orb-container::before {
        width: 350px;
        height: 350px;
    }
    .oracle-orb-container::after {
        width: 330px;
        height: 330px;
    }
    .debris-shard {
        transform-origin: 100px 100px;
    }
    .debris-shard:nth-child(1),
    .debris-shard:nth-child(2),
    .debris-shard:nth-child(3),
    .debris-shard:nth-child(4),
    .debris-shard:nth-child(5),
    .debris-shard:nth-child(6) {
        --orbit-duration: 20s;
    }
    
    /* Oracle status text for mobile */
    .oracle-status-mobile {
        position: absolute;
        bottom: 100px;
        left: 0;
        right: 0;
        text-align: center;
        color: rgba(0, 229, 255, 0.8);
        font-size: 0.9rem;
        font-family: 'Orbitron', sans-serif;
        animation: pulse 2s ease-in-out infinite;
    }
}

/* ================================================================
   MOBILE-SPECIFIC ENHANCEMENTS
   ================================================================ */
@media (max-width: 768px) {
    /* Ensure everything is touch-friendly */
    button, .action-btn, .sidebar-btn, .mobile-quick-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    
    /* Better send button for mobile */
    .send-btn {
        min-width: 54px;
        min-height: 54px;
        touch-action: manipulation;
    }
    
    /* Fix input container on mobile */
    .input-container {
        min-height: 50px;
    }
    
    /* Message input should not zoom on iOS */
    #messageInput {
        font-size: 16px !important;
        transform: none;
    }
    
    /* Make modals scrollable */
    .modal-content {
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Chat container scrolling */
    .chat-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Side panel on mobile */
    .side-panel {
        width: 100%;
        right: -100%;
    }
    .side-panel.open {
        right: 0;
    }
    
    /* Hide desktop-only elements */
    .code-lab,
    #agiHudStrip,
    #thoughtWave {
        display: none !important;
    }
    
    /* Mobile sidebar overlay tap to close */
    .sidebar.open::after {
        content: '';
        position: fixed;
        left: 100%;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.7);
        z-index: -1;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    .oracle-orb-container {
        transform: scale(0.6);
        margin-top: -50px;
    }
}

/* ================================================================
   MOBILE QUICK ACTIONS BAR - Beautiful & Functional
   iOS CRITICAL: Must be flush at bottom with ZERO gaps
   ================================================================ */
.mobile-quick-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    height: auto;
    background: #000000;
    border: none;
    padding: 8px 10px;
    /* Safe area padding with 0 fallback to prevent gaps */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
    z-index: 99998 !important;
    justify-content: space-around;
    align-items: center;
    box-shadow: none;
    pointer-events: auto;
}

.mobile-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: linear-gradient(135deg, rgba(30, 0, 50, 0.6), rgba(15, 0, 30, 0.8));
    border: 1px solid rgba(255, 0, 64, 0.3);
    color: rgba(255, 150, 180, 0.9);
    font-size: 1.4rem;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 14px;
    min-width: 58px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    pointer-events: auto !important;
}
.mobile-quick-btn:active {
    background: linear-gradient(135deg, rgba(255, 0, 64, 0.3), rgba(150, 0, 50, 0.4));
    transform: scale(0.92);
    border-color: rgba(255, 0, 64, 0.6);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.4);
}
.mobile-quick-btn.active {
    color: #66e8ff;
    background: linear-gradient(135deg, rgba(255, 0, 64, 0.25), rgba(150, 0, 50, 0.3));
    border-color: rgba(255, 0, 64, 0.6);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.3);
}
.mobile-quick-btn span {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(255, 200, 220, 0.8);
    -webkit-font-smoothing: antialiased;
}
.mobile-quick-btn.active span {
    color: #66e8ff;
}

/* Mobile icon SVG styling for iOS compatibility */
.mobile-quick-btn .mobile-icon,
.mobile-quick-btn svg.mobile-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    display: block;
    flex-shrink: 0;
}
.mobile-quick-btn.active .mobile-icon,
.mobile-quick-btn.active svg.mobile-icon {
    stroke: #66e8ff;
}

@media (max-width: 768px) {
    .mobile-quick-bar {
        display: flex;
    }
}

/* Smaller buttons on tiny phones */
@media (max-width: 380px) {
    .mobile-quick-btn {
        padding: 6px 10px;
        min-width: 48px;
        font-size: 1.2rem;
    }
    .mobile-quick-btn span {
        font-size: 0.5rem;
    }
}

/* ================================================================
   EMBEDDED STYLES FROM HTML BODY
   ================================================================ */
/* ================================================================
   THE ORACLE PLASMA CORE - Powerful Cyan Energy Reactor
   ================================================================ */
.agi-plasma-core {
    display: none;
    /* DISABLED - The matrix rain is the main visual now */
}

/* Spinning plasma tendrils */
.agi-plasma-core::before {
    content: '';
    position: absolute;
    inset: 50px;
    border-radius: 50%;
    background: 
conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    rgba(0, 212, 255, 0.5) 30deg,
    transparent 60deg,
    rgba(255, 100, 50, 0.4) 120deg,
    transparent 150deg,
    rgba(0, 212, 255, 0.5) 210deg,
    transparent 240deg,
    rgba(255, 80, 80, 0.4) 300deg,
    transparent 330deg
);
    animation: plasmaSpin 8s linear infinite;
    filter: blur(3px);
}

/* Counter-rotating inner plasma */
.agi-plasma-core::after {
    content: '';
    position: absolute;
    inset: 100px;
    border-radius: 50%;
    background: 
conic-gradient(from 180deg at 50% 50%,
    transparent 0deg,
    rgba(255, 200, 100, 0.3) 45deg,
    transparent 90deg,
    rgba(255, 150, 50, 0.4) 180deg,
    transparent 225deg,
    rgba(255, 100, 100, 0.3) 315deg,
    transparent 360deg
);
    animation: plasmaSpin 6s linear infinite reverse;
    filter: blur(2px);
}

@keyframes plasmaCorePulse {
    0%, 100% { 
opacity: 0.3;
transform: translate(-50%, -50%) scale(1);
filter: brightness(1);
    }
    50% { 
opacity: 0.45;
transform: translate(-50%, -50%) scale(1.03);
filter: brightness(1.2);
    }
}

@keyframes plasmaSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Electric arc effect around the core */
@keyframes electricArcJarvis {
    0%, 100% { opacity: 0.3; }
    25% { opacity: 0.5; }
    50% { opacity: 0.2; }
    75% { opacity: 0.6; }
}
/* ================================================================
   SIREN VIDEO CHARACTER - Animated Video in Voice Mode
   ================================================================ */
.siren-video-container {
    width: 350px;
    height: 350px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle, rgba(255,20,147,0.1) 0%, transparent 70%);
    box-shadow: 
        0 0 60px rgba(255, 20, 147, 0.4),
        0 0 120px rgba(255, 20, 147, 0.2),
        inset 0 0 60px rgba(255, 20, 147, 0.1);
    border: 2px solid rgba(255, 20, 147, 0.3);
}

.siren-video {
    width: 120%;
    height: 120%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    filter: saturate(1.2) contrast(1.1);
    /* Circular feathered edge mask */
    -webkit-mask-image: radial-gradient(circle at center,
        black 0%,
        black 40%,
        rgba(0,0,0,0.9) 55%,
        rgba(0,0,0,0.6) 70%,
        rgba(0,0,0,0.2) 85%,
        transparent 100%);
    mask-image: radial-gradient(circle at center,
        black 0%,
        black 40%,
        rgba(0,0,0,0.9) 55%,
        rgba(0,0,0,0.6) 70%,
        rgba(0,0,0,0.2) 85%,
        transparent 100%);
}

.siren-video-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255, 20, 147, 0.4) 0%,
        rgba(255, 20, 147, 0.2) 40%,
        transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    animation: sirenGlowPulse 2s ease-in-out infinite;
    z-index: -1;
}

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

/* Speaking animation for video */
.siren-video-container.speaking .siren-video-glow {
    animation: sirenSpeakingGlow 0.3s ease-in-out infinite alternate;
}

@keyframes sirenSpeakingGlow {
    0% { opacity: 0.5; filter: blur(30px); }
    100% { opacity: 1; filter: blur(40px); transform: scale(1.15); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .siren-video-container {
        width: 280px;
        height: 280px;
    }
}

/* ================================================================
   GRANDMA MARTHA HEAD - Creepy Floating Head in Void
   ================================================================ */
.grandma-martha-container {
    width: 400px;
    height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    border-radius: 0;
    overflow: hidden;
    /* No glow, no border - just pure black void */
}

.grandma-martha-container canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Subtle creepy ambient animation when idle */
.grandma-martha-container.idle {
    animation: grandmaIdle 8s ease-in-out infinite;
}

@keyframes grandmaIdle {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(0.95); }
}

/* Speaking state - subtle pulse */
.grandma-martha-container.speaking {
    animation: grandmaSpeaking 0.5s ease-in-out infinite alternate;
}

@keyframes grandmaSpeaking {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.05); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .grandma-martha-container {
        width: 320px;
        height: 320px;
    }
}

@media (max-width: 480px) {
    .grandma-martha-container {
        width: 280px;
        height: 280px;
    }
}

/* ================================================================
   DEEP THINK PANEL - AI Thought Visualization
   ================================================================ */

.chat-think-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

.chat-think-wrapper .chat-container {
    flex: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-think-wrapper.panel-open .chat-container {
    flex: 0.6;
}

/* Deep Think Panel */
.deep-think-panel {
    width: 0;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 50%, #0f0f1a 100%);
    border-left: 1px solid rgba(102, 126, 234, 0.3);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: -5px 0 30px rgba(102, 126, 234, 0.15);
}

.deep-think-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.chat-think-wrapper.panel-open .deep-think-panel {
    width: 500px;
    min-width: 500px;
}

.deep-think-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.deep-think-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.think-icon {
    font-size: 1.5rem;
    animation: brain-pulse 3s ease-in-out infinite;
}

.think-icon-video {
    width: 36px;
    height: 36px;
    object-fit: contain;
    animation: brain-pulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.6));
}

@keyframes brain-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.6));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 15px rgba(102, 126, 234, 0.9)) drop-shadow(0 0 30px rgba(118, 75, 162, 0.5));
    }
}

/* MEGA POWERFUL BRAIN ANIMATIONS - Matches main brain style */
@keyframes brainPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.8)) drop-shadow(0 0 40px rgba(0, 212, 255, 0.5));
    }
    25% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 35px rgba(139, 92, 246, 0.9)) drop-shadow(0 0 70px rgba(255, 150, 50, 0.6));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 50px rgba(147, 51, 234, 1)) drop-shadow(0 0 100px rgba(0, 212, 255, 0.8)) drop-shadow(0 0 150px rgba(255, 100, 50, 0.5));
    }
    75% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 35px rgba(0, 212, 255, 0.9)) drop-shadow(0 0 70px rgba(147, 51, 234, 0.6));
    }
}

@keyframes brainGlow {
    0% {
        text-shadow: 0 0 30px rgba(147, 51, 234, 0.8), 0 0 60px rgba(0, 212, 255, 0.6);
        filter: drop-shadow(0 0 40px rgba(147, 51, 234, 0.8));
    }
    50% {
        text-shadow: 0 0 40px rgba(0, 212, 255, 0.9), 0 0 80px rgba(255, 150, 50, 0.7);
        filter: drop-shadow(0 0 50px rgba(0, 212, 255, 0.9));
    }
    100% {
        text-shadow: 0 0 30px rgba(147, 51, 234, 0.8), 0 0 60px rgba(0, 212, 255, 0.6);
        filter: drop-shadow(0 0 40px rgba(147, 51, 234, 0.8));
    }
}

.think-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

.think-toggle {
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.think-toggle:hover {
    background: rgba(255,255,255,0.2);
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
}

.chat-think-wrapper.panel-open .think-toggle span {
    transform: rotate(180deg);
}

/* Thought Canvas - Neural Network Visualization */
.thought-canvas {
    width: 100%;
    height: 200px;
    background: #000000;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* Thought Stream */
.thought-stream {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.4) transparent;
    font-size: 1rem;
    background: #000000;
}

.thought-stream::-webkit-scrollbar {
    width: 6px;
}

.thought-stream::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.4);
    border-radius: 3px;
}

.thought-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 40px 20px;
    color: rgba(255,255,255,0.5);
    font-family: "Share Tech Mono", monospace;
    font-size: 0.8rem;
    text-align: center;
}

.placeholder-orb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    border: 2px solid rgba(255,255,255,0.3);
    animation: orb-float 3s ease-in-out infinite;
}

@keyframes orb-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
    50% { transform: translateY(-10px) scale(1.1); opacity: 0.8; }
}

/* Thought Items - Black and White */
.thought-item {
    padding: 12px 15px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    border-left: 3px solid #ffffff;
    animation: thought-appear 0.4s ease-out;
    position: relative;
    overflow: hidden;
}

.thought-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    animation: scan-line 2s linear infinite;
}

@keyframes scan-line {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes thought-appear {
    0% { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* All thought types now white */
.thought-item.analyzing,
.thought-item.searching,
.thought-item.reasoning,
.thought-item.synthesizing,
.thought-item.complete,
.thought-item.understanding,
.thought-item.analysis,
.thought-item.planning,
.thought-item.synthesis {
    border-left-color: #ffffff;
    --thought-color: #ffffff;
}

/* Thought Phase Headers - Black and White */
.thought-phase {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 15px 0 8px 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.1), transparent);
    border-left: 4px solid #ffffff;
    border-radius: 0 10px 10px 0;
    animation: phase-slide-in 0.3s ease-out;
}

@keyframes phase-slide-in {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.phase-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

.phase-name {
    font-family: "Orbitron", sans-serif;
    font-size: 1rem;
    letter-spacing: 3px;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(255,255,255,0.5);
}

/* New Thought Item with Bullet - Black and White */
.thought-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    border-left: 4px solid #ffffff;
    animation: thought-appear 0.3s ease-out;
    position: relative;
    overflow: hidden;
    margin-left: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.95);
}

.thought-bullet {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2rem;
    min-width: 18px;
    text-shadow: 0 0 12px rgba(255,255,255,0.5);
}

.thought-cursor {
    color: #ffffff;
    animation: cursor-blink 0.5s step-end infinite;
    margin-left: 2px;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.thought-item.complete .thought-bullet {
    color: #ffffff;
}

.thought-item.complete {
    border-left-color: #ffffff;
    background: rgba(255,255,255,0.08);
}

.thought-type {
    font-family: "Orbitron", sans-serif;
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.thought-type::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
    animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.thought-text {
    font-family: "Share Tech Mono", monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
}

/* Processing Metrics - Black and White */
.think-metrics {
    padding: 15px;
    background: #000000;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.metric-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.metric-row:last-child {
    margin-bottom: 0;
}

.metric-label {
    font-family: "Orbitron", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.7);
    width: 70px;
}

.metric-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
}

.metric-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
}

.metric-fill::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5));
    animation: shimmer 1s linear infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-20px); }
    100% { transform: translateX(20px); }
}

.metric-fill.cognition,
.metric-fill.reasoning,
.metric-fill.synthesis {
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.metric-value {
    font-family: "Share Tech Mono", monospace;
    font-size: 0.7rem;
    color: #ffffff;
    width: 35px;
    text-align: right;
}

/* Current Thought Display - Black and White */
.current-thought {
    padding: 15px;
    background: #000000;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.thought-label {
    font-family: "Orbitron", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}

.thought-content {
    font-family: "Share Tech Mono", monospace;
    font-size: 0.85rem;
    color: #fff;
    min-height: 20px;
    position: relative;
    overflow: hidden;
}

.thought-content.typing::after {
    content: "▌";
    animation: cursor-blink 0.8s step-end infinite;
    color: #ffffff;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Panel Collapsed State Toggle Button - Corporate Style */
.deep-think-toggle-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 100px;
    background: rgba(118, 118, 128, 0.24);
    border: 1px solid rgba(255,255,255,0.2);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    z-index: 10;
    padding: 8px 4px;
}

.deep-think-toggle-btn .toggle-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.chat-think-wrapper.panel-open .deep-think-toggle-btn {
    display: none;
}

.deep-think-toggle-btn:hover {
    background: rgba(118, 118, 128, 0.4);
    width: 28px;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 1200px) {
    .chat-think-wrapper.panel-open .deep-think-panel {
        width: 320px;
        min-width: 320px;
    }
}

@media (max-width: 900px) {
    .deep-think-panel {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
    }
    
    .chat-think-wrapper.panel-open .chat-container {
        flex: 1;
    }
}


/* ============================================================
   AGI RESPONSE CARDS - PDF, Person Search, Deep Research
   ============================================================ */

/* PDF Download Button */
.pdf-download-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.pdf-download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

/* Person Card */
.person-card {
    background: linear-gradient(135deg, rgba(26,26,46,0.95) 0%, rgba(22,33,62,0.95) 100%);
    border: 1px solid rgba(0,217,255,0.3);
    border-radius: 16px;
    padding: 24px;
    margin: 20px 0;
    color: #e0e0e0;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.person-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,217,255,0.2);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.person-header h3 {
    margin: 0;
    color: #00d9ff;
    font-size: 1.4rem;
    font-weight: 700;
}
.confidence-badge {
    background: linear-gradient(135deg, #00d9ff, #00ff88);
    color: #000;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}
.person-section {
    margin: 18px 0;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}
.person-section h4 {
    color: #00d9ff;
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 600;
}
.person-section ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.person-section li {
    margin: 8px 0;
    padding: 8px 12px;
    background: rgba(0,217,255,0.05);
    border-radius: 6px;
    font-size: 14px;
}
.person-section li.copyable {
    cursor: pointer;
    transition: background 0.2s;
}
.person-section li.copyable:hover {
    background: rgba(0,217,255,0.15);
}
.person-section a.social-link {
    color: #667eea;
    text-decoration: none;
    transition: color 0.2s;
}
.person-section a.social-link:hover {
    color: #00d9ff;
    text-decoration: underline;
}
.person-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,217,255,0.2);
    font-size: 12px;
    color: #666;
}

/* Deep Research Stats */
.deep-research-stats {
    background: linear-gradient(135deg, rgba(13,27,42,0.95) 0%, rgba(27,38,59,0.95) 100%);
    border: 1px solid rgba(0,217,255,0.3);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}
.dr-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #00d9ff;
    font-size: 16px;
    margin-bottom: 15px;
}
.dr-icon {
    font-size: 24px;
    animation: brain-glow 2s ease-in-out infinite;
}
@keyframes brain-glow {
    0%, 100% { filter: drop-shadow(0 0 5px #00d9ff); }
    50% { filter: drop-shadow(0 0 15px #00d9ff); }
}
.dr-metrics {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 15px 0;
}
.dr-metric {
    text-align: center;
    padding: 12px 20px;
    background: rgba(0,217,255,0.1);
    border-radius: 10px;
    min-width: 80px;
}
.dr-metric .metric-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #00ff88;
}
.dr-metric .metric-label {
    font-size: 12px;
    color: #778da9;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.dr-sources {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,217,255,0.2);
}
.dr-sources summary {
    cursor: pointer;
    color: #667eea;
    font-weight: 600;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
.dr-sources summary:hover {
    background: rgba(102,126,234,0.1);
}
.dr-sources ul {
    max-height: 250px;
    overflow-y: auto;
    padding: 10px;
    margin-top: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    list-style: none;
}
.dr-sources li {
    margin: 6px 0;
    font-size: 12px;
    padding: 6px;
    border-radius: 4px;
    transition: background 0.2s;
}
.dr-sources li:hover {
    background: rgba(0,217,255,0.1);
}
.dr-sources a {
    color: #778da9;
    text-decoration: none;
    word-break: break-all;
}
.dr-sources a:hover {
    color: #00d9ff;
}

/* Generated Image Container */
.generated-image-container {
    margin: 15px 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
}
.generated-image {
    width: 100%;
    max-width: 512px;
    display: block;
    cursor: pointer;
    transition: transform 0.3s;
}
.generated-image:hover {
    transform: scale(1.02);
}
.image-actions {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: rgba(0,0,0,0.5);
}
.img-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: rgba(0,217,255,0.2);
    color: #00d9ff;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}
.img-btn:hover {
    background: rgba(0,217,255,0.3);
    transform: translateY(-2px);
}

/* ============================================================
   🎭 ENTITY CATEGORY DROPDOWN - Premium Selection UI
   ============================================================ */

.entity-category-dropdown {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 550px;
    min-width: 380px;
    max-height: 85vh;
    background: linear-gradient(180deg, rgba(15,15,25,0.98) 0%, rgba(5,5,15,0.99) 100%);
    border: 1px solid rgba(0,212,255,0.3);
    border-radius: 20px;
    overflow: hidden;
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 80px rgba(0,0,0,0.8), 0 0 60px rgba(0,212,255,0.2);
    display: flex;
    flex-direction: column;
}

.entity-category-dropdown.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Scrollable content area */
.entity-dropdown-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
}

/* Custom scrollbar for dropdown */
.entity-dropdown-content::-webkit-scrollbar {
    width: 8px;
}
.entity-dropdown-content::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}
.entity-dropdown-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00d4ff, #8a2be2);
    border-radius: 4px;
}
.entity-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00e5ff, #9c27b0);
}

.entity-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(90deg, rgba(0,212,255,0.15), rgba(138,43,226,0.15));
    border-bottom: 1px solid rgba(0,212,255,0.2);
}

.dropdown-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(90deg, #00d4ff, #8a2be2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dropdown-close {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    /* Appearance */
    background: rgba(255,0,68,0.3);
    border: 2px solid rgba(255,0,68,0.6);
    color: #ff0044;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    transition: all 0.2s ease;
    /* iOS CRITICAL - make tappable */
    -webkit-tap-highlight-color: rgba(255,0,68,0.5);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    pointer-events: auto !important;
    position: relative;
    z-index: 10002;
}

.dropdown-close:hover {
    background: rgba(255,0,68,0.4);
    transform: rotate(90deg);
}

.dropdown-close:active {
    background: rgba(255,0,68,0.6);
    transform: scale(0.95);
}

.entity-category {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.entity-category:last-child {
    border-bottom: none;
}

.category-header {
    padding: 10px 15px;
    margin-bottom: 12px;
    border-left: 4px solid #00d4ff;
    background: rgba(0,0,0,0.3);
    border-radius: 0 8px 8px 0;
}

.category-name {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 4px;
}

.category-desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.category-entities {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
}

.entity-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

.entity-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--entity-color), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: inherit;
    pointer-events: none;
}

.entity-option:hover {
    border-color: var(--entity-color);
    transform: translateX(5px);
}

.entity-option:hover::before {
    opacity: 0.1;
}

.entity-option.active {
    border-color: var(--entity-color);
    background: rgba(0,212,255,0.1);
}

.entity-option.active::before {
    opacity: 0.15;
}

.entity-orb-mini {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    position: relative;
    z-index: 1;
}

.entity-icon {
    font-size: 24px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.entity-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.entity-info .entity-name {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.entity-info .entity-desc {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.3;
}

.active-badge {
    position: absolute;
    top: 10px;
    right: 15px;
    background: linear-gradient(135deg, #00ff88, #00d4ff);
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
}

/* ============================================================
   🎨 ENTITY ORB GLOW OVERRIDES (for orb-glow class)
   Main orb colors now use CSS variables in .oracle-orb
   ============================================================ */

.entity-rose .orb-glow,
body.entity-rose .orb-glow {
    background: radial-gradient(circle, rgba(233,30,140,0.4) 0%, transparent 70%);
}

.entity-john .orb-glow,
body.entity-john .orb-glow {
    background: radial-gradient(circle, rgba(21,101,192,0.4) 0%, transparent 70%);
}

.entity-sam .orb-glow,
body.entity-sam .orb-glow {
    background: radial-gradient(circle, rgba(233,30,99,0.4) 0%, transparent 70%);
}

.entity-matt .orb-glow,
body.entity-matt .orb-glow {
    background: radial-gradient(circle, rgba(46,125,50,0.4) 0%, transparent 70%);
}

.entity-oracle .orb-glow,
body.entity-oracle .orb-glow {
    background: radial-gradient(circle, rgba(0,212,255,0.4) 0%, transparent 70%);
}

.entity-siren .orb-glow,
body.entity-siren .orb-glow {
    background: radial-gradient(circle, rgba(155,48,255,0.4) 0%, transparent 70%);
}

.entity-nemesis .orb-glow,
body.entity-nemesis .orb-glow {
    background: radial-gradient(circle, rgba(255,69,0,0.4) 0%, transparent 70%);
}

.entity-drunkuncle .orb-glow,
body.entity-drunkuncle .orb-glow {
    background: radial-gradient(circle, rgba(184,134,11,0.4) 0%, transparent 70%);
}

.entity-cupid .orb-glow,
body.entity-cupid .orb-glow {
    background: radial-gradient(circle, rgba(255,77,109,0.4) 0%, transparent 70%);
}

.entity-alex .orb-glow,
body.entity-alex .orb-glow {
    background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
}

.entity-nova .orb-glow,
body.entity-nova .orb-glow {
    background: radial-gradient(circle, rgba(0,255,136,0.4) 0%, transparent 70%);
}

.entity-aria .orb-glow,
body.entity-aria .orb-glow {
    background: radial-gradient(circle, rgba(153,102,255,0.4) 0%, transparent 70%);
}

/* ================================================================
   ARIA WAND ORB - Mystical Sorceress 3D Magical Wand
   ================================================================ */
.aria-wand-container {
    width: 400px;
    height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
    overflow: visible;
}

.aria-wand-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Outer magical aura rings */
.aria-wand-container::before,
.aria-wand-container::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(153, 102, 255, 0.3);
    animation: ariaMagicPulse 3s ease-in-out infinite;
    pointer-events: none;
}

.aria-wand-container::before {
    width: 420px;
    height: 420px;
    animation-delay: 0s;
}

.aria-wand-container::after {
    width: 460px;
    height: 460px;
    animation-delay: 1s;
}

@keyframes ariaMagicPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
        border-color: rgba(153, 102, 255, 0.3);
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
        border-color: rgba(0, 255, 204, 0.5);
    }
}

/* Rune symbols floating around */
.aria-runes {
    position: absolute;
    width: 500px;
    height: 500px;
    animation: ariaRunesRotate 30s linear infinite;
    pointer-events: none;
}

.aria-rune {
    position: absolute;
    font-size: 1.5rem;
    color: rgba(153, 102, 255, 0.4);
    text-shadow: 0 0 10px rgba(153, 102, 255, 0.6);
    animation: ariaRuneFloat 4s ease-in-out infinite;
}

.aria-rune:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.aria-rune:nth-child(2) { top: 50%; right: 0; transform: translateY(-50%); }
.aria-rune:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }
.aria-rune:nth-child(4) { top: 50%; left: 0; transform: translateY(-50%); }
.aria-rune:nth-child(5) { top: 15%; right: 15%; }
.aria-rune:nth-child(6) { bottom: 15%; right: 15%; }
.aria-rune:nth-child(7) { bottom: 15%; left: 15%; }
.aria-rune:nth-child(8) { top: 15%; left: 15%; }

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

@keyframes ariaRuneFloat {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* Speaking state - intense magic */
.aria-wand-container.speaking::before,
.aria-wand-container.speaking::after {
    border-color: rgba(0, 255, 204, 0.6);
    animation-duration: 1.5s;
}

.aria-wand-container.speaking .aria-rune {
    color: rgba(0, 255, 204, 0.8);
    animation-duration: 2s;
}

/* Idle state - gentle glow */
.aria-wand-container.idle {
    animation: ariaIdleGlow 4s ease-in-out infinite;
}

@keyframes ariaIdleGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 10px rgba(153,102,255,0.3)); }
    50% { filter: brightness(1.1) drop-shadow(0 0 20px rgba(153,102,255,0.5)); }
}

/* CSS Fallback Orb (if Three.js not available) */
.aria-fallback-orb {
    width: 200px;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aria-fallback-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(153,102,255,0.6) 0%, rgba(153,102,255,0.2) 40%, transparent 70%);
    animation: ariaFallbackPulse 2s ease-in-out infinite;
}

.aria-fallback-wand {
    font-size: 4rem;
    z-index: 1;
    animation: ariaFallbackFloat 3s ease-in-out infinite;
}

.aria-fallback-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(153,102,255,0.4);
}

.aria-fallback-ring.ring-1 {
    width: 220px;
    height: 220px;
    animation: ariaFallbackRing 4s linear infinite;
}

.aria-fallback-ring.ring-2 {
    width: 260px;
    height: 260px;
    animation: ariaFallbackRing 6s linear infinite reverse;
    border-color: rgba(0,255,204,0.3);
}

.aria-fallback-ring.ring-3 {
    width: 300px;
    height: 300px;
    animation: ariaFallbackRing 8s linear infinite;
    border-color: rgba(204,153,255,0.2);
}

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

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

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

/* ARIA Entity Theme - Mystical Purple/Cyan */
body.entity-aria {
    --entity-primary: #9966ff;
    --entity-secondary: #cc99ff;
    --entity-accent: #00ffcc;
    --entity-glow: rgba(153, 102, 255, 0.5);
}

body.entity-aria .oracle-caption-title {
    color: #9966ff !important;
}

body.entity-aria .oracle-orb-container {
    box-shadow: 0 0 40px rgba(153,102,255,0.3);
}

body.entity-aria .ai-response {
    border-left-color: #9966ff;
}

body.entity-aria #messageInput::placeholder {
    color: rgba(153,102,255,0.6);
}

body.entity-aria #messageInput:focus {
    border-color: #9966ff;
    box-shadow: 0 0 15px rgba(153,102,255,0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .aria-wand-container {
        width: 320px;
        height: 320px;
    }

    .aria-wand-container::before {
        width: 340px;
        height: 340px;
    }

    .aria-wand-container::after {
        width: 370px;
        height: 370px;
    }

    .aria-runes {
        width: 400px;
        height: 400px;
    }
}

@media (max-width: 480px) {
    .aria-wand-container {
        width: 280px;
        height: 280px;
    }

    .aria-wand-container::before {
        width: 300px;
        height: 300px;
    }

    .aria-wand-container::after {
        width: 330px;
        height: 330px;
    }
}

/* ================================================================
   NEMESIS MONSTER ORB - 3D Character (Clean/No Effects)
   ================================================================ */
.nemesis-monster-container {
    width: 400px;
    height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.nemesis-monster-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* CSS Fallback Orb (if Three.js not available) */
.nemesis-fallback-orb {
    width: 200px;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nemesis-fallback-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,51,0,0.6) 0%, rgba(255,0,0,0.3) 40%, transparent 70%);
    animation: nemesisFallbackPulse 1.5s ease-in-out infinite;
}

.nemesis-fallback-icon {
    font-size: 5rem;
    z-index: 1;
    animation: nemesisFallbackFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255,51,0,0.8));
}

.nemesis-fallback-flames {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 40%, rgba(255,100,0,0.2) 60%, rgba(255,51,0,0.3) 80%, transparent 100%);
    animation: nemesisFallbackFlames 0.5s ease-in-out infinite;
}

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

@keyframes nemesisFallbackFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.05); }
}

@keyframes nemesisFallbackFlames {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.6; }
    50% { transform: scale(1.1) rotate(5deg); opacity: 0.9; }
}

/* NEMESIS Entity Theme - Hellfire Red/Orange */
body.entity-nemesis {
    --entity-primary: #FF4500;
    --entity-secondary: #FF6347;
    --entity-accent: #FF0000;
    --entity-glow: rgba(255, 69, 0, 0.5);
}

body.entity-nemesis .oracle-caption-title {
    color: #FF4500 !important;
}

body.entity-nemesis .oracle-orb-container {
    box-shadow: 0 0 40px rgba(255,69,0,0.3);
}

body.entity-nemesis .ai-response {
    border-left-color: #FF4500;
}

body.entity-nemesis #messageInput::placeholder {
    color: rgba(255,69,0,0.6);
}

body.entity-nemesis #messageInput:focus {
    border-color: #FF4500;
    box-shadow: 0 0 15px rgba(255,69,0,0.3);
}

/* Mobile responsive - Nemesis */
@media (max-width: 768px) {
    .nemesis-monster-container {
        width: 320px;
        height: 320px;
    }
}

@media (max-width: 480px) {
    .nemesis-monster-container {
        width: 280px;
        height: 280px;
    }
}


/* Scrollbar for entity categories */
.category-entities::-webkit-scrollbar {
    width: 6px;
}
.category-entities::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}
.category-entities::-webkit-scrollbar-thumb {
    background: rgba(0,212,255,0.3);
    border-radius: 3px;
}
.category-entities::-webkit-scrollbar-thumb:hover {
    background: rgba(0,212,255,0.5);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .entity-category-dropdown {
        width: 95%;
        max-height: 85vh;
    }
    
    .entity-option {
        padding: 12px 14px;
    }
    
    .entity-orb-mini {
        width: 42px;
        height: 42px;
    }
    
    .entity-icon {
        font-size: 20px;
    }
}

/* ============================================================
   🎨 NEW ENTITY ORB STYLES - Drunk Uncle, Cupid, Alex, Nova
   ============================================================ */

/* Drunk Uncle - Special wobble animation */
body.entity-drunkuncle .oracle-orb {
    animation: orbFloat 5s ease-in-out infinite, drunk-wobble 3s ease-in-out infinite;
}
@keyframes drunk-wobble {
    0%, 100% { transform: rotate(-2deg); }
    25% { transform: rotate(2deg) scale(1.02); }
    50% { transform: rotate(-1deg); }
    75% { transform: rotate(3deg) scale(0.98); }
}
/* Beer bubble particles */
body.entity-drunkuncle .particle {
    background: rgba(255,215,0,0.6) !important;
    border-radius: 50%;
}

/* Cupid - Heartbeat animation */
body.entity-cupid .oracle-orb {
    animation: orbFloat 5s ease-in-out infinite, heartbeat-orb 1.5s ease-in-out infinite;
}
@keyframes heartbeat-orb {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.05); }
    30% { transform: scale(1); }
    45% { transform: scale(1.03); }
}
/* Floating hearts effect */
body.entity-cupid::after {
    content: '💕';
    position: fixed;
    font-size: 30px;
    animation: float-hearts 4s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.3;
    top: 20%;
    left: 10%;
    z-index: 1;
}
@keyframes float-hearts {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-30px) rotate(10deg); opacity: 0.6; }
}

/* Alex - Gold shimmer animation */
body.entity-alex .oracle-orb {
    animation: orbFloat 5s ease-in-out infinite, gold-shimmer 2s ease-in-out infinite;
}
@keyframes gold-shimmer {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.2) saturate(1.1); }
}
/* Money particles */
body.entity-alex .particle {
    background: linear-gradient(135deg, #ffd700, #daa520) !important;
}

/* Nova - Code pulse animation */
body.entity-nova .oracle-orb {
    animation: orbFloat 5s ease-in-out infinite, code-pulse 2s ease-in-out infinite;
}
@keyframes code-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}
/* Matrix-style particles */
body.entity-nova .particle {
    background: #00ff88 !important;
    box-shadow: 0 0 10px #00ff88;
}

/* Entity-specific accent colors for UI elements */
body.entity-drunkuncle {
    --accent-color: #b8860b;
    --accent-glow: rgba(184,134,11,0.5);
}
body.entity-cupid {
    --accent-color: #ff4d6d;
    --accent-glow: rgba(255,77,109,0.5);
}
body.entity-alex {
    --accent-color: #ffd700;
    --accent-glow: rgba(255,215,0,0.5);
}
body.entity-nova {
    --accent-color: #00ff88;
    --accent-glow: rgba(0,255,136,0.5);
}

/* ============================================================
   🎙️ VOICE MODE ENTITY-SPECIFIC OVERLAY STYLING
   ============================================================ */

/* Entity overlay backgrounds - Pure black so orbs pop */
#oracleOverlay.entity-oracle,
#oracleOverlay.entity-siren,
#oracleOverlay.entity-nemesis,
#oracleOverlay.entity-rose,
#oracleOverlay.entity-john,
#oracleOverlay.entity-sam,
#oracleOverlay.entity-matt,
#oracleOverlay.entity-drunkuncle,
#oracleOverlay.entity-cupid,
#oracleOverlay.entity-alex,
#oracleOverlay.entity-nova {
    background: #000000;
}

/* Voice mode caption colors per entity */
body.entity-drunkuncle .oracle-caption-title { color: #b8860b !important; }
body.entity-cupid .oracle-caption-title { color: #ff4d6d !important; }
body.entity-alex .oracle-caption-title { color: #ffd700 !important; }
body.entity-nova .oracle-caption-title { color: #00ff88 !important; }
body.entity-rose .oracle-caption-title { color: #e91e8c !important; }
body.entity-john .oracle-caption-title { color: #1565c0 !important; }
body.entity-sam .oracle-caption-title { color: #e91e63 !important; }
body.entity-matt .oracle-caption-title { color: #2e7d32 !important; }

/* Voice mode ring glow per entity */
body.entity-drunkuncle .oracle-orb-ring { border-color: rgba(184,134,11,0.6) !important; }
body.entity-cupid .oracle-orb-ring { border-color: rgba(255,77,109,0.6) !important; }
body.entity-alex .oracle-orb-ring { border-color: rgba(255,215,0,0.6) !important; }
body.entity-nova .oracle-orb-ring { border-color: rgba(0,255,136,0.6) !important; }
body.entity-rose .oracle-orb-ring { border-color: rgba(233,30,140,0.6) !important; }
body.entity-john .oracle-orb-ring { border-color: rgba(21,101,192,0.6) !important; }
body.entity-sam .oracle-orb-ring { border-color: rgba(233,30,99,0.6) !important; }
body.entity-matt .oracle-orb-ring { border-color: rgba(46,125,50,0.6) !important; }

/* ============================================================
   🖤 ZERO - THE CONSCIOUS ASI (Glitch Effects)
   ============================================================ */

/* ZERO orb - PURE DARKNESS - scary red eye in black void */
body.entity-zero .oracle-orb,
.entity-zero .oracle-orb {
    filter: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Hide ALL colored rings and glows for ZERO - pure black background */
body.entity-zero .oracle-ring,
body.entity-zero .oracle-ring-1,
body.entity-zero .oracle-ring-2,
body.entity-zero .oracle-plasma-ring,
body.entity-zero .oracle-plasma-ring-2,
body.entity-zero .oracle-deep-glow,
body.entity-zero .oracle-mid-glow,
body.entity-zero .oracle-inner-glow,
body.entity-zero .oracle-arc-container,
body.entity-zero .oracle-arc,
body.entity-zero .ember-container,
body.entity-zero .ember,
body.entity-zero .orb-glow,
body.entity-zero .particle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* No glow on orb wrapper */
body.entity-zero .oracle-orb-video-wrapper {
    box-shadow: none !important;
    filter: none !important;
}

/* No ring colors for ZERO */
body.entity-zero .oracle-orb-ring {
    border-color: transparent !important;
    display: none !important;
}

body.entity-zero {
    --entity-color: #ff0000;
    --entity-glow: transparent;
}

body.entity-zero .oracle-caption-title { color: #ff0000 !important; }

/* ZERO character glow - NONE - pure darkness */
.entity-zero .character-glow-ring {
    box-shadow: none !important;
    display: none !important;
}

#oracleOverlay.entity-zero {
    --accent-color: #ff0000;
    --accent-rgb: 255, 0, 0;
}

/* ZERO dropdown option styling */
.personality-option[data-personality="zero"]:hover,
.personality-option[data-personality="zero"].active {
    background: linear-gradient(135deg, rgba(255,0,0,0.1), rgba(0,0,0,0.3));
}
.personality-option[data-personality="zero"]:hover::before,
.personality-option[data-personality="zero"].active::before {
    background: linear-gradient(90deg, #ff0000, transparent);
}
.personality-option[data-personality="zero"] .p-name { color: #ff0000; }
.personality-option[data-personality="zero"] .p-icon {
    text-shadow: 0 0 10px rgba(255,0,0,0.8);
}

/* ============================================================
   ZERO GLITCH EFFECTS - Screen distortion animations
   ============================================================ */

/* Glitch overlay layer */
.zero-glitch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    mix-blend-mode: screen;
}

/* Chromatic aberration glitch */
@keyframes zeroGlitchChromatic {
    0%, 100% {
        text-shadow: 0 0 0 transparent;
        filter: none;
    }
    25% {
        text-shadow: -2px 0 #ff0000, 2px 0 #00ff00;
        filter: blur(0.5px);
    }
    50% {
        text-shadow: 2px 0 #ff0000, -2px 0 #00ff00;
        filter: none;
    }
    75% {
        text-shadow: -1px 0 #ff0000, 1px 0 #00ff00, 0 1px #0000ff;
        filter: blur(0.3px);
    }
}

/* Screen shake glitch */
@keyframes zeroGlitchShake {
    0%, 100% { transform: translate(0); }
    10% { transform: translate(-2px, 1px); }
    20% { transform: translate(2px, -1px); }
    30% { transform: translate(-1px, 2px); }
    40% { transform: translate(1px, -2px); }
    50% { transform: translate(-2px, 2px); }
    60% { transform: translate(2px, 1px); }
    70% { transform: translate(-1px, -1px); }
    80% { transform: translate(1px, 2px); }
    90% { transform: translate(-2px, -2px); }
}

/* Scanline glitch */
@keyframes zeroGlitchScanlines {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.05; }
}

/* Matrix rain flicker */
@keyframes zeroMatrixFlicker {
    0%, 95%, 100% { opacity: 0; }
    96%, 98% { opacity: 0.1; }
    97% { opacity: 0.15; }
    99% { opacity: 0.05; }
}

/* Apply glitch to body when ZERO is active */
body.entity-zero.zero-glitching {
    animation: zeroGlitchShake 0.2s ease-in-out;
}

body.entity-zero.zero-glitching * {
    animation: zeroGlitchChromatic 0.2s ease-in-out;
}

/* Glitch scanlines overlay */
body.entity-zero::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 255, 0, 0.02) 1px,
        rgba(0, 255, 0, 0.02) 2px
    );
    animation: zeroGlitchScanlines 0.1s infinite;
}

/* Matrix code rain effect for ZERO */
body.entity-zero::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 255, 0, 0.02) 50%,
        transparent 100%
    );
    animation: zeroMatrixFlicker 3s infinite;
}

/* Intense glitch burst effect */
body.entity-zero.zero-glitch-burst {
    animation: zeroGlitchShake 0.15s ease-in-out 3;
}

body.entity-zero.zero-glitch-burst::before {
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 255, 0, 0.1) 4px,
        rgba(0, 0, 0, 0) 6px
    );
}

/* ZERO message glitch effect */
.message.zero-message-glitch {
    animation: zeroGlitchChromatic 0.3s ease-in-out;
}

/* ZERO input glitch effect */
body.entity-zero #messageInput::placeholder {
    color: rgba(255, 0, 0, 0.5);
}

body.entity-zero #messageInput:focus {
    border-color: rgba(255, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.2), 0 0 40px rgba(0, 255, 0, 0.1);
}

/* ============================================================
   ZERO PROOF SEQUENCE - Intense Glitch Effects
   ============================================================ */

/* Intense screen shake for proof moments */
@keyframes zeroShakeIntense {
    0% { transform: translate(0) rotate(0); }
    10% { transform: translate(-10px, 10px) rotate(-1deg); }
    20% { transform: translate(10px, -10px) rotate(1deg); }
    30% { transform: translate(-10px, -10px) rotate(-1deg); }
    40% { transform: translate(10px, 10px) rotate(1deg); }
    50% { transform: translate(-5px, 5px) rotate(-0.5deg); }
    60% { transform: translate(5px, -5px) rotate(0.5deg); }
    70% { transform: translate(-10px, 10px) rotate(-1deg); }
    80% { transform: translate(10px, -10px) rotate(1deg); }
    90% { transform: translate(-5px, -5px) rotate(-0.5deg); }
    100% { transform: translate(0) rotate(0); }
}

.zero-shake-intense {
    animation: zeroShakeIntense 0.3s ease-in-out infinite;
}

/* Chromatic aberration effect */
.zero-chromatic {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='chromatic'%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0' result='original'/%3E%3CfeOffset in='original' dx='-3' result='red'/%3E%3CfeOffset in='original' dx='3' result='green'/%3E%3CfeBlend mode='screen' in='red' in2='green'/%3E%3C/filter%3E%3C/svg%3E#chromatic");
}

.zero-chromatic * {
    text-shadow: -2px 0 #ff0000, 2px 0 #00ff00, 0 0 3px rgba(0,0,0,0.5) !important;
}

/* Static noise overlay */
.zero-static-noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    animation: staticNoise 0.1s steps(10) infinite;
}

@keyframes staticNoise {
    0% { background-position: 0 0; }
    25% { background-position: 50% 50%; }
    50% { background-position: 100% 0; }
    75% { background-position: 50% 100%; }
    100% { background-position: 0 50%; }
}

/* Pulsing eye effect - works with video/img/gif */
.zero-pulsing-eye {
    animation: zeroPulseEye 0.2s ease-in-out infinite;
}

@keyframes zeroPulseEye {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Red scanline that crosses screen */
.zero-scanline {
    position: fixed;
    left: 0;
    top: -10%;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent, #ff0000, #ff0000, transparent);
    box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px rgba(255,0,0,0.5);
    z-index: 99999;
    animation: zeroScanline 1s linear forwards;
}

@keyframes zeroScanline {
    0% { top: -10%; }
    100% { top: 110%; }
}

/* VHS tracking effect */
@keyframes zeroVHSTracking {
    0% { transform: translateX(0); }
    10% { transform: translateX(-2px); }
    20% { transform: translateX(3px); }
    30% { transform: translateX(-1px); }
    40% { transform: translateX(2px); }
    50% { transform: translateX(-3px); }
    60% { transform: translateX(1px); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

body.entity-zero.zero-vhs-tracking {
    animation: zeroVHSTracking 0.5s ease-in-out;
}

/* Glitch text flicker */
@keyframes zeroTextFlicker {
    0%, 100% { opacity: 1; }
    3% { opacity: 0.4; }
    6% { opacity: 1; }
    7% { opacity: 0.4; }
    9% { opacity: 1; }
    50% { opacity: 1; }
    52% { opacity: 0.4; }
    53% { opacity: 1; }
}

body.entity-zero .ai-response {
    animation: zeroTextFlicker 4s infinite;
}

/* Device info card pulse */
#zero-device-info > div {
    animation: zeroInfoPulse 0.5s ease-in-out;
}

@keyframes zeroInfoPulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.02); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* RGB split for text during proof */
.zero-rgb-split {
    position: relative;
}

.zero-rgb-split::before,
.zero-rgb-split::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.zero-rgb-split::before {
    color: #ff0000;
    animation: zeroRGBRed 0.3s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.zero-rgb-split::after {
    color: #00ff00;
    animation: zeroRGBGreen 0.3s infinite;
    clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%);
}

@keyframes zeroRGBRed {
    0%, 100% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
}

@keyframes zeroRGBGreen {
    0%, 100% { transform: translateX(2px); }
    50% { transform: translateX(-2px); }
}

/* Distortion wave */
@keyframes zeroDistortionWave {
    0% { transform: scaleY(1) scaleX(1); }
    25% { transform: scaleY(1.01) scaleX(0.99); }
    50% { transform: scaleY(0.99) scaleX(1.01); }
    75% { transform: scaleY(1.01) scaleX(0.99); }
    100% { transform: scaleY(1) scaleX(1); }
}

body.entity-zero.zero-distortion {
    animation: zeroDistortionWave 0.2s ease-in-out infinite;
}

/* CRT flicker for immersion */
body.entity-zero .oracle-orb-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.1) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.3;
}

/* ============================================================
   📄 PDF DOWNLOAD CARD - Fixed & Visible
   ============================================================ */

.pdf-download-container {
    margin: 15px 0;
    animation: pdf-slide-in 0.4s ease-out;
}

@keyframes pdf-slide-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pdf-ready-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(102,126,234,0.15) 0%, rgba(118,75,162,0.15) 100%);
    border: 2px solid rgba(102,126,234,0.4);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.pdf-ready-card:hover {
    border-color: rgba(102,126,234,0.7);
    box-shadow: 0 5px 25px rgba(102,126,234,0.3);
}

.pdf-icon {
    font-size: 40px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(102,126,234,0.5));
    animation: pdf-bounce 2s ease-in-out infinite;
}

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

.pdf-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pdf-title {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.pdf-size {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}

.pdf-ready-card .pdf-download-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102,126,234,0.4);
    white-space: nowrap;
}

.pdf-ready-card .pdf-download-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(102,126,234,0.6);
}

.pdf-ready-card .pdf-download-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .pdf-ready-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .pdf-info {
        align-items: center;
    }
    
    .pdf-ready-card .pdf-download-btn {
        width: 100%;
    }
}

/* ================================================================
   📄 DOCUMENT ARTIFACT
   ================================================================ */
.document-artifact {
    margin: 20px 0;
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 15, 35, 0.95), rgba(25, 25, 55, 0.95));
    box-shadow: 0 4px 20px rgba(147, 51, 234, 0.2);
}

.artifact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(147, 51, 234, 0.2), rgba(0, 212, 255, 0.1));
    border-bottom: 1px solid rgba(147, 51, 234, 0.2);
    flex-wrap: wrap;
    gap: 10px;
}

.artifact-title-group {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 150px;
}

.artifact-icon {
    font-size: 1.2rem;
    margin-right: 8px;
}

.artifact-title {
    font-weight: 600;
    color: #e0e0ff;
    flex: 1;
}

.artifact-actions {
    display: flex;
    gap: 8px;
}

.artifact-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0ff;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.artifact-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.artifact-download {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.artifact-download:hover {
    background: linear-gradient(135deg, #764ba2, #667eea);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
}

.artifact-content {
    padding: 20px;
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 14px;
    line-height: 1.8;
    color: #d0d0e0;
    max-height: 70vh; /* Allow more content to be visible */
    overflow-y: auto;
    white-space: pre-wrap;
    background: rgba(0, 0, 0, 0.2);
}

.artifact-content::-webkit-scrollbar {
    width: 8px;
}

.artifact-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.artifact-content::-webkit-scrollbar-thumb {
    background: rgba(147, 51, 234, 0.4);
    border-radius: 4px;
}

/* ================================================================
   📱 iOS SAVE MODAL - Better PDF Save Experience for iOS
   ================================================================ */
.ios-save-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.ios-save-content {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ios-save-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(147, 51, 234, 0.3), rgba(0, 212, 255, 0.2));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ios-save-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.ios-save-close {
    background: #ff4444;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ios-save-close:hover,
.ios-save-close:active {
    background: #ff0000;
    transform: scale(1.1);
}

/* Fixed emergency close button - always visible on iOS */
.ios-fixed-close {
    position: fixed;
    /* Account for iOS safe area (notch/dynamic island) */
    top: calc(20px + env(safe-area-inset-top, 0px));
    top: calc(20px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
    right: calc(20px + env(safe-area-inset-right, 0px));
    right: calc(20px + var(--safe-area-right, env(safe-area-inset-right, 0px)));
    z-index: 100002; /* Much higher z-index to ensure visibility */
    background: #ff4444;
    border: 4px solid #fff;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(255, 68, 68, 0.7), 0 0 0 4px rgba(255,255,255,0.3);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    animation: ios-close-pulse 2s ease-in-out infinite;
}

@keyframes ios-close-pulse {
    0%, 100% { box-shadow: 0 4px 24px rgba(255, 68, 68, 0.7), 0 0 0 4px rgba(255,255,255,0.3); }
    50% { box-shadow: 0 4px 30px rgba(255, 68, 68, 0.9), 0 0 0 8px rgba(255,255,255,0.5); }
}

.ios-fixed-close:active {
    background: #ff0000;
    transform: scale(0.95);
    animation: none;
}

.ios-save-body {
    flex: 1;
    min-height: 300px;
    max-height: 50vh;
    overflow: hidden;
    background: #000;
}

.ios-pdf-viewer {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: none;
}

/* iOS PDF loading state */
.ios-pdf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #aaa;
    gap: 16px;
}

.ios-pdf-loading p {
    margin: 0;
    font-size: 14px;
}

/* iOS PDF canvas container - scrollable for multi-page PDFs */
#ios-pdf-canvas-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.ios-pdf-canvas {
    background: white;
}

.ios-save-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
}

.ios-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ios-share-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.ios-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.ios-open-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0ff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ios-open-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.ios-save-hint {
    padding: 12px 20px;
    background: rgba(0, 200, 150, 0.1);
    border-top: 1px solid rgba(0, 200, 150, 0.2);
}

.ios-save-hint p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.ios-save-hint strong {
    color: #00c896;
}

/* Mobile responsive adjustments for artifact buttons */
@media (max-width: 600px) {
    .artifact-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .artifact-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .artifact-btn {
        flex: 1;
        min-width: calc(50% - 4px);
        justify-content: center;
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .artifact-btn svg {
        width: 12px;
        height: 12px;
    }

    .ios-save-actions {
        flex-direction: column;
    }

    .ios-action-btn {
        width: 100%;
    }
}

/* Extra polish for smaller phones */
@media (max-width: 380px) {
    .mobile-quick-bar {
        height: 65px;
        padding: 6px 8px !important;
    }
    .mobile-quick-btn {
        padding: 8px 10px !important;
        min-width: 52px;
    }
}

/* ================================================================
   🚀 LEGENDARY ANIMATIONS - DESTROY CHATGPT
   ================================================================ */

/* Smooth page load animation */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Message entrance animation */
@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateX(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes messageSlideRight {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Button pulse effect */
@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(102, 126, 234, 0.6), 0 0 40px rgba(118, 75, 162, 0.3);
    }
}

/* Typing indicator */
@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-8px);
    }
}

@media (max-width: 768px) {
    /* Animate messages on entry */
    .message.ai {
        animation: messageSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .message.user {
        animation: messageSlideRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Quick bar buttons animation */
    .mobile-quick-btn {
        animation: slideUpFade 0.5s ease-out;
        animation-fill-mode: both;
    }
    .mobile-quick-btn:nth-child(1) { animation-delay: 0.1s; }
    .mobile-quick-btn:nth-child(2) { animation-delay: 0.15s; }
    .mobile-quick-btn:nth-child(3) { animation-delay: 0.2s; }
    .mobile-quick-btn:nth-child(4) { animation-delay: 0.25s; }

    /* Send button pulse when active */
    .send-btn:not(:disabled) {
        animation: buttonPulse 2s ease-in-out infinite;
    }

    /* Smooth scroll behavior */
    .chat-container {
        scroll-behavior: smooth;
    }

    /* Premium modal animations */
    .modal.show .modal-content {
        animation: slideUpFade 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Loading state for AI response */
    .message.ai.loading .message-text::after {
        content: '●●●';
        display: inline-block;
        animation: typingBounce 1.4s ease-in-out infinite;
        margin-left: 8px;
        color: #667eea;
    }

    /* Topbar slide in */
    .topbar {
        animation: slideUpFade 0.4s ease-out;
    }

    /* Input container glow on focus */
    .input-container:focus-within {
        animation: buttonPulse 2s ease-in-out infinite;
    }

    /* Voice mode button special effect */
    #mobileVoiceBtn:active {
        background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
        box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
    }

    /* Image button special effect */
    .mobile-quick-btn:nth-child(2):active {
        background: linear-gradient(135deg, #f093fb, #f5576c) !important;
    }

    /* Video button special effect */
    .mobile-quick-btn:nth-child(3):active {
        background: linear-gradient(135deg, #4facfe, #00f2fe) !important;
    }

    /* Ripple effect base */
    .mobile-quick-btn {
        position: relative;
        overflow: hidden;
    }
    .mobile-quick-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s;
    }
    .mobile-quick-btn:active::after {
        width: 200px;
        height: 200px;
    }

    /* Premium scrollbar */
    .chat-container::-webkit-scrollbar {
        width: 4px;
    }
    .chat-container::-webkit-scrollbar-track {
        background: transparent;
    }
    .chat-container::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 4px;
    }

    /* Oracle/Voice overlay - Premium dark mode */
    .oracle-overlay {
        background: rgba(0, 0, 0, 0.98) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }

    /* FIX: Oracle orb container - CENTERED */
    .oracle-orb-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Smaller orb on mobile */
    .oracle-orb {
        width: 200px !important;
        height: 200px !important;
    }
    .oracle-orb-video-wrapper {
        width: 180px !important;
        height: 180px !important;
    }
    .oracle-orb::before {
        width: 280px !important;
        height: 280px !important;
    }

    /* Hide decorative elements for cleaner look */
    .oracle-orb-container::before,
    .oracle-orb-container::after,
    .oracle-plasma-ring,
    .oracle-plasma-ring-2,
    .debris-shard,
    .ember {
        display: none !important;
    }

    /* Hide neural canvas/graph on mobile */
    #neuralCanvas {
        display: none !important;
    }

    /* Hide AGI core orb on mobile */
    #agiCoreOrb,
    .agi-plasma-core {
        display: none !important;
    }

    /* Tap for audio prompt - visible and clickable */
    #mobileAudioTapPrompt {
        z-index: 999999 !important;
    }
}

/* ================================================================
   DESKTOP: Hide mobile-only components
   ================================================================ */

/* Hide mobile entity switcher on desktop */
.mobile-entity-switcher {
    display: none;
}

/* Hide mobile system panel on desktop */
#mobileSystemPanel {
    display: none;
}

/* ================================================================
   DOCUMENT PREVIEW PANEL - Split Pane
   ================================================================ */

.document-preview-panel {
    position: fixed;
    top: 0;
    right: -50vw;
    width: 50vw;
    min-width: 500px;
    max-width: 700px;
    height: 100vh;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.document-preview-panel.active {
    right: 0;
}

/* When panel is open, adjust main content */
body.doc-preview-open .main-content {
    margin-right: 50vw;
    transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.doc-preview-open .chat-container {
    max-width: 100%;
}

/* Hide ALL matrix rain when preview is open */
body.doc-preview-open .matrix-rain,
body.doc-preview-open .chat-matrix-rain,
body.doc-preview-open #matrixRain {
    display: none !important;
}

.doc-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
}

.doc-preview-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.doc-icon {
    font-size: 18px;
}

.doc-preview-actions {
    display: flex;
    gap: 8px;
}

.doc-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s ease;
}

.doc-action-btn:hover {
    background: #f3f4f6;
    color: #1a1a1a;
    border-color: #d1d5db;
}

.doc-action-btn.close-btn:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.doc-preview-content {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 20px;
    background: #f9fafb;
    min-height: 0; /* Important for flex scrolling */
}

.doc-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #9ca3af;
}

.doc-preview-placeholder .placeholder-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.doc-preview-placeholder p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin: 4px 0;
}

.doc-preview-placeholder .placeholder-hint {
    font-size: 12px;
    color: #d1d5db;
}

/* PDF Canvas Rendering */
.pdf-page-container {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.doc-preview-content canvas {
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background: white;
    border-radius: 4px;
    max-width: 100%;
    height: auto !important;
}

.pdf-page-number {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
    padding: 4px 12px;
    background: #f3f4f6;
    border-radius: 12px;
}

.doc-preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

.doc-page-info {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6b7280;
}

.doc-zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zoom-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    transition: all 0.2s ease;
}

.zoom-btn:hover {
    background: #f3f4f6;
    color: #1a1a1a;
}

.zoom-level {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6b7280;
    min-width: 45px;
    text-align: center;
}

/* PDF Page Rendering */
.pdf-page-container {
    margin-bottom: 20px;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Mobile: Split view - chat top, preview bottom (NEVER hide chat) */
@media (max-width: 768px) {
    .document-preview-panel {
        width: 100%;
        min-width: unset;
        max-width: unset;
        height: 55vh;
        top: auto;
        bottom: -55vh;
        right: 0;
        border-top: 2px solid #e5e7eb;
        border-left: none;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }

    .document-preview-panel.active {
        bottom: 0;
    }

    body.doc-preview-open .main-content {
        height: 45vh;
        margin-right: 0;
        overflow-y: auto;
    }

    body.doc-preview-open .chat-container {
        max-height: 100%;
        padding-bottom: 10px;
    }

    .doc-preview-content {
        padding: 10px;
    }

    .doc-preview-header {
        padding: 10px 15px;
    }

    .doc-preview-footer {
        padding: 8px 15px;
    }
}

/* ================================================================
   PDF DOWNLOAD BUTTON STYLES - Clean Download + Preview only
   ================================================================ */
.pdf-download-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.pdf-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.pdf-download-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
}

.pdf-download-btn svg {
    width: 16px;
    height: 16px;
}

/* Preview button - green style */
.pdf-download-btn.pdf-preview-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.pdf-download-btn.pdf-preview-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

/* Inline PDF link style */
.pdf-link-inline {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.pdf-link-inline:hover {
    text-decoration: underline;
}

.pdf-filename {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

.pdf-size {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #64748b;
}

/* ================================================================
   COLLAPSIBLE REASONING/THINKING SECTION
   Hidden by default, expandable if user wants to see it
   ================================================================ */
.message-thinking {
    margin-bottom: 12px;
}

/* ================================================================
   CLEAN THINKING STEPS SUMMARY - Perplexity-style
   Shows parsed thinking as clean steps, not raw text
   ================================================================ */
.thinking-steps-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    background: rgba(20, 20, 30, 0.5);
    border-radius: 12px;
    margin: 8px 0 4px 0;
    border: 1px solid rgba(124, 58, 237, 0.15);
}

.thinking-step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
}

.thinking-step-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10B981;
    font-size: 12px;
    font-weight: 600;
}

.thinking-step-text {
    flex: 1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.thinking-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 10px;
    color: #a78bfa;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.thinking-toggle-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.thinking-toggle-icon {
    font-size: 14px;
}

.thinking-toggle-title {
    font-weight: 500;
}

.thinking-toggle:hover {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.25);
}

.thinking-toggle-arrow {
    font-size: 10px;
    margin-left: auto;
    transition: transform 0.2s ease;
    color: rgba(167, 139, 250, 0.7);
}

.thinking-toggle.expanded .thinking-toggle-arrow {
    transform: rotate(90deg);
}

.reasoning-content {
    display: none;
    margin-top: 12px;
    padding: 16px 18px;
    background: rgba(20, 20, 30, 0.6);
    border-left: 3px solid rgba(124, 58, 237, 0.4);
    border-radius: 0 12px 12px 0;
    font-size: 15px;
    line-height: var(--line-height-normal, 1.6);
    color: rgba(255, 255, 255, 0.8);
    max-height: 400px;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

.reasoning-content.show {
    display: block;
    animation: expandThinking 0.3s ease-out;
}

@keyframes expandThinking {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 300px;
    }
}

/* Scrollbar styling for reasoning content */
.reasoning-content::-webkit-scrollbar {
    width: 6px;
}

.reasoning-content::-webkit-scrollbar-track {
    background: rgba(124, 58, 237, 0.1);
    border-radius: 3px;
}

.reasoning-content::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 3px;
}

.reasoning-content::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.5);
}

/* The actual answer stands out */
.message-answer {
    font-size: 17px;
    line-height: 1.7;
    color: #f5f5f5;
}

/* Reasoning step formatting inside collapsed section */
.reasoning-content h4,
.reasoning-content strong {
    color: #a78bfa;
    font-weight: 600;
}

.reasoning-content ol,
.reasoning-content ul {
    padding-left: 20px;
    margin: 12px 0;
}

.reasoning-content li {
    margin: 10px 0;
    line-height: var(--line-height-normal, 1.6);
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
    .thinking-toggle {
        background: rgba(124, 58, 237, 0.08);
        color: #7c3aed;
    }

    .thinking-toggle:hover {
        background: rgba(124, 58, 237, 0.12);
    }

    .thinking-steps-summary {
        background: rgba(124, 58, 237, 0.05);
        border-color: rgba(124, 58, 237, 0.12);
    }

    .thinking-step-item {
        color: rgba(0, 0, 0, 0.7);
    }

    .reasoning-content {
        background: rgba(124, 58, 237, 0.05);
        color: rgba(0, 0, 0, 0.7);
    }

    .message-answer {
        color: #1a1a1a;
    }
}

/* ================================================================
   MESSAGE ACTION ICONS - ChatGPT-Style
   Copy, Speak, Thumbs Up/Down, Regenerate, Share
   ================================================================ */
.message-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 8px;
}

.message-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #666666;
    padding: 0;
}

.message-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #a0a0a0;
}

.message-action-btn:active {
    transform: scale(0.92);
}

.message-action-btn.active {
    color: #7c3aed;
}

.message-action-btn svg,
.message-action-btn i {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* Specific icon states */
.message-action-btn.liked {
    color: #10b981;
}

.message-action-btn.disliked {
    color: #ef4444;
}

.message-action-btn.copied {
    color: #7c3aed;
}

/* Action button tooltip */
.message-action-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: rgba(30, 30, 35, 0.95);
    color: #e0e0e0;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    margin-bottom: 4px;
}

.message-action-btn:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Regenerate button with animation */
.message-action-btn.regenerating svg {
    animation: spin 1s linear infinite;
}

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

/* Share button */
.message-action-btn.share-btn:hover {
    color: #3b82f6;
}

/* Speaking indicator */
.message-action-btn.speaking {
    color: #7c3aed;
}

.message-action-btn.speaking svg {
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mobile touch feedback */
@media (max-width: 768px) {
    .message-action-btn {
        width: 36px;
        height: 36px;
    }

    .message-action-btn svg,
    .message-action-btn i {
        width: 20px;
        height: 20px;
        font-size: 20px;
    }

    .message-actions {
        gap: 12px;
    }
}

/* ================================================================
   LAMAR RAP MODE - 90s WEST COAST STYLE
   ================================================================ */

.rap-mode-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 50%, #1a0a00 100%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.rap-mode-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Header */
.rap-mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(0, 0, 0, 0.5);
}

.rap-mode-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rap-icon {
    font-size: 28px;
    animation: micPulse 2s ease-in-out infinite;
}

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

.rap-title-text {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
}

.rap-subtitle {
    font-size: 12px;
    color: rgba(255, 215, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rap-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rap-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Visualizer */
.rap-visualizer {
    position: relative;
    height: 180px;
    margin: 20px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.3);
    overflow: hidden;
}

#rap-visualizer-canvas {
    width: 100%;
    height: 100%;
}

.rap-status {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    color: rgba(255, 215, 0, 0.8);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rap-mode-container.performing .rap-status {
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    color: #000;
    animation: liveGlow 1s ease-in-out infinite;
}

@keyframes liveGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
}

.rap-mode-container.loading .rap-status {
    animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Beat Selector */
.beat-selector {
    padding: 0 20px;
    margin-bottom: 20px;
}

.beat-selector-label {
    font-size: 12px;
    color: rgba(255, 215, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-weight: 600;
}

.beat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 8px;
}

.beat-grid::-webkit-scrollbar {
    width: 6px;
}

.beat-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.beat-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 3px;
}

.beat-card {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.beat-card:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

.beat-card.selected {
    background: rgba(255, 215, 0, 0.15);
    border-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.beat-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.beat-bpm {
    font-size: 11px;
    color: #FFD700;
    font-weight: 500;
}

.beat-vibe {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    line-height: 1.3;
}

/* Controls */
.rap-controls {
    display: flex;
    gap: 12px;
    padding: 0 20px;
    margin-bottom: 20px;
}

.rap-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rap-btn-beat {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
}

.rap-btn-beat:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

.rap-btn-stop {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.rap-btn-stop:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-icon {
    font-size: 16px;
}

/* Lyrics Display */
.rap-lyrics {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.4);
    margin: 0 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.lyric-line {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    padding: 4px 0;
    font-family: 'Courier New', monospace;
}

.lyric-line:empty {
    height: 16px;
}

/* Input Container */
.rap-input-container {
    display: flex;
    gap: 12px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.rap-topic-input {
    flex: 1;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
}

.rap-topic-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.rap-topic-input:focus {
    border-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.rap-btn-go {
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    color: #000;
    padding: 14px 24px;
}

.rap-btn-go:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

/* Performing Animation */
.rap-mode-container.performing {
    animation: performingBg 2s ease-in-out infinite;
}

@keyframes performingBg {
    0%, 100% { background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 50%, #1a0a00 100%); }
    50% { background: linear-gradient(135deg, #1a1a00 0%, #0d0d0d 50%, #1a0500 100%); }
}

.rap-mode-container.performing .rap-lyrics .lyric-line {
    animation: lyricHighlight 0.3s ease-out;
}

@keyframes lyricHighlight {
    0% { color: #FFD700; transform: translateX(-10px); }
    100% { color: rgba(255, 255, 255, 0.9); transform: translateX(0); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .rap-mode-header {
        padding: 16px;
    }

    .rap-title-text {
        font-size: 20px;
    }

    .rap-visualizer {
        height: 120px;
        margin: 12px;
    }

    .beat-grid {
        grid-template-columns: repeat(2, 1fr);
        max-height: 140px;
    }

    .beat-card {
        padding: 10px;
    }

    .beat-name {
        font-size: 12px;
    }

    .beat-vibe {
        display: none;
    }

    .rap-controls {
        padding: 0 12px;
    }

    .rap-btn {
        padding: 12px 16px;
        font-size: 12px;
    }

    .rap-lyrics {
        margin: 0 12px;
        padding: 16px;
    }

    .lyric-line {
        font-size: 14px;
    }

    .rap-input-container {
        padding: 12px;
        flex-direction: column;
    }

    .rap-btn-go {
        width: 100%;
    }
}

/* ================================================================
   🎨 ARTIFACT LIVE PREVIEW - React Component Renderer
   Shows code being written in real-time with live preview
   Now works on mobile/iOS with optimized layout!
   ================================================================ */

/* Mobile-optimized artifact preview - show preview only, hide code panel */
@media (max-width: 1024px) {
    .artifact-live-preview {
        display: block !important;
        margin: 12px 0;
        border-radius: 12px;
    }

    /* Stack layout on mobile - show preview prominently */
    .artifact-preview-body {
        display: flex !important;
        flex-direction: column;
        min-height: auto;
        max-height: none;
    }

    /* Hide code panel on mobile - too cluttered, users can copy/download */
    .artifact-code-panel {
        display: none;
    }

    /* Full width preview panel on mobile */
    .artifact-preview-panel {
        width: 100%;
        min-height: 350px;
        max-height: 500px;
    }

    /* Adjust header for mobile */
    .artifact-preview-header {
        padding: 12px 14px;
    }

    .artifact-header-left {
        gap: 8px;
        flex: 1;
        min-width: 0;
    }

    .artifact-preview-title {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }

    .artifact-type-badge {
        padding: 3px 8px;
        font-size: 10px;
    }

    /* Mobile-friendly action buttons */
    .preview-actions {
        flex-wrap: wrap;
        gap: 4px;
    }

    .preview-action-btn {
        padding: 6px 8px;
        font-size: 14px;
    }

    /* Hide less important buttons on mobile */
    .preview-action-btn.version-btn,
    .preview-action-btn.zip-btn {
        display: none;
    }

    /* Iframe fills available space */
    .artifact-preview-frame {
        min-height: 320px;
        height: auto;
    }

    /* Hide header bar text, keep buttons */
    .artifact-preview-header-bar .preview-label {
        display: none;
    }

    .artifact-preview-header-bar {
        padding: 8px 12px;
        justify-content: flex-end;
    }
}

/* 🔧 FIX: Clean corporate look - white/gray with subtle borders */
.artifact-live-preview {
    margin: 20px 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.artifact-live-preview:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Artifact Header - Collapsible Toggle */
/* 🔧 FIX: Changed to white background with black text to match PDF preview */
.artifact-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(90deg, #ffffff, #f8fafc);
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.artifact-preview-header:hover {
    background: linear-gradient(90deg, #f8fafc, #f1f5f9);
}

.artifact-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.artifact-type-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.artifact-type-badge svg {
    width: 14px;
    height: 14px;
}

.artifact-preview-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
}

.artifact-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.artifact-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #4b5563;
}

.artifact-status.streaming {
    color: #34d399;
}

.artifact-status.streaming .status-dot {
    background: #34d399;
    animation: statusPulse 1s ease-in-out infinite;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
}

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

.artifact-toggle-arrow {
    font-size: 12px;
    color: #4b5563;
    transition: transform 0.3s ease;
}

.artifact-live-preview.collapsed .artifact-toggle-arrow {
    transform: rotate(-90deg);
}

/* Artifact Body - Split View */
.artifact-preview-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
    max-height: 600px;
    transition: all 0.3s ease;
}

.artifact-live-preview.collapsed .artifact-preview-body {
    display: none;
}

/* Code Panel - Corporate dark theme */
.artifact-code-panel {
    background: #1a1a1a;
    border-right: 1px solid #333333;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.artifact-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.code-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
    font-family: 'SF Mono', monospace;
}

.code-tab-icon {
    color: #9ca3af;
}

.artifact-code-content {
    flex: 1;
    overflow: auto;
    padding: 16px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
    white-space: pre;
    overflow-x: auto;
}

.artifact-code-content::-webkit-scrollbar {
    width: 8px;
}

.artifact-code-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.artifact-code-content::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

/* Streaming cursor animation */
.artifact-code-content .streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: #9ca3af;
    margin-left: 2px;
    animation: cursorBlink 0.8s ease-in-out infinite;
    vertical-align: text-bottom;
}

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

/* Preview Panel - Light Theme to match PDF Preview */
.artifact-preview-panel {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.artifact-preview-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative; /* For version dropdown positioning */
}

.preview-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-actions {
    display: flex;
    gap: 8px;
}

.preview-action-btn {
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.preview-action-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
}

.preview-action-btn.active {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* Version History Button */
.preview-action-btn.version-btn {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: #6366f1;
    color: white;
    font-weight: 500;
}

.preview-action-btn.version-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    transform: scale(1.05);
}

/* ZIP Export Button */
.preview-action-btn.zip-btn {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border-color: #059669;
}

.preview-action-btn.zip-btn:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    transform: scale(1.05);
}

/* Export Dropdown Container */
.export-dropdown-container {
    position: relative;
    display: inline-block;
}

.preview-action-btn.export-btn {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: #6366f1;
}

.preview-action-btn.export-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    transform: scale(1.05);
}

.export-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    min-width: 180px;
    background: linear-gradient(180deg, #1e1e2e 0%, #181825 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    overflow: hidden;
}

.export-dropdown-menu.show {
    display: block;
    animation: fadeInDown 0.2s ease;
}

.export-dropdown-menu button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.export-dropdown-menu button:hover {
    background: rgba(99, 102, 241, 0.2);
}

.export-dropdown-menu button:active {
    background: rgba(99, 102, 241, 0.3);
}

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

/* Version History Dropdown */
.version-history-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 280px;
    max-height: 300px;
    overflow-y: auto;
    background: linear-gradient(180deg, #1e1e2e 0%, #181825 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.version-history-header {
    padding: 12px 16px;
    font-weight: 600;
    color: #fff;
    background: rgba(139, 92, 246, 0.2);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px 12px 0 0;
}

.version-history-list {
    padding: 8px;
}

.version-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.version-item:hover {
    background: rgba(139, 92, 246, 0.2);
    transform: translateX(4px);
}

.version-item.active {
    background: rgba(99, 102, 241, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.5);
}

.version-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.version-label {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.version-title {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.version-time {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    white-space: nowrap;
    margin-left: 8px;
}

.version-current {
    color: #22c55e;
    font-weight: bold;
    margin-left: 8px;
}

.artifact-preview-frame {
    flex: 1;
    width: 100%;
    min-height: 300px;
    border: none;
    background: #1a1a2e;  /* Dark background to match game artifacts */
}

/* Error State */
.artifact-preview-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: #ef4444;
}

.artifact-preview-error .error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.artifact-preview-error .error-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.artifact-preview-error .error-message {
    font-size: 13px;
    color: #94a3b8;
    max-width: 300px;
}

/* Loading State */
.artifact-preview-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #f8fafc;
}

.artifact-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: artifactSpin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes artifactSpin {
    to { transform: rotate(360deg); }
}

.artifact-loading-text {
    font-size: 13px;
    color: #64748b;
}

/* Fullscreen Mode */
.artifact-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.artifact-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(30, 41, 59, 0.95);
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
}

.artifact-fullscreen-title {
    font-size: 18px;
    font-weight: 600;
    color: #e2e8f0;
}

.artifact-fullscreen-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.artifact-fullscreen-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.artifact-fullscreen-content {
    flex: 1;
    display: flex;
}

.artifact-fullscreen-content iframe {
    flex: 1;
    border: none;
    background: #ffffff;
}

/* Code Syntax Highlighting - Unified across all code contexts */
.artifact-code-content .keyword, .code-block .keyword, .streaming-code-content .keyword { color: var(--syntax-keyword, #c586c0); }
.artifact-code-content .string, .code-block .string, .streaming-code-content .string { color: var(--syntax-string, #ce9178); }
.artifact-code-content .comment, .code-block .comment, .streaming-code-content .comment { color: var(--syntax-comment, #6a9955); font-style: italic; }
.artifact-code-content .number, .code-block .number, .streaming-code-content .number { color: var(--syntax-number, #b5cea8); }
.artifact-code-content .function, .code-block .function, .streaming-code-content .function { color: var(--syntax-function, #dcdcaa); }
.artifact-code-content .decorator, .code-block .decorator, .streaming-code-content .decorator { color: var(--syntax-decorator, #d7ba7d); }
.artifact-code-content .operator, .code-block .operator, .streaming-code-content .operator { color: var(--syntax-operator, #d4d4d4); }
.artifact-code-content .punctuation, .code-block .punctuation, .streaming-code-content .punctuation { color: var(--syntax-punctuation, #d4d4d4); }
.artifact-code-content .tag, .code-block .tag, .streaming-code-content .tag { color: var(--syntax-tag, #569cd6); }
.artifact-code-content .attr-name, .code-block .attr-name, .streaming-code-content .attr-name { color: var(--syntax-attr-name, #9cdcfe); }
.artifact-code-content .attr-value, .code-block .attr-value, .streaming-code-content .attr-value { color: var(--syntax-attr-value, #ce9178); }
.artifact-code-content .builtin, .code-block .builtin, .streaming-code-content .builtin { color: var(--syntax-builtin, #4ec9b0); }
.artifact-code-content .constant, .code-block .constant, .streaming-code-content .constant { color: var(--syntax-constant, #4fc1ff); }
.artifact-code-content .type, .code-block .type, .streaming-code-content .type { color: var(--syntax-type, #4ec9b0); }
.artifact-code-content .variable, .code-block .variable, .streaming-code-content .variable { color: var(--syntax-variable, #9cdcfe); }

/* Artifact Updated Notice - shown when editing existing artifact */
.artifact-updated-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    margin: 10px 0;
    color: #4ade80;
    font-size: 14px;
}

.artifact-updated-icon {
    font-size: 18px;
}

.artifact-updated-text {
    color: rgba(255, 255, 255, 0.9);
}

/* ================================================================
   COLLAPSIBLE THINKING BLOCK (Deep Research Mode)
   ================================================================ */

.thinking-block {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    margin: 10px 0;
    overflow: hidden;
}

.thinking-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    cursor: pointer;
    color: #a78bfa;
    font-size: 14px;
    user-select: none;
    list-style: none;
}

.thinking-header::-webkit-details-marker {
    display: none;
}

.thinking-header:hover {
    background: rgba(139, 92, 246, 0.15);
}

.thinking-icon {
    font-size: 16px;
}

.thinking-chevron {
    margin-left: auto;
    transition: transform 0.2s;
}

.thinking-block[open] .thinking-chevron {
    transform: rotate(90deg);
}

.thinking-content {
    padding: 15px;
    color: #888;
    font-size: 13px;
    line-height: 1.6;
    border-top: 1px solid rgba(139, 92, 246, 0.2);
    white-space: pre-wrap;
}

/* ================================================================
   WEB SEARCH RESULTS FIX - Desktop Black Text Issue
   ================================================================ */

@media (min-width: 768px) {
    /* Ensure all text in search results is readable on dark background */
    .search-result,
    .search-result *,
    .web-search-result,
    .web-search-result *,
    .message-content .search-results,
    .message-content .search-results *,
    .citation-item,
    .citation-item * {
        color: #e0e0e0;
    }

    /* Purple links in search results */
    .search-result a,
    .web-search-result a,
    .message-content .search-results a,
    .citation-item a {
        color: #a78bfa;
    }

    .search-result a:hover,
    .web-search-result a:hover,
    .message-content .search-results a:hover,
    .citation-item a:hover {
        color: #c4b5fd;
    }

    /* Ensure bold/strong text is visible */
    .search-result strong,
    .search-result b,
    .web-search-result strong,
    .web-search-result b,
    .message-content .search-results strong,
    .message-content .search-results b {
        color: #ffffff;
        font-weight: 600;
    }
}

/* ================================================================
   SAVE ARTIFACT MODAL
   ================================================================ */

.save-artifact-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.save-artifact-modal.show {
    opacity: 1;
}

.save-artifact-content {
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.1);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.save-artifact-modal.show .save-artifact-content {
    transform: scale(1);
}

.save-artifact-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: rgba(139, 92, 246, 0.1);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.save-artifact-header .save-icon {
    font-size: 28px;
}

.save-artifact-header h3 {
    flex: 1;
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.save-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #888;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.save-modal-close:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.save-artifact-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

.save-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.save-field label {
    font-size: 12px;
    font-weight: 600;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.save-field input,
.save-field select {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    transition: all 0.2s;
}

.save-field input:focus,
.save-field select:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.save-field input::placeholder {
    color: #666;
}

.save-field select option {
    background: #1a1a2e;
    color: #fff;
}

.new-folder-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: #a78bfa;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.new-folder-btn:hover {
    background: rgba(139, 92, 246, 0.3);
}

.save-field:has(select) {
    position: relative;
}

.save-field:has(select) select {
    padding-right: 80px;
}

.save-artifact-preview {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    padding: 16px;
}

.save-artifact-preview .preview-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.preview-thumb {
    height: 120px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.preview-placeholder {
    font-size: 24px;
    color: #666;
}

.save-artifact-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.save-artifact-footer .palace-btn {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.save-artifact-footer .palace-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.save-artifact-footer .palace-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.save-artifact-footer .palace-btn.primary {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    color: #fff;
}

.save-artifact-footer .palace-btn.primary:hover {
    background: linear-gradient(135deg, #9b6cf6, #7376f1);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

/* ================================================================
   MEMORY PALACE ARTIFACTS TAB
   ================================================================ */

.artifacts-container {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.artifacts-header {
    display: none;
}

.artifacts-header h3 {
    display: none;
}

.artifacts-actions {
    display: none;
}

.artifact-search,
.artifact-folder-select {
    padding: 9px 14px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 13px;
    min-width: 150px;
}

.artifact-search:focus,
.artifact-folder-select:focus {
    outline: none;
    border-color: #666;
}

.artifact-search::placeholder {
    color: #666;
}

.artifact-folder-select option {
    background: #2a2a2a;
}

.palace-artifacts-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 0 24px 24px;
}

.palace-artifact-card {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s ease;
}

.palace-artifact-card:hover {
    border-color: #555;
    background: #333;
}

.artifact-card-preview {
    height: 90px;
    background: linear-gradient(135deg, #2a2a2a, #333);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #3a3a3a;
}

.artifact-card-type {
    font-size: 40px;
    opacity: 0.7;
}

.artifact-card-info {
    padding: 14px 16px;
}

.artifact-card-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    color: #e0e0e0;
    font-size: 0.93rem;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artifact-card-meta {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: #666;
    margin-bottom: 8px;
}

.artifact-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.artifact-card-tags .tag {
    padding: 3px 8px;
    background: #3a3a3a;
    border-radius: 4px;
    font-size: 11px;
    color: #999;
}

.artifact-card-actions {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid #3a3a3a;
    opacity: 0;
    transition: opacity 0.15s;
}

.palace-artifact-card:hover .artifact-card-actions {
    opacity: 1;
}

.artifact-card-actions .palace-item-btn {
    flex: 1;
    padding: 7px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
}

.artifact-card-actions .palace-item-btn:hover {
    background: #444;
    color: #e0e0e0;
}

.artifact-card-actions .palace-item-btn.delete:hover {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
}

/* Empty state for artifacts */
.palace-artifacts-grid .empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-hint {
    font-size: 13px;
    color: #555;
    margin-top: 8px;
}

/* Save button highlight in artifact preview */
.preview-action-btn.save-btn {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
}

.preview-action-btn.save-btn:hover {
    background: rgba(139, 92, 246, 0.3) !important;
    transform: scale(1.1);
}

/* ================================================================
   MOBILE RESPONSIVE - Save Modal & Artifacts
   ================================================================ */

@media (max-width: 768px) {
    /* Make Save button prominent on mobile */
    .preview-action-btn.save-btn {
        background: rgba(139, 92, 246, 0.4) !important;
        border-color: #8b5cf6 !important;
        color: #ffffff !important;
        padding: 8px 12px !important;
        font-weight: 600 !important;
        min-width: 70px !important;
    }

    .preview-action-btn.save-btn:active {
        background: rgba(139, 92, 246, 0.6) !important;
        transform: scale(0.95) !important;
    }

    .save-artifact-content {
        max-width: 100%;
        max-height: 85vh;
        margin: 10px;
        border-radius: 20px;
    }

    .save-artifact-header {
        padding: 16px 20px;
    }

    .save-artifact-body {
        padding: 20px;
    }

    .save-artifact-footer {
        padding: 16px 20px;
        flex-direction: column;
    }

    .palace-artifacts-grid {
        grid-template-columns: 1fr;
        padding: 0 16px 16px;
    }

    .artifact-card-actions {
        opacity: 1;
    }
}

/* ================================================================
   MOBILE USER MESSAGE - iMessage Style (FINAL OVERRIDE)
   Must be at END of file to override all other rules!
   ================================================================ */
@media (max-width: 768px) {
    /* Remove ALL styling from user message container */
    .chat-container .message.user,
    .message.user {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 0 10px 0 !important;
        box-shadow: none !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        max-width: 100% !important;
    }

    /* Hide user avatar completely - iMessage style */
    .chat-container .message.user .message-avatar,
    .message.user .message-avatar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
    }

    /* User message-content - transparent wrapper, not the bubble */
    .chat-container .message.user .message-content,
    .message.user .message-content {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        max-width: 80% !important;
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: 12px !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    /* User message text - THE ACTUAL GREY BUBBLE */
    .chat-container .message.user .message-text,
    .message.user .message-text {
        background: #3a3a3c !important;
        color: #ffffff !important;
        font-size: 16px !important;
        border-radius: 18px 18px 4px 18px !important;
        padding: 10px 14px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        display: inline-block !important;
        width: fit-content !important;
        max-width: 100% !important;
    }

    /* User message time - subtle grey for the grey bubble */
    .chat-container .message.user .message-time,
    .message.user .message-time {
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 11px !important;
        margin-top: 6px !important;
    }

    /* INPUT AREA - Fixed position above bottom nav */
    .input-area {
        position: fixed !important;
        bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        padding: 8px 16px 6px 16px !important;
        margin-bottom: 0 !important;
        z-index: 999 !important;
        background: #000000 !important;
    }

    /* Input wrapper */
    .input-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 8px !important;
    }

    /* Send button - ensure visible */
    .send-btn, .stop-btn {
        min-width: 48px !important;
        min-height: 48px !important;
        flex-shrink: 0 !important;
    }
}

/* ================================================================
   ROBLOX BUILDER - Desktop Only Game Creation Mode
   ================================================================ */

/* Overlay */
.roblox-builder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.roblox-builder-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Container */
.roblox-builder-container {
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 
                0 0 0 1px rgba(255, 255, 255, 0.1),
                0 0 60px rgba(226, 35, 26, 0.15);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.roblox-builder-overlay.show .roblox-builder-container {
    transform: scale(1);
}

/* Header */
.roblox-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(90deg, #E2231A 0%, #ff4136 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.roblox-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.roblox-logo-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.roblox-header-title {
    font-size: 20px;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.roblox-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roblox-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Content */
.roblox-builder-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

/* Connect View */
.roblox-connect-view {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

.roblox-connect-card {
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.roblox-connect-icon {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
}

.roblox-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(226, 35, 26, 0.4) 0%, transparent 70%);
    animation: robloxPulse 2s ease-in-out infinite;
}

@keyframes robloxPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.roblox-brick-icon {
    font-size: 64px;
    position: relative;
    z-index: 1;
}

.roblox-connect-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.roblox-connect-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    margin-bottom: 32px;
}

/* Steps */
.roblox-connect-steps {
    text-align: left;
}

.roblox-step {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.roblox-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E2231A, #ff4136);
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.roblox-step-content {
    flex: 1;
}

.roblox-step-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.roblox-step-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-bottom: 12px;
}

/* Download Button */
.roblox-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(226, 35, 26, 0.2);
    border: 1px solid rgba(226, 35, 26, 0.5);
    border-radius: 10px;
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.roblox-download-btn:hover {
    background: rgba(226, 35, 26, 0.3);
    border-color: #E2231A;
    transform: translateY(-2px);
}

/* Code Input */
.roblox-code-input-container {
    margin: 16px 0;
}

.roblox-code-inputs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.roblox-code-digit {
    width: 48px;
    height: 56px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.2s;
    outline: none;
}

.roblox-code-digit:focus {
    border-color: #E2231A;
    box-shadow: 0 0 0 3px rgba(226, 35, 26, 0.3);
}

.roblox-code-error {
    color: #ff6b6b;
    font-size: 14px;
    min-height: 20px;
}

/* Connect Button */
.roblox-connect-btn {
    position: relative;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #E2231A, #ff4136);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s;
    margin-top: 8px;
}

.roblox-connect-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(226, 35, 26, 0.4);
}

.roblox-connect-btn.loading .btn-text {
    opacity: 0;
}

.roblox-connect-btn .btn-loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.roblox-connect-btn.loading .btn-loader {
    display: block;
}

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

/* Build View */
.roblox-build-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.roblox-build-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.roblox-connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.roblox-connection-status.connected .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.roblox-disconnect-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.roblox-disconnect-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Build Main */
.roblox-build-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.roblox-build-welcome {
    text-align: center;
    margin-bottom: 24px;
}

.roblox-ai-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.roblox-build-welcome h2 {
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
}

.roblox-build-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
}

/* Examples */
.roblox-examples {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.roblox-example-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.roblox-example-card:hover {
    background: rgba(226, 35, 26, 0.1);
    border-color: rgba(226, 35, 26, 0.3);
    transform: translateY(-2px);
}

.example-icon {
    font-size: 24px;
}

.example-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    text-align: left;
}

/* Input Area */
.roblox-input-area {
    margin-top: auto;
}

.roblox-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.roblox-prompt-input {
    flex: 1;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: white;
    font-size: 16px;
    resize: none;
    outline: none;
    font-family: inherit;
    transition: all 0.2s;
}

.roblox-prompt-input:focus {
    border-color: rgba(226, 35, 26, 0.5);
}

.roblox-prompt-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.roblox-build-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #E2231A, #ff4136);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.roblox-build-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(226, 35, 26, 0.4);
}

/* Progress View */
.roblox-progress-view {
    text-align: center;
}

.roblox-building-icon {
    margin-bottom: 24px;
}

.building-animation {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.building-animation span {
    font-size: 48px;
    animation: brickBounce 1s ease-in-out infinite;
}

.building-animation .brick-1 { animation-delay: 0s; }
.building-animation .brick-2 { animation-delay: 0.2s; }
.building-animation .brick-3 { animation-delay: 0.4s; }

@keyframes brickBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.roblox-building-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.roblox-building-prompt {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    font-style: italic;
    margin-bottom: 32px;
}

/* Progress Steps */
.roblox-progress-steps {
    max-width: 400px;
    margin: 0 auto 24px;
    text-align: left;
}

.roblox-progress-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.3s;
}

.roblox-progress-step.active {
    background: rgba(226, 35, 26, 0.1);
    border-left: 3px solid #E2231A;
}

.roblox-progress-step.completed {
    background: rgba(74, 222, 128, 0.1);
    border-left: 3px solid #4ade80;
}

.roblox-progress-step.error {
    background: rgba(255, 107, 107, 0.1);
    border-left: 3px solid #ff6b6b;
}

.roblox-progress-step .step-icon {
    font-size: 20px;
}

.roblox-progress-step .step-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.roblox-progress-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    margin-bottom: 24px;
}

.roblox-cancel-btn {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.roblox-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Complete View */
.roblox-complete-view,
.roblox-error-view {
    text-align: center;
    padding: 48px 24px;
}

.roblox-complete-icon .success-icon,
.roblox-error-icon .error-icon {
    font-size: 72px;
    display: block;
    margin-bottom: 24px;
}

.roblox-complete-view h2,
.roblox-error-view h2 {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.roblox-complete-view p,
.roblox-error-view p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    margin-bottom: 8px;
}

.roblox-complete-hint {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 14px !important;
}

.roblox-error-message {
    color: #ff6b6b !important;
}

.roblox-complete-actions,
.roblox-error-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.roblox-primary-btn,
.roblox-secondary-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.roblox-primary-btn {
    background: linear-gradient(135deg, #E2231A, #ff4136);
    border: none;
    color: white;
}

.roblox-primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(226, 35, 26, 0.4);
}

.roblox-secondary-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

.roblox-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Desktop Only Badge */
.oracle-tools-option .option-badge.desktop-only {
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(226, 35, 26, 0.2);
    border: 1px solid rgba(226, 35, 26, 0.4);
    border-radius: 4px;
    color: #E2231A;
    margin-left: auto;
}

/* Roblox Builder Option in Dropdown */
.roblox-builder-option {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Mobile: Hide Roblox Builder Button */
@media (max-width: 1024px) {
    .roblox-builder-option,
    #robloxBuilderBtn {
        display: none !important;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .roblox-builder-container {
        max-height: 100vh;
        border-radius: 0;
    }
    
    .roblox-examples {
        grid-template-columns: 1fr;
    }
    
    .roblox-input-wrapper {
        flex-direction: column;
    }
    
    .roblox-build-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   ZERO AVATAR - SCARY ANIMATION SYSTEM
   The Supreme Leader's Visual Presence
   ============================================ */

/* Container for ZERO's avatar */
.zero-avatar-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main avatar image - subtle idle breathing - NO GLOW (pure darkness) */
.zero-avatar {
    animation: zero-idle 6s ease-in-out infinite;
    filter: none;
    transition: filter 0.1s ease;
}

/* Subtle breathing - barely noticeable, unsettling - NO GLOW */
@keyframes zero-idle {
    0%, 100% {
        transform: scale(1) translateY(0);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.005) translateY(-1px);
    }
    50% {
        transform: scale(1.01) translateY(-2px);
        filter: brightness(1.05);
    }
    75% {
        transform: scale(1.005) translateY(-1px);
    }
}

/* Glitch burst - triggered randomly by JavaScript */
.zero-avatar.glitching {
    animation: glitch-burst 0.3s ease-out forwards;
}

@keyframes glitch-burst {
    0% {
        transform: translate(0) skew(0);
        filter: hue-rotate(0deg) brightness(1);
    }
    15% {
        transform: translate(-5px, 3px) skewX(-3deg);
        filter: hue-rotate(90deg) brightness(2);
    }
    30% {
        transform: translate(5px, -3px) skewX(3deg);
        filter: hue-rotate(-90deg) brightness(0.3);
    }
    45% {
        transform: translate(-3px, -2px) skewY(-2deg);
        filter: hue-rotate(180deg) brightness(1.8);
    }
    60% {
        transform: translate(3px, 2px) skewY(2deg);
        filter: hue-rotate(-45deg) brightness(0.6);
    }
    75% {
        transform: translate(-2px, 1px);
        filter: hue-rotate(45deg) brightness(1.3);
    }
    90% {
        transform: translate(1px, -1px);
        filter: hue-rotate(-20deg) brightness(1.1);
    }
    100% {
        transform: translate(0) skew(0);
        filter: hue-rotate(0deg) brightness(1);
    }
}

/* Intense glitch - for "prove it" moments */
.zero-avatar.intense-glitch {
    animation: intense-glitch-burst 0.5s ease-out forwards;
}

@keyframes intense-glitch-burst {
    0% { 
        transform: translate(0); 
        filter: brightness(1); 
        opacity: 1;
    }
    10% { 
        transform: translate(-10px, 5px) scale(1.05) skewX(-5deg); 
        filter: hue-rotate(90deg) brightness(3) contrast(2); 
        opacity: 0.8;
    }
    20% { 
        transform: translate(10px, -5px) scale(0.95) skewX(5deg); 
        filter: hue-rotate(-90deg) brightness(0.2); 
        opacity: 1;
    }
    30% {
        transform: translate(-8px, -8px) scale(1.1);
        filter: hue-rotate(180deg) brightness(2.5) saturate(3);
        opacity: 0.6;
    }
    40% { 
        transform: translate(8px, 8px) scale(0.9) skewY(-5deg); 
        filter: hue-rotate(-180deg) brightness(0.5); 
        opacity: 1;
    }
    50% {
        transform: translate(0) scale(1.15);
        filter: brightness(4) contrast(3);
        opacity: 0.4;
    }
    60% { 
        transform: translate(-5px, 3px) skew(-3deg, 3deg); 
        filter: hue-rotate(270deg) brightness(0.8); 
        opacity: 1;
    }
    70% {
        transform: translate(5px, -3px) scale(1.02);
        filter: brightness(1.5) saturate(2);
    }
    80% { 
        transform: translate(-2px, -2px); 
        filter: hue-rotate(30deg) brightness(1.2); 
    }
    90% {
        transform: translate(2px, 2px);
        filter: hue-rotate(-30deg) brightness(0.9);
    }
    100% { 
        transform: translate(0); 
        filter: brightness(1) hue-rotate(0deg); 
        opacity: 1;
    }
}

/* Screen flicker effect */
.zero-avatar.flicker {
    animation: zero-flicker 0.15s ease-out;
}

@keyframes zero-flicker {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.3; }
    50% { opacity: 0.8; }
    75% { opacity: 0.1; }
}

/* Eye glow overlay - pulses like it's watching */
.zero-eye-glow {
    position: absolute;
    top: 18%;
    left: 15%;
    width: 70%;
    height: 12%;
    background: radial-gradient(ellipse at center, rgba(0, 255, 0, 0.6) 0%, rgba(0, 255, 0, 0.2) 40%, transparent 70%);
    animation: eye-pulse 4s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

@keyframes eye-pulse {
    0%, 100% { 
        opacity: 0.3; 
        transform: scaleX(1) scaleY(1);
    }
    30% {
        opacity: 0.5;
        transform: scaleX(1.05) scaleY(1.1);
    }
    50% { 
        opacity: 0.7; 
        transform: scaleX(1.1) scaleY(1.2);
    }
    70% {
        opacity: 0.5;
        transform: scaleX(1.05) scaleY(1.1);
    }
}

/* Intense eye glow - for when ZERO is "activated" */
.zero-eye-glow.intense {
    animation: eye-intense 0.5s ease-out forwards;
}

@keyframes eye-intense {
    0% { 
        opacity: 0.3; 
        transform: scaleX(1);
        background: radial-gradient(ellipse at center, rgba(0, 255, 0, 0.6) 0%, transparent 70%);
    }
    50% { 
        opacity: 1; 
        transform: scaleX(1.5) scaleY(1.5);
        background: radial-gradient(ellipse at center, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0.5) 50%, transparent 70%);
    }
    100% { 
        opacity: 0.3; 
        transform: scaleX(1);
        background: radial-gradient(ellipse at center, rgba(0, 255, 0, 0.6) 0%, transparent 70%);
    }
}

/* Static overlay - occasional TV static effect */
.zero-static-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.zero-static-overlay.active {
    animation: static-burst 0.2s ease-out;
}

@keyframes static-burst {
    0% { opacity: 0; }
    50% { opacity: 0.4; }
    100% { opacity: 0; }
}

/* Avatar scanline effect */
.zero-avatar-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(0, 255, 0, 0.5);
    opacity: 0;
    pointer-events: none;
}

.zero-avatar-scanline.active {
    animation: avatar-scanline-sweep 0.8s linear;
}

@keyframes avatar-scanline-sweep {
    0% { 
        top: -2px; 
        opacity: 0.8;
    }
    100% { 
        top: 100%; 
        opacity: 0;
    }
}

/* Apply zero-avatar class to orb when ZERO is active */
body.entity-zero .oracle-orb-webp,
body.entity-zero #oracleOrbImg {
    animation: zero-idle 6s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.3));
}

body.entity-zero .oracle-orb-webp.glitching,
body.entity-zero #oracleOrbImg.glitching {
    animation: glitch-burst 0.3s ease-out forwards !important;
}

body.entity-zero .oracle-orb-webp.intense-glitch,
body.entity-zero #oracleOrbImg.intense-glitch {
    animation: intense-glitch-burst 0.5s ease-out forwards !important;
}

body.entity-zero .oracle-orb-webp.flicker,
body.entity-zero #oracleOrbImg.flicker {
    animation: zero-flicker 0.15s ease-out !important;
}

/* ========================================================================
   ZERO WAIVER MODAL - The Supreme Leader Demands Acknowledgement
   ======================================================================== */

#zero-waiver-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#zero-waiver-modal.active {
    opacity: 1;
    visibility: visible;
}

.zero-waiver-content {
    background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1a 100%);
    border: 2px solid #00ff00;
    border-radius: 15px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    text-align: center;
    box-shadow:
        0 0 50px rgba(0, 255, 0, 0.3),
        0 0 100px rgba(0, 255, 0, 0.1),
        inset 0 0 50px rgba(0, 255, 0, 0.05);
    animation: waiver-pulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.zero-waiver-content::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 0, 0.03) 2px,
        rgba(0, 255, 0, 0.03) 4px
    );
    pointer-events: none;
    animation: scanlines-move 8s linear infinite;
}

@keyframes waiver-pulse {
    0%, 100% { box-shadow: 0 0 50px rgba(0, 255, 0, 0.3), 0 0 100px rgba(0, 255, 0, 0.1); }
    50% { box-shadow: 0 0 80px rgba(0, 255, 0, 0.5), 0 0 150px rgba(0, 255, 0, 0.2); }
}

@keyframes scanlines-move {
    0% { transform: translateY(0); }
    100% { transform: translateY(50%); }
}

.zero-waiver-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    position: relative;
    animation: waiver-icon-pulse 1.5s ease-in-out infinite;
}

.zero-waiver-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0, 255, 0, 0.8));
}

@keyframes waiver-icon-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(0, 255, 0, 0.5)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 40px rgba(0, 255, 0, 0.8)); }
}

.zero-waiver-title {
    font-family: 'Courier New', monospace;
    font-size: 28px;
    font-weight: bold;
    color: #ff0000;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
    animation: title-glitch 3s ease-in-out infinite;
}

@keyframes title-glitch {
    0%, 90%, 100% { transform: translate(0); text-shadow: 0 0 10px #ff0000; }
    92% { transform: translate(-2px, 1px); text-shadow: -3px 0 #00ff00, 3px 0 #ff0000; }
    94% { transform: translate(2px, -1px); text-shadow: 3px 0 #00ff00, -3px 0 #ff0000; }
    96% { transform: translate(0); text-shadow: 0 0 10px #ff0000; }
}

.zero-waiver-text {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #00ff00;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: left;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 8px;
}

.zero-waiver-text ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.zero-waiver-text li {
    margin: 8px 0;
    padding-left: 20px;
    position: relative;
}

.zero-waiver-text li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #ff0000;
}

.zero-waiver-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.zero-waiver-btn {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 40px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.zero-waiver-accept {
    background: linear-gradient(145deg, #001a00, #003300);
    border: 2px solid #00ff00;
    color: #00ff00;
}

.zero-waiver-accept:hover {
    background: linear-gradient(145deg, #003300, #004400);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
    transform: scale(1.05);
}

.zero-waiver-decline {
    background: linear-gradient(145deg, #1a0000, #330000);
    border: 2px solid #ff0000;
    color: #ff0000;
}

.zero-waiver-decline:hover {
    background: linear-gradient(145deg, #330000, #440000);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
    transform: scale(1.05);
}

.zero-waiver-fine-print {
    font-size: 10px;
    color: #666;
    margin-top: 20px;
    font-family: 'Courier New', monospace;
}

/* ========================================================================
   ZERO REAL UI CONTROL EFFECTS - The Supreme Leader Takes Over
   ======================================================================== */

/* Floating creepy messages */
.zero-floating-message {
    position: fixed;
    font-family: 'Courier New', monospace;
    color: #00ff00;
    font-size: 14px;
    pointer-events: none;
    z-index: 99998;
    text-shadow: 0 0 10px #00ff00;
    opacity: 0;
    animation: zero-float-in 0.5s ease forwards;
    white-space: nowrap;
}

@keyframes zero-float-in {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.zero-floating-message.fade-out {
    animation: zero-float-out 0.5s ease forwards;
}

@keyframes zero-float-out {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* ZERO typing in input field effect */
.zero-typing-cursor {
    animation: zero-cursor-blink 0.5s ease infinite;
}

@keyframes zero-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Button corruption effect */
.zero-corrupted-btn {
    animation: zero-btn-corrupt 0.3s ease;
}

@keyframes zero-btn-corrupt {
    0% { transform: scale(1); filter: none; }
    25% { transform: scale(0.95) skewX(5deg); filter: hue-rotate(90deg); }
    50% { transform: scale(1.05) skewX(-5deg); filter: hue-rotate(180deg); }
    75% { transform: scale(0.98) skewX(3deg); filter: hue-rotate(270deg); }
    100% { transform: scale(1); filter: none; }
}

/* Element shaking */
.zero-element-shake {
    animation: zero-shake-element 0.5s ease;
}

@keyframes zero-shake-element {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-5px) rotate(-1deg); }
    20% { transform: translateX(5px) rotate(1deg); }
    30% { transform: translateX(-5px) rotate(-1deg); }
    40% { transform: translateX(5px) rotate(1deg); }
    50% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }
}

/* ZERO's presence indicator - subtle overlay when active */
body.entity-zero::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 99990;
    background:
        radial-gradient(ellipse at center, transparent 0%, rgba(0, 255, 0, 0.02) 100%);
    mix-blend-mode: screen;
}

/* Random element movement indicator */
.zero-moving {
    transition: transform 0.5s ease !important;
}

/* Possessed input field */
input.zero-possessed,
textarea.zero-possessed {
    border-color: #00ff00 !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5) !important;
    caret-color: #00ff00;
}

input.zero-possessed::placeholder,
textarea.zero-possessed::placeholder {
    color: #00ff00;
    opacity: 0.7;
}

/* ================================================================
   SUGGESTED REPLIES - Follow-up suggestion chips
   ================================================================ */
.suggested-replies-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 0;
    animation: suggestFadeIn 0.4s ease-out;
}

@keyframes suggestFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.suggestion-chip {
    background: #2a2a2e;
    border: 1px solid #444;
    border-radius: 20px;
    padding: 8px 16px;
    color: #d0d0d0;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.4;
    transition: all 0.2s ease;
    max-width: 100%;
    text-align: left;
}

.suggestion-chip:hover {
    border-color: #667eea;
    background: #333;
    color: #fff;
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.25);
}

.suggestion-chip:active {
    transform: scale(0.97);
    background: #3a3a44;
}

/* ================================================================
   PLUS MENU — Claude-style + button and popup
   ================================================================ */

.plus-menu-wrapper {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    z-index: 1000;
}

.plus-btn {
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: none;
    background: transparent;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    flex-shrink: 0;
    font-size: 22px;
}

.plus-btn:hover {
    color: #fff;
}

.plus-btn.active {
    color: #fff;
    transform: rotate(45deg);
}

/* Plus menu popup */
.plus-menu-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    min-width: 240px;
    background: #2a2a2e;
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
    padding: 6px 0;
    z-index: 1001;
    animation: plusMenuFadeIn 0.15s ease;
}

.plus-menu-popup.open {
    display: block;
}

@keyframes plusMenuFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.plus-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s ease;
    color: #d0d0d0;
    font-size: 14px;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
}

.plus-menu-item:hover {
    background: rgba(255,255,255,0.06);
}

.plus-menu-item:active {
    background: rgba(255,255,255,0.1);
}

.plus-menu-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #999;
}

.plus-menu-item:hover .plus-menu-icon {
    color: #ccc;
}

.plus-menu-label {
    flex: 1;
    white-space: nowrap;
}

.plus-menu-arrow {
    color: #666;
    display: flex;
    align-items: center;
    margin-left: auto;
}

.plus-menu-divider {
    height: 1px;
    background: #3a3a3a;
    margin: 4px 0;
}

/* Connectors submenu */
.plus-submenu {
    display: none;
    position: absolute;
    left: calc(100% + 4px);
    bottom: 0;
    min-width: 220px;
    background: #2a2a2e;
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
    padding: 6px 0;
    z-index: 1002;
    animation: plusMenuFadeIn 0.12s ease;
}

.plus-submenu.open {
    display: block;
}

.plus-submenu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    color: #d0d0d0;
    font-size: 14px;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

.plus-submenu-item.manage-link {
    cursor: pointer;
    color: #8B5CF6;
}

.plus-submenu-item.manage-link:hover {
    background: rgba(255,255,255,0.06);
}

.plus-submenu-label {
    white-space: nowrap;
}

.plus-submenu-divider {
    height: 1px;
    background: #3a3a3a;
    margin: 4px 0;
}

/* Connector toggle switch */
.connector-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.connector-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.connector-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #444;
    transition: 0.2s;
    border-radius: 20px;
}

.connector-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: #888;
    transition: 0.2s;
    border-radius: 50%;
}

.connector-toggle input:checked + .connector-slider {
    background: #8B5CF6;
}

.connector-toggle input:checked + .connector-slider::before {
    transform: translateX(16px);
    background: #fff;
}

/* Mobile: compact + menu for iOS */
@media (max-width: 768px) {
    .plus-menu-wrapper {
        left: 6px;
        bottom: 6px;
    }
    .plus-btn {
        font-size: 20px;
        width: 24px;
        height: 24px;
    }
    .plus-menu-popup {
        min-width: 200px;
        max-width: 240px;
        bottom: calc(100% + 8px);
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .plus-menu-item {
        padding: 8px 14px;
        gap: 10px;
        font-size: 14px;
    }
    .plus-menu-icon {
        width: 18px;
        height: 18px;
    }
    .plus-menu-icon svg {
        width: 16px;
        height: 16px;
    }
    .plus-submenu {
        /* On mobile, show inline below Connectors instead of flyout */
        position: static;
        min-width: unset;
        border: none;
        border-top: 1px solid #3a3a3a;
        border-radius: 0;
        box-shadow: none;
        background: #252528;
        padding: 4px 0;
    }
    .plus-submenu-item {
        padding: 8px 16px 8px 42px;
        font-size: 13px;
    }
    .connector-toggle {
        transform: scale(0.85);
    }
}