/* A square source cell per shape, clipped inside a circle at every size. */
.robot-art{display:block;position:relative;width:100%;height:100%;aspect-ratio:1;flex-shrink:0;overflow:hidden;border-radius:50%;background:#000;isolation:isolate}
.robot-portrait{display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden;filter:var(--robot-tint,brightness(1)) contrast(1.12);transform:none}
.robot-sprite{display:block;position:relative;width:100%;height:100%;background-image:url('./assets/bots-3d-v67-3.webp');background-size:400% 200%;background-position:var(--robot-x,0%) var(--robot-y,0%);background-repeat:no-repeat;transform:scale(1.16);transform-origin:50% 50%}
/* Optical centers compensate for the different head silhouettes in the atlas. */
.robot-art[data-shape="0"]{--robot-x:1.4%;--robot-y:2%}
.robot-art[data-shape="1"]{--robot-x:32%;--robot-y:4%}
.robot-art[data-shape="2"]{--robot-x:65%;--robot-y:3%}
.robot-art[data-shape="3"]{--robot-x:97.3%;--robot-y:8%}
.robot-art[data-shape="4"]{--robot-x:1.2%;--robot-y:92.5%}
.robot-art[data-shape="5"]{--robot-x:31.8%;--robot-y:93%}
.robot-art[data-shape="6"]{--robot-x:64.6%;--robot-y:92%}
.robot-art[data-shape="7"]{--robot-x:97.2%;--robot-y:89.5%}
.robot-art[data-color="0"]{--robot-tint:grayscale(1) brightness(1.8)}
.robot-art[data-color="1"]{--robot-tint:hue-rotate(170deg) saturate(.6) brightness(.78)}
.robot-art[data-color="2"]{--robot-tint:hue-rotate(125deg) saturate(1.2)}
.robot-art[data-color="3"]{--robot-tint:hue-rotate(160deg) saturate(1.35) brightness(1.1)}
.robot-art[data-color="4"]{--robot-tint:hue-rotate(185deg) saturate(1.25) brightness(1.35)}
.robot-art[data-color="5"]{--robot-tint:hue-rotate(265deg) saturate(.9) brightness(1.1)}
.robot-art[data-color="6"]{--robot-tint:hue-rotate(305deg) saturate(.9) brightness(1.08)}
.robot-art[data-color="8"]{--robot-tint:hue-rotate(40deg)}
.robot-art[data-color="9"]{--robot-tint:hue-rotate(85deg) saturate(1.1)}
.robot-art[data-color="10"]{--robot-tint:grayscale(1) brightness(1.1)}
.avatar,.avatar.big,.avatar.small{border-radius:50%;overflow:hidden;background:#000;aspect-ratio:1}
.avatar::after{display:block;content:'';position:absolute;inset:0;border:1px solid #ffffff12;border-radius:inherit;pointer-events:none}
.avatar-svg.robot-contact{display:inline-block;vertical-align:middle;flex:none;border-radius:50%;overflow:hidden}
.shape-choice .robot-art{width:100%;height:100%}
.bot-creator .shape-choice{padding:0}
.bot-creator .shape-choice[aria-pressed=true]{outline-color:var(--text)}
.bot-creator .shape-choice:hover{transform:translateY(-2px)}
.bot-creator .shape-choice:active{transform:scale(.96)}
.shape-choice{transition:transform .18s ease,outline-color .18s ease}
/* Face blinking remains independent of the occasional arm wave. */
.robot-art{box-shadow:inset 0 0 0 1px #ffffff12}
.robot-sprite::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:url('./assets/bots-blink-v67-4.webp');background-size:400% 200%;background-position:var(--robot-x,0%) var(--robot-y,0%);background-repeat:no-repeat;clip-path:var(--blink-clip);opacity:0}
.robot-art[data-shape="0"]{--blink-clip:inset(43.998% 41.291% 45.856% 34.357% round 1%)}
.robot-art[data-shape="1"]{--blink-clip:inset(37.488% 38.165% 46.728% 37.033% round 1%)}
.robot-art[data-shape="2"]{--blink-clip:inset(36.008% 39.532% 51.816% 36.116% round 1%)}
.robot-art[data-shape="3"]{--blink-clip:inset(33.037% 38.349% 54.336% 37.300% round 1%)}
.robot-art[data-shape="4"]{--blink-clip:inset(39.856% 40.466% 47.742% 35.408% round 1%)}
.robot-art[data-shape="5"]{--blink-clip:inset(36.651% 38.016% 49.821% 37.858% round 1%)}
.robot-art[data-shape="6"]{--blink-clip:inset(42.386% 36.754% 46.791% 37.542% round 1%)}
.robot-art[data-shape="7"]{--blink-clip:inset(41.954% 38.049% 44.291% 39.178% round 1%)}
@keyframes robot-blink{0%,94%,97%,100%{opacity:0}94.7%,96.1%{opacity:1}}
@media(prefers-reduced-motion:no-preference){html:not([data-motion="off"]):not([data-character-motion="off"]) :is(.conversation-row,.chat-identity,.bot-preview,.thread-welcome,.welcome-scene,.working-line) .robot-sprite::after{animation:robot-blink 8s var(--robot-delay,0s) linear infinite}}
:is([data-motion="off"],[data-character-motion="off"]) .robot-sprite::after{animation:none!important;opacity:0}
.preview-background .robot-sprite::after{animation-play-state:paused!important}
/* The welcome scene also keeps its robot bodies still. */
html .orbit-bot{animation:none!important}
@media(prefers-reduced-motion:reduce){.robot-sprite::after{animation:none!important;opacity:0}.shape-choice{transition:none}}

/* Approved arm-frame waves; original bodies and black bubbles stay stationary. */
.robot-art[data-shape="0"] .robot-sprite::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url('./assets/bots-wave-circle-v68-2.webp');background-size:400% 200%;background-repeat:no-repeat;background-position:1.4% 2%;clip-path:polygon(59% 66%,65% 64%,69% 58%,69% 44%,95% 44%,95% 90%,59% 90%);opacity:0}
@keyframes robot-wave-frames{0%{background-position:1.4% 2%;opacity:0}80%{background-position:1.4% 2%;opacity:0}81%{background-position:33.644% 2%;opacity:1}82%{background-position:65.511% 2%;opacity:1}83%{background-position:97.979% 2%;opacity:1}84%{background-position:1.4% 96.02%;opacity:1}85%{background-position:33.644% 96.02%;opacity:1}86%{background-position:1.4% 96.02%;opacity:1}87%{background-position:33.644% 96.02%;opacity:1}88%{background-position:97.979% 2%;opacity:1}89%{background-position:65.511% 96.02%;opacity:1}90%{background-position:33.644% 2%;opacity:1}91%{background-position:1.4% 2%;opacity:0}100%{background-position:1.4% 2%;opacity:0}}
@media(prefers-reduced-motion:no-preference){html:not([data-character-motion="off"]):not([data-motion="off"]) :is(.conversation-row,.chat-identity,.thread-welcome,.welcome-scene,.bot-preview,.working-line) .robot-art[data-shape="0"] .robot-sprite::before{animation:robot-wave-frames 12s -9s steps(1,end) infinite}}
:is([data-character-motion="off"],[data-motion="off"]) .robot-art .robot-sprite::before{animation:none!important;opacity:0}
.preview-background .robot-sprite::before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.robot-art .robot-sprite::before{animation:none!important;opacity:0}}

/* The seven additional shapes share pose atlases, with their own arm masks and rhythms. */
.robot-art:not([data-shape="0"]) .robot-sprite::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url('./assets/bots-wave-mid-v68-2.webp');background-size:400% 200%;background-repeat:no-repeat;background-position:var(--robot-x) var(--robot-y);clip-path:var(--wave-clip);opacity:0}
.robot-art[data-shape="1"]{--wave-clip:polygon(58% 61%,65% 59%,72% 55%,75% 34%,97% 34%,97% 91%,59% 91%);--wave-duration:14s;--wave-delay:-10.3s}
.robot-art[data-shape="2"]{--wave-clip:polygon(58% 60%,67% 58%,76% 54%,77% 31%,97% 31%,97% 91%,60% 91%);--wave-duration:13s;--wave-delay:-9s}
.robot-art[data-shape="3"]{--wave-clip:polygon(60% 59%,70% 56%,81% 53%,84% 32%,98% 32%,98% 91%,62% 91%);--wave-duration:15s;--wave-delay:-11s}
.robot-art[data-shape="4"]{--wave-clip:polygon(57% 61%,65% 59%,73% 56%,73% 41%,97% 41%,97% 91%,59% 91%);--wave-duration:17s;--wave-delay:-12.2s}
.robot-art[data-shape="5"]{--wave-clip:polygon(57% 61%,66% 58%,77% 54%,79% 36%,97% 36%,97% 91%,59% 91%);--wave-duration:16s;--wave-delay:-10.8s}
.robot-art[data-shape="6"]{--wave-clip:polygon(57% 63%,66% 60%,78% 55%,79% 37%,98% 37%,98% 91%,59% 91%);--wave-duration:13.5s;--wave-delay:-8.8s}
.robot-art[data-shape="7"]{--wave-clip:polygon(59% 64%,67% 61%,75% 57%,78% 39%,98% 39%,98% 92%,61% 92%);--wave-duration:18s;--wave-delay:-12s}
@keyframes robot-friends-wave{
0%,79.9%{background-image:url('./assets/bots-wave-mid-v68-2.webp');opacity:0}
80%{background-image:url('./assets/bots-wave-mid-v68-2.webp');opacity:1}
81.3%{background-image:url('./assets/bots-wave-up-v68-2.webp');opacity:1}
82.6%{background-image:url('./assets/bots-wave-out-v68-2.webp');opacity:1}
84%{background-image:url('./assets/bots-wave-up-v68-2.webp');opacity:1}
85.3%{background-image:url('./assets/bots-wave-out-v68-2.webp');opacity:1}
86.6%{background-image:url('./assets/bots-wave-up-v68-2.webp');opacity:1}
88%{background-image:url('./assets/bots-wave-mid-v68-2.webp');opacity:1}
89.3%,100%{background-image:url('./assets/bots-wave-mid-v68-2.webp');opacity:0}
}
@media(prefers-reduced-motion:no-preference){html:not([data-character-motion="off"]):not([data-motion="off"]) :is(.conversation-row,.chat-identity,.thread-welcome,.welcome-scene,.bot-preview,.working-line) .robot-art:not([data-shape="0"]) .robot-sprite::before{animation:var(--wave-name,robot-friends-wave) var(--wave-duration) var(--wave-delay) steps(1,end) infinite}}
:is([data-character-motion="off"],[data-motion="off"]) .robot-art:not([data-shape="0"]) .robot-sprite::before{animation:none!important;opacity:0}
@media(prefers-reduced-motion:reduce){.robot-art:not([data-shape="0"]) .robot-sprite::before{animation:none!important;opacity:0}}

.robot-art:is([data-shape="2"],[data-shape="4"],[data-shape="5"],[data-shape="7"]){--wave-name:robot-friends-single-wave}
@keyframes robot-friends-single-wave{0%,79.9%{background-image:url('./assets/bots-wave-mid-v68-2.webp');opacity:0}80%{background-image:url('./assets/bots-wave-mid-v68-2.webp');opacity:1}81.3%{background-image:url('./assets/bots-wave-up-v68-2.webp');opacity:1}83.3%{background-image:url('./assets/bots-wave-out-v68-2.webp');opacity:1}85.3%{background-image:url('./assets/bots-wave-up-v68-2.webp');opacity:1}87.3%{background-image:url('./assets/bots-wave-mid-v68-2.webp');opacity:1}89.3%,100%{background-image:url('./assets/bots-wave-mid-v68-2.webp');opacity:0}}