/* ScholarLM Mobile Optimizations */

/* Ensure minimum touch targets (44px) */
@media (max-width: 768px) {
    /* Larger touch targets for buttons */
    button, 
    a,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Stack navigation items vertically on mobile */
    .mobile-stack {
        flex-direction: column !important;
        gap: 0.5rem;
    }

    /* Full-width cards on mobile */
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reduce padding on mobile */
    .mobile-compact {
        padding: 0.75rem !important;
    }

    /* Hide on mobile */
    .mobile-hidden {
        display: none !important;
    }

    /* Show only on mobile */
    .mobile-only {
        display: block !important;
    }

    /* Improved text sizing for mobile */
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    /* Better search input on mobile */
    .search-input-mobile {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Modal full screen on mobile */
    .modal-mobile-full {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Bottom sheet style for mobile modals */
    .modal-mobile-sheet {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-height: 85vh !important;
        border-radius: 1rem 1rem 0 0 !important;
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    /* Improved scrolling on mobile */
    .mobile-scroll {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Source cards stack nicely */
    .source-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Feedback button positioning on mobile */
    .feedback-button-mobile {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 3rem !important;
        height: 3rem !important;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .tablet-two-cols {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Skeleton loading animation */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 0.25rem;
}

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

/* Skeleton placeholder sizes */
.skeleton-text {
    height: 1rem;
    width: 80%;
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
}

.skeleton-avatar {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}

.skeleton-card {
    height: 8rem;
    width: 100%;
}

/* 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;
    }
}

/* Better focus states for accessibility */
:focus-visible {
    outline: 2px solid #ea2a33;
    outline-offset: 2px;
}

/* Prevent layout shift during loading */
.aspect-card {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}