/* =================================================================
   Shared "small preview before uploading" component — used by every
   <input type="file"> site-wide (feed/community composers, blog, forum,
   downloads, gallery, mail, comments, profile, community edit, admin).
   See assets/file-preview.js.
   ================================================================= */
.upload-preview { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.upload-preview[hidden] { display: none; }
.fcp-chip {
    position: relative; width: 46px; height: 46px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
    background: var(--paper); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}
.fcp-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcp-chip.fcp-file i { font-size: 1.1rem; color: var(--indigo); }
.fcp-remove {
    position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--surface); background: var(--danger); color: #fff; font-size: .55rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.fcp-remove .icon-ui { color: #fff; }
.fcp-remove:hover { background: #b7394d; }

@media (max-width: 640px) {
    .fcp-chip { width: 40px; height: 40px; }
}