/*
 * Explainables mobile class pages — single viewport and scroll owner.
 * This file intentionally loads after each page's historical inline CSS.
 * It removes the competing desktop-preview geometry and gives every surface
 * exactly one vertical scroll container.
 */
html.ex-mobile-class-layout-owner {
  --ex-class-vv-left: 0px;
  --ex-class-vv-top: 0px;
  --ex-class-vv-width: 100vw;
  --ex-class-vv-height: 100dvh;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  scrollbar-gutter: auto !important;
}

html.ex-mobile-class-layout-owner body {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  scrollbar-gutter: auto !important;
}

/* The app follows the visual viewport rather than the wider desktop-emulation
   layout viewport. This is what prevents the 430px desktop card from fighting
   a 320–444px phone viewport. */
html.ex-mobile-class-layout-owner .app {
  position: fixed !important;
  left: var(--ex-class-vv-left) !important;
  top: var(--ex-class-vv-top) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--ex-class-vv-width) !important;
  height: var(--ex-class-vv-height) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: var(--topbar-h, 70px) minmax(0, 1fr) var(--bottomnav-h, 72px) !important;
}

html.ex-mobile-class-layout-owner .topbar,
html.ex-mobile-class-layout-owner .screens,
html.ex-mobile-class-layout-owner .bottom-nav {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

html.ex-mobile-class-layout-owner .topbar {
  position: relative !important;
  inset: auto !important;
  grid-row: 1 !important;
  overflow: hidden !important;
}

html.ex-mobile-class-layout-owner .screens {
  position: relative !important;
  inset: auto !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
  overscroll-behavior: none !important;
  scrollbar-gutter: auto !important;
}

html.ex-mobile-class-layout-owner .bottom-nav {
  position: relative !important;
  inset: auto !important;
  grid-row: 3 !important;
  height: var(--bottomnav-h, 72px) !important;
  min-height: var(--bottomnav-h, 72px) !important;
  max-height: var(--bottomnav-h, 72px) !important;
  overflow: hidden !important;
  z-index: 80 !important;
}

/* One scroll owner per non-chat view. */
html.ex-mobile-class-layout-owner .view {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--acc, #d4a843) 72%, #fff 8%) transparent !important;
}

html.ex-mobile-class-layout-owner .view::-webkit-scrollbar,
html.ex-mobile-class-layout-owner .chat-scroll::-webkit-scrollbar,
html.ex-mobile-class-layout-owner .ex-slim-sidebar::-webkit-scrollbar,
html.ex-mobile-class-layout-owner :is(.modal-body,.sheet-body,.drawer-body,.recent-list)::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

html.ex-mobile-class-layout-owner .view::-webkit-scrollbar-track,
html.ex-mobile-class-layout-owner .chat-scroll::-webkit-scrollbar-track,
html.ex-mobile-class-layout-owner .ex-slim-sidebar::-webkit-scrollbar-track,
html.ex-mobile-class-layout-owner :is(.modal-body,.sheet-body,.drawer-body,.recent-list)::-webkit-scrollbar-track {
  background: transparent !important;
}

html.ex-mobile-class-layout-owner .view::-webkit-scrollbar-thumb,
html.ex-mobile-class-layout-owner .chat-scroll::-webkit-scrollbar-thumb,
html.ex-mobile-class-layout-owner .ex-slim-sidebar::-webkit-scrollbar-thumb,
html.ex-mobile-class-layout-owner :is(.modal-body,.sheet-body,.drawer-body,.recent-list)::-webkit-scrollbar-thumb {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--acc, #d4a843) 70%, rgba(255,255,255,.25)) !important;
  background-clip: padding-box !important;
}

html.ex-mobile-class-layout-owner .view::-webkit-scrollbar-corner,
html.ex-mobile-class-layout-owner .chat-scroll::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Chat owns scrolling through .chat-scroll, never through both the view and the
   message container. */
html.ex-mobile-class-layout-owner #view-chat,
html.ex-mobile-class-layout-owner #view-chat.chat-view {
  overflow: hidden !important;
  padding: 0 !important;
}

html.ex-mobile-class-layout-owner #view-chat .chat-scroll,
html.ex-mobile-class-layout-owner #chatScroll {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: thin !important;
  box-sizing: border-box !important;
  padding-bottom: calc(var(--composer-h, 82px) + 22px) !important;
}

html.ex-mobile-class-layout-owner #chatMessages,
html.ex-mobile-class-layout-owner .chat-messages,
html.ex-mobile-class-layout-owner #chatLandingCard,
html.ex-mobile-class-layout-owner .chat-landing-card {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Leaderboard uses the page view as its sole scroll owner. The panel and list
   are allowed to grow naturally instead of opening another scrollbar. */
html.ex-mobile-class-layout-owner #view-leaderboard {
  padding: 10px 12px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.ex-mobile-class-layout-owner #view-leaderboard .lb-panel {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 15px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html.ex-mobile-class-layout-owner #view-leaderboard :is(.lb-hero,.lb-tabs,.lb-search,#lbList,.lb-card,.lb-row,.leader-card,.lb-system-note,.lb-more-grid) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.ex-mobile-class-layout-owner #view-leaderboard #lbList {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html.ex-mobile-class-layout-owner #view-leaderboard .lb-tabs {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html.ex-mobile-class-layout-owner #view-leaderboard .lb-tabs::-webkit-scrollbar {
  display: none !important;
}

