/* ==========================================================================
   DockDock — Authentic macOS Glass Dock (Sonoma / Sequoia)
   ========================================================================== */

:root {
  --dock-base-size: 58px;
  --dock-radius: 20px;
}

/* DOCK CONTAINER (SUPPORTS CENTER & BOTTOM POSITIONS) */
.dock-shelf-container {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 30;
  pointer-events: none;
  overflow: visible;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* CENTERED DOCK (DEFAULT - HERO DISPLAY IN THE MIDDLE OF THE SCREEN) */
.dock-shelf-container.pos-center {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* BOTTOM DOCK (CLASSIC MACOS PLACEMENT) */
.dock-shelf-container.pos-bottom {
  top: auto;
  bottom: 14px;
  transform: none;
}

/* THE FROSTED GLASS DOCK SHELF */
.macos-dock {
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px 6px 12px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border: 0.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--dock-radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.45),
              inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
}

/* INDIVIDUAL DOCK ITEM */
.dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: var(--dock-base-size);
  height: calc(var(--dock-base-size) + 8px);
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform 0.12s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  overflow: visible;
}

.dock-item:hover {
  transform: scale(1.18) translateY(-6px);
}

/* DOCK ICON IMAGE */
.dock-icon-img {
  width: var(--dock-base-size);
  height: var(--dock-base-size);
  min-width: var(--dock-base-size);
  min-height: var(--dock-base-size);
  max-width: var(--dock-base-size);
  max-height: var(--dock-base-size);
  object-fit: cover;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: filter 0.12s ease;
  border-radius: 22.37%;
}

.dock-item:hover .dock-icon-img {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

/* USER CANDIDATES DOCK MOUNT CONTAINER */
.dock-user-mount {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  overflow: visible;
}

/* USER CANDIDATE ITEM IN DOCK */
.dock-item-user {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: var(--dock-base-size);
  height: calc(var(--dock-base-size) + 8px);
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform 0.12s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  overflow: visible;
}

.dock-item-user:hover {
  transform: scale(1.18) translateY(-6px);
}

/* DOCK DIVIDER */
.dock-divider {
  width: 1px;
  height: calc(var(--dock-base-size) * 0.72);
  background: rgba(255, 255, 255, 0.22);
  margin: 0 4px 12px 4px;
  align-self: center;
}

/* ACTIVE RUNNING APP INDICATOR DOT */
.dock-dot {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* CANDIDATE LABEL TOOLTIP IN COMPARE ALL MODE (ELEVATED & NEVER OBSCURED) */
.dock-compare-pill {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 20, 30, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: -0.015em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  z-index: 50; /* ALWAYS rendered on top of icons and shadows */
  display: flex;
  align-items: center;
  justify-content: center;
}

.dock-compare-pill::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: rgba(18, 20, 30, 0.94);
  border-right: 0.5px solid rgba(255, 255, 255, 0.3);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
}

/* NATIVE MACOS DOCK HOVER TOOLTIP */
.dock-tooltip {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(24, 26, 36, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
  z-index: 60;
}

.dock-tooltip.visible {
  opacity: 1;
}

/* MINIMAL, AUTHENTIC APPLE MACOS DOCK BOUNCE */
.bounce-once {
  animation: appleDockBounce 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  transform-origin: bottom center;
}

@keyframes appleDockBounce {
  0% {
    transform: translateY(0);
  }
  32% {
    transform: translateY(-16px);
  }
  58% {
    transform: translateY(0);
  }
  78% {
    transform: translateY(-5px);
  }
  92% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}