/* ---------- Agents screen: the AI team as characters ---------- */
.ag { --t-boss: #8b6cff; --t-managers: #17a2bd; --t-workers: #c9801a; --gold: #ffd36b; }
.ag-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.ag-sub { margin: 0 2px; font-size: 14px; }
.ag-hero { display: flex; flex-direction: column; align-items: flex-end; padding: 0 2px; }
.ag-hero-v { font-size: clamp(34px, 9vw, 50px); font-weight: 700; letter-spacing: -.03em; line-height: 1; background: linear-gradient(120deg, #c9b8ff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-hero-l { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 560px) { .ag-hero { align-items: flex-start; } }
.ag-small { font-size: 12px; }
.ag-live { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.ag-live.on { background: var(--green); box-shadow: 0 0 10px var(--green); animation: breathe 1.2s infinite; }
.ag-office .card-h { flex-wrap: wrap; }
.ag-office .card-h h2 { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); }
.ag-job { gap: 7px; }
.spinner-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cyan); border-right-color: transparent; animation: spin .8s linear infinite; }
.ag-banner { margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; background: rgba(255,211,107,.08); border: 1px solid rgba(255,211,107,.3); color: #ffe2a0; font-size: 13.5px; }
.ag.stale .ag-stage, .ag.stale .ag-chart { opacity: .6; transition: opacity .3s; }

/* ---------- stage ---------- */
.ag-stage { position: relative; height: clamp(540px, 56vw, 620px); border-radius: 14px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 60% 40% at 50% 14%, rgba(139,108,255,.2), transparent 70%), radial-gradient(ellipse 70% 30% at 50% 55%, rgba(47,214,240,.07), transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 92%, rgba(61,220,151,.09), transparent 70%), rgba(0,0,0,.18); }
.ag-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%); }
.ag-rail { position: absolute; left: 12px; transform: translateY(-50%); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.ag-rail.r1 { top: 20%; } .ag-rail.r2 { top: 53%; } .ag-rail.r3 { top: 85%; }
@media (max-width: 760px) { .ag-rail { display: none; } }
svg.ag-wires { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.ag-wires line { stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 6; transition: stroke .4s; }
.ag-wires line.live { stroke: rgba(47,214,240,.55); stroke-width: 2; animation: ag-dash 1s linear infinite; }
@keyframes ag-dash { to { stroke-dashoffset: -20; } }
.ag-packets { position: absolute; inset: 0; pointer-events: none; }
.ag-packet { position: absolute; left: var(--x1); top: var(--y1); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; opacity: 0; background: #fff; }
.ag-packet.workers { box-shadow: 0 0 10px 3px rgba(255,179,71,.85); }
.ag-packet.managers { box-shadow: 0 0 10px 3px rgba(47,214,240,.85); }
.ag-packet.live { animation: ag-travel 1.65s linear infinite; }
@keyframes ag-travel { 0% { left: var(--x1); top: var(--y1); opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { left: var(--x2); top: var(--y2); opacity: 0; transform: scale(.6); } }

/* ---------- characters ---------- */
.agent { position: absolute; z-index: 2; width: min(26%, 124px); transform: translate(-50%, -50%); }
.agent.boss { width: min(38%, 170px); }
.agent.managers { width: min(30%, 140px); }
.agent.acting { z-index: 3; }
svg.spr { display: block; width: 100%; height: auto; fill: none; stroke: none; overflow: visible; transition: filter .6s; }
.ag-name { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 3px 9px;
  border-radius: 10px; background: rgba(12,14,22,.85); border: 1px solid var(--line-2); backdrop-filter: blur(8px); white-space: nowrap; }
.agent.boss .ag-name, .agent.managers .ag-name { bottom: -20px; }
.ag-name b { font-size: 12px; } .ag-name .ttl { font-size: 10.5px; color: var(--muted); }
.agent.working .ag-name { border-color: rgba(61,220,151,.5); box-shadow: 0 0 14px -4px rgba(61,220,151,.7); }
.ag-tag { position: absolute; top: 4%; right: -4px; z-index: 2; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.asleep .ag-tag { background: rgba(92,98,120,.5); color: #d5d8e4; border: 1px solid var(--line-2); }
.acting .ag-tag { background: linear-gradient(120deg, var(--gold), #ffb347); color: #2a1d00; box-shadow: 0 0 14px rgba(255,211,107,.5); }

.spr .bod { transform-box: fill-box; transform-origin: 50% 100%; animation: ag-breathe 3.4s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
.spr .eyes { transform-box: fill-box; transform-origin: center; animation: ag-blink 4.8s infinite; animation-delay: var(--d, 0s); }
.spr .arm, .spr .spark { transform-box: fill-box; transform-origin: center; }
.spr .eyes-shut, .spr .m-work, .spr .zzz, .spr .sweat, .spr .spark, .spr .crown { display: none; }
.spr .boss-crown { display: inline; }
.spr .aura { opacity: 0; transition: opacity .5s; transform-box: fill-box; transform-origin: center; }
.spr .glow { opacity: .12; transition: opacity .4s; }
.spr .steam { animation: ag-steam 2.6s ease-in-out infinite; }
@keyframes ag-breathe { 50% { transform: scale(1.02, 1.035); } }
@keyframes ag-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes ag-steam { 0%, 100% { opacity: 0; transform: translateY(2px); } 50% { opacity: .55; transform: translateY(-2px); } }

.working .spr .aura { opacity: 1; animation: ag-pulse 1.6s ease-in-out infinite; }
.working .spr .bod { animation: ag-bob .6s ease-in-out infinite; }
.working .spr .m-idle { display: none; }
.working .spr .m-work { display: inline; }
.working .spr .arm.l { animation: ag-type .26s ease-in-out infinite alternate; }
.working .spr .arm.r { animation: ag-type .26s ease-in-out .13s infinite alternate; }
.working .spr .sweat { display: inline; animation: ag-drip 1.2s ease-in infinite; }
.working .spr .spark { display: inline; animation: ag-spark .8s steps(2, jump-none) infinite; }
.working .spr .glow { opacity: .6; animation: ag-flicker 1s ease-in-out infinite; }
.working .spr .pencil { transform-box: fill-box; transform-origin: 0 100%; animation: ag-scribble .3s ease-in-out infinite alternate; }
@keyframes ag-pulse { 50% { transform: scale(1.08); opacity: .7; } }
@keyframes ag-bob { 50% { transform: translateY(-2.5px) scale(1.01, .99); } }
@keyframes ag-type { to { transform: translateY(-4px); } }
@keyframes ag-drip { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
@keyframes ag-spark { 0% { opacity: 1; transform: scale(1); } 100% { opacity: .2; transform: scale(.7); } }
@keyframes ag-flicker { 50% { opacity: .3; } }
@keyframes ag-scribble { to { transform: rotate(-12deg) translateX(-2px); } }

.acting .spr .crown { display: inline; transform-box: fill-box; transform-origin: 50% 100%; animation: ag-crown .7s var(--spring) both; }
.acting svg.spr { filter: drop-shadow(0 0 14px rgba(255,211,107,.4)); }
@keyframes ag-crown { from { transform: translateY(-14px) scale(.4); opacity: 0; } }
.asleep svg.spr { filter: grayscale(.85) brightness(.6); }
.asleep .spr .eyes, .asleep .spr .m-work { display: none; }
.asleep .spr .eyes-shut, .asleep .spr .zzz { display: inline; }
.asleep .spr .bod { animation-duration: 5.5s; }
.asleep .ag-name { opacity: .65; }
.spr .zzz text { animation: ag-z 2.4s ease-in-out infinite; }
.spr .zzz text:nth-child(2) { animation-delay: .4s; } .spr .zzz text:nth-child(3) { animation-delay: .8s; }
@keyframes ag-z { 0%, 100% { opacity: .2; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-3px); } }

/* speech bubbles and coins */
.ag-bubble { position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translateX(-50%); z-index: 4; display: flex; align-items: baseline; gap: 6px; max-width: min(160px, 36vw);
  padding: 5px 10px; border-radius: 12px; background: #f4f2ff; color: #16131f; font-size: 11.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px -8px #000; animation: ag-pop .35s var(--spring) both; }
.ag-bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.ag-bubble .txt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ag-bubble .el { font-family: var(--mono); font-size: 10px; color: #6a6480; flex: none; }
.ag-bubble .el:empty { display: none; }
.ag-bubble.idle { background: rgba(30,33,48,.92); color: var(--muted); font-weight: 500; font-style: italic; border: 1px solid var(--line-2); }
.ag-bubble.idle::after { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
[data-key="w1"] .ag-bubble, [data-key="m1"] .ag-bubble { left: 4px; transform: none; }
[data-key="w1"] .ag-bubble::after, [data-key="m1"] .ag-bubble::after { left: 28px; }
[data-key="w3"] .ag-bubble, [data-key="m2"] .ag-bubble { left: auto; right: 4px; transform: none; }
[data-key="w3"] .ag-bubble::after, [data-key="m2"] .ag-bubble::after { left: auto; right: 23px; }
@keyframes ag-pop { from { opacity: 0; scale: .7; } }
.ag-coin { position: absolute; left: 50%; top: 18%; z-index: 5; font: 700 12px var(--mono); color: var(--gold); text-shadow: 0 0 10px rgba(255,211,107,.7); white-space: nowrap; pointer-events: none; animation: ag-coin 1.8s var(--ease) forwards; }
.ag-coin.bad { color: var(--red); text-shadow: 0 0 10px rgba(255,92,108,.6); }
@keyframes ag-coin { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 20% { transform: translate(-50%, 0) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -48px) scale(1); opacity: 0; } }

/* ---------- stat cards ---------- */
.ag-stats { display: grid; gap: 16px; margin: 16px 0; }
@media (min-width: 760px) { .ag-stats { grid-template-columns: repeat(3, 1fr); } }
.ag-stat { overflow: hidden; }
.ag-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.ag-stat.boss::before { background: var(--t-boss); } .ag-stat.managers::before { background: var(--t-managers); } .ag-stat.workers::before { background: var(--t-workers); }
.ag-stat .card-h .chip { display: block; max-width: 55%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.ag-stat-v { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ag-cap { height: 5px; border-radius: 5px; background: rgba(139,108,255,.18); margin: 10px 0 4px; overflow: hidden; }
.ag-cap span { display: block; height: 100%; border-radius: inherit; background: var(--t-boss); }
.ag-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin: 14px 0 0; }
.ag-dl dt { font-size: 11.5px; color: var(--muted); }
.ag-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-dl dd.bad { color: var(--red); }
.ag-note { margin-top: 10px; font-size: 12px; color: var(--amber); }
.ag-ti { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex: none; }
.ag-ti svg { width: 16px; height: 16px; }
.ag-ti.boss { color: #b39bff; background: rgba(139,108,255,.16); }
.ag-ti.managers { color: var(--cyan); background: rgba(47,214,240,.12); }
.ag-ti.workers { color: var(--amber); background: rgba(255,179,71,.12); }
.card-h h2 .ag-ti { width: 24px; height: 24px; border-radius: 8px; }

/* ---------- chart ---------- */
.ag-lower { align-items: start; }
.ag-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.ag-key { display: inline-flex; align-items: center; gap: 6px; }
.ag-key i { width: 10px; height: 10px; border-radius: 3px; }
.ag-chart { position: relative; min-height: 220px; }
svg.ag-svg { display: block; width: 100%; height: auto; fill: none; stroke: none; overflow: visible; }
.ag-svg .grid { stroke: var(--line); stroke-width: 1; }
.ag-svg .base { stroke: var(--line-2); stroke-width: 1; }
.ag-svg text { fill: var(--muted); stroke: none; font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.ag-svg text.val { fill: var(--text); font-weight: 600; }
.ag-svg path { stroke: none; transition: opacity .15s, filter .15s; }
.ag-svg rect.hit { fill: transparent; stroke: none; cursor: default; outline: none; }
.ag-svg rect.hit:focus-visible { stroke: var(--line-2); stroke-width: 1; }
.ag-svg.hovering .col:not(.hot) path { opacity: .45; }
.ag-svg .col.hot path { filter: brightness(1.2); }
.ag-chart-empty { position: absolute; inset: 0 0 26px 46px; display: grid; place-items: center; color: var(--muted); font-size: 13px; pointer-events: none; }
.ag-tip { position: absolute; top: 0; z-index: 5; min-width: 170px; padding: 8px 10px; border-radius: 10px; background: rgba(20,22,32,.96); border: 1px solid var(--line-2); box-shadow: 0 12px 30px -12px #000; pointer-events: none; font-size: 12.5px; }
.tip-h { color: var(--muted); font-size: 11.5px; margin-bottom: 4px; }
.tip-r { display: flex; align-items: center; gap: 7px; }
.tip-r i { width: 10px; height: 2px; border-radius: 2px; flex: none; }
.tip-r b { min-width: 50px; font-variant-numeric: tabular-nums; }
.tip-r span { color: var(--muted); }
.tip-r.tot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.ag-tbl { margin-top: 10px; }
.ag-num td:not(:first-child), .ag-num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- feed ---------- */
.ag-feed { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; }
.ag-row { cursor: default; align-items: center; }
.ag-row:active { transform: none; }
.ag-row.live { border-color: rgba(61,220,151,.3); background: rgba(61,220,151,.05); }
.ag-row .row-sub { font-size: 12.5px; }
.ag-cost { font-family: var(--mono); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .ag-packet, .ag-coin { display: none; }
  .ag-wires line.live { stroke-dasharray: none; }
}