/* NutriGuru responsive repair layer.
   Loaded last so hosted WebViews get one predictable layout contract.
   Presentation-only: handlers, routes and data remain untouched. */

html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  overflow-x: hidden !important;
}

body {
  overscroll-behavior-x: none;
}

#mainApp,
#screenContent {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#screenContent {
  box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

/* Coach: the document is the only scroll owner on narrow hosted screens.
   This avoids Android WebView swallowing gestures in nested flex scrollers. */
body.ng-coach-document,
html:has(body.ng-coach-document) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 320px !important;
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

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

body.ng-coach-document #screenContent.coach-flow-content,
#screenContent:has(#coachPage) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !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 .coach-page,
#screenContent:has(#coachPage) .coach-page {
  display: block !important;
  width: 100% !important;
  max-width: 1120px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 16px clamp(14px, 3vw, 28px) calc(132px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* No sticky/fixed top controls on NG Coach. The page header remains visible
   in normal flow while the conversation grows naturally below it. */
body.ng-coach-document .coach-hero,
body.ng-coach-document .coach-hero-note,
body.ng-coach-document .coach-quick-section,
body.ng-coach-document .coach-chat-head,
body.ng-coach-document .coach-composer-wrap,
#screenContent:has(#coachPage) .coach-hero,
#screenContent:has(#coachPage) .coach-hero-note,
#screenContent:has(#coachPage) .coach-quick-section,
#screenContent:has(#coachPage) .coach-chat-head,
#screenContent:has(#coachPage) .coach-composer-wrap {
  position: static !important;
  inset: auto !important;
}

body.ng-coach-document .coach-chat-panel,
#screenContent:has(#coachPage) .coach-chat-panel {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: clamp(460px, calc(100svh - 230px), 720px) !important;
  max-height: none !important;
  margin: 10px 0 18px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.ng-coach-document .coach-thread,
body.ng-coach-document #chatMessages,
#screenContent:has(#coachPage) .coach-thread,
#screenContent:has(#coachPage) #chatMessages {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 360px !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  padding: 16px 0 12px !important;
  touch-action: auto !important;
  overscroll-behavior: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: auto !important;
}

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

body.ng-coach-document .coach-welcome-card,
#screenContent:has(#coachPage) .coach-welcome-card {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 300px !important;
  max-height: none !important;
  margin: 0 0 14px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.ng-coach-document .coach-composer-wrap,
#screenContent:has(#coachPage) .coach-composer-wrap {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 14px !important;
}

body.ng-coach-document .coach-composer,
#screenContent:has(#coachPage) .coach-composer {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.ng-coach-document .coach-input-shell,
#screenContent:has(#coachPage) .coach-input-shell {
  min-width: 0 !important;
  max-width: none !important;
}

body.ng-coach-document .coach-input,
#screenContent:has(#coachPage) .coach-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* The bottom navigation stays accessible but never covers the composer or
   the final answer. Its space is reserved by the coach page padding. */
body.ng-coach-document #mainApp.coach-flow-mode .bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  top: auto !important;
  width: min(740px, calc(100% - 24px)) !important;
  max-width: calc(100% - 24px) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 50 !important;
}

/* More screen: force the cards back into the normal full-width grid on hosted
   Android where :has() and nested flex sizing can be inconsistent. */
body.ng-more-document #mainApp.more-flow-mode,
body.ng-more-document #screenContent.more-flow-content {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.ng-more-document #screenContent.more-flow-content .more-menu-screen {
  width: 100% !important;
  max-width: 1120px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 18px clamp(12px, 3vw, 28px) calc(126px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}

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

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

body.ng-more-document #mainApp.more-flow-mode .bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  top: auto !important;
  width: min(740px, calc(100% - 24px)) !important;
  max-width: calc(100% - 24px) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

@media (min-width: 600px) {
  #screenContent {
    max-width: 1120px !important;
  }

  #screenContent:has(#coachPage),
  body.ng-coach-document #screenContent.coach-flow-content {
    max-width: none !important;
  }

  body.ng-coach-document .coach-page,
  #screenContent:has(#coachPage) .coach-page {
    padding-left: clamp(22px, 4vw, 48px) !important;
    padding-right: clamp(22px, 4vw, 48px) !important;
  }
}

@media (max-width: 599px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
  }

  #mainApp,
  #screenContent {
    width: 100% !important;
    max-width: none !important;
  }

  body.ng-coach-document .coach-hero,
  #screenContent:has(#coachPage) .coach-hero {
    padding-top: 2px !important;
  }

  body.ng-coach-document .coach-quick-grid,
  #screenContent:has(#coachPage) .coach-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ng-coach-document .coach-quick-card,
  #screenContent:has(#coachPage) .coach-quick-card {
    min-width: 0 !important;
    min-height: 52px !important;
  }
}

@media (max-width: 360px) {
  body.ng-coach-document .coach-page,
  #screenContent:has(#coachPage) .coach-page {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  body.ng-coach-document .coach-online,
  #screenContent:has(#coachPage) .coach-online {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coach-composer,
  .coach-chat-panel,
  .more-menu-item {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* v4: make the browser page the scroll owner for every screen.
   The previous flex shell trapped desktop wheel/touch gestures inside
   #screenContent while the document itself stayed exactly viewport-high.
   Keeping the header and bottom navigation in their existing visual layers,
   but allowing the app content to grow, restores reliable page scrolling on
   desktop browsers and mobile WebViews alike. */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

#mainApp:not(.hidden) {
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}

#screenContent {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: calc(100dvh - 96px) !important;
  overflow: visible !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Keep enough document space below fixed navigation and home FABs. */
#screenContent > * {
  padding-bottom: max(106px, calc(106px + env(safe-area-inset-bottom)));
}

/* Coach and More already use normal document flow; retain their larger
   screen-specific bottom spacing without introducing a second scroller. */
body.ng-coach-document #screenContent > *,
body.ng-more-document #screenContent > * {
  padding-bottom: max(126px, calc(126px + env(safe-area-inset-bottom)));
}

@media (max-width: 599px) {
  #screenContent {
    min-height: calc(100svh - 72px) !important;
  }

  #screenContent > * {
    padding-bottom: max(112px, calc(112px + env(safe-area-inset-bottom)));
  }
}