* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
body { background-color: #343541; color: #ececf1; height: 100vh; overflow: hidden; }
.app-layout { display: flex; height: 100vh; }
.sidebar { width: 260px; background-color: #202123; padding: 20px; display: flex; flex-direction: column; }
.logo { font-size: 1.2rem; font-weight: bold; margin-bottom: 30px; }
.logo span { color: #10a37f; }
.new-chat { background: transparent; border: 1px solid #565869; color: white; padding: 12px; border-radius: 6px; cursor: pointer; text-align: left; margin-bottom: 30px; transition: 0.2s; }
.new-chat:hover { background: #2a2b32; }
.history-label { font-size: 0.8rem; color: #8e8ea0; margin-bottom: 10px; }
.history-item { padding: 10px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; margin-bottom: 5px; }
.history-item:hover { background: #2a2b32; }
.chat-area { flex: 1; display: flex; flex-direction: column; position: relative; }
.chat-messages { flex: 1; padding: 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 30px; }
.message { display: flex; gap: 20px; max-width: 800px; margin: 0 auto; width: 100%; }
.user-message { flex-direction: row-reverse; }
.avatar { width: 40px; height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; }
.ai-message .avatar { background: #10a37f; color: white; }
.user-message .avatar { background: #5436da; color: white; }
.bubble { padding: 15px; border-radius: 8px; line-height: 1.5; font-size: 1rem; max-width: 80%; }
.ai-message .bubble { background: #444654; }
.user-message .bubble { background: #343541; border: 1px solid #565869; }
.chat-input-wrapper { padding: 30px; background: #343541; border-top: 1px solid #444654; display: flex; justify-content: center; }
.chat-input { width: 100%; max-width: 760px; padding: 15px 20px; border-radius: 8px; border: 1px solid #565869; background: #40414f; color: white; font-size: 1rem; outline: none; }
.send-btn { margin-left: -80px; background: transparent; border: none; color: #10a37f; font-weight: bold; padding: 0 20px; cursor: pointer; }