/* oMATIC Minds v0.6.8.62 Smart intent support + reference tray clearance polish.
   This adds extra scroll clearance when reference images are open and keeps the
   reference thumbnail remove control uncropped, red, and centered. */

/* Push Image Studio content far enough above the expanded fixed composer when references are attached. */
body.om-image-studio-route:has(.om-image-studio-composer-shell.has-image-references) {
  --om-image-studio-composer-clearance: 460px;
}

body.om-image-studio-route:has(.om-image-studio-composer-shell.has-image-references) .om-chat-messages,
body.om-image-studio-route:has(.om-image-studio-composer-shell.has-image-references) .om-image-studio-messages {
  padding-bottom: max(460px, calc(var(--om-image-studio-composer-clearance, 460px) + 80px)) !important;
  scroll-padding-bottom: max(460px, calc(var(--om-image-studio-composer-clearance, 460px) + 80px)) !important;
}

/* Keep the expanded composer/tray in front without blocking content permanently. */
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references {
  z-index: 150 !important;
}

/* Prevent reference card close buttons from clipping at the thumbnail edge. */
body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-grid,
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-body {
  overflow: visible !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-body form {
  top: -9px !important;
  right: -9px !important;
  width: 26px !important;
  height: 26px !important;
  overflow: visible !important;
}

body.om-image-studio-route .om-image-studio-composer-shell.has-image-references #image-reference-stage .om-image-reference-body button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #b4232d !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.35) !important;
  color: transparent !important;
  text-indent: 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 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;
  transform: translateY(-1px) !important;
}

/* Mobile needs more bottom clearance because the expanded tray stacks vertically. */
@media (max-width: 640px) {
  body.om-image-studio-route:has(.om-image-studio-composer-shell.has-image-references) {
    --om-image-studio-composer-clearance: 560px;
  }

  body.om-image-studio-route:has(.om-image-studio-composer-shell.has-image-references) .om-chat-messages,
  body.om-image-studio-route:has(.om-image-studio-composer-shell.has-image-references) .om-image-studio-messages {
    padding-bottom: max(560px, calc(var(--om-image-studio-composer-clearance, 560px) + 90px)) !important;
    scroll-padding-bottom: max(560px, calc(var(--om-image-studio-composer-clearance, 560px) + 90px)) !important;
  }
}