/* ============ dock ============ */
.dock {
  position: fixed; z-index: 40; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 3px;
  padding: 5px 8px; border-radius: 26px;
}
.dock-app { position: relative; display: block; padding: 3px 2px 7px; }
.di {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  transform-origin: bottom center;
  transition: transform .18s ease;
  will-change: transform;
  -webkit-user-drag: none; user-select: none;
}
img.di { object-fit: contain; }
.dot {
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.65);
  opacity: 0; transition: opacity .2s ease;
}
.dock-app.running .dot { opacity: 1; }
.dock-app::after {
  content: attr(data-label);
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(3px);
  padding: 5px 11px; border-radius: 8px;
  background: rgba(28, 32, 43, .92); border: 1px solid var(--glass-line);
  font-size: 12px; color: var(--frost); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
  z-index: 3;
}
.dock-app:hover::after, .dock-app:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.dock-sep { width: 1px; align-self: stretch; margin: 8px 5px; background: rgba(255,255,255,.16); }
.di-ghost {
  width: 46px; height: 46px; margin: 3px;
  border-radius: 12px;
  border: 1.5px dashed rgba(255,255,255,.3); background: rgba(255,255,255,.03);
}
.di-ghost svg { width: 22px; height: 22px; color: rgba(255,255,255,.32); fill: currentColor; }
.dock-ghost::after { white-space: normal; width: 200px; text-align: center; }

@keyframes dockBounce { 0%,100% { translate: 0 0; } 40% { translate: 0 -16px; } }
.dock-app.bounce { animation: dockBounce .5s cubic-bezier(.3,.6,.4,1); }