style.css

/* Xelara AI - Global Styles Enhancement */

/* Touch Device Optimizations */
.touch-device .glass-hover:hover {
    transform: none;
}

.touch-device .neon-button:hover {
    transform: none;
}

/* Custom Scrollbar for Legal Modal */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    border-radius: 4px;
}

/* Loading Animation Keyframes */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

/* Button Press States */
button:active {
    transform: scale(0.95);
}

/* Smooth transitions for all interactive elements */
a, button {
    transition: all 0.2s ease;
}

/* Focus visible styles for accessibility */
*:focus-visible {
    outline: 2px solid #06b6d4;
    outline-offset: 2px;
}

/* Legal modal overlay improvements */
#legal-modal {
    -webkit-overflow-scrolling: touch;
}

/* Prevent pull-to-refresh on mobile */
body {
    overscroll-behavior-y: none;
}

/* Safe area support for notch devices */
@supports (padding: max(0px)) {
    .safe-area {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}