/* Modal Scroll Fix - Prevents background scroll when modal is open */

/* When modal is open, prevent body scroll */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Ensure modal overlay is scrollable if content overflows */
.modal-overlay {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

/* Modal content should scroll independently */
.modal-content {
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain; /* Prevents scroll chaining to parent */
}

/* Preview modal specific fixes */
.preview-modal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.preview-modal .preview-container {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.preview-modal .preview-content {
    flex: 1;
    overflow: auto;
    overscroll-behavior: contain;
    min-height: 0; /* Important for flex scroll */
}

/* Better scrollbar styling for modals */
.modal-content::-webkit-scrollbar,
.preview-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track,
.preview-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb,
.preview-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover,
.preview-content::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Firefox scrollbar */
.modal-content,
.preview-content {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Mobile improvements */
@media (max-width: 768px) {
    body.modal-open {
        /* Prevent iOS bounce scroll */
        touch-action: none;
    }

    .modal-content {
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px); /* Dynamic viewport height for mobile */
    }

    .preview-modal .preview-container {
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
}