* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "JetBrains Mono", "Monaco", "Consolas", monospace !important;
}

html {
  height: 100%;
}

body {
  background-color: var(--bg0);
  color: var(--fg1);
  line-height: 1.4;
  font-size: 13px;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.showing-transcript {
  overflow: hidden;
  height: 100vh;
}

/* keep the page static while in library view; only file list scrolls */
body.library-mode {
  overflow: hidden;
  height: 100vh;
}

/* Global scrollbar styling */
body::-webkit-scrollbar,
body *::-webkit-scrollbar {
  width: 16px; /* thicker vertical scrollbar */
  height: 12px; /* slightly thicker horizontal scrollbar */
}

body::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track {
  background: var(--bg1);
  border-radius: 0;
}

body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 0; /* square thumb */
}

body::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover {
  background: var(--focus);
}

/* Firefox */
:root,
body {
  scrollbar-width: auto; /* default thickness (thicker than thin) */
  scrollbar-color: var(--accent) var(--bg1);
}

/* Custom fabricated scrollbar */
.custom-scroll {
  position: relative;
  --scrollbar-size: 16px;
  --scrollbar-padding: 6px;
}

.custom-scroll__viewport {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.custom-scroll[data-scroll-ready="true"] .custom-scroll__viewport {
  padding-right: calc(var(--scrollbar-size) + var(--scrollbar-padding));
  scrollbar-width: none; /* Firefox hides native */
  -ms-overflow-style: none; /* IE/Edge legacy */
}

.custom-scroll[data-scroll-ready="true"]
  .custom-scroll__viewport::-webkit-scrollbar {
  display: none; /* Hide native WebKit scrollbar */
}

.custom-scroll__track {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--scrollbar-size);
  height: 100%;
  background: var(--bg2);
  border-left: 1px solid var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out;
  display: none;
  align-items: flex-start;
  justify-content: center;
}

.custom-scroll[data-scroll-ready="true"] .custom-scroll__track {
  display: flex;
}

.custom-scroll--active .custom-scroll__track {
  opacity: 1;
  pointer-events: auto;
}

.custom-scroll__thumb {
  width: 100%;
  min-height: 28px;
  background: var(--accent);
  border-radius: 0;
  cursor: grab;
  position: relative;
}

.custom-scroll__thumb:hover {
  background: var(--focus);
}

.custom-scroll__thumb.is-dragging {
  cursor: grabbing;
  background: var(--info);
}

.custom-scroll--hidden .custom-scroll__track {
  display: none;
}