/* ===========================================================================
   VT Staff — native-feel shell (splash, pull-to-refresh, bottom tabs, safe-area)
   Loaded on every dashboard page, on top of the shop's own app.css.
   =========================================================================== */

/* respect the notch / home indicator everywhere */
.appbar { padding-top: env(safe-area-inset-top, 0); }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }

/* ---- launch splash (no white flash) --------------------------------- */
#appSplash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg, #0a0a0b);
  transition: opacity .35s ease;
}
#appSplash .m { width: 64px; height: 64px; opacity: .9; animation: splashPulse 1.4s ease-in-out infinite; }
body.app-ready #appSplash { opacity: 0; pointer-events: none; }
@keyframes splashPulse { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #appSplash .m { animation: none; } }

/* ---- pull-to-refresh --------------------------------------------- */
#ptr {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  display: flex; justify-content: center; pointer-events: none;
  transform: translateY(-48px); transition: transform .18s ease;
}
#ptr .ring {
  margin-top: calc(env(safe-area-inset-top, 0) + 8px);
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line, #333); border-top-color: var(--accent, #f4f1ea);
}
#ptr.spin .ring { animation: spin .7s linear infinite; }

/* ---- bottom-docked tab bar on phones ------------------------------- */
@media (max-width: 720px) {
  .subbar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    border-top: 1px solid var(--line-soft, #1a1a1d); border-bottom: none;
    padding: 8px 0 calc(env(safe-area-inset-bottom, 0) + 8px);
    box-shadow: 0 -8px 24px -12px rgba(0,0,0,.5);
  }
  .subbar .wrap { gap: 8px; }
  .subbar .cta-next { order: -1; }
  /* keep content clear of the fixed bar */
  body:has(.subbar) main { padding-bottom: 96px !important; }
}

/* ---- install hint chip ---------------------------------------- */
#installHint {
  position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom,0) + 12px);
  z-index: 60; display: none;
  background: var(--bg-raised, #121214); color: var(--fg, #e7e4dd);
  border: 1px solid var(--line, #232326); border-radius: 14px;
  padding: 12px 14px; font-size: .86rem;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.6);
  align-items: center; gap: 10px;
}
#installHint.show { display: flex; }
#installHint button { flex: none; }

/* ---- push permission prompt --------------------------------- */
#pushPrompt {
  position: fixed; left: 12px; right: 12px; z-index: 70;
  bottom: calc(env(safe-area-inset-bottom, 0) + 84px);
  background: var(--bg-raised, #121214); color: var(--fg, #e7e4dd);
  border: 1px solid var(--line, #232326); border-radius: 16px; padding: 16px;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.65);
  transform: translateY(140%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
  max-width: 460px; margin: 0 auto;
}
#pushPrompt.show { transform: translateY(0); }
#pushPrompt .pp-body strong { font-size: .98rem; }
#pushPrompt .pp-body p { margin: 6px 0 0; font-size: .84rem; color: var(--fg-dim, #a6a29a); }
#pushPrompt .pp-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }