/**
 * @component Workspace Three-Column Layout
 * @description Applies to all workspace module pages via global_base.html.
 *   Renders AI pane | Worktree pane | Module content side by side.
 *   AI and Worktree panes persist across tab switches; only Module pane swaps.
 * @category Layouts
 * @darkmode true
 */

/* --- Container --- */

.workspace-three-col {
  display: flex;
  flex-direction: row;
  /* Fill viewport minus header (~64px). Tab bar is now vertical (Apps pane). */
  height: calc(100vh - 65px);
  overflow: hidden;
  background: var(--bg-primary, #0d1117);
}

/* When global header is collapsed (6px), reclaim its space.
   Footer-specific overrides are in footer-collapse.css. */
.global-header.collapsed ~ .workspace-three-col {
  height: calc(100vh - 6px);
}

/* --- AI Agent pane (leftmost) --- */

.ws-ai-pane {
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

/* Override any global fixed positioning applied by global-ai-chat.css
   so the panel flows inside the three-col layout instead */
.workspace-three-col .scitex-ai-panel.workspace-sidebar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  height: 100% !important;
  box-shadow: none !important;
  /* border-right removed — resizer handles visual separation */
  border-bottom: none !important;
}

/* --- Worktree pane (middle) --- */

.ws-worktree-pane {
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

#ws-worktree-sidebar {
  position: relative;
  height: 100%;
  width: 240px;
  background: var(--bg-secondary, #161b22);
  /* border-right removed — resizer (2px) handles visual separation */
  overflow: visible;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#ws-worktree-sidebar.collapsed {
  width: var(--ui-collapsed-pane-width, 48px);
  overflow: hidden;
}

/* Short label shown when collapsed; full label shown when expanded */
#ws-worktree-sidebar .sidebar-title-full {
  display: none;
}

#ws-worktree-sidebar:not(.collapsed) .sidebar-title-full {
  display: inline;
}

#ws-worktree-sidebar:not(.collapsed) .sidebar-title {
  display: none;
}

/* Worktree header actions (sort toggle etc.) */
.ws-worktree-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

#ws-worktree-sidebar.collapsed .ws-worktree-actions {
  display: none;
}

.ws-worktree-actions .sort-toggle {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--text-muted, #8b949e);
  font-size: 0.7rem;
  border-radius: 3px;
}

