/* One glass surface, with restrained lift and accessible custom labels. */
.dock {
  --dock-size: 56px;
  position: absolute; left: 50%; bottom: calc(max(var(--dock-bottom, 18px), env(safe-area-inset-bottom, 0px)) + var(--viewport-inset, 0px));
  transform: translateX(-50%); z-index: 8500; isolation: isolate;
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid #ffffff36; border-radius: 27px;
  box-shadow: 0 12px 32px #0005;
}
.dock-glass {
  position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(155deg, #ffffff26, #ffffff0d 55%, #ffffff17);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  backdrop-filter: blur(10px) saturate(1.6);
}
.dock-item { position: relative; flex: 0 0 var(--dock-size); width: var(--dock-size); height: var(--dock-size); }
.dock-icon {
  appearance: none; position: relative; box-sizing: border-box;
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0;
  border: 0; border-radius: 15px; background: #fff;
  color: #26292d; font: 650 22px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-shadow: 0 3px 8px #0004;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transform-origin: 50% 85%; transition: transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s;
}
.dock-icon:hover { color: #26292d; }
.dock-brand { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 15px; opacity: 0; pointer-events: none; }
.dock-brand.is-ready { opacity: 1; }
.dock-icon:has(.dock-brand.is-ready) .dock-fallback { visibility: hidden; }
.dock-icon--linkedin { color: #fff; background: #0a66c2; }
.dock-icon--x, .dock-icon--terminal { color: #fff; background: #151518; }
.dock-icon--x:hover, .dock-icon--terminal:hover, .dock-icon--linkedin:hover { color: #fff; }
.dock-icon--terminal { background: linear-gradient(145deg, #3a3a3f, #1b1b1e); box-shadow: 0 3px 8px #0004, inset 0 0 0 1px #ffffff26; }
.dock-icon--terminal svg { width: 54%; height: 54%; pointer-events: none; }
.dock-divider { flex: 0 0 1px; height: 31px; background: #ffffff40; margin: 0 1px; }
.dock-label {
  position: absolute; bottom: calc(100% + 25px); left: 50%; transform: translateX(-50%) translateY(3px);
  padding: 8px 12px; border: 1px solid #ffffff1f; border-radius: 8px;
  background: #08090b; color: #fff; box-shadow: 0 4px 16px #0005;
  font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.dock-icon:focus-visible { outline: 2px solid #fff; outline-offset: 5px; transform: translateY(-7px) scale(1.1); }
.dock-item:has(.dock-icon:focus-visible) .dock-label { opacity: 1; transform: translateX(-50%); }
@media (hover: hover) and (pointer: fine) {
  .dock-item:hover .dock-icon { transform: translateY(-8px) scale(1.12); box-shadow: 0 10px 17px #0004; }
  .dock-item:has(+ .dock-item:hover) .dock-icon,
  .dock-item:hover + .dock-item .dock-icon { transform: translateY(-2px) scale(1.04); }
  .dock-item:hover .dock-label { opacity: 1; transform: translateX(-50%); }
  .dock-icon:active { transform: translateY(-3px) scale(1.03); }
}
@media (max-width: 719px) {
  .dock { --dock-size: 46px; gap: 9px; padding: 11px; border-radius: 25px; }
  .dock-icon { border-radius: 13px; }
  .dock-brand { border-radius: 12px; }
}
@media (max-width: 360px) {
  .dock { --dock-size: 44px; gap: 7px; padding: 10px; }
  .dock-divider { margin: 0; }
}
#desktop.workspace-compact .dock { --dock-size: 44px; --dock-bottom: 10px; gap: 8px; padding: 8px; border-radius: 22px; }
#desktop.workspace-compact .dock-icon, #desktop.workspace-compact .dock-brand { border-radius: 12px; }
@media (hover: none), (pointer: coarse) {
  .dock-icon:active { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .dock-icon, .dock-label { transition: none; }
  .dock .dock-icon { transform: none !important; }
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .dock-glass { background: #3a3b3e; }
}