/* The composer is part of the app, not the browser layout viewport. This also
   makes keyboard resizing deterministic. */
html.ex-mobile-class-layout-owner .composer,
html.ex-mobile-class-layout-owner .composer-backdrop {
  position: absolute !important;
  box-sizing: border-box !important;
}

html.ex-mobile-class-layout-owner body[data-view="chat"] .composer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: var(--bottomnav-h, 72px) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 90 !important;
}

html.ex-mobile-class-layout-owner body:not([data-view="chat"]) .composer,
html.ex-mobile-class-layout-owner .app[data-non-chat="1"] .composer,
html.ex-mobile-class-layout-owner body.ex-more-open .composer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  pointer-events: none !important;
}

html.ex-mobile-class-layout-owner .composer-backdrop {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

html.ex-mobile-class-layout-owner body:not([data-view="chat"]) .composer-backdrop,
html.ex-mobile-class-layout-owner .app[data-non-chat="1"] .composer-backdrop {
  display: none !important;
  pointer-events: none !important;
}

/* Fixed child widgets are kept inside the actual app width. */
html.ex-mobile-class-layout-owner .floating-bp {
  position: absolute !important;
  left: auto !important;
  right: 12px !important;
  top: calc(var(--topbar-h, 70px) + 8px) !important;
  max-width: calc(100% - 24px) !important;
}

html.ex-mobile-class-layout-owner :is(.topbar,.bottom-nav,.home-wrap,.notes-grid,.notes-hero,.ex-chat-dashboard,.msg,.msg.ai,.msg.user,.ex-slim-sidebar,.more-modal,.modal,.sheet,.drawer) {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html.ex-mobile-class-layout-owner :is(.msg,.answer,.answer *,#view-leaderboard *,#view-notes *) {
  overflow-wrap: anywhere;
  word-break: normal;
}


/* Viewport-bound overlays must use the same visual width as the app. Historical
   desktop-preview rules centered these against the wider layout viewport. */
html.ex-mobile-class-layout-owner :is(.scrim,.modal-overlay,.focus-overlay,.ex-tour-welcome,.ex-tour-mask) {
  left: var(--ex-class-vv-left) !important;
  top: var(--ex-class-vv-top) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--ex-class-vv-width) !important;
  height: var(--ex-class-vv-height) !important;
  max-width: none !important;
  max-height: none !important;
  box-sizing: border-box !important;
}

html.ex-mobile-class-layout-owner .ex-slim-sidebar {
  left: calc(var(--ex-class-vv-left) + 10px) !important;
  top: calc(var(--ex-class-vv-top) + 10px + env(safe-area-inset-top, 0px)) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(316px, calc(var(--ex-class-vv-width) - 20px)) !important;
  height: calc(var(--ex-class-vv-height) - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  max-width: calc(var(--ex-class-vv-width) - 20px) !important;
  max-height: calc(var(--ex-class-vv-height) - 20px) !important;
  box-sizing: border-box !important;
}

html.ex-mobile-class-layout-owner :is(.msheet,.bp-full-sheet,.v8-share-sheet) {
  width: min(430px, calc(var(--ex-class-vv-width) - 24px)) !important;
  max-width: calc(var(--ex-class-vv-width) - 24px) !important;
  max-height: calc(var(--ex-class-vv-height) - 24px) !important;
  box-sizing: border-box !important;
}

html.ex-mobile-class-layout-owner .toast {
  left: calc(var(--ex-class-vv-left) + 12px) !important;
  right: auto !important;
  width: calc(var(--ex-class-vv-width) - 24px) !important;
  max-width: calc(var(--ex-class-vv-width) - 24px) !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}

/* The side panel and modal bodies may scroll, but their outer overlays do not
   create a second document scrollbar. */
html.ex-mobile-class-layout-owner .ex-slim-sidebar {
  max-height: var(--ex-class-vv-height) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: auto !important;
}

html.ex-mobile-class-layout-owner :is(.modal-overlay,.sheet-overlay,.drawer-overlay,.more-modal,.ex-tour-welcome,.ex-tour-mask) {
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Never re-enable the desktop-preview 430px frame on a mobile class route. */
@media (min-width: 700px) {
  html.ex-mobile-class-layout-owner .app {
    width: var(--ex-class-vv-width) !important;
    height: var(--ex-class-vv-height) !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.ex-mobile-class-layout-owner body[data-view="chat"] .composer {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }
}

/* Open/closed sidebar state is explicit. This prevents an old restoration
   transform from winning after the user taps the menu button. */
html.ex-mobile-class-layout-owner .ex-slim-sidebar.open {
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.ex-mobile-class-layout-owner .scrim.show {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}