/* Mascot colours come from the page: --m-c1..3 (body), --m-ink (face), --m-glow. */
.mascot { --m-c1: #ffffff; --m-c2: #e4fbf2; --m-c3: #9fe9cc; --m-ink: #1a1f36; --m-glow: #7cf0c4; color: var(--m-ink); z-index: 70; }
.mascot .m-c1 { stop-color: var(--m-c1); } .mascot .m-c2 { stop-color: var(--m-c2); } .mascot .m-c3 { stop-color: var(--m-c3); }
.mascot .m-glow { stop-color: var(--m-glow); }
.mascot .m-ink { fill: var(--m-ink); }
.mascot .m-ink-s { fill: none; stroke: var(--m-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.mascot .m-mouth { color: var(--m-ink); }
.mascot .m-z { font: 700 18px system-ui, sans-serif; fill: var(--m-ink-z, #c9d3ff); }
.mascot .m-dots circle { fill: var(--m-dots, #ffffff); }
.mascot svg { display: block; overflow: visible; transition: width .45s cubic-bezier(.3,1.3,.5,1), height .45s cubic-bezier(.3,1.3,.5,1); }
.mascot .m-ring { stroke: var(--m-ring, #7cf0c4); } .mascot .m-ring-bg { stroke: var(--m-ring-bg, rgba(255,255,255,.12)); }
.m-say { position: absolute; bottom: 72%; width: max-content; max-width: 320px; z-index: 2; animation: m-pop .35s cubic-bezier(.3, 1.5, .5, 1); }
.m-say.side-left { right: 78%; } .m-say.side-right { left: 78%; } .m-say.side-top { left: 50%; transform: translateX(-50%); bottom: 104%; }
.m-say-in { position: relative; padding: 12px 15px; border-radius: 18px; background: var(--say-bg, #fff); color: var(--say-ink, #12131a); font-size: 14.5px; line-height: 1.45; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .04); }
.m-say.side-left .m-say-in { border-bottom-right-radius: 6px; } .m-say.side-right .m-say-in { border-bottom-left-radius: 6px; }
.m-say-in::after { content: ''; position: absolute; bottom: -7px; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 0 0 4px 0; }
.m-say.side-left .m-say-in::after { right: 14px; } .m-say.side-right .m-say-in::after { left: 14px; } .m-say.side-top .m-say-in::after { left: calc(50% - 7px); }
.m-say.side-up-r { right: 2%; bottom: 102%; } .m-say.side-up-l { left: 2%; bottom: 102%; }
.m-say.side-up-r .m-say-in { border-bottom-right-radius: 6px; } .m-say.side-up-l .m-say-in { border-bottom-left-radius: 6px; }
.m-say.side-up-r .m-say-in::after { right: 40px; } .m-say.side-up-l .m-say-in::after { left: 40px; }
.m-say.side-up-r.below, .m-say.side-up-l.below { bottom: auto; top: 100%; }
.m-say.below { bottom: auto; top: 96%; }
.m-say.below .m-say-in::after { bottom: auto; top: -7px; border-radius: 4px 0 0 0; }
.m-acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.m-acts button { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--say-btn, rgba(0, 0, 0, .06)); color: inherit; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform .15s cubic-bezier(.3, 1.5, .5, 1), background .15s; }
.m-acts button:hover { transform: translateY(-1px); }
.m-acts button.p { background: var(--say-primary, #12131a); color: var(--say-primary-ink, #fff); }
@keyframes m-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.m-say.side-top { animation-name: m-pop-top; }
@keyframes m-pop-top { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.9); } to { opacity: 1; transform: translateX(-50%); } }
.m-say.m-mobile { position: fixed; left: 12px; right: 12px; bottom: var(--say-bottom, 92px); top: auto; width: auto; max-width: none; z-index: 95; transform: none; animation-name: m-pop; }
.m-say.m-mobile .m-say-in::after { display: none; }
@media (prefers-reduced-motion: reduce) { .m-say { animation: none; } }

.m-x { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .45; font: 400 18px/1 system-ui, sans-serif; cursor: pointer; transition: opacity .15s, background .15s; }
.m-x:hover { opacity: .9; background: var(--say-btn, rgba(0, 0, 0, .06)); }
.m-x ~ .m-txt { display: block; padding-right: 18px; }