/* Agent World: the town view. States on .aw-plot: st-work, st-idle, st-queue, st-ask, st-fail, st-off. */
.aw{--grass:#2e5a31;--grass2:#356b39;--road:#8a6f4d;--work:#3fb950;--idle:#6e7681;--queue:#58a6ff;--ask:#d29922;--fail:#f85149}
.aw-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:6px}
.aw-head{display:flex;flex-wrap:wrap;gap:6px}
.aw-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:3px 11px;font-size:13.5px}
.aw-chip i,.aw-plate i,.aw-pstate i{width:8px;height:8px;border-radius:50%;background:var(--idle);display:inline-block;flex:none}
.st-work>i,.st-work .aw-plate i,.aw-pstate.st-work i{background:var(--work);box-shadow:0 0 6px var(--work);animation:pulse 1.4s infinite}
.st-queue>i,.st-queue .aw-plate i,.aw-pstate.st-queue i{background:var(--queue)}
.st-ask>i,.st-ask .aw-plate i,.aw-pstate.st-ask i{background:var(--ask);animation:pulse 1s infinite}
.st-fail>i,.st-fail .aw-plate i,.aw-pstate.st-fail i{background:var(--fail)}
.st-off>i,.st-off .aw-plate i{background:#30363d}
.aw-crier{font-size:13px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-legend{font-size:12.5px;margin:4px 0 10px}

.aw-town{border-radius:16px;padding:10px 12px 14px;border:3px solid #1f3d22;
  background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.04) 0 2px,transparent 3px) 0 0/22px 22px,
             radial-gradient(circle at 70% 80%,rgba(0,0,0,.08) 0 2px,transparent 3px) 0 0/30px 30px,var(--grass)}
