/* ══════ MEDIA GENERATION (media.js / media-comfyui.js) ══════ */
.gen-queue-badge { cursor:pointer; flex-shrink:0; color:var(--accent2); background:color-mix(in srgb,var(--accent2) 14%,transparent); }
.gen-queue-badge:hover { background:color-mix(in srgb,var(--accent2) 24%,transparent); }

.gen-media { margin: 1em; display: inline-block; max-width: 450px; position: relative; }
.gen-media > div:not(:first-child) {width:0;min-width:100%;}
.gen-loading,.gen-pending,.gen-error,.gen-idle { display:flex; align-items:center; gap:.55rem; padding:.6rem .8rem;
  border:1px dashed var(--border); border-radius:4px; font-size:12.5px; color:var(--text2); background:rgba(0,0,0,.04); flex-wrap:wrap; }
.gen-error { color:#e44; flex-wrap:wrap; }
.gen-media img,.gen-media video { max-width:100%; max-height:440px; display:block; }
.gen-cap { font-size:11px; font-style:italic; }
.gen-info .gen-cap { margin-bottom:.25rem; }
.gen-bar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.3rem; }
.gen-params { display:flex; gap:.3rem; flex-wrap:wrap; }
.gen-param { font-family:var(--font-mono,monospace); font-size:10px; padding:.1rem .4rem; border-radius:4px;
  background:var(--bg3); color:var(--text2); border:1px solid var(--border); }
.gen-param--auto { border-style:dashed; font-style:italic; opacity:.75; }
.gen-saved-badge { font-size:10.5px; color:var(--accent); font-weight:600; }
.gen-info { display:none; margin-top:.35rem; padding:.35rem .5rem; border-radius:3px; background:var(--bg3); border:1px solid var(--border); }
.gen-info--open { display:block; position: absolute; top: 0; z-index: 1;}
.gen-info-toggle { font-size:11px; font-weight:700; min-width:1.5rem; opacity:.6; }
.gen-info-toggle:hover { opacity:1; }
.img-overlay { position:fixed; inset:0; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; z-index:2000; cursor:zoom-out; }
.img-overlay img { max-width:92vw; max-height:92vh; border-radius:4px; object-fit:contain; cursor:zoom-out; }
.gen-idle .gen-cap { font-style:normal; color:var(--text2); margin:0; flex:1; min-width:0; }
.spinner { width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--accent2); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }