/* Modal Width Fix - Keep modals compact on desktop like mobile */

/* Base modal content - enforce max width on all screens */
.modal-content {
    max-width: 500px !important;  /* Mobile-like width even on desktop */
    width: 90% !important;         /* Responsive but capped */
    margin: 2rem auto !important;  /* Center with margin */
}

/* Specific modal overrides for those that need to be slightly larger */
#function-calling-modal .modal-content,
#prompts-modal .modal-content,
#rag-modal .modal-content,
#mcp-modal .modal-content {
    max-width: 600px !important;  /* Slightly wider for complex interfaces */
}

/* Settings modal - keep compact */
#settings-modal .modal-content {
    max-width: 500px !important;
}

/* Share modal - keep compact */
#share-modal .modal-content {
    max-width: 450px !important;
}

/* Welcome modal - keep compact and prevent scrolling */
#welcome-modal .modal-content {
    max-width: 500px !important;
    max-height: calc(100vh - 30px) !important; /* Ensure space for close button */
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    /* Position to overlap 55% of header from bottom */
    position: fixed !important;
    top: calc(60px * 0.45) !important; /* 60px header * 45% visible = 27px from top */
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

/* System prompt modal (prompts-modal) - proper sizing and scrolling */
#prompts-modal .modal-content {
    max-width: 600px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

/* Model selection modal */
#model-selection-modal .modal-content {
    max-width: 500px !important;
}

/* System prompt viewer - can be wider but still limited */
#system-prompt-viewer-modal .modal-content {
    max-width: 700px !important;
    resize: both;  /* Keep resize functionality */
}

/* Info modals */
#settings-info-modal .modal-content,
[id^="share-info-modal-"] .modal-content {
    max-width: 500px !important;
}

/* OAuth and service modals */
.oauth-callback-modal .modal-content,
.oauth-instructions-modal .modal-content,
.service-pat-modal .modal-content,
.service-oauth-setup-modal .modal-content,
.device-code-modal .modal-content,
.manual-oauth-modal .modal-content {
    max-width: 500px !important;
}

/* Function execute and details modals */
#function-execute-modal .modal-content,
#function-details-modal .modal-content {
    max-width: 500px !important;
}

/* Desktop specific - ensure modals don't get too wide */
@media (min-width: 769px) {
    .modal-content {
        max-width: 500px !important;
        width: 90% !important;
    }
    
    /* Slightly larger modals for complex interfaces */
    #function-calling-modal .modal-content,
    #prompts-modal .modal-content,
    #rag-modal .modal-content,
    #mcp-modal .modal-content {
        max-width: 650px !important;
        width: 90% !important;
    }
    
    #system-prompt-viewer-modal .modal-content {
        max-width: 750px !important;
        width: 90% !important;
    }
}

/* Very large screens - still keep modals contained */
@media (min-width: 1440px) {
    .modal-content {
        max-width: 550px !important;
        width: auto !important;
        min-width: 450px !important;
    }
    
    #function-calling-modal .modal-content,
    #prompts-modal .modal-content,
    #rag-modal .modal-content,
    #mcp-modal .modal-content {
        max-width: 700px !important;
        min-width: 600px !important;
    }
    
    #system-prompt-viewer-modal .modal-content {
        max-width: 800px !important;
        min-width: 700px !important;
    }
}

/* Mobile - respect existing mobile styles */
@media (max-width: 768px) {
    .modal-content {
        max-width: 95% !important;
        width: 95% !important;
        margin: 1rem auto !important;
    }
    
    /* Welcome modal specific adjustments for mobile */
    #welcome-modal .modal-content {
        max-height: calc(100vh - 30px) !important;
        padding: 1.5rem !important;
        overflow-y: auto !important; /* Allow scrolling if needed on mobile */
        /* Position to overlap 55% of header from bottom on mobile */
        position: fixed !important;
        top: calc(50px * 0.45) !important; /* 50px mobile header * 45% visible = 22.5px from top */
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        width: 95% !important;
        max-width: 95% !important;
    }
    
    /* Prompts modal on mobile - proper scrolling */
    #prompts-modal .modal-content {
        overflow-y: auto !important; /* Allow scrolling on mobile */
        max-height: calc(100vh - 2rem) !important;
        max-width: 95% !important;
        margin: 1rem auto !important;
    }
    
    /* Reduce spacing in welcome modal on mobile */
    #welcome-modal h2 {
        margin-bottom: 16px !important;
        font-size: 24px !important;
    }
    
    #welcome-modal .important-notice {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    #welcome-modal .form-actions {
        margin-top: 16px !important;
        padding-bottom: 0 !important;
    }
}