/* Mobile Swipe Navigation Styles */
@media (max-width: 768px) {
    /* Smooth transitions for main content during swipes */
    .main-content,
    .messaging-container,
    body {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Swipe transition overlay */
    .swipe-transition-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #f8fafc;
        z-index: 9999;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    
    /* Enhanced bottom nav animations during swipe */
    .bottom-nav {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                    box-shadow 0.3s ease;
    }
    
    .bottom-nav.swipe-active {
        transform: translateY(-5px);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    }
    
    /* Enhanced active state animation */
    .bottom-nav-link {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .bottom-nav-link.active {
        transform: scale(1.1);
    }
    
    .bottom-nav-link.active::before {
        animation: activeIndicatorPulse 0.6s ease-out;
    }
    
    @keyframes activeIndicatorPulse {
        0% {
            transform: scale(0.8);
            opacity: 0;
        }
        50% {
            transform: scale(1.2);
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    /* Swipe indicators */
    .swipe-indicator {
        position: fixed;
        top: 50%;
        width: 4px;
        height: 80px;
        background: rgba(0, 102, 204, 0.6);
        border-radius: 2px;
        transform: translateY(-50%);
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
    }
    
    .swipe-indicator-left {
        left: 0;
        border-radius: 0 2px 2px 0;
        animation: swipeIndicatorLeft 2s ease-in-out infinite;
    }
    
    .swipe-indicator-right {
        right: 0;
        border-radius: 2px 0 0 2px;
        animation: swipeIndicatorRight 2s ease-in-out infinite;
    }
    
    @keyframes swipeIndicatorLeft {
        0%, 100% {
            transform: translateY(-50%) translateX(-2px);
            opacity: 0.6;
        }
        50% {
            transform: translateY(-50%) translateX(2px);
            opacity: 1;
        }
    }
    
    @keyframes swipeIndicatorRight {
        0%, 100% {
            transform: translateY(-50%) translateX(2px);
            opacity: 0.6;
        }
        50% {
            transform: translateY(-50%) translateX(-2px);
            opacity: 1;
        }
    }
    
    /* Page transition effects */
    .page-swipe-enter {
        animation: pageSwipeEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    .page-swipe-exit-left {
        animation: pageSwipeExitLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    .page-swipe-exit-right {
        animation: pageSwipeExitRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    @keyframes pageSwipeEnter {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes pageSwipeExitLeft {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(-100%);
            opacity: 0;
        }
    }
    
    @keyframes pageSwipeExitRight {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }
    
    /* Boundary feedback animation */
    .boundary-feedback {
        animation: boundaryBounce 0.4s ease-out;
    }
    
    @keyframes boundaryBounce {
        0% {
            transform: translateX(0);
        }
        25% {
            transform: translateX(20px);
        }
        50% {
            transform: translateX(-10px);
        }
        75% {
            transform: translateX(5px);
        }
        100% {
            transform: translateX(0);
        }
    }
    
    /* Loading shimmer effect during transitions */
    .swipe-loading {
        position: relative;
        overflow: hidden;
    }
    
    .swipe-loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
        );
        animation: swipeShimmer 1.5s ease-in-out infinite;
    }
    
    @keyframes swipeShimmer {
        0% {
            left: -100%;
        }
        100% {
            left: 100%;
        }
    }
    
    /* Bottom nav icon bounce effect */
    .bottom-nav-link.active .bottom-nav-icon {
        animation: iconBounce 0.5s ease-out;
    }
    
    @keyframes iconBounce {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.3);
        }
        100% {
            transform: scale(1);
        }
    }
    
    /* Prevent text selection during swipes */
    .swipe-active * {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
}

/* Improved touch targets for mobile */
@media (max-width: 768px) {
    .bottom-nav-link {
        min-height: 56px;
        min-width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 6px 8px;
        touch-action: manipulation;
    }
    
    /* Add subtle background for better depth perception */
    .bottom-nav {
        background: #000000;
    }
    
    /* Enhanced shadow for floating effect during swipe */
    .bottom-nav.swipe-transitioning {
        box-shadow: 
            0 -4px 12px rgba(0, 0, 0, 0.3),
            0 -2px 6px rgba(0, 102, 204, 0.2);
        transform: translateY(-2px);
    }
    
    /* Page indicator dots */
    .page-indicator {
        position: fixed;
        bottom: 70px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 1001;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    
    .page-indicator.show {
        opacity: 1;
    }
    
    .page-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transition: all 0.3s ease;
    }
    
    .page-dot.active {
        background: #0066cc;
        transform: scale(1.2);
        box-shadow: 0 0 8px rgba(0, 102, 204, 0.5);
    }
    
    /* Swipe progress indicator */
    .swipe-progress {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: rgba(0, 102, 204, 0.2);
        z-index: 10000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .swipe-progress.active {
        opacity: 1;
    }
    
    .swipe-progress-bar {
        height: 100%;
        background: #0066cc;
        width: 0%;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0 8px rgba(0, 102, 204, 0.3);
    }
}