@tailwind base;
@tailwind components;
@tailwind utilities;

/* WhatsApp-style Scrollbar - Cannot be done with Tailwind */
::-webkit-scrollbar {
  width: 6px !important;
  background: transparent !important;
  background-color: transparent !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-radius: 3px !important;
  transition: all 0.3s ease !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
}

::-webkit-scrollbar-corner {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

::-webkit-scrollbar-button {
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

::-webkit-scrollbar-button:start {
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

::-webkit-scrollbar-button:end {
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}

/* Scrollbar visibility classes */
.scrolling::-webkit-scrollbar-thumb {
  opacity: 1 !important;
}

.scrolling::-webkit-scrollbar-thumb:hover {
  opacity: 1 !important;
}