/* FILE: css/style.css */
:root {
    --bg-color: #f4f4f9;
    --sidebar-bg: #1e1e24;
    --chat-bg: #ffffff;
    --text-color: #333;
    --input-bg: #f0f0f0;
    --primary-color: #4a90e2;
    --user-msg-bg: #e3effd;
    --ai-msg-bg: #f9f9f9;
    --border-color: #ddd;
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --bg-color: #121212;
    --sidebar-bg: #000000;
    --chat-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --input-bg: #2d2d2d;
    --primary-color: #bb86fc;
    --user-msg-bg: #2b2b2b;
    --ai-msg-bg: #1e1e1e;
    --border-color: #333;
}

body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-color); color: var(--text-color); height: 100vh; overflow: hidden; transition: background 0.3s; }

/* Login Page */
.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-container { background: var(--chat-bg); padding: 2rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); text-align: center; max-width: 400px; width: 90%; }
.input-group input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid var(--border-color); border-radius: 6px; box-sizing: border-box; background: var(--input-bg); color: var(--text-color); }
.btn-primary { width: 100%; padding: 12px; background: var(--primary-color); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; }
.btn-primary:hover { opacity: 0.9; }

/* Chat Layout */
.app-container { display: flex; height: 100vh; }

/* Sidebar */
.sidebar { width: 260px; background: var(--sidebar-bg); color: #fff; display: flex; flex-direction: column; padding: 1rem; flex-shrink: 0; }
.brand { font-size: 1.2rem; font-weight: bold; margin-bottom: 2rem; display: flex; align-items: center; gap: 10px; }
.controls { display: flex; flex-direction: column; gap: 1rem; }
.controls select { padding: 8px; border-radius: 4px; border: none; background: #333; color: white; }
.btn-secondary, .btn-danger { padding: 10px; border: none; border-radius: 4px; cursor: pointer; text-align: left; color: white; transition: 0.2s; }
.btn-secondary { background: #333; }
.btn-secondary:hover { background: #444; }
.btn-danger { background: #d32f2f; margin-top: auto; }
.bottom-controls { margin-top: auto; }

/* Main Chat */
.chat-interface { flex: 1; display: flex; flex-direction: column; background: var(--chat-bg); position: relative; }
.chat-history { flex: 1; padding: 2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.5rem; scroll-behavior: smooth; }

/* Messages */
.message { max-width: 80%; line-height: 1.6; position: relative; padding: 1rem; border-radius: 12px; animation: fadeIn 0.3s ease; }
.message.user { align-self: flex-end; background: var(--user-msg-bg); border-bottom-right-radius: 2px; }
.message.model { align-self: flex-start; background: var(--ai-msg-bg); border-bottom-left-radius: 2px; border: 1px solid var(--border-color); width: 100%; max-width: 100%; }
.message img { max-width: 100%; border-radius: 8px; margin-top: 10px; max-height: 300px; object-fit: cover; }

/* Code Blocks */
pre { background: #23241f; padding: 1rem; border-radius: 8px; overflow-x: auto; color: #f8f8f2; }

/* Input Area */
.input-area { padding: 1rem 2rem; background: var(--chat-bg); border-top: 1px solid var(--border-color); }
.input-wrapper { display: flex; gap: 10px; align-items: flex-end; background: var(--input-bg); padding: 10px; border-radius: 12px; border: 1px solid var(--border-color); }
textarea { flex: 1; background: transparent; border: none; color: var(--text-color); resize: none; max-height: 150px; outline: none; font-family: inherit; font-size: 1rem; }
.file-btn, #send-btn { background: transparent; border: none; cursor: pointer; color: var(--text-color); padding: 5px 10px; font-size: 1.2rem; }
#send-btn { color: var(--primary-color); }
.file-btn:hover, #send-btn:hover { opacity: 0.7; }

/* Preview */
.preview-container { display: flex; gap: 10px; margin-bottom: 5px; }
.preview-img { height: 60px; border-radius: 4px; border: 1px solid var(--primary-color); }

.status-bar { font-size: 0.8rem; color: #888; text-align: right; margin-top: 5px; }

/* Responsive */
@media (max-width: 768px) {
    .sidebar { display: none; position: absolute; z-index: 100; height: 100%; }
    .sidebar.active { display: flex; }
    .chat-history { padding: 1rem; }
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }