.aoImageResults { width: 100%; min-width: 0; margin: 16px 0; color: inherit; container-type: inline-size; }
.aoImageGallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; align-items: start; }
.aoImageTile { position: relative; min-width: 0; }
.aoImageResults .aoImageOpen { display: block; width: 100%; aspect-ratio: 1; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: zoom-in; }
.aoImageOpen img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aoMediaFrame { position: relative; display: block; width: 100%; min-width: 0; overflow: hidden; background: #f7f6f9; }
.aoMediaFrame > img, .aoMediaFrame > video { display: block; width: 100%; height: 100%; object-fit: contain; }
.aoMediaFrame.video { min-height: 180px; background: #eeedf1; }
.aoMediaFrame .aoImageOpen { height: 100%; aspect-ratio: auto; }
.aoImageResults .aoMediaFrame { border-radius: 12px; }
.aoMediaFrame.aoLongImage { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.aoMediaFrame.aoLongImage .aoImageOpen, .aoChatImage.aoLongImage > a { height: auto; min-height: 100%; }
.aoMediaFrame.aoLongImage img { width: 100%; height: auto; object-fit: contain; }
.aoMediaFrame.aoLongImage::after { content: '长图 · 滚动查看'; position: sticky; display: block; bottom: 8px; width: max-content; margin: -30px auto 8px; padding: 4px 10px; border-radius: 20px; background: #ffffffed; color: #65606e; font-size: 11px; pointer-events: none; box-shadow: 0 1px 8px #25212d12; }
.aoMediaFrame[data-media-state="loading"]::before, .aoMediaFrame[data-media-state="slow"]::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 15%, #ffffff90 45%, transparent 75%); transform: translateX(-100%); animation: aoMediaShimmer 1.8s ease-in-out infinite; }
.aoMediaFrame:not([data-media-state="ready"]) > img, .aoMediaFrame:not([data-media-state="ready"]) > video, .aoMediaFrame:not([data-media-state="ready"]) .aoImageOpen img { opacity: 0; }
.aoMediaStatus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 12px; color: #777181; font-size: 13px; text-align: center; pointer-events: none; }
.aoMediaStatus.failed { background: #f7f6f9; color: #a64b4b; }
.aoMediaStatus button { pointer-events: auto; border: 1px solid #ddd8e7; border-radius: 6px; padding: 6px 12px; background: white; color: #594775; cursor: pointer; font: inherit; }
.aoChatImage { display: inline-block; width: 200px; max-width: 100%; aspect-ratio: 1; vertical-align: top; }
.aoChatImageItem { display: inline-block; width: 200px; max-width: 100%; vertical-align: top; }
.aoChatImageItem .aoChatImage { width: 100%; }
.aoChatImageError { display: block; color: #a64b4b; font-size: 12px; }
.aoChatImageError:empty { display: none; }
.aoChatImage > a, .aoChatImage > a > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aoChatImage:not([data-media-state="ready"]) > a > img { opacity: 0; }
.aoChatImage [hidden] { display: none !important; }
@keyframes aoMediaShimmer { to { transform: translateX(100%); } }
.aoImagePlaceholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 1; padding: 16px; box-sizing: border-box; background: #f7f6f9; color: #777181; text-align: center; font-size: 13px; line-height: 1.5; }
.aoImageTile.stopped .aoImagePlaceholder { color: #8e5656; background: #fbf7f7; }
.aoImageSpinner { width: 22px; height: 22px; border: 2px solid #e3dfed; border-top-color: #8974b9; border-radius: 50%; animation: aoImageSpin 1s linear infinite; }
.aoImageNotice { margin: 10px 0; font-size: 13px; line-height: 1.7; color: #797580; white-space: pre-wrap; }
.aoImageNotice[role="alert"] { color: #a64b4b; }
.aoSuiteResumeMissing { align-items: center; background: #f7f4ff; border: 1px solid #e6ddff; border-radius: 12px; display: flex; gap: 12px; justify-content: space-between; margin: 12px 0; padding: 12px 14px; }
.aoSuiteResumeMissing span { color: #62577a; font-size: 13px; }
.aoSuiteResumeMissing button { background: #6d28d9; border: 0; border-radius: 9px; color: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; min-height: 36px; padding: 0 14px; }
.aoSuiteResumeMissing button:disabled { cursor: default; opacity: .55; }
.aoImageActions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding-top: 8px; opacity: 1; }
.aoImageTile:hover .aoImageActions, .aoImageTile:focus-within .aoImageActions { opacity: 1; }
.aoImageActions button, .aoImageActions a { border: 1px solid #e6e3e9; border-radius: 6px; padding: 5px 8px; background: rgba(255,255,255,.96); color: #343138; font: inherit; font-size: 12px; line-height: 1.4; text-decoration: none; cursor: pointer; }
.aoImageResults button:focus-visible, .aoImageResults a:focus-visible { outline: 2px solid #8974b9; outline-offset: 3px; }
body.aoImagePreviewOpen { --ao-preview-width: min(42vw, 600px); }
.aoImagePreview { position: fixed; z-index: 10000; top: 12px; right: 12px; bottom: 12px; width: var(--ao-preview-width); display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; border: 1px solid #e8e5ed; border-radius: 20px; background: #fff; color: #29262f; box-shadow: -10px 8px 40px #26213016; font-family: inherit; }
.aoImagePreviewHeader { display: flex; align-items: center; gap: 16px; padding: 20px 20px 14px; }
.aoImagePreviewHeader > div { flex: 1; min-width: 0; display: grid; gap: 5px; }
.aoImagePreviewHeader strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aoImagePreviewHeader span { font-size: 12px; color: #8a8493; }
.aoImagePreview button { border: 1px solid #e9e6ee; border-radius: 9px; padding: 8px 13px; font: inherit; font-size: 13px; background: #fff; color: #494251; cursor: pointer; }
.aoImagePreview button:hover { background: #f6f4fa; }
.aoImagePreview button:disabled { opacity: .4; cursor: default; }
.aoImagePreview button:focus-visible, .aoImagePreviewViewport:focus-visible { outline: 2px solid #8874b0; outline-offset: 2px; }
.aoImagePreviewHeader > button { font-size: 23px; line-height: 24px; border: 0; padding: 5px 9px; background: #f6f5f8; }
.aoImagePreviewToolbar { display: flex; align-items: center; gap: 8px; padding: 0 20px 14px; font-size: 12px; color: #79717f; }
.aoImagePreviewToolbar > button:last-child { margin-left: auto; }
.aoImagePreviewTopActions { position: relative; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.aoImagePreview .aoImagePreviewRefine { background: #292929; color: #fff; border-color: #292929; white-space: nowrap; }
.aoImagePreview .aoImagePreviewRefine:hover { background: #424242; border-color: #424242; }
.aoImagePreviewRefineTip { position: absolute; z-index: 2; bottom: calc(100% + 8px); right: 88px; width: min(280px, calc(var(--ao-preview-width) - 48px)); box-sizing: border-box; padding: 8px 30px 8px 12px; border: 1px solid #e5e3e8; border-radius: 9px; background: #fff; color: #343138; box-shadow: 0 4px 16px #29262f14; }
.aoImagePreviewRefineTip::before { content: ''; position: absolute; bottom: -5px; right: 36px; width: 8px; height: 8px; transform: rotate(45deg); background: #fff; border-bottom: 1px solid #e5e3e8; border-right: 1px solid #e5e3e8; }
.aoImagePreviewRefineTip p { margin: 0; font-size: 12px; line-height: 1.5; color: #706b76; }
.aoImagePreview .aoImagePreviewRefineTipClose { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #8a8493; font-size: 18px; }
.aoImagePreviewViewport { flex: 1; min-height: 0; margin: 0 14px; padding: 10px; overflow: auto; overscroll-behavior: contain; scroll-behavior: auto; background: #f5f4f7; border-radius: 12px; scrollbar-width: thin; }
.aoImagePreviewViewport img { display: block; width: 100%; max-width: none; height: auto; margin: auto; }
.aoImagePreviewViewport img[role="button"] { cursor: zoom-in; }
.aoImagePreviewViewport.isFit { display: flex; }
.aoImagePreviewViewport.isFit img { width: 100%; height: 100%; object-fit: contain; }
.aoImagePreviewStatus { min-height: 18px; padding: 7px 20px 0; font-size: 12px; color: #84788f; text-align: center; }
.aoImagePreviewStatus > button { margin-left: 8px; }
.aoImagePreviewReadingBar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 25px; padding: 7px 20px 0; }
.aoImagePreviewReadingBar .aoImagePreviewStatus { padding: 0; min-height: 0; }
.aoImagePreview .aoImagePreviewScrollControl { padding: 3px 9px; font-size: 11px; border-radius: 16px; color: #666; background: #fafafa; border-color: #e8e8e8; white-space: nowrap; }
.aoImagePreviewScrollControl[hidden] { display: none; }
.aoImagePreviewFooter { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; }
.aoImagePreviewFooter button { min-width: 90px; }
.aoImagePreviewFooter button:last-child { color: #fff; background: #766092; border-color: #766092; }
body.aoImageLightboxOpen { overflow: hidden; }
.aoImageLightbox { position: fixed; z-index: 11000; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; box-sizing: border-box; padding: 18px 24px 14px; background: rgba(18, 18, 22, .94); color: #fff; font-family: inherit; }
.aoImageLightboxHeader { display: flex; align-items: center; gap: 18px; min-height: 48px; }
.aoImageLightboxHeader > div { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.aoImageLightboxHeader strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.aoImageLightboxHeader span { color: #c7c4cd; font-size: 12px; white-space: nowrap; }
.aoImageLightbox button { min-width: 38px; min-height: 36px; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; padding: 7px 12px; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font: inherit; font-size: 13px; }
.aoImageLightbox button:hover { background: rgba(255,255,255,.18); }
.aoImageLightbox button:disabled { cursor: default; opacity: .35; }
.aoImageLightbox button:focus-visible, .aoImageLightboxViewport:focus-visible { outline: 2px solid #c4a9ff; outline-offset: 2px; }
.aoImageLightboxHeader > button { margin-left: auto; border: 0; background: rgba(255,255,255,.12); font-size: 25px; line-height: 24px; }
.aoImageLightboxToolbar { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 4px 0 12px; color: #d8d5dd; font-size: 12px; }
.aoImageLightboxToolbar > span { min-width: 48px; text-align: center; }
.aoImageLightboxToolbar button:nth-last-child(1) { min-width: 88px; }
.aoImageLightboxViewport { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; border-radius: 10px; background: #0d0d10; cursor: grab; scrollbar-color: #706d75 #26262b; touch-action: none; }
.aoImageLightboxViewport.isDragging { cursor: grabbing; user-select: none; }
.aoImageLightboxCanvas { position: relative; min-width: 100%; min-height: 100%; }
.aoImageLightboxCanvas img { position: absolute; top: 50%; left: 50%; display: block; max-width: none; max-height: none; transform: translate(-50%, -50%); user-select: none; }
.aoImageLightboxStatus { min-height: 18px; padding: 8px 8px 0; color: #c7c4cd; font-size: 12px; text-align: center; }
.aoImageLightboxStatus > button { margin-left: 8px; }
@media (min-width: 1100px) {
  body.aoImagePreviewOpen .pageContent.toolMain { margin-right: calc(var(--ao-preview-width) + 24px); }
  body.aoImagePreviewOpen .unifiedCreatorConversationSurface { left: 0 !important; right: 0 !important; width: 100% !important; margin-inline: 0 !important; padding: 24px 18px !important; box-sizing: border-box; }
  body.aoImagePreviewOpen .inlineCreativeAgentConversation { padding: 0 !important; }
  body.aoImagePreviewOpen .exactPromptToolbar { left: 14px !important; right: 14px !important; width: auto !important; bottom: 12px !important; min-height: 48px; }
  body.aoImagePreviewOpen .exactPromptPills { max-width: calc(100% - 60px); overflow-x: auto; scrollbar-width: thin; }
  body.aoImagePreviewOpen .exactPromptToolbar .exactGenerateButton { right: 0 !important; bottom: 0 !important; top: auto !important; }
}
@media (max-width: 700px) {
  body.aoImagePreviewOpen { --ao-preview-width: calc(100vw - 16px); }
  .aoImagePreview { inset: 8px 8px 8px auto; border-radius: 14px; }
  .aoImagePreviewToolbar { gap: 6px; padding-inline: 14px; }
  .aoImagePreviewToolbar button { padding: 8px 9px; font-size: 12px; }
  .aoImagePreviewTopActions { gap: 6px; }
  .aoImagePreviewRefineTip { right: 0; }
  .aoImagePreviewRefineTip::before { right: 104px; }
  .aoImageLightbox { padding: 8px; }
  .aoImageLightboxHeader { min-height: 42px; }
  .aoImageLightboxHeader > div { display: grid; gap: 2px; }
  .aoImageLightboxToolbar { justify-content: flex-start; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin; }
  .aoImageLightboxToolbar button { flex: 0 0 auto; }
  .aoImageLightboxToolbar > span { flex: 0 0 auto; }
}
@container (max-width: 600px) { .aoImageGallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@keyframes aoImageSpin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .aoImageGallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 700px) { .aoSuiteResumeMissing { align-items: stretch; flex-direction: column; } }
@media (hover: none) { .aoImageActions { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aoImageSpinner, .aoMediaFrame::before { animation: none !important; } .aoImageActions { transition: none; } }