/* Hide native scrollbar completely */
.file-tree-container,
.file-tree-container * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.file-tree-container::-webkit-scrollbar,
.file-tree-container *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Enable proper mouse wheel scrolling with horizontal overflow */
.file-tree-container {
  overflow-y: auto !important;
  overflow-x: auto !important;
  height: 100% !important;
  position: relative !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
  scroll-behavior: auto !important;
  pointer-events: auto !important;
}

/* Apply UI font family to file tree */
.file-tree-container {
  font-family: var(--app-font-family);
}

/* Cover gap above sticky headers to prevent content bleeding through (only when stuck) */
/* Removed JS-managed .is-stuck marker; pure CSS sticky remains */

/* Ensure file tree content wrapper stretches to full scrollable area */
.file-tree-container > div:not(.file-tree-empty-state) {
  width: max-content !important;
  min-width: 100% !important;
}

/* File tree item containers need to stretch full width */
.file-tree-item {
  width: 100% !important;
  min-width: 100% !important;
}

/* All file tree items have same background behavior - ensure full width coverage */
.file-tree-container .file-tree-item button {
  background-color: transparent !important;
  width: 100% !important;
  min-width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
}

.file-tree-container .file-tree-item button:hover {
  background-color: var(--color-hover) !important;
}

.file-tree-container .file-tree-item button.bg-selected {
  background-color: var(--color-selected) !important;
}

.file-tree-item {
  position: relative;
  --tree-guide-color: color-mix(in srgb, var(--color-text-lighter) 18%, transparent);
}

.file-tree-row {
  position: relative;
  isolation: isolate;
}

.file-tree-guides {
  pointer-events: none;
  position: absolute;
  z-index: 0;
  inset: 0;
}

.file-tree-guide {
  position: absolute;
  width: 7px;
  cursor: pointer;
  opacity: 0.9;
  pointer-events: auto;
  transform: translateX(-3px);
}

.file-tree-guide::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  background-color: var(--tree-guide-color);
  content: "";
}

.file-tree-guide:hover::before {
  background-color: color-mix(in srgb, var(--tree-guide-color) 55%, var(--color-text));
}

.file-tree-guide[data-active="true"]::before {
  background-color: color-mix(in srgb, var(--color-accent) 45%, var(--tree-guide-color));
  opacity: 1;
}

.file-tree-sticky-ancestors {
  position: sticky;
  top: calc(0px - var(--file-tree-container-inset, 4px));
  z-index: 12;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.file-tree-sticky-ancestor-stack {
  position: relative;
  width: calc(100% + var(--file-tree-container-inset, 4px) + var(--file-tree-container-inset, 4px));
  min-width: calc(
    100% + var(--file-tree-container-inset, 4px) + var(--file-tree-container-inset, 4px)
  );
  height: var(--file-tree-sticky-stack-height, 24px);
  margin-left: calc(0px - var(--file-tree-container-inset, 4px));
  overflow: hidden;
  background-color: var(--color-primary-bg);
  box-shadow: 0 -1px 0 0 var(--color-primary-bg);
  pointer-events: auto;
}

.file-tree-sticky-ancestor-stack::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-border) 58%, transparent);
  content: "";
  opacity: 0.7;
}

.file-tree-sticky-ancestor-stack .file-tree-row {
  height: var(--file-tree-sticky-row-height, 24px);
}
