:root { --bg-main: #ffffff; --bg-sidebar: #f9f9f9; --text-primary: #0d0d0d; --text-secondary: #6b7280; --border: #e5e5e5; --msg-user: #f3f4f6; --msg-user-text: #0d0d0d; --accent: #3b82f6; --danger: #ef4444; --hover: #f3f4f6; --btn-send-bg: #0d0d0d;}
body.dark-mode { --bg-main: #212121; --bg-sidebar: #171717; --text-primary: #ececf1; --text-secondary: #8e8ea0; --border: #303030; --msg-user: #2f2f2f; --msg-user-text: #ececf1; --accent: #3b82f6; --hover: #2a2a2a; --btn-send-bg: #ececf1;}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background: var(--bg-main); color: var(--text-primary); overflow: hidden; height: 100dvh; transition: 0.3s; }
button { cursor: pointer; border: none; background: transparent; outline: none; transition: 0.2s;}

::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

.screen { display: none; height: 100dvh; width: 100vw; position: absolute; inset: 0; flex-direction: column; } .screen.active { display: flex !important; }
.loading-overlay { display: flex; justify-content: center; align-items: center; background: var(--bg-main); z-index: 99999; transition: opacity 0.3s;}
.spinner-minimal { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite;}

#login-screen { justify-content: center; align-items: center; background: var(--bg-main); }
.login-box { text-align: center; width: 100%; max-width: 340px; padding: 20px;}
.logo-icon { font-size: 50px; color: var(--text-primary); margin-bottom: 20px; }
.login-box h1 { font-size: 32px; margin-bottom: 8px; font-weight: 700; letter-spacing: -0.5px;}
.login-box p { color: var(--text-secondary); margin-bottom: 35px; font-size: 15px;}
.btn-primary { background: var(--accent); color: white; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; border-radius: 10px; width: 100%; font-size: 16px; transition: transform 0.1s, opacity 0.2s; cursor: pointer !important; pointer-events: auto;}
.btn-primary:hover { opacity: 0.9; transform: scale(1.02); }

.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(2px);} .modal.active { display: flex; animation: fadeIn 0.2s ease; }
.minimalist-panel { background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 16px; padding: 25px; width: 90%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .modal-header h2 { font-size: 18px; font-weight: 600;}
.form-group { margin-bottom: 15px; text-align: left;} .form-group label { display: block; font-weight: 500; margin-bottom: 8px; font-size: 13px; color: var(--text-secondary);}
.text-accent { color: var(--accent); font-weight: 700; } .form-group textarea, .form-group input { width: 100%; background: var(--bg-main); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 10px; outline: none; font-size: 14px;} .w-100 { width: 100%; padding: 12px; border-radius: 8px;}
.text-center { text-align: center; } .modal-icon { font-size: 40px; margin-bottom: 15px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 10px;} .btn-outline { border: 1px solid var(--border); padding: 10px 20px; border-radius: 8px; color: var(--text-primary); flex: 1; font-weight: 500;} .btn-danger { background: var(--danger); color: white; padding: 10px 20px; border-radius: 8px; flex: 1; font-weight: 500;}

#chat-screen { display: flex; flex-direction: row; background: var(--bg-main);} #sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 900;}
.sidebar { width: 280px; height: 100dvh; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: 0.3s; z-index: 950;}
.sidebar-header { padding: 15px; display: flex; justify-content: space-between; align-items: center; } .btn-new-chat { background: var(--accent); color: white; padding: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; border-radius: 10px;}
.history-list-container { flex: 1; overflow-y: auto; padding: 10px; } .history-title { color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 5px 10px; margin-bottom: 5px;} .history-item { padding: 12px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: var(--text-primary); font-size: 14px; margin-bottom: 2px;} .history-item:hover, .history-item.active { background: var(--hover); } .history-item span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 190px; }
.btn-delete { color: var(--text-secondary); opacity: 0; padding: 6px; border-radius: 6px;} .history-item:hover .btn-delete { opacity: 1; } .btn-delete:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
.sidebar-footer { padding: 15px 10px; border-top: 1px solid var(--border); } .user-profile { display: flex; align-items: center; gap: 12px; padding: 0 5px 15px; margin-bottom: 10px; border-bottom: 1px solid var(--border);} .user-profile img { width: 36px; height: 36px; border-radius: 50%;} .user-info span { font-weight: 600; font-size: 15px; } .sidebar-menu-btn { width: 100%; text-align: left; padding: 12px; border-radius: 8px; color: var(--text-primary); font-size: 14px; display: flex; align-items: center; gap: 12px; font-weight: 500;} .sidebar-menu-btn:hover { background: var(--hover); } .text-danger { color: var(--danger) !important; }

.chat-area { flex: 1; display: flex; flex-direction: column; height: 100dvh; width: 100%; align-items: center;}
.chat-header { width: 100%; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); background: var(--bg-main); min-height: 60px;} .btn-icon { color: var(--text-secondary); padding: 10px; border-radius: 8px; font-size: 18px;} .btn-icon:hover { color: var(--text-primary); background: var(--hover); } .header-title { font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; flex: 1;}
.chat-messages { width: 100%; flex: 1; overflow-y: auto; padding: 25px 0; display: flex; flex-direction: column; align-items: center; scroll-behavior: smooth; } .message { width: 100%; max-width: 850px; padding: 15px 20px; display: flex; justify-content: center; } .message-inner { width: 100%; display: flex; gap: 15px; }
.message.user { justify-content: flex-end; } .message.user .message-inner { justify-content: flex-end; } .message.user .msg-content { background: var(--msg-user); color: var(--msg-user-text); padding: 12px 18px; border-radius: 20px; max-width: 85%; }
.message.ai .message-inner { justify-content: flex-start; } .ai-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px;} .message.ai .msg-content { color: var(--text-primary); max-width: calc(100% - 50px); padding-top: 5px; }
.msg-content p { margin-bottom: 12px; line-height: 1.6; font-size: 15px;} .msg-content pre { background: var(--bg-sidebar); border: 1px solid var(--border); padding: 15px; border-radius: 10px; overflow-x: auto; margin: 15px 0; font-family: monospace; font-size: 13px;} .msg-content code { background: var(--hover); padding: 2px 6px; border-radius: 4px; font-family: monospace; }
.chat-img-in-bubble { max-width: 150px; max-height: 150px; border-radius: 8px; margin: 5px; object-fit: cover; display: inline-block;}
.action-bar { display: flex; gap: 10px; margin-top: 15px; } .btn-copy { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; font-weight: 500;} .btn-copy:hover { color: var(--text-primary); }

