/* ============================================================
   BEAVER WIDGET — Standalone mascot styles
   Extracted from canvas.css for reuse across pages
   ============================================================ */

/* ============================================================
   MASCOT WIDGET — 4 states: idle, walking, running, working
   ============================================================ */
.mascot-widget {
  position: fixed;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  user-select: none;
  /* JS sets left + bottom; left = left edge of widget */
  bottom: -200px;
  left: -200px;
  transition: left 2s ease-in-out, bottom 2s ease-in-out;
}
/* WALKING: slow, relaxed movement */
.mascot-widget.is-walking {
  transition: left 2.2s ease-in-out, bottom 2.2s ease-in-out;
}
/* RUNNING: fast dash to target */
.mascot-widget.is-running {
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              bottom 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.mascot-widget:hover { cursor: pointer; }

/* ENTRANCE: hidden before animation starts */
.mascot-widget.is-entering {
  visibility: hidden;
  pointer-events: none;
  transition: none !important;
}
/* Climbing-out: JS drives transform + clip per frame */
.mascot-widget.is-climbing-out {
  pointer-events: none;
  transition: none !important;
}

/* HELD: user is dragging the character */
.mascot-widget.is-held {
  transition: none !important;
  cursor: grabbing !important;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.25));
}

/* Speech bubble */
.mascot-bubble {
  background: var(--glass-bg, rgba(30, 32, 40, 0.92));
  color: #e0e2ea;
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: 10px;
  max-width: 280px;
  min-width: 0;
  width: fit-content;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  animation: mascotBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(12px);
  white-space: pre-line;
  pointer-events: none;
}
.mascot-bubble::after {
  content: "";
  position: absolute;
  bottom: -5px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--glass-bg, rgba(30, 32, 40, 0.92));
  border-bottom: none;
}
/* When bubble is below beaver, arrow points UP toward beaver */
.mascot-bubble.mascot-bubble-below::after {
  bottom: auto;
  top: -5px;
  border-top: none;
  border-bottom: 6px solid var(--glass-bg, rgba(30, 32, 40, 0.92));
}
@keyframes mascotBubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scene container */
.mascot-scene {
  width: 110px;
  height: 88px;
  position: relative;
}

/* ── View state: show/hide SVG vs sprite ── */
/* Direction flip is now controlled by JS via scene.style.transform */

.mascot-turn-sprite {
  display: none;
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 127px;
  height: 88px;
  margin-left: -63px;
  background-image: url('/turn-sprite.png');
  background-repeat: no-repeat;
  background-size: 1016px 88px;
  background-position: 0 0;
}

/* FRONT: your SVG shown, sprite hidden (flip controlled by JS for direction) */
.mascot-scene[data-view="front"] .mascot-svg         { visibility: visible; }
.mascot-scene[data-view="front"] .mascot-turn-sprite  { display: none; }

/* TURNING / WALK / RUN: sprite shown, SVG hidden */
.mascot-scene[data-view="turning"] .mascot-svg,
.mascot-scene[data-view="walk"]    .mascot-svg,
.mascot-scene[data-view="run"]     .mascot-svg { visibility: hidden; }
.mascot-scene[data-view="turning"] .mascot-turn-sprite,
.mascot-scene[data-view="walk"]    .mascot-turn-sprite,
.mascot-scene[data-view="run"]     .mascot-turn-sprite { display: block; }
.mascot-scene[data-view="turning"],
.mascot-scene[data-view="walk"],
.mascot-scene[data-view="run"] { transform: none !important; }

/* SIDE: SVG shown with direction flip (working/done) */
.mascot-scene[data-view="side"] .mascot-svg          { visibility: visible; }
.mascot-scene[data-view="side"] .mascot-turn-sprite   { display: none; }

/* Walk/run sprite bob */
.mascot-scene[data-view="walk"] .mascot-turn-sprite {
  animation: mWalkSprBob .45s ease-in-out infinite;
}
@keyframes mWalkSprBob {
  0%, 100% { transform: translateY(0)    rotate(0); }
  25%      { transform: translateY(-3px) rotate(-1.5deg); }
  75%      { transform: translateY(-3px) rotate(1.5deg); }
}
.mascot-scene[data-view="run"] .mascot-turn-sprite {
  animation: mRunSprBob .22s ease-in-out infinite;
}
@keyframes mRunSprBob {
  0%, 100% { transform: translateY(0)    rotate(0); }
  50%      { transform: translateY(-5px) rotate(-2deg); }
}

/* Walk/run SVG bob (for direction-based movement) */
.mascot-widget.is-walking .mascot-svg {
  animation: mWalkSvgBob .45s ease-in-out infinite;
}
@keyframes mWalkSvgBob {
  0%, 100% { transform: translateY(0)    rotate(0); }
  25%      { transform: translateY(-3px) rotate(-1.5deg); }
  75%      { transform: translateY(-3px) rotate(1.5deg); }
}
.mascot-widget.is-running .mascot-svg {
  animation: mRunSvgBob .22s ease-in-out infinite;
}
@keyframes mRunSvgBob {
  0%, 100% { transform: translateY(0)    rotate(0); }
  50%      { transform: translateY(-5px) rotate(-2deg); }
}

/* ═══════════════════════════════════════════════
   HELD / PANIC — your SVG with expression changes
   ═══════════════════════════════════════════════ */
.mascot-widget.is-held .mascot-scene    { transform: none !important; }
.mascot-widget.is-held .mascot-svg      { visibility: visible !important; }
.mascot-widget.is-held .mascot-turn-sprite { display: none !important; }

