*{box-sizing:border-box}
body{margin:0;background:#05070d;color:white;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app{height:100vh;display:grid;grid-template-columns:310px 1fr}
aside{padding:24px;background:rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.12)}
h1{margin:0;font-size:28px}
p{color:#9aa4b2}
label{display:block;margin-top:18px;color:#cbd5e1;font-size:14px}
input,select,textarea,button{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#111827;color:white;padding:12px;margin-top:8px}
button{background:#0a84ff;border:none;font-weight:700;cursor:pointer}
main{display:flex;flex-direction:column;height:100vh}
.chat{flex:1;overflow:auto;padding:28px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:900px;padding:16px 18px;border-radius:18px;line-height:1.6;white-space:pre-wrap}
.user{align-self:flex-end;background:#0a84ff}
.ai{align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.reason{margin-top:12px;padding:10px;border-radius:12px;background:rgba(0,0,0,.28);color:#b8c2d1;font-size:13px}
.composer{display:grid;grid-template-columns:1fr 120px;gap:12px;padding:18px 28px;border-top:1px solid rgba(255,255,255,.1)}
textarea{height:64px;resize:none}