/* AI channels (agent channels, client/js/agentChannel.js): the roster in the member list's place
   (the members pane on phones) with agent cards, the Usage table and People, an agent's dashboard
   opened from its card, the expanded roster over the chat, agents' messages drawn as the agent,
   request cards in the chat, steer marks, mention pills and the composer's hint and notice.
   Colours come from the theme's tokens, so every theme (and light) follows. */
/* The panel's width: --agent-pane once dragged (the handle on its left edge, kept per browser),
   never under 280px and never leaving the chat under 320px when the window narrows. */
.app.agent-dashboard { grid-template-columns: 72px 240px minmax(0, 1fr) clamp(280px, var(--agent-pane, clamp(320px, 34%, 520px)), max(280px, calc(100% - 632px))); }
.app.agent-dashboard .member-list { position: relative; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.app.agent-dashboard.agent-expanded { grid-template-columns: 72px 240px minmax(0, 1fr); }
.app.agent-dashboard.agent-expanded > .chat { display: none; }
@media (max-width: 1000px) {
  .app.agent-dashboard { grid-template-columns: 72px 220px minmax(0, 1fr) clamp(280px, var(--agent-pane, 300px), max(280px, calc(100% - 612px))); }
  .app.agent-dashboard .member-list { display: flex; }
  .app.agent-dashboard.agent-expanded { grid-template-columns: 72px 220px minmax(0, 1fr); }
}
html[data-layout="phone"] .app.agent-dashboard { --members: min(calc(100% - 24px), 480px); }
html[data-layout="phone"] .agent-expand { display: none; }
.agent-resize { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 2; cursor: col-resize; touch-action: none; }
.agent-resize::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; transition: background 0.15s; }
.agent-resize:hover::after, .agent-resize:focus-visible::after, body.agent-resizing .agent-resize::after { background: var(--accent); }
.agent-resize:focus-visible { outline: none; }
body.agent-resizing { cursor: col-resize; user-select: none; }
.app.agent-expanded .agent-resize, html[data-layout="phone"] .agent-resize { display: none; }

