:root {
  /* Chrome's minimum tab size, your max size, and standard pinned size */
  --tab-min-width: 28px;
  --tab-max-width: 200px;
  --tab-pinned-width: 30px;
}

/* 1. Stop Overlap: Reserve space for window controls AND the vertical tabs button */
#tabs-container .resize {
  max-width: calc(100% - 180px) !important;
  width: 100% !important;
}

/* 2. Force native Flexbox layout and smooth OS scrolling */
#tabs-container .tab-strip {
  display: flex !important;
  overflow-x: auto !important; 
  overflow-y: hidden !important;
  scrollbar-width: none !important; /* Hides scrollbar on Firefox/native */
}
#tabs-container .tab-strip::-webkit-scrollbar {
  display: none !important; /* Hides scrollbar on Chromium */
}

/* 3. Apply Chrome-like sizing ONLY to normal tabs (protecting pinned tabs) */
#tabs-container .tab-strip > span:not(:has(.is-pinned)) {
  flex: 1 1 var(--tab-max-width) !important;
  min-width: var(--tab-min-width) !important;
  max-width: var(--tab-max-width) !important;
  display: flex !important;
  overflow: hidden !important; 
}

/* 4. Strip JS positioning from normal tabs */
#tabs-container .tab-position:not(.is-pinned) {
  flex: 1 1 100% !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important; 
  width: 100% !important;
  max-width: 100% !important;
}

/* 5. Force the actual tab hit-box to fill the custom layout */
#tabs-container .tab:not(.pinned) {
  width: 100% !important;
  max-width: 100% !important;
}

/* 6. Keeps the text and icons from breaking out */
#tabs-container .tab:not(.pinned) .title {
  display: flex !important;
  flex-grow: 1 !important;
  overflow: hidden !important;
}

/* 7. Hover-to-Close Fix: Forces close button to float over tiny tabs */
#tabs-container .tab:not(.pinned) .tab-header {
  position: relative !important;
}
#tabs-container .tab:not(.pinned) .close {
  flex-shrink: 0 !important;
}
/* THE FIX: Tighter positioning and scaled down size */
#tabs-container .tab:not(.pinned):hover .close {
  display: flex !important;
  position: absolute !important;
  right: 2px !important;  /* Closer to the edge */
  top: 50% !important;    /* Center vertically */
  transform: translateY(-50%) scale(0.8) !important; /* Centers it and shrinks to 80% size */
  z-index: 10 !important;
  background-color: var(--colorBg) !important; /* Masks the text underneath */
  border-radius: 4px !important;
  padding: 2px !important; /* Reduce internal padding */
}

/* 8. Restore Pinned Tabs (Locks them so they don't break) */
#tabs-container .tab-strip > span:has(.is-pinned) {
  flex: 0 0 var(--tab-pinned-width) !important;
  min-width: var(--tab-pinned-width) !important;
  max-width: var(--tab-pinned-width) !important;
}
#tabs-container .tab.pinned .title {
  display: none !important;
}
#tabs-container .tab.pinned .tab-header {
  padding: 0 !important;
  justify-content: center !important;
}

/* 9. Hide Vivaldi's default JS scroll arrows since we use native CSS scrolling */
.button-toolbar.horizontal-scroll-arrow {
  display: none !important;
}