/* ========================================
   ROBOT STYLES & ANIMATIONS
======================================== */

/* ========================================
   PET ROBOT — free-roaming cursor companion
======================================== */

.pet-robot {
  position: fixed;
  z-index: 900;            /* below modals & overlays, won't block content */
  pointer-events: none;    /* never blocks clicks on the page */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  user-select: none;
}
.pet-robot.pet-visible {
  opacity: 1;
}

/* Mobile: corner-roaming mode — JS drives left/top */
.pet-robot.pet-mobile-roam {
  position: fixed;
  transform: none;          /* JS uses raw left/top, no centering translate */
  opacity: 0;
  pointer-events: none;     /* nothing on mobile blocks taps */
  /* smooth glide between corners */
  transition: left 1.1s cubic-bezier(0.4,0,0.2,1),
              top  1.1s cubic-bezier(0.4,0,0.2,1),
              opacity 0.6s ease;
}
/* Disable tap capture on face in mobile mode */
.pet-robot.pet-mobile-roam .pet-face {
  pointer-events: none;
  cursor: default;
}
.pet-robot.pet-mobile-roam.pet-visible {
  opacity: 1;
}

/* When pet is on RIGHT side: flip speech bubble so it doesn't overflow */
.pet-robot.pet-mobile-roam.corner-right .pet-speech {
  right: 0;
  left: auto;
  transform-origin: right bottom;
}
.pet-robot.pet-mobile-roam.corner-right .pet-speech::after {
  left: auto;
  right: 10px;
  transform: none;
}

/* Fallback: old static class kept for safety, but no longer applied */
.pet-robot.pet-static {
  position: fixed;
  bottom: 110px;
  right: 22px;
  left: auto !important;
  top:  auto !important;
  transform: none;
  opacity: 0;
}
.pet-robot.pet-static.pet-visible {
  opacity: 1;
}

/* The emoji face */
.pet-face {
  font-size: 2.4rem;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.55));
  animation: petBob 2.2s ease-in-out infinite;
  cursor: pointer;         /* clickable — opens chat */
  pointer-events: auto;
  transition: transform 0.15s;
}
.pet-face:hover {
  transform: scale(1.18);
}
@keyframes petBob {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* Glow shadow under pet */
.pet-shadow {
  width: 28px;
  height: 7px;
  background: radial-gradient(ellipse, rgba(0, 245, 255, 0.35) 0%, transparent 70%);
  margin-top: 3px;
  animation: petShadow 2.2s ease-in-out infinite;
}
@keyframes petShadow {
  0%, 100% { transform: scaleX(1);    opacity: 0.5; }
  50%       { transform: scaleX(0.65); opacity: 0.18; }
}

/* Speech bubble */
.pet-speech {
  background: rgba(8, 8, 20, 0.93);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 14px;
  white-space: nowrap;
  margin-bottom: 7px;
  opacity: 0;
  transform: translateY(6px) scale(0.88);
  transition: opacity 0.28s ease, transform 0.28s ease;
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.28);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  position: relative;
}
.pet-speech::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--cyan);
}
.pet-speech.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .pet-face   { font-size: 1.75rem; }
  .pet-shadow { width: 20px; height: 5px; }
  .pet-speech { font-size: 0.62rem; padding: 4px 8px; max-width: 140px; }
}


.robot-container {
  position: relative;
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* Glow Ring Under Robot */
.robot-glow-ring {
  position: absolute;
  bottom: 60px;
  width: 200px; height: 30px;
  background: radial-gradient(ellipse, rgba(0,245,255,0.3) 0%, transparent 70%);
  filter: blur(8px);
  animation: glowRingPulse 2s ease-in-out infinite;
}
@keyframes glowRingPulse {
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.2); }
}

/* ---- ROBOT BODY ---- */
.robot-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: robotFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(0,245,255,0.3));
  transition: filter 0.3s;
}
.robot-body:hover {
  filter: drop-shadow(0 0 40px rgba(0,245,255,0.6));
}
@keyframes robotFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(1deg); }
  66% { transform: translateY(-8px) rotate(-1deg); }
}

/* Robot Talking Animation */
.robot-body.talking {
  animation: robotTalk 0.3s ease-in-out infinite alternate;
}
@keyframes robotTalk {
  from { transform: translateY(-10px) scale(1); }
  to { transform: translateY(-12px) scale(1.02); }
}

