.has-file-preview { overflow: hidden; }
.file-preview[hidden] { display: none !important; }
.file-preview { position: fixed; z-index: 220; inset: 0; display: grid; padding: 24px; place-items: center; background: rgba(13,22,17,.76); backdrop-filter: blur(6px); }
.file-preview__dialog { display: grid; width: min(1040px, 100%); max-height: calc(100dvh - 48px); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: #fff; box-shadow: 0 32px 110px rgba(4,13,8,.42); }
.file-preview__dialog > header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.file-preview__dialog h2 { max-width: min(760px, 76vw); margin: 4px 0 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.file-preview__dialog header small { color: var(--muted); font-size: 11px; }
.file-preview__close { display: grid; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); font-size: 24px; line-height: 1; }
.file-preview__close:hover { color: var(--ink); background: var(--surface-2); }
.file-preview__stage { display: grid; min-height: 320px; overflow: auto; place-items: center; padding: 22px; background: #eef0eb; }
.file-preview__stage img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 210px); border-radius: 6px; background: #fff; box-shadow: 0 10px 38px rgba(20,31,24,.16); object-fit: contain; }
.file-preview__loading, .file-preview__error { display: grid; justify-items: center; gap: 12px; color: var(--muted); text-align: center; }
.file-preview__loading i { width: 30px; height: 30px; border: 3px solid #d8dfda; border-top-color: var(--brand); border-radius: 50%; animation: file-preview-spin .7s linear infinite; }
.file-preview__error strong { color: var(--ink); font-size: 16px; }.file-preview__error p{margin:0;font-size:13px}
.file-preview__dialog > footer { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.file-preview__dialog > footer span { color: var(--muted); font-size: 11px; line-height: 1.6; }
.file-preview-trigger { max-width: 100%; padding: 4px 6px; overflow-wrap: anywhere; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb,var(--brand-2) 30%,transparent); text-underline-offset: 3px; }
.file-download-link { display: inline-block; padding: 4px 6px; overflow-wrap: anywhere; }
.file-link-unavailable { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
@keyframes file-preview-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .file-preview { padding: 10px; }
  .file-preview__dialog { max-height: calc(100dvh - 20px); border-radius: 14px; }
  .file-preview__dialog > header { min-height: 66px; padding: 13px 14px; }
  .file-preview__stage { min-height: 250px; padding: 10px; }
  .file-preview__stage img { max-height: calc(100dvh - 175px); }
  .file-preview__dialog > footer { min-height: 56px; padding: 10px 14px; }
  .file-preview__dialog > footer span { display: none; }
  .file-preview__dialog > footer .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .file-preview__loading i { animation-duration: 1.8s; } }