.chat-bubble {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Base body styles for new font and better rendering */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom modern loader */
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid;
  border-color: #000 #0000;
  animation: l1 1s infinite;
}
.dark .loader {
  border-color: #fff #0000;
}
@keyframes l1 {to{transform: rotate(.5turn)}}

/* Animation for main content fade-in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Staggered animation for list items */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.stagger-children > * {
  opacity: 0;
  animation: slideUp 0.5s ease-out forwards;
}

/* Delay for each child */
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.9s; }
.stagger-children > *:nth-child(10) { animation-delay: 1.0s; }

/* Infinite Scroll Animation */
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.animate-scroll {
  display: inline-flex;
  animation: scroll 40s linear infinite;
  min-width: 100%;
}

.animate-scroll:hover {
  animation-play-state: paused;
}

/* Custom Scrollbar Styling - Professional & Minimal */

/* WebKit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5); /* Slate-400 with opacity */
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(107, 114, 128, 0.8); /* Slate-500 darker */
}

/* Dark Mode Overrides */
.dark ::-webkit-scrollbar-thumb {
  background-color: rgba(71, 85, 105, 0.5); /* Slate-700 with opacity */
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.8); /* Slate-500 */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.dark * {
  scrollbar-color: rgba(71, 85, 105, 0.5) transparent;
}

/* Legacy utility class for backward compatibility if specific overrides needed */
.custom-scrollbar {
  /* Styles inherited from global rules */
}