/* Build it with: a button per AI app; it copies the prompt and says where to paste it. */
.cl-agents{margin:20px 0 0;padding:14px 0 0;border-top:.8px solid var(--ui-line);container-type:inline-size}
.cl-agents-title{margin:0 0 10px;font:400 12px var(--ui-mono);color:var(--ui-faint)}
.cl-agent-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cl-agent{box-sizing:border-box;display:flex;align-items:center;gap:7px;min-width:0;height:40px;margin:0;padding:0 12px 0 11px;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);font:500 14px/1 var(--ui-font);letter-spacing:-.02em;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.cl-agent img,.cl-agent-mark{flex:none}
.cl-agent-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cl-agent-out{flex:none;margin-left:auto}
.cl-agent:hover{transform:translateY(-1px);border-color:var(--ui-accent)}
.cl-agent:active{transform:none}
.cl-agent:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.cl-agent.is-on{border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-link)}
.cl-agent img{width:16px;height:16px}
.cl-agent-mark{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--ui-tag-bg);color:var(--ui-tag-fg);font:700 10px/1 var(--ui-mono)}
.cl-agent-out{color:var(--ui-faint)}
.cl-agent-how{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--ui-accent-soft);font-size:13.5px;line-height:1.5;color:var(--ui-text)}
.cl-agent-how code{padding:1px 6px;border-radius:6px;background:var(--ui-card);font:500 12.5px var(--ui-mono)}
:root:not([data-theme=dark]) .cl-agent img[src*="/tech/sites/"]{filter:brightness(0)}
/* Build it with as an even grid (2026-10-27): four across on desktops (eight apps), two across
   in a narrow column, and six on phones (Antigravity and Bolt hide) so every row is full. */
@container (max-width:520px){.cl-agent-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cl-agent-wide{display:none}}