/* Chrome follows the visual viewport when a phone keyboard or browser bars
   change its visible area. No authored canvas dimensions or typography change. */
@media (max-width: 1279px) {
  [data-site-editor-root][data-editor-visual-viewport="true"] {
    top: var(--editor-visual-viewport-top);
    bottom: auto;
    height: var(--editor-visual-viewport-height);
    max-height: var(--editor-visual-viewport-height);
  }

  [data-site-editor-root][data-editor-visual-viewport="true"] [data-editor-mobile-toolbar] {
    bottom: var(--editor-visual-viewport-bottom);
  }

  [data-site-editor-root][data-editor-visual-viewport="true"] :is(
    [data-editor-blocks-panel], [data-editor-inspector-panel], button[aria-label="Close editor panel"]
  ) {
    top: calc(var(--editor-visual-viewport-top) + var(--editor-mobile-header-height));
    bottom: calc(var(--editor-visual-viewport-bottom) + var(--editor-mobile-bar-height));
    max-height: max(0px, calc(var(--editor-visual-viewport-height) - var(--editor-mobile-header-height) - var(--editor-mobile-bar-height)));
  }

  [data-site-editor-root][data-editor-visual-viewport="true"] [data-editor-shortcuts] {
    top: calc(var(--editor-mobile-header-height) + 12px);
    max-height: max(0px, calc(var(--editor-visual-viewport-height) - var(--editor-mobile-header-height) - var(--editor-mobile-bar-height) - 24px));
  }
}