/* Limp dangle — like a cat picked up by the scruff */
.mascot-widget.is-held .mascot-svg {
  animation: mHeldDangle 1.8s ease-in-out infinite !important;
}
@keyframes mHeldDangle {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(3deg); }
  70%      { transform: rotate(-3deg); }
}
/* Eyes: relaxed half-lid, slow blink */
.mascot-widget.is-held .dog-eyes {
  transform-origin: 76px 31px;
  animation: mHeldBlink 3s ease-in-out infinite !important;
}
.mascot-widget.is-held .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mHeldBlinkLid 3s ease-in-out infinite !important;
}
@keyframes mHeldBlink {
  0%, 70%, 100% { transform: scaleY(0.7); }
  75%           { transform: scaleY(0.15); }
  80%           { transform: scaleY(0.7); }
}
@keyframes mHeldBlinkLid {
  0%, 70%, 100% { transform: scaleY(0.5); }
  75%           { transform: scaleY(1); }
  80%           { transform: scaleY(0.5); }
}
/* Ears droop down — resigned */
.mascot-widget.is-held .dog-ears {
  transform-origin: 76px 20px;
  animation: mHeldEars 2s ease-in-out infinite !important;
}
@keyframes mHeldEars {
  0%, 100% { transform: rotate(0) translateY(0); }
  20%, 80% { transform: rotate(4deg) translateY(2px); }
}
/* Legs dangle loosely */
.mascot-widget.is-held .dog-legs-front {
  transform-origin: 76px 65px;
  animation: mHeldLegsFront 2s ease-in-out infinite !important;
}
@keyframes mHeldLegsFront {
  0%, 100% { transform: rotate(0) translateY(0); }
  30%      { transform: rotate(2deg) translateY(3px); }
  70%      { transform: rotate(-2deg) translateY(5px); }
}
.mascot-widget.is-held .dog-legs-back {
  transform-origin: 76px 90px;
  animation: mHeldLegsBack 2s ease-in-out infinite 0.3s !important;
}
@keyframes mHeldLegsBack {
  0%, 100% { transform: translateY(0) rotate(0); }
  30%      { transform: translateY(2px) rotate(1deg); }
  70%      { transform: translateY(4px) rotate(-1deg); }
}
/* Tail hangs limp with a slow wag */
.mascot-widget.is-held .dog-tail {
  transform-origin: 49px 90px;
  animation: mHeldTail 2.5s ease-in-out infinite !important;
}
@keyframes mHeldTail {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-5deg); }
  75%      { transform: rotate(2deg); }
}
/* Hat slides a little */
.mascot-widget.is-held .dog-hat {
  animation: mHeldHat 2s ease-in-out infinite !important;
}
@keyframes mHeldHat {
  0%, 100% { transform: translateY(0) rotate(0); }
  20%, 80% { transform: translateY(-1px) rotate(-3deg); }
}
/* Glasses slip down */
.mascot-widget.is-held .dog-glasses {
  animation: mHeldGlasses 2s ease-in-out infinite !important;
}
@keyframes mHeldGlasses {
  0%, 100% { transform: translateY(0) rotate(0); }
  20%, 80% { transform: translateY(1.5px) rotate(2deg); }
}
/* One little sweat drop */
.mascot-widget.is-held .dog-sweat { display: block !important; }
.mascot-widget.is-held .dog-sweat-1 { animation: mSweatDrip 2.5s ease-in infinite; }
.mascot-widget.is-held .dog-sweat-2 { display: none; }
.mascot-widget.is-held .dog-sweat-3 { display: none; }
@keyframes mSweatDrip {
  0%   { transform: translateY(0);    opacity: 0.6; }
  80%  { transform: translateY(10px); opacity: 0.2; }
  100% { transform: translateY(14px); opacity: 0; }
}
/* Panic mouth shown — teeth (dog-mouth) stay visible */
.mascot-widget.is-held .dog-mouth-panic { display: block !important; }
/* Shadow fades and stretches (lifted off ground) */
.mascot-widget.is-held .dog-shadow {
  animation: mHeldShadow 0.3s ease-out forwards !important;
}
@keyframes mHeldShadow {
  0%   { transform: scaleX(1) scaleY(1); opacity: 1; }
  100% { transform: scaleX(1.3) scaleY(0.5); opacity: 0.05; }
}
.mascot-widget:not(.is-held) .dog-shadow {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.mascot-svg {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 110px;
  height: 88px;
  margin-left: -72px;
  overflow: visible;
}

.mascot-dir-img {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 128px;
  height: auto;
  margin-left: -73px;
  pointer-events: none;
}
.mascot-dir-img.is-active { display: block; }
.mascot-svg.dir-hidden { display: none !important; }

.mascot-widget.is-walking .mascot-dir-img.is-active {
  animation: mWalkSvgBob .45s ease-in-out infinite;
}
.mascot-widget.is-running .mascot-dir-img.is-active {
  animation: mRunSvgBob .22s ease-in-out infinite;
}

/* ── Base styles ── */
.dog-shadow { fill: rgba(0,0,0,0.18); }
.dog-pencil { display: none; }
.dog-sparkles circle { fill: #f5c542; opacity: 0; }

/* ==========================================================
   1) IDLE — standing still, gentle breathing
   ========================================================== */
.mascot-widget[data-state="idle"] .dog-main {
  animation: mIdle 3s ease-in-out infinite;
}
.mascot-widget[data-state="idle"] .dog-hat {
  animation: mIdle 3s ease-in-out infinite;
}
.mascot-widget[data-state="idle"] .dog-glasses {
  animation: mIdle 3s ease-in-out infinite;
}
@keyframes mIdle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.2px); }
}

.mascot-widget[data-state="idle"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mTailIdle 2s ease-in-out infinite;
}
@keyframes mTailIdle {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(5deg); }
}

/* Eyelids: hidden by default, brown ovals that cover eyes during blink */
.dog-eyelids {
  transform-origin: 76px 31px;
  transform: scaleY(0);
}

.mascot-widget[data-state="idle"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mBlink 2.8s ease-in-out infinite;
}
.mascot-widget[data-state="idle"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mBlinkLid 2.8s ease-in-out infinite;
}
@keyframes mBlink {
  0%, 82%, 90%, 100% { transform: scaleY(1); }
  86%                { transform: scaleY(0.12); }
  94%                { transform: scaleY(0.12); }
}
@keyframes mBlinkLid {
  0%, 82%, 90%, 100% { transform: scaleY(0); }
  86%                { transform: scaleY(1); }
  94%                { transform: scaleY(1); }
}

.mascot-widget[data-state="idle"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mEarFlop 6s ease-in-out infinite;
}
@keyframes mEarFlop {
  0%, 82%, 100% { transform: rotate(0); }
  88%           { transform: rotate(-2deg); }
}

/* ==========================================================
   2) WALKING — slow stroll, gentle leg cycle
   ========================================================== */
.mascot-widget.is-walking .dog-legs-front {
  animation: mWalkFront 0.5s ease-in-out infinite;
}
.mascot-widget.is-walking .dog-legs-back {
  animation: mWalkBack 0.5s ease-in-out infinite 0.25s;
}
.mascot-widget.is-walking .dog-main {
  animation: mWalkBob 0.25s ease-in-out infinite !important;
}
.mascot-widget.is-walking .dog-hat {
  animation: mWalkBob 0.25s ease-in-out infinite !important;
}
.mascot-widget.is-walking .dog-glasses {
  animation: mWalkBob 0.25s ease-in-out infinite !important;
}
.mascot-widget.is-walking .dog-tail {
  transform-origin: 49px 90px;
  animation: mTailWalk 0.6s ease-in-out infinite !important;
}
.mascot-widget.is-walking .dog-ears {
  transform-origin: 76px 20px;
  animation: mEarBounce 0.5s ease-in-out infinite !important;
}
@keyframes mWalkFront {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
@keyframes mWalkBack {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
@keyframes mWalkBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.2px); }
}
@keyframes mTailWalk {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-4deg); }
  75%      { transform: rotate(7deg); }
}
@keyframes mEarBounce {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-1.5deg); }
}

/* ==========================================================
   3) RUNNING — fast dash, energetic motion
   ========================================================== */
