/* Agents view (agents.js): list of agents and skills, agent editor, skill editor.
   Shared components come from app.css; everything new is prefixed ag-. */
#v-agents{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);background:var(--bg)}

/* ---------- list: toolbar ---------- */
.ag-bar{min-height:48px;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ag-bar h1{font-size:var(--fs-4);font-weight:600;margin:0 var(--sp-2) 0 0;white-space:nowrap}
.ag-tabs{display:flex;gap:var(--sp-1)}
.ag-tabs button{height:24px;padding:0 var(--sp-2);border-radius:var(--r12);font-size:var(--fs-2);font-weight:500;color:var(--fg-2);display:inline-flex;align-items:center;gap:var(--sp-1)}
.ag-tabs button:hover{background:var(--bg-3)}
.ag-tabs button.on{background:var(--fg);color:var(--bg)}
.ag-tabs button .num{opacity:.7}
.ag-search{width:280px;max-width:100%;height:28px;display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-2);border-radius:var(--r8);box-shadow:0 0 0 1px var(--line);color:var(--fg-3);background:var(--bg)}
.ag-search:focus-within{box-shadow:0 0 0 1px var(--line-2)}
.ag-search input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:var(--fs-2);color:var(--fg)}

/* ---------- list: cards ---------- */
.ag-wrap{overflow:auto;padding:var(--sp-4);min-height:0}
.ag-lead{margin:0 0 var(--sp-3);max-width:860px}
.ag-stale{margin-bottom:var(--sp-3)}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-3)}
.ag-card{background:var(--bg);border-radius:var(--r20);box-shadow:var(--sh-1);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;cursor:pointer;transition:box-shadow .12s}
.ag-card:hover{box-shadow:0 0 0 1px var(--line-2),0 8px 24px -18px var(--scrim)}
.ag-h{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.ag-h>div{min-width:0;flex:1}
.ag-av{flex:none;display:grid;place-items:center}
.ag-ic{width:28px;height:28px;border-radius:var(--r8);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);flex:none}
.ag-ic.lg{width:34px;height:34px}
.ag-name{display:block;max-width:100%;font-weight:600;font-size:var(--fs-4);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:var(--r4)}
.ag-name.mono{font-size:var(--fs-3)}
.ag-card:hover .ag-name{color:var(--accent-deep)}
.ag-id{display:block;font-family:var(--mono);font-size:var(--fs-1);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-desc{color:var(--fg-2);font-size:var(--fs-3);line-height:18px;margin:0;min-height:36px;overflow-wrap:anywhere}
.ag-desc.long{min-height:54px}
.ag-warn{color:var(--warn)}
.ag-kv{display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--sp-1) var(--sp-2);font-size:var(--fs-2);align-items:baseline}
.ag-kv>span:nth-child(odd){color:var(--fg-2)}
.ag-kv>.mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);min-width:0}
.ag-chips i{font-style:normal;font-family:var(--mono);font-size:var(--fs-1);line-height:17px;padding:0 var(--sp-1);border-radius:var(--r4);background:var(--bg-3);color:var(--fg-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.ag-facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-2);color:var(--fg-2);min-height:20px;font-variant-numeric:tabular-nums}
.ag-facts>span:not(.grow):not(.plain)::before{content:"";display:inline-block;width:6px;height:6px;border-radius:var(--r-full);box-shadow:inset 0 0 0 1.5px var(--line-2);margin-right:var(--sp-1);vertical-align:1px}
.ag-facts>span.on::before{background:var(--accent);box-shadow:none}
.ag-facts .plain{color:var(--fg-3)}
.ag-acts{display:flex;gap:var(--sp-2);align-items:center;min-height:24px}
.ag-acts .ag-danger{margin-left:auto}
.btn.ag-danger{color:var(--err)}
.btn.ag-danger:hover{background:var(--err-soft)}
.btn.primary.ag-danger-fill{background:var(--err);color:var(--bg)}

/* ---------- empty / loading / error ---------- */
.ag-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);min-height:240px;padding:var(--sp-6);text-align:center;color:var(--fg-2)}
.ag-state b{font-size:var(--fs-4);font-weight:600;color:var(--fg)}
.ag-state .muted{max-width:460px;display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:var(--sp-1)}
.ag-row{display:flex;align-items:center;gap:var(--sp-2)}

