/* Local feedback occupies the image slot. No document-wide overlay or layout changes. */
:where([data-media-frame]) { position:relative; isolation:isolate; }
.media-feedback { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:12px; overflow:hidden; border-radius:inherit; background:var(--color-surface-2,#f1f3f5); color:var(--muted,#64748b); pointer-events:none; }
.media-feedback[hidden] { display:none!important; }
.media-feedback::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.48) 45%,transparent 70%); transform:translateX(-100%); animation:media-sheen 1.8s ease-in-out infinite; animation-play-state:paused; }
.media-feedback-ring { width:28px; height:28px; box-sizing:border-box; border:2px solid rgba(255,107,0,.15); border-top-color:var(--color-brand,#ff6b00); border-radius:50%; animation:media-spin .85s linear infinite; animation-play-state:paused; }
.media-in-view .media-feedback-ring,.media-in-view .media-feedback::before { animation-play-state:running; }
.media-feedback-label { position:relative; max-width:100%; font-size:11px; line-height:1.5; font-weight:400; text-align:center; overflow-wrap:anywhere; }
.media-feedback-error { display:none; }
[data-media-state="loading"] > img { opacity:0; }
[data-media-state="processing"] > img,[data-media-state="uploading"] > img { opacity:.2; }
[data-media-state="error"] > img { opacity:0; }
[data-media-state="error"] > .media-feedback::before,[data-media-state="error"] > .media-feedback > .media-feedback-ring { display:none; }
[data-media-state="error"] > .media-feedback > .media-feedback-error { display:block; line-height:0; }
.media-feedback-error .icon { width:28px; height:28px; }
[data-media-compact] > .media-feedback { padding:5px; gap:0; }
[data-media-compact] > .media-feedback > .media-feedback-label { display:none; }
[data-media-compact] > .media-feedback > .media-feedback-ring { width:18px; height:18px; }
[data-media-compact] > .media-feedback > .media-feedback-error .icon { width:20px; height:20px; }
[data-media-submitting] button[type="submit"], [data-media-submitting] [data-upload-reset], [data-media-submitting] [data-pick], [data-media-submitting] [data-preview-clear] { pointer-events:none; opacity:.65; }
html[data-theme="dark"] .media-feedback { background:var(--color-surface-2,#202838); color:var(--muted,#a7b0c0); }
html[data-theme="dark"] .media-feedback::before { background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.05) 45%,transparent 70%); }
body.media-page-hidden .media-feedback-ring,body.media-page-hidden .media-feedback::before { animation-play-state:paused; }
@keyframes media-spin { to { transform:rotate(360deg); } }
@keyframes media-sheen { to { transform:translateX(100%); } }
@media(prefers-reduced-motion:reduce) { .media-feedback-ring,.media-feedback::before { animation:none!important; } .media-feedback::before { display:none; } }

.media-upload-status { margin:12px 0 0; color:var(--muted,#64748b); font-size:12px; line-height:1.6; }
.media-upload-status[hidden] { display:none!important; }