/* ============================================================
   agents.css — sub-agent builder, list, run-chat modal
   ============================================================ */
#view-agents{padding:22px}
.ag-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:22px;max-width:920px}
.ag-intro{flex:1;font-size:13px;line-height:1.6;color:var(--text-dim)}
.ag-new{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#021018;font-weight:600;background:linear-gradient(180deg,var(--accent),var(--accent2));border:none;border-radius:10px;padding:11px 17px;cursor:pointer;box-shadow:0 0 18px rgba(0,212,255,.3);transition:var(--transition)}
.ag-new:hover{transform:translateY(-1px)}

.ag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;max-width:920px}
.ag-card{border:1px solid var(--glass-border);border-radius:14px;background:rgba(0,0,0,.24);padding:18px;display:flex;flex-direction:column;gap:14px;transition:var(--transition);position:relative}
.ag-card:hover{border-color:var(--glass-border-hi);background:rgba(0,212,255,.03)}
.ag-card .ac-top{display:flex;align-items:center;gap:13px}
.ac-ico{flex:0 0 46px;height:46px;border-radius:13px;display:grid;place-items:center;position:relative;color:#06080c}
.ac-ico svg{position:relative}
.ac-ico .ac-glyph{position:absolute;font-family:var(--mono);font-weight:700;font-size:15px}
.ac-meta{flex:1;min-width:0}
.ac-name{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.ac-role{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);margin-top:3px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-edit{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--glass-border);border-radius:8px;color:var(--text-dim);cursor:pointer;transition:var(--transition)}
.ac-edit:hover{color:var(--accent);border-color:var(--glass-border-hi)}
.ac-desc{font-size:12.5px;line-height:1.55;color:var(--text-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.ac-stats{display:flex;gap:7px;flex-wrap:wrap}
.ac-stat{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--text-dim);border:1px solid var(--glass-border);border-radius:6px;padding:5px 9px;display:flex;align-items:center;gap:5px}
.ac-stat b{color:var(--accent);font-weight:600}
.ac-run{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent);border:1px solid var(--glass-border-hi);background:rgba(0,212,255,.06);border-radius:9px;padding:11px;cursor:pointer;transition:var(--transition)}
.ac-run:hover{background:rgba(0,212,255,.14)}

/* ---------- builder modal ---------- */
.ag-modal{position:fixed;inset:0;z-index:9600;background:rgba(0,5,10,.74);backdrop-filter:blur(7px);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .28s;padding:30px}
.ag-modal.open{opacity:1;pointer-events:auto}
.ag-dialog{width:680px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;background:var(--glass-bg-2);border:1px solid var(--glass-border-hi);border-radius:16px;transform:translateY(14px) scale(.985);transition:transform .28s;overflow:hidden}
.ag-modal.open .ag-dialog{transform:none}
.ag-dh{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--glass-border);flex:0 0 auto}
.ag-dh h2{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.ag-dh .x{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--glass-border);border-radius:8px;color:var(--text-dim);cursor:pointer;transition:var(--transition)}
.ag-dh .x:hover{color:var(--danger);border-color:rgba(255,68,102,.4)}
.ag-db{flex:1;overflow-y:auto;padding:22px}
.ag-db::-webkit-scrollbar{width:8px}.ag-db::-webkit-scrollbar-thumb{background:rgba(0,212,255,.2);border-radius:8px}
.ag-df{display:flex;align-items:center;gap:12px;padding:16px 22px;border-top:1px solid var(--glass-border);flex:0 0 auto}

.ag-sec{margin-bottom:22px}
.ag-sec:last-child{margin-bottom:0}
.ag-sec > .lab{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px}
.ag-sec > .lab .req{color:var(--accent)}
.ag-sec .sub{font-size:11.5px;color:var(--muted);margin:-4px 0 11px;line-height:1.5}
.ag-row2{display:flex;gap:12px}
.ag-input,.ag-textarea{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--glass-border);border-radius:10px;padding:11px 13px;color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:border-color .2s}
.ag-input:focus,.ag-textarea:focus{border-color:var(--glass-border-hi)}
.ag-textarea{font-family:var(--mono);font-size:12.5px;line-height:1.6;resize:vertical;min-height:92px}