/* ---------- editor: header ---------- */
.ag-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);border-bottom:1px solid var(--line);flex-wrap:wrap;min-height:48px}
.ag-ttl{min-width:0;flex:1 1 220px}
.ag-ttl h1{margin:0;font-size:var(--fs-6);line-height:26px;font-weight:600;display:flex;align-items:baseline;gap:var(--sp-2);min-width:0}
.ag-ttl h1>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-ttl h1 .mono{font-weight:400;color:var(--fg-3);font-size:var(--fs-3)}
.ag-ttl h1 #ag-ttl.mono{font-weight:600;color:var(--fg);font-size:var(--fs-5)}
.ag-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--fs-2);color:var(--fg-2);min-height:18px}
.ag-end{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.ag-vr{width:1px;height:18px;background:var(--line-2);margin:0 var(--sp-1)}

/* ---------- editor: body ---------- */
.ag-ed{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:0}
.ag-main{overflow:auto;min-height:0;min-width:0}
.ag-form{max-width:880px;margin:0 auto;padding:var(--sp-5) var(--sp-6) var(--sp-8)}
.ag-form>.pane-sec{margin-bottom:var(--sp-6)}
.ag-aside{overflow:auto;min-height:0;min-width:0;border-left:1px solid var(--line);background:var(--bg-2);padding:var(--sp-5) var(--sp-4) var(--sp-8)}
.ag-aside .pane-sec{margin-bottom:var(--sp-5)}
.ag-banner{align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);font-size:var(--fs-3);background:var(--warn-soft);color:var(--fg)}
.ag-banner svg{color:var(--warn)}
.ag-banner>span{flex:1;min-width:0}
.ag-banner .btn{flex:none}
.ag-field{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-3);min-width:0}
.ag-field label,.ag-lbl{font-size:var(--fs-2);font-weight:500;color:var(--fg-2)}
.ag-field .hint{margin:0}
.ag-field .hint b{font-weight:600;color:var(--fg-2)}
.ag-secnote{margin:0 0 var(--sp-3)}
.ag-none{margin:0 0 var(--sp-3)}
.ag-in{width:100%;min-width:0;height:30px;border:0;border-radius:var(--r8);box-shadow:0 0 0 1px var(--line-2);background:var(--bg);padding:0 var(--sp-2);font-size:var(--fs-3)}
.ag-in.mono{font-size:var(--fs-2)}
.ag-in::placeholder{color:var(--fg-3)}
textarea.ag-in{height:auto;padding:var(--sp-2);line-height:20px;resize:vertical;display:block}
textarea.ag-code{font-family:var(--mono);font-size:var(--fs-2);line-height:18px;font-variant-ligatures:none;tab-size:2;white-space:pre-wrap}
textarea.ag-prompt{min-height:240px;padding:var(--sp-3)}
.ag-in[readonly]{background:var(--bg-2);color:var(--fg-2)}
.ag-seg{align-self:flex-start}
.seg button[disabled]{cursor:default}
.ag-modes{list-style:none;margin:var(--sp-1) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-h);font-size:var(--fs-2);color:var(--fg-3)}
.ag-modes li{padding-left:var(--sp-2);border-left:2px solid transparent}
.ag-modes li.on{color:var(--fg-2);border-left-color:var(--accent)}
.ag-modes li b{font-weight:600}
.ag-modes li.on b{color:var(--fg)}
.ag-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 var(--sp-3)}

