/* --- Core Palette & Fonts --- */
:root {
  --purple: #7a5af8;
}
/* This is for the material icons font */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Background Aurora Animation --- */
.background-aurora {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.background-aurora::before,
.background-aurora::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.3;
}
.background-aurora::before {
  width: 40vmax;
  height: 40vmax;
  top: -10%;
  right: -10%;
  background-color: #1ED760; /* Tailwind Primary */
  animation: moveBlob 45s infinite alternate ease-in-out;
}
.background-aurora::after {
  width: 50vmax;
  height: 50vmax;
  bottom: -20%;
  left: -20%;
  background-color: var(--purple);
  animation: moveBlob 60s infinite alternate-reverse ease-in-out;
}
@keyframes moveBlob {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(40px, -60px) rotate(180deg); }
}

/* --- Loading Spinner --- */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255,255,255,0.2);
  border-top-color: #1ED760; /* Tailwind Primary */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Floating Emoji Reactions --- */
.floating-emoji {
  position: absolute;
  bottom: -50px;
  font-size: 2rem;
  animation: float-up 4s ease-out forwards;
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
  pointer-events: none;
}
@keyframes float-up {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-80vh) scale(1.5); opacity: 0; }
}

/* --- Custom UI Component Styles --- */
/* CORRECTED: Replaced @apply with standard CSS */
.control-btn {
  background-color: rgba(24, 24, 24, 0.5); /* bg-surface-dark/50 */
  border-radius: 9999px; /* rounded-full */
  padding: 0.75rem; /* p-3 */
  transition-property: background-color, color;
  transition-duration: 300ms;
}
.control-btn:hover {
  background-color: #1ED760; /* hover:bg-primary */
  color: #121212; /* hover:text-black */
}

.reaction-btn {
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
  padding: 0.5rem; /* p-2 */
  border-radius: 9999px; /* rounded-full */
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.reaction-btn:hover {
  transform: scale(1.25);
}


/* iOS zoom fix */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea {
    font-size: 16px !important;
}