#tabbar {
  position: fixed;
  bottom: var(--pin-bottom); left: 0; right: 0;
  max-width: var(--shell-max);
  margin: 0 auto;
  display: grid;
  grid-auto-flow: column;
  background: linear-gradient(color-mix(in srgb, var(--bg-dock) 90%, transparent), color-mix(in srgb, var(--bg-dock) 90%, transparent)), var(--surface-base, transparent);
  border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index: 40;
}

#tabbar[hidden] {
  display: none;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  color: var(--text-faint);
  font-size: 10.5px;
  transition: color var(--dur) var(--ease);
}
.tab.is-active { color: var(--purple-bright); }

@media (max-width: 849px) {
  #tabbar { touch-action: none; }
  .tab { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .dock-pill {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--purple-bright) 14%, transparent);
  }
  #tabbar.is-dragging .tab { position: relative; z-index: 1; color: var(--text-faint); }
  #tabbar.is-dragging .tab.is-target { color: var(--purple-bright); }
  #tabbar.is-dragging .tab.is-active::before { opacity: 0; }
  #tabbar.is-dragging .tab:active svg,
  #tabbar.is-dragging .tab:active::before { transform: none; }
}