.chat-input-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 20px 20px; background: linear-gradient(180deg, transparent, var(--bg-main) 20%); }
.limit-info { font-size: 11px; color: var(--text-secondary); margin-bottom: 10px; font-weight: 600; background: var(--hover); padding: 4px 12px; border-radius: 12px;}
.input-container { width: 100%; max-width: 850px; position: relative; }
.image-preview-area { position: absolute; bottom: 100%; left: 0; margin-bottom: 15px; background: var(--bg-sidebar); border: 1px solid var(--border); padding: 10px; border-radius: 12px; display: inline-block;}
.img-prev-item { position: relative; display: inline-block; margin-right: 5px;} .img-prev-item img { height: 60px; width: 60px; border-radius: 6px; object-fit: cover; } .img-prev-item .btn-rem-small { position: absolute; top: -5px; right: -5px; background: var(--danger); color: white; width: 18px; height: 18px; border-radius: 50%; font-size: 9px; }

.minimal-input { display: flex; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 26px; padding: 8px 12px; align-items: flex-end; gap: 8px; transition: 0.3s; box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.minimal-input:focus-within { border-color: var(--text-secondary); }
.btn-action { color: var(--text-secondary); font-size: 20px; padding: 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center;} .btn-action:hover { color: var(--text-primary); background: var(--hover); }
.btn-action.active { color: var(--accent); background: rgba(59, 130, 246, 0.1); }
#chat-input { flex: 1; background: transparent; border: none; color: var(--text-primary); outline: none; resize: none; font-size: 16px; padding: 12px 5px; max-height: 180px; overflow-y: auto; line-height: 1.5; }
.btn-send { background: var(--btn-send-bg); color: var(--bg-main); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 4px;} .btn-send:hover:not(:disabled) { opacity: 0.8;} .btn-send:disabled { background: var(--border); color: var(--text-secondary); cursor: not-allowed; }

.pop-in { animation: fadeIn 0.3s ease forwards; } .scale-in { animation: scaleIn 0.2s ease forwards; } .slide-up { animation: slideUp 0.5s ease forwards; }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes scaleIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes spin { 100% { transform: rotate(360deg); } }
.typing-indicator { display: flex; gap: 5px; padding: 5px 0; align-items: center; } .typing-indicator span { width: 7px; height: 7px; background-color: var(--text-secondary); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; } .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

.mobile-only { display: none; }
@media (max-width: 768px) {
    .mobile-only { display: flex; } .sidebar { position: absolute; left: -100%; top: 0; box-shadow: 2px 0 15px rgba(0,0,0,0.3); width: 85%; max-width: 320px;} .sidebar.open { left: 0;} #sidebar-overlay.active { display: block; }
    .header-title { justify-content: flex-start; padding-left: 10px;} .chat-messages { padding: 15px 0; } .message { padding: 0 15px; } .message.user .msg-content { max-width: 95%; } .ai-avatar { display: none; } .message.ai .msg-content { max-width: 100%; padding-top: 0;}
    .chat-input-wrapper { padding: 0 15px 15px; } .minimal-input { border-radius: 20px; padding: 4px 8px;} .btn-action { padding: 8px; font-size: 18px; } #chat-input { font-size: 15px; padding: 10px 5px; }
}