/* Miniatures: one whole painted figure per mood. CSS shows the frame for the current mood and adds gentle motion. */
.miniature-character{color:#9dc5fd}
.miniature-character>svg{overflow:visible}
.miniature-character .mini-frame{display:none}
.bot-character .mini-frame>svg,.bot-character .mini-blink>svg{width:auto;height:auto;overflow:hidden}
.miniature-character:is([data-mood=idle],[data-mood=offline]) .mini-frame-idle,
.miniature-character[data-mood=busy] .mini-frame-busy,
.miniature-character[data-mood=waiting] .mini-frame-waiting,
.miniature-character[data-mood=happy] .mini-frame-happy,
.miniature-character[data-mood=error] .mini-frame-sad,
.miniature-character[data-mood=sleeping] .mini-frame-sleeping{display:inline}
/* A sleeper in a small tile shows the face, with the sleep badge, rather than a tiny figure lying down. */
.character-tile .miniature-character[data-mood=sleeping] .mini-frame-sleeping{display:none}
.character-tile .miniature-character[data-mood=sleeping] .mini-frame-idle{display:inline}
.miniature-character[data-mood=sleeping] .mini-ground{opacity:0}

/* Two layers of motion with different rhythms, so it never looks mechanical: the body (.mini-root) breathes,
   bobs or bounces from the feet, and the whole figure (.mini-pose) shifts its weight slowly on top. */
.mini-root{transform-origin:50px 104px;animation:mini-breathe calc(var(--motion-body,5s) * .8) ease-in-out var(--motion-phase,0s) infinite}
.mini-pose{transform-origin:50px 104px}
.miniature-character:not(.mini-waking):is([data-mood=idle],[data-mood=waiting],[data-mood=busy]) .mini-pose{animation:mini-weight calc(var(--motion-body,5s) * 1.5) ease-in-out var(--motion-phase,0s) infinite}
.miniature-character[data-mood=busy] .mini-root{animation:mini-busy 1.1s ease-in-out var(--motion-phase,0s) infinite}
.miniature-character[data-mood=waiting] .mini-root{animation:mini-sway 2.8s ease-in-out var(--motion-phase,0s) infinite}
.miniature-character[data-mood=happy] .mini-root{animation:mini-hop 1.15s cubic-bezier(.3,.6,.4,1) var(--motion-phase,0s) infinite}
.miniature-character[data-mood=error] .mini-root{animation:mini-sag 3.6s ease-in-out var(--motion-phase,0s) infinite}
.miniature-character[data-mood=sleeping] .mini-root{transform-origin:50px 101px;animation:mini-sleep-breathe 5.8s ease-in-out infinite}
@keyframes mini-breathe{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-.6px) scale(.996,1.015)}}
@keyframes mini-weight{0%,100%{transform:rotate(-.6deg) translateX(-.2px)}50%{transform:rotate(.6deg) translateX(.2px)}}
@keyframes mini-busy{0%,100%{transform:translateY(0) rotate(0) scale(1,1)}25%{transform:translateY(-1px) rotate(-.5deg) scale(.995,1.01)}50%{transform:translateY(0) rotate(0) scale(1.005,.995)}75%{transform:translateY(-.7px) rotate(.5deg) scale(.995,1.008)}}
@keyframes mini-sway{0%,100%{transform:rotate(-1deg) translateX(-.35px)}30%{transform:rotate(-1.2deg) translateX(-.4px)}50%{transform:rotate(1deg) translateX(.35px)}80%{transform:rotate(1.2deg) translateX(.4px)}}
@keyframes mini-hop{0%,100%{transform:translateY(0) scale(1,1)}12%{transform:translateY(0) scale(1.06,.93)}35%{transform:translateY(-9px) scale(.96,1.06) rotate(-2deg)}55%{transform:translateY(0) scale(1.05,.95)}68%{transform:translateY(-2.5px) scale(.99,1.01) rotate(1deg)}80%{transform:translateY(0) scale(1,1)}}
@keyframes mini-sag{0%,100%{transform:translateY(0) scale(1,1) rotate(0)}50%{transform:translateY(1.5px) scale(1.01,.97) rotate(-1.5deg)}}
@keyframes mini-sleep-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.003,1.012)}}
.miniature-character.mini-resting-upright .mini-frame-sleeping{display:none}
.miniature-character.mini-resting-upright .mini-frame-idle{display:inline}
.miniature-character.mini-resting-upright{filter:saturate(.72) brightness(.9)}
.miniature-character.mini-resting-upright .mini-sleep-mark{opacity:.42}
.miniature-character[data-mood=offline]{filter:saturate(.4);opacity:.7}
.miniature-character[data-mood=offline] .mini-root{animation:none}
.miniature-character[data-motion-action=think] .mini-root{animation:mini-sway var(--gesture-duration) ease-in-out var(--gesture-phase) 1}
.miniature-character[data-motion-action=nod] .mini-root{animation:mini-busy var(--gesture-duration) ease-in-out var(--gesture-phase) 1}
.miniature-character[data-motion-action=stretch] .mini-root{animation:mini-hop var(--gesture-duration) ease-in-out var(--gesture-phase) 1}
.miniature-character.mini-waking .mini-pose{animation:mini-rise 1s cubic-bezier(.22,.7,.3,1) var(--wake-progress,0s) both}
@keyframes mini-rise{0%{opacity:.35;transform:translateY(6px) scale(.96)}100%{opacity:1;transform:none}}

.mini-signal>*{opacity:0}
.miniature-character[data-mood=sleeping] .mini-sleep-mark,.miniature-character[data-mood=happy] .mini-done-mark{opacity:.65}
.miniature-character[data-mood=sleeping] .mini-sleep-mark{animation:mini-dream var(--motion-dream,4.5s) ease-out var(--motion-phase,0s) infinite}
.miniature-character[data-mood=sleeping] .mini-sleep-mark.z-two{animation-delay:calc(var(--motion-phase,0s) - 1.4s)}
.miniature-character[data-mood=sleeping] .mini-sleep-mark.z-three{animation-delay:calc(var(--motion-phase,0s) - 2.8s)}
@keyframes mini-dream{0%{opacity:0;transform:translate(0,4px)}20%,55%{opacity:.8}100%{opacity:0;transform:translate(3px,-10px)}}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) .miniature-character *{animation:none!important;transition:none!important}}
body.motion-paused .miniature-character *{animation:none!important;transition:none!important}

/* Character library and settings around the miniatures. */
.library-styles{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.library-styles [aria-pressed=true],.miniature-library [aria-pressed=true]{border-color:var(--accent);background:var(--raised)}
.miniature-library{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.miniature-library button{display:flex;flex-direction:column;align-items:center;background:var(--paper);padding:14px 8px 16px;min-width:0}
.miniature-library .bot-character{width:120px;height:130px}
.miniature-library strong{font-size:14px}
.miniature-library small{font-size:10px}
.style-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
.style-preview .miniature-character{width:125px;height:135px}
#expression-preview{scroll-margin-top:25px}
@media(max-width:720px){.miniature-library{grid-template-columns:repeat(2,minmax(0,1fr))}.miniature-library .bot-character{width:110px;height:120px}.style-choices{grid-template-columns:1fr}.library-styles button{font-size:11px;padding:9px}}
.quick-customize{display:flex;gap:6px;padding:10px 0;border-top:1px solid var(--line,#273144)}
.quick-customize button{display:flex;align-items:center;gap:6px;flex:1;padding:10px 8px;font-size:12px;background:transparent}
.quick-customize svg,.customize-hub svg{width:20px;height:20px;flex-shrink:0}
.customize-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:24px}
.customize-hub button{display:flex;align-items:center;gap:14px;text-align:left;padding:18px}
.customize-hub span{display:grid;gap:6px}
.customize-hub small{font-size:12px;color:var(--muted)}
.sleep-demo{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.sleep-demo .bot-character{width:170px;height:170px}
.sleep-demo p{color:var(--muted);font-size:13px}
@media(max-width:720px){.customize-hub{grid-template-columns:1fr}.sleep-demo .bot-character{width:130px;height:130px}.sleep-demo{gap:10px}}
.profile-skills{border:1px solid var(--line);border-radius:12px;padding:16px;margin:18px 0}
.profile-skills label{display:flex;gap:8px;padding:7px;font-size:13px}
.profile-skills p{font-size:12px;color:var(--muted)}
.workspace-choose{display:flex;align-items:center;gap:6px;max-width:210px;overflow:hidden;text-overflow:ellipsis}
.workspace-choose svg{width:17px;height:17px;flex-shrink:0}
.library-activity{display:flex;align-items:center;gap:14px;margin:18px 0;font-size:13px}
.library-activity select{padding:8px 12px;border-radius:10px;background:var(--paper);color:var(--text);border:1px solid var(--line)}
/* Blinks: a quick eyes-closed moment every few seconds, on each character's own rhythm. */
.mini-blink{opacity:0}
.miniature-character[data-mood=idle] .mini-frame-idle .mini-blink{animation:mini-blink var(--motion-blink,5.5s) steps(1,end) var(--motion-phase,0s) infinite}
@keyframes mini-blink{0%,93.9%,98%,100%{opacity:0}94%,97.9%{opacity:1}}

/* Existing painted poses carry expressions; no artwork or facial geometry is replaced. */
.miniature-character[data-mood=happy] .mini-root{animation:mini-breathe var(--motion-body,5s) ease-in-out var(--motion-phase,0s) infinite}
.miniature-character[data-activity=thinking] .mini-frame-busy{display:none}
.miniature-character[data-activity=thinking] .mini-frame-waiting{display:inline}
.miniature-character[data-activity=thinking] .mini-root{animation:mini-consider calc(var(--motion-body,5s) * 2) ease-in-out var(--motion-phase,0s) infinite}
.miniature-character:is([data-activity=talking],[data-activity=responding]) .mini-root{animation:mini-converse calc(var(--motion-body,5s) * .65) ease-in-out var(--motion-phase,0s) infinite}
.miniature-character[data-activity=celebrating] .mini-root{animation:mini-celebrate 1.6s ease-out var(--celebration-phase,0s) 1 both}
@keyframes mini-consider{0%,100%{transform:rotate(0)}40%,55%{transform:rotate(-1.5deg) translateY(-.5px)}}
@keyframes mini-converse{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-1px) rotate(1deg)}65%{transform:rotate(-.7deg)}}
@keyframes mini-celebrate{0%,100%{transform:none}20%{transform:translateY(-3px) rotate(-1deg)}45%{transform:none}65%{transform:translateY(-1px) rotate(1deg)}}

.miniature-character[data-activity=working] .mini-root{animation-duration:calc(var(--motion-body,2s) * 1.4)}