/* This file is intentionally versioned separately from the application bundle.
   It makes iOS fetch the mobile dialog layout again after a release. */
@media (max-width: 760px) {
  [data-slot="dialog-overlay"] {
    background: #080b08 !important;
    opacity: 1 !important;
  }

  [data-slot="dialog-content"].image-reference-dialog,
  [data-slot="dialog-content"].interface-dialog {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    /* DialogContent is a grid by default. With a fixed mobile height its rows
       compress while the cards retain their height, so they paint over the
       upload panel. A column flow gives the dialog one scrollable document. */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    background: #0d120d !important;
    isolation: isolate;
    border-radius: 0 !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .interface-dialog .interface-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* A fixed-height flex dialog may otherwise shrink this grid while its cards
     keep their minimum height, making the cards overlap the upload panel. */
  .interface-dialog > *,
  .image-reference-dialog > * {
    flex-shrink: 0 !important;
  }

  .interface-media-frame {
    display: block !important;
    padding: 0 !important;
    height: clamp(145px, 38vw, 220px);
    aspect-ratio: auto;
  }

  .interface-dialog .interface-select > span {
    padding: 12px;
  }

  .image-reference-dialog .image-reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .reference-media-frame {
    display: block !important;
    padding: 0 !important;
    height: clamp(165px, 52vw, 250px);
    aspect-ratio: auto;
  }

  .image-reference-dialog .image-reference-select > span {
    padding: 9px;
  }

  .interface-dialog .interface-card {
    min-height: 230px;
  }

  .image-reference-dialog .image-reference-card {
    min-height: 215px;
  }

  .interface-dialog .interface-select,
  .image-reference-dialog .image-reference-select {
    height: 100%;
  }
}