/* Agents panel (right side) and the AI connections page. Grove only: colours, radii and type come from the --ui-* tokens. */
:root{--agents-w:420px}

/* Top-bar toggle */
.agents-toggle{display:inline-flex;align-items:center;gap:7px;height:28px;margin-left:auto;margin-right:10px;padding:0 11px;border-radius:var(--ui-radius-control);border:1px solid color-mix(in srgb,var(--ui-accent) 30%,transparent);background:color-mix(in srgb,var(--ui-accent) 8%,transparent);color:var(--ui-ink);font:600 12.5px/1 var(--ui-font);cursor:pointer;white-space:nowrap}
.agents-toggle:hover{border-color:color-mix(in srgb,var(--ui-accent) 60%,transparent)}
.agents-toggle[aria-expanded=true]{background:var(--ui-accent);color:var(--ui-accent-ink);border-color:var(--ui-accent)}
.agents-toggle:focus-visible,.agents-icon:focus-visible,.agents-resize:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.agents-spark{width:15px;height:15px;fill:currentColor;flex:none}
.agents-toggle-count{min-width:18px;height:18px;padding:0 5px;border-radius:var(--ui-radius-pill,999px);display:inline-grid;place-items:center;font-size:10.5px;background:var(--ui-warn);color:#1d1400}
.agents-toggle-count[hidden]{display:none}

/* The docked panel */
body.agents-open .main-shell{margin-right:var(--agents-w)}
.agents-panel{position:fixed;top:var(--strip,30px);right:0;bottom:0;width:var(--agents-w);z-index:34;display:flex;flex-direction:column;background:var(--ui-card,#0b1610);background-image:var(--ui-card-image,none);border-left:1px solid var(--ui-card-line);box-shadow:-24px 0 48px -32px #000;color:var(--ui-ink);font-family:var(--ui-font)}
.agents-panel[hidden]{display:none}
.agents-resize{position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:1}
.agents-resize:hover{background:linear-gradient(90deg,transparent 3px,color-mix(in srgb,var(--ui-accent) 50%,transparent) 3px,color-mix(in srgb,var(--ui-accent) 50%,transparent) 5px,transparent 5px)}
.agents-head{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--ui-line)}
.agents-title{display:flex;align-items:center;gap:7px;margin-right:auto;color:var(--ui-accent)}
.agents-title h2{margin:0;font-size:14px;color:var(--ui-ink)}
.agents-agent{max-width:46%;min-height:28px;padding:3px 8px;font-size:12px;border-radius:var(--ui-radius-field);background:var(--ui-field);color:var(--ui-ink);border:1px solid var(--ui-field-line)}
.agents-icon{display:inline-grid;place-items:center;width:28px;height:28px;min-height:0;padding:0;border-radius:var(--ui-radius-sm);border:1px solid transparent;background:transparent;color:var(--ui-muted);font-size:14px;cursor:pointer}
.agents-icon:hover,.agents-icon[aria-pressed=true]{color:var(--ui-ink);border-color:var(--ui-line);background:rgba(255,255,255,.04)}
.agents-approvals{padding:8px 12px;border-bottom:1px solid var(--ui-line);background:color-mix(in srgb,var(--ui-warn) 9%,transparent);font-size:12px}
.agents-approvals p{margin:2px 0}
.agents-approvals a,.agents-link{color:var(--ui-warn);background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer;min-height:0}
.agents-body{flex:1;overflow-y:auto;padding:12px;scrollbar-width:thin;display:flex;flex-direction:column;gap:10px}
.agents-empty{margin:auto 0;padding:20px 8px;text-align:center;color:var(--ui-muted);font-size:13px;line-height:1.5}
.agents-empty b{color:var(--ui-ink);font-size:15px}
.agents-note{font-size:12px;margin:0}
.agents-convo-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ui-muted);padding-bottom:6px;border-bottom:1px solid var(--ui-line)}
.agents-convo-head b{color:var(--ui-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Messages */
.agents-msg{display:flex;flex-direction:column;gap:7px}
.agents-msg-user{align-items:flex-end}
.agents-bubble{max-width:100%;padding:9px 12px;border-radius:var(--ui-radius-md);font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.agents-msg-user .agents-bubble{max-width:88%;background:color-mix(in srgb,var(--ui-accent) 13%,var(--ui-field));border:1px solid color-mix(in srgb,var(--ui-accent) 22%,transparent)}
.agents-msg-agent .agents-bubble{background:var(--ui-field);border:1px solid var(--ui-line)}
.agents-bubble p{margin:0 0 7px}.agents-bubble p:last-child{margin-bottom:0}
.agents-bubble ul,.agents-bubble ol{margin:4px 0 7px;padding-left:20px}
.agents-bubble code{font-family:'Martian Mono',ui-monospace,monospace;font-size:11.5px;padding:1px 4px;border-radius:var(--ui-radius-xs);background:rgba(255,255,255,.06)}
.agents-code{margin:6px 0;padding:9px;border-radius:var(--ui-radius-sm);background:#050b08;overflow-x:auto;font-size:11.5px}
.agents-code code{background:none;padding:0}
.agents-caret{display:inline-block;width:7px;height:13px;margin-left:2px;vertical-align:-2px;background:var(--ui-accent);animation:agents-blink 1s steps(2) infinite}
@keyframes agents-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.agents-caret{animation:none}}
.agents-error{margin:0;padding:8px 10px;border-radius:var(--ui-radius-sm);border:1px solid color-mix(in srgb,var(--ui-danger) 45%,transparent);color:var(--ui-danger);font-size:12.5px}

/* Tool cards */
.agents-card{border:1px solid var(--ui-line);border-left:3px solid var(--ui-busy);border-radius:var(--ui-radius-sm);background:rgba(255,255,255,.02);padding:8px 10px;font-size:12px}
.agents-card[data-status=done]{border-left-color:var(--ui-ok)}
.agents-card[data-status=error],.agents-card[data-status=refused]{border-left-color:var(--ui-danger)}
.agents-card[data-status=pending_approval]{border-left-color:var(--ui-warn);background:color-mix(in srgb,var(--ui-warn) 6%,transparent)}
.agents-card[data-status=rejected]{border-left-color:var(--ui-muted);opacity:.85}
.agents-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.agents-card-name{font-family:'Martian Mono',ui-monospace,monospace;font-size:11.5px;color:var(--ui-ink)}
.agents-card-what{color:var(--ui-muted);margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.agents-details{margin-top:5px}
.agents-details summary{cursor:pointer;color:var(--ui-muted);font-size:11.5px}
.agents-details pre{margin:5px 0 0;max-height:240px;overflow:auto;padding:8px;border-radius:var(--ui-radius-xs);background:#050b08;font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere}
.agents-card-note{margin:6px 0 0;color:var(--ui-muted)}
.agents-approve{margin-top:8px;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--ui-warn) 40%,transparent)}
.agents-approve p{margin:0 0 7px;line-height:1.45}
.agents-phrase{display:flex;flex-direction:column;gap:4px;margin-bottom:7px;font-size:11.5px;color:var(--ui-muted)}
.agents-phrase input{min-height:28px;font-family:'Martian Mono',ui-monospace,monospace}
.agents-approve-actions{display:flex;gap:8px}

/* Composer */
.agents-foot{border-top:1px solid var(--ui-line);padding:9px 12px 10px}
.agents-foot[hidden]{display:none}
.agents-context{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:11.5px;color:var(--ui-muted)}
.agents-context label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11.5px}
.agents-context span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agents-form textarea{width:100%;resize:vertical;min-height:62px;max-height:40vh;border-radius:var(--ui-radius-field);background:var(--ui-field);border:1px solid var(--ui-field-line);color:var(--ui-ink);font:13px/1.45 var(--ui-font);padding:8px 10px;box-sizing:border-box}
.agents-form textarea:focus{outline:none;border-color:color-mix(in srgb,var(--ui-accent) 60%,transparent)}
.agents-form-row{display:flex;align-items:center;gap:8px;margin-top:7px}
.agents-cost{margin-right:auto;font-size:11.5px;color:var(--ui-muted);font-variant-numeric:tabular-nums}
.agents-paper{margin:6px 0 0;font-size:10.5px;color:var(--ui-muted)}

/* History, agents and the editor */
.agents-sub{margin:0 0 6px;font-size:13px}
.agents-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.agents-list li{display:flex;align-items:center;gap:6px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:6px 8px}
.agents-row{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:0;color:var(--ui-ink);text-align:left;cursor:pointer;min-height:0;font:inherit}
.agents-row span,.agents-row-static span{font-size:11.5px;color:var(--ui-muted)}
.agents-row-static{flex:1;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.agents-row-actions{display:flex;gap:4px}
.agents-editor{display:flex;flex-direction:column;gap:9px;font-size:12px}
.agents-editor label{display:flex;flex-direction:column;gap:4px}
.agents-editor fieldset{border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);padding:6px 9px;display:flex;flex-direction:column;gap:5px}
.agents-scope{flex-direction:row!important;align-items:flex-start;gap:7px!important}
.agents-scope span{color:var(--ui-muted)}.agents-scope b{color:var(--ui-ink);font-weight:600}

/* Phones: a full-screen sheet over the page */
@media(max-width:720px){
  body.agents-open .main-shell{margin-right:0}
  body.agents-open{overflow:hidden}
  .agents-panel{inset:0;width:100%;top:0;z-index:60;border-left:0}
  .agents-resize{display:none}
  .agents-toggle span:not(.agents-toggle-count){display:none}
  .agents-toggle{margin-right:6px;padding:0 8px}
  .agents-toggle + #topbar-more{margin-left:0}
}
@media print{.agents-panel,.agents-toggle{display:none}}

/* AI connections page */
.aic-page{display:flex;flex-direction:column;gap:var(--ui-gap,18px)}
.aic-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.aic-card{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-md)}
.aic-card-main{flex:1;min-width:260px}
.aic-card>.ui-actions{align-self:center;align-items:center}
.aic-card-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aic-card p{margin:3px 0}
.aic-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px 16px;margin:8px 0 0}
.aic-facts dt{font-size:11px;color:var(--ui-muted)}.aic-facts dd{margin:0;font-size:12.5px;overflow-wrap:anywhere}
.aic-problem{color:var(--ui-danger);font-size:12px}
.aic-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 16px;align-items:start}
.aic-form .ui-field{align-content:start}
.aic-inline{display:flex;gap:8px}.aic-inline input{flex:1}
.aic-routes,.aic-usage{width:100%;border-collapse:collapse}
.aic-routes th,.aic-routes td,.aic-usage th,.aic-usage td{padding:6px 8px;border-bottom:1px solid var(--ui-line);text-align:left}
.aic-usage .num{text-align:right;font-variant-numeric:tabular-nums}
.aic-routes select,.aic-routes input{width:100%}