/* The run agent tab inside the run inspector.
   Agent Testing is a different feature with its own stylesheet, and it already
   owns the plain names .agent-actions and .agent-message. This sheet loads after
   it, so the rules for those two are kept inside this panel's own containers
   rather than reaching the other screen. */
.agent-head{margin-bottom:8px}
.agent-head .agent-actions{margin-bottom:6px}
.agent-meter{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.agent-banner{margin:0 0 16px;padding:13px 15px;border:1px solid var(--warn-border);border-radius:9px;background:var(--warn-soft);color:var(--warn-ink);font-size:13px;line-height:1.6}
.agent-body{display:flex;flex-direction:column;gap:22px}
.agent-thread{display:flex;flex-direction:column;gap:12px;max-height:46vh;overflow:auto;padding-right:4px}
.agent-thread .agent-message{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:14px 16px;margin:0}
.agent-thread .agent-message.role-tester{background:var(--accent-soft);border-color:var(--accent-border)}
.agent-thread .agent-message.role-system{background:var(--surface-sunken);border-color:var(--border)}
.agent-message-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:7px;font-size:12px;color:var(--muted)}
.agent-message-head strong{font-size:13px;color:var(--ink)}
.agent-cost{margin-left:auto;font-variant-numeric:tabular-nums}
/* Scoped so this panel's own margin is kept: Agent Testing's ".agent-message p"
   is more specific than a bare ".agent-text" and loads first. */
.agent-body .agent-text{margin:0;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.agent-pending .agent-text{color:var(--muted);font-style:italic}
/* An answer the fallback provider gave names it (ui/llm.ts fallbackNote). */
.agent-fallback{margin:6px 0 0;font-size:12px;color:var(--muted)}
.agent-proposals h3{margin:0 0 12px}
.agent-proposal{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:16px;margin-bottom:14px}
.agent-proposal.dismissed{opacity:.72}
.agent-proposal-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.agent-proposal-head strong{font-size:14px;overflow-wrap:anywhere}
.agent-target{margin:8px 0 10px;font-size:12px;color:var(--muted)}
.agent-diff{border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:12px;line-height:1.65}
.agent-diff-line{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 10px;padding:7px 10px;border-bottom:1px solid var(--border-subtle);overflow-wrap:anywhere}
.agent-diff-line:last-child{border-bottom:0}
.agent-diff-line.keep{color:var(--muted);background:var(--surface)}
.agent-diff-line.change,.agent-diff-line.add,.agent-diff-line.remove{background:var(--surface-muted)}
.agent-diff-index{color:var(--muted);font-variant-numeric:tabular-nums}
.agent-diff-before{grid-column:2;color:var(--fail-ink)}
.agent-diff-after{grid-column:2;color:var(--pass)}
.agent-diff-same{grid-column:2}
.agent-decide{margin:14px 0 0}
.agent-decided{margin:12px 0 0;font-size:12px;color:var(--muted)}
.agent-verdict{font-size:13px;line-height:1.7;margin:0 0 14px}
.agent-auto{display:inline-flex;align-items:center;gap:8px;margin:2px 0 10px;font-size:13px;color:var(--text-2);cursor:pointer}
.agent-auto input{width:16px;height:16px;margin:0}
.agent-outcome{margin:0 0 10px;padding:10px 14px;border-radius:8px;font-size:13px;line-height:1.6;border:1px solid var(--fail-border);background:var(--fail-soft);color:var(--fail-ink)}
.agent-outcome.passed{border-color:var(--pass-border);background:var(--pass-soft);color:var(--pass-ink)}
.agent-ask{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.agent-ask textarea{flex:1;min-width:0;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);padding:11px 12px;font:inherit;font-size:13px;color:inherit;resize:vertical}
.agent-ask .btn{flex:none}
/* Why Ask cannot be used now, on its own line under the box and the button: a greyed-out Ask always says why. */
.agent-ask-why{flex-basis:100%;margin:-4px 0 0;font-size:12px;line-height:1.6;color:var(--text-2)}
.agent-ask-why .ai-settings-link{font-size:inherit;padding:0}
@media(max-width:760px){.agent-thread{max-height:none}.agent-ask{flex-direction:column}.agent-ask .btn{align-self:flex-end}}