/* Wallpaper stays in CSS backgrounds so message nodes and scroll are untouched. */
/* Resolve the surface here: Sade overrides its palette on body, not on html.
   CSS follows theme switches immediately without repainting messages or scrolling. */
.chatScreen #chatBox,.chatBackgroundPreview{
 --chat-background-surface:var(--bg);
 --chat-background-tint:color-mix(in srgb,var(--chat-background-surface) var(--chat-background-dim,0%),transparent);
 background-color:var(--chat-background-surface);
 background-image:linear-gradient(var(--chat-background-tint),var(--chat-background-tint)),var(--chat-background-image,url('/assets/chat-sport-pattern.svg'));
 background-repeat:repeat;background-size:auto,var(--chat-background-size,240px) auto;
}
:root[data-simple-theme="pist"] :is(.chatScreen #chatBox,.chatBackgroundPreview),
:root:not([data-simple-theme])[data-theme="light"] :is(.chatScreen #chatBox,.chatBackgroundPreview){--chat-background-surface:#fff}
.chatBackgroundEditor{max-width:900px;margin:auto}.chatBackgroundLayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}.chatBackgroundControls{min-width:0}.chatBackgroundControls .field{margin-bottom:18px}.chatBackgroundControls input[type=range]{display:block;width:100%;margin:12px 0}.chatBackgroundPreview{min-width:0;min-height:280px;border:1px solid var(--line);border-radius:16px;padding:18px;overflow:hidden}.chatBackgroundPreview .msg{max-width:85%;overflow-wrap:anywhere}.chatBackgroundPreview .msg.me{margin-top:24px}.chatBackgroundActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.chatBackgroundActions .btn{min-height:44px;white-space:normal;flex:1 1 140px}.chatBackgroundEditor [hidden]{display:none!important}.chatBackgroundEditor input[type=file]{width:100%;max-width:100%}@media(max-width:640px){.chatBackgroundLayout{grid-template-columns:minmax(0,1fr)}}