/* agents feature styles: the agent panel, Approvals, Agent runs, Agent
   settings and API keys. Every colour, space, radius and shadow comes from a
   token in organic.css; sizes follow the design's own. */

/* agent panel: thread */
.agent-messages { display: flex; flex-direction: column; gap: var(--space-3); }
.agent-note {
  margin: 0; font-size: 13px; padding: 10px var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
}
.agent-note-warn { background: var(--color-accent-100); color: var(--color-accent-800); border: 1px solid var(--color-accent-300); }
.agent-empty { margin: 0; font-size: 13px; }
.agent-msg { display: flex; flex-direction: column; max-width: 92%; }
.agent-msg-user { align-self: flex-end; align-items: flex-end; }
.agent-msg-agent { align-self: flex-start; }
.agent-bubble {
  border-radius: var(--radius-md); padding: 10px var(--space-3); font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty;
  background: var(--color-surface); color: var(--color-text);
}
.agent-msg-user .agent-bubble { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.agent-bubble-error { background: var(--color-accent-100); color: var(--color-accent-800); border: 1px solid var(--color-accent-300); }
.agent-bubble-pending { min-width: 56px; min-height: 38px; position: relative; }
.agent-bubble-pending::after {
  content: ""; position: absolute; left: var(--space-3); top: 50%; width: 22px; height: 6px; margin-top: -3px;
  border-radius: 999px; background: linear-gradient(90deg, var(--color-accent-2-400) 30%, var(--color-neutral-300) 30%);
  background-size: 200% 100%; animation: agent-think 1s linear infinite;
}
@keyframes agent-think { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.agent-steps { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.agent-step { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); padding-left: 14px; position: relative; }
.agent-step::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; border-radius: 999px;
  background: var(--color-accent-2-500);
}
.agent-step-proposed::before { background: var(--color-accent-500); }
.agent-step-refused::before, .agent-step-failed::before { background: var(--color-accent-700); }
.agent-step-proposed { color: var(--color-accent-800); }

/* agent panel: waiting on you */
.agent-waiting { margin-top: var(--space-2); }
.agent-waiting-head { margin: 0 0 8px; }
.agent-waiting-list { display: flex; flex-direction: column; gap: 10px; }
.agent-waiting-more { display: inline-block; margin-top: 8px; font-size: 12px; }
.agent-pending {
  background: var(--color-surface); border: 1px solid var(--color-accent-2-300); border-radius: var(--radius-md);
  padding: var(--space-3); box-shadow: var(--shadow-sm);
}
.agent-pending-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.agent-tool { font-family: var(--font-heading); font-size: 11px; }
.agent-pending-when { font-size: 10px; margin-left: auto; }
.agent-pending-title { font-size: 13px; text-wrap: pretty; margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.agent-pending-actions { display: flex; gap: 6px; align-items: center; }
.agent-pending-actions form { margin: 0; }
.agent-btn { border-radius: 999px; font-size: 12px; padding: 5px 12px; }
.agent-pending-queue { margin-left: auto; }
.agent-pending-error { margin: 0 0 var(--space-2); font-size: 12px; color: var(--color-accent-800); }
.agent-pending-gate, .agent-pending-done { margin: 0; font-size: 12px; }
.agent-pending-done { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.agent-status-tag { font-size: 10px; }
.agent-pending .appr-edit .field { margin: 0; }

/* agent panel: suggestion chips in the footer */
.cnpy-agent-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cnpy-agent-chips:not(:empty) { margin-bottom: var(--space-3); }
.agent-chip { border-radius: 999px; font-size: 11px; padding: 4px 11px; }

/* Approvals */
.appr-list { display: flex; flex-direction: column; gap: var(--space-3); }
.appr-card {
  background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: var(--space-4); scroll-margin-top: var(--space-6);
}
.appr-card:target { border-color: var(--color-accent-2-600); box-shadow: var(--shadow-md); }
.appr-card-done { background: color-mix(in srgb, var(--color-neutral-100) 60%, transparent); }
.appr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--space-3); }
.appr-select { display: inline-flex; align-items: center; cursor: pointer; }
.appr-select input { width: 16px; height: 16px; accent-color: var(--color-accent-2-600); margin: 0; }
.appr-role { font-size: 10px; }
.appr-tool { font-family: var(--font-heading); font-size: 13px; }
.appr-origin { font-size: 11px; }
.appr-external { font-size: 10px; border-color: var(--color-accent-600); color: var(--color-accent-700); }
.appr-when { margin-left: auto; font-size: 11px; }
.appr-title { font-size: 15px; font-weight: 600; margin-bottom: var(--space-3); text-wrap: pretty; overflow-wrap: anywhere; }
.appr-diff { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.appr-now, .appr-proposed { border-radius: var(--radius-md); padding: 10px var(--space-3); font-size: 13px; min-width: 0; }
.appr-now { background: var(--color-neutral-200); }
.appr-proposed { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.appr-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.appr-proposed .appr-label { color: var(--color-accent-2-800); }
.appr-line { overflow-wrap: anywhere; white-space: pre-wrap; }
.appr-line + .appr-line { margin-top: 4px; }
.appr-field { font-weight: 600; margin-right: 4px; }
.appr-field::after { content: ":"; }
.appr-reason { font-size: 13px; margin: calc(var(--space-2) * -1) 0 var(--space-3); }
.appr-card-alert { margin-bottom: var(--space-3); }
.appr-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.appr-actions form { margin: 0; }
.appr-btn { border-radius: 999px; font-size: 13px; }
.appr-gate { margin-left: auto; font-size: 11px; }
.appr-locked { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; }
.appr-decided { font-size: 12px; }
.appr-bulk-btn { border-radius: 999px; font-size: 13px; }
.appr-flash { margin-bottom: var(--space-4); max-width: 70ch; }
.appr-edit { display: flex; flex-direction: column; gap: var(--space-3); }
.appr-field-row > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.appr-readonly { font-family: var(--font-heading); font-size: 13px; padding: 6px 0; }
.appr-textarea { min-height: 88px; border-radius: var(--radius-md); font-size: 13px; }
.appr-help { font-size: 11px; margin: 4px 0 0; }
.appr-group { display: flex; flex-direction: column; gap: var(--space-2); }
.appr-group legend { font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.appr-group-item {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3);
  border-radius: var(--radius-md); background: var(--color-surface);
}

/* Agent runs */
.runs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); align-items: start; }
.runs-list { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.runs-tabs { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.runs-tab { border-radius: 999px; font-size: 12px; padding: 5px 12px; }
.runs-tab[aria-current="page"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.runs-empty { max-width: none; }
.runs-item {
  background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none;
}
.runs-item:hover { border-color: var(--color-accent-2-600); color: inherit; }
.runs-item-selected { border-color: var(--color-accent-2-600); background: var(--color-accent-2-100); }
.runs-item-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.runs-role { font-size: 10px; flex: none; }
.runs-trigger { font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runs-when { margin-left: auto; font-size: 11px; flex: none; }
.runs-title { font-size: 14px; font-weight: 600; text-wrap: pretty; overflow-wrap: anywhere; }
.runs-meta { font-size: 11px; }
.runs-older { align-self: flex-start; font-size: 13px; }
.runs-detail { min-width: 0; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4); }
.runs-detail:empty { display: none; }
.runs-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); flex-wrap: wrap; }
.runs-detail-head .tag { font-size: 10px; }
.runs-detail-trigger { font-size: 11px; flex-basis: 100%; }
.runs-detail-title { margin-bottom: var(--space-4); text-wrap: pretty; overflow-wrap: anywhere; }
.runs-alert { margin-bottom: var(--space-3); }
.runs-convo { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.runs-output {
  white-space: pre-wrap; font-size: 13px; background: var(--color-neutral-100); border-radius: var(--radius-md);
  padding: 10px var(--space-3); margin-bottom: var(--space-4); overflow-wrap: anywhere;
}
.runs-nocalls { font-size: 13px; }
.runs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.runs-step { display: flex; gap: 10px; background: var(--color-neutral-100); border-radius: var(--radius-md); padding: 10px var(--space-3); }
.runs-step-n {
  width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--color-accent-2-200);
  display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--color-accent-2-900);
}
.runs-step-body { min-width: 0; display: flex; flex-direction: column; }
.runs-step-tool { font-size: 12px; font-family: var(--font-heading); }
.runs-step-detail { font-size: 12px; text-wrap: pretty; overflow-wrap: anywhere; }
.runs-step-error { color: var(--color-accent-800); }
.runs-step-tier { font-size: 9px; margin-left: auto; flex: none; align-self: flex-start; }
.runs-subhead { margin: var(--space-4) 0 8px; }
.runs-proposals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.runs-proposals li { display: flex; gap: 8px; align-items: baseline; }
.runs-proposals .tag { font-size: 10px; flex: none; }
.runs-foot {
  margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-divider);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.runs-budget { min-width: 140px; flex: 1; }
.runs-budget-label { font-size: 11px; margin-bottom: 4px; }
.runs-bar { height: 7px; border-radius: 999px; background: var(--color-neutral-300); overflow: hidden; }
.runs-bar-fill { height: 100%; background: var(--color-accent-2-600); }
.runs-facts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; font-size: 12px; }
.runs-facts div { display: flex; flex-direction: column; }
.runs-facts dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.runs-facts dd { margin: 0; }

