/* The SVG files own motion and reduced-motion behavior. Host layout remains still. */
.mascot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}
.mascot .lightdrop{display:block;width:100%;height:100%;object-fit:contain;animation:none!important;overflow:hidden}
.mascot-hero{width:240px;height:222px;max-width:100%}
.mascot-compact{width:96px;height:88px}
.mascot-mini{width:56px;height:52px}
.lightdrop-role{height:225px}
#modalBody>.mascot{float:right;margin:0 4px 4px 10px}
#modalBody>.mascot~h2{clear:both}
.mascot-chat-status{display:flex;align-items:center;gap:5px;height:30px;color:var(--muted);font-size:11px}
.mascot-chat-status .mascot{width:34px;height:30px}
.mascot-result-note{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-top:-16px}
.mascot-continue,.adopted-note{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:11px}
#toast{display:flex;align-items:center;gap:6px}
.change-heading>.mascot{width:46px;height:44px}
@media(max-width:380px){.change-heading{gap:8px}.change-heading img{width:42px}}