/*
 * Hello Kitty Luxury Theme CSS
 * Enhanced features for the Hello Kitty theme including sparkles, positioning, and interactions
 */

/* ===== SPARKLE ANIMATIONS ===== */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

@keyframes sparkle-drift {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-20px) rotate(360deg);
  }
}

/* Sparkle container - glitter effect for Hello Kitty theme */
.kitty-sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: none; /* Hide by default */
}

body.theme-hellokitty .kitty-sparkles {
  opacity: 1 !important; /* Show sparkles in Hello Kitty theme */
  display: block !important; /* Enable sparkles */
}

/* Individual sparkle elements */
.sparkle {
  position: absolute;
  color: #ff69b4;
  font-size: 12px;
  animation: sparkle 2s infinite;
}

.sparkle.drift {
  animation: sparkle 2s infinite, sparkle-drift 4s infinite linear;
}

/* Sparkle variants for different effects */
.sparkle-1 { animation-delay: 0s; }
.sparkle-2 { animation-delay: 0.3s; }
.sparkle-3 { animation-delay: 0.6s; }
.sparkle-4 { animation-delay: 0.9s; }
.sparkle-5 { animation-delay: 1.2s; }
.sparkle-6 { animation-delay: 1.5s; }

/* ===== HELLO KITTY CHARACTER POSITIONING ===== */
.hello-kitty-character {
  position: fixed;
  width: 80px;
  height: 80px;
  z-index: 100;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
  display: none; /* Hide by default */
}

/* Show Hello Kitty character in Hello Kitty theme */
body.theme-hellokitty .hello-kitty-character {
  opacity: 1 !important; /* Show character */
  display: block !important; /* Enable character */
}

/* ===== MAIN PAGE POSITIONING VARIANTS ===== */
/* Button hugging positions - Hello Kitty embraces the button */
.kitty-main-hug-button {
  bottom: 42%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 120px;
  height: 100px;
  animation: kitty-button-hug 4s infinite ease-in-out, kitty-auto-wave 6s infinite ease-in-out 2s;
  z-index: 10;
}

/* Above button positions (5 variants) */
.kitty-main-above-sitting {
  bottom: 65%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 80px;
  height: 80px;
  animation: kitty-sit-breathe 4s infinite ease-in-out;
}

.kitty-main-above-lying {
  bottom: 62%;
  left: 50%;
  transform: translate(-50%, 0) rotate(-10deg);
  width: 100px;
  height: 60px;
  animation: kitty-gentle-sway 5s infinite ease-in-out;
}

.kitty-main-above-sleepy {
  bottom: 63%;
  left: 50%;
  transform: translate(-50%, 0) rotate(-5deg);
  width: 90px;
  height: 70px;
  animation: kitty-sleepy-bob 6s infinite ease-in-out;
}

.kitty-main-above-curious {
  bottom: 64%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 85px;
  height: 85px;
  animation: kitty-head-tilt 3s infinite ease-in-out;
}

.kitty-main-above-playful {
  bottom: 66%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 95px;
  height: 80px;
  animation: kitty-bounce-gentle 2.5s infinite ease-in-out;
}

/* Side positions (5 variants) */
.kitty-main-side-peek-left {
  bottom: 45%;
  left: 20%;
  transform: translate(-50%, 0) rotate(15deg);
  width: 70px;
  height: 70px;
  animation: kitty-shy-peek 4s infinite ease-in-out;
}

.kitty-main-side-hide-right {
  bottom: 50%;
  right: 25%;
  transform: translate(50%, 0) rotate(-10deg);
  width: 65px;
  height: 65px;
  animation: kitty-hide-seek 5s infinite ease-in-out;
}

.kitty-main-side-corner-left {
  bottom: 40%;
  left: 15%;
  transform: translate(0, 0) rotate(20deg);
  width: 75px;
  height: 75px;
  animation: kitty-corner-wave 6s infinite ease-in-out;
}

