/* QPal persistent dashboard app shell.
   The sidebar toggle and dock stay attached to the viewport while dashboard
   content scrolls independently between them. */

:root {
  --qpal-shell-workspace-width: min(850px, calc(100vw - 24px));
  --qpal-shell-workspace-edge: calc((100vw - var(--qpal-shell-workspace-width)) / 2);
  --qpal-shell-dock-height: 64px;
  --qpal-shell-dock-bottom: max(
    10px,
    calc(env(safe-area-inset-bottom, 0px) + 8px)
  );
}

body.qpal-persistent-dashboard-shell .qpal-navigation-toggle {
  position: fixed !important;
  top: max(12px, calc(env(safe-area-inset-top, 0px) + 10px)) !important;
  left: max(
    calc(env(safe-area-inset-left, 0px) + 10px),
    var(--qpal-shell-workspace-edge)
  ) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4450 !important;
  margin: 0 !important;
  transform: none !important;
}

body.qpal-persistent-dashboard-shell .qpal-dashboard-dock {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--qpal-shell-dock-bottom) !important;
  z-index: 4400 !important;
  width: min(
    520px,
    calc(
      100vw - 24px - env(safe-area-inset-left, 0px) -
      env(safe-area-inset-right, 0px)
    )
  ) !important;
  max-width: none !important;
  margin: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
}

/* The fixed dock no longer occupies document flow. Reserve enough room after
   the dashboard so its final content can always scroll fully above the dock. */
body.qpal-persistent-dashboard-shell .app-workspace {
  padding-bottom: calc(
    var(--qpal-shell-dock-height) +
    max(34px, calc(env(safe-area-inset-bottom, 0px) + 28px))
  ) !important;
}

body.qpal-persistent-dashboard-shell {
  scroll-padding-top: 76px;
  scroll-padding-bottom: calc(
    var(--qpal-shell-dock-height) +
    max(34px, calc(env(safe-area-inset-bottom, 0px) + 28px))
  );
}

/* Existing QPal modal and assessment states remain authoritative. */
body.qpal-session-active .qpal-navigation-toggle,
body.qpal-popup-modal-open .qpal-navigation-toggle,
body.qpal-virtual-keyboard-open .qpal-navigation-toggle,
body.qpal-virtual-keyboard-open .qpal-dashboard-dock {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.qpal-persistent-dashboard-shell .qpal-navigation-toggle,
body.qpal-persistent-dashboard-shell .qpal-dashboard-dock {
  transition: opacity 150ms ease, visibility 150ms ease;
}

@media (max-width: 620px) {
  :root {
    --qpal-shell-workspace-width: calc(100vw - 20px);
  }

  body.qpal-persistent-dashboard-shell .qpal-dashboard-dock {
    width: calc(
      100vw - 20px - env(safe-area-inset-left, 0px) -
      env(safe-area-inset-right, 0px)
    ) !important;
  }
}

@media (max-width: 390px) {
  :root {
    --qpal-shell-workspace-width: calc(100vw - 16px);
  }

  body.qpal-persistent-dashboard-shell .qpal-dashboard-dock {
    width: calc(
      100vw - 16px - env(safe-area-inset-left, 0px) -
      env(safe-area-inset-right, 0px)
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.qpal-persistent-dashboard-shell .qpal-navigation-toggle,
  body.qpal-persistent-dashboard-shell .qpal-dashboard-dock {
    transition: none;
  }
}