/* Cyberpunk Psychedelic Effects CSS */

/* Matrix Column Animations */
.matrix-col-1 { left: 3%; animation-delay: 0s; }
.matrix-col-2 { left: 8%; animation-delay: 1s; }
.matrix-col-3 { left: 13%; animation-delay: 2s; }
.matrix-col-4 { left: 18%; animation-delay: 0.5s; }
.matrix-col-5 { left: 23%; animation-delay: 3s; }
.matrix-col-6 { left: 28%; animation-delay: 1.5s; }
.matrix-col-7 { left: 33%; animation-delay: 4s; }
.matrix-col-8 { left: 38%; animation-delay: 2.5s; }
.matrix-col-9 { left: 43%; animation-delay: 0.8s; }
.matrix-col-10 { left: 48%; animation-delay: 3.5s; }
.matrix-col-11 { left: 53%; animation-delay: 1.8s; }
.matrix-col-12 { left: 58%; animation-delay: 4.5s; }
.matrix-col-13 { left: 63%; animation-delay: 2.8s; }
.matrix-col-14 { left: 68%; animation-delay: 1.2s; }
.matrix-col-15 { left: 73%; animation-delay: 3.8s; }
.matrix-col-16 { left: 78%; animation-delay: 0.3s; }
.matrix-col-17 { left: 83%; animation-delay: 2.3s; }
.matrix-col-18 { left: 88%; animation-delay: 4.2s; }
.matrix-col-19 { left: 93%; animation-delay: 1.7s; }
.matrix-col-20 { left: 98%; animation-delay: 0.9s; }

/* Digital Rain Positioning */
.rain-1 { left: 5%; animation-delay: 0s; }
.rain-2 { left: 10%; animation-delay: 1s; }
.rain-3 { left: 15%; animation-delay: 2s; }
.rain-4 { left: 20%; animation-delay: 0.5s; }
.rain-5 { left: 25%; animation-delay: 3s; }
.rain-6 { left: 30%; animation-delay: 1.5s; }
.rain-7 { left: 35%; animation-delay: 4s; }
.rain-8 { left: 40%; animation-delay: 2.5s; }
.rain-9 { left: 45%; animation-delay: 0.8s; }
.rain-10 { left: 50%; animation-delay: 3.5s; }
.rain-11 { left: 55%; animation-delay: 1.8s; }
.rain-12 { left: 60%; animation-delay: 4.5s; }
.rain-13 { left: 65%; animation-delay: 2.8s; }
.rain-14 { left: 70%; animation-delay: 1.2s; }
.rain-15 { left: 75%; animation-delay: 3.8s; }
.rain-16 { left: 80%; animation-delay: 0.3s; }
.rain-17 { left: 85%; animation-delay: 2.3s; }
.rain-18 { left: 90%; animation-delay: 4.2s; }
.rain-19 { left: 95%; animation-delay: 1.7s; }

/* Scanning Line Delay */
.scan-line-1 { animation-delay: 0s; }
.scan-line-2 { animation-delay: 1.5s; }

/* Ultra Eye-Friendly Psychedelic Keyframes */
@keyframes reality-distortion {
    0% { 
        filter: contrast(1) brightness(1) saturate(1) hue-rotate(0deg);
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
    }
    25% { 
        filter: contrast(1.05) brightness(1.02) saturate(1.1) hue-rotate(8deg);
        transform: perspective(1000px) rotateX(0.2deg) rotateY(0.1deg) scale(1.005);
    }
    50% { 
        filter: contrast(1.08) brightness(1.04) saturate(1.15) hue-rotate(15deg);
        transform: perspective(1000px) rotateX(0.1deg) rotateY(0.3deg) scale(1.008);
    }
    75% { 
        filter: contrast(1.06) brightness(1.03) saturate(1.12) hue-rotate(10deg);
        transform: perspective(1000px) rotateX(0.3deg) rotateY(0.2deg) scale(1.003);
    }
    100% { 
        filter: contrast(1) brightness(1) saturate(1) hue-rotate(0deg);
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
    }
}

@keyframes synaptic-fire {
    0%, 100% {
        background: linear-gradient(45deg, transparent 40%, rgba(0, 128, 255, 0.1) 50%, transparent 60%);
        transform: translateX(-100%);
    }
    50% {
        background: linear-gradient(45deg, transparent 40%, rgba(0, 191, 255, 0.8) 50%, transparent 60%);
        transform: translateX(100%);
    }
}

