.document-file-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--se-border); border-radius: 1rem; background: var(--se-surface-strong); margin-block: .65rem; }
.document-file-icon, .document-preview-mark { display: grid; place-items: center; flex: 0 0 2.8rem; height: 3rem; border-radius: .8rem; color: var(--se-primary); background: var(--se-bg-soft); font-size: 1.5rem; }
.document-file-info { flex: 1; min-width: 0; }
.document-file-name { color: var(--se-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.document-file-name:hover { color: var(--se-primary); text-decoration: underline; }
.document-file-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; color: var(--se-muted); font-size: .78rem; }
.document-file-variant { display: inline-block; padding: .18rem .55rem; border-radius: 2rem; background: var(--se-bg-soft); color: var(--se-primary); font-size: .75rem; font-weight: 500; }
.document-file-actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.document-file-actions .btn, .document-preview .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap; }
.document-local-files { margin-top: .75rem; }
html:has(.document-preview[open]) { overflow: hidden; }
.document-preview { --preview-paper-bg: #e9eef4; width: min(1440px, 96vw); height: 94vh; height: 94dvh; max-width: 100vw; max-height: 100dvh; padding: 0; border: 1px solid var(--se-border); border-radius: 1.25rem; background: var(--se-surface-strong); color: var(--se-text); box-shadow: 0 32px 100px #0b20395c; overflow: hidden; }
.document-preview::backdrop { background: #0b2039b3; backdrop-filter: blur(5px); }
.document-preview[open] { animation: document-preview-enter .16s ease-out; }
.document-preview[hidden], .document-preview [hidden] { display: none !important; }
.document-preview.is-expanded { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
.document-preview-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.document-preview-header { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.25rem; background: var(--se-surface-strong); border-bottom: 1px solid var(--se-border); flex-shrink: 0; }
.document-preview-heading { flex: 1; min-width: 0; }
.document-preview-heading h2 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.document-preview-heading p { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--se-muted); font-size: .75rem; }
.document-preview-header-actions { display: flex; align-items: center; gap: .5rem; }
.document-preview-icon { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; border: 1px solid transparent; border-radius: .6rem; background: transparent; color: var(--se-text); padding: .4rem; cursor: pointer; flex-shrink: 0; }
.document-preview-icon:hover { background: var(--se-bg-soft); color: var(--se-primary); }
.document-preview-icon:disabled { opacity: .35; cursor: default; }
.document-preview :focus-visible, .document-file-card :focus-visible { outline: 3px solid var(--se-primary); outline-offset: 3px; }
.document-preview-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: .65rem 1.25rem; border-bottom: 1px solid var(--se-border); background: var(--se-bg-soft); flex-shrink: 0; }
.document-preview-files { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 10rem; max-width: 24rem; }
.document-preview-files select { min-width: 0; text-overflow: ellipsis; }
.document-preview-pages, .document-preview-zoom { display: flex; align-items: center; gap: .4rem; font-size: .82rem; }
.document-preview-pages input { width: 3.5rem; text-align: center; padding-inline: .25rem; appearance: textfield; }
.document-preview-pages input::-webkit-inner-spin-button { appearance: none; }
.document-preview-zoom { margin-left: auto; }
.document-preview-zoom output { min-width: 3.3rem; text-align: center; font-variant-numeric: tabular-nums; }
.document-preview-viewport { flex: 1; min-height: 0; overflow: auto; background: var(--preview-paper-bg); overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; position: relative; }
.document-preview-content { min-width: 100%; width: max-content; padding: 1.5rem; }
.document-preview-page { position: relative; margin: 0 auto; background: white; box-shadow: 0 3px 20px #12324c24; }
.document-preview-page canvas, .document-preview-page img { display: block; max-width: none; }
.document-preview-status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 100%; padding: 2rem; text-align: center; color: var(--se-muted); }
.document-preview-status p { max-width: 32rem; margin: 0; line-height: 1.8; }
.document-preview-footer { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 1.25rem; font-size: .72rem; color: var(--se-muted); border-top: 1px solid var(--se-border); flex-shrink: 0; }
.document-preview a[aria-disabled="true"] { pointer-events: none; opacity: .5; }
/* Text selection overlay, matching PDF.js TextLayer geometry (Apache-2.0). */
.document-preview .textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; text-align: initial; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 1; }
.document-preview .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; }
.document-preview .textLayer { --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); letter-spacing: normal; word-spacing: normal; }
.document-preview .textLayer > :not(.markedContent), .document-preview .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; --scale-x: 1; --rotate: 0deg; font-size: calc(var(--text-scale-factor) * var(--font-height)); transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.document-preview .textLayer .markedContent { display: contents; }
.document-preview .textLayer span[role="img"] { user-select: none; cursor: default; }
.document-preview .textLayer ::selection { background: #0b63c655; }
@keyframes document-preview-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .document-preview[open] { animation: none; } }
@media (max-width: 767.98px) {
    .document-preview { width: 100vw; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
    .document-preview-header { flex-wrap: wrap; padding: .85rem; gap: .65rem; }
    .document-preview-mark { display: none; }
    .document-preview-heading { flex-basis: calc(100% - 3.5rem); }
    .document-preview-header-actions { display: contents; }
    #documentPreviewClose { position: absolute; top: .85rem; right: .65rem; }
    #documentPreviewDownload { min-height: 2.75rem; font-size: .85rem; }
    #documentPreviewExpand { display: none; }
    .document-preview-toolbar { padding: .5rem .65rem; gap: .4rem; }
    .document-preview-files { max-width: none; flex-basis: 100%; }
    .document-preview-zoom { flex-wrap: wrap; justify-content: flex-end; }
    .document-preview-icon { min-width: 2.75rem; height: 2.75rem; }
    .document-preview-pages, .document-preview-zoom { gap: .15rem; }
    #documentPreviewFit { min-height: 2.75rem; }
    #documentPreviewFit span { display: none; }
    .document-preview-content { padding: .75rem; }
    .document-preview-footer { padding: .4rem .75rem max(.4rem, env(safe-area-inset-bottom)); }
    .document-preview-close-hint { display: none; }
    .document-file-card { flex-wrap: wrap; gap: .75rem; padding: .85rem; }
    .document-file-card > .document-file-actions { width: 100%; }
    .document-file-card .document-file-actions .btn { flex: 1; min-height: 2.75rem; }
}