/* ======== FILE VIEWER LAYOUT STYLES ======== */
#file-viewer {
  width: 0;
  overflow: hidden;
  padding: 0;
  background: var(--bg-secondary);
  position: relative;
  height: 100vh;
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 350px;
  margin-left: auto;
  transition: none;
}

#main-content.file-viewer-active #file-viewer {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
  display: flex;
  min-width: 350px;
  width: auto;
  margin-left: 4px;
}

/* Add transitions only after initial state is set */
.file-viewer-active #file-viewer:not(.dragging) {
  transition: flex 0.3s ease, padding 0.3s ease;
}

.file-viewer-active #file-viewer.dragging {
  transition: none;
}

#main-content.file-viewer-active #file-content {
  display: block;
  visibility: visible;
  opacity: 1;
  min-height: 200px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 2px 4px var(--shadow-color);
}

#file-content {
  overflow: auto;
  background: var(--bg-secondary);
  border-radius: 5px;
  font-family: inherit;
  white-space: pre-wrap;
  border: 1px solid var(--border-color);
  padding: 15px;
  margin: 0;
  position: absolute;
  top: var(--header-height);
  left: 20px;
  right: 20px;
  bottom: 5px;
  z-index: 14;
  display: none;
  min-height: 200px;
  opacity: 0;
  visibility: hidden;
  transition: top 0.3s ease, transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 2px 4px var(--shadow-color);
}

#main-content.file-viewer-active #file-content {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Height constraints and calculations */
#file-viewer {
  --header-height: 95px;
  --splitter-height: 8px;
  --initial-list-height: 155px;
  --max-list-height: calc((100vh - var(--header-height)) / 2);
  --min-content-height: 200px;
}

/* Base z-index stacking */
#file-content {
  z-index: 15;  /* Above list in normal mode */
}

#file-list-container {
  z-index: 14;  /* Below content in normal mode */
}

#file-list-splitter {
  z-index: 16;  /* Above both for resize handle */
}

/* Overlay mode adjustments */
#file-content.overlay-mode {
  z-index: 14 !important;  /* Below list in overlay mode */
  top: var(--header-height) !important;  /* Keep content at top */
}

#file-list-container.active.overlay-mode {
  z-index: 16 !important;  /* Above content in overlay mode */
  position: absolute !important;
  top: var(--header-height) !important;
  left: 20px !important;
  right: 20px !important;
  height: var(--file-list-height, 170px) !important;
  border-radius: 5px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-secondary) !important;
  box-shadow: 0 4px 12px var(--shadow-color) !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;  /* Disable transitions in overlay mode */
}

/* Hide splitter in overlay mode */
#file-list-container.overlay-mode ~ #file-list-splitter {
  display: none !important;
  visibility: hidden !important;
}

/* Drag operation adjustments */
#file-list-container.active.dragging {
  z-index: 14;  /* Maintain normal stacking during drag */
}

#file-list-splitter.dragging {
  z-index: 1000;  /* Always on top during resize */
}

#file-list-container.active ~ #file-content.dragging {
  z-index: 15;  /* Maintain normal stacking during drag */
}

/* View mode specific styles */
#file-content:not(.markdown-content):not(.hljs-container) {
  padding: 10px;
}

/* Hex view mode */
#file-content.hex-view {
  width: 626px !important;
  min-width: 626px !important;
  max-width: 626px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  overflow-x: auto !important;
  transition: top 0.3s ease, transform 0.3s ease, width 0.3s ease !important;
}

#file-content {
  bottom: 5px;
  transition: top 0.3s ease, transform 0.3s ease;
}

#file-list-container.active ~ #file-content {
  top: calc(var(--header-height) + var(--file-list-height, var(--initial-list-height)) + var(--splitter-height));
}

#file-content.overlay-mode {
  top: var(--header-height) !important;
  border-radius: 5px !important;
}

#file-list-container.active ~ #file-content.overlay-mode {
  top: var(--header-height) !important;
}

#file-list-container:not(.active) ~ #file-content {
  top: var(--header-height);
  border-radius: 5px;
}

#file-list-container.active ~ #file-content.dragging {
  transition: none;
  pointer-events: none;
}

#file-list-container.active ~ #file-content {
  top: calc(var(--header-height) + var(--file-list-height, var(--initial-list-height)) + var(--splitter-height));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  transition: top 0.3s ease;
}

/* Dragging behavior */
#file-list-container.dragging,
#file-list-splitter.dragging,
#file-content.dragging {
  transition: none !important;
  user-select: none;
}

#file-list-container.active.dragging {
  pointer-events: none;
  z-index: 15;
}

#file-list-splitter.dragging {
  background: var(--border-color);
  opacity: 1;
  z-index: 1000;
  cursor: ns-resize !important;
}

/* Media queries */
@media (max-width: 768px) {
  .right-controls {
    display: none;
  }
  
  #copy-btn, 
  #download-btn {
    display: none;
  }
  
  #file-close {
    left: auto;
  }
}