/* =========================================================
   VALERIAN HEADER-BOTTOM DOCK
   Keeps the original VALERIAN dynamic island design, but fixes
   its resting position to a clean dock just below the header.
   ========================================================= */

:root {
  --valerian-dock-gap: 10px;
  --valerian-dock-z: 1500;
}

/* Create a subtle docking rail attached to the bottom of the header. */
header .nav-shell::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: min(340px, calc(100vw - 48px));
  height: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,231,255,0.26), rgba(255,255,255,0.12), rgba(0,231,255,0.26), transparent);
  box-shadow: 0 0 18px rgba(0,231,255,0.14);
}

/* The existing island now rests in the header dock instead of floating randomly. */
#valerianConsole {
  position: fixed;
  top: calc(var(--header-h) + var(--valerian-dock-gap));
  left: 50%;
  right: auto;
  z-index: var(--valerian-dock-z);
  transform: translateX(-50%);
  width: 280px;
  height: 46px;
  opacity: 1;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  transition:
    width .38s cubic-bezier(.22, 1, .36, 1),
    height .38s cubic-bezier(.22, 1, .36, 1),
    top .38s cubic-bezier(.22, 1, .36, 1),
    transform .38s cubic-bezier(.22, 1, .36, 1),
    opacity .24s ease;
}

#valerianConsole::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 78%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,231,255,0.20), rgba(0,231,255,0.045) 48%, transparent 74%);
  filter: blur(2px);
  opacity: .82;
  transition: opacity .24s ease;
}

#valerianConsole.sleeping {
  width: 280px;
  height: 46px;
}

#valerianConsole.open {
  top: calc(var(--header-h) + 14px);
  width: min(640px, calc(100vw - 32px));
  height: 390px;
}

#valerianConsole.open::before {
  opacity: .28;
}

/* Keep the old island visually intact, but make the fully off state feel docked. */
#valerianConsole.sleeping .valerian-console-inner {
  border-color: rgba(255,255,255,.11);
  box-shadow:
    0 18px 42px rgba(0,0,0,.42),
    0 0 18px rgba(143,155,173,.10),
    inset 0 1px 0 rgba(255,255,255,.07);
}

body.valerian-engaged #valerianConsole.sleeping .valerian-console-inner,
#valerianConsole.open .valerian-console-inner {
  border-color: rgba(0,231,255,.30);
  box-shadow:
    0 20px 52px rgba(0,0,0,.50),
    0 0 26px rgba(0,231,255,.16),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Prevent the old drag behaviour from visually moving the dock. */
#valerianConsole.dragging {
  transition:
    width .38s cubic-bezier(.22, 1, .36, 1),
    height .38s cubic-bezier(.22, 1, .36, 1),
    top .38s cubic-bezier(.22, 1, .36, 1),
    transform .38s cubic-bezier(.22, 1, .36, 1);
}

/* Mobile: dock remains under the header and the open panel fits the viewport. */
@media (max-width: 760px) {
  :root {
    --valerian-dock-gap: 8px;
  }

  #valerianConsole {
    width: min(280px, calc(100vw - 32px));
    top: calc(var(--header-h) + var(--valerian-dock-gap));
  }

  #valerianConsole.sleeping {
    width: min(280px, calc(100vw - 32px));
    height: 46px;
  }

  #valerianConsole.open,
  #valerianConsole.open.keyboard-open {
    top: calc(var(--header-h) + 8px);
    left: 50%;
    right: auto;
    width: calc(100vw - 20px);
    height: var(--valerian-mobile-panel-h, min(520px, calc(100dvh - var(--header-h) - 22px)));
    transform: translateX(-50%);
  }
}

@media (max-width: 520px) {
  header .nav-shell::after {
    bottom: -9px;
    width: min(300px, calc(100vw - 32px));
  }

  #valerianConsole {
    width: min(260px, calc(100vw - 28px));
  }

  #valerianConsole.sleeping {
    width: min(260px, calc(100vw - 28px));
  }
}

/* =========================================================
   MOBILE CENTRE-EXPAND FIX + CLEAN DOCK OVERRIDES
   ========================================================= */

/* Remove the temporary glowing rail/line above the dock. */
header .nav-shell::after {
  display: none !important;
  content: none !important;
}

/* Keep the island physically centred under the header at every size. */
#valerianConsole {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
}

/* Remove the glow/shadow underneath and around the island. */
#valerianConsole::before,
#valerianConsole::after,
.valerian-console-inner::before,
.valerian-console-inner::after {
  display: none !important;
  content: none !important;
}

#valerianConsole .valerian-console-inner,
#valerianConsole.sleeping .valerian-console-inner,
body.valerian-engaged #valerianConsole.sleeping .valerian-console-inner,
#valerianConsole.open .valerian-console-inner {
  box-shadow: none !important;
}

/* Mobile: closed island stays centred; open island expands from centre and downward. */
@media (max-width: 760px) {
  #valerianConsole,
  #valerianConsole.sleeping {
    top: calc(var(--header-h) + 8px) !important;
    left: 50% !important;
    right: auto !important;
    width: min(270px, calc(100vw - 28px)) !important;
    height: 44px !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
  }

  #valerianConsole.open,
  #valerianConsole.open.keyboard-open {
    top: calc(var(--header-h) + 8px) !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 20px) !important;
    max-width: 640px !important;
    height: var(--valerian-mobile-panel-h, min(520px, calc(100dvh - var(--header-h) - 22px))) !important;
    max-height: calc(100dvh - var(--header-h) - 16px) !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
  }
}

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