/* Keep the motion-template designer usable at every supported screen height. */
.modal .dialog:has(.wysiwyg-template-editor) {
  height: calc(100dvh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
  overflow: hidden !important;
}

.wysiwyg-template-editor,
.wysiwyg-template-editor > form,
.template-designer-workspace,
.template-page-column {
  min-height: 0;
  overflow: hidden;
}

.wysiwyg-template-editor {
  height: 100%;
}

.template-page-column,
.template-property-panel {
  height: 100%;
}

.template-page-stage {
  min-height: 0;
  overflow-x: auto !important;
  overflow-y: scroll !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

.template-property-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

.template-property-content {
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.designer-actions {
  position: sticky;
  bottom: 0;
  z-index: 8;
  box-shadow: 0 -3px 10px rgba(16, 33, 61, 0.08);
}

@media (max-height: 800px) {
  .wysiwyg-template-editor > header {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .wysiwyg-template-editor > header h1 {
    font-size: 28px;
  }

  .template-meta.compact {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}