* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', -apple-system, sans-serif; background: #111; color: #eee; height: 100vh; }
#app { display: flex; flex-direction: column; height: 100vh; max-width: 800px; margin: 0 auto; }
header { padding: 16px 24px; border-bottom: 1px solid #2a2a2a; }
header h1 { font-size: 18px; color: #fff; }
#messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.msg { padding: 12px 16px; border-radius: 12px; line-height: 1.6; white-space: pre-wrap; }
.msg.user { background: #2563eb; align-self: flex-end; max-width: 80%; }
.msg.bot { background: #1a1a1a; border: 1px solid #2a2a2a; align-self: flex-start; max-width: 90%; }
.turn { display: flex; flex-direction: column; gap: 16px; }
.sources { font-size: 12px; color: #888; }
#chat-form { display: flex; gap: 8px; padding: 12px 24px; border-bottom: 1px solid #2a2a2a; background: #151515; }
#query { flex: 1; padding: 12px 16px; border-radius: 10px; border: 1px solid #333; background: #1a1a1a; color: #eee; font-size: 15px; }
#send { padding: 12px 24px; border-radius: 10px; border: none; background: #10a37f; color: #fff; font-weight: 600; cursor: pointer; }
#send:disabled { opacity: .5; cursor: not-allowed; }