/* @import 'bootstrap/dist/css/bootstrap.min.css'; */

/* Custom Animations for Liquid Flow */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

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

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Custom utility classes */
.blur-xl {
  filter: blur(24px);
}

.blur-3xl {
  filter: blur(64px);
}

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

/* Transition utilities */
.transition-all {
  transition: all 0.3s ease;
}

.transition-colors {
  transition: background-color 0.7s ease, color 0.5s ease;
}

.transition-transform {
  transition: transform 0.3s ease;
}

/* Custom button styles */
.btn-gradient {
  background: linear-gradient(to right, #6366f1, #9333ea);
  border: none;
  color: white;
  font-weight: 600;
  font-size: 1.125rem;
  padding: 1rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  color: white;
}

.btn-close-modal {
  padding: 0.75rem;
  background-color: white;
  border-radius: 50%;
  border: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  z-index: 999999999;
  color: #1e2126 !important;
}

.btn-close-modal svg {
  color: #1e2126 !important;
}

.btn-close-modal:hover {
  transform: scale(1.1);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Control bar button styles */
.btn-mute {
  padding: 1rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
}

.btn-mute-active {
  background-color: rgba(154, 52, 18, 0.1);
  color: #9a3412;
  border: 1px solid rgba(154, 52, 18, 0.2);
}

.btn-mute-active:hover {
  background-color: rgba(154, 52, 18, 0.2);
}

.btn-mute-inactive {
  background-color: #bf0016;
  color: #f6f9fb;
  border: 1px solid #bf0016;
}

.btn-mute-inactive:hover {
  background-color: #7c2d12;
  color: #f6f9fb;
}

.btn-connection {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
}

.btn-connection-connected {
  background-color: #9a3412;
  color: white;
  border: 1px solid #c2410c;
}

.btn-connection-connected:hover {
  background-color: #7c2d12;
}

.btn-connection-connecting {
  background-color: #e7e5e4;
  color: #a8a29e;
  border: 1px solid #d6d3d1;
  cursor: not-allowed;
}

.btn-connection-disconnected {
  background-color: #495057;
  color: white;
  border: none;
}

.btn-connection-disconnected:hover {
  background-color: #7c2d12;
  transform: scale(1.05);
}

/* Fullscreen modal */
.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  background-color: #1e2126;
  /* background-image: url(/assets/img/1200507.jpg) !important; */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Branding text */
.branding-text {
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.5;
  text-transform: uppercase;
}

/* Orb styles */
.orb-container {
  position: relative;
  width: 16rem;
  height: 16rem;
}

@media (min-width: 768px) {
  .orb-container {
    width: 24rem;
    height: 24rem;
  }
}

.orb-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.3;
  transition: all 1s ease;
}

.orb-blob {
  position: absolute;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(24px);
  opacity: 0.7;
  transition: background-color 0.7s ease;
}

.orb-blob-1 {
  top: 0;
  left: -1rem;
}

.orb-blob-2 {
  top: 0;
  right: -1rem;
}

.orb-blob-3 {
  bottom: -2rem;
  left: 5rem;
}

/* Color classes for orb states */
.bg-orange-800 { background-color: #9a3412; }
.bg-yellow-500 { background-color: #eab308; }
.bg-red-700 { background-color: #b91c1c; }
.bg-yellow-100 { background-color: #fef9c3; }
.bg-yellow-200 { background-color: #fef08a; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-stone-100 { background-color: #f5f5f4; }
.bg-stone-200 { background-color: #e7e5e4; }
.bg-stone-300 { background-color: #d6d3d1; }
.bg-connected-200 { background-color: #07bb5b; }

/* Gradient for speaking state */
.bg-gradient-speaking {
  background: linear-gradient(to right, #c2410c, #eab308);
}

/* Error toast */
.error-toast {
  background-color: #ef4444;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  animation: bounce1 1s infinite;
}

@keyframes bounce1 {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}