/* ============================================================================
 * Standard Panel Resizer Component
 * ============================================================================
 * Clean grayish resizer for workspace panels (Code, Writer, Vis)
 * Easy to grab with subtle visual feedback
 * ========================================================================== */

.panel-resizer,
.split-resizer {
  /* Size and layout - 2px visual border with expanded hit area */
  width: 2px;
  height: 100%;
  flex: 0 0 2px !important;
  position: relative;

  /* Visual style */
  background: var(--workspace-border-default);

  /* Interaction */
  cursor: col-resize;
  user-select: none;
  pointer-events: all;

  /* Smooth transitions */
  transition: background 0.2s ease;

  /* Stacking */
  z-index: 10;

  /* Remove default margins/padding */
  margin: 0;
  padding: 0;
}

/* Expanded hit area: 12px each side = 26px total grabbable width */
.panel-resizer::before,
.split-resizer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  right: -12px;
  cursor: col-resize;
  z-index: 1;
}

/* Hover state — accent green for visibility */
.panel-resizer:hover,
.split-resizer:hover {
  background: var(--workspace-icon-primary, #059669);
}

/* Active/dragging state */
.panel-resizer:active,
.split-resizer:active,
.panel-resizer.active,
.split-resizer.active {
  background: var(--workspace-icon-primary, #059669);
}

/* ============================================================================
 * Panel Toggle Button - Overlay Style
 * ============================================================================
 * Toggle button overlays on the resizer line for clean semantic separation
 * Positioned at header height on the resizer, visually integrated with border
 * ========================================================================== */

/* Container for resizer with toggle button */
.panel-resizer {
  position: relative;
}

/* Toggle button overlaid on resizer - positioned at header level */
.panel-resizer .resizer-toggle-btn {
  position: absolute;
  top: 12px; /* Align with header area */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;

  /* Visual style - circular button on the border */
  width: 20px;
  height: 20px;
  padding: 0;
  background: var(--workspace-bg-secondary);
  border: 1px solid var(--workspace-border-default);
  border-radius: 50%;
  cursor: pointer;

  /* Icon styling */
  color: var(--text-muted);
  font-size: 10px;

  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Transitions */
  transition: all 0.15s ease;
  opacity: 0.7;
}

.panel-resizer .resizer-toggle-btn:hover {
  background: var(--workspace-bg-tertiary);
  border-color: var(--workspace-icon-primary);
  color: var(--workspace-icon-primary);
  opacity: 1;
}

/* ============================================================================
 * Panel Toggle Button - Header Style (Fallback/Alternative)
 * ============================================================================
 * For use inside panel headers when resizer overlay isn't suitable
 * ========================================================================== */

.panel-toggle-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 4px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.panel-toggle-btn:hover {
  background: var(--workspace-bg-tertiary);
  color: var(--workspace-icon-primary);
}

/* Right panel toggle - button on LEFT with right border separator */
.panel-toggle-btn.right-panel-toggle {
  border-right: 1px solid var(--workspace-border-default);
  padding-right: 12px;
  margin-right: 12px;
}

/* Left panel toggle - button on RIGHT with left border separator */
.panel-toggle-btn.left-panel-toggle {
  border-left: 1px solid var(--workspace-border-default);
  padding-left: 12px;
  margin-left: 12px;
}

/* Reset toggle button styling when inside collapsed panel */
.collapsed .panel-toggle-btn.right-panel-toggle,
.collapsed .panel-toggle-btn.left-panel-toggle {
  border-left: none;
  border-right: none;
  padding-left: 4px;
  padding-right: 4px;
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================================
 * No-Transition Guard
 * ============================================================================
 * Applied by WorkspacePanelResizer.autoInitPanels() during page load to
 * suppress all CSS transitions (including !important ones) while panel sizes
 * are being restored from localStorage. Prevents the "panes animating on
 * every page load" jitter that drains user attention.
 * Removed via double-rAF after all panels have been initialized.
 * ========================================================================== */
body.no-transition,
body.no-transition * {
  transition: none !important;
  animation-duration: 0.001ms !important;
}

/* Hide resizable panels until JS restores saved widths from localStorage.
   Prevents the visible "jump" from default width to saved width on page load.
   The .panels-ready class is added by autoInitPanels() after all widths are set. */
body.no-transition .workspace-three-col .ws-ai-pane,
body.no-transition .workspace-three-col .ws-worktree-pane,
body.no-transition .workspace-three-col .ws-viewer-pane,
body.no-transition .workspace-shell .ws-ai-pane,
body.no-transition .workspace-shell .ws-worktree-pane,
body.no-transition .workspace-shell .ws-viewer-pane {
  visibility: hidden;
}

body.no-transition .workspace-three-col.panels-ready .ws-ai-pane,
body.no-transition .workspace-three-col.panels-ready .ws-worktree-pane,
body.no-transition .workspace-three-col.panels-ready .ws-viewer-pane,
body.no-transition .workspace-shell.panels-ready .ws-ai-pane,
body.no-transition .workspace-shell.panels-ready .ws-worktree-pane,
body.no-transition .workspace-shell.panels-ready .ws-viewer-pane {
  visibility: visible;
}