/* ============================================
   CLAPPY - Movie Bot Character Styles
   SAFE VERSION - no global overrides
   ============================================ */

/* === ROOT WRAPPER === */
#clappy-root {
  position: fixed;
  bottom: 80px;
  right: 24px;
  z-index: 99999;
  user-select: none;
  touch-action: none;
  will-change: transform;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

/* === CHARACTER CONTAINER === */
#clappy-char {
  width: 80px;
  height: auto;
  cursor: pointer;
  position: relative;
  animation: clappyFloat 3.4s ease-in-out infinite;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.5));
  transition: filter 0.2s ease;
}

#clappy-char:hover {
  filter: drop-shadow(0 14px 36px rgba(232,200,74,0.45));
}

/* === FLOATING ANIMATION === */
@keyframes clappyFloat {
  0%   { transform: translateY(0px) rotate(-1.5deg); }
  35%  { transform: translateY(-12px) rotate(1.5deg); }
  65%  { transform: translateY(-6px) rotate(-0.8deg); }
  100% { transform: translateY(0px) rotate(-1.5deg); }
}

/* === TAP BOUNCE === */
@keyframes clappyBounce {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.15) rotate(6deg); }
  55%  { transform: scale(0.93) rotate(-4deg); }
  80%  { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.clappy-tap-bounce {
  animation: clappyBounce 0.45s ease forwards !important;
}

/* === CLAPPER HEAD === */
#clappy-head-top {
  transform-origin: 8px 100%;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#clappy-head-top.open {
  transform: rotate(-42deg);
}

/* === EYES BLINKING === */
#clappy-eye-left,
#clappy-eye-right {
  animation: clappyBlink 4.5s ease-in-out infinite;
}

#clappy-eye-right {
  animation-delay: 0.12s;
}

@keyframes clappyBlink {
  0%, 88%, 100% { transform: scaleY(1); }
  93%            { transform: scaleY(0.08); }
}

/* === ARMS === */
#clappy-arm-left {
  transform-origin: 18px 8px;
  animation: clappyArmLeft 3.4s ease-in-out infinite;
}

#clappy-arm-right {
  transform-origin: 72px 8px;
  animation: clappyArmRight 3.4s ease-in-out infinite;
}

@keyframes clappyArmLeft {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(-18deg); }
}

@keyframes clappyArmRight {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(18deg); }
}

/* === LEGS === */
#clappy-leg-left {
  transform-origin: 30px 2px;
  animation: clappyLegLeft 3.4s ease-in-out infinite;
}

#clappy-leg-right {
  transform-origin: 60px 2px;
  animation: clappyLegRight 3.4s ease-in-out infinite;
}

@keyframes clappyLegLeft {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(10deg); }
}

@keyframes clappyLegRight {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(-10deg); }
}

/* === SPEECH BUBBLE === */
#clappy-bubble {
  position: relative;
  margin-bottom: 10px;
  background: #ffffff;
  border-radius: 16px 16px 16px 4px;
  padding: 8px 14px;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  color: #1a1a1a;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(8px) scale(0.88);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  max-width: 180px;
  text-align: center;
  white-space: normal;
}

#clappy-bubble.show {
  opacity: 1;
  transform: translateY(0px) scale(1);
}

/* === DRAGGING STATE === */
#clappy-char.dragging {
  cursor: grabbing;
  animation: none !important;
  filter: drop-shadow(0 18px 40px rgba(232,200,74,0.6));
}