.kitty-main-side-corner-right {
  bottom: 48%;
  right: 18%;
  transform: translate(0, 0) rotate(-15deg);
  width: 80px;
  height: 70px;
  animation: kitty-shy-wiggle 4.5s infinite ease-in-out;
}

.kitty-main-side-behind {
  bottom: 52%;
  left: 35%;
  transform: translate(-50%, 0) rotate(8deg);
  width: 60px;
  height: 60px;
  animation: kitty-behind-peek 7s infinite ease-in-out;
}

/* Chat page positioning variants */
.kitty-chat-wave {
  top: 20%;
  right: 20px;
  animation: kitty-wave 3s infinite ease-in-out;
}

.kitty-chat-jump {
  bottom: 100px;
  left: 20px;
  animation: kitty-jump 2s infinite ease-in-out;
}

/* Bottom-right corner assistant */
.kitty-assistant {
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  animation: kitty-breathe 4s infinite ease-in-out;
}

/* ===== HELLO KITTY ANIMATIONS ===== */
/* Button hugging animation */
@keyframes kitty-button-hug {
  0%, 100% {
    transform: translate(-50%, 50%) scale(1);
  }
  50% {
    transform: translate(-50%, 45%) scale(1.05);
  }
}

/* Blinking animation */
@keyframes kitty-blink {
  0%, 90%, 100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}

/* Blushing animation */
@keyframes kitty-blush {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
}

/* Eye covering animation */
@keyframes kitty-cover-eyes {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

/* Mouth smiling animation */
@keyframes kitty-smile {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Bow wiggle animation */
@keyframes kitty-bow-wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

/* Whisker twitch animation */
@keyframes whisker-twitch {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

/* Basic movement animations */
@keyframes kitty-wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

@keyframes kitty-jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes kitty-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Above position animations */
@keyframes kitty-sit-breathe {
  0%, 100% {
    transform: translate(-50%, 50%) scale(1);
  }
  50% {
    transform: translate(-50%, 50%) scale(1.05);
  }
}

@keyframes kitty-gentle-sway {
  0%, 100% {
    transform: translate(-50%, 0) rotate(-10deg);
  }
  50% {
    transform: translate(-50%, 0) rotate(-15deg);
  }
}

@keyframes kitty-sleepy-bob {
  0%, 100% {
    transform: translate(-50%, 0) rotate(-5deg) translateY(0);
  }
  50% {
    transform: translate(-50%, 0) rotate(-8deg) translateY(3px);
  }
}

@keyframes kitty-head-tilt {
  0%, 100% {
    transform: translate(-50%, 0) rotate(0deg);
  }
  25% {
    transform: translate(-50%, 0) rotate(5deg);
  }
  75% {
    transform: translate(-50%, 0) rotate(-5deg);
  }
}

@keyframes kitty-bounce-gentle {
  0%, 100% {
    transform: translate(-50%, 0) translateY(0);
  }
  50% {
    transform: translate(-50%, 0) translateY(-8px);
  }
}

/* Side position animations */
@keyframes kitty-shy-peek {
  0%, 100% {
    transform: translate(-50%, 0) rotate(15deg) translateX(0);
  }
  50% {
    transform: translate(-50%, 0) rotate(20deg) translateX(-10px);
  }
}

@keyframes kitty-hide-seek {
  0%, 80%, 100% {
    transform: translate(50%, 0) rotate(-10deg) translateX(0);
  }
  40% {
    transform: translate(50%, 0) rotate(-15deg) translateX(15px);
  }
}

@keyframes kitty-corner-wave {
  0%, 90%, 100% {
    transform: rotate(20deg);
  }
  20%, 60% {
    transform: rotate(25deg);
  }
}

@keyframes kitty-shy-wiggle {
  0%, 100% {
    transform: rotate(-15deg) translateY(0);
  }
  25% {
    transform: rotate(-18deg) translateY(-2px);
  }
  75% {
    transform: rotate(-12deg) translateY(2px);
  }
}

@keyframes kitty-behind-peek {
  0%, 70%, 100% {
    transform: translate(-50%, 0) rotate(8deg) scale(1);
  }
  35% {
    transform: translate(-50%, 0) rotate(12deg) scale(1.1);
  }
}

/* Click interaction animations */
@keyframes kitty-wink {
  0%, 90%, 100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.2) rotate(5deg);
  }
}

@keyframes kitty-clap {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1) rotate(-5deg);
  }
  75% {
    transform: scale(1.1) rotate(5deg);
  }
}

