/* Hosted mobile fallbacks for screens that contain long content.
   These rules intentionally use explicit shell classes instead of relying only
   on :has(), which keeps Android WebViews and older hosted browsers scrolling. */

@media (max-width: 599px) {
  html:has(body.ng-coach-document),
  body.ng-coach-document {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100%;
    overscroll-behavior-y: auto !important;
  }

  body.ng-coach-document #mainApp.coach-flow-mode {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.ng-coach-document #screenContent.coach-flow-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    overflow: visible !important;
    padding: 0 !important;
    touch-action: auto !important;
  }

  body.ng-coach-document #screenContent.coach-flow-content .coach-page {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 16px 18px calc(34px + env(safe-area-inset-bottom)) !important;
  }

  body.ng-coach-document #screenContent.coach-flow-content .coach-thread,
  body.ng-coach-document #screenContent.coach-flow-content #chatMessages {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    touch-action: auto !important;
    padding-bottom: 20px !important;
  }

  body.ng-coach-document #screenContent.coach-flow-content .coach-chat-panel {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 10px 0 18px !important;
  }

  body.ng-coach-document #screenContent.coach-flow-content .coach-composer-wrap {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 12px !important;
  }

  body.ng-coach-document #mainApp.coach-flow-mode .bottom-nav {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: calc(100% - 36px) !important;
    margin: 0 auto 22px !important;
    z-index: auto !important;
  }

  /* More screen: restore a dependable vertical page flow on hosted Android. */
  body.ng-more-document #mainApp.more-flow-mode {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.ng-more-document #screenContent.more-flow-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.ng-more-document #screenContent.more-flow-content .more-menu-screen {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px 12px calc(132px + env(safe-area-inset-bottom)) !important;
  }

  body.ng-more-document #screenContent.more-flow-content .more-menu-list {
    display: grid !important;
    width: 100% !important;
    gap: 10px !important;
  }

  body.ng-more-document #screenContent.more-flow-content .more-menu-item {
    display: flex !important;
    width: 100% !important;
    min-height: 76px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.ng-more-document #mainApp.more-flow-mode .bottom-nav {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    margin: 0 auto 22px !important;
    z-index: auto !important;
  }
}

@media (min-width: 600px) {
  #screenContent.more-flow-content .more-menu-screen { min-height: 100%; }
}

/* v3: hosted coach page — one full document, no sticky controls, no nested chat scroll. */
body.ng-coach-document,
body.ng-coach-document html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

body.ng-coach-document #mainApp.coach-flow-mode {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.ng-coach-document #mainApp.coach-flow-mode .app-header {
  display: none !important;
}

body.ng-coach-document #screenContent.coach-flow-content {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  touch-action: auto !important;
}

body.ng-coach-document #screenContent.coach-flow-content .coach-page {
  display: block !important;
  width: min(100%, 960px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 16px 22px calc(34px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}

body.ng-coach-document #screenContent.coach-flow-content .coach-chat-panel {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: clamp(520px, calc(100svh - 44px), 760px) !important;
  max-height: none !important;
  margin: 12px 0 18px !important;
  padding: 16px !important;
  overflow: visible !important;
  border-radius: 26px !important;
}

body.ng-coach-document #screenContent.coach-flow-content .coach-chat-head {
  display: flex !important;
  position: static !important;
  width: 100% !important;
}

body.ng-coach-document #screenContent.coach-flow-content .coach-thread,
body.ng-coach-document #screenContent.coach-flow-content #chatMessages {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 390px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px 0 12px !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
  scrollbar-width: none !important;
}

body.ng-coach-document #screenContent.coach-flow-content #chatMessages > * {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.ng-coach-document #screenContent.coach-flow-content .coach-welcome-card {
  width: 100% !important;
  min-height: 330px !important;
  margin: 0 !important;
  overflow: visible !important;
}

body.ng-coach-document #screenContent.coach-flow-content .coach-composer-wrap {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  overflow: visible !important;
}

/* The navigation follows the page instead of covering the conversation. */
body.ng-coach-document #mainApp.coach-flow-mode .bottom-nav {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  width: min(740px, calc(100% - 36px)) !important;
  margin: 0 auto 22px !important;
  z-index: auto !important;
}

body.ng-coach-document #screenContent.coach-flow-content .coach-hero,
body.ng-coach-document #screenContent.coach-flow-content .coach-hero-note,
body.ng-coach-document #screenContent.coach-flow-content .coach-quick-section,
body.ng-coach-document #screenContent.coach-flow-content .coach-chat-head,
body.ng-coach-document #screenContent.coach-flow-content .coach-composer-wrap {
  position: static !important;
  inset: auto !important;
}

@media (max-width: 599px) {
  body.ng-coach-document #screenContent.coach-flow-content .coach-page { padding-left: 14px !important; padding-right: 14px !important; }
  body.ng-coach-document #screenContent.coach-flow-content .coach-chat-panel { min-height: max(520px, calc(100svh - 28px)) !important; padding: 13px !important; }
}