.mascot-widget.is-running .dog-legs-front {
  animation: mRunFront 0.18s ease-in-out infinite;
}
.mascot-widget.is-running .dog-legs-back {
  animation: mRunBack 0.18s ease-in-out infinite 0.09s;
}
.mascot-widget.is-running .dog-main {
  animation: mRunBob 0.14s ease-in-out infinite !important;
}
.mascot-widget.is-running .dog-hat {
  animation: mRunBob 0.14s ease-in-out infinite !important;
}
.mascot-widget.is-running .dog-glasses {
  animation: mRunBob 0.14s ease-in-out infinite !important;
}
.mascot-widget.is-running .dog-tail {
  transform-origin: 49px 90px;
  animation: mTailRun 0.25s ease-in-out infinite !important;
}
.mascot-widget.is-running .dog-ears {
  transform-origin: 76px 20px;
  animation: mEarStream 0.3s ease-in-out infinite !important;
}
@keyframes mRunFront {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-5px) rotate(-3deg); }
}
@keyframes mRunBack {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-5px) rotate(3deg); }
}
@keyframes mRunBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes mTailRun {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(10deg); }
}
@keyframes mEarStream {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(5deg); }
}

/* ==========================================================
   4) WORKING — at the image, drawing with pencil
   ========================================================== */
.mascot-widget[data-state="working"] .dog-pencil { display: block; }

.mascot-widget[data-state="working"] .dog-main {
  animation: mWorkBob 0.8s ease-in-out infinite;
}
@keyframes mWorkBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-2px) rotate(-0.5deg); }
  75%      { transform: translateY(-1px) rotate(0.5deg); }
}

.mascot-widget[data-state="working"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mTailWork 0.35s ease-in-out infinite;
}
@keyframes mTailWork {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-10deg); }
  75%      { transform: rotate(12deg); }
}

.mascot-widget[data-state="working"] .dog-hat {
  animation: mHatWork 0.8s ease-in-out infinite;
}
@keyframes mHatWork {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.mascot-widget[data-state="working"] .dog-glasses {
  animation: mHatWork 0.8s ease-in-out infinite;
}

.mascot-widget[data-state="working"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mBlink 2.8s ease-in-out infinite;
}
.mascot-widget[data-state="working"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mBlinkLid 2.8s ease-in-out infinite;
}

.mascot-widget[data-state="working"] .dog-sparkles circle {
  animation: mSparkle 1.8s ease-in-out infinite;
}
.mascot-widget[data-state="working"] .dog-sparkles circle:nth-child(1) { animation-delay: 0s; }
.mascot-widget[data-state="working"] .dog-sparkles circle:nth-child(2) { animation-delay: 0.4s; }
.mascot-widget[data-state="working"] .dog-sparkles circle:nth-child(3) { animation-delay: 0.8s; }
.mascot-widget[data-state="working"] .dog-sparkles circle:nth-child(4) { animation-delay: 1.2s; }
@keyframes mSparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* ── DONE: jump celebration ── */
.mascot-widget[data-state="done"] .dog-main,
.mascot-widget[data-state="done"] .dog-hat,
.mascot-widget[data-state="done"] .dog-glasses,
.mascot-widget[data-state="done"] .dog-legs-front,
.mascot-widget[data-state="done"] .dog-legs-back {
  animation: mJump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mJump {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.mascot-widget[data-state="done"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mTailWork 0.2s ease-in-out infinite;
}
.mascot-widget[data-state="done"] .dog-hat {
  animation: mHatToss 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes mHatToss {
  0%   { transform: translateY(0) rotate(0); }
  45%  { transform: translateY(-12px) rotate(-8deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* Turn block removed — data-view attribute handles all show/hide now */

/* ==========================================================
   IDLE ACTIONS — triggered randomly while idle (SVG front view)
   ========================================================== */

/* ── WAVE: one front leg lifts and waves ── */
.mascot-widget[data-idle-action="wave"] .dog-legs-front path:first-child {
  transform-origin: 100px 66px;
  animation: mWaveLeg 0.5s ease-in-out 5 !important;
}
.mascot-widget[data-idle-action="wave"] .dog-main {
  animation: mWaveBody 1.2s ease-in-out 2 !important;
}
.mascot-widget[data-idle-action="wave"] .dog-hat {
  animation: mWaveBody 1.2s ease-in-out 2 !important;
}
.mascot-widget[data-idle-action="wave"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mWaveTail 0.35s ease-in-out infinite !important;
}
@keyframes mWaveLeg {
  0%, 100% { transform: rotate(0) translateY(0); }
  30%      { transform: rotate(-20deg) translateY(-6px); }
  60%      { transform: rotate(-8deg) translateY(-3px); }
}
@keyframes mWaveBody {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-2px) rotate(1.5deg); }
}
@keyframes mWaveTail {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(10deg); }
}

/* ── LIE DOWN: body settles, legs stretch, eyes droop ── */
.mascot-widget[data-idle-action="liedown"] .dog-main {
  animation: mLieDown 4s ease-in-out forwards !important;
}
.mascot-widget[data-idle-action="liedown"] .dog-hat {
  animation: mLieDown 4s ease-in-out forwards !important;
}
.mascot-widget[data-idle-action="liedown"] .dog-glasses {
  animation: mLieDown 4s ease-in-out forwards !important;
}
.mascot-widget[data-idle-action="liedown"] .dog-legs-front {
  animation: mLieDownFront 4s ease-in-out forwards !important;
}
.mascot-widget[data-idle-action="liedown"] .dog-legs-back {
  animation: mLieDownBack 4s ease-in-out forwards !important;
}
.mascot-widget[data-idle-action="liedown"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mLieDownTail 4s ease-in-out forwards !important;
}
.mascot-widget[data-idle-action="liedown"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mLieDownEyes 4s ease-in-out forwards !important;
}
.mascot-widget[data-idle-action="liedown"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mLieDownLids 4s ease-in-out forwards !important;
}
@keyframes mLieDown {
  0%        { transform: translateY(0); }
  25%, 85%  { transform: translateY(10px); }
  100%      { transform: translateY(0); }
}
@keyframes mLieDownFront {
  0%        { transform: translateX(0) rotate(0); }
  25%, 85%  { transform: translateX(8px) rotate(-8deg) translateY(4px); }
  100%      { transform: translateX(0) rotate(0); }
}
@keyframes mLieDownBack {
  0%        { transform: translateX(0) rotate(0); }
  25%, 85%  { transform: translateX(-5px) rotate(5deg) translateY(3px); }
  100%      { transform: translateX(0) rotate(0); }
}
@keyframes mLieDownTail {
  0%        { transform: rotate(0); }
  25%       { transform: rotate(-3deg); }
  55%, 85%  { transform: rotate(2deg); }
  100%      { transform: rotate(0); }
}
@keyframes mLieDownEyes {
  0%        { transform: scaleY(1); }
  20%       { transform: scaleY(0.12); }
  30%, 80%  { transform: scaleY(0.4); }
  90%       { transform: scaleY(0.12); }
  100%      { transform: scaleY(1); }
}
@keyframes mLieDownLids {
  0%        { transform: scaleY(0); }
  20%       { transform: scaleY(1); }
  30%, 80%  { transform: scaleY(0.8); }
  90%       { transform: scaleY(1); }
  100%      { transform: scaleY(0); }
}

/* ── DANCE: body sways, legs bounce, tail wags fast ── */
.mascot-widget[data-idle-action="dance"] .dog-main {
  animation: mDanceBody 0.5s ease-in-out infinite !important;
}
.mascot-widget[data-idle-action="dance"] .dog-hat {
  animation: mDanceHat 0.5s ease-in-out infinite !important;
}
.mascot-widget[data-idle-action="dance"] .dog-glasses {
  animation: mDanceBody 0.5s ease-in-out infinite !important;
}
.mascot-widget[data-idle-action="dance"] .dog-legs-front {
  animation: mDanceFrontLegs 0.5s ease-in-out infinite !important;
}
.mascot-widget[data-idle-action="dance"] .dog-legs-back {
  animation: mDanceBackLegs 0.5s ease-in-out infinite 0.25s !important;
}
.mascot-widget[data-idle-action="dance"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mDanceTail 0.3s ease-in-out infinite !important;
}
.mascot-widget[data-idle-action="dance"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mDanceEars 0.5s ease-in-out infinite !important;
}
@keyframes mDanceBody {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0); }
  25%      { transform: translateX(-3px) translateY(-1px) rotate(-3deg); }
  75%      { transform: translateX(3px) translateY(-3px) rotate(3deg); }
}
@keyframes mDanceHat {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0); }
  25%      { transform: translateX(-2px) translateY(-2px) rotate(-4deg); }
  75%      { transform: translateX(2px) translateY(-3px) rotate(4deg); }
}
@keyframes mDanceFrontLegs {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes mDanceBackLegs {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes mDanceTail {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(14deg); }
}
@keyframes mDanceEars {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}

/* ── HEAD TILT: curious tilt with perked ears ── */
.mascot-widget[data-idle-action="tilt"] .dog-main {
  animation: mTiltBody 2.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="tilt"] .dog-hat {
  animation: mTiltBody 2.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="tilt"] .dog-glasses {
  animation: mTiltBody 2.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="tilt"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mTiltEars 2.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="tilt"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mTiltTail 2.5s ease-in-out 1 !important;
}
@keyframes mTiltBody {
  0%, 100% { transform: rotate(0); }
  25%, 75% { transform: rotate(-8deg) translateX(-3px); }
}
@keyframes mTiltEars {
  0%, 100% { transform: rotate(0); }
  20%, 80% { transform: rotate(6deg) translateY(-2px); }
}
@keyframes mTiltTail {
  0%, 100% { transform: rotate(0); }
  30%, 70% { transform: rotate(4deg); }
}

/* ── SNIFF: nose to ground, tail up ── */
.mascot-widget[data-idle-action="sniff"] .dog-main {
  animation: mSniffBody 0.7s ease-in-out 4 !important;
}
.mascot-widget[data-idle-action="sniff"] .dog-hat {
  animation: mSniffBody 0.7s ease-in-out 4 !important;
}
.mascot-widget[data-idle-action="sniff"] .dog-glasses {
  animation: mSniffBody 0.7s ease-in-out 4 !important;
}
.mascot-widget[data-idle-action="sniff"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mSniffTail 0.6s ease-in-out infinite !important;
}
.mascot-widget[data-idle-action="sniff"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mSniffEars 0.7s ease-in-out 4 !important;
}
@keyframes mSniffBody {
  0%, 100% { transform: translateY(0) rotate(0); }
  40%      { transform: translateY(5px) rotate(3deg); }
  65%      { transform: translateY(3px) rotate(2deg); }
}
@keyframes mSniffTail {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(10deg); }
}
@keyframes mSniffEars {
  0%, 100% { transform: rotate(0); }
  35%      { transform: rotate(-4deg) translateY(1px); }
  70%      { transform: rotate(2deg); }
}

