/* Study buddy: a card in the bottom-right corner that folds into a round avatar. */
.study-buddy[hidden] { display: none; }
.study-buddy { position: fixed; z-index: 60; right: 20px; bottom: 20px; font-family: var(--sans); transition: bottom .3s ease; }
/* make room while the Star notice is up */
.star-toast:not([hidden]) ~ .study-buddy { bottom: 172px; }

.sb-card {
  position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: .9rem;
  width: min(320px, calc(100vw - 32px)); padding: .85rem 2.1rem .85rem .85rem; border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--rule);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform-origin: 100% 100%; transition: opacity .28s ease, transform .32s cubic-bezier(.2, .8, .2, 1);
}
.study-buddy:not(.is-open) .sb-card { opacity: 0; transform: translateY(8px) scale(.92); pointer-events: none; visibility: hidden; }
.sb-art { width: 84px; height: 84px; }
.sb-art svg, .sb-avatar svg { display: block; width: 100%; height: 100%; }
.sb-words { min-width: 0; }
.sb-kicker { margin: 0 0 .25rem; font: 600 .7rem/1.3 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: .04em; color: var(--ember); }
.sb-message { margin: 0; font-size: .92rem; font-weight: 620; line-height: 1.5; color: var(--ink); }
.sb-today { margin: .3rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.sb-today[hidden], .sb-bubble[hidden] { display: none; }
.sb-fold {
  position: absolute; top: .45rem; right: .45rem; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer; transform: rotate(90deg);
}
.sb-fold:hover { background: var(--rule-soft); color: var(--ink); }

.sb-avatar {
  position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.sb-avatar:hover { transform: translateY(-3px); }
.study-buddy.is-open .sb-avatar { opacity: 0; transform: scale(.6); pointer-events: none; visibility: hidden; }
.sb-bubble {
  position: absolute; right: 68px; bottom: 8px; width: max-content; max-width: min(240px, calc(100vw - 110px)); margin: 0;
  padding: .55rem .8rem; border-radius: 14px 14px 4px 14px; border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--panel) 95%, transparent); color: var(--ink); font-size: .84rem; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3); animation: sb-bubble .35s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sb-bubble { from { opacity: 0; transform: translateX(8px); } }
.study-buddy button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ------------------------------------------------------- the window */
.sb-svg * { transform-box: fill-box; transform-origin: center; }
/* the sill scales from the page origin so things stay standing on it */
.sb-svg .sb-sill { transform-box: view-box; transform-origin: 0 0; }
.sb-steam path { opacity: 0; animation: sb-steam 2.6s ease-out infinite; }
.sb-steam path:nth-child(2) { animation-delay: .8s; }
.sb-steam path:nth-child(3) { animation-delay: 1.6s; }
@keyframes sb-steam { 0% { opacity: 0; transform: translateY(2px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-7px); } }
/* clouds drift across and come back */
.sb-drift { animation: sb-drift 24s ease-in-out infinite alternate; }
.sb-drift + .sb-drift { animation-duration: 31s; animation-delay: -9s; }
@keyframes sb-drift { from { transform: translateX(-6px); } to { transform: translateX(8px); } }
.sb-glow { animation: sb-glow 4.2s ease-in-out infinite; }
@keyframes sb-glow { 50% { opacity: .72; } }
.sb-twinkle { animation: sb-twinkle 2.8s ease-in-out infinite; }
.sb-twinkle:nth-of-type(2n) { animation-delay: .9s; }
.sb-twinkle:nth-of-type(3n) { animation-delay: 1.7s; }
@keyframes sb-twinkle { 50% { opacity: .25; } }
/* a page of the open book turns now and then */
.sb-page { transform-origin: 0% 50%; animation: sb-page 7s ease-in-out infinite; }
@keyframes sb-page { 0%, 72% { transform: scaleX(1); opacity: 1; } 84% { transform: scaleX(-1); opacity: 1; } 85%, 99% { opacity: 0; transform: scaleX(1); } 100% { opacity: 1; } }
.sb-flicker { animation: sb-flicker 1.8s ease-in-out infinite; }
@keyframes sb-flicker { 30% { opacity: .75; } 55% { opacity: 1; } 70% { opacity: .85; } }

/* holidays: confetti, snow and leaves fall; lanterns sway; fireworks bloom; bats flap */
.sb-fall { opacity: 0; animation: sb-fall 4.2s linear infinite; }
.sb-fall:nth-of-type(2) { animation-delay: .5s; } .sb-fall:nth-of-type(3) { animation-delay: 1.1s; } .sb-fall:nth-of-type(4) { animation-delay: 1.6s; }
.sb-fall:nth-of-type(5) { animation-delay: 2.2s; } .sb-fall:nth-of-type(6) { animation-delay: 2.7s; } .sb-fall:nth-of-type(7) { animation-delay: 3.2s; } .sb-fall:nth-of-type(8) { animation-delay: 3.7s; }
@keyframes sb-fall { 0% { opacity: 0; transform: translate(0, -6px) rotate(0); } 15% { opacity: .95; } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(5px, 46px) rotate(160deg); } }
.sb-sway { transform-origin: 50% 0; animation: sb-sway 3.2s ease-in-out infinite alternate; }
.sb-sway + .sb-sway { animation-delay: -1.4s; }
@keyframes sb-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.sb-burst { opacity: 0; animation: sb-burst 2.6s ease-out infinite; }
.sb-burst:nth-of-type(2) { animation-delay: .9s; } .sb-burst:nth-of-type(3) { animation-delay: 1.7s; }
@keyframes sb-burst { 0% { opacity: 0; transform: scale(.2); } 12% { opacity: 1; } 60% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
.sb-flap { animation: sb-flap .5s ease-in-out infinite alternate; }
@keyframes sb-flap { to { transform: scaleY(.55) translateY(2px); } }
.sb-float { animation: sb-float 5s ease-in-out infinite alternate; }
@keyframes sb-float { to { transform: translateY(-4px); } }
.sb-screen { animation: sb-glow 3s ease-in-out infinite; }

@media (max-width: 720px) {
  .study-buddy { right: 12px; bottom: 16px; }
  .star-toast:not([hidden]) ~ .study-buddy { bottom: 200px; }
  .sb-card { grid-template-columns: 68px minmax(0, 1fr); }
  .sb-art { width: 68px; height: 68px; }
  .sb-avatar { width: 50px; height: 50px; }
  .sb-bubble { right: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-svg *, .sb-bubble, .sb-card, .sb-avatar { animation: none !important; transition: none !important; }
}
@media print { .study-buddy { display: none !important; } }