/* The assistant: chat, cards, rendered Markdown. */
.chat { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-4); min-height: 60vh; }
.chat-side { display: flex; flex-direction: column; gap: var(--sp-3); }
.chat-list li { padding: 0; }
.chat-list li.current { background: var(--surface-2); border-radius: var(--radius-control); }
.chat-main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.chat-log { flex: 1; min-height: 360px; max-height: calc(100vh - 340px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding-right: var(--sp-2); }
.bubble { max-width: 78ch; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-widget); border: 1px solid var(--line); overflow-wrap: anywhere; }
.bubble.user { align-self: flex-end; background: var(--surface-2); }
.bubble.assistant { align-self: flex-start; }
.md p, .md ul, .md ol, .md pre { margin: 0 0 var(--sp-3); }
.md p:last-child, .md ul:last-child, .md ol:last-child, .md pre:last-child { margin-bottom: 0; }
.md ul, .md ol { padding-left: var(--sp-5); }
.md pre { padding: var(--sp-3); background: var(--surface-2); border-radius: var(--radius-control); overflow-x: auto; }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.md h4 { margin: 0 0 var(--sp-2); }
.tool-card { align-self: flex-start; max-width: 78ch; font-size: var(--fs-sm); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-control); padding: var(--sp-2) var(--sp-3); }
.tool-card.failed { border-color: var(--danger, #c4504a); }
.tool-card summary { cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); }
.tool-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--sp-2) 0; font-size: var(--fs-xs); }
.pending-card { align-self: stretch; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--accent); border-radius: var(--radius-widget); flex-wrap: wrap; }
.pending-card .grow { flex: 1; min-width: 200px; }
.chat-input { display: flex; gap: var(--sp-3); align-items: flex-end; }
.chat-input textarea { flex: 1; resize: vertical; }
.tool-card .badge { margin-left: var(--sp-2); }