/* =========================================================
   VALERIAN DOCK POSITION LOCK
   Load this file LAST on every page.
   This forces the gap between the navigation bar and VALERIAN OS
   to stay identical across Home, AME Vision, and all future pages.
   ========================================================= */

:root {
  --valerian-dock-gap: 14px;
  --valerian-dock-closed-w: 280px;
  --valerian-dock-closed-h: 46px;
  --valerian-dock-open-w: min(640px, calc(100vw - 32px));
  --valerian-dock-open-h: 390px;
}

/* Keep the header height consistent so the dock has one fixed anchor point. */
header {
  min-height: var(--header-h) !important;
}

/* LOCKED CLOSED POSITION */
#valerianConsole,
#valerianConsole.sleeping {
  position: fixed !important;
  top: calc(var(--header-h) + var(--valerian-dock-gap)) !important;
  left: 50% !important;
  right: auto !important;
  width: var(--valerian-dock-closed-w) !important;
  height: var(--valerian-dock-closed-h) !important;
  max-width: calc(100vw - 32px) !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
  z-index: var(--valerian-dock-z, 1500) !important;
}

/* LOCKED OPEN POSITION */
#valerianConsole.open,
#valerianConsole.open.keyboard-open {
  top: calc(var(--header-h) + var(--valerian-dock-gap)) !important;
  left: 50% !important;
  right: auto !important;
  width: var(--valerian-dock-open-w) !important;
  height: var(--valerian-dock-open-h) !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
}

/* Prevent drag styles or page-specific styles from shifting it. */
#valerianConsole.dragging {
  top: calc(var(--header-h) + var(--valerian-dock-gap)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* Remove hidden rails/halos that can visually change the perceived spacing. */
header .nav-shell::after,
#valerianConsole::before,
#valerianConsole::after,
.valerian-console-inner::before,
.valerian-console-inner::after {
  display: none !important;
  content: none !important;
}

/* Mobile lock */
@media (max-width: 760px) {
  :root {
    --valerian-dock-gap: 10px;
    --valerian-dock-closed-w: min(270px, calc(100vw - 28px));
    --valerian-dock-closed-h: 44px;
    --valerian-dock-open-w: calc(100vw - 20px);
    --valerian-dock-open-h: var(--valerian-mobile-panel-h, min(520px, calc(100dvh - var(--header-h) - 22px)));
  }

  #valerianConsole,
  #valerianConsole.sleeping {
    top: calc(var(--header-h) + var(--valerian-dock-gap)) !important;
    width: var(--valerian-dock-closed-w) !important;
    height: var(--valerian-dock-closed-h) !important;
  }

  #valerianConsole.open,
  #valerianConsole.open.keyboard-open {
    top: calc(var(--header-h) + var(--valerian-dock-gap)) !important;
    width: var(--valerian-dock-open-w) !important;
    max-width: 640px !important;
    height: var(--valerian-dock-open-h) !important;
    max-height: calc(100dvh - var(--header-h) - 16px) !important;
  }
}

@media (max-width: 390px) {
  #valerianConsole.open,
  #valerianConsole.open.keyboard-open {
    width: calc(100vw - 16px) !important;
  }
}