async function uploadAndSolve() {
    if (!selectedFile && !document.getElementById('manualCorrection').value.trim()) {
        alert("Please upload a file/photo or enter text in the correction box.");
        return;
    }

    const outputPanel = document.getElementById('outputPanel');
    
    // 1. Show Loading UI
    outputPanel.innerHTML = `
        <div class="loading-box">
            <div class="spinner-anticlockwise"></div>
            <p style="color:#c91818; font-size: 22px; margin-top: 20px;">SOLVING EQUATION & GENERATING GRAPH...</p>
            <p style="color:#666; font-size: 14px;">(If the server is sleeping, this may take up to 45 seconds...)</p>
        </div>
    `;

    const formData = new FormData();
    if (selectedFile) formData.append('file', selectedFile);
    formData.append('subject', document.getElementById('subjectSelect').value);
    formData.append('level', document.getElementById('levelSelect').value);
    formData.append('mode', document.getElementById('modeSelect').value);
    formData.append('layout', document.getElementById('layoutSelect').value);
    formData.append('corrected_text', document.getElementById('manualCorrection').value);

    // 2. Set Timeout Controller (60 seconds to allow Render cold start)
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 60000);

    try {
        const response = await fetch('https://stem-vision-backend.onrender.com/process-image', {
            method: 'POST',
            body: formData,
            signal: controller.signal
        });

        clearTimeout(timeoutId);

        // Check for HTTP errors (e.g., 500 Server Error, 404 Not Found)
        if (!response.ok) {
            throw new Error(`Server status ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();
        
        // 3. Render Results
        if (data.solution_steps && Array.isArray(data.solution_steps)) {
            outputPanel.innerHTML = data.solution_steps.join('');
            await renderMathJaxSafe(outputPanel);

            if (data.graph_data) {
                renderGraph(data.graph_data);
            }
        } else if (data.error) {
            outputPanel.innerHTML = `<span class="question-header">API ERROR</span><p style="color:#c91818; font-size: 20px;">${data.error}</p>`;
        } else {
            outputPanel.innerHTML = '<span class="question-header">ERROR PROCESSING REQUEST</span><p style="color:#666;">No valid solution steps returned from engine.</p>';
        }
    } catch (err) {
        clearTimeout(timeoutId);
        let errorMsg = err.name === 'AbortError' 
            ? 'Request timed out. Render backend took too long to wake up.' 
            : err.message;

        // Reset UI out of loading state so app isn't stuck
        outputPanel.innerHTML = `
            <span class="question-header">CONNECTION ERROR</span>
            <p style="color:#c91818; font-size: 20px; margin-top:20px;">${errorMsg}</p>
            <p style="color:#666; font-size: 14px; margin-top:10px;">Check browser console (F12) for CORS or Network errors.</p>
            <button class="btn-action" style="max-width:200px; margin:20px auto 0 auto;" onclick="uploadAndSolve()">Try Again</button>
        `;
    }
}