/* Animation-related styles */

/* State Circle Base */
.state-circle {
  display: inline-block;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
}

/* Connected Box */
.connected-box {
  border: 3px solid #4f46e5; /* Tailwind indigo-600 */
}

/* Connecting Animation */
.connecting-circle {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 0.5rem solid #d1d5db; /* Tailwind gray-300 */
  border-top-color: #4f46e5; /* Tailwind indigo-600 */
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Waiting Animation */
.waiting-circle {
  background-color: #4f46e5; /* Tailwind indigo-600 */
  animation: wait 2s ease-in-out infinite;
}

@keyframes wait {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Listening Animation */
.listening-circle {
  position: relative;
  border: 0.8rem solid #4f46e5; /* Tailwind indigo-600 */
}

.inner-circle {
  width: 3rem;
  height: 3rem;
  background-color: #4f46e5; /* Tailwind indigo-600 */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Thinking Animation */
.thinking-circle {
  background-color: #4f46e5; /* Tailwind indigo-600 */
  animation: thinking 1s linear infinite;
  opacity: 0.5;
}

@keyframes thinking {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: none;
  }
  100% {
    opacity: 1;
  }
}

/* Generating Animation */
.generating-circle {
  --b: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #4f46e5; /* Tailwind indigo-600 */
  opacity: 0.8;
  mask: 
    repeating-conic-gradient(#0000 0deg,#000 1deg 60deg,#0000 61deg 90deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  mask-composite: intersect;
  animation: l5 1.5s infinite;
}

@keyframes l5 {
  to {
    transform: rotate(.5turn);
  }
}

/* Speaking Animation */
.speaking-circle {
  background-color: #4f46e5; /* Tailwind indigo-600 */
}