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

:root {
  --app-height: 100vh;
  --scroll-bar-color: #c5c5c5;
  --scroll-bar-bg-color: transparent;
}

#__next {
  @apply flex h-screen flex-col;
}

#application-page-content {
  overflow-x: hidden;
}

body {
  @apply bg-white font-headline text-black dark:bg-black dark:text-white;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
  z-index: 1000;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.h-full-without-header {
  height: calc(var(--app-height) - 64px);
}

::-webkit-scrollbar {
  scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
  width: 5px;
  height: 10px;
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--scroll-bar-color);
  border-radius: 20px;
  border: 3px solid var(--scroll-bar-bg-color);
}

/* Firefox Support */
.scrollbar-firefox-support {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
  z-index: 0;
}

.message-options {
  @apply flex h-16 w-9 cursor-pointer items-center justify-center bg-gray-200 transition-colors hover:bg-gray-300 dark:bg-slate-900 hover:dark:bg-slate-800;
}