:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17211b;
  background: #eef1ec;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, textarea { font: inherit; }
.app { width: min(980px, calc(100% - 32px)); margin: 32px auto 64px; }
.topbar, .intro, .chat, .composer {
  background: #fff;
  border: 1px solid #d8ded7;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(31, 48, 37, .05);
}
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 26px; }
.eyebrow { color:#66746a; text-transform:uppercase; font-size:12px; letter-spacing:.16em; }
h1 { margin:2px 0 0; font-size:28px; }
.status { font-size:13px; color:#66746a; }
.status.ok { color:#2c6c43; }
.status.bad { color:#a73d32; }
.intro { margin-top:14px; padding:18px 22px; }
.intro p { margin:0 0 14px; color:#4d5a51; }
.quick { display:flex; flex-wrap:wrap; gap:8px; }
.quick button {
  border:1px solid #ccd5ce; background:#f8faf8; border-radius:999px; padding:8px 12px; cursor:pointer;
}
.quick button:hover { background:#edf3ee; }
.chat { min-height:320px; margin-top:14px; padding:18px; }
.empty {
  display:grid; place-items:center; min-height:280px; color:#7b887f; text-align:center; padding:40px;
}
.message { padding:16px 18px; border-radius:14px; margin-bottom:12px; }
.message.user { background:#edf3ee; margin-left:12%; }
.message.assistant { background:#f7f7f5; margin-right:7%; }
.message-role { font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:#718078; margin-bottom:7px; }
.message-body { white-space:pre-wrap; line-height:1.55; }
.trace { margin-top:12px; font-size:13px; color:#5d6b62; }
.trace summary { cursor:pointer; }
.trace-body { margin-top:8px; border-top:1px solid #dce2dd; padding-top:8px; }
.trace-item { margin:5px 0; }
.trace-item.bad { color:#a73d32; }
.composer { margin-top:14px; padding:16px; }
textarea {
  width:100%; resize:vertical; border:0; outline:none; min-height:98px; line-height:1.5; color:#17211b;
}
.composer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #e3e7e4; padding-top:12px; }
.hint { color:#879189; font-size:12px; }
.send {
  border:0; border-radius:11px; background:#214f35; color:#fff; padding:10px 18px; cursor:pointer;
}
.send:disabled { opacity:.55; cursor:default; }
@media (max-width:700px) {
  .app { width:min(100% - 18px, 980px); margin-top:10px; }
  .topbar { align-items:flex-start; flex-direction:column; gap:8px; }
  .message.user,.message.assistant { margin-left:0; margin-right:0; }
  .hint { display:none; }
}