/* ── YAWN: stretch up, mouth opens, eyes squeeze shut ── */
/* ── YAWN: full-body stretch — arms out, legs extend, mouth wide open, eyes shut ── */
.mascot-widget[data-idle-action="yawn"] .dog-main {
  animation: mYawnBody 3.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="yawn"] .dog-hat {
  animation: mYawnHat 3.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="yawn"] .dog-glasses {
  animation: mYawnBody 3.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="yawn"] .dog-mouth-open {
  display: block !important;
  transform-origin: 76px 59px;
  animation: mYawnMouthOpen 3.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="yawn"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mYawnEyes 3.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="yawn"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mYawnLids 3.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="yawn"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mYawnEars 3.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="yawn"] .dog-legs-front {
  transform-origin: 76px 66px;
  animation: mYawnArms 3.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="yawn"] .dog-legs-back {
  transform-origin: 76px 95px;
  animation: mYawnLegs 3.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="yawn"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mYawnTail 3.5s ease-in-out 1 !important;
}
/* Body rises up during stretch, settles back */
@keyframes mYawnBody {
  0%, 100% { transform: translateY(0); }
  15%, 60% { transform: translateY(-6px); }
  80%      { transform: translateY(-2px); }
}
/* Hat tilts back during stretch */
@keyframes mYawnHat {
  0%, 100% { transform: translateY(0) rotate(0); }
  15%, 60% { transform: translateY(-8px) rotate(-4deg); }
  80%      { transform: translateY(-2px) rotate(0); }
}
/* Mouth: closed → wide open (100%) → slowly closes */
@keyframes mYawnMouthOpen {
  0%, 100% { transform: scaleY(0); }
  10%      { transform: scaleY(0.5); }
  20%, 55% { transform: scaleY(3); }
  70%      { transform: scaleY(1.5); }
  85%      { transform: scaleY(0.3); }
}
/* Eyes squeeze shut during the yawn */
@keyframes mYawnEyes {
  0%, 90%, 100% { transform: scaleY(1); }
  12%, 65%      { transform: scaleY(0.08); }
  75%           { transform: scaleY(0.4); }
  85%           { transform: scaleY(0.1); }
}
@keyframes mYawnLids {
  0%, 90%, 100% { transform: scaleY(0); }
  12%, 65%      { transform: scaleY(1); }
  75%           { transform: scaleY(0.8); }
  85%           { transform: scaleY(1); }
}
/* Ears droop back during yawn */
@keyframes mYawnEars {
  0%, 100% { transform: rotate(0) translateY(0); }
  15%, 60% { transform: rotate(-5deg) translateY(-2px); }
  80%      { transform: rotate(-1deg) translateY(0); }
}
/* Front paws stretch outward during yawn */
@keyframes mYawnArms {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0); }
  15%      { transform: translateX(4px) translateY(-3px) rotate(-8deg); }
  40%, 55% { transform: translateX(6px) translateY(-5px) rotate(-12deg); }
  80%      { transform: translateX(1px) translateY(-1px) rotate(-2deg); }
}
/* Back legs push out slightly */
@keyframes mYawnLegs {
  0%, 100% { transform: translateX(0) translateY(0); }
  20%, 55% { transform: translateX(2px) translateY(3px); }
  80%      { transform: translateX(0) translateY(1px); }
}
/* Tail goes limp during yawn, slow wag */
@keyframes mYawnTail {
  0%, 100% { transform: rotate(0); }
  20%, 50% { transform: rotate(-8deg); }
  65%      { transform: rotate(3deg); }
  80%      { transform: rotate(-2deg); }
}

