/* BUFF OS v148 — one safe-area contract for every app surface.
   iOS can briefly report a zero inset while a Home Screen app launches or
   rotates. The standalone fallbacks keep iPhone Pro Max content clear until
   WebKit publishes the real Dynamic Island / home-indicator geometry. */
:root {
  --buff-inset-top: env(safe-area-inset-top, 0px);
  --buff-inset-right: env(safe-area-inset-right, 0px);
  --buff-inset-bottom: env(safe-area-inset-bottom, 0px);
  --buff-inset-left: env(safe-area-inset-left, 0px);
  --buff-top-clearance: max(var(--buff-inset-top), 58px);
  --buff-right-clearance: var(--buff-inset-right);
  --buff-bottom-clearance: var(--buff-inset-bottom);
  --buff-left-clearance: var(--buff-inset-left);
}

/* 390px catches iPhone 14/15 and 15 Pro, which also have an Island and a home
   indicator — the 430px gate only ever covered Pro Max. */
@media (display-mode: standalone) and (orientation: portrait) and (min-width: 390px) {
  :root {
    --buff-top-clearance: max(var(--buff-inset-top), 59px);
    --buff-bottom-clearance: max(var(--buff-inset-bottom), 24px);
  }
}

@media (display-mode: standalone) and (orientation: landscape) {
  :root {
    --buff-left-clearance: max(var(--buff-inset-left), 59px);
    --buff-right-clearance: max(var(--buff-inset-right), 59px);
    --buff-bottom-clearance: max(var(--buff-inset-bottom), 12px);
  }
}

html,
body,
.app {
  height: 100%;
  height: 100dvh;
}

.app {
  padding-left: var(--buff-left-clearance);
  padding-right: var(--buff-right-clearance);
}

/* The sticky app header owns the portrait top inset. Screens sit below it and
   therefore must not each invent a second Dynamic Island offset. */
.topbar {
  top: 0;
  min-height: calc(52px + var(--buff-top-clearance));
  /* The controls sat right under the status bar, inside the strongest part of the
     blur, and were small enough to miss. They now sit well clear of it. */
  padding-top: calc(var(--buff-top-clearance) + 16px) !important;
  padding-bottom: 12px !important;
  padding-right: 16px !important;
  padding-left: 16px !important;
}

/* Coach moments occupy a dedicated lane. The right edge reserves the complete
   two-button action cluster plus its gap, so text and the dismiss control can
   never sit underneath Arrange cards or Settings. */
.topbar .v42-moment {
  left: 16px;
  right: 104px;
  width: auto;
  max-width: 330px;
  transform: none;
}

.topbar .v42-moment:active {
  transform: scale(0.97);
}

.topbar.scrolled .v42-moment {
  transform: translateY(-6px);
}

.screen {
  padding-right: 16px !important;
  padding-left: 16px !important;
}

/* Edge-to-edge dock (Focus Coach style): flush to the bottom, full width. */
.tabbar {
  width: 100%;
  max-width: 620px;
  bottom: -1px;
}

.rest {
  width: min(
    calc(100% - var(--buff-left-clearance) - var(--buff-right-clearance) - 28px),
    560px
  );
}

.toast {
  top: calc(var(--buff-top-clearance) + 12px);
  max-width: calc(
    100% - var(--buff-left-clearance) - var(--buff-right-clearance) - 28px
  );
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform:
    translateX(-50%)
    translateY(calc(-100% - var(--buff-top-clearance) - 24px));
  transition:
    transform 0.4s var(--spring),
    opacity 0.2s ease,
    visibility 0s linear 0.4s;
}

.toast.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    transform 0.4s var(--spring),
    opacity 0.2s ease,
    visibility 0s;
}

.v43-arrange-bar,
.arrange-bar {
  padding-right: calc(var(--buff-right-clearance) + 16px);
  padding-bottom: calc(var(--buff-bottom-clearance) + 12px);
  padding-left: calc(var(--buff-left-clearance) + 16px);
}

/* Sheets never rise behind the Island and always retain a real internal
   scroller on short or landscape displays. */
.sheet {
  left: var(--buff-left-clearance);
  right: var(--buff-right-clearance);
  width: auto;
  max-height: calc(100dvh - var(--buff-top-clearance) - 8px) !important;
  padding-right: 18px !important;
  padding-bottom: calc(var(--buff-bottom-clearance) + 24px) !important;
  padding-left: 18px !important;
  overscroll-behavior: contain;
}

#sheet-widgets {
  height: calc(100dvh - var(--buff-top-clearance) - 8px);
  max-height: calc(100dvh - var(--buff-top-clearance) - 8px) !important;
}

/* Every full-screen surface gets the same four-sided contract. */
.login,
.coach-run,
.v18-overlay,
.n19-overlay,
.plb,
.v18-zoom,
.v38-boot-error {
  padding-top: calc(var(--buff-top-clearance) + 16px) !important;
  padding-right: calc(var(--buff-right-clearance) + 18px) !important;
  padding-bottom: calc(var(--buff-bottom-clearance) + 20px) !important;
  padding-left: calc(var(--buff-left-clearance) + 18px) !important;
}

.v18-zoom button {
  top: calc(var(--buff-top-clearance) + 16px);
  right: calc(var(--buff-right-clearance) + 16px);
}

/* Camera Coach is edge-to-edge, so its own header and controls explicitly
   consume the safe areas instead of relying on a parent screen. */
.p55-cam,
.cc-overlay {
  min-height: 100dvh;
  padding-top: var(--buff-top-clearance);
  padding-right: var(--buff-right-clearance);
  padding-bottom: var(--buff-bottom-clearance);
  padding-left: var(--buff-left-clearance);
}

.cc-head {
  min-height: 66px;
  height: auto;
}

@media (orientation: landscape) {
  .app {
    padding-left: var(--buff-left-clearance);
    padding-right: var(--buff-right-clearance);
  }

  .cc-overlay {
    padding: 0 var(--buff-right-clearance) 0 var(--buff-left-clearance);
  }

  .cc-head {
    left: var(--buff-left-clearance);
    right: var(--buff-right-clearance);
    padding-top: 8px;
  }

  .cc-panel {
    padding-right: 20px;
    padding-bottom: calc(var(--buff-bottom-clearance) + 16px);
  }

  .cc-setup {
    padding-left: 18px;
    padding-bottom: calc(var(--buff-bottom-clearance) + 18px);
  }
}

@media (max-width: 390px) {
  .topbar .v42-moment {
    left: 10px;
    right: 100px;
    max-width: none;
  }

  .v42-copy span {
    font-size: 9px;
  }
}