.typing-text {
  background: linear-gradient(to right, #9900ff, #d33476, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: bold;
  white-space: nowrap;
  border-right: 3px solid #3b82f6;
  animation: typing 4s steps(30, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #3b82f6;
  }
}

.status-text {
  font-size: 1.25rem;
  font-weight: bold;
  transition: color 0.3s ease, transform 0.3s ease;
}

.status-active {
  color: #34d399; /* Green */
  transform: scale(1.1);
}

.status-inactive {
  color: #f87171; /* Red */
  transform: scale(1);
}

.status-waiting {
  color: #ffffff; /* White */
  transform: scale(1);
}

/* Button transition */
.toggle-button {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.toggle-button.active {
  background-color: #34d399; /* Green */
  transform: scale(1.1);
}

.toggle-button.inactive {
  background-color: #ff0000; /* Gray */
  transform: scale(1);
}