:root { color-scheme: light; font-family: Inter, Arial, sans-serif; background:#f5f8fa; color:#102a43; } * { box-sizing:border-box; } body { margin:0; } .shell { width:min(760px,100%); min-height:100vh; margin:auto; padding:48px 24px; display:flex; flex-direction:column; gap:22px; } .eyebrow { color:#047481; font-weight:700; font-size:.8rem; letter-spacing:.12em; margin:0; } h1 { margin:.3rem 0; font-size:2rem; } .notice { font-size:.92rem; line-height:1.45; color:#52606d; } .chat { flex:1; min-height:300px; border:1px solid #d9e2ec; border-radius:16px; background:#fff; padding:18px; box-shadow:0 8px 24px #102a4310; } #messages { display:flex; flex-direction:column; gap:12px; } #messages p { max-width:82%; margin:0; padding:12px 14px; border-radius:12px; line-height:1.45; white-space:pre-wrap; } .assistant { align-self:flex-start; background:#e6fcf5; } .user { align-self:flex-end; background:#d9e2ec; } label { display:block; font-weight:600; margin-bottom:8px; } .composer { display:flex; gap:10px; } textarea { min-height:54px; flex:1; resize:vertical; border:1px solid #9fb3c8; border-radius:10px; padding:10px; font:inherit; } button { align-self:flex-end; border:0; border-radius:10px; background:#047481; color:#fff; padding:12px 18px; font:inherit; font-weight:600; cursor:pointer; } button:hover { background:#035d66; } #status { min-height:1.2rem; color:#52606d; margin:6px 0 0; } @media (max-width:520px) { .shell { padding:28px 16px; } .composer { flex-direction:column; } button { width:100%; } }