/* Custom Scrollbar voor de Chat Berichten Container & algemene elementen */
#chatbot-messages {
  scrollbar-width: thin;
  scrollbar-color: theme("colors.slate.300") transparent;
}

.dark #chatbot-messages {
  scrollbar-width: thin;
  scrollbar-color: theme("colors.slate.700") transparent;
}

/* Voor Webkit browsers (Chrome, Safari, Edge) */
#chatbot-messages::-webkit-scrollbar {
  width: 6px;
}

#chatbot-messages::-webkit-scrollbar-track {
  background: transparent;
}

#chatbot-messages::-webkit-scrollbar-thumb {
  background-color: theme("colors.slate.300");
  border-radius: 9999px;
}

.dark #chatbot-messages::-webkit-scrollbar-thumb {
  background-color: theme("colors.slate.700");
}

#chatbot-messages::-webkit-scrollbar-thumb:hover {
  background-color: theme("colors.slate.400");
}

.dark #chatbot-messages::-webkit-scrollbar-thumb:hover {
  background-color: theme("colors.slate.600");
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
}

/* Pauzeer de animatie als je met de muis over de slider hangt */
.animate-marquee:hover {
  animation-play-state: paused;
}

/* Subtiele fade-out aan de linker- en rechterranden */
.mask-fade {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.active-tab {
  border-bottom: 2px solid #4f46e5;
  color: #4f46e5;
}

.dark .active-tab {
  border-bottom: 2px solid #818cf8;
  color: #818cf8;
}