.ws-worktree-actions .sort-toggle:hover {
  color: var(--text-primary, #c9d1d9);
  background: var(--bg-tertiary, #21262d);
}

.ws-worktree-actions .sort-toggle.active {
  color: var(--accent-color, #58a6ff);
}

/* Empty state when no project is selected */
.ws-worktree-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 0.5rem;
  color: var(--text-muted, #8b949e);
  font-size: 0.85rem;
  text-align: center;
}

.ws-worktree-empty i {
  font-size: 1.5rem;
  opacity: 0.5;
}

/* Vertical split: tree area + monitor panel.
   The element carries both .sidebar-content and .ws-worktree-split.
   Override the default sidebar-content overflow-y: auto so the flex
   split constrains children instead of growing to fit content. */
.sidebar-content.ws-worktree-split {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0 2px 0 0; /* right: clear resizer so scrollbar is not obscured */
  /* Shared font for Files tree + Recent pane — single source of truth */
  font-size: 13px;
  font-family: var(
    --font-mono,
    "JetBrains Mono",
    "Monaco",
    "Menlo",
    "Consolas",
    monospace
  );
  line-height: 1.4;
}

.ws-worktree-tree-area {
  flex: 1 1 70%;
  overflow-y: auto;
  min-height: 40px;
}

/* --- Apps nav pane (4th column — icon-only, fixed) --- */

.ws-apps-pane {
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

#ws-apps-sidebar {
  position: relative;
  height: 100%;
  width: 56px;
  max-width: 56px;
  background: var(--bg-secondary, #161b22);
  /* border-right removed — resizer handles visual separation */
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Vertical nav items — inherits from selector-nav.css via shared classes.
   Only override what's specific to the apps pane layout here.
   padding-top: 8px matches sidebar-header padding-top for vertical alignment. */
.ws-apps-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0 4px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* First item: 4px top matches sidebar-title margin-top for icon alignment */
.ws-apps-nav .selector-nav-item:first-child {
  padding-top: 4px;
}

/* --- Module content pane (5th column, fills remaining space) --- */

.ws-module-pane {
  flex: 1;
  min-width: var(--ui-collapsed-pane-width, 48px);
  overflow: auto;
  position: relative;
  padding: 0 !important; /* workspace pages need no extra padding */
  background: var(--workspace-bg-primary, #0d1117);
}

/* Smart collapse: when squeezed below threshold by adjacent panels */
.ws-module-pane.collapsed > * {
  display: none;
}

/* Override body.workspace-page #main-content { overflow: hidden } for module pane scrolling */
body.workspace-page #main-content.ws-module-pane {
  overflow: auto;
}

/* Suppress body-level margin-left/right rules that the fixed AI panel sets.
   Inside the three-col layout the panel is inline (position: relative),
   so no margin compensation is needed on #main-content. */
body.scitex-ai-present #workspace-three-col #main-content,
body.scitex-ai-open #workspace-three-col #main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hide toggle buttons — collapse/expand via double-click on panel header only */
.workspace-three-col .panel-toggle-btn {
  display: none !important;
}

/* Sidebar header double-click hint */
.workspace-three-col .workspace-sidebar .sidebar-header {
  cursor: default;
}

.workspace-three-col .workspace-sidebar.collapsed .sidebar-header {
  cursor: pointer; /* dblclick to expand */
}

/* Panel headers inside module pane — dblclick to toggle */
.workspace-three-col .ws-module-pane .panel-header {
  cursor: default;
}

/* Config view — fills sidebar body like Chat/Console/Jobs */
.scitex-ai-config-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  flex: 1;
}

.ai-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.scitex-ai-settings-label {
  font-size: 0.7rem;
  color: var(--text-muted, #8b949e);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.scitex-ai-settings-label i {
  width: 12px;
  text-align: center;
  font-size: 0.65rem;
}

.ai-settings-select {
  flex: 1;
  min-width: 0;
  max-width: 160px;
  font-size: 0.7rem;
  padding: 2px 4px;
  border: 1px solid var(--border-default, #30363d);
  border-radius: 4px;
  background: var(--bg-primary, #0d1117);
  color: var(--text-primary, #c9d1d9);
}

/* MCP badge */
.ai-mcp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--text-muted, #8b949e);
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-tertiary, #21262d);
}

.ai-mcp-dot {
  font-size: 6px;
}

.ai-mcp-badge.healthy .ai-mcp-dot {
  color: var(--success-color, #3fb950);
}
.ai-mcp-badge.error .ai-mcp-dot {
  color: var(--danger-color, #f85149);
}

/* Agent sources section — expand to fill remaining space */
.ai-settings-section {
  padding-top: 0.25rem;
  border-top: 1px solid var(--border-default, #30363d);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-agent-sources {
  font-size: 0.7rem;
  color: var(--text-secondary, #8b949e);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ai-source-group {
  margin-bottom: 0.375rem;
}

.ai-source-group-title {
  font-weight: 600;
  color: var(--text-primary, #d4e1e8);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.125rem;
}

.ai-source-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 1px 0;
  font-size: 0.65rem;
}

.ai-source-item i {
  width: 12px;
  text-align: center;
  opacity: 0.6;
}

.ai-source-item .ai-source-active {
  color: var(--success-color, #3fb950);
}

.ai-source-loading {
  color: var(--text-muted, #484f58);
  font-size: 0.65rem;
  font-style: italic;
}

.ai-context-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  color: var(--text-secondary, #8b949e);
  background: transparent;
  border: 1px solid var(--border-default, #30363d);
  border-radius: 4px;
  cursor: pointer;
}

.ai-context-download-btn:hover {
  color: var(--color-accent-fg, #58a6ff);
  border-color: var(--color-accent-fg, #58a6ff);
}

/* Quick links */
.ai-settings-links {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border-default, #30363d);
}

.ai-settings-links a {
  font-size: 0.65rem;
  color: var(--text-dimmed, #484f58);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.ai-settings-links a:hover {
  color: var(--accent-color, #58a6ff);
}

/* --- Tab-switch fade transition --- */

.ws-module-pane.switching {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* --- Responsive: collapse panes on narrow viewports --- */

@media (max-width: 768px) {
  .workspace-three-col {
    height: calc(100vh - 56px);
  }

  .ws-ai-pane,
  .ws-worktree-pane,
  .ws-viewer-pane,
  .ws-apps-pane {
    display: none;
  }
}