/* Reuse the existing fullscreen viewer; keep its controls reachable on a phone. */
body.student-page .image-viewer-toolbar-actions > .image-viewer-control {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  text-shadow: 0 2px 6px #000;
  font: inherit;
  font-size: 12px;
}
body.student-page .image-viewer-toolbar-actions > :is(#imageViewerZoomIn, #imageViewerZoomOut) { font-size: 24px; }
body.student-page .image-viewer-toolbar-actions > button:disabled { opacity: .35; }
body.student-page .image-viewer-toolbar-actions > button:focus-visible { outline: 2px solid #efd098; outline-offset: -2px; }
body.student-page .image-viewer.is-rotated :is(.image-annotation-canvas, .image-annotation-layer, .image-annotation-selection) { visibility: hidden; }
body.student-page .memory-feed-carousel:focus-visible { outline: 2px solid #efd098; outline-offset: -2px; }
body.student-page .memory-feed-slide > img { cursor: zoom-in; }
@media (max-width: 560px) {
  body.student-page .image-viewer-toolbar { flex-wrap: wrap; gap: 4px; }
  body.student-page .image-viewer-toolbar #imageViewerCaption { flex: 1 1 100%; }
  body.student-page .image-viewer-toolbar-actions { width: 100%; justify-content: flex-end; gap: 2px; }
  body.student-page .image-viewer-toolbar-actions > :is(#imageViewerZoom, #imageViewerReset, #imageViewerClose) {
    flex: 0 0 44px;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding-inline: 4px !important;
  }
  body.student-page .image-viewer-toolbar-actions > #imageViewerZoom { font-size: 10px; }
  body.student-page .image-viewer-toolbar-actions > #imageViewerClose { height: 44px; }
  body.student-page .image-viewer-toolbar-actions > #imageViewerClose::before,
  body.student-page .image-viewer-toolbar-actions > #imageViewerClose::after { top: 21px; left: 12px; }
}
/* Keep the established annotation toolbar geometry and saved note coordinates. */
body.student-page .image-viewer.is-annotating .image-viewer-control { display: none; }
@media (max-width: 560px) {
  body.student-page .image-viewer.is-annotating .image-viewer-toolbar { flex-wrap: nowrap; gap: 10px; }
  body.student-page .image-viewer.is-annotating .image-viewer-toolbar #imageViewerCaption { flex: 1 1 auto; }
  body.student-page .image-viewer.is-annotating .image-viewer-toolbar-actions { width: auto; }
  body.student-page .image-viewer.is-annotating .image-viewer-toolbar-actions > :is(#imageViewerZoom, #imageViewerReset, #imageViewerClose) {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding-inline: 7px !important;
  }
  body.student-page .image-viewer.is-annotating .image-viewer-toolbar-actions > #imageViewerZoom { font-size: 11px; }
  body.student-page .image-viewer.is-annotating .image-viewer-toolbar-actions > #imageViewerClose { width: 36px; height: 36px; padding: 0 !important; }
  body.student-page .image-viewer.is-annotating .image-viewer-toolbar-actions > #imageViewerClose::before,
  body.student-page .image-viewer.is-annotating .image-viewer-toolbar-actions > #imageViewerClose::after { top: 17px; left: 8px; }
}
/* The browsing stage starts below the actual toolbar, so fitted images remain complete. */
body.student-page #imageViewer:not(.is-annotating) #imageViewerStage {
  align-self: start !important;
  box-sizing: border-box !important;
  margin-top: var(--image-viewer-toolbar-height, 0px) !important;
  height: var(--image-viewer-content-height, 100%) !important;
  max-height: var(--image-viewer-content-height, 100%) !important;
}
body.student-page #imageViewer:not(.is-annotating) #imageViewerImg {
  max-height: var(--image-viewer-content-height, 100dvh) !important;
}