/* icon/color picker */
.ag-identity{display:flex;gap:14px;align-items:center}
.ag-prev{flex:0 0 56px;height:56px;border-radius:14px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:19px;color:#06080c}
.ag-swatches{display:flex;gap:7px;flex-wrap:wrap}
.ag-sw{width:26px;height:26px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:var(--transition)}
.ag-sw.on{border-color:var(--text);box-shadow:0 0 10px rgba(255,255,255,.3)}

/* capability chips */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cap{display:flex;align-items:center;gap:9px;border:1px solid var(--glass-border);border-radius:9px;padding:10px 12px;cursor:pointer;transition:var(--transition);font-size:12.5px;color:var(--text-dim)}
.cap:hover{border-color:var(--glass-border-hi)}
.cap .cap-box{flex:0 0 16px;height:16px;border-radius:5px;border:1.5px solid var(--muted);display:grid;place-items:center;color:#06080c;transition:var(--transition)}
.cap.on{color:var(--text);border-color:var(--glass-border-hi);background:rgba(0,212,255,.05)}
.cap.on .cap-box{background:var(--accent);border-color:var(--accent)}

/* link rows (knowledge bases + sources) */
.link-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.link-item{display:flex;align-items:center;gap:11px;border:1px solid var(--glass-border);border-radius:9px;padding:10px 12px;background:rgba(0,0,0,.2)}
.link-item .li-ico{flex:0 0 auto;color:var(--accent)}
.link-item .li-text{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-item .li-x{flex:0 0 auto;color:var(--muted);cursor:pointer;transition:var(--transition)}
.link-item .li-x:hover{color:var(--danger)}
.link-add{display:flex;gap:8px}
.link-add input{flex:1;background:rgba(0,0,0,.4);border:1px solid var(--glass-border);border-radius:9px;padding:10px 12px;color:var(--text);font-family:var(--mono);font-size:12px;outline:none}
.link-add input:focus{border-color:var(--glass-border-hi)}
.link-add button{flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--accent);border:1px solid var(--glass-border-hi);background:rgba(0,212,255,.05);border-radius:9px;padding:0 15px;cursor:pointer;transition:var(--transition)}
.link-add button:hover{background:rgba(0,212,255,.13)}
.kb-pick{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.kb-opt{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);border:1px dashed var(--glass-border);border-radius:7px;padding:7px 11px;cursor:pointer;transition:var(--transition)}
.kb-opt:hover{color:var(--accent);border-color:var(--glass-border-hi)}

/* ---------- run chat modal ---------- */
.run-modal{position:fixed;inset:0;z-index:9650;background:rgba(0,5,10,.6);backdrop-filter:blur(4px);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .28s;padding:30px}
.run-modal.open{opacity:1;pointer-events:auto}
.run-dialog{width:760px;max-width:100%;height:620px;max-height:90vh;display:flex;flex-direction:column;background:var(--glass-bg-2);border:1px solid var(--glass-border-hi);border-radius:16px;overflow:hidden;transform:translateY(16px) scale(.985);transition:transform .28s;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.run-modal.open .run-dialog{transform:none}
.run-head{display:flex;align-items:center;gap:13px;padding:15px 20px;border-bottom:1px solid var(--glass-border);flex:0 0 auto}
.run-head .rh-ico{flex:0 0 38px;height:38px;border-radius:11px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:15px;color:#06080c;position:relative}
.run-head .rh-meta{flex:1;min-width:0}
.run-head .rh-name{font-size:15px;font-weight:600}
.run-head .rh-role{font-family:var(--mono);font-size:10px;color:var(--text-dim);margin-top:2px;letter-spacing:.04em;display:flex;align-items:center;gap:6px}
.run-head .rh-role .led{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 7px var(--ok)}
.run-head .x{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--glass-border);border-radius:8px;color:var(--text-dim);cursor:pointer;transition:var(--transition)}
.run-head .x:hover{color:var(--danger);border-color:rgba(255,68,102,.4)}
.run-stream{flex:1;overflow-y:auto;padding:20px}
.run-stream::-webkit-scrollbar{width:8px}.run-stream::-webkit-scrollbar-thumb{background:rgba(0,212,255,.2);border-radius:8px}
.run-chips{display:flex;gap:7px;flex-wrap:wrap;padding:0 20px 12px}
.run-chip{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);border:1px solid var(--glass-border);border-radius:99px;padding:7px 12px;cursor:pointer;transition:var(--transition)}
.run-chip:hover{color:var(--accent);border-color:var(--glass-border-hi);background:rgba(0,212,255,.05)}
.run-composer{display:flex;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--glass-border);flex:0 0 auto}
.run-composer .prompt{color:var(--accent);font-family:var(--mono);font-size:14px}
.run-composer input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:14.5px}
.run-composer input::placeholder{color:var(--muted)}
.run-composer .send{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--text-dim);border:1px solid var(--glass-border);background:rgba(0,0,0,.25);padding:9px 15px;border-radius:9px;cursor:pointer;transition:var(--transition)}
.run-composer .send:hover{color:var(--accent);border-color:var(--glass-border-hi)}

/* ===================== AGENT BUILDER — connector picker ===================== */
.conn-grid{display:flex;flex-wrap:wrap;gap:8px;max-height:172px;overflow-y:auto;padding:2px}
.conn-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border:1px solid var(--glass-border);border-radius:10px;cursor:pointer;background:rgba(0,0,0,.25);transition:var(--transition);user-select:none}
.conn-chip:hover{border-color:var(--glass-border-hi);background:rgba(0,212,255,.05)}
.cc-ico{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;flex:0 0 auto}
.cc-ico img{width:12px;height:12px;display:block}
.conn-chip span{font-size:12.5px;color:var(--text-dim);white-space:nowrap}
.conn-chip.on{border-color:var(--accent);background:rgba(0,212,255,.12)}
.conn-chip.on span{color:var(--text)}