/* Chrome-style tab strip — sits in the "tabs" grid row between #topbar
   and the map. Strip scrolls horizontally; the + button is pinned at the
   right edge so it stays reachable when many tabs overflow.

   The strip is always visible (even free / single-tab) so the "+" call
   to action is discoverable. Free-tier "+" is rendered with .locked. */

.tab-bar {
  grid-area: tabs;
  display: flex;
  align-items: stretch;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  z-index: 950;
  position: relative;
  min-width: 0;
}

.tab-strip {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 0 2px;
  /* Hide scrollbar visually but keep wheel/trackpad scrolling functional. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.tab-strip::-webkit-scrollbar { height: 4px; }
.tab-strip::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
.tab-strip::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); }

/* Individual tab — kept tight to fit a useful number on screen. Mono font
   matches the rest of the chrome (CLI, ticker). */
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  min-width: 110px;
  max-width: 220px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: transparent;
  border-right: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
  transition: background 120ms ease-out, color 120ms ease-out;
  flex-shrink: 0;
}
.tab:hover { background: rgba(255, 255, 255, 0.03); color: var(--text-primary); }
.tab.active {
  color: var(--text-primary);
  background: var(--bg-primary);
  /* Cyan accent strip across the bottom of the active tab */
  box-shadow: inset 0 -2px 0 0 var(--accent-primary);
}
.tab.dragging { opacity: 0.4; }
.tab.over    { background: rgba(0, 212, 255, 0.08); }

/* The pinned first tab can't drag — visual treatment is otherwise the same. */
.tab[data-locked="1"] { cursor: pointer; }

.tab-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;  /* contenteditable focus shows via our .editing class */
  min-width: 0;
}
.tab-name.editing {
  background: var(--bg-card);
  outline: 1px solid var(--accent-primary);
  border-radius: 2px;
  padding: 0 4px;
  cursor: text;
}

.tab-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  visibility: hidden;
}
.tab:hover .tab-close,
.tab.active .tab-close { visibility: visible; }
.tab-close:hover {
  background: var(--accent-danger);
  color: white;
}

/* The "+" button — sits as the last child of the strip so it appears
   immediately to the right of the last tab (and scrolls with the strip
   when tabs overflow). Hidden once the global tab cap is reached. */
.tab-add {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  margin: 0 6px;
  border: 1px dashed transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.tab-add:hover {
  color: var(--accent-primary);
  background: rgba(0, 212, 255, 0.06);
  border-color: rgba(0, 212, 255, 0.4);
}
/* Locked state for free / anon users — shows a padlock-feel hint that
   clicking will open the upgrade modal instead of creating a tab. */
.tab-add.locked { color: var(--text-muted); position: relative; }
.tab-add.locked::after {
  content: "🔒";
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 8px;
  opacity: 0.85;
}
.tab-add.locked:hover { color: var(--accent-warn, #FFB347); border-color: rgba(255, 179, 71, 0.4); }

/* Mobile: tabs still work but tighter. The strip is a touch-scroll surface. */
@media (max-width: 700px) {
  .tab { min-width: 90px; padding: 0 10px; font-size: 10.5px; }
  .tab-add { width: 26px; height: 20px; margin: 0 4px; font-size: 14px; }
}