:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #0b1220; color: #eef4ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #173052, #0b1220 55%); }
button, input, textarea { font: inherit; min-height: 48px; border-radius: 12px; border: 1px solid #365276; }
button { padding: .75rem 1.1rem; border: 0; background: #57d3a0; color: #07130f; font-weight: 700; cursor: pointer; }
.secondary { background: #243650; color: #eef4ff; }
.login-page { display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(100%, 420px); padding: 2rem; background: #101d31; border: 1px solid #294363; border-radius: 24px; box-shadow: 0 24px 80px #0008; }
.eyebrow { color: #57d3a0; font-weight: 800; letter-spacing: .08em; }
.muted { color: #aabbd1; }
.error { padding: .8rem; color: #ffd7d7; background: #682c35; border-radius: 10px; }
label { display: grid; gap: .45rem; margin: 1rem 0; }
input, textarea { width: 100%; padding: .8rem; background: #0b1525; color: inherit; }
.topbar { min-height: 72px; padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #294363; background: #0c1728e8; }
.topbar small { display: block; color: #aabbd1; margin-top: .2rem; }
.workspace { display: grid; grid-template-columns: 280px 1fr; max-width: 1200px; margin: auto; min-height: calc(100vh - 72px); }
aside { padding: 1rem; border-right: 1px solid #294363; }
#conversations { display: grid; gap: .5rem; }
.conversation { width: 100%; text-align: left; background: #172842; color: inherit; }
.chat { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
#messages { padding: 1rem; overflow: auto; }
.message { max-width: 80%; padding: .8rem 1rem; border-radius: 16px; background: #172842; }
.message.user { margin-left: auto; background: #245b52; }
#question-form { padding: 1rem; border-top: 1px solid #294363; background: #0c1728; }
.actions { display: flex; gap: .5rem; justify-content: flex-end; }
@media (max-width: 720px) {
  .workspace { grid-template-columns: 1fr; }
  aside { border-right: 0; border-bottom: 1px solid #294363; max-height: 180px; overflow: auto; }
  .message { max-width: 92%; }
}