/* =========================================================
  DOCK.CSS
  Dock icons + Sonoma-style running indicators.
  Scope: Dock only.
========================================================= */

:root {
  --dock-icon-size: 60px;
  --dock-slot-w: 60px;
  --dock-slot-h: 70px;
  --dock-gap: 8px;
  --dock-pad-x: 12px;
  --dock-pad-top: 9px;
  --dock-pad-bottom: 5px;
  --dock-h: 78px;
  --dock-radius: 18px;

  --dock-indicator-size: 4px;
  --dock-indicator-bottom: 5px;
  --dock-indicator-open-color: rgba(255, 255, 255, 0.58);
}

.dock {
  position: absolute;
  left: 50%;
  bottom: 18px;
  height: var(--dock-h);
  display: flex;
  align-items: flex-start;
  gap: var(--dock-gap);
  padding: var(--dock-pad-top) var(--dock-pad-x) var(--dock-pad-bottom);
  border-radius: var(--dock-radius);
  transform: translateX(-50%);
  background: rgba(86, 82, 96, 0.48);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    0 12px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.14);
  -webkit-backdrop-filter: blur(42px) saturate(155%);
  backdrop-filter: blur(42px) saturate(155%);
  z-index: 9000;
  transition:
    transform 240ms cubic-bezier(.22, .78, .22, 1),
    opacity 160ms ease !important;
  will-change: transform, opacity;
}

/* Maximized app windows use macOS-like Dock auto-hide. The reveal threshold
   lives above the physical screen edge so the real macOS Dock is not needed. */
body.has-maximized-window .dock {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 38px));
}

body.has-maximized-window.dock-revealed .dock {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.dock-button {
  position: relative;
  flex: 0 0 var(--dock-slot-w);
  width: var(--dock-slot-w);
  height: var(--dock-slot-h);
  border: 0;
  border-radius: 13px;
  background: transparent;
  cursor: default;
  padding: 0;
  margin: 0;
}

.dock-button img,
.dock-button svg {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--dock-icon-size);
  height: var(--dock-icon-size);
  display: block;
  object-fit: contain;
  transform: translateX(-50%);
}

.dock-button,
.dock-button::after,
.dock-button img,
.dock-button svg {
  transition: none !important;
  animation: none !important;
}

/* Closed apps: no marker. Sonoma shows dots only for running apps. */
.dock-button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--dock-indicator-bottom);
  width: var(--dock-indicator-size);
  height: var(--dock-indicator-size);
  border-radius: 50%;
  background: transparent;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Open apps: small centered dot. */
.dock-button.is-open::after {
  background: var(--dock-indicator-open-color);
}