/* --- 1. General Setup & Dark Mode Theme --- */
:root {
    --bg-color: #121212;
    --surface-color: #1e1e1e;
    --primary-color: #bb86fc;
    --text-color: #e1e1e1;
    --border-color: #333;
    --border-highlight: #bb86fc;
    --text-muted: #888;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
    height: 100%;
    margin: 0;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* --- 2. Main Layout & Boxes --- */
.container { display: flex; flex-direction: row; width: 100%; height: 100%; gap: 20px; }
.box { flex: 1; background-color: var(--surface-color); border-radius: 15px; padding: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid var(--border-color); position: relative; }
.hidden { display: none !important; }

/* --- 3. Uploader Styles (Left Box) --- */
#upload-box { border-style: dashed; }
#drop-zone-content { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; }
#upload-box.drag-over { border-color: var(--border-highlight); background-color: #2a2a2a; }
.upload-button, #remove-image-button { background-color: var(--primary-color); color: #121212; padding: 10px 20px; border-radius: 8px; cursor: pointer; border: none; font-weight: bold; margin-top: 20px; transition: background-color 0.2s ease; }
#image-preview-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; }
#image-preview { max-width: 90%; max-height: calc(100% - 60px); border-radius: 8px; object-fit: contain; }

/* --- 4. Interaction Styles (Right Box) --- */
#action-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.button-container { display: flex; flex-direction: column; gap: 15px; width: 100%; align-items: center; }
.action-button { background-color: transparent; color: var(--text-color); border: 2px solid var(--border-color); padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 1rem; font-weight: 500; width: 60%; min-width: 150px; transition: all 0.2s ease; }
.action-button:hover { border-color: var(--border-highlight); }
.action-button.active { background-color: var(--primary-color); color: var(--bg-color); border-color: var(--primary-color); font-weight: bold; }
.send-button { background-color: var(--primary-color); color: #121212; padding: 12px 25px; border-radius: 8px; cursor: pointer; border: none; font-weight: bold; width: 60%; min-width: 150px; margin-top: 30px; font-size: 1.1rem; transition: background-color 0.2s ease; }

/* --- 5. Buttons (Settings, Back) --- */
#settings-button { position: absolute; top: 20px; right: 25px; cursor: pointer; color: var(--text-muted); font-size: 0.9rem; transition: color 0.2s ease; }
#settings-button:hover { color: var(--text-color); }
.icon-button#back-button { position: static; cursor: pointer; width: 32px; height: 32px; color: var(--text-muted); transition: color 0.2s ease; }
.icon-button#back-button:hover { color: var(--text-color); }

/* --- 6. AI Output Area --- */
#output-container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; }
.output-header { width: 100%; height: 40px; display: flex; align-items: center; flex-shrink: 0; }
#ai-response-box { width: 100%; flex-grow: 1; background-color: var(--bg-color); border-radius: 8px; padding: 20px; overflow-y: auto; text-align: left; white-space: pre-wrap; font-family: 'Inter', sans-serif; color: var(--text-color); }

/* --- 6.1 Formatted Content Styles (NEW) --- */
#ai-response-box > *:first-child { margin-top: 0; }
#ai-response-box h1, #ai-response-box h2, #ai-response-box h3 { color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; margin-bottom: 0.5em;}
#ai-response-box p { line-height: 1.6; }
#ai-response-box strong { color: #f0f0f0; font-weight: 600; }
#ai-response-box ul, #ai-response-box ol { padding-left: 25px; }
#ai-response-box code { background-color: #2c2c2c; padding: 0.2em 0.4em; margin: 0; font-size: 85%; border-radius: 6px; font-family: monospace; }
#ai-response-box pre { background-color: #2c2c2c; padding: 1em; border-radius: 8px; overflow-x: auto; }
#ai-response-box pre code { background-color: transparent; padding: 0; font-size: 100%; }
#ai-response-box a { color: var(--primary-color); text-decoration: none; }
#ai-response-box a:hover { text-decoration: underline; }

/* --- 7. Settings Modal --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: var(--surface-color); padding: 30px; border-radius: 15px; width: 90%; max-width: 450px; border: 1px solid var(--border-color); }
.modal-content h3 { margin-top: 0; color: var(--primary-color); }

/* --- 8. Responsive Design --- */
@media (max-width: 768px) { body { padding: 15px; } .container { flex-direction: column; height: auto; min-height: 100%; } .box { min-height: 50vh; } }