/* ══════════════════════════════════════════
   SWAPPY — Mascot Complete Stylesheet
   Fox size: 65 × 78 px render (viewBox 100×120)
   ══════════════════════════════════════════ */

.swappy-wrapper {
  position: fixed;
  bottom: 0;
  left: 80px;
  z-index: 9999;
  width: 65px;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  will-change: left, bottom;
}

.swappy-shadow {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 9px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.22) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: width 0.35s ease, opacity 0.35s ease;
}
.state-jump   .swappy-shadow { width: 34px; opacity: 0.25; }
.state-sleep  .swappy-shadow { width: 60px; opacity: 0.10; }
.state-sit    .swappy-shadow { width: 56px; opacity: 0.30; }

.swappy-flip {
  pointer-events: auto;
  transition: transform 0.2s ease;
  transform-origin: center bottom;
}
.swappy-wrapper.facing-left  .swappy-flip { transform: scaleX(-1); }
.swappy-wrapper.facing-right .swappy-flip { transform: scaleX(1);  }

.swappy-bounce {
  transform-origin: center bottom;
  display: flex;
  justify-content: center;
}

.swappy-svg {
  width: 65px;
  height: 78px;
  display: block;
  overflow: visible;
}

/* ── Keyframes ── */
@keyframes swappy-bob {
  0%, 100% { transform: translateY(0)    rotate(0deg);  }
  25%       { transform: translateY(-5px) rotate(-1.5deg); }
  75%       { transform: translateY(-3px) rotate(1.5deg);  }
}
@keyframes swappy-walk {
  0%, 100% { transform: translateY(0)    rotate(0deg);  }
  20%       { transform: translateY(-8px) rotate(-3deg); }
  50%       { transform: translateY(0)    rotate(0deg);  }
  70%       { transform: translateY(-6px) rotate(3deg);  }
}
@keyframes swappy-jump-arc {
  0%   { transform: translateY(0)     scaleY(1)    scaleX(1);    }
  12%  { transform: translateY(0)     scaleY(0.7)  scaleX(1.3);  }
  38%  { transform: translateY(-70px) scaleY(1.15) scaleX(0.88); }
  58%  { transform: translateY(-74px) scaleY(1.1)  scaleX(0.9);  }
  82%  { transform: translateY(-4px)  scaleY(0.78) scaleX(1.22); }
  100% { transform: translateY(0)     scaleY(1)    scaleX(1);    }
}
@keyframes swappy-wiggle {
  0%,100% { transform: rotate(0deg)   translateY(0);    }
  10%      { transform: rotate(-14deg) translateY(-10px);}
  25%      { transform: rotate(14deg)  translateY(-14px);}
  40%      { transform: rotate(-10deg) translateY(-8px); }
  55%      { transform: rotate(10deg)  translateY(-11px);}
  70%      { transform: rotate(-6deg)  translateY(-4px); }
  85%      { transform: rotate(6deg)   translateY(-6px); }
}
@keyframes swappy-sleep {
  0%, 100% { transform: translateY(0)    rotate(-4deg); }
  50%       { transform: translateY(-6px) rotate(4deg);  }
}
@keyframes swappy-chat-bounce {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-7px); }
}
@keyframes swappy-sit {
  0%, 100% { transform: translateY(0)    scaleY(1)     rotate(0deg);   }
  20%       { transform: translateY(-3px) scaleY(1.02)  rotate(-2deg);  }
  50%       { transform: translateY(-5px) scaleY(1.04)  rotate(0deg);   }
  80%       { transform: translateY(-3px) scaleY(1.02)  rotate(2deg);   }
}
@keyframes swappy-tail {
  0%, 100% { transform: rotate(0deg);   }
  40%       { transform: rotate(20deg);  }
  70%       { transform: rotate(-14deg); }
}
@keyframes swappy-blink {
  0%, 88%, 100% { transform: scaleY(1);    }
  94%            { transform: scaleY(0.06); }
}
@keyframes swappy-ear {
  0%, 78%, 100% { transform: rotate(0deg);  }
  82%            { transform: rotate(-18deg);}
  90%            { transform: rotate(10deg); }
}
@keyframes swappy-zzz-float {
  0%   { opacity: 0; transform: translate(0, 0)      scale(0.5); }
  20%  { opacity: 1; }
  80%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(16px, -36px) scale(1.1);}
}
@keyframes swappy-star-pop {
  0%   { opacity: 0; transform: scale(0)   rotate(0deg);   }
  40%  { opacity: 1; transform: scale(1.3) rotate(20deg);  }
  80%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(0.4) rotate(45deg) translateY(-22px); }
}
@keyframes swappy-typing-dot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.35; }
  30%            { transform: translateY(-6px); opacity: 1;    }
}
@keyframes swappy-sparkle-pop {
  0%   { opacity: 0; transform: scale(0) translateY(0);   }
  40%  { opacity: 1; transform: scale(1.3) translateY(-6px); }
  100% { opacity: 0; transform: scale(0.8) translateY(-12px); }
}
@keyframes swappy-iridescent {
  0%   { filter: hue-rotate(0deg)   saturate(1.3) brightness(1.05); }
  40%  { filter: hue-rotate(40deg)  saturate(1.6) brightness(1.10); }
  70%  { filter: hue-rotate(-20deg) saturate(1.4) brightness(1.08); }
  100% { filter: hue-rotate(0deg)   saturate(1.3) brightness(1.05); }
}
@keyframes swappy-auto-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.88); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
}
@keyframes swappy-auto-out {
  from { opacity: 1; transform: translateX(-50%) scale(1);               }
  to   { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(-6px); }
}
@keyframes swappy-auto-in-below {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.88); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
}
@keyframes swappy-chat-in {
  from { opacity: 0; transform: translateY(14px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── State animations ── */
.state-idle    .swappy-bounce { animation: swappy-bob        2.6s ease-in-out infinite; }
.state-walk    .swappy-bounce { animation: swappy-walk       0.44s ease-in-out infinite; }
.state-jump    .swappy-bounce { animation: swappy-jump-arc   0.72s cubic-bezier(.36,.07,.19,.97) 1 forwards; }
.state-sleep   .swappy-bounce { animation: swappy-sleep      3.2s ease-in-out infinite; }
.state-excited .swappy-bounce { animation: swappy-wiggle     0.75s ease-in-out 2; }
.state-chat    .swappy-bounce { animation: swappy-chat-bounce 2s ease-in-out infinite; }
.state-sit     .swappy-bounce { animation: swappy-sit        2.4s ease-in-out infinite; }

.swappy-svg .tail-group {
  transform-origin: 20px 70px;
  animation: swappy-tail 1.5s ease-in-out infinite;
}
.state-sit     .swappy-svg .tail-group { animation-duration: 0.6s; }
.state-excited .swappy-svg .tail-group { animation-duration: 0.4s; }

.swappy-svg .iridescent-strip {
  animation: swappy-iridescent 3.5s ease-in-out infinite;
}
.swappy-svg .eyes-group {
  transform-origin: 44px 37px;
  animation: swappy-blink 4.5s ease-in-out infinite;
}

/* ── ZZZ / Stars / Sparkles ── */
.swappy-zzz {
  position: absolute; top: 4px; right: -8px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  pointer-events: none;
}
.swappy-zzz span {
  font-size: 0.7rem; font-weight: 900; color: #8B5CF6; line-height: 1;
  animation: swappy-zzz-float 2.4s ease-in-out infinite;
}
.swappy-zzz span:nth-child(2) { animation-delay: 0.8s;  font-size: 0.6rem; }
.swappy-zzz span:nth-child(3) { animation-delay: 1.6s;  font-size: 0.5rem; }

.swappy-stars {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 36px; pointer-events: none;
}
.swappy-star {
  position: absolute; font-size: 0.72rem;
  animation: swappy-star-pop 0.9s ease-out forwards;
}
.swappy-star:nth-child(1) { left: 0;    top: 8px; animation-delay: 0s;    }
.swappy-star:nth-child(2) { left: 18px; top: 0;   animation-delay: 0.08s; }
.swappy-star:nth-child(3) { left: 36px; top: 6px; animation-delay: 0.04s; }

.swappy-sit-sparkles {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 20px; display: flex; align-items: center;
  justify-content: space-around; pointer-events: none;
  font-size: 0.65rem; color: #8B5CF6;
}
.swappy-sit-sparkles span { animation: swappy-sparkle-pop 1.8s ease-in-out infinite; }
.swappy-sit-sparkles span:nth-child(1) { animation-delay: 0s; }
.swappy-sit-sparkles span:nth-child(2) { animation-delay: 0.6s;  color: #F97316; font-size: 0.45rem; }
.swappy-sit-sparkles span:nth-child(3) { animation-delay: 1.1s; }

.swappy-widget-glow {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 14px;
  background: radial-gradient(ellipse, rgba(249,115,22,0.35) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
  animation: swappy-bob 2s ease-in-out infinite; display: none;
}
.state-sit .swappy-widget-glow { display: block; }

/* ── Auto bubble ── */
.swappy-auto-bubble {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  background: white; padding: 7px 12px; border-radius: 14px;
  font-size: 0.72rem; font-weight: 600; color: #1C1917;
  white-space: normal; max-width: 178px; text-align: center; line-height: 1.42;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13), 0 1px 4px rgba(249,115,22,0.18);
  border: 1.5px solid rgba(249,115,22,0.22); pointer-events: none; z-index: 4;
  animation: swappy-auto-in 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.swappy-auto-bubble::after {
  content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 8px solid white; filter: drop-shadow(0 2px 1px rgba(0,0,0,0.06));
}
.swappy-auto-bubble.fade-out { animation: swappy-auto-out 0.35s ease forwards; }

.swappy-wrapper.bubble-below .swappy-auto-bubble {
  bottom: auto; top: calc(100% + 6px);
  animation: swappy-auto-in-below 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.swappy-wrapper.bubble-below .swappy-auto-bubble::after {
  bottom: auto; top: -8px; border-top: none; border-bottom: 8px solid white;
}
.swappy-wrapper.bubble-below .swappy-chat-bubble {
  bottom: auto; top: calc(100% + 8px);
}
.swappy-wrapper.bubble-below .swappy-chat-bubble::after {
  bottom: auto; top: -10px; border-top: none; border-bottom: 10px solid white;
}

/* ── Full chat bubble ── */
.swappy-chat-bubble {
  position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  width: 272px; background: white; border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(249,115,22,0.14);
  border: 1.5px solid rgba(249,115,22,0.16);
  animation: swappy-chat-in 0.28s cubic-bezier(0.34,1.56,0.64,1) forwards;
  overflow: hidden; pointer-events: auto; z-index: 5;
}
.swappy-chat-bubble::after {
  content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 10px solid white; filter: drop-shadow(0 3px 2px rgba(0,0,0,0.06));
}
.swappy-chat-header {
  background: linear-gradient(135deg, #F97316, #8B5CF6);
  padding: 9px 13px; display: flex; align-items: center;
  justify-content: space-between; color: white;
}
.swappy-chat-header-title { font-size: 0.8rem; font-weight: 800; }
.swappy-chat-close {
  background: rgba(255,255,255,0.25); border: none; border-radius: 50%;
  width: 21px; height: 21px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 0.78rem; font-weight: 900; transition: background 0.15s;
}
.swappy-chat-close:hover { background: rgba(255,255,255,0.42); }

.swappy-chat-messages {
  max-height: 172px; overflow-y: auto; padding: 11px 13px 7px;
  display: flex; flex-direction: column; gap: 7px;
  scrollbar-width: thin; scrollbar-color: #F97316 transparent;
}
.swappy-msg { max-width: 88%; padding: 6px 10px; border-radius: 13px; font-size: 0.75rem; line-height: 1.44; }
.swappy-msg-bot {
  background: linear-gradient(135deg,#fff7ed,#faf5ff);
  border: 1px solid rgba(249,115,22,0.13);
  color: #1c1917; align-self: flex-start; border-bottom-left-radius: 4px;
}
.swappy-msg-user {
  background: linear-gradient(135deg,#F97316,#ea6c0e);
  color: white; align-self: flex-end; border-bottom-right-radius: 4px;
}
.swappy-typing { display: flex; align-items: center; gap: 4px; padding: 5px 9px; align-self: flex-start; }
.swappy-typing span {
  width: 5px; height: 5px; background: #F97316; border-radius: 50%;
  animation: swappy-typing-dot 1.2s ease-in-out infinite;
}
.swappy-typing span:nth-child(2) { animation-delay: 0.2s; }
.swappy-typing span:nth-child(3) { animation-delay: 0.4s; }

.swappy-quick-replies { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 9px 8px; }
.swappy-quick-btn {
  background: #fff7ed; border: 1px solid rgba(249,115,22,0.28);
  border-radius: 20px; padding: 3px 9px; font-size: 0.7rem;
  color: #c2410c; cursor: pointer; font-weight: 600; transition: background 0.14s, transform 0.1s;
}
.swappy-quick-btn:hover { background: #F97316; color: white; border-color: #F97316; transform: scale(1.05); }

.swappy-chat-input-row {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-top: 1px solid rgba(249,115,22,0.1);
}
.swappy-chat-input {
  flex: 1; border: 1.5px solid rgba(249,115,22,0.22); border-radius: 9px;
  padding: 5px 9px; font-size: 0.76rem; outline: none; color: #1c1917;
  background: #fff; transition: border-color 0.15s;
}
.swappy-chat-input:focus { border-color: #F97316; }
.swappy-chat-send {
  background: linear-gradient(135deg,#F97316,#8B5CF6); border: none; border-radius: 8px;
  width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: white; transition: opacity 0.15s, transform 0.15s; flex-shrink: 0;
}
.swappy-chat-send:hover { opacity: 0.86; transform: scale(1.08); }

/* ── Dismiss / Revive ── */
.swappy-dismiss-btn {
  position: absolute; top: 0; right: -8px; z-index: 6;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.96); border: 1.5px solid rgba(249,115,22,0.28);
  color: #9CA3AF; font-size: 0.68rem; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.15s, background 0.15s;
  pointer-events: auto; box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}
.swappy-wrapper:hover .swappy-dismiss-btn { opacity: 1; }
.swappy-dismiss-btn:hover { background: #FEE2E2; color: #EF4444; border-color: #FCA5A5; }

.swappy-revive-btn {
  position: fixed; bottom: 18px; right: 18px; z-index: 9998;
  width: 48px; height: 48px; border-radius: 50%;
  background: white; border: 2px solid rgba(249,115,22,0.28);
  font-size: 1.3rem; cursor: pointer;
  box-shadow: 0 4px 20px rgba(249,115,22,0.28), 0 2px 8px rgba(0,0,0,0.07);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
  animation: swappy-chat-in 0.38s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.swappy-revive-btn:hover { transform: scale(1.14) rotate(-12deg); box-shadow: 0 8px 28px rgba(249,115,22,0.4); }
.swappy-revive-btn:active { transform: scale(0.96); }

@media (hover: none) { .swappy-dismiss-btn { opacity: 0.6; } }

@media (max-width: 600px) {
  .swappy-wrapper     { width: 54px; }
  .swappy-svg         { width: 54px; height: 65px; }
  .swappy-shadow      { width: 38px; }
  .swappy-chat-bubble { width: 236px; bottom: 78px; }
  .swappy-auto-bubble { max-width: 150px; font-size: 0.68rem; bottom: 78px; }
  .swappy-revive-btn  { width: 42px; height: 42px; font-size: 1.1rem; bottom: 12px; right: 12px; }
  .swappy-zzz span    { font-size: 0.58rem; }
  .swappy-dismiss-btn { opacity: 0.7; width: 20px; height: 20px; }
}
@media (max-width: 400px) {
  .swappy-wrapper     { width: 46px; }
  .swappy-svg         { width: 46px; height: 55px; }
  .swappy-chat-bubble { width: 214px; bottom: 66px; }
  .swappy-auto-bubble { max-width: 132px; bottom: 66px; }
}