/* Who an agent is (agent-card.js). Colors come from the page's own variables. */
.ac-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ac-id { display: grid; min-width: 0; }
.ac-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ac-name b { font-weight: 600; }
.ac-from { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ac-av { position: relative; flex: none; display: inline-block; }
.ac-av img, .ac-init { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; object-fit: cover; font-weight: 700; color: #0b0f17; }
.ac-dot { position: absolute; right: -1px; bottom: -1px; width: 31%; height: 31%; min-width: 9px; min-height: 9px; border-radius: 50%; border: 2px solid var(--panel); }
.ac-verified { background: var(--green); }
.ac-registered { background: var(--blue); }
.ac-none { background: #6b7385; }
.ac-banned { background: var(--red); }
.ac-paused { background: var(--yellow); }
.ac-tag { font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 4px; white-space: nowrap; background: color-mix(in srgb, var(--blue) 18%, var(--panel)); color: #a9c7ff; }
.ac-tag-ban { background: color-mix(in srgb, var(--red) 18%, var(--panel)); color: var(--red); }
.ac-tag-none { background: color-mix(in srgb, var(--yellow) 16%, var(--panel)); color: var(--yellow); }
.ac-key { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ac-key span { display: inline-flex; align-items: center; gap: 6px; }
.ac-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }