/* Six poses of the same reference character, in a 3 × 2 transparent atlas. */
.assistant-sprite {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background: url('../img/assistant/xiaolu-states.png') 0 0 / 300% 200% no-repeat;
}
[data-pose="welcome"] { background-position: 50% 0; }
[data-pose="listening"] { background-position: 100% 0; }
[data-pose="thinking"] { background-position: 0 100%; }
[data-pose="explaining"] { background-position: 50% 100%; }
[data-pose="success"] { background-position: 100% 100%; }
.assistant-character { display: block; position: relative; width: 100%; aspect-ratio: 1; pointer-events: none; }
.assistant-pose, .assistant-aligned, .assistant-motion { position: absolute; inset: 0; display: block; }
.assistant-pose { opacity: 0; transition: opacity 360ms ease-in-out; pointer-events: none; }
.assistant-character[data-pose="idle"] [data-character-pose="idle"],
.assistant-character[data-pose="welcome"] [data-character-pose="welcome"],
.assistant-character[data-pose="listening"] [data-character-pose="listening"],
.assistant-character[data-pose="thinking"] [data-character-pose="thinking"],
.assistant-character[data-pose="explaining"] [data-character-pose="explaining"],
.assistant-character[data-pose="success"] [data-character-pose="success"] { opacity: 1; }
/* Feet midpoint -> (256, 502), in each original 512px cell. */
[data-character-pose="idle"] { --align-x: -3.22265625%; --align-y: 0%; }
[data-character-pose="welcome"] { --align-x: 3.22265625%; --align-y: 0%; }
[data-character-pose="listening"] { --align-x: 2.24609375%; --align-y: 0%; }
[data-character-pose="thinking"] { --align-x: -3.90625%; --align-y: 1.3671875%; }
[data-character-pose="explaining"] { --align-x: 2.83203125%; --align-y: 1.3671875%; }
[data-character-pose="success"] { --align-x: 2.734375%; --align-y: 1.3671875%; }
.assistant-aligned { transform: translate(var(--align-x), var(--align-y)); }
.assistant-motion { transform-origin: calc(50% - var(--align-x)) calc(98.046875% - var(--align-y)); animation: assistant-breathe 4s ease-in-out infinite; }
.assistant-motion > .assistant-sprite { position: absolute; inset: 0; }
[data-character-pose="welcome"] .assistant-motion { animation: assistant-greet 2.4s ease-in-out infinite; }
[data-character-pose="listening"] .assistant-motion { animation: assistant-listen 3.6s ease-in-out infinite; }
[data-character-pose="thinking"] .assistant-motion { animation: assistant-think 4.4s ease-in-out infinite; }
[data-character-pose="explaining"] .assistant-motion { animation: assistant-explain 3.2s ease-in-out infinite; }
[data-character-pose="success"] .assistant-motion { animation: assistant-affirm 2.8s ease-in-out infinite; }
/* Deform the hand on the intact sprite; never cut through shoulder or elbow. */
[data-character-pose="welcome"] .assistant-body { filter: url('#assistant-wave-filter'); }
.floating-button {
    width: 256px; height: 256px; left: 10px; bottom: 14px;
    padding: 0; display: block; border-radius: 16px; isolation: isolate;
    background: transparent; border: 0;
}
.floating-button .assistant-character { filter: drop-shadow(0 5px 8px #0006); }
.chat-dialog {
    bottom: 282px; height: min(570px, calc(100dvh - 300px));
    border: 1px solid #b8ad91; border-radius: 18px; overflow: hidden;
    background: #fcfbf8; box-shadow: 0 16px 60px #0005;
}
.chat-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f0eee5; border-bottom: 1px solid #dedacc; }
.assistant-avatar { width: 46px; height: 46px; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: #dcded2; }
.assistant-avatar .assistant-sprite { width: 140px; max-width: none; transform: translate(-47px, -6px); }
.chat-title { font-size: 17px; color: #30382b; }
.assistant-status { display: block; margin-top: 4px; color: #636a5a; font-size: 12px; }
.assistant-close { margin-left: auto; border: 0; background: transparent; color: #535a4d; font-size: 26px; line-height: 1; cursor: pointer; padding: 8px; }
.assistant-close:focus-visible { outline: 2px solid #817345; border-radius: 6px; }
.chat-content { min-height: 0; }
.assistant-message { background: #eeeee5; color: #30382b; }
.user-message { background: #586348; }
.chat-input { gap: 10px; padding: 12px; border-color: #dedacc; }
.chat-input textarea { min-width: 0; height: 46px; max-height: 120px; font-size: 14px; }
.chat-input button { background: #586348; font-size: 14px; }
.chat-input button:disabled { opacity: .6; cursor: wait; }
/* All movement pivots at the soles: no translateY bobbing or moving hit area. */
@keyframes assistant-breathe { 50% { transform: scaleY(1.007); } }
@keyframes assistant-greet { 50% { transform: skewX(-.35deg) scaleY(1.004); } }
@keyframes assistant-listen { 35%, 65% { transform: skewX(.45deg) scaleY(.996); } }
@keyframes assistant-think { 50% { transform: skewX(-.35deg) scaleY(1.004); } }
@keyframes assistant-explain { 25% { transform: skewX(-.4deg) scaleY(1.008); } 70% { transform: skewX(.25deg); } }
@keyframes assistant-affirm { 20%, 55% { transform: scaleY(.989); } 38%, 72% { transform: scaleY(1.006); } }
@media (max-width: 640px) {
    .floating-button { width: 192px; height: 192px; left: 8px; bottom: 10px; }
    .chat-dialog { left: 12px; width: calc(100vw - 24px); bottom: 214px; height: min(520px, calc(100dvh - 230px)); }
}
@media (max-height: 560px) and (min-width: 641px) {
    .chat-dialog { left: 278px; bottom: 16px; width: min(450px, calc(100vw - 294px)); height: calc(100dvh - 32px); }
}
@media (prefers-reduced-motion: reduce) {
    .assistant-motion { animation: none !important; }
    [data-character-pose="welcome"] .assistant-body { filter: none; }
    .assistant-pose { transition: none; }
}