/* Agent settings */
.set-readonly-note { font-size: 12px; }
.set-flash { margin-bottom: var(--space-4); max-width: 70ch; }
.set-profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.set-profile {
  background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: var(--space-4); display: flex; flex-direction: column; color: inherit; text-decoration: none;
}
.set-profile:hover { border-color: var(--color-accent-2-600); color: inherit; }
.set-profile-selected { border-color: var(--color-accent-2-600); box-shadow: inset 0 0 0 1px var(--color-accent-2-600); }
.set-profile-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); }
.set-profile-head .tag { font-size: 10px; }
.set-profile-tools { font-size: 11px; margin-left: auto; }
.set-profile-prompt { font-size: 13px; text-wrap: pretty; margin-bottom: var(--space-3); min-height: 3.4em; }
.set-profile-meta { font-size: 11px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); align-items: start; }
.set-grid:disabled .set-tools, .set-grid:disabled .set-side { opacity: .85; }
.set-tools { min-width: 0; }
.set-h { margin-bottom: var(--space-3); }
.set-table-wrap { overflow-x: auto; }
.set-table { font-size: 13px; }
.set-table td:first-child, .set-table th:first-child { width: 28px; }
.set-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent-2-600); margin: 0; }
.set-tool-name { font-family: var(--font-heading); font-size: 12px; cursor: pointer; }
.set-tool-desc { font-size: 11px; }
.set-row-human .set-tool-name { cursor: default; }
.set-tier { font-size: 10px; white-space: nowrap; }
.set-side { min-width: 0; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-3); }
.set-card { display: flex; flex-direction: column; gap: var(--space-3); }
.set-card fieldset { display: flex; flex-direction: column; gap: var(--space-3); }
.set-card-h { margin: 0; }
.set-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.set-switch input { width: 16px; height: 16px; accent-color: var(--color-accent-2-600); margin: 0; }
.set-help { font-size: 11px; margin: 4px 0 0; }
.set-prompt { min-height: 120px; border-radius: var(--radius-md); font-size: 13px; }
.set-schedule { display: grid; grid-template-columns: minmax(0, 1fr) 118px 72px; align-items: center; gap: var(--space-3); font-size: 13px; }
.set-schedule-name { min-width: 0; }
.set-time { font-variant-numeric: tabular-nums; }
.set-where { font-size: 9px; justify-self: start; }
.set-tool-who { font-size: 11px; margin-top: 2px; }
.set-save { border-radius: 999px; align-self: flex-start; }
.set-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); align-items: start; }
.set-spend { margin-top: 6px; }
.set-mcp-url { font-size: 12px; font-family: var(--font-heading); word-break: break-all; }
.set-keys-link { border-radius: 999px; align-self: flex-start; font-size: 13px; }
.set-error { margin: 4px 0 0; font-size: 12px; color: var(--color-accent-800); }

