/* The installed app uses the real device viewport; desktop mock-phone framing
   remains a website preview feature. Keep the existing NovaNook theme and art. */
html[data-native-app="true"] {
  --native-safe-top: env(safe-area-inset-top, 0px);
  --native-safe-right: env(safe-area-inset-right, 0px);
  --native-safe-bottom: env(safe-area-inset-bottom, 0px);
  --native-safe-left: env(safe-area-inset-left, 0px);
}
html[data-native-app="true"], html[data-native-app="true"] body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
}
html[data-native-app="true"] #appShell.app-preview {
  width: 100%; max-width: none; height: 100dvh; min-height: 0;
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
  /* Library/Books intentionally hide their header. Protect their interactive
     content at the shell level too; an inset on a hidden header has no effect. */
  padding: var(--native-safe-top) var(--native-safe-right) 0 var(--native-safe-left);
  box-sizing: border-box;
}
html[data-native-app="true"] #appShell .app-statusbar,
html[data-native-app="true"] #appPreviewControls { display: none !important; }
html[data-native-app="true"] #appShell .app-header {
  height: 58px; padding-top: 4px; padding-left: 18px; padding-right: 18px;
}
html[data-native-app="true"] dialog {
  inset: var(--native-safe-top) var(--native-safe-right) var(--native-safe-bottom) var(--native-safe-left) !important;
  max-height: calc(100dvh - var(--native-safe-top) - var(--native-safe-bottom) - 24px) !important;
  max-width: calc(100vw - var(--native-safe-left) - var(--native-safe-right) - 24px) !important;
  margin: auto !important;
}
html[data-native-app="true"] #appShell .mobile-nav {
  width: 100%; max-width: none; left: 0; right: 0;
  padding-left: max(6px, env(safe-area-inset-left, 0px));
  padding-right: max(6px, env(safe-area-inset-right, 0px));
}
@media (min-width: 768px) {
  html[data-native-app="true"] #appShell #booksView :is(#bookGrid,.lounge-book-wall) {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 24px;
  }
  html[data-native-app="true"] #appShell #booksView .catalog-title { font-size: 14px; }
  html[data-native-app="true"] #appShell #booksView .catalog-author { font-size: 12px; }
}