/* Background editor and the shared lower band; composer and selector retain their own styling. */
body.background-band-enabled::after,#backgroundPreview::after{content:"";position:absolute;left:0;right:0;bottom:0;height:128px;--background-band-transition:96px;pointer-events:none;background-color:var(--background-band-color);opacity:var(--background-band-opacity);-webkit-mask-image:linear-gradient(to bottom,transparent,black var(--background-band-transition),black);mask-image:linear-gradient(to bottom,transparent,black var(--background-band-transition),black)}
body.background-band-enabled::after{--background-band-transition:var(--background-band-field-transition,96px);position:fixed;height:var(--background-band-height,180px);bottom:var(--background-band-bottom,0px);z-index:0}
body.background-band-enabled.background-band-over-chat::after,#backgroundPreview.background-band-over-chat::after{z-index:2}
#backgroundEditor{border:1px solid #bbb;border-radius:14px;padding:20px;width:min(440px,94vw);max-height:90dvh;overflow:auto;color:#202624;background:#f5f4ef}
#backgroundEditor::backdrop{background:rgba(0,0,0,.45)}
#backgroundForm{display:grid;gap:12px}
#backgroundForm h2{margin:0;font-size:1.2rem}
#backgroundForm label{display:grid;gap:5px}
#backgroundForm input,#backgroundForm select{max-width:100%;min-height:32px}
#backgroundBandTransparency{width:100%}
#backgroundForm .background-color-control{position:relative;display:block;width:40px;height:40px}
#backgroundForm .background-color-swatch{display:block;width:100%;height:100%;box-sizing:border-box;border:1px solid #777;border-radius:3px}
#backgroundForm .background-color-control input[type=color]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
#backgroundForm .background-color-control:focus-within .background-color-swatch{outline:2px solid #236ac3;outline-offset:2px}
#backgroundForm fieldset{border:1px solid #bbb;border-radius:8px;padding:12px;display:grid;gap:12px}
#backgroundForm fieldset[hidden]{display:none}
#backgroundForm .background-section{border-color:#c8cbc5;background:#fff;border-radius:10px}
#backgroundForm .background-section legend{padding:0 6px;font-weight:650;color:#39443f}
.background-actions{display:flex;gap:10px;flex-wrap:wrap}
#backgroundPreview{height:160px;isolation:isolate;position:relative;overflow:hidden;border-radius:8px}
#backgroundPreview canvas{width:110%;height:110%;animation:star-drift 15s ease-in-out infinite}
#backgroundPreview span{position:absolute;z-index:1;bottom:8px;left:8px;background:#f5f4ef;color:#202624;padding:3px 8px;border-radius:5px}
#backgroundError{margin:0;font-size:.9rem}
body .space-stars.background-motion-stopped,body .space-stars-near.background-motion-stopped{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#backgroundPreview canvas{animation:none}}