/* ---- HEAD ---- */
.robot-head {
  width: 130px; height: 110px;
  background: linear-gradient(145deg, #1a3a6b, #0d2245);
  border-radius: 20px;
  border: 2px solid rgba(0, 245, 255, 0.5);
  position: relative;
  box-shadow: inset 0 0 20px rgba(0,245,255,0.1), 0 0 20px rgba(0,245,255,0.2);
  display: flex;
  align-items: center; justify-content: center;
}

/* Antenna */
.robot-antenna {
  position: absolute;
  top: -36px;
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.antenna-ball {
  width: 14px; height: 14px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan);
  animation: antennaPulse 1.5s ease-in-out infinite;
}
@keyframes antennaPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan); }
  50% { transform: scale(1.3); box-shadow: 0 0 20px var(--cyan), 0 0 40px var(--cyan); }
}
.antenna-stick {
  width: 3px; height: 22px;
  background: linear-gradient(to bottom, var(--cyan), rgba(0,245,255,0.3));
  border-radius: 2px;
}

/* Face */
.robot-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Eyes */
.robot-eyes {
  display: flex;
  gap: 18px;
}
.robot-eye {
  width: 28px; height: 22px;
  background: #020810;
  border-radius: 6px;
  border: 2px solid var(--cyan);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px var(--cyan), inset 0 0 8px rgba(0,245,255,0.3);
}
.eye-pupil {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--cyan);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--cyan);
  animation: eyeLook 4s ease-in-out infinite;
}
@keyframes eyeLook {
  0%, 40%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-30%, -50%); }
  60% { transform: translate(-70%, -50%); }
  70% { transform: translate(-50%, -30%); }
  80% { transform: translate(-50%, -70%); }
}
.eye-scan {
  position: absolute;
  width: 100%; height: 3px;
  background: rgba(0,245,255,0.6);
  top: 0;
  animation: eyeScan 2s linear infinite;
}
@keyframes eyeScan {
  0% { top: 0; opacity: 1; }
  100% { top: 100%; opacity: 0.3; }
}

/* Talking - mouth bars animate */
.robot-mouth {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 20px;
}
.mouth-bar {
  width: 6px;
  border-radius: 3px;
  background: var(--cyan);
  height: 6px;
  box-shadow: 0 0 6px var(--cyan);
  transition: height 0.1s;
}
.robot-body.talking .mouth-bar:nth-child(1) { animation: mouthAnim1 0.3s infinite; }
.robot-body.talking .mouth-bar:nth-child(2) { animation: mouthAnim2 0.3s infinite 0.1s; }
.robot-body.talking .mouth-bar:nth-child(3) { animation: mouthAnim3 0.3s infinite 0.2s; }
@keyframes mouthAnim1 {
  0%, 100% { height: 6px; } 50% { height: 16px; }
}
@keyframes mouthAnim2 {
  0%, 100% { height: 6px; } 50% { height: 20px; }
}
@keyframes mouthAnim3 {
  0%, 100% { height: 6px; } 50% { height: 12px; }
}

/* Ears */
.robot-ears {
  position: absolute;
  top: 50%;
  width: calc(100% + 20px);
  left: -10px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.robot-ear {
  width: 14px; height: 30px;
  background: linear-gradient(145deg, #1a3a6b, #0d2245);
  border: 2px solid rgba(0,245,255,0.4);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.ear-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  animation: earPulse 2s infinite;
}
@keyframes earPulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.3; }
}

