/* ═══════════════════════════════════════════════════
   ROBOT-MASCOT.CSS — Crystal AI Systems
   Interactive 3D-style trading robot mascot
═══════════════════════════════════════════════════ */

#crystalBot {
  position: fixed;
  left: 18px;
  bottom: 0;
  width: 130px;
  height: 230px;
  cursor: grab;
  z-index: 9990;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  filter: drop-shadow(0 12px 24px rgba(0,180,255,0.25));
  transition: filter 0.3s;
}
#crystalBot:hover {
  filter: drop-shadow(0 16px 32px rgba(0,200,255,0.45));
}
#crystalBot.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 20px 40px rgba(0,200,255,0.6));
}
#crystalBot.bouncing { transition: none; }

/* ── Idle float animation ── */
.bot-floater {
  position: absolute;
  inset: 0;
  animation: botFloat 3s ease-in-out infinite;
  transform-origin: center bottom;
}
#crystalBot.dragging .bot-floater,
#crystalBot.physics   .bot-floater { animation: none; }

@keyframes botFloat {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  30%      { transform: translateY(-8px) rotate(0.8deg); }
  70%      { transform: translateY(-5px) rotate(-0.6deg); }
}

/* ── Shadow on floor ── */
.bot-floor-shadow {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 12px;
  background: radial-gradient(ellipse, rgba(0,150,255,0.22) 0%, transparent 75%);
  border-radius: 50%;
  animation: shadowPulse 3s ease-in-out infinite;
}
@keyframes shadowPulse {
  0%,100% { width:70px; opacity:0.8; }
  30%      { width:52px; opacity:0.4; }
  70%      { width:58px; opacity:0.5; }
}

/* ── HEAD ── */
.bot-head {
  position: absolute;
  width: 96px;
  height: 90px;
  background: linear-gradient(145deg, #ffffff 0%, #dde8f5 60%, #c8d8ee 100%);
  border-radius: 50% 50% 44% 44% / 56% 56% 44% 44%;
  left: 17px;
  top: 0;
  box-shadow:
    inset -5px -6px 14px rgba(0,0,0,0.08),
    inset 3px 3px 10px rgba(255,255,255,0.8),
    3px 6px 16px rgba(0,0,0,0.18);
}

/* Side ear panels */
.bot-head::before,
.bot-head::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 36px;
  background: linear-gradient(145deg, #d0dcea, #b8cce0);
  border-radius: 6px;
  top: 22px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
}
.bot-head::before { left: -8px; border-radius: 6px 3px 3px 6px; }
.bot-head::after  { right: -8px; border-radius: 3px 6px 6px 3px; }

/* ── Antenna ── */
.bot-antenna {
  position: absolute;
  left: 57px;
  top: -10px;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 40% 35%, #60efff, #00aaff);
  border-radius: 50%;
  box-shadow: 0 0 8px #00d4ff, 0 0 18px #00aaff, 0 0 30px rgba(0,170,255,0.4);
  animation: antBlink 1.8s ease-in-out infinite;
  z-index: 2;
}
@keyframes antBlink {
  0%,45%,55%,100% { opacity:1; box-shadow: 0 0 8px #00d4ff,0 0 18px #00aaff,0 0 30px rgba(0,170,255,.4); }
  50% { opacity:0.3; box-shadow: none; }
}

/* ── Face plate (visor) ── */
.bot-face {
  position: absolute;
  width: 76px;
  height: 56px;
  background: linear-gradient(160deg, #0d0d22, #141428);
  border-radius: 38px 38px 26px 26px;
  left: 10px;
  top: 20px;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0,200,255,0.12), inset 0 -2px 6px rgba(0,0,0,0.4);
}

/* ── Eyes ── */
.bot-eye {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #001a3a, #000510);
  border: 2.5px solid #00ccff;
  box-shadow:
    0 0 6px #00ccff,
    0 0 14px rgba(0,150,255,0.5),
    inset 0 0 10px rgba(0,100,255,0.3);
  top: 8px;
  transition: border-color 0.2s;
}
.bot-eye.left  { left: 8px; }
.bot-eye.right { right: 8px; }

/* inner glow ring */
.bot-eye::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,220,255,0.3);
}

/* ── Pupils ── */
.bot-pupil {
  position: absolute;
  width: 11px;
  height: 11px;
  background: radial-gradient(circle at 35% 30%, #80f0ff, #00aaff);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px #00d4ff, 0 0 10px rgba(0,200,255,0.6);
  transition: transform 0.08s ease-out;
  pointer-events: none;
}

/* ── Smile ── */
.bot-smile {
  position: absolute;
  width: 22px;
  height: 9px;
  border: 2px solid #556;
  border-top: none;
  border-radius: 0 0 12px 12px;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 6px rgba(0,200,255,0.15);
}
/* happy state */
.bot-eye.happy { border-color: #00ffaa; box-shadow: 0 0 10px #00ffaa, 0 0 20px rgba(0,255,170,0.4), inset 0 0 10px rgba(0,200,130,0.3); }
.bot-smile.happy { border-color: #00ffaa; width:28px; }

/* ── BODY ── */
.bot-body {
  position: absolute;
  width: 70px;
  height: 58px;
  background: linear-gradient(145deg, #f5f7ff 0%, #dde4f4 55%, #c8d2e8 100%);
  border-radius: 14px 14px 18px 18px;
  left: 30px;
  top: 82px;
  box-shadow:
    inset -4px -5px 12px rgba(0,0,0,0.08),
    inset 3px 3px 8px rgba(255,255,255,0.7),
    2px 6px 14px rgba(0,0,0,0.16);
}

/* Shoulder joints */
.bot-shoulder {
  position: absolute;
  width: 18px;
  height: 18px;
  background: linear-gradient(145deg, #e8eef8, #c0cede);
  border-radius: 50%;
  top: -4px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.18);
}
.bot-shoulder.left  { left: -10px; }
.bot-shoulder.right { right: -10px; }

/* Chest dark panel */
.bot-chest {
  position: absolute;
  width: 46px;
  height: 32px;
  background: linear-gradient(160deg, #0e0e22, #1a1a38);
  border-radius: 8px;
  left: 12px;
  top: 12px;
  box-shadow: inset 0 1px 4px rgba(0,200,255,0.1);
}

/* Chest glow stripe */
.bot-chest-glow {
  position: absolute;
  bottom: 6px;
  left: 5px;
  right: 5px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #00d4ff, #0088ff, #00d4ff, transparent);
  border-radius: 2px;
  box-shadow: 0 0 8px #00d4ff, 0 0 16px rgba(0,150,255,0.5);
  animation: chestGlow 2s ease-in-out infinite;
}
@keyframes chestGlow {
  0%,100% { opacity:0.7; transform:scaleX(0.8); }
  50%      { opacity:1;   transform:scaleX(1);   }
}

/* ── ARMS ── */
.bot-arm {
  position: absolute;
  width: 20px;
  height: 52px;
  background: linear-gradient(180deg, #e0e8f4 0%, #c8d4e8 100%);
  border-radius: 10px;
  top: 86px;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.14), inset 1px 1px 4px rgba(255,255,255,0.6);
  transform-origin: top center;
  transition: transform 0.3s ease;
}
.bot-arm.left  { left: 8px;  transform: rotate(12deg); }
.bot-arm.right { right: 8px; transform: rotate(-12deg); }

/* Left arm wave */
.bot-arm.left.wave-l {
  animation: armWaveL 0.55s ease-in-out 3;
}
@keyframes armWaveL {
  0%   { transform: rotate(12deg); }
  25%  { transform: rotate(-65deg) translateY(-10px); }
  50%  { transform: rotate(-42deg) translateY(-7px); }
  75%  { transform: rotate(-68deg) translateY(-11px); }
  100% { transform: rotate(12deg); }
}

/* Right arm wave */
.bot-arm.right.wave-r {
  animation: armWaveR 0.55s ease-in-out 3;
}
@keyframes armWaveR {
  0%   { transform: rotate(-12deg); }
  25%  { transform: rotate(65deg) translateY(-10px); }
  50%  { transform: rotate(42deg) translateY(-7px); }
  75%  { transform: rotate(68deg) translateY(-11px); }
  100% { transform: rotate(-12deg); }
}

/* Hand */
.bot-hand {
  position: absolute;
  width: 22px;
  height: 20px;
  background: linear-gradient(145deg, #eef2ff, #c8d4e8);
  border-radius: 50% 50% 45% 45%;
  bottom: -9px;
  left: -1px;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.15);
}
/* Finger bumps */
.bot-hand::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 2px;
  right: 2px;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px
  );
  border-radius: 3px 3px 0 0;
}

/* ── LEGS ── */
.bot-legs {
  position: absolute;
  top: 133px;
  left: 28px;
  width: 74px;
  display: flex;
  justify-content: space-between;
}
.bot-leg {
  width: 26px;
  height: 28px;
  background: linear-gradient(180deg, #ccd4e8 0%, #aab8d0 100%);
  border-radius: 5px 5px 2px 2px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.15), inset 1px 1px 4px rgba(255,255,255,0.4);
  position: relative;
  transform-origin: top center;
}

/* Leg kick (click reaction) */
.bot-leg.kick {
  animation: legKick 0.45s ease-in-out 2;
}
@keyframes legKick {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-24deg) translateY(-5px); }
  60%  { transform: rotate(18deg); }
  80%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

/* ── WALK animation (used during return-home) ── */
@keyframes walkLegAnim {
  0%   { transform: rotate(-24deg); }
  100% { transform: rotate(24deg); }
}
@keyframes walkArmAnim {
  0%   { transform: rotate(22deg); }
  100% { transform: rotate(-22deg); }
}
@keyframes walkArmRightAnim {
  0%   { transform: rotate(-22deg); }
  100% { transform: rotate(22deg); }
}

.bot-leg.walking {
  animation: walkLegAnim 0.38s ease-in-out infinite alternate;
  transform-origin: top center;
}
/* right leg opposite phase */
#botLegR.walking { animation-delay: -0.19s; }

/* arms swing opposite to body-side leg */
.bot-arm.left.walking  { animation: walkArmAnim      0.38s ease-in-out infinite alternate; animation-delay: -0.19s; }
.bot-arm.right.walking { animation: walkArmRightAnim 0.38s ease-in-out infinite alternate; }

/* Feet / shoes */
.bot-foot {
  position: absolute;
  width: 34px;
  height: 16px;
  background: linear-gradient(145deg, #d8e0f0, #98a8c4);
  border-radius: 4px 6px 10px 8px;
  bottom: -11px;
  left: -4px;
  box-shadow: 2px 5px 10px rgba(0,0,0,0.22), inset 0 1px 3px rgba(255,255,255,0.4);
}
/* Shoe accent stripe */
.bot-foot::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 3px;
  width: 10px;
  height: 4px;
  background: rgba(0,0,0,0.12);
  border-radius: 2px;
}
/* Sole */
.bot-foot::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2px;
  right: 2px;
  height: 4px;
  background: rgba(0,0,0,0.18);
  border-radius: 0 0 6px 6px;
}

/* ── Click impact ring ── */
.bot-click-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 2px solid #00d4ff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.bot-click-ring.pop {
  animation: ringPop 0.5s ease-out forwards;
}
@keyframes ringPop {
  0%   { transform: translate(-50%,-50%) scale(0.2); opacity:0.8; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity:0; }
}

/* ── Tooltip label ── */
.bot-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: rgba(0,20,50,0.88);
  color: #00d4ff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(0,200,255,0.3);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
}
#crystalBot:hover .bot-label {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}