/* Agent avatars. --aC is the owner's colour; the body is kept light (second --aBody line, where the browser supports
   relative colour) so the dark eyes stay clear whatever colour is chosen.
   Motion follows Mochi's rule from the appearance review (RV-3):
   - every mood has a still pose (lists, cards, maps);
   - pointing at a face (.agw:hover / :focus-visible) plays a short reaction;
   - .ag-once plays the mood twice when the state changes, then settles on the still pose;
   - only .jv-agent-face[data-live] (the agent whose reply is in progress) loops. No rule says "infinite" outside --agN.
   Nothing moves under reduced motion. */
.ag{display:block;width:100%;height:100%;overflow:visible;
  --aBody:color-mix(in oklab,var(--aC,#8d99ae) 42%,#fffaf4);
  --aBody:oklch(from color-mix(in oklab,var(--aC,#8d99ae) 42%,#fffaf4) max(l,.82) c h);
  --aSoft:color-mix(in oklab,var(--aC,#8d99ae) 12%,#fffaf4);
  --aMid:color-mix(in oklab,var(--aC,#8d99ae) 78%,#fffaf4);
  --aDeep:color-mix(in oklab,var(--aC,#8d99ae) 70%,#1d1714);
  --aLine:color-mix(in oklab,var(--aC,#8d99ae) 50%,#1d1714);
  --aEye:#2b211d}
.ag .eyes,.ag .happy,.ag .shine circle,.ag .badge,.ag .dots circle{transform-box:fill-box;transform-origin:center}
.ag .whole{transform-box:view-box;transform-origin:32px 58px}
.ag .f{transform-box:view-box}
.ag .happy,.ag .dots,.ag .badge{opacity:0}
.ag .eyes,.ag .happy,.ag .shine circle,.ag .whole,.ag .f,.ag .badge,.ag .dots{transition:transform .25s ease,opacity .25s ease}

/* still poses */
.ag-thinking .eyes{transform:translate(1px,-1.3px)}
.ag-thinking .dots{opacity:1}
.ag-thinking .f{transform:rotate(calc(var(--fd,1) * 6deg))}
.ag-working .eyes{transform:translateY(1.1px)}
.ag-working .f{transform:rotate(calc(var(--fd,1) * -9deg))}
.ag-asking .whole{transform:rotate(-8deg)}
.ag-asking .eyes{transform:scale(1.08)}
.ag-asking .shine circle{transform:scale(1.3)}
.ag-asking .badge{opacity:1}
.ag-done .eyes{opacity:0}
.ag-done .happy{opacity:1}
.ag-done .f{transform:rotate(calc(var(--fd,1) * 8deg))}

@keyframes agBlink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.12)}}
@keyframes agHop{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(0) scale(1.07,.93)}55%{transform:translateY(-3.5px) scale(.96,1.04)}80%{transform:translateY(0) scale(1.03,.97)}}
@keyframes agTwitch{0%,100%{transform:rotate(0)}25%{transform:rotate(calc(var(--fd,1) * -14deg))}55%{transform:rotate(calc(var(--fd,1) * 10deg))}80%{transform:rotate(calc(var(--fd,1) * -4deg))}}
@keyframes agSway{0%,100%{transform:rotate(calc(var(--fd,1) * -9deg))}50%{transform:rotate(calc(var(--fd,1) * 9deg))}}
@keyframes agBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2.4px) scale(.98,1.03)}}
@keyframes agLook{0%,100%{transform:translate(1px,-1.3px)}40%{transform:translate(-1.4px,-1px)}70%{transform:translate(1.4px,-.6px)}}
@keyframes agTilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-3deg) translateY(-1.5px)}}
@keyframes agPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes agSparkle{0%,100%{transform:scale(1.3)}50%{transform:scale(1.6)}}
@keyframes agDots{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes agSquish{0%{transform:scale(1)}30%{transform:scale(1.12,.88)}60%{transform:scale(.94,1.07) translateY(-2px)}100%{transform:scale(1)}}

/* pointed at: a short reaction in any mood */
.agw:is(:hover,:focus-visible) .eyes{animation:agBlink .35s ease-in-out}
.agw:is(:hover,:focus-visible) .whole{animation:agHop .55s ease-in-out}
.agw:is(:hover,:focus-visible) .f{animation:agTwitch .6s ease-in-out}

/* state change (.ag-once: twice, then settle) or the one live agent (.jv-agent-face[data-live]: loops) */
.ag-once{--agN:2}
.jv-agent-face[data-live]{--agN:infinite}
:is(.ag-once,.jv-agent-face[data-live]).ag-thinking .eyes{animation:agLook 1.8s ease-in-out var(--agN)}
:is(.ag-once,.jv-agent-face[data-live]).ag-thinking .f{animation:agSway 1.8s ease-in-out var(--agN)}
:is(.ag-once,.jv-agent-face[data-live]).ag-thinking .dots circle{animation:agDots 1.2s ease-in-out var(--agN)}
:is(.ag-once,.jv-agent-face[data-live]).ag-thinking .dots circle:nth-child(2){animation-delay:.2s}
:is(.ag-once,.jv-agent-face[data-live]).ag-thinking .dots circle:nth-child(3){animation-delay:.4s}
:is(.ag-once,.jv-agent-face[data-live]).ag-working .whole{animation:agBob .7s ease-in-out var(--agN)}
:is(.ag-once,.jv-agent-face[data-live]).ag-working .f{animation:agSway .7s ease-in-out var(--agN)}
:is(.ag-once,.jv-agent-face[data-live]).ag-asking .whole{animation:agTilt 1.6s ease-in-out var(--agN)}
:is(.ag-once,.jv-agent-face[data-live]).ag-asking .shine circle{animation:agSparkle 1.2s ease-in-out var(--agN)}
:is(.ag-once,.jv-agent-face[data-live]).ag-asking .badge{animation:agPulse 1.2s ease-in-out var(--agN)}
:is(.ag-once,.jv-agent-face[data-live]).ag-asking .f{animation:agTwitch 1.6s ease-in-out var(--agN)}
:is(.ag-once,.jv-agent-face[data-live]).ag-done .whole{animation:agSquish .6s ease-out 1}
:is(.ag-once,.jv-agent-face[data-live]).ag-done .f{animation:agTwitch .6s ease-in-out 1}
:is(.ag-once,.jv-agent-face[data-live]).ag-idle .eyes{animation:agBlink .35s ease-in-out 1 1.2s}
@media (prefers-reduced-motion:reduce){.ag *{animation:none!important;transition:none!important}}

/* SVG pivots are external under the app CSP. Geometry is from the chosen artwork. */
.jv-agent-face .af-p48-52{transform-origin:48px 52px}
.jv-agent-face .af-p21-31{transform-origin:21px 31px}
.jv-agent-face .af-p43-31{transform-origin:43px 31px}
.jv-agent-face .af-p26-31{transform-origin:26px 31px}
.jv-agent-face .af-p37-31{transform-origin:37px 31px}
.jv-agent-face .af-p18-30{transform-origin:18px 30px}
.jv-agent-face .af-p46-30{transform-origin:46px 30px}
.jv-agent-face .af-p20-28{transform-origin:20px 28px}
.jv-agent-face .af-p44-28{transform-origin:44px 28px}
.jv-agent-face .af-p46-50{transform-origin:46px 50px}
.jv-agent-face .af-p21-29{transform-origin:21px 29px}
.jv-agent-face .af-p43-29{transform-origin:43px 29px}
.jv-agent-face .af-p47-51{transform-origin:47px 51px}
.jv-agent-face .af-p32-29{transform-origin:32px 29px}
.jv-agent-face .af-p32-25_5{transform-origin:32px 25.5px}
.jv-agent-face .af-p32-27{transform-origin:32px 27px}
.jv-agent-face .af-p32-24{transform-origin:32px 24px}
.jv-agent-face .af-p18_5-30{transform-origin:18.5px 30px}
.jv-agent-face .af-p45_5-30{transform-origin:45.5px 30px}
.jv-agent-face .af-p32-26_5{transform-origin:32px 26.5px}
.jv-agent-face .af-p47-52{transform-origin:47px 52px}
.jv-agent-face .af-p20-31{transform-origin:20px 31px}
.jv-agent-face .af-p44-31{transform-origin:44px 31px}
.jv-agent-face .af-p17-43{transform-origin:17px 43px}
.jv-agent-face .af-p47-43{transform-origin:47px 43px}
.jv-agent-face .af-p47-47{transform-origin:47px 47px}
.jv-agent-face .af-p29-31_5{transform-origin:29px 31.5px}
.jv-agent-face .af-dn{--fd:-1}.jv-agent-face .af-dp{--fd:1}
.jv-agent-face{display:inline-block;flex:none}
.jv-agent-face[data-settled] .ag *{animation:none!important;transition:none!important}
.jv-agent-still{display:inline-block;flex:none}
.jv-agent-still *,.jv-agent-face[data-still] .ag *{animation:none!important;transition:none!important}