/* One safe, visible area for Note, World and their dialogs. */
:root {
  --app-viewport-height: 100vh;
  --app-viewport-top: 0px;
  --app-viewport-bottom: 0px;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-nav-height: calc(64px + var(--app-safe-bottom));
  --app-dialog-height: calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom) - 28px);
}
@supports (height: 100dvh) {
  :root { --app-viewport-height: 100dvh; }
}
:root[data-viewport-embedded] { --app-safe-top: 0px; --app-safe-bottom: 0px; }
html { scroll-padding-bottom: calc(var(--app-nav-height) + 20px); }
.shell, .auth { min-height: var(--app-viewport-height); }

/* Fixed backdrops must shrink with the visible area, not the full device screen. */
html .modal-bg, html .dialog-backdrop, html .gov, html .world-picker, html .note-photo-lightbox,
html .note-support-layer:not([hidden]), html .nn-backdrop, html .na-backdrop {
  top: var(--app-viewport-top);
  bottom: auto;
  height: var(--app-viewport-height);
  box-sizing: border-box;
  padding-top: calc(14px + var(--app-safe-top));
  padding-bottom: calc(14px + var(--app-safe-bottom));
}
.modal-bg > .modal, .gov > .gbox { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.dialog-backdrop > .composer, .dialog-backdrop > .management-dialog { max-height: var(--app-dialog-height); }
.nn-backdrop > .nn-dialog, .na-backdrop > .na-panel { max-height: var(--app-dialog-height); }
.composer-body, .management-body { min-height: 0; overscroll-behavior: contain; }
.composer-footer, .management-head, .management-footer, .management-message { flex-shrink: 0; }
.gcan { max-height: calc(var(--app-dialog-height) - 170px); flex-shrink: 0; }
html .world-picker { padding: var(--app-safe-top) 0 0; }
.world-picker-panel { max-height: calc(var(--app-viewport-height) - var(--app-safe-top) - 14px); padding-bottom: max(14px, var(--app-safe-bottom)); }
.note-photo-lightbox img { max-height: var(--app-dialog-height); }
.note-photo-lightbox-close { top: max(14px, var(--app-safe-top)); }
.photo-source-menu { max-height: var(--app-dialog-height); overflow-y: auto; overscroll-behavior: contain; }

.ju-charge-dialog, .auth-dialog {
  top: calc(var(--app-viewport-top) + var(--app-safe-top) + 14px);
  bottom: calc(var(--app-viewport-bottom) + var(--app-safe-bottom) + 14px);
  max-height: var(--app-dialog-height);
}
.auth-dialog .dialog-shell { max-height: var(--app-dialog-height); overscroll-behavior: contain; }
.spot-game-dialog {
  top: var(--app-viewport-top);
  bottom: var(--app-viewport-bottom);
  height: calc(var(--app-viewport-height) - 24px - var(--app-safe-top) - var(--app-safe-bottom));
}

@media (max-width: 899px) {
  .bottomnav {
    bottom: var(--app-viewport-bottom);
    padding: 6px max(4px, env(safe-area-inset-right, 0px)) max(12px, calc(6px + var(--app-safe-bottom))) max(4px, env(safe-area-inset-left, 0px));
  }
  .shell .main { padding-bottom: calc(var(--app-nav-height) + 76px); }
  .write-fab { bottom: calc(var(--app-viewport-bottom) + var(--app-nav-height) + 16px); }
  #toast, #browser-tip { bottom: calc(var(--app-viewport-bottom) + var(--app-nav-height) + 16px); }
  .side {
    top: var(--app-viewport-top);
    bottom: auto;
    height: var(--app-viewport-height);
    padding-bottom: calc(18px + var(--app-safe-bottom));
  }
  .front { min-height: calc(var(--app-viewport-height) - 174px); }
  .site-footer { padding-bottom: calc(24px + var(--app-safe-bottom)); }
}
@media (max-width: 640px) {
  #composer-backdrop {
    --note-sheet-top: max(8px, var(--app-safe-top));
    --note-sheet-bottom: max(12px, var(--app-safe-bottom));
  }
  #composer-backdrop .composer {
    height: calc(var(--app-viewport-height) - var(--note-sheet-top) - var(--note-sheet-bottom));
    max-height: 100%;
  }
  .spot-game-dialog {
    height: var(--app-viewport-height);
    padding-bottom: var(--app-safe-bottom);
  }
}
@media (max-width: 900px), (max-width: 1100px) and (max-height: 600px) {
  .spot-game-dialog.spot-game-zooming {
    top: var(--app-viewport-top);
    bottom: auto;
    height: var(--app-viewport-height);
    padding-bottom: var(--app-safe-bottom);
  }
}
@media (min-width: 900px) {
  .side { height: var(--app-viewport-height); }
}

/* Standalone game pages and native dialogs also use the same visible area. */
[data-viewport-page="matgo-online"] .dialog,
[data-viewport-page="matgo-solo"] .modal {
  top: var(--app-viewport-top);
  bottom: auto;
  height: var(--app-viewport-height);
  padding-top: calc(14px + var(--app-safe-top));
  padding-bottom: calc(14px + max(var(--matgo-safe-bottom), var(--matgo-nav-gap)));
  box-sizing: border-box;
}
[data-viewport-page="matgo-online"] .dialog > section,
[data-viewport-page="matgo-solo"] .modal > .card {
  max-height: calc(var(--app-viewport-height) - var(--app-safe-top) - max(var(--matgo-safe-bottom), var(--matgo-nav-gap)) - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
[data-viewport-page="matgo-online"] #connection { bottom: calc(var(--app-viewport-bottom) + max(var(--matgo-safe-bottom), var(--matgo-nav-gap))); }
[data-viewport-page="matgo-online"] #toast { bottom: calc(var(--app-viewport-bottom) + max(var(--matgo-safe-bottom), var(--matgo-nav-gap)) + 16px); }

[data-viewport-page="furniture"] #batch-dialog {
  top: calc(var(--app-viewport-top) + var(--app-safe-top) + 14px);
  bottom: calc(var(--app-viewport-bottom) + var(--app-safe-bottom) + 14px);
  max-height: var(--app-dialog-height);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
}
[data-viewport-page="furniture"] #notice { bottom: calc(var(--app-viewport-bottom) + var(--app-safe-bottom) + 16px); }
[data-viewport-page="house"] #app { height: calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom)); margin-top: var(--app-safe-top); }
[data-viewport-page="house"] #app > nav { padding-bottom: 10px; }
[data-viewport-page="house"] #save-warning { bottom: var(--app-viewport-bottom); padding-bottom: calc(4px + var(--app-safe-bottom)); }

[data-viewport-page="spot"] #zoom-dialog {
  top: calc(var(--app-viewport-top) + var(--app-safe-top) + 14px);
  bottom: calc(var(--app-viewport-bottom) + var(--app-safe-bottom) + 14px);
  height: var(--app-dialog-height);
  max-height: var(--app-dialog-height);
  box-sizing: border-box;
}
[data-viewport-page="spot"] body { padding-bottom: var(--app-safe-bottom); }
@media (max-width: 900px), (max-width: 1100px) and (max-height: 600px) {
  [data-viewport-page="spot"] #zoom-dialog {
    top: calc(var(--app-viewport-top) + var(--app-safe-top));
    bottom: auto;
    height: calc(var(--app-viewport-height) - var(--app-safe-top) - var(--app-safe-bottom));
    max-height: none;
    padding: 0;
  }
  [data-viewport-page="spot"] #zoom-dialog .zoom-toolbar { padding-bottom: 4px; }
}