/* r175: keep knowledge-point details on the native page scroll.
   Android WebViews can clip the old fixed-height nested text scroller. */
@media (max-width: 760px) {
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .app-shell,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .student-workspace:not(.hidden) {
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .app-shell,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .student-workspace:not(.hidden) {
    padding: 0 !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel .student-knowledge-layout,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel .student-knowledge-detail {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel .knowledge-split-learning {
    display: grid !important;
    grid-template-rows: minmax(220px, var(--knowledge-visual-height)) auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel .knowledge-visual-pane {
    height: var(--knowledge-visual-height) !important;
    min-height: 220px !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel .knowledge-text-pane {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    touch-action: pan-y !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel .knowledge-split-divider {
    display: none !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel .student-gallery-stage {
    touch-action: pan-y !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #studentAssistantFab.student-planner-fab {
    display: none !important;
  }
}

/* r176: image-overlay navigation and per-topic favorite control. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane {
  position: relative !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-image-actions {
  position: absolute;
  z-index: 40;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-image-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 140ms ease, opacity 140ms ease;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-image-action img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.96;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.72));
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-image-back img,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-image-favorite:not(.active) img {
  opacity: 0.96;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-image-favorite.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-image-action:active {
  transform: scale(0.94);
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-image-action:focus-visible {
  outline: 3px solid rgba(238, 159, 24, 0.34);
  outline-offset: 3px;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-image-action.saving {
  opacity: 0.62;
}

@media (max-width: 760px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-image-actions {
    top: max(52px, calc(env(safe-area-inset-top, 0px) + 12px));
    left: 16px;
    right: 16px;
  }
}