@keyframes kitty-excited-bounce {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  25% {
    transform: scale(1.15) translateY(-10px) rotate(-3deg);
  }
  75% {
    transform: scale(1.15) translateY(-10px) rotate(3deg);
  }
}

@keyframes kitty-spin-joy {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.2) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

@keyframes kitty-shy-hide {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Automatic waving animation */
@keyframes kitty-auto-wave {
  0%, 95%, 100% {
    transform: rotate(0deg);
  }
  10%, 30% {
    transform: rotate(15deg);
  }
  20%, 40% {
    transform: rotate(-10deg);
  }
}

/* Hand waving animation for Hello Kitty */
@keyframes kitty-hand-wave {
  0%, 90%, 100% {
    transform: rotate(0deg);
  }
  15%, 35% {
    transform: rotate(25deg);
  }
  25%, 45% {
    transform: rotate(-15deg);
  }
}

/* Apply hand waving to the wave arm */
.hello-kitty-character .kitty-wave-arm {
  animation: kitty-hand-wave 4s infinite ease-in-out;
  transform-origin: 132px 155px;
}

/* ===== INTERACTIVE ANIMATION CLASSES ===== */
/* Blinking state */
.kitty-blinking .kitty-eye-left,
.kitty-blinking .kitty-eye-right {
  animation: kitty-blink 3s infinite;
}

/* Blushing state */
.kitty-blushing .blush-left,
.kitty-blushing .blush-right {
  animation: kitty-blush 2s ease-in-out;
}

/* Eye covering state */
.kitty-covering-eyes .kitty-hand-left,
.kitty-covering-eyes .kitty-hand-right {
  display: block !important;
  animation: kitty-cover-eyes 2s ease-in-out;
}

/* Smiling state */
.kitty-smiling .kitty-mouth {
  display: block !important;
  animation: kitty-smile 2s ease-in-out;
}

/* Happy state - bow wiggle */
.kitty-happy .kitty-bow {
  animation: kitty-bow-wiggle 1s ease-in-out;
}

/* Excited state - whisker twitch */
.kitty-excited .whisker-left-top,
.kitty-excited .whisker-right-top {
  animation: whisker-twitch 0.5s ease-in-out 3;
}

/* Hover interactions */
.hello-kitty-character:hover .kitty-bow {
  animation: kitty-bow-wiggle 0.8s ease-in-out infinite;
}

.hello-kitty-character:hover .blush-left,
.hello-kitty-character:hover .blush-right {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

/* Message reaction animations */
.kitty-wink {
  animation: kitty-wink 0.8s ease-in-out;
}

.kitty-clap {
  animation: kitty-clap 1s ease-in-out;
}

.kitty-excited {
  animation: kitty-excited-bounce 1.2s ease-in-out;
}

.kitty-spin {
  animation: kitty-spin-joy 1.5s ease-in-out;
}

.kitty-hide {
  animation: kitty-shy-hide 1s ease-in-out;
}

.kitty-auto-wave {
  animation: kitty-auto-wave 2s ease-in-out;
}

/* ===== CHAT BUBBLE HEART ANIMATION ===== */
@keyframes heart-float {
  0% {
    opacity: 1;
    transform: scale(0) translateY(0);
  }
  50% {
    opacity: 1;
    transform: scale(1) translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: scale(1.2) translateY(-20px);
  }
}

.chat-heart {
  position: absolute;
  color: #ff69b4;
  font-size: 16px;
  animation: heart-float 1s ease-out forwards;
  pointer-events: none;
  z-index: 200;
}

/* ===== HELLO KITTY STYLED CHAT BUBBLES ===== */
body.theme-hellokitty .msg-bubble {
  border-radius: 20px;
  position: relative;
  box-shadow: 0 2px 10px rgba(255, 105, 180, 0.2);
}

body.theme-hellokitty .msg-right {
  background: linear-gradient(135deg, #ff69b4, #ff1493);
  color: white;
  border-bottom-right-radius: 8px;
}

body.theme-hellokitty .msg-left {
  background: linear-gradient(135deg, #ffffff, #ffe6f2);
  color: #cc0066;
  border-bottom-left-radius: 8px;
  border: 2px solid #ffb6c1;
}

/* Hello Kitty bow decoration for chat bubbles */
body.theme-hellokitty .msg-bubble::before {
  content: "🎀";
  position: absolute;
  top: -8px;
  font-size: 12px;
  z-index: 1;
}

body.theme-hellokitty .msg-right::before {
  right: 10px;
}

body.theme-hellokitty .msg-left::before {
  left: 10px;
}

/* ===== SPARKLE TOGGLE BUTTON ===== */
.sparkle-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  background: rgba(255, 105, 180, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(255, 105, 180, 0.3);
  display: none !important; /* Force hide sparkle toggle */
}

body.theme-hellokitty .sparkle-toggle {
  opacity: 0 !important; /* Keep toggle hidden */
  display: none !important; /* Force hide toggle */
}

.sparkle-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.5);
}

.sparkle-toggle.disabled {
  background: rgba(128, 128, 128, 0.5);
  color: #999;
}

/* ===== ENHANCED THEME BACKGROUND ===== */
body.theme-hellokitty {
  /* Clean matte pink background without any patterns, gradients, or overlays */
  background: #ffb6c1 !important;
  /* Remove all background images and patterns */
  background-image: none !important;
  background-size: auto !important;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .hello-kitty-character {
    width: 60px;
    height: 60px;
  }
  
  .kitty-main-hug-button {
    width: 100px;
    height: 80px;
    bottom: 40%;
  }
  
  .kitty-main-above-sitting,
  .kitty-main-above-lying,
  .kitty-main-above-sleepy,
  .kitty-main-above-curious,
  .kitty-main-above-playful {
    width: 60px;
    height: 60px;
  }
  
  .kitty-main-side-peek-left,
  .kitty-main-side-hide-right,
  .kitty-main-side-corner-left,
  .kitty-main-side-corner-right,
  .kitty-main-side-behind {
    width: 50px;
    height: 50px;
  }
  
  .kitty-assistant {
    width: 45px;
    height: 45px;
    bottom: 15px;
    right: 15px;
  }
  
  .sparkle-toggle {
    width: 35px;
    height: 35px;
    font-size: 16px;
    top: 15px;
    left: 15px;
  }
  
  /* Adjust sparkles for mobile */
  .sparkle {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .hello-kitty-character {
    width: 50px;
    height: 50px;
  }
  
  .kitty-main-hug-button {
    width: 80px;
    height: 65px;
    bottom: 38%;
  }
  
  .kitty-main-above-sitting,
  .kitty-main-above-lying,
  .kitty-main-above-sleepy,
  .kitty-main-above-curious,
  .kitty-main-above-playful {
    width: 50px;
    height: 50px;
  }
  
  .kitty-main-side-peek-left,
  .kitty-main-side-hide-right,
  .kitty-main-side-corner-left,
  .kitty-main-side-corner-right,
  .kitty-main-side-behind {
    width: 40px;
    height: 40px;
  }
  
  .kitty-assistant {
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 10px;
  }
  
  .sparkle-toggle {
    width: 30px;
    height: 30px;
    font-size: 14px;
    top: 10px;
    left: 10px;
  }
}