:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #12151d;
  color: #edf2f7;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, textarea { font: inherit; }
button { border: 0; border-radius: 6px; cursor: pointer; background: #3965d8; color: #fff; padding: .55rem .75rem; }
button:hover { background: #4777f1; }
input, textarea { width: 100%; border: 1px solid #3b4351; border-radius: 6px; background: #1a202b; color: inherit; padding: .55rem; }
textarea { min-height: 7rem; resize: vertical; }
label { display: grid; gap: .35rem; }
code { background: #252d3a; padding: .1rem .25rem; border-radius: 4px; }

.topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; border-bottom: 1px solid #303846; background: #171c26; }
.link-button { background: transparent; color: #b9cbff; padding: .35rem .45rem; }
.link-button:hover { background: #252d3a; }
.layout { min-height: calc(100vh - 56px); display: grid; grid-template-columns: 290px minmax(0, 1fr); }
aside { background: #171c26; border-right: 1px solid #303846; padding: 1rem; }
aside section + section { margin-top: 1.5rem; }
h1, h2 { margin-top: 0; }
h2 { font-size: 1rem; color: #bac4d5; }
nav { display: grid; gap: .3rem; margin-bottom: .75rem; }
.nav-item { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; color: #dbe4f4; }
.nav-item.active, .nav-item:hover { background: #2a354a; }
.compact-form { display: grid; gap: .5rem; }
.compact-form input { font-size: .85rem; }
.compact-form button { font-size: .85rem; }
.chat { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; max-width: 1100px; width: 100%; margin: 0 auto; }
.chat > header { border-bottom: 1px solid #303846; }
.chat > header h1 { margin-bottom: .25rem; }
.chat > header p { color: #9ca9bd; margin-top: 0; font-size: .85rem; }
.messages { display: grid; gap: .8rem; }
.message { border-radius: 8px; padding: .75rem 1rem; max-width: 90%; background: #1d2634; }
.message.user { justify-self: end; background: #263d78; }
.message header { font-weight: 600; color: #c7d5ec; margin-bottom: .35rem; }
.message pre, .task pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.task { border-left: 3px solid #8a98ae; padding: .6rem .8rem; background: #191f2a; }
.task-running { border-color: #4b80ff; }
.task-succeeded { border-color: #35b971; }
.task-failed, .task-cancelled { border-color: #d95d67; }
.badge { font-size: .75rem; margin-left: .6rem; color: #b7c3d7; }
.error { color: #ffabb2; }
.empty { color: #aeb9c8; margin: auto; text-align: center; }
#prompt-form { display: grid; gap: .65rem; margin-top: auto; }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 1rem; }
.login-card { width: min(100%, 400px); background: #1a202b; border: 1px solid #303846; border-radius: 10px; padding: 2rem; }
.login-card form, dialog form { display: grid; gap: 1rem; }
dialog { color: inherit; background: #1a202b; border: 1px solid #3b4351; border-radius: 10px; width: min(100% - 2rem, 420px); }
dialog::backdrop { background: rgb(0 0 0 / 60%); }

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  aside { border-right: 0; border-bottom: 1px solid #303846; }
  .chat { padding: 1rem; }
  .message { max-width: 100%; }
}