:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color: #171717; background: #f4f4f5; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 920px; margin: 0 auto; padding: 28px 16px; }
header { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:16px; }
h1 { margin:0; font-size:28px; } header p { margin:4px 0 0; color:#666; }
.card { background:white; border:1px solid #ddd; border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.04); }
.login { margin-bottom:16px; } .login h2 { margin-top:0; font-size:18px; }
.login form { display:flex; gap:8px; flex-wrap:wrap; }
input, textarea, button { font:inherit; }
input, textarea { border:1px solid #ccc; border-radius:10px; padding:10px 12px; }
.login input { flex:1; min-width:180px; }
button { border:0; border-radius:10px; padding:10px 14px; cursor:pointer; background:#18181b; color:white; }
button.secondary { background:#e4e4e7; color:#18181b; }
button.danger { background:#7f1d1d; }
.badge { padding:7px 10px; border-radius:999px; background:#e4e4e7; font-size:13px; }
.badge.ok { background:#dcfce7; color:#166534; }
.messages { height:55vh; min-height:360px; overflow:auto; padding:4px; display:flex; flex-direction:column; gap:10px; }
.msg { padding:10px 12px; border-radius:13px; max-width:82%; white-space:pre-wrap; line-height:1.45; }
.msg.user { align-self:flex-end; background:#18181b; color:white; }
.msg.assistant { align-self:flex-start; background:#f4f4f5; }
.msg.system { align-self:center; font-size:13px; color:#666; }
.composer { display:grid; grid-template-columns:auto 1fr auto; gap:8px; margin-top:12px; }
.composer textarea { resize:vertical; width:100%; }
.voice-toggle { display:block; margin-top:8px; font-size:13px; color:#555; }
.approval { margin:12px 0; border:1px solid #f59e0b; background:#fffbeb; border-radius:12px; padding:12px; }
.approval pre { white-space:pre-wrap; overflow:auto; font-size:12px; }
.approval .actions { display:flex; gap:8px; }
.hidden { display:none; }
@media (max-width:640px) { .messages { height:60vh; } .msg { max-width:94%; } }