/**
 * Mobile GPU Performance v3.0 — LUCA 6.0
 * 
 * The FINAL AUTHORITY for mobile performance. Loaded LAST to override everything.
 * 
 * Strategy:
 *   1. Kill ALL backdrop-filter (class + inline)
 *   2. Eliminate transition:all and broad transition selectors
 *   3. Reduce box-shadow complexity
 *   4. CSS containment for layout isolation
 *   5. Kill non-essential animations
 *   6. GPU compositing only where needed
 *   7. Reduce selector matching overhead
 */

/* ============================================================================
   1. NUCLEAR BACKDROP-BLUR KILL
   The #1 FPS killer in mobile WebViews. backdrop-filter forces the compositor
   to sample + gaussian-blur the ENTIRE background subtree EVERY FRAME.
   ============================================================================ */

@media (max-width: 1024px), (hover: none) {

    /* Kill ALL Tailwind backdrop-blur classes */
    .backdrop-blur-sm,
    .backdrop-blur,
    .backdrop-blur-md,
    .backdrop-blur-lg,
    .backdrop-blur-xl,
    .backdrop-blur-2xl,
    .backdrop-blur-3xl,
    [class*="backdrop-blur"] {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Replace with solid backgrounds for dark mode */
    .dark .backdrop-blur-sm,
    .dark .backdrop-blur,
    .dark .backdrop-blur-md,
    .dark .backdrop-blur-lg,
    .dark .backdrop-blur-xl,
    .dark .backdrop-blur-2xl,
    .dark .backdrop-blur-3xl,
    .dark [class*="backdrop-blur"] {
        background-color: rgba(15, 23, 42, 0.97) !important;
    }

    /* CRITICAL: Catch ALL inline backdrop-filter styles.
       CSS !important on attribute selectors overrides inline styles. */
    [style*="backdrop-filter"],
    [style*="-webkit-backdrop-filter"],
    [style*="backdropFilter"] {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Kill glassmorphism blur */
    .glass,
    .glass-light {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .glass {
        background: rgba(20, 24, 40, 0.97) !important;
        border: 1px solid rgba(45, 51, 72, 0.5) !important;
    }

    .glass-light {
        background: rgba(255, 255, 255, 0.98) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
}

/* ============================================================================
   2. TRANSITION SCOPE REDUCTION
   `transition: all` forces the browser to check ALL CSS properties every frame.
   `transition` on broad selectors (button, a, div[...]) creates thousands of
   transition-tracking objects that thrash the compositor.
   ============================================================================ */

@media (max-width: 1024px), (hover: none) {

    /* Override the catastrophic `transition: all` anywhere it appears */
    .transition-all,
    [class*="transition-all"],
    .transition-smooth,
    .transition-slow,
    .transition-bounce,
    .transition-spring,
    .transition-premium,
    .transition-premium-fast,
    .transition-all-smooth {
        transition-property: transform, opacity !important;
        transition-duration: 0.15s !important;
        transition-timing-function: ease-out !important;
    }

    /* CRITICAL FIX: ux-enhancements.css applies transitions to EVERY button/a/input.
       On mobile this creates thousands of transition tracking objects.
       Override to only animate what matters. */
    button,
    a,
    [role="button"],
    [tabindex] {
        transition: transform 0.1s ease-out, opacity 0.1s ease-out !important;
    }

    /* Inputs only need border-color transitions */
    input,
    textarea,
    select {
        transition: border-color 0.15s ease !important;
    }

    /* CRITICAL FIX: Kill the ux-enhancements.css rule that adds transitions
       to EVERY div with border and rounded classes */
    div[class*="border"][class*="rounded"] {
        transition: none !important;
    }

    /* Kill box-shadow transitions entirely — they trigger paint */
    * {
        transition-property: transform, opacity, background-color, color, border-color !important;
    }
}

/* ============================================================================
   3. BOX-SHADOW REDUCTION
   Complex multi-layer shadows force expensive repaints on scroll.
   ============================================================================ */

@media (max-width: 768px) {
    [class*="shadow-lg"],
    [class*="shadow-xl"],
    [class*="shadow-2xl"] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    /* Kill dynamic shadow changes (glow-on-hover, hover-glow, etc.) */
    [class*="shadow-glow"],
    .hover-glow:hover,
    .glow-on-hover:hover {
        box-shadow: none !important;
    }

    /* Simplify button hover shadows */
    button[class*="bg-blue-"]:hover:not(:disabled),
    button[class*="bg-amber-"]:hover:not(:disabled),
    button[class*="bg-emerald-"]:hover:not(:disabled),
    button[class*="bg-green-"]:hover:not(:disabled),
    button[class*="bg-red-"]:hover:not(:disabled) {
        box-shadow: none !important;
    }
}

/* ============================================================================
   4. CSS CONTAINMENT — The most impactful layout optimization
   ============================================================================ */

/* Chat messages: each message is an isolated layout boundary */
.chat-scroll-container > div > div {
    contain: content;
}

/* Modal overlays: completely isolated paint layers */
.modal-backdrop-60fps {
    contain: strict;
    isolation: isolate;
}

/* Sidebar — isolated from main content reflows */
nav,
aside,
[role="navigation"] {
    contain: layout style;
}

/* ============================================================================
   5. ANIMATION COST REDUCTION
   Kill ALL non-essential animations on mobile.
   ============================================================================ */

@media (max-width: 1024px), (hover: none) {

    /* Kill ALL infinite animations except spinners */
    .animate-pulse,
    .animate-bounce,
    .animate-float,
    .animate-pulse-glow,
    .animate-gold-shimmer,
    .animate-glow-pulse,
    .animate-gentle-float,
    .animate-scale-pulse,
    .animate-heartbeat-60fps,
    .animate-pulse-glow-60fps,
    .animate-gradient,
    .avatar-online,
    .badge-pulse,
    .empty-state-icon,
    .step-active,
    .update-notification {
        animation: none !important;
    }

    /* Kill pseudo-element animations */
    .animate-shine::after,
    .animate-premium-shimmer::after,
    .btn-premium-glow::before,
    .hover-glow::before {
        display: none !important;
    }

    /* Allow spinners for loading states */
    .animate-spin {
        animation: spin 1s linear infinite !important;
    }

    /* Simplify message entrance — transform + opacity only */
    .message-bubble {
        animation: message-fade-simple 0.2s ease-out forwards !important;
    }

    @keyframes message-fade-simple {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Reduce all animation durations for snappier feel */
    .animate-fade-in,
    .animate-fade-in-up,
    .animate-fade-in-down,
    .animate-fade-in-scale,
    .animate-slide-in-left,
    .animate-slide-in-right,
    .animate-slide-in-up,
    .animate-slide-in-down,
    .animate-silk-fade,
    .animate-premium-up,
    .animate-premium-down,
    .animate-scale-bounce,
    .animate-modal,
    .animate-backdrop {
        animation-duration: 0.15s !important;
        animation-timing-function: ease-out !important;
    }
}

/* ============================================================================
   6. GPU COMPOSITING — Only promote elements that NEED their own layer
   Over-promotion causes memory pressure on mobile GPUs.
   ============================================================================ */

@media (max-width: 1024px) {

    /* Promote ONLY scroll containers */
    .chat-scroll-container,
    .overflow-y-auto,
    .overflow-y-scroll,
    .overflow-x-auto {
        transform: translateZ(0);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Clean up over-promoted layers */
    .will-change-transform:not(.animating) {
        will-change: auto !important;
    }
}

/* ============================================================================
   7. HOVER EFFECT REMOVAL — Touch devices
   Hover effects are meaningless on touch and cause "sticky hover" bugs.
   ============================================================================ */

@media (hover: none) {
    .hover-lift:hover,
    .hover-scale:hover,
    .hover-glow:hover,
    .smooth-interact:hover,
    .glow-on-hover:hover,
    .card-hover:hover,
    .card-premium:hover,
    .btn-hover-lift:hover,
    .interactive-card:hover,
    .session-item:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
}

/* ============================================================================
   8. FONT RENDERING OPTIMIZATION
   ============================================================================ */

@media (max-width: 1024px) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeSpeed;
    }
}

/* ============================================================================
   9. IMAGE & MEDIA OPTIMIZATION
   ============================================================================ */

img, video, canvas {
    content-visibility: auto;
}

img:not([width]):not([height]) {
    aspect-ratio: auto;
}

/* ============================================================================
   10. SCROLLBAR KILL — Mobile
   ============================================================================ */

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* ============================================================================
   11. GRADIENT SIMPLIFICATION — Mobile
   ============================================================================ */

@media (max-width: 768px) {
    [class*="bg-gradient-to"] {
        background-attachment: initial !important;
    }
}

/* ============================================================================
   12. MODAL BACKDROP — No blur on mobile
   Override the modal-backdrop-60fps class that still has blur
   ============================================================================ */

@media (max-width: 1024px), (hover: none) {
    .modal-backdrop-60fps {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.7) !important;
    }

    .modal-overlay-premium {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Kill the backdrop-fade animation that animates blur */
    .animate-backdrop,
    .modal-backdrop-enter {
        animation: fadeIn60fps 0.15s ease-out forwards !important;
    }

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

/* ============================================================================
   13. TOUCH TARGET CONSISTENCY — Prevent layout shifts from ux-enhancements
   The 44px min-height rule causes elements to jump when CSS loads async.
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
    /* Only apply to standalone buttons, not inline/icon buttons */
    button:not([class*="p-1"]):not([class*="p-0"]):not([class*="p-0.5"]):not([class*="w-5"]):not([class*="w-6"]):not([class*="w-7"]):not([class*="w-8"]):not([class*="h-5"]):not([class*="h-6"]):not([class*="h-7"]):not([class*="h-8"]):not(.inline-btn) {
        min-height: 40px;
    }

    /* Reset for links - they should NOT have forced min-height */
    a {
        min-height: unset !important;
        min-width: unset !important;
    }
}