/* API keys */
.keys-lede { max-width: 70ch; font-size: 14px; margin-bottom: var(--space-4); }
.keys-new {
  background: var(--color-accent-2-200); color: var(--color-accent-2-900); border-radius: var(--radius-lg);
  padding: var(--space-4); margin-bottom: var(--space-4); max-width: 820px;
}
.keys-new h4 { margin-bottom: var(--space-2); }
.keys-new p { font-size: 13px; }
.keys-secret-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); }
.keys-secret {
  flex: 1; min-width: 0; font-size: 13px; background: var(--color-neutral-100); color: var(--color-text);
  border-radius: var(--radius-md); padding: 8px var(--space-3); overflow-wrap: anywhere; user-select: all;
}
.keys-copy { border-radius: 999px; }
.keys-help { font-size: 12px; margin: 0; }
.keys-help code, .keys-table code { font-size: 12px; }
.keys-create { max-width: 820px; }
.keys-h { margin-bottom: var(--space-3); }
.keys-role { flex: 0 1 180px; min-width: 140px; }
.keys-table-wrap { overflow-x: auto; }
.keys-table { min-width: 620px; font-size: 13px; }
.keys-table .tag { font-size: 10px; }
.keys-revoked td { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.keys-action { text-align: right; }
.keys-action form { margin: 0; }

@media (max-width: 560px) {
  .appr-gate { margin-left: 0; }
  .appr-when { margin-left: 0; }
  .set-side { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-bubble-pending::after { animation: none; }
}