/**
 * Performance CSS Optimizations for SupaMeet
 * 
 * This file adds performance-enhancing CSS properties to the application:
 * - will-change: Hints to browser about upcoming animations
 * - contain: Limits layout/paint recalculation scope
 * - content-visibility: Lazy rendering for off-screen content
 * - GPU acceleration hints
 * 
 * Load this file AFTER style.css to apply optimizations
 */

/* ================================================
   GPU ACCELERATION & PERFORMANCE HINTS
   ================================================ */

/* Promote frequently animated elements to their own compositing layer */
.header,
.chat-top-bar,
.video-panel,
.chat-panel {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Contain layout recalculations */
.nearby-user-card,
.chat-message,
.message-bubble {
    contain: layout style paint;
}

/* Lazy render off-screen content */
.nearby-users-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* ================================================
   ANIMATION OPTIMIZATIONS
   ================================================ */

/* Optimize common animations - use transform/opacity only */
.user-card:hover {
    transform: translateY(-4px) translateZ(0);
}

.btn,
.button,
.action-btn {
    will-change: transform, opacity;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

/* Reduce motion for users who prefer it */
@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;
    }
    
    .pulse-dot,
    .typing-indicator span,
    .loading-spinner {
        animation: none !important;
    }
}

/* ================================================
   SCROLL PERFORMANCE
   ================================================ */

/* Optimize scrolling containers */
.chat-messages,
.nearby-users-container,
.message-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
}

/* Prevent layout shifts during scroll */
.chat-messages > *,
.nearby-users-grid > * {
    contain: layout style;
}

/* ================================================
   IMAGE OPTIMIZATION
   ================================================ */

/* Ensure images don't cause layout shifts */
img,
video {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

/* Lazy loading hints */
img[loading="lazy"],
iframe[loading="lazy"] {
    content-visibility: auto;
}

/* Avatar images - fixed size to prevent CLS */
.user-avatar,
.avatar,
.navbar-user-avatar {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.1);
}

/* ================================================
   FONT OPTIMIZATION  
   ================================================ */

/* Note: font-display: swap should be in the actual @font-face declarations
   in style.css or via Google Fonts URL parameter (&display=swap) */

/* System font stack fallback */
body {
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================
   LAYOUT SHIFT PREVENTION
   ================================================ */

/* Reserve space for dynamic content */
.video-container {
    aspect-ratio: 16 / 9;
    background-color: #000;
    contain: strict;
}

.local-video-container,
.remote-video-container {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 200px;
}

/* Placeholder sizing */
.video-placeholder,
.avatar-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================
   INPUT OPTIMIZATION
   ================================================ */

/* Prevent zoom on mobile inputs */
input,
textarea,
select {
    font-size: 16px; /* Prevents iOS zoom */
    touch-action: manipulation;
}

/* Optimize text input performance */
.message-input,
#messageInput {
    will-change: contents;
}

/* ================================================
   MODAL & OVERLAY OPTIMIZATION
   ================================================ */

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* GPU accelerate modals */
.modal,
.overlay,
.popup {
    will-change: opacity, visibility;
    backface-visibility: hidden;
}

/* ================================================
   DARK MODE PERFORMANCE
   ================================================ */

/* Use color-scheme for native dark mode optimizations */
:root {
    color-scheme: dark;
}

/* Optimize for OLED screens */
@media (prefers-color-scheme: dark) {
    .card,
    .panel {
        background-color: #000;
    }
}

/* ================================================
   TOUCH OPTIMIZATION
   ================================================ */

/* Faster touch response */
button,
a,
.clickable,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ================================================
   CRITICAL RENDER PATH
   ================================================ */

/* Above-the-fold content should render first */
.header,
.main-content {
    contain: layout style;
}

/* Defer non-critical content */
footer,
.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
}

/* ================================================
   WEBRTC VIDEO OPTIMIZATION
   ================================================ */

/* Optimize video elements */
video {
    object-fit: cover;
    background-color: #000;
    contain: strict;
}

#localVideo,
#remoteVideo {
    will-change: contents;
    transform: translateZ(0);
}

/* Picture-in-Picture styling */
video:picture-in-picture {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* ================================================
   LOADING STATES
   ================================================ */

/* Skeleton loading - GPU optimized */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

/* ================================================
   PRINT OPTIMIZATION
   ================================================ */

@media print {
    /* Remove non-essential elements */
    .header,
    .footer,
    .sidebar,
    .video-panel,
    button,
    .modal {
        display: none !important;
    }
    
    /* Optimize colors for print */
    body {
        background: white;
        color: black;
    }
}