/* The portrait and robot share one frame, so the layout never shifts. */
.profile-photo { padding:4px;display:block;cursor:pointer;appearance:none; }
.profile-photo img { transition:opacity .25s ease,transform .35s ease; }
.robot-face { position:absolute;inset:4px;z-index:3;border-radius:20px;background:#191525;display:flex;align-items:center;justify-content:center;gap:13px;opacity:0;transform:scale(.93);transition:opacity .25s ease,transform .35s ease;pointer-events:none; }
.robot-face::after { content:'';position:absolute;left:50%;bottom:20%;width:14px;height:4px;border-bottom:2px solid #9480c9;border-radius:0 0 50% 50%;transform:translateX(-50%); }
.robot-eye { width:23px;height:31px;border-radius:9px;background:#beaaff;box-shadow:0 0 14px #aa84ff45;transform:translate(var(--eye-x,0px),var(--eye-y,0px));transition:transform .16s ease-out;overflow:hidden; }
.robot-eye::after { content:'';display:block;width:6px;height:8px;margin:5px 0 0 5px;border-radius:50%;background:#ffffffad; }
.profile-photo[data-robot=true] img { opacity:0;transform:scale(.94); }
.profile-photo[data-robot=true] .robot-face { opacity:1;transform:scale(1); }
.profile-photo[data-robot=true] .robot-eye { animation:robot-blink 5.8s ease-in-out infinite; }
@keyframes robot-blink { 0%,8%,12%,72%,76%,100%{scale:1 1}10%,74%{scale:1 .1} }
body[data-background-paused=true] .robot-eye,body[data-page-hidden=true] .robot-eye { animation-play-state:paused!important; }
@media(max-width:820px) { .robot-face{border-radius:18px;gap:11px}.robot-eye{width:20px;height:27px;border-radius:8px} }
@media(prefers-reduced-motion:reduce) { .profile-photo img,.robot-face,.robot-eye{transition:none!important;animation:none!important} }