/* ========================================
   BROWSER-SPECIFIC FIXES
   Handle quirks in different mobile browsers
   ======================================== */

/* ========================================
   iOS Safari Fixes
   ======================================== */

/* Fix viewport height with address bar */
@supports (-webkit-touch-callout: none) {
    .desktop {
        min-height: -webkit-fill-available;
    }
    
    /* Fix position sticky/fixed */
    .taskbar {
        position: -webkit-sticky;
        position: sticky;
    }
    
    /* Prevent rubber banding */
    body {
        overscroll-behavior-y: none;
    }
    
    /* Fix input zoom */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* Fix tap delay */
    a, button, input, select {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
}

/* ========================================
   Samsung Internet Browser
   ======================================== */

@supports (-webkit-appearance: none) and (not (-ms-ime-align: auto)) {
    /* Samsung Internet specific fixes */
    .desktop-icon {
        transform: translateZ(0);
    }
    
    .window {
        backface-visibility: hidden;
    }
}

/* ========================================
   Chrome Mobile (Android)
   ======================================== */

@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    /* Chrome mobile viewport fix */
    .desktop {
        height: calc(100vh - env(safe-area-inset-bottom));
    }
    
    /* Fix address bar hiding/showing */
    @media (max-width: 767px) {
        .window {
            max-height: calc(100vh - 70px - env(safe-area-inset-bottom));
        }
    }
}

/* ========================================
   Firefox Mobile
   ======================================== */

@-moz-document url-prefix() {
    @media (max-width: 767px) {
        .icon-label {
            word-break: break-word;
        }
        
        .window-content {
            scrollbar-width: thin;
        }
    }
}

/* ========================================
   Opera Mobile
   ======================================== */

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .desktop-icon {
        will-change: transform;
    }
}

/* ========================================
   UC Browser
   ======================================== */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        /* UC Browser specific */
        .window {
            transform: translate3d(0, 0, 0);
        }
    }
}

/* ========================================
   Edge Mobile
   ======================================== */

@supports (-ms-ime-align: auto) {
    .desktop-icons {
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    
    .window-content {
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
}

/* ========================================
   Safe Area Insets (Notch support)
   iPhone X, 11, 12, 13, 14, etc.
   ======================================== */

/* Add padding for notch areas */
@supports (padding: env(safe-area-inset-top)) {
    .taskbar {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    
    .desktop {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .window {
        max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
    }
}

/* Landscape notch support */
@media (orientation: landscape) {
    @supports (padding: env(safe-area-inset-left)) {
        .desktop-icons {
            padding-left: max(20px, env(safe-area-inset-left));
            padding-right: max(20px, env(safe-area-inset-right));
        }
    }
}

/* ========================================
   Instagram In-App Browser
   ======================================== */

/* Instagram uses custom WebView */
@media (max-width: 450px) {
    /* Assume it might be Instagram if very narrow */
    .desktop-icons {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .icon-image {
        min-width: 42px !important;
        min-height: 42px !important;
    }
    
    /* Fix Instagram's viewport scaling */
    .window {
        max-width: calc(100vw - 8px) !important;
    }
}

/* ========================================
   Facebook In-App Browser
   ======================================== */

@media (max-width: 767px) {
    /* FB browser has different scrolling */
    .window-content {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
}

/* ========================================
   WhatsApp In-App Browser
   ======================================== */

@media (max-width: 400px) {
    /* WhatsApp browser quirks */
    .start-menu {
        max-height: calc(100vh - 100px) !important;
    }
}

/* ========================================
   Brave Browser Mobile
   ======================================== */

@supports (padding: constant(safe-area-inset-top)) {
    .taskbar {
        padding-top: constant(safe-area-inset-top);
    }
}

/* ========================================
   Prevent Text Inflation (Android)
   ======================================== */

@media (max-width: 767px) {
    body {
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* Prevent font boosting */
    * {
        max-height: 999999px;
    }
}

/* ========================================
   Dark Mode Support (System Preference)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Already dark, but ensure consistency */
    :root {
        color-scheme: dark;
    }
}

/* ========================================
   High Contrast Mode (Accessibility)
   ======================================== */

@media (prefers-contrast: high) {
    .desktop-icon:hover,
    .menu-item:hover {
        outline: 2px solid var(--primary-color);
    }
    
    .icon-label {
        font-weight: 600;
    }
}

/* ========================================
   Reduced Motion (Accessibility)
   ======================================== */

@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;
    }
    
    .window,
    .start-menu {
        transition: none !important;
    }
}

/* ========================================
   Forced Colors Mode (Windows High Contrast)
   ======================================== */

@media (forced-colors: active) {
    .desktop-icon,
    .menu-item,
    .window {
        border: 1px solid CanvasText;
    }
    
    .icon-image {
        forced-color-adjust: none;
    }
}

/* ========================================
   Low Battery Mode (Experimental)
   ======================================== */

@media (prefers-reduced-data: reduce) {
    /* Reduce animations for data saving */
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================
   Pointer Device Detection
   ======================================== */

/* Touch devices - bigger targets */
@media (pointer: coarse) {
    .desktop-icon,
    .menu-item,
    button {
        min-width: 48px !important;
        min-height: 48px !important;
    }
}

/* Precise pointer (mouse) - allow smaller */
@media (pointer: fine) {
    .desktop-icon {
        min-width: 70px !important;
        min-height: 80px !important;
    }
}

/* ========================================
   Hover Capability Detection
   ======================================== */

/* No hover (touch) - instant feedback */
@media (hover: none) {
    .desktop-icon:active,
    .menu-item:active {
        transform: scale(0.95);
    }
}

/* Hover available - show hover states */
@media (hover: hover) {
    .desktop-icon:hover,
    .menu-item:hover {
        transform: translateY(-3px);
    }
}

/* ========================================
   Screen Reader Optimizations
   ======================================== */

@media (prefers-reduced-transparency: reduce) {
    .window,
    .taskbar,
    .start-menu {
        backdrop-filter: none;
        background: rgba(26, 26, 46, 1);
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .taskbar,
    .start-menu,
    .desktop-icons {
        display: none !important;
    }
    
    .window {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
    }
    
    .window-header {
        background: #000 !important;
        color: #fff !important;
    }
}

/* ========================================
   Foldable Devices (Samsung Galaxy Fold, etc.)
   ======================================== */

@media (horizontal-viewport-segments: 2) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

/* ========================================
   Ultra Wide Screens
   ======================================== */

@media (min-width: 2560px) {
    .desktop-icons {
        max-width: 2400px;
        margin: 0 auto;
    }
    
    .window {
        max-width: 1200px;
    }
}

/* ========================================
   Very Tall Screens (iPad Pro Portrait, etc.)
   ======================================== */

@media (min-height: 1200px) {
    .desktop-icons {
        align-content: start;
        padding-top: 100px;
    }
}