/* ==========================================================================
   Layout — Structural positioning, panels, splitter, flex containers
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Main Content Area
   --------------------------------------------------------------------------- */

.main-content-container {
  height: calc(100vh - 80px);
  overflow: hidden;
}

.main-flex-container {
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Panel Sizing
   --------------------------------------------------------------------------- */

.research-panel-sizing {
  min-width: 250px;
}

.results-panel-sizing {
  min-width: 0;
}

/* Prevent panels from auto-resizing due to content changes */
.panel-left:not(.collapsed),
.panel-right:not(.collapsed) {
  flex-shrink: 0;
}

/* Smooth transitions for panel resizing - only after initial load */
.panel-left.loaded,
.panel-right.loaded {
  transition: width 0.3s ease;
}

/* Override transition during drag */
.splitter.dragging ~ .panel-left,
.splitter.dragging ~ .panel-right,
.dragging .panel-left,
.dragging .panel-right {
  transition: none;
}

/* ---------------------------------------------------------------------------
   Splitter
   --------------------------------------------------------------------------- */

.splitter {
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  flex: 0 0 12px !important;
  background: var(--app-splitter-bg);
  border: 1px solid var(--app-panel-border);
  border-top: none;
  border-bottom: none;
  cursor: col-resize;
  position: relative;
  transition: background-color 0.2s ease;
  user-select: none;
}

/* Larger invisible hit area for easier grabbing */
.splitter::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  right: -6px;
  bottom: 0;
  cursor: col-resize;
}

.splitter:hover,
.splitter.dragging {
  background: var(--app-splitter-hover);
}

.splitter-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--app-splitter-handle);
  font-size: 12px;
  transition: color 0.2s ease;
}

.splitter:hover .splitter-handle,
.splitter.dragging .splitter-handle {
  color: var(--bs-body-bg, white);
}

/* ---------------------------------------------------------------------------
   Panel Collapse States
   --------------------------------------------------------------------------- */

.collapsed-indicator {
  display: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: var(--app-panel-bg);
  border: 1px solid var(--app-panel-border);
  cursor: pointer;
  padding: 20px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--app-text-secondary);
  height: 100%;
  min-width: 24px;
  user-select: none;
  transition: background-color 0.2s ease;
}

.collapsed-indicator:hover {
  background: var(--app-hover-bg);
  color: var(--app-text-primary);
}

.panel-left.collapsed {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  overflow: hidden;
  flex: 0 0 24px !important;
}

.panel-right.collapsed {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  overflow: hidden;
  flex: 0 0 24px !important;
}

/* Show collapsed indicator when panel is collapsed */
.panel-left.collapsed .collapsed-indicator,
.panel-right.collapsed .collapsed-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide main content when collapsed */
.panel-left.collapsed .card,
.panel-right.collapsed .card {
  display: none;
}

/* ---------------------------------------------------------------------------
   Results Panel & Tab Content Overflow
   --------------------------------------------------------------------------- */

/* Results panel card-body should not scroll */
#resultsPanel .card-body {
  overflow: hidden !important;
}

/* Tab content container - no scrolling at this level */
#researchTabContent.tab-content {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  height: 100%;
}

/* Individual tab panes handle scrolling */
#researchTabContent .tab-pane {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

/* Welcome tab - allow scrolling for content */
#researchTabContent .tab-pane#welcome {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Content within tabs handles scrolling */
#researchTabContent .tab-pane .research-result-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  align-items: unset;
  justify-content: unset;
}

.research-result-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  padding: var(--spacing-xl);
}

/* ---------------------------------------------------------------------------
   Responsive — Mobile
   --------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .splitter {
    display: none;
  }

  .panel-left,
  .panel-right {
    min-width: 100% !important;
    width: 100% !important;
    flex: none !important;
  }

  .markdown-content {
    padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
  }

  .research-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-lg);
  }

  .research-item-actions {
    align-self: stretch;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------------------
   Print
   --------------------------------------------------------------------------- */

@media print {
  .navbar,
  .modal-footer,
  .research-item-actions,
  .splitter,
  .btn-close-tab,
  #clearSearchBtn {
    display: none;
  }

  .panel-left,
  .panel-right {
    width: auto !important;
  }
}