/* The outer island stays fixed. A single FLIP pass owns all tab motion. */
.dock-wrap {
  width: min(calc(448px - 32 * var(--won-unit)), calc(100% - 32 * var(--won-unit)));
  max-width: none;
}
.dock-wrap .dock {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 58px;
  padding: 6px;
  border-radius: 16px;
  background: #1d1f23;
  border: 1px solid #ffffff12;
  box-shadow: 0 0 18px 8px #141518c2, 0 6px 14px -4px #0000004d, inset 0 1px 0 #ffffff06;
  overflow: hidden;
}
.dock-wrap .nav-button {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #a6aebf;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
  overflow: visible;
  transition: none;
}
.dock-wrap .nav-button .nav-icon {
  position: absolute;
  left: 50%;
  top: 10.5px;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  transform: translateX(-50%);
  transition: none;
}
.dock-wrap .nav-button > span {
  display: block;
  position: absolute;
  left: 42px;
  width: var(--label-width);
  max-width: none;
  opacity: 0;
  overflow: visible;
  white-space: nowrap;
  transform: translateX(-3px);
  transition: none;
}
.dock-wrap .nav-button.active { color: #a6aebf; font-weight: 500; }
.dock-wrap .nav-button.expanded { flex-grow: 1.9; color: #f5f7fb; }
.dock-wrap .nav-button.expanded .nav-icon { left: 11px; transform: translateX(0); }
.dock-wrap .nav-button.expanded > span { opacity: 1; transform: translateX(0); }
.dock-wrap .nav-solid-shape { display: none; }
.dock-wrap .nav-button.expanded .nav-solid-shape { display: block; }
.dock-wrap .nav-button.expanded .nav-stroke-shape { display: none; }
.dock-wrap .dock-selection {
  display: block;
  position: absolute;
  z-index: 0;
  border: 0;
  border-radius: 10px;
  background: #087fff;
  box-shadow: none;
  pointer-events: none;
  transform: none;
  transform-origin: left center;
  transition: none;
}
@media (max-width: 339px) {
  .dock-wrap .nav-button { font-size: 12px; }
  .dock-wrap .dock { gap: 2px; }
}