/* subagent cards */
.ag-sa{border-radius:var(--r16);box-shadow:var(--sh-1);background:var(--bg);padding:var(--sp-3) var(--sp-4) var(--sp-1);margin-bottom:var(--sp-3)}
.ag-sa-h{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.ag-sa-h b{font-weight:600}
.ag-pick{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.ag-pick label{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 var(--sp-2);border-radius:var(--r8);box-shadow:0 0 0 1px var(--line-2);background:var(--bg);cursor:pointer;color:var(--fg-2)}
.ag-pick label:has(input:checked){background:var(--accent-soft);color:var(--accent-deep);box-shadow:0 0 0 1px var(--accent)}
.ag-pick label:has(input:disabled){cursor:default}
.ag-pick input,.ag-check input{accent-color:var(--accent);margin:0;flex:none}

/* side panel: checklists and switches */
.ag-list{padding:var(--sp-1) var(--sp-3);margin-bottom:var(--sp-2)}
.ag-check,.ag-switch{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2) 0;cursor:pointer;min-width:0}
.ag-check+.ag-check{border-top:1px solid var(--line-soft)}
.ag-check input{margin-top:3px}
.ag-switch{position:relative}
.ag-check>span,.ag-switch>span{display:flex;flex-direction:column;min-width:0;flex:1}
.ag-check b,.ag-switch b,.ag-always b{font-weight:600;color:var(--fg);overflow-wrap:anywhere}
.ag-check small,.ag-switch small,.ag-always small{font-size:var(--fs-2);line-height:17px;color:var(--fg-2);overflow-wrap:anywhere}
.ag-check:has(input:disabled),.ag-switch:has(input:disabled){cursor:default}
.ag-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ag-switch i{flex:none;width:28px;height:16px;margin-top:2px;border-radius:var(--r-full);background:var(--bg-4);position:relative;transition:background .12s}
.ag-switch i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:var(--r-full);background:var(--bg);transition:left .12s}
.ag-switch input:checked+i{background:var(--accent)}
.ag-switch input:checked+i::after{left:14px}
.ag-switch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.ag-switch input:disabled+i{opacity:.6}
.ag-always{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2)}
.ag-always>div:not(.ag-lbl){display:flex;flex-direction:column}
.ag-always .ag-lbl{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.ag-always b{color:var(--fg-2)}
.ag-adv{padding-top:var(--sp-3)}
.ag-aside .art .ag-av{width:28px}
.ag-aside .kv .mono{color:var(--fg)}

/* skill preview */
.ag-preview{min-height:240px;border-radius:var(--r8);box-shadow:0 0 0 1px var(--line-2);background:var(--bg);padding:var(--sp-3) var(--sp-4)}

/* confirm dialog */
.ag-confirm .card{width:min(420px,92vw)}
.ag-confirm .mb{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5)}
.ag-confirm .mb b{font-size:var(--fs-4);font-weight:600}
.ag-confirm .mb p{margin:0 0 var(--sp-3)}

@media (max-width:1000px){
  .ag-ed{display:block;overflow:auto}
  .ag-main,.ag-aside{overflow:visible}
  .ag-aside{border-left:0;border-top:1px solid var(--line)}
  .ag-form{padding:var(--sp-4)}
  .ag-2col{grid-template-columns:minmax(0,1fr)}
}
.ag-chips i small{font-size:inherit;color:var(--fg-3);font-style:normal}
.ag-appr{display:flex;flex-direction:column;gap:6px}
.ag-appr small{color:var(--fg-3);font-size:var(--fs-2);line-height:1.45}.ag-appr>select{margin-top:4px;height:30px;max-width:520px}
/* approvals: default mode and per-tool rules */
.ag-adv{margin-top:var(--sp-2)}.ag-adv summary{cursor:pointer;font-size:var(--fs-2);font-weight:600;color:var(--fg-2);padding:4px 0}
.ag-adv summary .num{color:var(--fg-3);font-weight:400}
.ag-rules{display:flex;flex-direction:column;gap:6px;margin:var(--sp-2) 0}
.ag-rule{display:grid;grid-template-columns:minmax(120px,1.1fr) 130px minmax(120px,1.4fr) auto auto auto;gap:6px;align-items:center}
.ag-rule .ag-in{height:28px;margin:0}.ag-rule.bad [data-ap="match"]{box-shadow:0 0 0 1.5px var(--err)}
.ag-row{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0}.ag-row .grow{flex:1}
.ag-search.sm{height:28px;max-width:260px}
.ag-aptab{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.ag-aptab th{text-align:left;font-weight:500;color:var(--fg-3);padding:4px 6px;border-bottom:1px solid var(--line)}
.ag-aptab td{padding:4px 6px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.ag-aptab tr.off td:first-child{color:var(--fg-3)}
@media (max-width:900px){.ag-rule{grid-template-columns:1fr 1fr}}

.ag-share-people { max-height: 240px; overflow-y: auto; margin-top: 10px; }