/* The mascot remains freestanding. Only a temporary speech bubble has a surface. */
.lesson-guide.mascot-dialog{position:relative;top:auto;flex-direction:row-reverse;align-items:center;height:104px;width:calc(100% - 50px);max-width:590px;margin:8px auto 0;padding:0;background:none;border:0;box-shadow:none;gap:16px;z-index:2}
.mascot-dialog .guide-art{width:112px;height:112px;padding:0;background:transparent;border:0;box-shadow:none;border-radius:24px;cursor:pointer;transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.mascot-dialog .guide-art:hover{background:transparent;transform:translateY(-3px)}
.mascot-dialog .guide-art:active{transform:translateY(1px) scale(.97)}
.mascot-dialog .guide-art:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mascot-dialog .guide-copy{position:relative;flex:0 1 320px;max-width:320px;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(7px) translateY(4px) scale(.97);transform-origin:right center;transition:opacity .24s ease,transform .32s cubic-bezier(.2,.75,.25,1),visibility 0s linear .24s}
.mascot-dialog .guide-copy.is-speaking{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0) scale(1);transition-delay:0s}
.mascot-dialog .guide-bubble{position:relative;display:block;padding:16px 34px 16px 18px;margin:0;background:var(--surface);border:1px solid var(--border);border-radius:18px;color:var(--ink);box-shadow:0 5px 20px rgb(28 57 43 / 5%);font-size:14px;font-weight:500;line-height:1.55;text-align:left;text-wrap:pretty}
.mascot-dialog .guide-bubble:after{content:"";position:absolute;right:-6px;top:calc(50% - 6px);width:10px;height:10px;background:var(--surface);border-top:1px solid var(--border);border-right:1px solid var(--border);transform:rotate(45deg);border-radius:0 2px 0 0}
.mascot-dismiss{position:absolute;right:5px;top:3px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:1;opacity:.7;cursor:pointer}
.mascot-dismiss:hover{opacity:1;background:var(--soft)}
.mascot-dismiss:focus-visible{outline:2px solid var(--accent)}
.mascot-dialog .guide-character{animation:none}
.mascot-dialog .guide-character.react-pat{animation:mascot-pat .85s cubic-bezier(.25,.65,.3,1) both}
.mascot-dialog .guide-character.react-ok,.mascot-dialog .guide-character.react-milestone{animation:mascot-joy .9s cubic-bezier(.25,.65,.3,1) both}
.mascot-dialog .guide-character.react-miss{animation:mascot-support 1s ease-in-out both}
@keyframes mascot-pat{0%,100%{transform:rotate(0)}35%{transform:rotate(-5deg) translateY(-3px)}70%{transform:rotate(3deg)}}
@keyframes mascot-joy{0%,100%{transform:translateY(0)}40%{transform:translateY(-9px) rotate(-3deg)}72%{transform:translateY(0) scale(1.015,.985)}}
@keyframes mascot-support{0%,100%{transform:rotate(0)}45%{transform:rotate(-4deg) translateY(2px)}}
@media(max-width:760px){
 .lesson-guide.mascot-dialog{width:calc(100% - 36px);height:104px;gap:10px}
 .mascot-dialog .guide-art{width:96px;height:96px}
 .mascot-dialog .guide-copy{flex:1;max-width:300px}
 .mascot-dialog .guide-bubble{padding:12px 26px 12px 13px;border-radius:15px;font-size:12px;line-height:1.5}
 .mascot-dismiss{right:1px;top:1px;width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){.mascot-dialog .guide-character{animation:none!important}.mascot-dialog .guide-art,.mascot-dialog .guide-copy{transition:none!important;transform:none!important}}

/* Size the speech bubble to its text, wrapping only at the available limit. */
.lesson-guide.mascot-dialog .guide-copy{flex:0 1 auto;width:max-content;max-width:min(320px,calc(100% - 128px))}
.lesson-guide.mascot-dialog .guide-bubble{padding:12px 16px;text-wrap:wrap}
@media(max-width:760px){.lesson-guide.mascot-dialog .guide-copy{flex:0 1 auto;max-width:calc(100% - 106px)}.lesson-guide.mascot-dialog .guide-bubble{padding:10px 13px}}

.mascot-dialog .guide-character.react-streak{animation:mascot-joy .9s cubic-bezier(.25,.65,.3,1) both}
.mascot-dialog .guide-character.react-perfect{animation:mascot-perfect 1.2s cubic-bezier(.25,.65,.3,1) both}
.mascot-dialog .guide-character.react-recovery{animation:mascot-pat .85s ease-in-out both}
.mascot-dialog .guide-character.react-support{animation:mascot-support 1s ease-in-out both}
@keyframes mascot-perfect{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-12px) rotate(-4deg)}58%{transform:translateY(0)}78%{transform:translateY(-5px) rotate(3deg)}}