/* The agents of a session: the mark on its card and thread, and the sheet that lists them (agents.js). */
.ag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 12px; line-height: 1.5; cursor: pointer; white-space: nowrap; }
.ag-chip.live { border-color: #d97757; color: var(--text); }
/* Claude Code's creature (the .ag-dot shape) in Claude's own colour: it hops while any agent runs and stands still after. */
.ag-chip { --ag-creature: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4.5 24 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z'/%3E%3C/svg%3E"); }
.ag-chip::before { content: ""; flex: none; width: 15px; height: 10px; -webkit-mask: var(--ag-creature) center / contain no-repeat; mask: var(--ag-creature) center / contain no-repeat; }
.ag-chip.live::before { animation: work-creature .8s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .ag-chip.live::before, .ag-card.running .ag-dot { animation: none; } .ag-card.failed .ag-dot { animation: none; transform: translateY(2px) rotate(-16deg); } }
.work-agents-row { padding: 2px 16px 6px; }
.work-agents-row[hidden] { display: none; }
.ag-sheet { position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; }
.ag-panel { width: min(720px, 100%); max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 800px) { .ag-sheet { align-items: center; } .ag-panel { border-radius: 16px; } }
.ag-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.ag-title { font-weight: 600; }
.ag-of { color: var(--faint); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.ag-close { background: none; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 12px; font: inherit; min-height: 36px; }
.ag-cards { overflow-y: auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.ag-empty { color: var(--faint); margin: 8px 4px; }
.ag-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ag-head { display: flex; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; align-items: flex-start; }
.ag-head::-webkit-details-marker { display: none; }
/* An agent's dot is Claude Code's own creature (the shape fill.css draws beside a going session), in the state's colour; gold and hopping while it runs. */
.ag-dot { flex: none; width: 24px; height: 16px; margin-top: 2px; background: var(--faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4.5 24 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4.5 24 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* It keeps Claude's own orange in every state (Chris, 27 Oct): it hops while the agent works, stands still when done, and drops to the ground when it fails. */
.ag-dot, .ag-chip::before { background: #d97757; }
.ag-card.running .ag-dot { animation: work-creature .8s steps(1, end) infinite; }
.ag-card.failed .ag-dot { transform-origin: 50% 100%; animation: ag-drop .55s cubic-bezier(.5, 0, .9, .5) forwards; opacity: .75; }
.ag-card.stopped .ag-dot { opacity: .55; }
@keyframes ag-drop { 0% { transform: translateY(-3px); } 70% { transform: translateY(2px) rotate(-12deg); } 100% { transform: translateY(2px) rotate(-16deg); } }
.ag-words { display: flex; flex-direction: column; min-width: 0; }
.ag-name { overflow-wrap: anywhere; }
.ag-sum { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ag-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.ag-label { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.ag-sub { font-size: 12.5px; color: var(--muted); margin: 4px 0 2px; }
.ag-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; max-height: 260px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.ag-list { margin: 0; padding-left: 18px; font-size: 13.5px; overflow-wrap: anywhere; }
.ag-files li { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }