/* Mobile Performance Optimizations for ChatDesh */
/* These optimizations improve mobile performance without breaking functionality */

/* 1. Enhanced Content Visibility for Better LCP */
.below-fold-content {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

/* 2. Improved Touch Targets for Better UX */
@media (max-width: 768px) {
    button, 
    .clickable,
    .chat-input-container button,
    .user-actions button,
    .mobile-menu-item {
        min-height: 22px;
        min-width: 22px;
        padding: 12px;
        touch-action: manipulation;
    }
    
    /* Better tap highlights */
    button:active,
    .clickable:active {
        background-color: rgba(0, 123, 255, 0.1);
        transform: scale(0.98);
        transition: all 0.1s ease;
    }
}

/* 3. Optimized Scrolling Performance */
.scroll-container,
.chat-messages,
.user-list,
.room-list {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    will-change: scroll-position;
}

/* Reduce scroll jank */
.chat-messages {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 4. Reduced Motion for Performance */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 5. Battery-Saving Dark Mode Optimizations */
@media (prefers-color-scheme: dark) {
    /* Use pure black for OLED screens */
    body {
        background-color: #000000;
    }
    
    .chat-container,
    .sidebar {
        background-color: #111111;
    }
    
    /* Reduce white elements that consume more battery */
    .message-bubble {
        background-color: #1a1a1a;
        color: #e1e1e1;
    }
}

/* 6. Network-Aware Loading */
@media (max-width: 768px) and (max-resolution: 1.5dppx) {
    /* Lower quality images for lower-end devices */
    .user-avatar,
    .picture-thumbnail {
        image-rendering: optimizeSpeed;
    }
    
    /* Disable heavy visual effects on low-resolution screens */
    .fancy-animation,
    .heavy-shadow {
        animation: none !important;
        box-shadow: none !important;
    }
}

/* 7. Improved Focus Management for Accessibility */
.keyboard-navigation-visible .focusable:focus {
    outline: 3px solid #007bff;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Hide outline for mouse users */
.mouse-navigation .focusable:focus {
    outline: none;
}

/* 8. Gesture Support and Touch Optimization */
.swipe-container {
    touch-action: pan-x;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.pinch-zoom-container {
    touch-action: pinch-zoom;
}

.no-touch-action {
    touch-action: none;
}

/* 9. Performance-Optimized Animations */
@media (max-width: 768px) {
    /* Use transform instead of changing layout properties */
    .slide-animation {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .slide-animation.active {
        transform: translateX(0);
    }
    
    /* GPU-accelerated animations */
    .gpu-accelerated {
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Reduce animation complexity on mobile */
    .complex-animation {
        animation: none;
    }
    
    .simple-fade {
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    
    .simple-fade.visible {
        opacity: 1;
    }
}

/* 10. Critical CSS Inlining Support */
.above-fold-critical {
    /* These styles should be inlined in the HTML */
    display: block;
    visibility: visible;
}

.below-fold-deferred {
    /* These can be loaded later */
    content-visibility: auto;
}

/* 11. Memory-Efficient Layout */
.container-query-supported {
    container-type: inline-size;
}

/* Use container queries where supported */
@container (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
}

/* 12. Input Optimization for Mobile */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    textarea {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px;
        border-radius: 8px;
        transition: border-color 0.2s ease;
    }
    
    /* Better mobile keyboard experience */
    .chat-input {
        resize: none;
        overflow-y: auto;
        max-height: 120px;
    }
}

/* 13. Performance Monitoring Classes */
.perf-critical {
    /* Mark critical performance elements */
    content-visibility: auto;
    contain: layout style paint;
}

.perf-defer {
    /* Defer non-critical content */
    content-visibility: auto;
    contain-intrinsic-size: 100px;
}

/* 14. Intersection Observer Optimization */
.lazy-load-target {
    min-height: 100px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lazy-load-target.loaded {
    min-height: auto;
    background-color: transparent;
}

/* 15. Font Loading Optimization */
@media (max-width: 768px) {
    /* Use system fonts as fallback for faster loading */
    .system-font-stack {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                     'Helvetica Neue', Arial, sans-serif;
    }
    
    /* Reduce font weights to improve loading */
    .lightweight-text {
        font-weight: 400;
    }
}

/* 16. Image Optimization */
@media (max-width: 768px) {
    img {
        height: auto;
        max-width: 100%;
        /* loading: lazy; - This is an HTML attribute, not CSS */
    }
    
    .hero-image {
        content-visibility: auto;
        contain-intrinsic-size: 300px 200px;
    }
}

/* 17. Mobile-Specific Layout Improvements */
@media (max-width: 768px) {
    /* Reduce padding/margins for more content space */
    .mobile-optimized-spacing {
        padding: 8px 12px;
        margin: 4px 0;
    }
    
    /* Stack elements vertically on mobile */
    .mobile-stack {
        flex-direction: column;
        gap: 8px;
    }
    
    /* Hide non-essential elements on small screens */
    .mobile-hidden {
        display: none;
    }
    
    /* Show mobile-specific elements */
    .mobile-only {
        display: block;
    }
}

/* 18. Performance Utilities */
.gpu-layer {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.contain-layout {
    contain: layout;
}

.contain-style {
    contain: style;
}

.contain-paint {
    contain: paint;
}

.contain-strict {
    contain: strict;
}

/* 19. Reduced Specificity for Better Performance */
.btn {
    /* Use single classes instead of complex selectors */
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

/* 20. Mobile Viewport Optimization */
@media (max-width: 768px) {
    /* Prevent horizontal scrolling */
    body {
        overflow-x: hidden;
    }
    
    /* Full viewport height on mobile */
    .mobile-full-height {
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for newer browsers */
    }
    
    /* Safe area handling for notched devices */
    .safe-area-insets {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* 21. Loading State Optimizations */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 22. Media Query Consolidation for Performance */
@media (max-width: 768px) {
    /* Group all mobile styles together to reduce CSS parsing */
    .mobile-chat-container {
        padding: 8px;
        font-size: 14px;
    }
    
    .mobile-message {
        padding: 8px 12px;
        margin: 2px 0;
        border-radius: 12px;
    }
    
    .mobile-user-list {
        font-size: 13px;
        padding: 4px 8px;
    }
}

/* 23. Print Optimization (for users who might print chat logs) */
@media print {
    .no-print {
        display: none !important;
    }
    
    .chat-messages {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
}

/* 24. High Contrast Mode Support */
@media (prefers-contrast: high) {
    .high-contrast-border {
        border: 2px solid currentColor;
    }
    
    .high-contrast-bg {
        background-color: Canvas;
        color: CanvasText;
    }
}

/* 25. Hardware Acceleration with Transform3D */
.chat-message,
.user-list,
.room-list,
.modal,
.dropdown {
    /* Force hardware acceleration with transform3d */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
}

.message-animation {
    transform: translate3d(0, 0, 0);
    transition: transform 0.3s ease-out;
}

.slide-in {
    transform: translate3d(100%, 0, 0);
    animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
    to {
        transform: translate3d(0, 0, 0);
    }
}

.chat-container {
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
}

/* Smooth 3D transitions for mobile gestures */
.swipe-gesture {
    transform: translate3d(0, 0, 0);
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}