/* file-preview popup - themed to match index.css / the main site.
 * The --*-color vars are defined in index.css, which loads before this file. */

#file-preview {
    position: fixed;
    max-width: 400px;
    max-height: 1000px;
    border: 1px solid var(--border-color, #e0e0e0);
    background-color: var(--surface-color, #f5f5f7);
    padding: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: none;
    transition: width 0.2s ease, height 0.2s ease, transform 0.05s ease;
    z-index: 9999;
}

#file-preview iframe,
#file-preview img,
#file-preview video,
#file-preview audio {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#file-preview iframe {
    width: 100%;
    height: 100%;
    max-height: 500px;
    border: none;
}

/* no prefers-color-scheme block needed here: the colours now come from the
 * light-dark() vars in index.css, which already adapt to the scheme */

@media (max-width: 1650px) {
    #file-preview {
        opacity: 0;
    }
}