/* ── SCRATCH: beaver scratches behind ear with one paw ── */
.mascot-widget[data-idle-action="scratch"] .dog-main {
  animation: mScratchBody 2.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="scratch"] .dog-hat {
  animation: mScratchBody 2.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="scratch"] .dog-glasses {
  animation: mScratchBody 2.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="scratch"] .dog-legs-front path:first-child {
  transform-origin: 100px 66px;
  animation: mScratchPaw 0.3s ease-in-out 7 !important;
}
.mascot-widget[data-idle-action="scratch"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mScratchEars 0.3s ease-in-out 7 !important;
}
.mascot-widget[data-idle-action="scratch"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mScratchEyes 2.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="scratch"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mScratchLids 2.5s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="scratch"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mScratchTail 0.4s ease-in-out 6 !important;
}
@keyframes mScratchBody {
  0%, 100% { transform: rotate(0); }
  15%, 85% { transform: rotate(4deg) translateX(2px); }
}
@keyframes mScratchPaw {
  0%, 100% { transform: rotate(0) translateY(0); }
  50%      { transform: rotate(-15deg) translateY(-4px); }
}
@keyframes mScratchEars {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(3deg) translateY(1px); }
}
@keyframes mScratchEyes {
  0%, 100% { transform: scaleY(1); }
  20%, 80% { transform: scaleY(0.7); }
}
@keyframes mScratchLids {
  0%, 100% { transform: scaleY(0); }
  20%, 80% { transform: scaleY(0.4); }
}
@keyframes mScratchTail {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(6deg); }
}

/* ── PEEK: beaver leans to one side and peeks around, curious ── */
.mascot-widget[data-idle-action="peek"] .dog-main {
  animation: mPeekBody 3s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="peek"] .dog-hat {
  animation: mPeekBody 3s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="peek"] .dog-glasses {
  animation: mPeekBody 3s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="peek"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mPeekEars 3s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="peek"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mPeekEyes 3s ease-in-out 1 !important;
}
.mascot-widget[data-idle-action="peek"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mPeekTail 3s ease-in-out 1 !important;
}
@keyframes mPeekBody {
  0%, 100%  { transform: translateX(0) rotate(0); }
  20%, 45%  { transform: translateX(-8px) rotate(-6deg); }
  55%, 80%  { transform: translateX(8px) rotate(6deg); }
}
@keyframes mPeekEars {
  0%, 100%  { transform: rotate(0); }
  20%, 45%  { transform: rotate(5deg) translateY(-2px); }
  55%, 80%  { transform: rotate(-5deg) translateY(-2px); }
}
@keyframes mPeekEyes {
  0%, 100%  { transform: translateX(0); }
  20%, 45%  { transform: translateX(-2px); }
  55%, 80%  { transform: translateX(2px); }
}
@keyframes mPeekTail {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(5deg); }
  70%      { transform: rotate(-5deg); }
}

/* ── JUMP: quick excited hop ── */
.mascot-widget[data-idle-action="jump"] .dog-main {
  animation: mJumpBody 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2 !important;
}
.mascot-widget[data-idle-action="jump"] .dog-hat {
  animation: mJumpHat 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2 !important;
}
.mascot-widget[data-idle-action="jump"] .dog-glasses {
  animation: mJumpBody 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2 !important;
}
.mascot-widget[data-idle-action="jump"] .dog-legs-front {
  animation: mJumpLegs 0.6s ease-in-out 2 !important;
}
.mascot-widget[data-idle-action="jump"] .dog-legs-back {
  animation: mJumpLegs 0.6s ease-in-out 2 0.05s !important;
}
.mascot-widget[data-idle-action="jump"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mJumpTail 0.6s ease-in-out 2 !important;
}
.mascot-widget[data-idle-action="jump"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mJumpEars 0.6s ease-in-out 2 !important;
}
.mascot-widget[data-idle-action="jump"] .dog-shadow {
  animation: mJumpShadow 0.6s ease-in-out 2 !important;
}
@keyframes mJumpBody {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-14px); }
}
@keyframes mJumpHat {
  0%, 100% { transform: translateY(0) rotate(0); }
  40%      { transform: translateY(-16px) rotate(-3deg); }
  70%      { transform: translateY(-4px) rotate(1deg); }
}
@keyframes mJumpLegs {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(2px); }
  50%      { transform: translateY(-8px); }
}
@keyframes mJumpTail {
  0%, 100% { transform: rotate(0); }
  40%      { transform: rotate(-10deg); }
  70%      { transform: rotate(8deg); }
}
@keyframes mJumpEars {
  0%, 100% { transform: rotate(0) translateY(0); }
  35%      { transform: rotate(-4deg) translateY(-3px); }
  65%      { transform: rotate(2deg) translateY(1px); }
}
@keyframes mJumpShadow {
  0%, 100% { transform: scaleX(1) scaleY(1); opacity: 1; }
  45%      { transform: scaleX(0.6) scaleY(0.6); opacity: 0.3; }
}

/* ── SHIVER: cold/nervous little shake ── */
.mascot-widget[data-idle-action="shiver"] .dog-main {
  animation: mShiverBody 0.12s ease-in-out 20 !important;
}
.mascot-widget[data-idle-action="shiver"] .dog-hat {
  animation: mShiverBody 0.12s ease-in-out 20 !important;
}
.mascot-widget[data-idle-action="shiver"] .dog-glasses {
  animation: mShiverBody 0.12s ease-in-out 20 !important;
}
.mascot-widget[data-idle-action="shiver"] .dog-legs-front {
  animation: mShiverBody 0.12s ease-in-out 20 0.03s !important;
}
.mascot-widget[data-idle-action="shiver"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mShiverTail 0.15s ease-in-out 16 !important;
}
@keyframes mShiverBody {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-1.5px); }
  75%      { transform: translateX(1.5px); }
}
@keyframes mShiverTail {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(3deg); }
}

/* ── NOD: beaver nods in agreement, satisfied ── */
.mascot-widget[data-idle-action="nod"] .dog-main {
  animation: mNodBody 0.5s ease-in-out 3 !important;
}
.mascot-widget[data-idle-action="nod"] .dog-hat {
  animation: mNodHat 0.5s ease-in-out 3 !important;
}
.mascot-widget[data-idle-action="nod"] .dog-glasses {
  animation: mNodBody 0.5s ease-in-out 3 !important;
}
.mascot-widget[data-idle-action="nod"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mNodEars 0.5s ease-in-out 3 !important;
}
.mascot-widget[data-idle-action="nod"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mNodTail 0.5s ease-in-out 3 !important;
}
@keyframes mNodBody {
  0%, 100% { transform: translateY(0) rotate(0); }
  40%      { transform: translateY(3px) rotate(2deg); }
}
@keyframes mNodHat {
  0%, 100% { transform: translateY(0) rotate(0); }
  40%      { transform: translateY(4px) rotate(3deg); }
}
@keyframes mNodEars {
  0%, 100% { transform: rotate(0); }
  40%      { transform: rotate(3deg) translateY(1px); }
}
@keyframes mNodTail {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(6deg); }
}

