/* One desktop canvas on every device. index.html lets mobile browsers fit this
   1440px layout to the screen and keeps native pinch zoom available. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 1440px; }

/* Fixed controls retain the canvas width in a narrow desktop window too. */
.compare-tray { min-width: calc(1440px - var(--sidebar) - 64px); }

/* Keep native page gestures until the user explicitly zooms a comparison image. */
#compare-view .compare-viewport:not(.is-zoomed) { touch-action: auto; }
#compare-view .compare-viewport,
#compare-view .compare-image-message,
#compare-view .compare-image-unavailable { height: clamp(250px, max(345.6px, 24vw), 380px); }

/* Dialog content scrolls independently so its close/action controls stay usable.
   This does not change the surrounding desktop page or stack its columns. */
.dialog { max-height: calc(100dvh - 80px); }
.pl-dialog { max-height: calc(100dvh - 64px); }
.dialog.compare-zoom-dialog { max-height: calc(100dvh - 48px); }
.dialog[open] { display: flex; flex-direction: column; }
.dialog-header, .pl-dialog-header, .dialog-actions { flex-shrink: 0; }
.dialog-header h2, .pl-dialog-header h2 { min-width: 0; overflow-wrap: anywhere; }
.dialog-header > button, .pl-dialog-header > button { flex-shrink: 0; }
.dialog-body, .pl-dialog-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.dialog-body > .original-image { max-height: calc(100dvh - 205px); }

@media (pointer: coarse) {
  /* 16px prevents Safari focus zoom while keeping user pinch zoom available. */
  .form-field input, .form-field select, .form-field textarea, .searchbox input,
  .prompt-library .pl-search, .prompt-library .pl-manual-copy,
  .wechat-form input, #compare-view #compare-zoom { font-size: 16px; }
  .dialog-header > button, .pl-dialog-header > button { min-width: 40px; min-height: 40px; }
}