.ai-reference-image-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; white-space: normal; }
.ai-reference-image-thumb { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; padding: 0; overflow: hidden; border: 1px solid #ccd8e8; border-radius: 9px; background: #f1f5fa; cursor: zoom-in; flex: 0 0 62px; }
.ai-reference-image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-reference-image-thumb:focus-visible { outline: 3px solid #3182ce; outline-offset: 2px; }
.ai-reference-image-thumb.is-unavailable { padding: 4px; color: #64748b; font-size: 11px; white-space: normal; cursor: default; }
.ai-reference-image-missing { display: block; margin-top: 8px; color: #64748b; font-size: 12px; white-space: normal; }
.ai-reference-image-dialog { margin: auto; padding: 48px 16px 16px; width: min(900px, 92vw); max-width: 92vw; max-height: 90dvh; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 12px 50px #0005; }
.ai-reference-image-dialog::backdrop { background: #0f172acc; }
.ai-reference-image-dialog > img { display: block; margin: auto; width: auto; height: auto; max-width: 100%; max-height: calc(90dvh - 64px); object-fit: contain; }
.ai-reference-image-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #334155; font-size: 28px; cursor: pointer; }