/* ═══════════════════════════════════════════════════
   APP MODE — fullscreen layout for the PWA/TWA
   (replaces the desktop demo phone-frame chrome)
   ═══════════════════════════════════════════════════ */

/* The document is the only scroller.
   iOS Safari hides its address/search bar and bottom toolbar only while the
   page itself scrolls; once hidden they float over the content. A fixed,
   viewport-sized panel that scrolls internally never moves the document, so
   Safari keeps the bars expanded and the app stays squeezed between them. */
html, body {
  height: auto;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

body {
  background: var(--bg);
  overflow: visible;
  overscroll-behavior-y: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Fill whichever viewport is visible right now: dvh follows the browser bars
   as they collapse, so no dead band is left behind when they shrink. The vh
   line is the fallback for engines without dvh (older Android WebView). */
#app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  overflow: visible;
}

.phone-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow: visible;
}

:root { --app-nav-height: 64px; }

.phone-notch { display: none; }
.phone-status { display: none; }

/* Plain document flow — no nested scroll container. Flex-stretched so the
   screen paints its own background to the bottom edge; the padding keeps the
   last row clear of the fixed tab bar (and the home indicator when installed). */
.phone-content {
  flex: 1 0 auto;
  height: auto;
  min-height: 0;
  overflow: visible;
  overscroll-behavior-y: auto;
  padding-bottom: calc(var(--app-nav-height) + 16px + env(safe-area-inset-bottom, 0px));
}
.phone-content--no-nav {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}
.phone-content--no-nav:has([data-action="go-login"]) { padding-bottom: 0; }
.phone-content.has-summary-bar {
  padding-bottom: calc(var(--app-nav-height) + 96px + env(safe-area-inset-bottom, 0px));
}
.salon-summary-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--app-nav-height) + env(safe-area-inset-bottom, 0px));
  z-index: 35;
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  min-height: calc(var(--app-nav-height) + env(safe-area-inset-bottom, 0px));
  padding: 4px 8px env(safe-area-inset-bottom, 0px);
  align-items: flex-start;
  background: var(--surface);
}

.bottom-nav--dashboard {
  background: #1A1A28;
}

/* install prompt banner (beforeinstallprompt / manual) */
#pwa-install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}
#pwa-install-banner.on { display: flex; }
body:has(.has-summary-bar) #pwa-install-banner {
  bottom: calc(158px + env(safe-area-inset-bottom, 0px));
}

/* toast */
#app-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: none;
  max-width: 86%;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink-900);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  text-align: center;
}
#app-toast.on { display: block; }

/* statusbar-safe splash */
.screen-container--splash {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Reserve the physical inset once. Header spacing replaces mock status-bar gaps. */
.app-page-header {
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
}
.app-hero-control {
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Only the nav owns the bottom physical inset; each tab is a compact row. */
.bottom-nav__item { min-height: 56px; padding: 8px 4px; }