/* ---- NECK ---- */
.robot-neck {
  width: 20px; height: 14px;
  background: linear-gradient(145deg, #1a3a6b, #0d2245);
  border-left: 2px solid rgba(0,245,255,0.3);
  border-right: 2px solid rgba(0,245,255,0.3);
}

/* ---- TORSO ---- */
.robot-torso {
  width: 140px; height: 120px;
  background: linear-gradient(145deg, #1a3a6b, #0d2245);
  border-radius: 16px;
  border: 2px solid rgba(0,245,255,0.4);
  box-shadow: inset 0 0 20px rgba(0,245,255,0.1);
  display: flex;
  align-items: center; justify-content: center;
  position: relative;
}
.chest-panel {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
}
.chest-lights {
  display: flex; gap: 6px;
}
.chest-light {
  width: 10px; height: 10px;
  border-radius: 50%;
  position: absolute;
}
.chest-light.l1 { top: 12px; left: 14px; background: var(--green); box-shadow: 0 0 8px var(--green); animation: chestBlink 1s infinite; }
.chest-light.l2 { top: 12px; left: 30px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: chestBlink 1.5s infinite 0.3s; }
.chest-light.l3 { top: 12px; left: 46px; background: var(--purple); box-shadow: 0 0 8px var(--purple); animation: chestBlink 0.8s infinite 0.6s; }
@keyframes chestBlink {
  0%, 100% { opacity: 1; } 50% { opacity: 0.2; }
}
.chest-screen {
  width: 90px; height: 50px;
  background: #020810;
  border-radius: 8px;
  border: 1px solid var(--cyan);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 10px rgba(0,245,255,0.2), 0 0 10px rgba(0,245,255,0.2);
  overflow: hidden;
}
.chest-text {
  font-family: 'Orbitron', monospace;
  font-size: 0.6rem;
  color: var(--cyan);
  letter-spacing: 2px;
  animation: chestTextScroll 3s linear infinite;
}
@keyframes chestTextScroll {
  0% { transform: translateX(60px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(-60px); opacity: 0; }
}

/* ---- ARMS ---- */
.robot-arms {
  position: absolute;
  top: 160px;
  width: 200px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.robot-arm {
  display: flex; flex-direction: column; align-items: center;
}
.arm-upper {
  width: 16px; height: 50px;
  background: linear-gradient(145deg, #1a3a6b, #0d2245);
  border: 2px solid rgba(0,245,255,0.3);
  border-radius: 8px;
}
.arm-lower {
  width: 14px; height: 40px;
  background: linear-gradient(145deg, #142e58, #0a1f40);
  border: 2px solid rgba(0,245,255,0.2);
  border-radius: 8px;
  margin-top: 2px;
}
.arm-hand { font-size: 1.2rem; margin-top: 3px; }
.left-arm {
  animation: leftArmWave 3s ease-in-out infinite;
  transform-origin: top center;
}
.right-arm {
  animation: rightArmWave 3s ease-in-out infinite 1.5s;
  transform-origin: top center;
}
@keyframes leftArmWave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-15deg); }
}
@keyframes rightArmWave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
}

/* ---- BASE ---- */
.robot-base {
  width: 80px; height: 20px;
  background: linear-gradient(145deg, #1a3a6b, #0d2245);
  border: 2px solid rgba(0,245,255,0.3);
  border-radius: 0 0 16px 16px;
  display: flex; align-items: center; justify-content: center;
}
.base-light {
  width: 40px; height: 4px;
  background: var(--cyan);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--cyan);
  animation: baseLightPulse 1s ease-in-out infinite;
}
@keyframes baseLightPulse {
  0%, 100% { opacity: 1; width: 40px; }
  50% { opacity: 0.5; width: 30px; }
}

/* ---- SPEECH BUBBLE ---- */
.robot-speech {
  position: absolute;
  top: 0; right: -220px;
  width: 200px;
  background: var(--dark3);
  border: 1px solid var(--cyan);
  border-radius: 14px;
  padding: 1rem;
  font-size: 0.82rem;
  color: var(--text);
  box-shadow: var(--glow-cyan);
  animation: speechFloat 3s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.robot-speech.visible { opacity: 1; }
.speech-tail {
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid var(--cyan);
}
@keyframes speechFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.robot-hint {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text2);
  animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ===== RESPONSIVE ROBOT ===== */
@media (max-width: 1100px) {
  .robot-container { flex: 0 0 300px; }
  .robot-speech { display: none; }
}
@media (max-width: 768px) {
  .robot-container {
    flex: none;
    order: -1;
    width: 100%;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .robot-body { transform: scale(0.8); transform-origin: top center; }
  .robot-arms { width: 170px; }
  .robot-speech {
    display: block !important;
    position: relative;
    top: auto; right: auto; left: auto;
    width: auto; max-width: 260px;
    margin: -1rem auto 0;
    text-align: center;
  }
  .speech-tail { display: none; }
  .robot-hint { font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .robot-body { transform: scale(0.68); transform-origin: top center; }
  .robot-arms { width: 145px; }
  .robot-speech { max-width: 220px; font-size: 0.76rem; padding: 0.7rem; }
  .robot-container { margin-bottom: 0.5rem; }
  .robot-glow-ring { bottom: 20px; }
}