.agent-dash { display: flex; flex-direction: column; min-height: 0; height: 100%; color: var(--text); }
.agent-dash-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; border-bottom: 1px solid var(--border); }
.agent-dash-head h2 { margin: 0; font-size: 15px; color: var(--text-strong); }
.agent-spacer { flex: 1; }
.agent-start-button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-strong); font-size: 13px; }
.agent-start-button:hover { background: var(--bg-hover); }
.agent-start { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.agent-start[hidden] { display: none; }
.agent-start-form, .agent-pair-form { display: flex; flex-direction: column; gap: 8px; }
.agent-start-form label, .agent-pair-form label { display: flex; flex-direction: column; gap: 3px; }
.agent-start-form select, .agent-start-form input, .agent-pair-form input, .agent-pair-form select { padding: 6px 8px; border-radius: 6px; background: var(--bg-input); color: var(--text-strong); border: 1px solid var(--border); }
.agent-pair-form p { margin: 0; }

/* Machines (client/js/agentMachines.js): Add a machine (This device | Server or VM), the open
   enrollment tokens, your machines with their resource lines, and the token's dialog. */
.agent-box-title { margin: 0 0 6px; font-size: 13px; color: var(--text-strong); }
.agent-add-tabs { padding: 0; margin-bottom: 8px; }
.agent-tokens h5 { margin: 10px 0 4px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
.agent-tokens ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.agent-tokens li { display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }
.agent-tokens button, .agent-machine-actions button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-strong); font-size: 12px; }
.agent-tokens button.danger-text, .agent-machine-actions button.danger-text { color: var(--danger); }
.agent-machines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.agent-machine { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-panel); min-width: 0; }
.agent-machine p { margin: 0; overflow-wrap: anywhere; }
.agent-machine-head { display: flex; align-items: center; gap: 8px; }
.agent-machine-name { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.agent-machine-resources, .agent-card-resources { font-variant-numeric: tabular-nums; }
.agent-machine-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.agent-token-modal { width: min(640px, 94vw); max-height: 90vh; overflow-y: auto; }
.agent-token code { font-size: 13px; user-select: all; }
.agent-snippet { margin-top: 10px; }
.agent-snippet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-snippet h3 { margin: 0; font-size: 13px; color: var(--text-strong); }
.agent-snippet .agent-preview { max-height: 220px; white-space: pre; overflow: auto; }
.agent-token-status { margin: 12px 0 0; color: var(--text-muted); }
.agent-token-status.enrolled { color: var(--online); }
.agent-rename-modal { width: min(420px, 94vw); }
.agent-command { display: flex; align-items: center; gap: 6px; background: var(--bg-input); border-radius: 6px; padding: 6px 8px; }
.agent-command code { flex: 1; overflow-wrap: anywhere; font-size: 12px; }
.agent-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.agent-form-actions .link-button { margin-right: auto; }

.agent-totals { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* The roster: agents, then people; one scroll. */
.agent-roster { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.agent-roster[hidden], .agent-usage[hidden] { display: none; }
.agent-section-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.agent-section-head h3 { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.agent-people-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.agent-people-list { padding: 0 4px 12px; }
.agent-people { border-top: 1px solid var(--border); }
.agent-empty { padding: 12px; margin: 0; }

.agent-cards { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
.app.agent-expanded .agent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.agent-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-panel); min-width: 0; }
.agent-card.ended { opacity: 0.75; }
.agent-card.needs-you { border-color: var(--warning); box-shadow: 0 0 0 1px var(--warning); }
.agent-card p { margin: 0; }
.agent-card-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.agent-card-head:hover .agent-card-handle, .agent-card-head:focus-visible .agent-card-handle { text-decoration: underline; }
.agent-card-names { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.agent-card-handle { font-weight: 700; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-card-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-needs-you { align-self: flex-start; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; background: var(--warning); color: #000; }
.agent-card-activity { color: var(--text-strong); overflow-wrap: anywhere; }
.agent-card-activity.agent-warning { color: var(--warning); }
.agent-card-machine { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-card-tasks { display: flex; align-items: center; gap: 8px; }
.agent-card-tasks progress { flex: 1; height: 6px; accent-color: var(--online); }
.agent-card-figures { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.agent-card-figures dt { color: var(--text-muted); }
.agent-card-figures dd { margin: 0; overflow-wrap: anywhere; }
.agent-card-times { font-variant-numeric: tabular-nums; }
.agent-card-flags { display: flex; gap: 4px; flex-wrap: wrap; }
.agent-card-flags .agent-flag { margin-left: 0; }
.agent-card-requests { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

/* The Usage table (expanded): it scrolls sideways where it doesn't fit. */
.agent-usage { padding: 0 10px 10px; }
.agent-usage h4 { margin: 4px 0 6px; font-size: 13px; color: var(--text-strong); }
.agent-usage-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.agent-usage-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agent-usage-table th, .agent-usage-table td { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--border); }
.agent-usage-table th:first-child, .agent-usage-table td:nth-child(2) { text-align: left; }
.agent-usage-table thead th { position: sticky; top: 0; background: var(--bg-panel); }
.agent-usage-table thead .link-button { color: var(--text-muted); font-weight: 700; }
.agent-usage-table thead .link-button.active { color: var(--text-strong); }
.agent-usage-table tr.ended { color: var(--text-muted); }

/* A CLI's avatar (cards, agents' messages, reply previews, the autocomplete). */
.agent-avatar { color: #fff; background: var(--accent); }
.agent-avatar.cli-claude, .mention-ac-agent-icon.cli-claude { background: #b0603c; }
.agent-avatar.cli-codex, .mention-ac-agent-icon.cli-codex { background: #2f7d68; }
.agent-avatar.cli-grok, .mention-ac-agent-icon.cli-grok { background: #4a5568; }
.agent-detail-title .agent-avatar { width: 28px; height: 28px; }
.agent-detail-nav { padding: 8px 12px 0; }
.agent-back { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 2px; border: 0; border-radius: 6px; background: none; color: var(--text-muted); font-size: 13px; }
.agent-back:hover { background: var(--bg-hover); color: var(--text-strong); }

.agent-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.agent-detail[hidden] { display: none; }
.agent-detail-head { padding: 10px 12px 4px; }
.agent-detail-head p { margin: 2px 0; }
.agent-detail-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agent-detail-title h3 { margin: 0; font-size: 15px; color: var(--text-strong); overflow-wrap: anywhere; }
.agent-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--bg-panel); border: 1px solid var(--border); }
.agent-chip:is(.s-working, .s-starting) { color: var(--online); }
.agent-chip:is(.s-awaiting_approval, .s-waiting_input, .s-hooks_missing) { color: var(--warning); }
.agent-chip.s-failed { color: var(--danger); }
.agent-elapsed { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.agent-warning { color: var(--warning); }
.agent-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 12px 8px; }
.agent-actions:empty { display: none; }
.agent-actions button, .agent-graph-bar button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-strong); font-size: 13px; }
.agent-actions button:hover, .agent-graph-bar button:hover { background: var(--bg-hover); }
.agent-actions button.danger-text { color: var(--danger); }
.agent-graph-bar button.active { background: var(--bg-active); }

.agent-approvals { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.agent-approvals:empty { display: none; }
.agent-approval { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.agent-approval.waiting { border-style: dashed; }
.agent-preview { margin: 0; max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--bg-input); padding: 6px 8px; border-radius: 6px; }
.agent-approval-options { display: flex; gap: 6px; flex-wrap: wrap; }
.agent-approval-options button { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-strong); }
.agent-approval-options button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.agent-approval-options button.danger-text { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.agent-approval-options button:disabled { opacity: 0.6; cursor: default; }
.agent-question { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.agent-question legend { padding: 0; margin-bottom: 2px; color: var(--text-strong); }
.agent-question-header { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 700; background: var(--bg-panel); border: 1px solid var(--border); }
.agent-question-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-question-option { display: flex; align-items: baseline; gap: 6px; cursor: pointer; }
.agent-question-option > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.agent-question-label { color: var(--text-strong); }
.agent-question-other, .agent-approval-message { padding: 5px 8px; border-radius: 6px; background: var(--bg-input); color: var(--text-strong); border: 1px solid var(--border); font: inherit; font-size: 13px; }
.agent-approval-message { resize: vertical; }
.agent-approval-error { margin: 0; color: var(--danger); }

.agent-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.agent-tabs button { border: 0; background: none; color: var(--text-muted); padding: 6px 8px; border-bottom: 2px solid transparent; font-size: 13px; white-space: nowrap; }
.agent-tabs button.active { color: var(--text-strong); border-bottom-color: var(--accent); }
.agent-tab-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
.agent-tab-body h4 { margin: 8px 0 6px; font-size: 13px; color: var(--text-strong); }

.agent-graph-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.agent-graph-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-chat); max-height: 60vh; }
.app.agent-expanded .agent-graph-scroll { max-height: none; }
.agent-graph { display: block; }
.agent-graph-scroll.fit .agent-graph { max-width: 100%; height: auto; }
.agent-graph text { fill: var(--text-strong); font-size: 13px; font-family: inherit; }
.agent-graph text.sub { fill: var(--text-muted); font-size: 11px; }
.agent-graph text.flag { fill: var(--danger); font-size: 12px; font-weight: 700; }
.agent-node { cursor: pointer; outline: none; }
.agent-node rect { fill: var(--bg-panel); stroke: var(--border); stroke-width: 1.5; }
.agent-node.s-working rect { stroke: var(--online); }
.agent-node.s-failed rect { stroke: var(--danger); }
.agent-node.missing rect { stroke-dasharray: 4 3; }
.agent-node.selected rect, .agent-node:focus-visible rect { stroke: var(--accent); stroke-width: 3; }
.agent-edge { cursor: pointer; outline: none; }
.agent-edge path { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.agent-edge path.hit { stroke: transparent; stroke-width: 12; }
.agent-edge.side path:not(.hit) { stroke-dasharray: 5 4; }
.agent-edge.selected path:not(.hit), .agent-edge:focus-visible path:not(.hit) { stroke: var(--accent); stroke-width: 2.5; }
.agent-edge-count rect { fill: var(--bg-sidebar); stroke: var(--border); }
.agent-edge-count text { font-size: 11px; fill: var(--text); }

.agent-pick { margin-top: 10px; }
.agent-figures { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 6px 0; font-size: 13px; }
.agent-figures dt { color: var(--text-muted); }
.agent-figures dd { margin: 0; overflow-wrap: anywhere; }
.agent-exchanges { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.agent-exchanges li { padding: 6px 8px; border-radius: 6px; background: var(--bg-panel); overflow-wrap: anywhere; }
.agent-flag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--danger); border: 1px solid currentColor; }
.agent-flag.expensive { color: var(--warning); }
.agent-flag.estimated { border-style: dashed; }

.agent-hotspots ol { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.agent-hotspots li { overflow-wrap: anywhere; }
.agent-hot-label { color: var(--text-strong); text-align: left; padding: 0; }
.agent-hot-value { margin-left: 8px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.agent-turns table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.agent-turns th, .agent-turns td { text-align: right; padding: 2px 6px; }
.agent-turns th:first-child, .agent-turns td:first-child { text-align: left; }
.agent-tasks ul { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; }
.agent-tasks li { display: flex; gap: 6px; padding: 2px 0; overflow-wrap: anywhere; }
.agent-tasks li.task-completed { color: var(--text-muted); text-decoration: line-through; }
.agent-task-mark { flex: none; width: 14px; }
.agent-events { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.agent-events li { display: grid; grid-template-columns: 16px auto auto minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--border); }
.agent-event-text { overflow-wrap: anywhere; }
.agent-event-outcome { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.agent-event-outcome.o-allow { color: var(--online); }
.agent-event-outcome.o-deny { color: var(--danger); }
.agent-event-node { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Agents' messages in the chat (message type 1000), drawn as the agent, and messages agents received. */
.message.agent-post { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.agent-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; }
.agent-run-by { margin-left: 4px; }
.agent-run-by::before { content: '· '; }
.agent-steer-mark { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.agent-steer-mark.delivered { color: var(--online); }
.content .mention.agent-mention { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* A request's card in the chat (agent.kind 'request', while open). */
.agent-approval.in-chat { max-width: 560px; margin-top: 6px; }
.message .agent-approval.waiting.in-chat { color: var(--text-muted); font-size: 13px; }

/* The composer's hint and notice in an AI channel. */
.agent-compose-bar { display: flex; align-items: flex-start; gap: 6px; padding: 0 0 6px; color: var(--text-muted); font-size: 13px; }
.agent-compose-bar[hidden] { display: none; }
.agent-compose-bar > .icon { flex: none; margin-top: 2px; }
.agent-compose-text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.agent-compose-hint { color: var(--text); overflow-wrap: anywhere; }
.agent-compose-notice { display: inline-flex; align-items: center; gap: 4px; }

/* The '@' autocomplete's Agents section (client/js/mentions.js). */
.mention-ac-agent-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--accent); }
.mention-autocomplete .mention-ac-agent.disabled { opacity: 0.5; cursor: not-allowed; }

.agent-share-modal { width: min(480px, 94vw); }
.agent-share-modal input[type="search"] { margin: 6px 0; }
.agent-share-modal form { max-height: 85vh; overflow-y: auto; }
.agent-share-modal h3 { margin: 16px 0 4px; font-size: 14px; color: var(--text-strong); }
.agent-share-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.agent-share-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 6px; }
.agent-share-row:hover { background: var(--bg-hover); }
.agent-share-row input { width: auto; }
.agent-dash .link-button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.agent-dash .link-button:hover { text-decoration: underline; }