/* One responsive mascot on every route. Canvas and controls scale separately. */
:root {
  --mascot-preferred: var(--blog-mascot-tablet,180px);
  --mascot-size: min(var(--mascot-preferred), max(88px, calc(100dvh - 220px)));
  --mascot-rail: calc(var(--mascot-size) + max(var(--blog-mascot-edge,8px),env(safe-area-inset-left)) + 16px);
}
@media (min-width:1201px) {
  :root { --mascot-preferred: clamp(min(var(--blog-mascot-tablet,180px),var(--blog-mascot-desktop,300px)), calc(25vw - 60px), var(--blog-mascot-desktop,300px)); }
}
@media (min-width:768px) {
  /* Reserve real space instead of placing the character over the reading cards. */
  html.mascot-open:not(.mascot-compact) #body-wrap #content-inner {
    width: min(var(--mascot-content-width,var(--blog-width,1280px)), calc(100% - var(--mascot-rail) - 24px));
    max-width: var(--mascot-content-width,var(--blog-width,1280px));
    margin-left: max(var(--mascot-rail), calc((100% - var(--mascot-content-width,var(--blog-width,1280px))) / 2));
    margin-right: 24px;
  }
  body.gallery-view { --mascot-content-width: 1480px; }
  #body-wrap.type-shuoshuo { --mascot-content-width: 960px; }
  body.read-mode { --mascot-content-width: 920px; }
}
body #waifu, body #waifu:hover {
  position: fixed; left: max(var(--blog-mascot-edge,8px), env(safe-area-inset-left));
  width: var(--mascot-size); height: var(--mascot-size); bottom: -500px;
  margin: 0; padding: 0; transform: none; scale: 1; transform-origin: bottom left;
  z-index: 80; transition: bottom .3s ease, opacity .2s;
}
body #waifu.waifu-active { bottom: max(12px, env(safe-area-inset-bottom)); }
body #waifu.waifu-hidden { display: none; }
body #waifu-canvas, body #live2d { width: var(--mascot-size); height: var(--mascot-size); }
body #live2d { display: block; touch-action: pan-y; }
/* Original vertical tools and speech bubble; only constrain them to the viewport. */
body #waifu #waifu-tool {
  top: clamp(0px,calc(var(--mascot-size) - 230px),70px);
  max-height: min(230px,var(--mascot-size)); overflow-y: auto;
  scrollbar-width: thin;
}
body #waifu:focus-within #waifu-tool { opacity: 1; }
body #waifu-tool > span { flex-shrink: 0; }
body #waifu-tips {
  top: auto; bottom: calc(100% + 8px); left: 0; margin: 0;
  width: min(250px,100%); box-sizing: border-box;
  max-height: max(60px,calc(100dvh - var(--mascot-size) - 152px));
  overflow-y: auto;
}
body #waifu.blog-no-tips #waifu-tips { display: none; }
body #waifu-toggle, body .blog-mascot-launch {
  position: fixed; left: max(var(--blog-mascot-edge,8px),env(safe-area-inset-left));
  bottom: max(14px,env(safe-area-inset-bottom)); z-index: 80;
  display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px;
  margin: 0; padding: 0; border: 1px solid var(--rem-line,#bfd3ec); border-radius: 50%;
  background: var(--blog-reading-bg,var(--card-bg,#fafdff)); box-shadow: 0 3px 12px #18385720;
  overflow: hidden; cursor: pointer; transition: transform .2s, opacity .2s;
}
body #waifu-toggle { opacity: 0; pointer-events: none; transform: translateX(-80px); }
body #waifu-toggle.waifu-toggle-active, body #waifu-toggle.waifu-toggle-active:hover { opacity: 1; margin: 0; pointer-events: auto; transform: none; }
body #waifu-toggle svg { width: 22px; height: 22px; fill: var(--rem-accent,#285fb9); }
body .blog-mascot-launch img, body #waifu-toggle img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: inherit; }
body .blog-mascot-launch:disabled { cursor: progress; opacity: .75; }
body #waifu :is(button,[role='button']):focus-visible, body #waifu-toggle:focus-visible, body .blog-mascot-launch:focus-visible {
  outline: 3px solid var(--rem-accent,#285fb9); outline-offset: 3px;
}
@media (max-width:767px), (pointer:coarse) and (max-width:1024px) and (max-height:500px) {
  :root { --mascot-preferred: var(--blog-mascot-mobile,160px); }
  body #waifu #waifu-tool { opacity: 1; }
  body #waifu-tips { width: min(250px,calc(100vw - 32px)); }
  body #waifu.waifu-active { bottom: max(76px,calc(env(safe-area-inset-bottom) + 64px)); }
}
@media (prefers-reduced-motion:reduce) {
  body #waifu,body #waifu:hover,body #waifu-toggle,body .blog-mascot-launch { transition: none; }
}