/* ambient agents (agents.js): small cursors with name tags, never interactive */
#agents { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 60; pointer-events: none; }
.ag { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform, opacity; --c: var(--lilac); --t: var(--ink); }
.ag.a2 { --c: var(--orange); --t: #fff; } .ag.a3 { --c: var(--lime); }
.ag svg { position: absolute; left: 0; top: 0; width: 18px; height: 22px; filter: drop-shadow(0 2px 2px rgba(var(--shadow-c), .35)); transform-origin: 2px 2px; transition: transform .25s var(--spring); }
.ag.grab svg { transform: scale(.82); }
.ag b { position: absolute; left: 14px; top: 20px; padding: 3px 8px 4px; border-radius: 99px; background: var(--c); color: var(--t); white-space: nowrap;
  font: 500 10.5px/1 var(--mono); letter-spacing: .02em; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 5px 10px -4px rgba(var(--shadow-c), .5); }
.ag-w { position: relative; }
.ag-w::before { content: ''; position: absolute; inset: 1px -1px 0; background: rgba(120, 90, 255, .32); opacity: 0; pointer-events: none; }
.ag-w.on::before { opacity: 1; }
.ag-caret { display: inline-block; width: 1.5px; height: .85em; margin-left: 1px; vertical-align: -.05em; background: #6a46ff; animation: ag-blink .8s steps(1) infinite; }
@keyframes ag-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #agents { display: none; } .ag-caret { animation: none; } }