@keyframes dimensional-shift {
    0% { 
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
        opacity: 1;
    }
    25% { 
        transform: rotateX(1deg) rotateY(2deg) rotateZ(0.5deg) scale3d(1.01, 0.995, 1);
        opacity: 0.95;
    }
    50% { 
        transform: rotateX(2deg) rotateY(1deg) rotateZ(-0.5deg) scale3d(0.995, 1.01, 1);
        opacity: 1.05;
    }
    75% { 
        transform: rotateX(-1deg) rotateY(-2deg) rotateZ(0.3deg) scale3d(1.005, 0.998, 1);
        opacity: 0.98;
    }
    100% { 
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
        opacity: 1;
    }
}

@keyframes consciousness-expansion {
    0%, 100% {
        box-shadow: 
            0 0 8px rgba(0, 128, 255, 0.15),
            0 0 15px rgba(0, 191, 255, 0.1),
            inset 0 0 8px rgba(0, 128, 255, 0.03);
        transform: scale(1) rotate(0deg);
    }
    33% {
        box-shadow: 
            0 0 10px rgba(0, 128, 255, 0.2),
            0 0 18px rgba(0, 191, 255, 0.15),
            inset 0 0 10px rgba(0, 128, 255, 0.05);
        transform: scale(1.01) rotate(3deg);
    }
    66% {
        box-shadow: 
            0 0 9px rgba(0, 191, 255, 0.18),
            0 0 16px rgba(0, 128, 255, 0.12),
            inset 0 0 9px rgba(0, 191, 255, 0.04);
        transform: scale(1.005) rotate(-2deg);
    }
}

/* Enhanced Interactive Effects */
.reality-distortion {
    animation: reality-distortion 6s ease-in-out infinite;
}

.synaptic-fire-effect {
    position: relative;
    overflow: hidden;
}

.synaptic-fire-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(45deg, transparent 40%, rgba(0, 128, 255, 0.1) 50%, transparent 60%);
    animation: synaptic-fire 3s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.dimensional-shift {
    animation: dimensional-shift 8s ease-in-out infinite;
    transform-style: preserve-3d;
}

.consciousness-expansion {
    animation: consciousness-expansion 4s ease-in-out infinite;
}

/* Enhanced Immersive Effects */
.reality-matrix {
    position: relative;
    overflow: hidden;
}

.reality-matrix::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 255, 0.03) 2px,
            rgba(0, 255, 255, 0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0, 128, 255, 0.03) 2px,
            rgba(0, 128, 255, 0.03) 4px
        );
    animation: reality-scan 8s linear infinite;
    pointer-events: none;
}

@keyframes reality-scan {
    0% { transform: translateX(-100%) translateY(-100%); }
    25% { transform: translateX(100%) translateY(-100%); }
    50% { transform: translateX(100%) translateY(100%); }
    75% { transform: translateX(-100%) translateY(100%); }
    100% { transform: translateX(-100%) translateY(-100%); }
}

/* Interactive Cyberpunk Buttons */
.cyber-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #001122, #003366);
    border: 2px solid #00ffff;
    transition: all 0.3s ease;
}

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

.cyber-button:hover::before {
    left: 100%;
}

.cyber-button:hover {
    box-shadow: 
        0 0 20px #00ffff,
        0 0 40px #0080ff,
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Particle System Effects */
.particle-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #00ffff;
    border-radius: 50%;
    animation: particle-float 15s linear infinite;
    opacity: 0.6;
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

.particle:nth-child(odd) {
    animation-duration: 12s;
    animation-delay: 2s;
}

.particle:nth-child(even) {
    animation-duration: 18s;
    animation-delay: 4s;
}

/* Cross-browser compatibility */
.backdrop-blur-md {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.backdrop-blur-lg {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* Progress bar utility classes */
.w-0 { width: 0%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

/* Enhanced cyberpunk grid effects */
.cyber-grid-enhanced {
    background-image: 
        linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(0, 128, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 128, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
    animation: grid-shift 15s ease-in-out infinite;
}

@keyframes grid-shift {
    0%, 100% { 
        background-position: 0 0, 0 0, 0 0, 0 0; 
        transform: perspective(800px) rotateX(25deg);
    }
    25% { 
        background-position: 20px 0, 0 20px, 50px 0, 0 50px; 
        transform: perspective(800px) rotateX(25deg) rotateY(2deg);
    }
    50% { 
        background-position: 0 20px, 20px 0, 0 50px, 50px 0; 
        transform: perspective(800px) rotateX(30deg);
    }
    75% { 
        background-position: -20px 0, 0 -20px, -50px 0, 0 -50px; 
        transform: perspective(800px) rotateX(25deg) rotateY(-2deg);
    }
}

/* Additional psychedelic text effects */
.quantum-text {
    background: linear-gradient(45deg, #00bfff, #0080ff, #00bfff, #0080ff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: quantum-shift 4s ease-in-out infinite;
}

@keyframes quantum-shift {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 50% 100%; }
    75% { background-position: 50% 0%; }
}

/* Mobile Performance Optimizations */
@media (max-width: 768px) {
    /* Disable heavy 3D transforms and filters on mobile */
    .reality-distortion {
        animation: mobile-reality-distortion 6s ease-in-out infinite;
    }
    
    .dimensional-shift {
        animation: mobile-dimensional-shift 8s ease-in-out infinite;
    }
    
    .consciousness-expansion {
        animation: mobile-consciousness-expansion 6s ease-in-out infinite;
    }
    
    /* Disable particle effects on mobile */
    .particle-field,
    .matrix-bg,
    .psychedelic-bg {
        display: none;
    }
    
    /* Simplify background effects */
    .cyber-grid {
        background-image: linear-gradient(rgba(0, 128, 255, 0.05) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(0, 128, 255, 0.05) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: none;
    }
    
    /* Disable synaptic fire effect on mobile */
    .synaptic-fire-effect::before {
        display: none;
    }
    
    /* Simplified hover effects */
    .lsd-filter:hover {
        filter: brightness(1.05);
        animation: none;
    }
    
    .mdma-glow {
        box-shadow: 0 0 5px rgba(0, 128, 255, 0.1);
        animation: none;
    }
    
    /* Disable scanning lines on mobile */
    .scan-line-1,
    .scan-line-2 {
        display: none;
    }
    
    /* Disable matrix after effects */
    .reality-matrix::after {
        display: none;
    }
}

/* Mobile-specific optimization classes */
.mobile-optimized .psychedelic-bg {
    animation-duration: 40s !important;
    opacity: 0.015 !important;
}

.mobile-optimized .matrix-column {
    font-size: 10px !important;
    animation-duration: 20s !important;
}

.mobile-optimized .glass-effect {
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
}

/* Compact view for very small screens */
.compact-view .hero-title {
    font-size: 1.8rem !important;
}

.compact-view .stat-item {
    padding: 0.5rem !important;
}

.compact-view .search-card {
    padding: 1rem !important;
}

/* Battery saver mode */
.battery-saver .glass-effect {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

.battery-saver .neon-text {
    text-shadow: none !important;
    color: #0080ff !important;
}

.battery-saver .cyber-border::before,
.battery-saver .cyber-border::after {
    display: none !important;
}

/* Slow connection optimizations */
.slow-connection .glass-effect {
    background: rgba(0, 128, 255, 0.1) !important;
    border: 1px solid rgba(0, 191, 255, 0.2) !important;
}

.slow-connection .matrix-column {
    display: none !important;
}

/* Touch optimization styles */
.cyber-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 128, 255, 0.3);
}

/* Improved touch targets for mobile */
@media (max-width: 768px) {
    .mode-label {
        min-height: 44px;
        padding: 12px 16px !important;
    }
    
    button, .cyber-button {
        min-height: 44px;
        padding: 12px 16px;
    }
    
    input[type="text"] {
        padding: 12px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Landscape phone optimizations */
@media (max-width: 850px) and (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: 40vh;
        padding: 0.5rem;
    }
    
    .hero-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .search-card {
        padding: 1rem;
    }
    
    .mode-label {
        padding: 8px 12px !important;
        font-size: 0.8rem;
    }
}

/* Simplified mobile animations using only transforms */
@keyframes mobile-reality-distortion {
    0%, 100% { 
        transform: scale(1);
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.02);
        filter: brightness(1.05);
    }
}

@keyframes mobile-dimensional-shift {
    0%, 100% { 
        transform: translateX(0);
        opacity: 1;
    }
    50% { 
        transform: translateX(1px);
        opacity: 0.98;
    }
}

@keyframes mobile-consciousness-expansion {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 128, 255, 0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 8px rgba(0, 191, 255, 0.15);
        transform: scale(1.01);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .reality-distortion,
    .dimensional-shift,
    .consciousness-expansion,
    .synaptic-fire-effect::before {
        animation: none;
    }
    
    .psychedelic-hover:hover {
        animation: none;
        transform: scale(1.02);
        filter: brightness(1.1) saturate(1.2);
    }
    
    .particle,
    .reality-matrix::after,
    .cyber-button::before {
        animation: none;
    }
    
    .cyber-button:hover {
        transform: none;
    }
}

/* GPU Acceleration and Performance Optimizations */
.reality-distortion,
.dimensional-shift,
.consciousness-expansion {
    will-change: transform, filter;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.cyber-border::before,
.cyber-border::after,
.synaptic-fire-effect::before {
    will-change: transform;
    transform: translateZ(0); /* Force GPU layer */
}

.glass-effect {
    will-change: backdrop-filter;
    contain: layout style paint;
}

/* Optimize animations for mobile using transform3d */
@media (max-width: 768px) {
    .reality-distortion,
    .dimensional-shift,
    .consciousness-expansion {
        will-change: transform;
        transform: translate3d(0, 0, 0); /* Force hardware acceleration */
    }
}

/* Enhanced Effects Toggle Button Styles */
.effects-toggle-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    min-width: 60px;
    min-height: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.effects-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

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

.effects-toggle-btn .status-indicator {
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Pulse animation for status indicator */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Enhanced tooltip styles */
#effects-tooltip {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.2);
    min-width: 140px;
}

#effects-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Status text styles */
#effects-status-text {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.025em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile optimizations for effects toggle */
@media (max-width: 768px) {
    .effects-toggle-btn {
        min-width: 50px;
        min-height: 50px;
        padding: 10px;
    }
    
    .effects-toggle-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .effects-toggle-btn .status-indicator {
        width: 10px;
        height: 10px;
    }
    
    #effects-status-text {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    #effects-tooltip {
        min-width: 120px;
        font-size: 11px;
    }
}

/* Touch improvements for mobile */
@media (hover: none) and (pointer: coarse) {
    .effects-toggle-btn:hover {
        transform: none;
        box-shadow: none;
    }
    
    .effects-toggle-btn:active {
        transform: scale(0.95);
        background-color: rgba(30, 41, 59, 0.8);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .effects-toggle-btn {
        border-width: 2px;
        border-color: currentColor;
    }
    
    .status-indicator {
        border-width: 2px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .effects-toggle-btn,
    .status-indicator,
    #effects-tooltip,
    #effects-status-text {
        transition: none !important;
        animation: none !important;
    }
    
    .effects-toggle-btn:hover {
        transform: none;
    }
}

/* Focus styles for accessibility */
.effects-toggle-btn:focus {
    outline: 2px solid rgba(59, 130, 246, 0.6);
    outline-offset: 2px;
}

.effects-toggle-btn:focus:not(:focus-visible) {
    outline: none;
}

/* Dark mode optimizations */
@media (prefers-color-scheme: dark) {
    #effects-tooltip {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(59, 130, 246, 0.4);
    }
    
    #effects-status-text {
        background: rgba(0, 0, 0, 0.9);
        border-color: rgba(255, 255, 255, 0.2);
    }
}

/* Autocomplete Styles */
#autocomplete-container {
    animation: autocompleteSlideIn 0.2s ease-out;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.1);
}

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

.autocomplete-item {
    position: relative;
    font-size: 14px;
    line-height: 1.4;
}

.autocomplete-item:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.autocomplete-item:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.autocomplete-item:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.25));
}

.autocomplete-item.active {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3));
    box-shadow: inset 2px 0 0 rgba(59, 130, 246, 0.6);
}

/* Scrollbar styling for autocomplete */
#autocomplete-container::-webkit-scrollbar {
    width: 6px;
}

#autocomplete-container::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.3);
    border-radius: 3px;
}

#autocomplete-container::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.5);
    border-radius: 3px;
}

#autocomplete-container::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.7);
}

/* Mobile optimizations for autocomplete */
@media (max-width: 768px) {
    #autocomplete-container {
        max-height: 200px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .autocomplete-item {
        padding: 12px 16px;
        font-size: 16px;
        min-height: 44px; /* Touch target size */
        display: flex;
        align-items: center;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #autocomplete-container {
        border: 2px solid currentColor;
        background: rgba(0, 0, 0, 0.95);
    }
    
    .autocomplete-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .autocomplete-item:hover,
    .autocomplete-item.active {
        background: rgba(255, 255, 255, 0.15);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #autocomplete-container {
        animation: none;
    }
    
    .autocomplete-item {
        transition: none;
    }
}

/* Loading state for autocomplete */
.autocomplete-loading {
    padding: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.autocomplete-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-top: 2px solid rgba(59, 130, 246, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* No results state */
.autocomplete-no-results {
    padding: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Focus improvements for accessibility */
.autocomplete-item:focus {
    outline: 2px solid rgba(59, 130, 246, 0.6);
    outline-offset: -2px;
}

/* Highlight text styling */
.autocomplete-item .text-neon-cyan {
    background: rgba(59, 130, 246, 0.2);
    padding: 1px 2px;
    border-radius: 2px;
}