/*
 * Over — Browser-style tab bar
 * Tabs sit flush on the bar. Active state = accent underline + primary text.
 * No rounded floating boxes, no per-tab side borders, no double lines.
 */

.tabbar {
  display: flex;
  align-items: stretch;
  height: var(--topbar-h);
  flex-shrink: 0;
  padding: 0 var(--sp-2);
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

.tabbar__tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.tabbar__tabs::-webkit-scrollbar { height: 0; }

.tabbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding-left: var(--sp-2);
}

.tab {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlap the bar's border so the indicator reads as one line */
  transition: color 0.12s, background 0.12s;
}

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

.tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.tab__icon {
  flex-shrink: 0;
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: grid;
  place-items: center;
  opacity: 0.85;
}

.tab__label {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab__close {
  flex-shrink: 0;
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.1s, color 0.12s, background 0.12s;
}
.tab:hover .tab__close,
.tab.is-active .tab__close { opacity: 1; }
.tab__close:hover { color: var(--text); background: var(--surface-hover); }