:root { color-scheme: light; font-family: -apple-system, Segoe UI, sans-serif; }
body { margin: 0; background: #f7f7f5; color: #1a1a1a; }
.layout { max-width: 1100px; margin: 0 auto; padding: 24px; }
header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
header h1 { font-size: 20px; margin: 0; }
.subtitle { color: #888; font-size: 13px; }
main { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.chat-panel, .approvals-panel {
  background: #fff; border: 1px solid #e5e5e2; border-radius: 10px; padding: 16px;
}
.log { height: 480px; overflow-y: auto; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 8px 12px; border-radius: 8px; max-width: 90%; font-size: 14px; line-height: 1.4; }
.msg.user { background: #eef2ff; align-self: flex-end; }
.msg.agent { background: #f2f2ef; align-self: flex-start; white-space: pre-wrap; }
.msg.tool { background: #fff7e6; align-self: flex-start; font-size: 12px; color: #7a5b00; }
#composer { display: flex; gap: 8px; }
#messageInput { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; }
button { padding: 8px 14px; border: none; border-radius: 6px; background: #1a1a1a; color: #fff; cursor: pointer; }
.approvals-panel h2 { font-size: 15px; margin: 0 0 4px; }
.hint { font-size: 12px; color: #888; margin: 0 0 12px; }
.approval-card { border: 1px solid #eadfa0; background: #fffbea; border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: 13px; }
.approval-card .actions { display: flex; gap: 8px; margin-top: 8px; }
.approval-card button.deny { background: #b3261e; }