.document-preview { width: min(960px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 20px; overflow: auto; border: 1px solid #dfd0ef; border-radius: 20px; background: #fff; color: #302348; box-shadow: 0 24px 80px #17052f66; }
.document-preview::backdrop { background: #18072cbf; backdrop-filter: blur(4px); }
.document-preview__header { position: sticky; top: -20px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; background: #fff; }
.document-preview__header h2 { margin: 0; font: 600 1rem/1.6 "Prompt", system-ui, sans-serif; overflow-wrap: anywhere; }
.document-preview__close { flex: 0 0 auto; padding: 10px 16px; border: 1px solid #b69bce; border-radius: 12px; background: #f3eafa; color: #542881; font: 500 .9rem/1.6 "Prompt", system-ui, sans-serif; cursor: pointer; }
.document-preview__close:focus-visible { outline: 3px solid #7b45b1; outline-offset: 3px; }
.document-preview__image { display: block; width: auto; max-width: 100%; height: auto; margin: 16px auto 0; }
.document-preview [role="alert"] { color: #ab293c; }
.document-preview [hidden] { display: none !important; }
@media (max-width: 560px) { .document-preview { padding: 12px; border-radius: 14px; } .document-preview__header { top: -12px; gap: 8px; } .document-preview__close { padding: 8px 10px; font-size: .8rem; } }