/* ── Status bar ── */
.mascot-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  font-size: 10px;
  color: #8a8d9a;
  letter-spacing: 0.3px;
}
.mascot-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf50;
  flex-shrink: 0;
  transition: background 0.3s;
}
.mascot-widget[data-state="working"] .mascot-status-dot {
  background: #f5c542;
  animation: mascotDotPulse 1s ease-in-out infinite;
}
.mascot-widget[data-state="running"] .mascot-status-dot {
  background: #f5a623;
  animation: mascotDotPulse 0.5s ease-in-out infinite;
}
@keyframes mascotDotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.mascot-widget[data-state="done"] .mascot-status-dot { background: #4caf50; }
.mascot-status-text { white-space: nowrap; }

/* ==========================================================
   EXPRESSIONS — contextual animations triggered by tasks
   ========================================================== */

/* All expression props hidden by default */
.dog-expr { display: none; opacity: 0; }

/* ── AUTO-SPEAK: whenever a speech bubble is shown, open mouth pulses ── */
.mascot-widget[data-speaking="true"] .dog-mouth-open {
  display: block !important;
  transform-origin: 76px 59px;
  animation: mSpeakMouthOpen 0.4s ease-in-out infinite;
}

/* ── SPEAKING: mouth pulses, speech lines animate out ── */
.mascot-widget[data-expression="speaking"] .dog-expr-speaking { display: block; }
.mascot-widget[data-expression="speaking"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mBlink 2.8s ease-in-out infinite !important;
}
.mascot-widget[data-expression="speaking"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mBlinkLid 2.8s ease-in-out infinite !important;
}
/* Speaking: hide closed mouth, show open mouth with 40% pulse */
.mascot-widget[data-expression="speaking"] .dog-mouth-open {
  display: block !important;
  transform-origin: 76px 59px;
  animation: mSpeakMouthOpen 0.4s ease-in-out infinite !important;
}
.mascot-widget[data-expression="speaking"] .dog-main {
  animation: mSpeakBody 0.8s ease-in-out infinite !important;
}
.mascot-widget[data-expression="speaking"] .dog-hat {
  animation: mSpeakBody 0.8s ease-in-out infinite !important;
}
.mascot-widget[data-expression="speaking"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mSpeakTail 0.6s ease-in-out infinite !important;
}
.mascot-widget[data-expression="speaking"] .dog-expr-speaking line {
  animation: mSpeakLines 0.8s ease-out infinite !important;
}
.mascot-widget[data-expression="speaking"] .dog-expr-speaking line:nth-child(2) { animation-delay: 0.15s; }
.mascot-widget[data-expression="speaking"] .dog-expr-speaking line:nth-child(3) { animation-delay: 0.3s; }
@keyframes mSpeakMouth {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50%      { transform: scaleY(1.4) scaleX(1.15); }
}
/* Speaking open mouth: pulses between 20% and 40% open */
@keyframes mSpeakMouthOpen {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.6); }
}
@keyframes mSpeakBody {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}
@keyframes mSpeakTail {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-2deg); }
  75%      { transform: rotate(4deg); }
}
@keyframes mSpeakLines {
  0%   { opacity: 0; transform: translateX(0); }
  30%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(8px); }
}

/* ── SEARCHING: body leans forward, magnifier bobs ── */
.mascot-widget[data-expression="searching"] .dog-expr-searching { display: block; }
.mascot-widget[data-expression="searching"] .dog-main {
  animation: mSearchBody 1.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="searching"] .dog-hat {
  animation: mSearchBody 1.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="searching"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mSearchEyes 1.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="searching"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mSearchLids 1.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="searching"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mSearchEars 1.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="searching"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mSearchTail 0.8s ease-in-out infinite !important;
}
.mascot-widget[data-expression="searching"] .dog-expr-searching {
  animation: mSearchGlass 1.5s ease-in-out infinite !important;
}
@keyframes mSearchBody {
  0%, 100% { transform: rotate(0) translateX(0); }
  30%      { transform: rotate(4deg) translateX(3px); }
  60%      { transform: rotate(-3deg) translateX(-2px); }
}
@keyframes mSearchEyes {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  40%      { transform: scaleY(0.7) scaleX(1.1); }
}
@keyframes mSearchLids {
  0%, 100% { transform: scaleY(0); }
  40%      { transform: scaleY(0.4); }
}
@keyframes mSearchEars {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(5deg) translateY(-2px); }
  65%      { transform: rotate(-3deg); }
}
@keyframes mSearchTail {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-2deg); }
  75%      { transform: rotate(8deg); }
}
@keyframes mSearchGlass {
  0%, 100% { opacity: 0.9; transform: translate(0, 0) rotate(0); }
  30%      { opacity: 1; transform: translate(3px, -2px) rotate(-5deg); }
  60%      { opacity: 1; transform: translate(-2px, 1px) rotate(3deg); }
}

/* ── READING: head down, eyes narrow, ears relaxed, book visible ── */
.mascot-widget[data-expression="reading"] .dog-expr-reading { display: block; }
.mascot-widget[data-expression="reading"] .dog-main {
  animation: mReadBody 3s ease-in-out infinite !important;
}
.mascot-widget[data-expression="reading"] .dog-hat {
  animation: mReadBody 3s ease-in-out infinite !important;
}
.mascot-widget[data-expression="reading"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mReadEyes 3s ease-in-out infinite !important;
}
.mascot-widget[data-expression="reading"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mReadLids 3s ease-in-out infinite !important;
}
.mascot-widget[data-expression="reading"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mReadEars 3s ease-in-out infinite !important;
}
@keyframes mReadEars {
  0%, 100% { transform: rotate(0) translateY(0); }
  20%, 80% { transform: rotate(3deg) translateY(1px); }
}
.mascot-widget[data-expression="reading"] .dog-expr-reading {
  opacity: 1;
  animation: mReadBook 3s ease-in-out infinite !important;
}
@keyframes mReadBody {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(2px) rotate(1deg); }
}
@keyframes mReadEyes {
  0%, 70%, 100% { transform: scaleY(0.6); }
  75%           { transform: scaleY(0.15); }
  80%           { transform: scaleY(0.6); }
}
@keyframes mReadLids {
  0%, 70%, 100% { transform: scaleY(0.55); }
  75%           { transform: scaleY(1); }
  80%           { transform: scaleY(0.55); }
}
@keyframes mReadBook {
  0%, 100% { opacity: 1; transform: rotate(0); }
  50%      { opacity: 1; transform: rotate(-2deg) translateY(1px); }
}

