/* Crew characters: every moving part is its own group; the shared --motion-* rhythm keeps each teammate out of step with the others. */
.crew-character{color:#9dc5fd}.crew-character svg{overflow:visible}
.crew-character :is(.crew-bob,.crew-tilt,.crew-arm,.crew-blink,.crew-scan,.crew-prop,.crew-badge,.crew-z,.crew-antenna,.crew-shadow,.crew-look){transform-box:fill-box;transform-origin:center}
.crew-character .crew-bob,.crew-character .crew-tilt{transform-origin:50% 100%}
.crew-character .crew-arm-l{transform-origin:80% 20%}.crew-character .crew-arm-r{transform-origin:20% 20%}.crew-character .crew-antenna{transform-origin:50% 100%}
.crew-character .crew-look{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.crew-character .crew-bob{animation:crew-breathe var(--motion-body,3.6s) ease-in-out var(--motion-phase,0s) infinite}
.crew-character .crew-shadow{animation:crew-shadow var(--motion-body,3.6s) ease-in-out var(--motion-phase,0s) infinite}
.crew-character .crew-blink{animation:crew-blink var(--motion-blink,4.4s) var(--motion-phase,0s) infinite}
.crew-character .crew-arm-l{animation:crew-arm-l var(--motion-body,3.6s) ease-in-out var(--motion-phase,0s) infinite}
.crew-character .crew-arm-r{animation:crew-arm-r var(--motion-body,3.6s) ease-in-out var(--motion-phase,0s) infinite}
.crew-character .crew-scan{animation:crew-glance calc(var(--motion-face,4s) * 1.8) ease-in-out var(--motion-phase,0s) infinite}
.crew-character .crew-prop{animation:crew-prop 3.2s ease-in-out var(--motion-phase,0s) infinite}
.crew-character .crew-antenna{animation:crew-wobble 2.4s ease-in-out var(--motion-phase,0s) infinite}.crew-character .crew-antenna-two{animation-delay:calc(var(--motion-phase,0s) - 1.1s)}
@keyframes crew-breathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-3px) scale(1.015,.985)}}
@keyframes crew-shadow{0%,100%{transform:scaleX(1);opacity:.28}50%{transform:scaleX(.88);opacity:.2}}
@keyframes crew-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
@keyframes crew-arm-l{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
@keyframes crew-arm-r{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes crew-glance{0%,38%,100%{transform:translate(0,0)}44%,56%{transform:translate(-3px,0)}62%,74%{transform:translate(3px,-1px)}80%{transform:translate(0,0)}}
@keyframes crew-prop{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes crew-wobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
/* Working: quicker bounce, eyes scan the screen, the tool is busy, the spinner turns. */
.crew-character[data-mood=busy] .crew-bob{animation-duration:1.5s}.crew-character[data-mood=busy] :is(.crew-arm-l,.crew-arm-r){animation-duration:.75s}
.crew-character[data-mood=busy] .crew-scan{animation:crew-scan 2.2s ease-in-out var(--motion-phase,0s) infinite}
.crew-character[data-mood=busy] .crew-prop{animation:crew-work .9s ease-in-out var(--motion-phase,0s) infinite}
.crew-character .crew-spin{transform-box:view-box;transform-origin:82px 20px;animation:crew-spin 1.1s linear infinite}
@keyframes crew-scan{0%,100%{transform:translate(-3px,1px)}50%{transform:translate(3px,1px)}}
@keyframes crew-work{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(8deg) translateY(-2px)}}
@keyframes crew-spin{to{transform:rotate(360deg)}}
/* Needs you: tilts its head, looks up, the badge pulses. */
.crew-character[data-mood=waiting] .crew-tilt{animation:crew-tilt 3.4s ease-in-out var(--motion-phase,0s) infinite}
.crew-character[data-mood=waiting] .crew-scan{animation:none;transform:translate(0,-2px)}
.crew-character[data-mood=waiting] .crew-badge{animation:crew-pulse 1.6s ease-in-out infinite}
@keyframes crew-tilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes crew-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
/* Done: a happy hop with arms up; the check pops. */
.crew-character[data-mood=happy] .crew-bob{animation:crew-hop 2.6s cubic-bezier(.3,.7,.4,1) var(--motion-phase,0s) infinite}
.crew-character[data-mood=happy] .crew-arm-l{animation:crew-wave-l 2.6s ease-in-out var(--motion-phase,0s) infinite}.crew-character[data-mood=happy] .crew-arm-r{animation:crew-wave-r 2.6s ease-in-out var(--motion-phase,0s) infinite}
.crew-character[data-mood=happy] .crew-badge{animation:crew-pop 2.6s ease-out var(--motion-phase,0s) infinite}
@keyframes crew-hop{0%,40%,100%{transform:translateY(0) scale(1,1)}8%{transform:translateY(1px) scale(1.06,.92)}18%{transform:translateY(-10px) scale(.96,1.05)}28%{transform:translateY(0) scale(1.05,.95)}34%{transform:scale(1)}}
@keyframes crew-wave-l{0%,40%,100%{transform:rotate(0)}15%,25%{transform:rotate(-55deg)}}
@keyframes crew-wave-r{0%,40%,100%{transform:rotate(0)}15%,25%{transform:rotate(55deg)}}
@keyframes crew-pop{0%,100%{transform:scale(1)}12%{transform:scale(1.35)}22%{transform:scale(1)}}
/* Stuck: a small worried shiver; the "!" flashes. */
.crew-character[data-mood=error] .crew-tilt{animation:crew-shiver 3s ease-in-out var(--motion-phase,0s) infinite}
.crew-character[data-mood=error] .crew-badge{animation:crew-flash 1.2s steps(2) infinite}
.crew-character[data-mood=error] .crew-bob{animation-duration:5s}
@keyframes crew-shiver{0%,70%,100%{transform:translateX(0) rotate(0)}74%{transform:translateX(-1.5px) rotate(-2deg)}78%{transform:translateX(1.5px) rotate(2deg)}82%{transform:translateX(-1px) rotate(-1deg)}86%{transform:translateX(0)}}
@keyframes crew-flash{50%{opacity:.35}}
/* Resting and offline: dimmed, slow deep breaths, z's drift up, no blinking. */
.crew-character:is([data-mood=sleeping],[data-mood=offline]) svg{filter:saturate(.55) brightness(.8)}
.crew-character:is([data-mood=sleeping],[data-mood=offline]) .crew-bob{animation-duration:5.5s}
.crew-character:is([data-mood=sleeping],[data-mood=offline]) :is(.crew-blink,.crew-scan){animation:none}
.crew-character .crew-z{animation:crew-z 3.6s ease-out infinite}.crew-character .crew-z2{animation-delay:1.2s}.crew-character .crew-z3{animation-delay:2.4s}
@keyframes crew-z{0%{opacity:0;transform:translate(0,4px) scale(.7)}25%{opacity:.9}100%{opacity:0;transform:translate(6px,-12px) scale(1.15)}}
/* Occasional gestures from the shared motion engine. */
.crew-character[data-motion-action] .crew-bob{animation-name:crew-breathe}
.crew-character:is([data-motion-action=stretch],[data-motion-action=wave]) .crew-arm-l{animation:crew-wave-l var(--gesture-duration,2s) ease-in-out var(--gesture-phase,0s) 1}
.crew-character:is([data-motion-action=stretch],[data-motion-action=wave]) .crew-arm-r{animation:crew-wave-r var(--gesture-duration,2s) ease-in-out var(--gesture-phase,0s) 1}
.crew-character.crew-poke .crew-bob{animation:crew-hop .9s cubic-bezier(.3,.7,.4,1) 1}
.crew-character.crew-poke .crew-arm-l{animation:crew-wave-l .9s ease-in-out 1}.crew-character.crew-poke .crew-arm-r{animation:crew-wave-r .9s ease-in-out 1}
body.motion-paused .crew-character *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) .crew-character *{animation:none!important;transition:none!important}}

