:root {
  --scrollbar-width: 4px;
  --scrollbar-track: #FFFFFE; /* tokens.colors.background.primary */
  --scrollbar-thumb: #5CC8A7;
  --scrollbar-thumb-hover: #4BA88B;
}

html.dark {
  --scrollbar-track: #020C10; /* exact app background */
  --scrollbar-thumb: #5CC8A7;
  --scrollbar-thumb-hover: #7DD3B9;
}

/* 
   CRITICAL: To use ::-webkit-scrollbar in Chrome 121+, we MUST NOT set 'scrollbar-color' or 'scrollbar-width'.
   These modern properties disable the pseudo-element engine if they are active.
*/
@supports selector(::-webkit-scrollbar) {
  html, body, * {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
  }

  ::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
    background-color: transparent !important;
  }

  /* Exhaustive button hiding for Chrome on Ubuntu/Linux */
  ::-webkit-scrollbar-button,
  ::-webkit-scrollbar-button:start,
  ::-webkit-scrollbar-button:end,
  ::-webkit-scrollbar-button:vertical:start:increment,
  ::-webkit-scrollbar-button:vertical:start:decrement,
  ::-webkit-scrollbar-button:vertical:end:increment,
  ::-webkit-scrollbar-button:vertical:end:decrement,
  ::-webkit-scrollbar-button:horizontal:start:increment,
  ::-webkit-scrollbar-button:horizontal:start:decrement,
  ::-webkit-scrollbar-button:horizontal:end:increment,
  ::-webkit-scrollbar-button:horizontal:end:decrement {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-track-piece,
  ::-webkit-scrollbar-corner {
    background-color: transparent !important;
    border: none !important;
  }

  html.dark ::-webkit-scrollbar-track,
  html.dark ::-webkit-scrollbar-track-piece,
  html.dark ::-webkit-scrollbar-corner,
  html.dark *::-webkit-scrollbar-track,
  html.dark *::-webkit-scrollbar-track-piece,
  html.dark *::-webkit-scrollbar-corner {
    background-color: transparent !important;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #5CC8A7 !important;
    border-radius: 10px !important;
    border: none !important;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #4BA88B !important;
  }

  html.dark ::-webkit-scrollbar-thumb:hover,
  html.dark *::-webkit-scrollbar-thumb:hover {
    background-color: #7DD3B9 !important;
  }
}

/* Firefox-only fallback */
@supports not selector(::-webkit-scrollbar) {
  html, body, * {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) !important;
  }
}

html.dark,
html.dark body,
html.dark #root,
html.dark main,
html.dark * {
  color-scheme: dark !important;
}

/* Prevent light skeleton flash in dark mode before MUI theme hydrates.
   MUI Skeleton defaults to light-mode colors during SSR; these overrides
   ensure skeletons match the dark background from the start. */
html.dark .MuiSkeleton-root {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .MuiSkeleton-root::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    transparent
  ) !important;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
}

body {
  font-family: var(--font-nunito), "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #FFFFFE; /* tokens.colors.background.primary */
  color: #0A3746; /* tokens.colors.text.primary */
}

html.dark body {
  background-color: #020C10 !important;
  color: #E8E6E3 !important;
}

#root {
  isolation: isolate;
  width: 100%;
  height: 100%;
  animation: fadeIn 0.15s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#halo-bootstrap-static {
  display: none !important;
}