@keyframes wiggle {
  0% {
    translate: -15px -10px;
    rotate: -2deg;
  }
  25% {
    translate: 10px -25px;
    rotate: 1deg;
  }
  50% {
    translate: 25px 5px;
    rotate: 2deg;
  }
  75% {
    translate: -5px 15px;
    rotate: -1deg;
  }
  100% {
    translate: -15px -10px;
    rotate: -2deg;
  }
}
@keyframes squeeze {
  0% {
    transform: translate(-50%, -50%) scaleY(1) scaleX(1);
  }
  15% {
    transform: translate(-50%, -50%) scaleY(0.92) scaleX(1.054);
  }
  30% {
    transform: translate(-50%, -50%) scaleY(0.896) scaleX(1.081);
  }
  45% {
    transform: translate(-50%, -50%) scaleY(1.099) scaleX(0.946);
  }
  55% {
    transform: translate(-50%, -50%) scaleY(1.068) scaleX(0.964);
  }
  70% {
    transform: translate(-50%, -50%) scaleY(0.964) scaleX(1.023);
  }
  80% {
    transform: translate(-50%, -50%) scaleY(1.036) scaleX(0.982);
  }
  90% {
    transform: translate(-50%, -50%) scaleY(0.982) scaleX(1.009);
  }
  100% {
    transform: translate(-50%, -50%) scaleY(1) scaleX(1);
  }
}

.assistant {
  position: absolute;
  transform: translate(50vw, -50vh);
}
.assistant.out{
  position: absolute;
  transform: translate(50vw, 100vh);
  transition: 3s ease-in;
}
.assistant.center{
  position: absolute;
  transform: translate(50vw, -50vh);
  transition: 3s cubic-bezier(0.62, 1.51, 0.61, 1);
}
.assistant.top-center{
  position: absolute;
  transform: translate(50vw, -80vh);
  transition: 3s cubic-bezier(0.62, 1.51, 0.61, 1);
}
.assistant.bottom-center{
  position: absolute;
  transform: translate(50vw, -20vh);
  transition: 3s cubic-bezier(0.62, 1.51, 0.61, 1);
}
.assistant.top-right{
  position: absolute;
  transform: translate(90vw, -80vh);
  transition: 3s cubic-bezier(0.62, 1.51, 0.61, 1);
}
.assistant-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: 
    wiggle 8s ease-in-out infinite,
    squeeze 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  padding: 20px;
  border-radius: 50%;
  background: linear-gradient(190deg,rgba(0,200,255,0.3) 0%, rgba(0,0,0,0) 30%);
  border: 2px solid currentColor;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 20px rgba(var(--text-rgb), 0.15);
  overflow: visible; /* Allow mouth to move outside */
}

/* Mouth container for bands */
.assistant-mouth {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 1px;
  min-width: 20px;
  max-width: 80px;
  min-height: 10px;
  /* Default position, can be changed via JavaScript */
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
  /* border: 2px solid currentColor; */
  border-radius: 20% 20% 50% 50%;
}

/* Inner border for bubble effect */
.assistant-container::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.3;
  pointer-events: none;
}

/* Highlight effect for glass look */
.assistant-container::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 20%;
  width: 30%;
  height: 20%;
  background: rgba(var(--text-rgb), 0.1);
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
}

.assistant-band {
  width: 5px;
  background: currentColor;
  border-radius: 2px;
  transition: height 50ms ease-out;
  align-self: center;
  opacity: 1;
  box-shadow: 0 0 10px rgba(var(--text-rgb), 0.2);
  min-height: 2px;
}

.assistant-eye-left {
  position: absolute;
  left: 35%;
  top: 35%;
  width: 10px;
  height: 15px;
  transform: translate(-50%, -50%);
  transition: /* transform 0.2s ease-out, */ height 0.1s linear;
  background-color: currentColor;
  border-radius: 50%;
}
.assistant-eye-right {
  position: absolute;
  left: 65%;
  top: 35%;
  width: 10px;
  height: 15px;
  transform: translate(-50%, -50%);
  transition: /* transform 0.2s ease-out,  */height 0.1s linear;
  background-color: currentColor;
  border-radius: 50%;
}

.assistant-eye-left.blink,
.assistant-eye-right.blink {
  height: 2px;
}