* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #000; color: #fff; display: flex; height: 100vh; overflow: hidden; }
#sidebar { width: 280px; background: #000; padding: 20px; border-right: 1px solid #333; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
#sidebar h2 { margin: 0; font-size: 1.8em; }
#key-section { background: #111; padding: 12px; border-radius: 12px; border: 1px solid #333; }
.input-wrapper { position: relative; margin-bottom: 8px; }
#api-key-input { width: 100%; padding: 10px 30px 10px 10px; background: #1f1f1f; border: 1px solid #333; border-radius: 8px; color: #fff; }
#toggle-key { position: absolute; right: 8px; top: 8px; background: none; border: none; color: #aaa; cursor: pointer; }
#save-key-btn, #export-chats, #import-label { width: 100%; padding: 10px; background: #1f1f1f; border: 1px solid #333; color: #fff; border-radius: 8px; cursor: pointer; text-align: center; }
#import-chats { display: none; }
#chat-actions { display: flex; gap: 8px; }
#chat-actions button, #import-label { flex: 1; }
#key-status { margin: 8px 0 0; font-size: 0.9em; color: #aaa; }

#new-chat-btn { padding: 14px; background: #1f1f1f; border: 1px solid #333; color: #fff; font-weight: bold; border-radius: 12px; cursor: pointer; transition: background 0.2s; }
#new-chat-btn:hover { background: #333; }

#chat-list { list-style: none; padding: 0; margin: 0; flex: 1; }
.chat-item { display: flex; align-items: center; padding: 12px; cursor: pointer; border-radius: 10px; margin-bottom: 8px; transition: background 0.2s; position: relative; }
.chat-item:hover { background: #111; }
.chat-item.active { background: #222; font-weight: bold; }
.chat-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item .delete-btn { opacity: 0; font-size: 1.2em; cursor: pointer; transition: all 0.2s; }
.chat-item:hover .delete-btn { opacity: 1; }
.chat-item .delete-btn:hover { color: #ff4444; transform: rotate(90deg); }

#main { flex: 1; display: flex; flex-direction: column; }
#header { padding: 15px; border-bottom: 1px solid #333; display: flex; align-items: center; gap: 15px; }
#model-select { padding: 10px; background: #1f1f1f; border: 1px solid #333; border-radius: 8px; color: #fff; flex: 1; }
#share-chat-btn { padding: 10px 16px; background: #1f1f1f; border: 1px solid #333; color: #fff; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
#share-chat-btn:hover { background: #333; }

#chat-container { flex: 1; overflow-y: auto; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.message { max-width: 80%; padding: 18px 24px; border-radius: 24px; line-height: 1.6; animation: fadeIn 0.3s; word-wrap: break-word; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.message.user { align-self: flex-end; background: #222; border-bottom-right-radius: 6px; }
.message.assistant { align-self: flex-start; background: #111; border-bottom-left-radius: 6px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

pre { position: relative; border-radius: 12px; overflow: hidden; background: #0a0a0a !important; }
.copy-btn { position: absolute; top: 8px; right: 8px; padding: 6px 12px; background: #1f1f1f; border: 1px solid #333; border-radius: 6px; color: #fff; cursor: pointer; opacity: 0; transition: all 0.2s; font-size: 0.9em; }
pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: #333; }
.copy-btn.copied { background: #0f0; color: #000; }

.typing-indicator { align-self: flex-start; background: #111; border-radius: 24px; border-bottom-left-radius: 6px; padding: 18px 24px; color: #aaa; display: flex; align-items: center; gap: 10px; max-width: 80%; }
.dots { display: flex; gap: 6px; }
.dot { width: 8px; height: 8px; background: #aaa; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

#input-area { display: flex; padding: 20px 32px; border-top: 1px solid #333; gap: 12px; }
#input { flex: 1; padding: 16px; background: #1f1f1f; border: 1px solid #333; border-radius: 16px; color: #fff; resize: none; height: 80px; font-size: 1em; }
#input:disabled { opacity: 0.5; }
#send-btn { padding: 0 32px; background: #1f1f1f; border: 1px solid #333; color: #fff; font-weight: bold; border-radius: 16px; cursor: pointer; transition: background 0.2s; }
#send-btn:hover:not(:disabled) { background: #333; }
#send-btn:disabled { opacity: 0.5; cursor: not-allowed; }