/* =========================================
   SPLIT VIEW CONTAINER
   (Aligned with Scholar/Code/Vis patterns - no gap/padding)
   ========================================= */

.split-view {
  display: flex;
  gap: 0; /* No gap - resizer handles separation */
  padding: 0; /* No padding - panels fill entire space */
  height: 100%;
  overflow: hidden;
  /* Background is set in 10-dark-mode.css to match workspace theme */
}

.split-view .latex-panel,
.split-view .preview-panel {
  min-width: 0;
  height: 100%;
  box-shadow: none; /* No box shadow - flat workspace design */
  /* Background is set in 10-dark-mode.css to match workspace theme */
  flex: 1;
  transition:
    flex 0.3s ease,
    min-width 0.3s ease;
  position: relative;
}

/* =========================================
   PANEL EXPAND/COLLAPSE STATES
   (Similar to Scholar's split-panel pattern)
   ========================================= */

/* Expanded panel - takes 3x the space */
.split-view .latex-panel.expanded,
.split-view .preview-panel.expanded {
  flex: 3;
}

/* Collapsed panel - 40px strip with vertical text */
.split-view .latex-panel.collapsed,
.split-view .preview-panel.collapsed {
  flex: 0 0 40px;
  overflow: hidden;
}

/* Hide content in collapsed panels except header */
.split-view .latex-panel.collapsed > *:not(.panel-header),
.split-view .preview-panel.collapsed > *:not(.panel-header) {
  display: none !important;
}

/* Collapsed panel header fills full height — top-aligned like workspace panes */
.split-view .latex-panel.collapsed > .panel-header,
.split-view .preview-panel.collapsed > .panel-header {
  height: 100% !important;
  max-height: none !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 0 0;
}

/* Hide header sub-elements when collapsed (keep toggle + panel-title) */
.split-view
  .latex-panel.collapsed
  > .panel-header
  .header-left
  > *:not(.panel-toggle-btn):not(.panel-title),
.split-view
  .preview-panel.collapsed
  > .panel-header
  .header-left
  > *:not(.panel-toggle-btn):not(.panel-title) {
  display: none;
}

/* Collapsed header-left: vertical layout, top-aligned like other panes */
.split-view .latex-panel.collapsed > .panel-header .header-left,
.split-view .preview-panel.collapsed > .panel-header .header-left {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: unset;
  width: 100%;
  overflow: hidden;
  padding-top: 0;
}

/* Collapsed panel title: icon on top, horizontal label below (matching workspace sidebar) */
.split-view .latex-panel.collapsed .panel-title,
.split-view .preview-panel.collapsed .panel-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-secondary, #8ba7b8);
  margin: 8px 0 0;
  white-space: nowrap;
  line-height: 1;
}

/* Icon in collapsed panel title — upright, no rotation */
.split-view .latex-panel.collapsed .panel-title i,
.split-view .preview-panel.collapsed .panel-title i {
  display: block;
  font-size: 14px;
  color: var(--workspace-icon-primary, #059669);
}

/* Hide toggle chevron in collapsed strip — clicking strip itself expands */
.split-view .latex-panel.collapsed .panel-toggle-btn,
.split-view .preview-panel.collapsed .panel-toggle-btn {
  display: none;
}

/* Hide module accent decoration on collapsed panels */
.split-view .latex-panel.collapsed > .panel-header[data-pane-type="module"],
.split-view .preview-panel.collapsed > .panel-header[data-pane-type="module"] {
  border-top: none;
  background: transparent;
}

.split-view .latex-panel.collapsed > .panel-header .header-right,
.split-view .preview-panel.collapsed > .panel-header .header-right {
  display: none;
}