* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; background: #0f1420; color: #e6e9f0; display: flex; flex-direction: column; height: 100vh; }
header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #161d2e; border-bottom: 1px solid #26304a; }
.brand { font-size: 17px; }
nav a { color: #9fb0d0; text-decoration: none; margin-left: 14px; }
nav a.on { color: #fff; font-weight: 600; }
nav form.inline { display: inline; margin-left: 14px; }
.linkish { background: none; border: none; color: #9fb0d0; cursor: pointer; font: inherit; padding: 0; }
main#chat { flex: 1; overflow-y: auto; padding: 16px; }
main.page { flex: 1; overflow-y: auto; padding: 16px; max-width: 860px; width: 100%; margin: 0 auto; }
.msg { max-width: 78%; margin: 6px 0; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { background: #2b5cd9; color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.msg.bob { background: #1d2740; border-bottom-left-radius: 4px; }
.msg.system { background: none; color: #8b97b3; font-size: 13px; text-align: center; max-width: 100%; }
.msg .t { display: block; font-size: 11px; opacity: .55; margin-top: 4px; }
.thinking { padding: 4px 18px 10px; color: #9fb0d0; font-style: italic; }
footer { display: flex; gap: 8px; padding: 10px 12px; background: #161d2e; border-top: 1px solid #26304a; }
footer textarea { flex: 1; resize: none; background: #0f1420; color: #e6e9f0; border: 1px solid #2c3a5c; border-radius: 10px; padding: 10px 12px; font: inherit; }
footer button, .login-card button { background: #2b5cd9; color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font: inherit; cursor: pointer; }
.login-body { justify-content: center; align-items: center; display: flex; }
.login-card { background: #161d2e; padding: 34px 30px; border-radius: 16px; width: 320px; display: flex; flex-direction: column; gap: 12px; border: 1px solid #26304a; }
.login-card h1 { margin: 0; text-align: center; }
.login-card .sub { margin: 0 0 8px; text-align: center; color: #8b97b3; }
.login-card input { background: #0f1420; border: 1px solid #2c3a5c; border-radius: 10px; color: #e6e9f0; padding: 11px 12px; font: inherit; }
.err { color: #ff7b7b; text-align: center; margin: 0; }
.sub.small { font-size: 12px; }
.card { background: #161d2e; border: 1px solid #26304a; border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pill { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: #26304a; text-transform: uppercase; letter-spacing: .4px; }
.pill.approved, .pill.built { background: #1d5c3a; }
.pill.rejected, .pill.failed { background: #6b2430; }
.pill.building { background: #7a5b16; }
.plan { background: #0f1420; padding: 10px; border-radius: 8px; overflow-x: auto; }
.decide { display: flex; gap: 10px; margin-top: 10px; }
.decide .ok { background: #1d8a4e; color: #fff; border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; }
.decide .no { background: #45231f; color: #ffb4a8; border: 1px solid #6b2430; border-radius: 8px; padding: 8px 16px; cursor: pointer; }
.autopilot { background: #161d2e; border: 1px dashed #3a4a72; border-radius: 12px; padding: 12px 16px; }
.dim { color: #8b97b3; font-size: 13px; }
@media (max-width: 600px) { .msg { max-width: 92%; } }