body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #121212; color: white; margin: 0; }
.container { text-align: center; padding-top: 100px; }
.btn-launch { background: #00ff88; color: black; padding: 15px 30px; text-decoration: none; border-radius: 30px; font-weight: bold; }

.chat-wrapper { max-width: 600px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; }
.header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: #1f1f1f; }
.header a { color: #00ff88; text-decoration: none; }

.chat-box { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.message { display: flex; width: 100%; }
.message.user { justify-content: flex-end; }
.message.assistant { justify-content: flex-start; }

.bubble { max-width: 75%; padding: 12px 16px; border-radius: 18px; line-height: 1.4; }
.user .bubble { background: #007bff; color: white; border-bottom-right-radius: 2px; }
.assistant .bubble { background: #2d2d2d; color: #eee; border-bottom-left-radius: 2px; }

.input-area { padding: 20px; background: #1f1f1f; display: flex; gap: 10px; }
.input-area input { flex: 1; padding: 12px; border-radius: 25px; border: none; background: #333; color: white; outline: none; }
.input-area button { background: #00ff88; border: none; padding: 0 20px; border-radius: 25px; cursor: pointer; font-weight: bold; }