.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tabBar {
  display: flex;
  align-items: stretch;
  height: 32px;
  padding: 0 4px;
  background: transparent;
  border-bottom: 1px solid var(--sidebar-border);
  gap: 2px;
  flex-shrink: 0;
}

/* While a tab drag is in progress, force the grabbing cursor everywhere in
 * the tab bar — the user is committed to the drag until release. */
.tabBar[data-tab-dragging="true"] {
  cursor: grabbing;
}

.tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast), background var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.tab:hover {
  background: var(--hover-bg);
  color: var(--text-muted);
}

/* Hover styles on non-target tabs are noisy mid-drag; the drop indicator
 * is the only relevant feedback while dragging. */
.tabBar[data-tab-dragging="true"] .tab:hover {
  background: transparent;
  color: var(--text-dim);
}

.tabActive {
  color: var(--text-primary);
  background: transparent;
  border-bottom-color: var(--accent-primary);
}

.tabDragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* Floating clone of the dragged tab — portaled to <body> and pinned to
 * the cursor by the React handler. Mirrors the tab's resting visuals
 * (font, padding, border-radius) plus a lift shadow so it reads as
 * "picked up". `pointer-events: none` keeps elementFromPoint reaching the
 * tab beneath the ghost, which is essential for the drop hit-test. */
.tabGhost {
  position: fixed;
  z-index: 10003;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  background: var(--sidebar-bg);
  color: var(--text-primary);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transform: rotate(1deg);
  transform-origin: top left;
}

.tabGhostTitle {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* Pointer-driven drop indicator: a tall accent bar with a small caret on
 * the side of the hovered tab where the dragged tab will land on release.
 * Wider/taller than the previous 2px sliver so the drop edge reads at a
 * glance even on small tab bars. */
.tab[data-drop-before="true"]::before,
.tab[data-drop-after="true"]::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: var(--accent-primary);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb), 0.25);
}

.tab[data-drop-before="true"]::before {
  left: -2px;
}

.tab[data-drop-after="true"]::after {
  right: -2px;
}

.tabTitle {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.tabBadge {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
  background: var(--hover-bg-subtle);
}

.tabClose,
.tabStop {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 3px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.tabClose:hover,
.tabStop:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.tabStop {
  font-size: 10px;
}

.addTab {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  padding: 0 6px;
  border-radius: 4px;
  transition: color var(--transition-fast);
}

.addTab:hover {
  color: var(--accent-primary);
}

.spacer {
  flex: 1;
}

.hideBtn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 18px;
  padding: 0 6px;
  transition: color var(--transition-fast);
}

.hideBtn:hover {
  color: var(--text-primary);
}

.termContainer {
  flex: 1;
  overflow: hidden;
  background: var(--terminal-bg);
  position: relative;
}

.termContainer :global(.xterm .xterm-viewport) {
  background-color: var(--terminal-bg) !important;
  scrollbar-color: var(--scrollbar-thumb) transparent !important;
  scrollbar-width: thin !important;
}

.termContainer :global(.xterm .xterm-viewport::-webkit-scrollbar) {
  width: var(--scrollbar-size) !important;
  height: var(--scrollbar-size) !important;
}

.termContainer :global(.xterm .xterm-viewport::-webkit-scrollbar-track) {
  background: transparent !important;
}

.termContainer :global(.xterm .xterm-viewport::-webkit-scrollbar-thumb) {
  background: var(--scrollbar-thumb) !important;
  border-radius: var(--radius-sm) !important;
}

.termContainer :global(.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover) {
  background: var(--scrollbar-thumb-hover) !important;
}

.termContainer :global(.xterm .xterm-scrollable-element > .scrollbar.vertical) {
  left: auto !important;
  right: 0 !important;
  width: var(--scrollbar-size) !important;
}

.termContainer :global(.xterm .xterm-scrollable-element > .scrollbar.horizontal) {
  bottom: 0 !important;
  height: var(--scrollbar-size) !important;
}

.termContainer :global(.xterm .xterm-scrollable-element > .scrollbar > .slider) {
  background: var(--scrollbar-thumb) !important;
  border-radius: var(--radius-sm) !important;
}

.termContainer :global(.xterm .xterm-scrollable-element > .scrollbar.vertical > .slider) {
  left: 0 !important;
  right: 0 !important;
  width: var(--scrollbar-size) !important;
}

.termContainer :global(.xterm .xterm-scrollable-element > .scrollbar.horizontal > .slider) {
  bottom: 0 !important;
  height: var(--scrollbar-size) !important;
}

.termContainer :global(.xterm .xterm-scrollable-element > .scrollbar > .slider:hover),
.termContainer :global(.xterm .xterm-scrollable-element > .scrollbar > .slider.active) {
  background: var(--scrollbar-thumb-hover) !important;
}

.spawnError {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--accent-error-bg);
  border: 1px solid var(--accent-error-border);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-mono);
}

.spawnErrorTitle {
  font-weight: 600;
}

.spawnErrorMessage {
  opacity: 0.85;
  white-space: pre-wrap;
  word-break: break-word;
}

.spawnErrorRetry {
  margin-top: 2px;
  padding: var(--space-1) var(--space-2);
  background: var(--accent-primary);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  transition: opacity var(--transition-fast);
}

.spawnErrorRetry:hover {
  opacity: 0.85;
}

/* Split-pane layout. Each tab's container hosts a recursive PanelGroup tree;
 * leaves render .paneLeaf containing one xterm.js canvas. The inset ring
 * on the active leaf acts as a subtle focus indicator without affecting
 * layout — xterm itself keeps its own cursor-blink visual cue. */
.paneRoot {
  position: absolute;
  inset: 8px;
}

.paneLeaf {
  position: relative;
  width: 100%;
  height: 100%;
}

.paneLeafActive {
  /* Active-pane indicator removed — the cursor blink in xterm already
   * signals focus, and a 1px outline produced a faint orange line at
   * the panel's bottom edge in single-pane layouts. */
}

.paneHandleVertical,
.paneHandleHorizontal {
  background: var(--sidebar-border);
  transition: background var(--transition-fast);
}

.paneHandleVertical {
  width: 4px;
  cursor: col-resize;
}

.paneHandleHorizontal {
  height: 4px;
  cursor: row-resize;
}

.paneHandleVertical:hover,
.paneHandleHorizontal:hover,
.paneHandleVertical[data-resize-handle-state="drag"],
.paneHandleHorizontal[data-resize-handle-state="drag"] {
  background: var(--accent-primary);
}

.paneLeafError {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--accent-error-bg);
  border: 1px solid var(--accent-error-border);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-mono);
}

/* Env-prep overlay shown across the top of the Terminal panel while
 * a workspace's env-provider layer is still resolving. Sits inside
 * the panel chrome so we don't block xterm output once the prompt
 * spawns — the wait blocker in TerminalPanel.tsx is what actually
 * gates the spawn. */
.envOverlay {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 12px 4px;
  border-radius: 6px;
  background: var(--accent-bg, var(--selected-bg));
  border: 1px solid var(--divider);
  color: var(--text-primary);
  font-size: 12px;
}

.envOverlaySpinner {
  color: var(--accent-primary);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
