/* ═══════════════════════════════════════════════ */
/*  TERMINAL TAB                                   */
/* ═══════════════════════════════════════════════ */

.terminal-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-base);
}

.terminal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  flex-shrink: 0;
}

.terminal-status {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.terminal-status.connected {
  color: var(--success);
}

.terminal-actions {
  display: flex;
  gap: 6px;
}

.terminal-session-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  padding: 0 8px;
}

.session-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  white-space: nowrap;
  cursor: default;
}

.session-item:hover {
  border-color: var(--accent);
}

.session-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.session-attached {
  background: var(--success);
}

.session-detached {
  background: var(--text-muted);
}

.session-name {
  color: var(--text-primary);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-status-label {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.session-kill-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 2px;
  margin-left: 2px;
}

.session-kill-btn:hover {
  color: var(--danger);
}

#terminalContainer {
  flex: 1;
  padding: 0;
  overflow: hidden;
}

/* Override xterm.js viewport to fill container */
#terminalContainer .xterm {
  height: 100%;
}

#terminalContainer .xterm-viewport {
  overflow-y: auto !important;
}

#panel-terminal {
  height: 100%;
}

/* .main is always overflow: hidden — no override needed for terminal-active */

/* ═══════════════════════════════════════════════ */
/*  SPLIT TERMINAL PANEL                           */
/* ═══════════════════════════════════════════════ */

.split-container {
  display: flex;
  height: 100%;
}

.split-main {
  flex: 1;
  min-width: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  height: 100%;
}

.split-main.no-padding {
  padding: 0;
}

.split-handle {
  display: none;
  width: 5px;
  background: var(--border);
  cursor: col-resize;
  flex-shrink: 0;
  transition: background 0.15s;
}

.split-handle:hover,
.split-handle.dragging {
  background: var(--accent);
}

.split-terminal {
  display: none;
  flex-direction: column;
  min-width: 300px;
  width: 40%;
  flex-shrink: 0;
  background: var(--bg-base);
  border-left: 1px solid var(--border);
}

.split-terminal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  flex-shrink: 0;
}

#splitTerminalContainer {
  flex: 1;
  overflow: hidden;
}

#splitTerminalContainer .xterm {
  height: 100%;
}

#splitTerminalContainer .xterm-viewport {
  overflow-y: auto !important;
}

/* When split is active */
.split-active .split-handle {
  display: block;
}

.split-active .split-terminal {
  display: flex;
}

/* When in full terminal tab, hide the split panel */
.main.terminal-active .split-handle,
.main.terminal-active .split-terminal {
  display: none !important;
}

/* Highlight the sidebar button when split is active */
#splitTerminalBtn.active {
  background: var(--accent-dim);
  color: var(--accent);
}

/* ─── xterm.js 256-color overrides for Claude Code (light theme only) ─── */
/* Dark theme looks fine with default xterm colors */

/* File paths / links — make more visible on light background */
[data-theme="light"] #terminalContainer .xterm-fg-153,
[data-theme="light"] #splitTerminalContainer .xterm-fg-153,
[data-theme="light"] .xterm-rows .xterm-fg-153 {
  color: #0369a1 !important;
}

/* User message background — green accent matching the app logo */
[data-theme="light"] #terminalContainer .xterm-bg-237,
[data-theme="light"] #splitTerminalContainer .xterm-bg-237,
[data-theme="light"] .xterm-rows .xterm-bg-237 {
  background-color: #166534 !important;
}

/* User message text on green background — white */
[data-theme="light"] #terminalContainer .xterm-bg-237.xterm-fg-231,
[data-theme="light"] #splitTerminalContainer .xterm-bg-237.xterm-fg-231,
[data-theme="light"] .xterm-rows .xterm-bg-237.xterm-fg-231 {
  color: #ffffff !important;
}

/* User message prompt arrow on green background */
[data-theme="light"] #terminalContainer .xterm-bg-237.xterm-fg-239,
[data-theme="light"] #splitTerminalContainer .xterm-bg-237.xterm-fg-239,
[data-theme="light"] .xterm-rows .xterm-bg-237.xterm-fg-239 {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Prompt arrow — more visible on light background */
[data-theme="light"] #terminalContainer .xterm-fg-239,
[data-theme="light"] #splitTerminalContainer .xterm-fg-239,
[data-theme="light"] .xterm-rows .xterm-fg-239 {
  color: #6b7280 !important;
}