/* Universal Scrollbar Styling for Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
  width: 8px; /* For vertical scrollbars */
  height: 8px; /* For horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: #2d3748; /* Darker track */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #4a5568; /* Darker thumb */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280; /* Even darker thumb on hover */
}

/* Chat-specific scrollbar (overrides universal for #chat element) */
#chat::-webkit-scrollbar {
  width: 8px;
}
#chat::-webkit-scrollbar-track {
  background: #2d3748; /* Darker track */
  border-radius: 10px;
}
#chat::-webkit-scrollbar-thumb {
  background: #4a5568; /* Darker thumb */
  border-radius: 10px;
}
#chat::-webkit-scrollbar-thumb:hover {
  background: #6b7280; /* Even darker thumb on hover */
}

/* Keyframes for chat bubble animation - Specific to Chat */
@keyframes bubbleEnter {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.message.animate-bubble-enter {
  animation: bubbleEnter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; /* Bounce effect */
}

/* Keyframes for button hover animation - Common */
@keyframes buttonHoverPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.btn-animated:hover {
  animation: buttonHoverPulse 0.6s infinite alternate;
}

/* Button Gradients - Specific to Chat Screen */
.btn-send {
  background-image: linear-gradient(
    to right,
    #312e81,
    /* Deep Indigo-Blue (like blue-900) */ #4338ca
      /* Muted Blue (like blue-700) */
  );
}
.btn-send:hover {
  background-image: linear-gradient(
    to right,
    #1e1b4b,
    /* Even deeper Indigo for hover */ #3730a3 /* Darker muted Blue for hover */
  );
}

.btn-record {
  background-image: linear-gradient(
    to right,
    #065f46,
    /* Dark Forest Green (like emerald-800) */ #047857
      /* Muted Emerald (like emerald-700) */
  );
}
.btn-record:hover {
  background-image: linear-gradient(
    to right,
    #064e3b,
    /* Even deeper Forest Green for hover */ #056a4a
      /* Darker muted Emerald for hover */
  );
}

.btn-record.recording {
  background-image: linear-gradient(
    to right,
    #b91c1c,
    /* Deep Red (like red-700) */ #991b1b /* Darker Red (like red-800) */
  );
}

/* Button Gradients - Specific to QR Login Screen */
.btn-primary {
  background-image: linear-gradient(
    to right,
    #312e81,
    /* Deep Indigo-Blue (like blue-900) */ #4338ca
      /* Muted Blue (like blue-700) */
  );
}
.btn-primary:hover {
  background-image: linear-gradient(
    to right,
    #1e1b4b,
    /* Even deeper Indigo for hover */ #3730a3 /* Darker muted Blue for hover */
  );
}