/* ΠΑΡΕΑ 0.7.32: safe geometry in short embedded browser viewports.
   Works by available space, not by social-app user-agent detection.
   Preserves approved colors, illustration sizes, labels and touch targets. */
@media screen {
  :root { --parea-visual-height: 100dvh; }
  html { scroll-padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  body { overscroll-behavior-x: none; }
  @supports (height: 100svh) {
    body.visual-refresh .layout,
    #admin-shell.admin-layout,
    body .login-layout { min-height: 100svh; }
  }
  @supports (height: 100dvh) {
    body.visual-refresh .layout,
    #admin-shell.admin-layout,
    body .login-layout { min-height: 100dvh; }
  }
  /* A dialog must never depend on the full physical screen height.  The
     visual viewport also follows keyboard and in-app toolbar changes. */
  dialog[open] {
    box-sizing: border-box;
    max-height: calc(min(100dvh, var(--parea-visual-height)) - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.visual-refresh dialog.age-dialog[open] {
    max-height: calc(min(100dvh, var(--parea-visual-height)) - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #parea-story-player[open] {
    max-height: calc(min(100dvh, var(--parea-visual-height)) - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .help-sidebar {
    max-height: calc(min(100dvh, var(--parea-visual-height)) - 104px - env(safe-area-inset-bottom, 0px));
  }
  body :is(button, input, select, textarea, a) {
    scroll-margin-block: 12px calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

/* Mobile drawers remain scrollable below the social app's top/bottom bars. */
@media screen and (max-width: 935px) {
  body.visual-refresh .parea-sidebar .site-nav-panel {
    max-height: min(72dvh, calc(var(--parea-visual-height) - 144px - env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  #admin-shell.admin-menu-open .sidebar {
    max-height: min(100dvh, var(--parea-visual-height));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
}

/* Reduced HEIGHT, not reduced font size: leave room for content and scrolling. */
@media screen and (max-height: 680px) {
  body.visual-refresh .topbar {
    min-height: 0;
    padding-top: clamp(10px, 2.2vh, 16px);
    padding-bottom: clamp(10px, 2.2vh, 16px);
  }
  body.visual-refresh .page { padding-top: clamp(12px, 2.4vh, 20px); }
  body.visual-refresh dialog.age-dialog .age-grid { margin-block: 9px 12px; }
  body.visual-refresh dialog.age-dialog .age-card-art {
    max-height: min(19dvh, 145px);
  }
  #parea-story-player .story-player-heading {
    padding-top: 13px;
    padding-bottom: 12px;
  }
  .help-sidebar { top: 65px; max-height: calc(min(100dvh, var(--parea-visual-height)) - 78px); }
}

/* The interactive story stays within a phone's available viewport.
   Its contents scroll rather than becoming clipped under browser chrome. */
@media screen and (max-width: 700px) {
  #parea-story-player[open] {
    height: calc(min(100dvh, var(--parea-visual-height)) - 8px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(min(100dvh, var(--parea-visual-height)) - 8px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin-block: auto;
  }
}
@media screen and (max-width: 700px) and (max-height: 540px) {
  body.visual-refresh dialog.age-dialog[open] { padding: 11px 13px !important; }
  body.visual-refresh dialog.age-dialog .age-grid { gap: 8px; }
  body.visual-refresh dialog.age-dialog .age-card { padding: 8px; }
  body.visual-refresh dialog.age-dialog .age-card-art { max-height: min(15dvh, 88px); }
  #parea-story-player .story-player-heading { padding: 11px 14px; }
}
@media print {
  dialog, .help-sidebar { max-height: none !important; }
  #parea-story-player { height: auto !important; }
}