/* ── THINKING: head tilt, thought bubbles float up, eyes up ── */
.mascot-widget[data-expression="thinking"] .dog-expr-thinking { display: block; }
.mascot-widget[data-expression="thinking"] .dog-main {
  animation: mThinkBody 3s ease-in-out infinite !important;
}
.mascot-widget[data-expression="thinking"] .dog-hat {
  animation: mThinkBody 3s ease-in-out infinite !important;
}
.mascot-widget[data-expression="thinking"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mThinkEyes 3s ease-in-out infinite !important;
}
.mascot-widget[data-expression="thinking"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mThinkLids 3s ease-in-out infinite !important;
}
.mascot-widget[data-expression="thinking"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mThinkEars 3s ease-in-out infinite !important;
}
.mascot-widget[data-expression="thinking"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mThinkTail 4s ease-in-out infinite !important;
}
.mascot-widget[data-expression="thinking"] .dog-expr-thinking circle:nth-child(1) {
  animation: mThinkBubble1 2.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="thinking"] .dog-expr-thinking circle:nth-child(2) {
  animation: mThinkBubble2 2.5s ease-in-out infinite 0.3s !important;
}
.mascot-widget[data-expression="thinking"] .dog-expr-thinking circle:nth-child(3) {
  animation: mThinkBubble3 2.5s ease-in-out infinite 0.6s !important;
}
@keyframes mThinkBody {
  0%, 100% { transform: rotate(0); }
  30%, 70% { transform: rotate(-6deg) translateX(-2px); }
}
@keyframes mThinkEyes {
  0%, 80%, 100% { transform: translateY(0) scaleY(1); }
  30%, 70%      { transform: translateY(-1.5px) scaleY(1); }
  85%           { transform: translateY(0) scaleY(0.12); }
  90%           { transform: translateY(0) scaleY(1); }
}
@keyframes mThinkLids {
  0%, 80%, 90%, 100% { transform: scaleY(0); }
  85%                { transform: scaleY(1); }
}
@keyframes mThinkEars {
  0%, 100% { transform: rotate(0); }
  30%, 70% { transform: rotate(4deg) translateY(-1px); }
}
@keyframes mThinkTail {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(3deg); }
}
@keyframes mThinkBubble1 {
  0%       { opacity: 0; transform: translateY(5px) scale(0.5); }
  40%, 70% { opacity: 0.9; transform: translateY(-3px) scale(1); }
  100%     { opacity: 0; transform: translateY(-10px) scale(0.8); }
}
@keyframes mThinkBubble2 {
  0%       { opacity: 0; transform: translateY(3px) scale(0.4); }
  40%, 70% { opacity: 0.7; transform: translateY(-2px) scale(1); }
  100%     { opacity: 0; transform: translateY(-8px) scale(0.7); }
}
@keyframes mThinkBubble3 {
  0%       { opacity: 0; transform: scale(0.3); }
  40%, 70% { opacity: 0.5; transform: scale(1); }
  100%     { opacity: 0; transform: translateY(-5px) scale(0.6); }
}

/* ── CONFUSED: head tilts, question marks bob, eyebrows raise ── */
.mascot-widget[data-expression="confused"] .dog-expr-confused { display: block; }
.mascot-widget[data-expression="confused"] .dog-main {
  animation: mConfusedBody 2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="confused"] .dog-hat {
  animation: mConfusedBody 2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="confused"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mConfusedEyes 2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="confused"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mConfusedLids 2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="confused"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mConfusedEars 2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="confused"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mConfusedTail 2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="confused"] .dog-expr-confused text:first-child {
  animation: mConfusedQ1 1.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="confused"] .dog-expr-confused text:last-child {
  animation: mConfusedQ2 1.5s ease-in-out infinite 0.4s !important;
}
@keyframes mConfusedBody {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg) translateX(-2px); }
  75%      { transform: rotate(5deg) translateX(2px); }
}
@keyframes mConfusedEyes {
  0%, 40%, 60%, 100% { transform: scaleY(1); }
  50%                { transform: scaleY(1.15) translateY(-0.5px); }
  82%                { transform: scaleY(0.12); }
  88%                { transform: scaleY(1); }
}
@keyframes mConfusedLids {
  0%, 78%, 88%, 100% { transform: scaleY(0); }
  82%                { transform: scaleY(1); }
}
@keyframes mConfusedEars {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-5deg); }
  75%      { transform: rotate(4deg); }
}
@keyframes mConfusedTail {
  0%, 100% { transform: rotate(0); }
  30%, 70% { transform: rotate(-5deg); }
}
@keyframes mConfusedQ1 {
  0%       { opacity: 0; transform: translateY(5px) scale(0.6); }
  40%, 60% { opacity: 0.9; transform: translateY(-2px) scale(1.1); }
  100%     { opacity: 0; transform: translateY(-8px) scale(0.8); }
}
@keyframes mConfusedQ2 {
  0%       { opacity: 0; transform: translateY(3px) scale(0.5); }
  40%, 60% { opacity: 0.6; transform: translateY(-1px) scale(1); }
  100%     { opacity: 0; transform: translateY(-6px) scale(0.7); }
}

/* ── DRAWING: body leans, pencil moves, lines appear ── */
.mascot-widget[data-expression="drawing"] .dog-expr-drawing { display: block; }
.mascot-widget[data-expression="drawing"] .dog-main {
  animation: mDrawBody 1.2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="drawing"] .dog-hat {
  animation: mDrawBody 1.2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="drawing"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mDrawEyes 1.2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="drawing"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mDrawLids 1.2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="drawing"] .dog-legs-front path:last-child {
  transform-origin: 52px 66px;
  animation: mDrawPaw 1.2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="drawing"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mDrawTail 0.8s ease-in-out infinite !important;
}
.mascot-widget[data-expression="drawing"] .dog-expr-drawing {
  opacity: 1;
  animation: mDrawPencil 1.2s ease-in-out infinite !important;
}
.mascot-widget[data-expression="drawing"] .dog-expr-drawing line:nth-child(4) {
  animation: mDrawLine 1.2s ease-out infinite 0.3s !important;
}
.mascot-widget[data-expression="drawing"] .dog-expr-drawing line:nth-child(5) {
  animation: mDrawLine 1.2s ease-out infinite 0.6s !important;
}
@keyframes mDrawBody {
  0%, 100% { transform: rotate(0) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(1px); }
}
@keyframes mDrawEyes {
  0%, 85%, 100% { transform: scaleY(0.7); }
  90%           { transform: scaleY(0.15); }
}
@keyframes mDrawLids {
  0%, 85%, 100% { transform: scaleY(0.4); }
  90%           { transform: scaleY(1); }
}
@keyframes mDrawPaw {
  0%, 100% { transform: rotate(0) translateX(0); }
  50%      { transform: rotate(-8deg) translateX(-4px) translateY(3px); }
}
@keyframes mDrawTail {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-1deg); }
  75%      { transform: rotate(3deg); }
}
@keyframes mDrawPencil {
  0%, 100% { opacity: 1; transform: translate(0, 0) rotate(0); }
  25%      { opacity: 1; transform: translate(-3px, 2px) rotate(-3deg); }
  50%      { opacity: 1; transform: translate(2px, -1px) rotate(2deg); }
  75%      { opacity: 1; transform: translate(-1px, 3px) rotate(-1deg); }
}
@keyframes mDrawLine {
  0%   { opacity: 0; stroke-dashoffset: 12; }
  40%  { opacity: 0.7; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

/* ── PLANNING: clipboard visible, head nods, eyes scan ── */
.mascot-widget[data-expression="planning"] .dog-expr-planning { display: block; }
.mascot-widget[data-expression="planning"] .dog-main {
  animation: mPlanBody 2.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="planning"] .dog-hat {
  animation: mPlanBody 2.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="planning"] .dog-eyes {
  transform-origin: 76px 31px;
  animation: mPlanEyes 2.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="planning"] .dog-eyelids {
  transform-origin: 76px 31px;
  animation: mPlanLids 2.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="planning"] .dog-ears {
  transform-origin: 76px 20px;
  animation: mPlanEars 2.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="planning"] .dog-tail {
  transform-origin: 49px 90px;
  animation: mPlanTail 1.5s ease-in-out infinite !important;
}
.mascot-widget[data-expression="planning"] .dog-expr-planning {
  opacity: 1;
  animation: mPlanClip 2.5s ease-in-out infinite !important;
}
@keyframes mPlanBody {
  0%, 100% { transform: rotate(0) translateY(0); }
  25%      { transform: rotate(3deg) translateY(-1px); }
  75%      { transform: rotate(-2deg) translateY(0); }
}
@keyframes mPlanEyes {
  0%, 70%, 100% { transform: scaleY(0.8) translateX(0); }
  25%           { transform: scaleY(0.9) translateX(1px); }
  75%           { transform: scaleY(0.8) translateX(-1px); }
  80%           { transform: scaleY(0.12); }
  86%           { transform: scaleY(0.8); }
}
@keyframes mPlanLids {
  0%, 76%, 86%, 100% { transform: scaleY(0.3); }
  80%                { transform: scaleY(1); }
}
@keyframes mPlanEars {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(3deg) translateY(-1px); }
}
@keyframes mPlanTail {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-1deg); }
  75%      { transform: rotate(5deg); }
}
@keyframes mPlanClip {
  0%, 100% { opacity: 1; transform: rotate(0); }
  50%      { opacity: 1; transform: rotate(-2deg) translateY(-1px); }
}