.aw-district{margin-top:6px}
.aw-district+.aw-district{border-top:12px solid var(--road);border-image:repeating-linear-gradient(90deg,var(--road) 0 18px,#a3875f 18px 26px) 12;padding-top:8px;margin-top:12px}
.aw-dname{display:inline-block;background:#6b4a2b;color:#f7ecd9;border:2px solid #4a321c;border-radius:6px;padding:2px 10px;font-weight:700;font-size:13.5px;margin:2px 0 8px;box-shadow:0 2px 0 #2a1c10;letter-spacing:.02em}
.aw-plots{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}

.aw-plot{cursor:pointer;border-radius:10px;background:#1b1410;border:3px solid #4a321c;box-shadow:0 4px 0 rgba(0,0,0,.35);overflow:hidden;transition:transform .15s,border-color .2s;outline:none;display:flex;flex-direction:column}
.aw-plot.wide{grid-column:span 2}
.aw-plot:hover,.aw-plot:focus-visible{transform:translateY(-2px)}
.aw-plot.sel{border-color:#f7ecd9}
.aw-sign{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 9px;background:linear-gradient(#8c2f2f,#6e2222);border-bottom:3px solid #4a1616;color:#fff3e0}
.aw-sign b{font-size:14.5px}
.aw-sign span{font-size:11.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-room{position:relative;aspect-ratio:200/130;background:#000}
.aw-plot.wide .aw-room{aspect-ratio:400/130}
.aw-room svg{display:block;width:100%;height:100%}
.aw-plate{display:flex;align-items:center;gap:7px;padding:5px 9px;font-size:12.5px;background:#2a2019;color:#e8dccb;border-top:2px solid #4a321c}

/* lights: idle rooms are dim, working rooms glow */
.aw-room .dark{fill:#05070d;opacity:0;transition:opacity .4s;pointer-events:none}
.st-idle .dark,.st-queue .dark{opacity:.38}
.st-off .dark{opacity:.72}
.aw-plot.st-work{border-color:#2f7a3a;box-shadow:0 0 0 2px rgba(63,185,80,.35),0 0 18px rgba(63,185,80,.25),0 4px 0 rgba(0,0,0,.35)}
.aw-plot.st-ask{border-color:#9e6a03}
.aw-plot.st-fail{border-color:#8b2a2a}

/* the agent */
.who .zzz,.who .alert,.who .warn,.who .shut{display:none}
.st-idle .who .zzz,.st-off .who .zzz{display:block}
.st-idle .who .eyes,.st-off .who .eyes{display:none}
.st-idle .who .shut,.st-off .who .shut{display:block}
.who .zzz text{fill:#cfe3ff;animation:zz 2.4s ease-in-out infinite}
.who .zzz text:nth-child(2){animation-delay:.4s} .who .zzz text:nth-child(3){animation-delay:.8s}
@keyframes zz{0%,100%{opacity:.15}50%{opacity:1}}
.st-idle .who .bodyg{animation:breathe 3.5s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
@keyframes breathe{50%{transform:translateY(1px) rotate(-2deg)}}
.st-work .who .bodyg{animation:bob .9s ease-in-out infinite}
.st-work .who .arm{animation:type .25s steps(2) infinite;transform-box:fill-box}
.st-work .who .arm.r{animation-delay:.12s}
@keyframes bob{50%{transform:translateY(-1.2px)}}
@keyframes type{50%{transform:translateY(-2px)}}
.st-ask .who .alert{display:block;animation:hop .8s ease-in-out infinite}
.st-fail .who .warn{display:block}
@keyframes hop{50%{transform:translateY(-4px)}}

/* props that come alive while working */
.screen{transition:fill .3s}
.st-work .screen{fill:#7ee0ff;animation:flicker 1.6s infinite}
.st-work .scr,.st-queue .scr{fill:#3fa7d6;animation:flicker 2s infinite}
@keyframes flicker{0%,100%{opacity:1}45%{opacity:.75}50%{opacity:.95}}
.flick{animation:flick 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
@keyframes flick{50%{transform:scale(.92,1.06);opacity:.85}}
.spin{transform-box:fill-box;transform-origin:center}
.st-work .spin{animation:spin 4s linear infinite} .st-work .spin.rev{animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hand-m{transform-origin:100px 22px;animation:spin 6s linear infinite}
.hand-h{transform-origin:100px 22px;animation:spin 72s linear infinite}
.st-idle .hand-m,.st-off .hand-m,.st-idle .hand-h,.st-off .hand-h{animation-play-state:paused}
.float{animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-3px)}}
.glow{animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{opacity:.6}}
.st-work .quill{animation:bob .4s ease-in-out infinite}
.ticker{animation:tick 12s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.st-idle .ticker,.st-off .ticker,.st-idle .float,.st-off .float{animation-play-state:paused}
.waves path{opacity:.25}
.st-work .waves path{animation:wave 1.2s infinite}
.st-work .waves path:nth-child(2){animation-delay:.2s} .st-work .waves path:nth-child(3){animation-delay:.4s}
@keyframes wave{50%{opacity:1}}
.big-at{fill:#e6e6e6;font-weight:700}
.look{animation:look 4s ease-in-out infinite;transform-box:fill-box}
@keyframes look{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.blink{animation:pulse 1s steps(2) infinite}

/* speech bubble */
.aw-bubble{position:absolute;left:6px;right:6px;top:5px;background:#fffdf5;color:#1d1d1d;border:2px solid #1d1d1d;border-radius:9px;padding:3px 7px;font-size:11.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;box-shadow:2px 2px 0 rgba(0,0,0,.4)}
.aw-bubble:empty{display:none}
.aw-bubble .dim{color:#666}
.st-ask .aw-bubble{background:#fff4d1}
.st-fail .aw-bubble{background:#ffe1de}
.st-queue .aw-bubble{background:#e3efff}

/* detail panel */
.aw-panel{position:fixed;right:16px;bottom:16px;width:min(380px,calc(100% - 32px));max-height:min(70vh,560px);overflow-y:auto;background:var(--bg);border:2px solid #4a321c;border-radius:12px;padding:14px 14px 16px;z-index:40;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.aw-panel[hidden]{display:none}
.aw-panel .close{top:4px}
.aw-ph{font-size:17px;padding-right:24px}
.aw-pstate{display:flex;align-items:center;gap:7px;margin:8px 0 2px;font-size:14px}
.aw-task{padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;cursor:pointer}
.aw-task:hover{color:var(--cyan)}
.aw-task .dim{font-size:12px;margin-top:2px}
.aw-task.aw-chat{cursor:default}
.aw-task.aw-chat:hover{color:inherit}
.aw-watch{color:var(--amber,#f5b041)}
.aw-watch:empty{display:none}

@media (max-width:700px){
  .aw-town{padding:8px;border-radius:12px}
  .aw-plots{grid-template-columns:1fr 1fr;gap:9px}
  .aw-plot.wide{grid-column:1 / -1}
  .aw-sign{padding:4px 7px} .aw-sign b{font-size:13px} .aw-sign span{display:none}
  .aw-bubble{font-size:10.5px;-webkit-line-clamp:2;padding:2px 5px}
  .aw-plate{font-size:11px;padding:4px 7px}
  .aw-panel{left:8px;right:8px;bottom:8px;width:auto}
}
@media (prefers-reduced-motion:reduce){.aw *{animation:none!important}}