.job-panel,#job-panel{min-height:340px;contain:layout;max-width:100%;margin-top:24px;color:#24231f}
.gen-cost{display:inline-block;margin-inline-start:12px;font-size:.85rem;color:#6c665f;white-space:nowrap}
.job-steps{display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;margin:0 0 24px;padding:0;counter-reset:job-step}
.job-steps li{counter-increment:job-step;display:flex;align-items:center;gap:8px;color:#81796e;font-size:.85rem}
.job-steps li::before{content:counter(job-step);display:grid;place-items:center;width:26px;height:26px;border:1px solid #ddd8ce;border-radius:50%;font-variant-numeric:tabular-nums}
.job-steps .is-current{color:#ae4f32;font-weight:600}
.job-steps .is-current::before{border-color:#ae4f32;background:#f4e8e0}
.job-steps .is-complete::before{content:'✓';color:#44664b;border-color:#b8c9b7}
.job-message{margin:12px 0;line-height:1.6}
.job-link{display:inline-block;color:#ae4f32;text-underline-offset:4px;margin-top:12px}
.job-video{display:block;width:100%;max-height:540px;aspect-ratio:16/9;margin-top:20px;border-radius:12px;background:#24231f;object-fit:contain}
.job-retention{font-size:.8rem;color:#6c665f}
.job-edit{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px;padding-top:24px;border-top:1px solid #ddd8ce}
.job-edit label{flex-basis:100%;font-weight:600}
.job-edit textarea{box-sizing:border-box;flex-basis:100%;width:100%;min-height:90px;resize:vertical;border:1px solid #ccc5b9;border-radius:8px;padding:12px;background:#fffdf8;color:inherit;font:inherit}
.job-edit button,.job-retry{border:0;border-radius:8px;padding:12px 18px;background:#ae4f32;color:#fff;font:inherit;cursor:pointer}
#gen-form button:disabled,.job-edit button:disabled{opacity:.6;cursor:wait}
.job-edit textarea:focus-visible,.job-edit button:focus-visible,.job-retry:focus-visible,.job-link:focus-visible{outline:2px solid #ae4f32;outline-offset:4px}
@media(max-width:540px){.job-steps{gap:12px}.job-steps li{font-size:.75rem}.job-panel,#job-panel{min-height:360px}.gen-cost{margin-inline-start:8px}}
.reference-field{margin:18px 0;text-align:left}
.reference-field label{font-weight:600}
.reference-field p{font-size:.85rem;margin:6px 0}
.reference-picker{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:12px}
.reference-button{flex-shrink:0;cursor:pointer}
#reference-images:focus-visible + label{outline:3px solid var(--accent);outline-offset:4px}
#reference-images:disabled + label{opacity:.6;cursor:wait;transform:none}
#reference-status{min-width:0;max-width:100%;font-size:.85rem;color:var(--muted);overflow-wrap:anywhere}
#reference-list{list-style:none;padding:0;margin:10px 0}
#reference-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0;overflow-wrap:anywhere}
#reference-list button{flex-shrink:0;font:inherit;border:1px solid #ccc5b9;border-radius:6px;background:#fffdf8;padding:4px 10px;cursor:pointer}
#reference-error{color:#9c3025}

.thread-versions { display: grid; gap: 1.5rem; margin-block: 1.5rem; }
.thread-version { border: 1px solid var(--line, #444); border-radius: 12px; padding: 1.25rem; overflow-wrap: anywhere; }
.thread-version p { white-space: pre-wrap; }
.thread-version button { display: block; margin-block: 1rem; }
.job-edit select { padding: .75rem; max-width: 100%; font: inherit; }
.thread-chat { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--line, #ddd); border-radius: 12px; }
.thread-chat section + section { border-top: 1px solid #ddd; margin-top: 1rem; }
.thread-chat p { white-space: pre-wrap; overflow-wrap: anywhere; }
.job-edit [hidden] { display: none !important; }
.job-edit button + button { margin-inline-start: .5rem; }
.thread-version button { border: 1px solid #ccc5b9; border-radius: 8px; padding: 10px 16px; background: #fffdf8; color: inherit; font: inherit; cursor: pointer; }
.job-edit > div { width: 100%; }

.video-versions{display:flex;flex-wrap:wrap;gap:8px}.version-chip{display:inline-block;padding:4px 8px;border:1px solid var(--border, #d6d0c4);border-radius:6px;font-size:12px}
