/* Preserve the existing result-fit behavior for non-image tools. */
.ai-page .process-result.live-result:has(> img){grid-template-columns:minmax(0,1fr)!important;min-width:0!important}
.ai-page .process-result.live-result>img{display:block!important;min-width:0!important;width:auto!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;margin:12px auto 0!important}

/* Image generation only: keep even a single result at thumbnail size. */
.ai-page .process-result.live-result.image-result{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:start!important;
  min-width:0!important;
}
.ai-page .process-result.live-result.image-result>strong,
.ai-page .process-result.live-result.image-result>p{
  grid-column:1/-1!important;
  min-width:0;
  overflow-wrap:anywhere;
}
.ai-page .process-result.live-result.image-result>img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:1/1;
  min-width:0!important;
  margin:0!important;
  object-fit:contain!important;
  cursor:zoom-in!important;
  border-radius:8px;
  background:#f7f9fc;
}

/* Scope the large preview so unrelated modals are unchanged. */
.local-modal:has(.qh-result-image-modal) .local-modal-panel{
  display:flex;
  flex-direction:column;
  width:min(92vw,960px);
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
}
.local-modal:has(.qh-result-image-modal) .local-modal-panel>main{
  min-width:0;
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
}
.local-modal:has(.qh-result-image-modal) .local-modal-panel>header,
.local-modal:has(.qh-result-image-modal) .local-modal-panel>footer{flex:0 0 auto}
.qh-result-image-modal{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
}
.qh-result-image-modal img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100vh - 220px);
  max-height:calc(100dvh - 220px);
  object-fit:contain;
  border-radius:8px;
}
@media(max-width:640px){
  .ai-page .process-result.live-result.image-result{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:420px){
  .ai-page .process-result.live-result.image-result{grid-template-columns:minmax(0,1fr)!important}
}