* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: #0f1115; color: #e6e6e6; }
#app { max-width: 720px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; }
header { display: flex; align-items: baseline; gap: .75rem; padding: 1rem; border-bottom: 1px solid #222; }
header h1 { font-size: 1rem; margin: 0; }
#status { font-size: .8rem; color: #8a8; }
#messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.msg { padding: .5rem .75rem; border-radius: .5rem; max-width: 85%; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: #2a3550; }
.msg.assistant { align-self: flex-start; background: #1c1f26; }
#composer { display: flex; gap: .5rem; padding: 1rem; border-top: 1px solid #222; }
#input { flex: 1; padding: .6rem; background: #1c1f26; color: #e6e6e6; border: 1px solid #333; border-radius: .4rem; }
#send { padding: .6rem 1rem; background: #3a5; color: #04210f; border: 0; border-radius: .4rem; cursor: pointer; }
#send:disabled, #input:disabled { opacity: .5; cursor: not-allowed; }