fix

frontend/src/styles.css

@@ -2910,6 +2910,12 @@ button.danger:hover:not([disabled]) {
   flex-shrink: 0;
 }
 
+.preview-stack--empty {
+  width: 100%;
+  min-height: 420px;
+  flex-shrink: 0;
+}
+
 .preview-stack__item {
   position: absolute;
   top: 50%;
@@ -2963,6 +2969,40 @@ button.danger:hover:not([disabled]) {
     0 6px 18px var(--accent-elevated-strong);
 }
 
+.preview-pane__unsupported {
+  width: 100%;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  align-items: center;
+  text-align: center;
+  padding: 1.5rem;
+  border-radius: 8px;
+  background: var(--surface-subtle);
+  color: var(--fg);
+}
+
+.preview-pane__unsupported-message {
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+.preview-pane__unsupported-filename {
+  font-size: 0.85rem;
+  color: var(--muted);
+  word-break: break-word;
+}
+
+.preview-pane__unsupported-download {
+  font-weight: 600;
+}
+
+.preview-pane__unsupported-download svg {
+  width: 1rem;
+  height: 1rem;
+}
+
 .preview-pane--stack {
   min-height: 460px;
   position: relative;