/* ========================================
   NATIVE-LIKE MODAL ANIMATIONS
   Modals slide from bottom on mobile
   ======================================== */

@media (max-width: 767px) {

    /* Modal backdrop with blur */
    .modal-backdrop,
    .modal-overlay {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(0, 0, 0, 0.4);
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Modal slides from bottom */
    .modal,
    .modal-content,
    .payment-modal-content {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important;
        max-height: 90vh;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin: 0 !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    }

    /* Active state - slide up */
    .modal.active,
    .modal-content.active,
    .payment-modal-content.active,
    .modal.show,
    .modal-content.show {
        transform: translateY(0);
    }

    /* Drag handle at top of modal */
    .modal::before,
    .modal-content::before,
    .payment-modal-content::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 2px;
        z-index: 1;
    }

    /* Modal body scrollable */
    .modal-body {
        max-height: calc(90vh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Modal header sticky */
    .modal-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        padding-top: 24px;
        /* Space for drag handle */
    }

    /* Modal footer sticky */
    .modal-footer {
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) and (max-width: 767px) {

    .modal::before,
    .modal-content::before,
    .payment-modal-content::before {
        background: rgba(255, 255, 255, 0.3);
    }

    .modal-header,
    .modal-footer {
        background: #1c1c1e;
    }

    .modal-footer {
        border-top-color: rgba(255, 255, 255, 0.1);
    }
}

/* ========================================
   SMOOTH SCROLLING OPTIMIZATIONS
   Native-like momentum scrolling
   ======================================== */

@media (max-width: 767px) {

    /* Enable momentum scrolling everywhere */
    * {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Main content smooth scroll */
    .main-content,
    .page-content,
    .app-container {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
    }

    /* Prevent rubber band effect at top/bottom */
    body {
        overscroll-behavior-y: none;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .app-container {
        height: 100vh;
        height: -webkit-fill-available;
        overflow: hidden;
    }

    .main-content {
        height: 100%;
        overflow-y: auto;
    }

    /* Smooth scroll for lists */
    .chart-list,
    .profile-list,
    .card-list {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* GPU acceleration for smooth scrolling */
    .main-content,
    .modal-body,
    .chart-list {
        transform: translateZ(0);
        will-change: scroll-position;
    }

    /* Snap scrolling for cards (optional) */
    .cards-grid {
        scroll-snap-type: y proximity;
    }

    .card {
        scroll-snap-align: start;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   Reduce jank and improve FPS
   ======================================== */

@media (max-width: 767px) {

    /* Use GPU for animations */
    .card,
    .btn-primary,
    .btn-secondary,
    .modal,
    .mobile-bottom-nav {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }

    /* Optimize font rendering */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Reduce animations on low-end devices */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Optimize images */
    img {
        content-visibility: auto;
        image-rendering: -webkit-optimize-contrast;
    }

    /* Lazy load off-screen content */
    .lazy-load {
        content-visibility: auto;
        contain-intrinsic-size: 500px;
    }

    /* Reduce shadow complexity */
    .card,
    .modal,
    .mobile-bottom-nav {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ========================================
   PULL-TO-REFRESH INDICATOR
   Native-like refresh animation
   ======================================== */

@media (max-width: 767px) {
    .pull-to-refresh-indicator {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-60px);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9999;
        color: #6366f1;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .pull-to-refresh-indicator.active {
        transform: translateX(-50%) translateY(20px);
    }

    .pull-to-refresh-indicator .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid #e5e7eb;
        border-top-color: #6366f1;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
}