/* ============================================================
   VisionCore · 12 Swiper inspector tabs
   
   4-tab navigator that hosts the existing panels:
   #swiper-info-panel · #review-panel · #tuning-panel · #lipsync-panel
   
   The tabs sit at the top of .swiper-sidebar; only the active
   panel is visible. Original panel markup unchanged.
   ============================================================ */

/* ---------- Sidebar layout — fixed top tabs, scrollable content ---------- */
.swiper-sidebar {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  width: 360px !important;
}

/* ---------- Tab nav bar ---------- */
.vc-inspector-tabs {
  display: flex !important;
  padding: 0 8px !important;
  border-bottom: 1px solid var(--vc-line) !important;
  background: rgba(8,8,8,.92) !important;
  backdrop-filter: blur(20px);
  flex-shrink: 0;
}
.vc-inspector-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 1 !important;
  height: 48px !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--vc-ink-4) !important;
  font-family: var(--vc-font-sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  transition: var(--vc-fast) !important;
  margin-bottom: -1px !important;
  position: relative;
}
.vc-inspector-tab:hover {
  color: var(--vc-ink-2) !important;
}
.vc-inspector-tab.active {
  color: var(--vc-ink) !important;
  border-bottom-color: var(--vc-brand) !important;
}

/* Tab dot — indicates panel has data (set via JS data-has-data="true") */
.vc-inspector-tab[data-has-data="true"]::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vc-brand);
}

/* ---------- Tab content area ---------- */
.vc-inspector-content {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  position: relative;
}
.vc-inspector-panel {
  display: none !important;
  margin: 0 !important;
}
.vc-inspector-panel.active {
  display: block !important;
}

/* All panels become the SAME card style — no rainbow chips */
.vc-inspector-panel.swiper-side-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Section title within a panel — bigger, anchor-like */
.vc-inspector-panel .swiper-side-title {
  font-family: var(--vc-font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  color: var(--vc-ink) !important;
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ---------- Tag overlay placement ---------- */
#swiper-tag-overlay {
  position: absolute !important;
  left: 24px !important;
  bottom: 96px !important;
  z-index: 4;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: calc(100% - 380px - 48px) !important;
  pointer-events: none;
}

/* ---------- Empty state for tabs without data ---------- */
.vc-inspector-panel:empty::before,
.vc-inspector-panel-empty {
  display: block;
  padding: 40px 12px;
  text-align: center;
  color: var(--vc-ink-4);
  font-size: 12.5px;
  font-style: italic;
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 768px) {
  .swiper-sidebar {
    width: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    display: none !important;
  }
  .swiper-sidebar.mobile-open {
    display: flex !important;
    z-index: 5;
  }
}