/* Main Layout - Two Panel with Collapsible Sides */
.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.content-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  min-width: 0;
  position: relative;
  transition: flex 0.3s ease, width 0.3s ease, min-width 0.3s ease;
}

/* When collapsed, hide all content but keep element in DOM */
.content-panel.collapsed {
  flex: 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
}

#content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  animation: content-fade-in 0.2s ease-out;
}

@keyframes content-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Panel Resizer */
.panel-resizer {
  width: 4px;
  background: var(--border);
  cursor: col-resize;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.panel-resizer:hover {
  background: var(--accent);
}

/* While actively dragging */
.panel-resizer.dragging {
  background: var(--accent);
}

/* When a panel is fully collapsed, hide the resizer (it would be at the window edge) */
.panel-resizer.edge-left,
.panel-resizer.edge-right {
  width: 0;
  overflow: hidden;
}

/* Expand tabs — inline in the opposite panel's header */
.panel-expand-tab {
  background: var(--bg-lighter);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
  transition: background 0.15s, color 0.15s;
}

.panel-expand-tab:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Collapse arrows — styled via .icon-btn, just ensure no-drag */
.panel-collapse-btn {
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}