/* Character tiles: at small sizes every style stands, whole body, on its own tile, framed by its measured
   outline (character-crops.js). A ring and corner badge carry the state in every style. */
.character-tile{--tile-ring:transparent;--tile-tint:#7fa8ff;position:relative;display:inline-block;flex-shrink:0;width:34px;height:44px;border-radius:11px;background:linear-gradient(180deg,color-mix(in srgb,var(--tile-tint) 16%,var(--paper,#151c29)),color-mix(in srgb,var(--tile-tint) 34%,var(--paper,#151c29)));box-shadow:0 0 0 1.5px var(--tile-ring),inset 0 0 0 1px #ffffff14;vertical-align:middle}
.character-tile.tile-small{width:22px;height:28px;border-radius:7px}
.character-tile.tile-large{width:44px;height:57px;border-radius:14px}
.character-tile-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.character-tile .bot-character{position:absolute;inset:0;width:100%!important;height:100%!important;margin:0!important}
.character-tile .bot-character>svg{overflow:hidden!important}
.character-tile :is(.mini-signal,.sleep-marks,.happy-spark,.character-orbit,.illustrated-status,.illustrated-dream,.crew-badge,.bot-character>svg>ellipse:first-child){display:none!important}
/* Resting miniatures stay upright with closed eyes: a bed does not fit a standing tile. */
.character-tile .miniature-character:is([data-mood=sleeping],[data-mood=offline]) .mini-pose{transform:none!important;animation:none!important}
.character-tile .miniature-character .mini-bed{display:none}
.character-tile[data-mood=busy]{--tile-ring:var(--accent,#acccff)}.character-tile[data-mood=waiting]{--tile-ring:#e2c07f}.character-tile[data-mood=happy]{--tile-ring:#92d6b4}.character-tile[data-mood=error]{--tile-ring:#ef8f98}
.character-tile:is([data-mood=sleeping],[data-mood=offline]) .character-tile-clip{filter:saturate(.75) brightness(.95)}
.character-tile-badge{position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;display:none;place-items:center;border:2px solid var(--sidebar,#101520);font-style:normal}
.character-tile-badge svg{width:78%;height:78%}
.tile-small .character-tile-badge{width:11px;height:11px;right:-4px;top:-4px;border-width:1.5px}
.character-tile:is([data-mood=busy],[data-mood=waiting],[data-mood=happy],[data-mood=error],[data-mood=sleeping]) .character-tile-badge{display:grid}
.character-tile[data-mood=busy] .character-tile-badge{background:#1d2a40}.character-tile[data-mood=busy] .character-tile-badge svg{animation:crew-spin 1.1s linear infinite}
.character-tile[data-mood=waiting] .character-tile-badge{background:#e2c07f;animation:crew-pulse 1.6s ease-in-out infinite}
.character-tile[data-mood=happy] .character-tile-badge{background:#92d6b4}.character-tile[data-mood=error] .character-tile-badge{background:#ef8f98}.character-tile[data-mood=sleeping] .character-tile-badge{background:#2a3446}
.tile-tint-0{--tile-tint:#7fa8ff}.tile-tint-1{--tile-tint:#56cfb2}.tile-tint-2{--tile-tint:#b99bff}.tile-tint-3{--tile-tint:#ffb56b}.tile-tint-4{--tile-tint:#ff8d8d}.tile-tint-5{--tile-tint:#f0cf5e}.tile-tint-6{--tile-tint:#7fd6ff}.tile-tint-7{--tile-tint:#f59fc8}
body.motion-paused .character-tile *{animation:none!important}
@media(prefers-reduced-motion:reduce){.character-tile *{animation:none!important}}
body.light .character-tile{background:linear-gradient(180deg,color-mix(in srgb,var(--tile-tint) 14%,#fff),color-mix(in srgb,var(--tile-tint) 30%,#fff))}
.character-tile.tile-message{width:28px;height:36px;border-radius:9px;margin-top:-2px}
.chief-resident-card>span.character-tile{display:inline-block;flex:none;gap:0}
.bot-item>.character-tile,.task-row>.character-tile,.approval-card header>.character-tile,.chat-header>.character-tile{flex:none}
/* One face and one badge per mood are drawn; show the current one (offline looks like resting). */
.crew-character :is(.crew-face,.crew-badge>g){display:none}
.crew-character:is([data-mood=idle],:not([data-mood])) .crew-face-idle,.crew-character[data-mood=busy] :is(.crew-face-busy,.crew-badge-busy),.crew-character[data-mood=waiting] :is(.crew-face-waiting,.crew-badge-waiting),.crew-character[data-mood=happy] :is(.crew-face-happy,.crew-badge-happy),.crew-character[data-mood=error] :is(.crew-face-error,.crew-badge-error),.crew-character:is([data-mood=sleeping],[data-mood=offline]) :is(.crew-face-sleeping,.crew-badge-sleeping){display:inline}