/* oMATIC Minds v0.6.8.61 Image Studio reference tray composer expansion.
   When reference images are attached, the composer expands vertically and keeps:
   reference tray -> warning/status -> prompt/model/send row visible and usable. */

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(430px, calc(100dvh - 140px)) !important;
  padding: 14px 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Reference upload form stays hidden and never takes composer space. */
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references > .om-image-reference-hidden-upload {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Reference stage becomes a compact tray inside the composer instead of covering the input row. */
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage.om-image-reference-stage-card {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  order: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "meta actions"
    "grid grid" !important;
  align-items: start !important;
  gap: 8px 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  background: rgba(10,12,18,.42) !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-stage-head {
  display: contents !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-stage-head > div:first-child {
  grid-area: meta !important;
  min-width: 0 !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-stage-actions {
  grid-area: actions !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  min-width: max-content !important;
  margin: 0 !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .eyebrow,
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage h2,
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage p {
  display: none !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-session-review {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-session-review span,
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  height: 24px !important;
  max-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-stage-actions button {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Compact one-row reference thumbnails that stay above the input row. */
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-grid {
  grid-area: grid !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 98px !important;
  margin: 0 !important;
  padding: 0 2px 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-card {
  flex: 0 0 86px !important;
  display: block !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
  border-radius: 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-preview,
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-preview img {
  display: block !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  object-fit: cover !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-body {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-body > strong,
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-body > span {
  display: none !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-body form {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3 !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-body button {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  background: rgba(178, 37, 48, .96) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: transparent !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-body button::before {
  content: "×" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Keep live warning/status and the actual prompt form below the tray, visible and usable. */
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references .om-image-live-confirm-row {
  order: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references .om-image-generation-submit-status {
  order: 3 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #om-image-studio-generate-form {
  order: 4 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Desktop/tablet row remains a row after tray expansion. */
@media (min-width: 641px) {
  body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #om-image-studio-generate-form:not(.is-dictating):not([data-om-dictating="1"]) {
    display: grid !important;
    grid-template-columns: 42px minmax(180px, 1fr) minmax(150px, 210px) auto 42px 46px !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 46px !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Phone: reference tray stacks neatly, composer grows, and prompt row stays usable. */
@media (max-width: 640px) {
  body.om-image-studio-route .om-image-studio-composer-shell.has-image-references {
    left: var(--om-image-mobile-left-rail, 58px) !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: calc(100vw - var(--om-image-mobile-left-rail, 58px) - 18px) !important;
    max-height: min(62dvh, 520px) !important;
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 18px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage.om-image-reference-stage-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "meta"
      "actions"
      "grid" !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-stage-actions {
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-grid {
    max-height: 84px !important;
  }

  body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-card,
  body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-preview,
  body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-preview img {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
  }

  body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #om-image-studio-generate-form:not(.is-dictating):not([data-om-dictating="1"]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Closed composer stays closed even when references exist. */
@media (max-width: 640px) {
  body.om-image-phone-composer-closed.om-image-studio-route .om-image-studio-composer-shell.has-image-references {
    width: min(210px, calc(100vw - 84px)) !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.om-image-phone-composer-closed.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage,
  body.om-image-phone-composer-closed.om-image-studio-route .om-image-studio-composer-shell.has-image-references #om-image-studio-generate-form,
  body.om-image-phone-composer-closed.om-image-studio-route .om-image-studio-composer-shell.has-image-references .om-image-live-confirm-row,
  body.om-image-phone-composer-closed.om-image-studio-route .om-image-studio-composer-shell.has-image-references .om-image-generation-submit-status {
    display: none !important;
  }
}