/* Global styles for the application */

/* Apply a base font family and smooth scrolling */
html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure images and videos are responsive by default */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Basic accessibility improvements for focused elements */
*:focus-visible {
  outline: 2px solid var(--color-accent, #F97316); /* Fallback to accent color defined in Tailwind */
  outline-offset: 2px;
}

/* You can define custom CSS variables here if needed, or rely on Tailwind's theme */
:root {
  /* Example: --color-primary: #1E40AF; */
}

/* Styling for loading animation in ChatbotModal */
.animate-pulse .delay-75 { animation-delay: 75ms; }
.animate-pulse .delay-150 { animation-delay: 150ms; }
.animate-pulse .delay-300 { animation-delay: 300ms; }

/* Custom scrollbar (optional, for aesthetics - might not be supported in all browsers) */
/* For Webkit browsers like Chrome, Safari */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* Or use a Tailwind color like theme('colors.gray.100') if you have a way to inject it */
}

::-webkit-scrollbar-thumb {
  background: #888; /* Or use a Tailwind color */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* Or a darker Tailwind color */
}

/* For Firefox */
/* Note: Firefox scrollbar styling is more limited */
/* body {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1; 
} */