/* Task progress bar */
.mascot-task-bar {
  width: 80px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.mascot-task-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8b5e3c, #f5c542);
  border-radius: 2px;
  transition: width 1.5s ease-out;
}

/* Theme */
[data-theme="light"] .mascot-bubble {
  background: rgba(62, 39, 28, 0.94);
  color: #f0e6dc;
  box-shadow: 0 2px 16px rgba(50,25,10,0.3);
}
[data-theme="light"] .mascot-bubble::after {
  border-top-color: rgba(62, 39, 28, 0.94);
}
[data-theme="light"] .mascot-bubble.mascot-bubble-below::after {
  border-top-color: transparent;
  border-bottom-color: rgba(62, 39, 28, 0.94);
}
[data-theme="light"] .mascot-status { color: #555; }
[data-theme="light"] .mascot-task-bar { background: rgba(0,0,0,0.06); }

/* ============================================================
   NEW: Hero and Widget mode overrides
   ============================================================ */

/* ── Hero mode: larger beaver for landing page ── */
.mascot-widget.beaver-hero .mascot-scene {
  width: 220px;
  height: 176px;
}
.mascot-widget.beaver-hero .mascot-svg {
  width: 220px;
  height: 176px;
  margin-left: -144px;
}
.mascot-widget.beaver-hero .mascot-turn-sprite {
  width: 254px;
  height: 176px;
  margin-left: -127px;
  background-size: 2032px 176px;
}
.mascot-widget.beaver-hero .mascot-dir-img {
  width: 256px;
  margin-left: -146px;
}
.mascot-widget.beaver-hero .mascot-bubble {
  font-size: 14px;
  max-width: 240px;
  padding: 10px 18px;
}
.mascot-widget.beaver-hero .mascot-status {
  font-size: 12px;
}

/* ── Widget mode: small persistent companion ── */
.mascot-widget.beaver-widget-mode {
  z-index: 9000;
}

/* ── Peek mode: beaver behind a panel, peeks over top ── */
.mascot-widget.beaver-peek-mode {
  position: absolute !important;
  z-index: 1;
  pointer-events: auto;
}
.mascot-widget.beaver-peek-mode .mascot-scene {
  width: 200px;
  height: 160px;
}
.mascot-widget.beaver-peek-mode .mascot-svg {
  width: 200px;
  height: 160px;
  margin-left: -131px;
}
.mascot-widget.beaver-peek-mode .mascot-dir-img {
  width: 210px;
  margin-left: -120px;
}
.mascot-widget.beaver-peek-mode .mascot-turn-sprite {
  width: 230px;
  height: 160px;
  margin-left: -115px;
  background-size: 1840px 160px;
}
.mascot-widget.beaver-peek-mode .mascot-bubble {
  font-size: 13px;
  max-width: 200px;
  z-index: 10;
  position: relative;
}
.mascot-widget.beaver-peek-mode .mascot-status {
  display: none;
}
.mascot-widget.beaver-peek-mode .mascot-task-bar {
  display: none;
}
/* Peek mode + large size (workspace chat) */
.mascot-widget.beaver-peek-mode.beaver-hero .mascot-scene {
  width: 200px;
  height: 160px;
}
.mascot-widget.beaver-peek-mode.beaver-hero .mascot-svg {
  width: 200px;
  height: 160px;
  margin-left: -131px;
}
.mascot-widget.beaver-peek-mode.beaver-hero .mascot-turn-sprite {
  width: 230px;
  height: 160px;
  margin-left: -115px;
  background-size: 1840px 160px;
}
.mascot-widget.beaver-peek-mode.beaver-hero .mascot-bubble {
  font-size: 14px;
  max-width: 220px;
  padding: 8px 16px;
}

/* ── Beaver hole (hero page) ── */
/* Base hole styles shared by both layers */
.beaver-hole {
  width: 220px;
  height: 55px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

/* BACK layer — full hole, sits BEHIND beaver (low z-index) */
.beaver-hole--back {
  z-index: 1;
  background: radial-gradient(ellipse at 50% 30%, #0d0d0f 0%, #1a1a1d 40%, #2a2a2f 70%, #3a3a3f 100%);
  box-shadow:
    inset 0 6px 18px rgba(0,0,0,0.7),
    inset 0 -2px 6px rgba(0,0,0,0.3),
    0 4px 16px rgba(0,0,0,0.25);
}

/* FRONT mask — background-colored ground surface with curved hole cutout */
/* Sits IN FRONT of beaver, hides lower body behind the "ground" surface */
/* Front mask: page-colored rectangle with elliptical cutout matching the hole.
   The hole is 220px wide, 55px tall (ellipse). The front mask is 400px wide.
   Hole left edge = (400-220)/2 = 90px. Hole right edge = 310px.
   The cutout shows the BOTTOM HALF of the ellipse (from center down).
   Ellipse: rx=110, ry=27.5. Center at (200, 0) in mask coords.
   Bottom half curve: at y=0 it's the widest (220px), curving to a point at y=27.5.
   We draw the ground surface AROUND the bottom half of the hole. */
.beaver-hole--front {
  z-index: 100;
  width: 400px;
  height: 200px;
  /* Position: top of front mask aligns with CENTER of back hole */
  bottom: -172px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
  background: var(--bg, #F0F0F0);
  /* Path: flat top edges on left and right, curved dip in the middle matching hole ellipse.
     The curve is the bottom half of ellipse(110px 27.5px at 200 0).
     Points: (90,0) → curve down to (200,27) → curve back to (310,0) */
  clip-path: path('M 0 0 L 90 0 C 90 15, 130 28, 200 28 C 270 28, 310 15, 310 0 L 400 0 L 400 200 L 0 200 Z');
}
.beaver-hole--front::before,
.beaver-hole--front::after {
  display: none;
}