/* 聊天页面图片预览样式 - 只影响 .markdown-body 内的图片 */
/* 重要：所有样式都限制在 .markdown-body 内，不会影响其他页面 */

/* 修复长图显示问题 - 让图片按原始尺寸显示 */
.markdown-body {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* 只针对聊天内容中的图片 */
.markdown-body img {
  max-width: 100% !important;
  max-height: none !important;
  min-width: auto !important;
  min-height: auto !important;
  height: auto !important;
  width: auto !important;
  cursor: pointer !important;
  display: block !important;
  margin: 10px auto !important;
  object-fit: contain !important;
  position: relative !important;
}

/* 强制覆盖内联样式 */
.markdown-body img[style*="max-height"],
.markdown-body img[style*="max-width"] {
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  width: auto !important;
}

/* 确保所有类型的图片都可以完整显示 */
.markdown-body img[src*="http"],
.markdown-body img[src*="https"],
.markdown-body img[src*="data:"],
.markdown-body img[src*="puppeteer-static"],
.markdown-body img[src*="screenshot"] {
  max-width: 100% !important;
  max-height: none !important;
  min-height: auto !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
}

/* 确保图片父容器不限制高度和宽度 */
.markdown-body p,
.markdown-body div,
.markdown-body > * {
  max-height: none !important;
  max-width: 100% !important;
}

/* 如果图片在特定的容器中，也要突破限制 */
.markdown-body p:has(img),
.markdown-body div:has(img) {
  max-width: 100% !important;
  overflow: visible !important;
}

/* 图片预览遮罩层样式 */
.image-preview-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.9) !important;
  z-index: 99999 !important;
  overflow: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: default !important;
}