/* ── Tab Bar (desktop only, 768px+) ── */

.tab-bar {
  display: none; /* hidden on mobile */
}

@media (min-width: 768px) {
  .tab-bar {
    display: flex;
    align-items: stretch;
    background: var(--bg-card, #161b22);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 36px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tab-bar::-webkit-scrollbar {
    display: none;
  }

  .tab-bar-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1;
    min-width: 0;
  }

  /* ── Individual Tab ── */

  .tab-bar-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    min-width: 0;
    max-width: 200px;
    border-right: 1px solid var(--border);
    border-bottom: 2px solid transparent;
    background: transparent;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
  }

  .tab-bar-tab:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .tab-bar-tab.active {
    background: var(--bg, #0d1117);
    border-bottom-color: var(--accent, #58a6ff);
  }

  .tab-bar-tab.dragging {
    opacity: 0.5;
  }

  /* ── Status Dot ── */

  .tab-bar-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-dim, #666);
    transition: background 0.2s;
  }
  .tab-bar-status.connected { background: #3fb950; }
  .tab-bar-status.reconnecting { background: #d29922; }
  .tab-bar-status.offline { background: #f85149; }

  /* ── Title ── */

  .tab-bar-title {
    font-size: 12px;
    color: var(--text-dim, #8b949e);
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
  .tab-bar-tab.active .tab-bar-title {
    color: var(--text, #e6edf3);
  }

  /* ── Badge (pending approval) ── */

  .tab-bar-badge {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #58a6ff);
    flex-shrink: 0;
    animation: tab-badge-pulse 2s ease-in-out infinite;
  }
  @keyframes tab-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* ── Close Button ── */

  .tab-bar-close {
    background: none;
    border: none;
    color: var(--text-dim, #8b949e);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
  }
  .tab-bar-tab:hover .tab-bar-close,
  .tab-bar-tab.active .tab-bar-close {
    opacity: 1;
  }
  .tab-bar-close:hover {
    color: var(--text, #e6edf3);
    background: rgba(255, 255, 255, 0.1);
  }

  /* ── Tab Content Container ── */

  .tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
  }

  .tab-content .structured-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  .tab-content .output {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  .tab-content .xterm-container {
    flex: 1;
    min-height: 0;
  }

  .tab-content .scroll-indicator {
    position: absolute;
    bottom: 50px;
    right: 16px;
  }

  .tab-card-container {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none;
  }
  .tab-card-container > * {
    pointer-events: auto;
  }

  /* Hide global elements when tabs are active */
  #view-session.tabs-active > #structured-container,
  #view-session.tabs-active > #output,
  #view-session.tabs-active > #xterm-container,
  #view-session.tabs-active > #scroll-indicator,
  #view-session.tabs-active > #tasks-tray,
  #view-session.tabs-active > #approval-card,
  #view-session.tabs-active > #question-card,
  #view-session.tabs-active > #reauth-card,
  #view-session.tabs-active > .session-empty-state {
    display: none !important;
  }

  /* Hide desktop-session-header when tabs active (tab bar replaces it) */
  #view-session.tabs-active > .desktop-session-header {
    display: none !important;
  }

  /* Hide global action bar, header, and nav keys when tabs active — each tab has its own */
  body.tabs-mode #action-bar,
  body.tabs-mode #nav-keys,
  body.tabs-mode header,
  body.tabs-mode #desktop-session-header {
    display: none !important;
  }

  /* ── Hide tab bar when split is active ── */

  .tab-bar.split-hidden {
    display: none;
  }

  /* ── Split Tab Grid ── */

  .split-tab-grid {
    display: grid;
    flex: 1;
    min-height: 0;
    gap: 1px;
    background: var(--border, #30363d);
  }

  .split-tab-grid[data-pane-count="2"][data-direction="horizontal"] {
    grid-template: 1fr / 1fr 1fr;
  }
  .split-tab-grid[data-pane-count="2"][data-direction="vertical"] {
    grid-template: 1fr 1fr / 1fr;
  }
  .split-tab-grid[data-pane-count="3"] {
    grid-template: 1fr 1fr / 1fr 1fr;
  }
  .split-tab-grid[data-pane-count="3"] > .split-pane-wrapper:first-child {
    grid-column: 1 / -1;
  }
  .split-tab-grid[data-pane-count="4"] {
    grid-template: 1fr 1fr / 1fr 1fr;
  }

  /* ── Split Pane Wrapper ── */

  .split-pane-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--bg, #0d1117);
    border: 2px solid transparent;
    transition: border-color 0.15s;
  }

  .split-pane-wrapper.split-focused {
    border-color: var(--accent, #58a6ff);
  }

  .split-pane-wrapper > .tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* ── Split Pane Header (matches tab-bar-tab styling) ── */

  .split-pane-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bg-card, #161b22);
    border-bottom: 1px solid var(--border, #30363d);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    min-height: 32px;
  }

  .split-pane-wrapper.split-focused .split-pane-header {
    border-bottom-color: var(--accent, #58a6ff);
  }

  .split-pane-title {
    font-size: 12px;
    color: var(--text-dim, #8b949e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }

  .split-pane-wrapper.split-focused .split-pane-title {
    color: var(--text, #e6edf3);
  }

  .split-pane-close {
    background: none;
    border: none;
    color: var(--text-dim, #8b949e);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
  }
  .split-pane-header:hover .split-pane-close,
  .split-pane-wrapper.split-focused .split-pane-close {
    opacity: 1;
  }
  .split-pane-close:hover {
    color: var(--text, #e6edf3);
    background: rgba(255, 255, 255, 0.1);
  }

  /* ── Ctrl key input (hidden, captures letter after Ctrl tap) ── */

  .nav-key-ctrl-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: auto;
    display: none;
  }

  /* Mark tabs in split on the tab bar (when bar is visible) */
  .tab-bar-tab.in-split {
    background: rgba(88, 166, 255, 0.08);
  }
  .tab-bar-tab.in-split .tab-bar-title {
    color: var(--text, #e6edf3);
  }

  /* ── Split Group Tab ── */
  .tab-bar-tab.tab-bar-group {
    gap: 6px;
    background: rgba(88, 166, 255, 0.1);
    border-bottom: 2px solid transparent;
  }
  .tab-bar-tab.tab-bar-group.active {
    background: rgba(88, 166, 255, 0.15);
    border-bottom-color: var(--accent, #58a6ff);
  }
  .tab-bar-split-icon {
    display: flex;
    align-items: center;
    opacity: 0.7;
    flex-shrink: 0;
  }
  .tab-bar-group-count {
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: var(--accent, #58a6ff);
    color: #000;
    border-radius: 8px;
    font-weight: 600;
    flex-shrink: 0;
  }

  /* ── Drop Zone Overlay ── */

  .split-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
  }

  .split-drop-zone {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    background: rgba(88, 166, 255, 0.06);
    border: 2px dashed transparent;
    transition: background 0.15s, border-color 0.15s;
  }

  .split-drop-zone.active {
    background: rgba(88, 166, 255, 0.15);
    border-color: var(--accent, #58a6ff);
  }

  .split-drop-left {
    top: 15%;
    left: 0;
    bottom: 15%;
    width: 30%;
    border-radius: 0 8px 8px 0;
  }
  .split-drop-right {
    top: 15%;
    right: 0;
    bottom: 15%;
    width: 30%;
    border-radius: 8px 0 0 8px;
  }
  .split-drop-top {
    top: 0;
    left: 15%;
    right: 15%;
    height: 30%;
    border-radius: 0 0 8px 8px;
  }
  .split-drop-bottom {
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 30%;
    border-radius: 8px 8px 0 0;
  }

  .split-drop-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent, #58a6ff);
    opacity: 0;
    transition: opacity 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .split-drop-zone.active .split-drop-label {
    opacity: 1;
  }
}