/* The edge menu floats above the workspace and never reserves a sidebar column. */
:root { --navigation-safe-bottom: 0px; }
.nav-dock {
  position: fixed;
  z-index: 42;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.nav-dock-trigger {
  display: grid;
  place-items: center;
  width: 30px;
  height: 56px;
  padding: 4px;
  border: 0;
  border-radius: 0 8px 8px 0;
  color: #c4e0f6;
  background: transparent;
}
.nav-dock-trigger:hover { background: #b3dbff18; }
.nav-dock-trigger svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body .nav-dock .nav-dock-panel {
  position: absolute;
  inset: auto auto auto 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: max-content;
  max-width: min(240px, calc(100vw - 48px));
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  gap: 4px;
  padding: 10px;
  margin: 0;
  border: 1px solid #688ba46b;
  border-radius: 13px;
  background: #102435cc;
  box-shadow: 0 12px 35px #0007;
  backdrop-filter: blur(14px);
}
body .nav-dock-panel[hidden], .nav-dock-trigger[hidden] { display: none !important; }
body .nav-dock .nav-dock-panel :is(button, a) {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  color: #d8eafa;
  background: transparent;
  text-decoration: none;
  text-align: left;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
}
.nav-dock-panel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
body .nav-dock .nav-dock-panel :is(button, a):hover { background: #8bc2ef20; }
body .nav-dock .nav-dock-panel :is(button.active, a[aria-current]) { background: #79baf233; color: #eef8ff; font-weight: 700; }
.nav-short { display: none; }
body .nav-dock-panel :is(button, a):focus-visible,
.nav-dock-trigger:focus-visible { outline: 2px solid var(--focus, #79b7ff); outline-offset: -2px; }
@media (max-width: 860px), (hover: none), (pointer: coarse) {
  :root { --navigation-safe-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  :root.navigation-dock-expanded {
    --navigation-safe-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }
  html { scroll-padding-bottom: var(--navigation-safe-bottom); }
  .nav-dock {
    inset: auto 0 0;
    transform: none;
    height: var(--navigation-safe-bottom);
    pointer-events: none;
  }
  .nav-dock-trigger {
    position: absolute;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 44px;
    border-radius: 8px 8px 0 0;
    pointer-events: auto;
  }
  .nav-dock-trigger svg { transform: rotate(-90deg); }
  .nav-dock.dock-open .nav-dock-trigger svg { transform: rotate(90deg); }
  body .nav-dock .nav-dock-panel {
    inset: auto auto calc(44px + env(safe-area-inset-bottom, 0px)) 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    height: 64px;
    max-width: 440px;
    max-height: none;
    overflow: visible;
    gap: 2px;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid #688ba46b;
    border-radius: 13px;
    background: #102435cc;
    pointer-events: auto;
  }
  body .nav-dock .nav-dock-panel :is(button, a) {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    min-height: 50px;
    padding: 5px 1px;
    border-radius: 7px;
    font-size: 10.5px;
    line-height: 13px;
    text-align: center;
  }
  .nav-dock-panel .nav-text { display: none; }
  .nav-dock-panel .nav-short { display: block; }
  body > main.page, body.network-mode > main.page,
  body.jobzoo-mode > main.page, body > .nav-dock + main {
    padding-bottom: calc(24px + var(--navigation-safe-bottom));
  }
}
@media (prefers-reduced-transparency: reduce) {
  body .nav-dock .nav-dock-panel { backdrop-filter: none; background: #102435; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dock * { transition: none !important; animation: none !important; }
}