/* «خلفية الدردشة» — chat wallpaper layers (public/chat-wallpaper.js). Colours only from theme tokens:
   the supervisor's face colour (--wp-face: the active supervisor in the Omnis chat, else the bot's face --bot), --chrome/--text and the --wp-* tokens in theme-tokens.css.
   One host element (.wp-host[data-wp]) is used by the chat, the live preview and every picker thumbnail, so what
   the owner picks is exactly what the chat shows. Layers: .base (colour/gradient/photo) → .fx (glow, waves, mist)
   → .pat (Omnis doodle mask) → .veil (dim). Motion is slow, off with the toggle and with prefers-reduced-motion. */
.wp-host{--wp-face:var(--bot);--wp-dim:0;--wp-pat:0;--wp-blur:0px;--wp-ink:var(--wp-face)}
.wp-host>.wp-l{position:absolute;inset:0;pointer-events:none;z-index:0}
.chat>.wp-host.chat-wp{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.chat.has-wp{isolation:isolate}
.wp-host[data-wp=none]>.wp-l{display:none}

/* base colours */
.wp-host>.wp-l.base{background:color-mix(in srgb,var(--wp-face) var(--wp-tint),var(--chrome))}
.wp-host[data-wp=dawn]>.wp-l.base{background:var(--wp-dawn)}
.wp-host[data-wp=sea]>.wp-l.base{background:var(--wp-sea)}
.wp-host[data-wp=sand]>.wp-l.base{background:var(--wp-sand)}
.wp-host[data-wp=night]>.wp-l.base{background:var(--wp-night)}
.wp-host[data-wp=photo]>.wp-l.base{inset:calc(var(--wp-blur) * -2);background:var(--chrome) var(--wp-img,none) center/cover no-repeat;filter:blur(var(--wp-blur))}
.wp-host:is([data-wp=dawn],[data-wp=sea],[data-wp=sand],[data-wp=night],[data-wp=photo]){--wp-ink:var(--text)}

/* supervisor-face effects: «تمويه» soft glow, «موج» slow waves, «ضباب» mist */
.wp-host>.wp-l.fx{display:none}
.wp-host[data-wp=face-blur]>.wp-l.fx{display:block;inset:-12%;filter:blur(28px);
  background:radial-gradient(38% 30% at 18% 22%,color-mix(in srgb,var(--wp-face) var(--wp-glow),transparent),transparent 72%),
    radial-gradient(44% 36% at 84% 66%,color-mix(in srgb,var(--wp-face) calc(var(--wp-glow) * .8),transparent),transparent 72%),
    radial-gradient(34% 28% at 58% 8%,color-mix(in srgb,var(--brand) calc(var(--wp-glow) * .5),transparent),transparent 72%);
  animation:wpDrift 70s ease-in-out infinite alternate}
.wp-host[data-wp=face-wave]>.wp-l.fx{display:block;background:var(--wp-face);opacity:.16;
  -webkit-mask:url(/wallpaper/wave.svg) 0 0/200% 100% repeat-x;mask:url(/wallpaper/wave.svg) 0 0/200% 100% repeat-x;
  animation:wpWave 90s linear infinite}
.wp-host[data-wp=face-mist]>.wp-l.fx{display:block;inset:-10%;filter:blur(36px);
  background:radial-gradient(60% 22% at 30% 30%,color-mix(in srgb,var(--wp-face) var(--wp-glow),transparent),transparent 75%),
    radial-gradient(70% 20% at 70% 62%,color-mix(in srgb,var(--wp-face) calc(var(--wp-glow) * .7),transparent),transparent 75%),
    radial-gradient(80% 26% at 40% 92%,color-mix(in srgb,var(--chrome) 70%,transparent),transparent 75%);
  animation:wpMist 48s ease-in-out infinite alternate}
.wp-host[data-wp=face-mist]>.wp-l.base{background:linear-gradient(180deg,color-mix(in srgb,var(--wp-face) calc(var(--wp-tint) * 1.6),var(--chrome)) 0%,var(--chrome) 85%)}

/* Omnis snow doodle (alpha mask, coloured by --wp-ink): its strength is the «وضوح النقشة» slider */
.wp-host>.wp-l.pat{background:color-mix(in srgb,var(--wp-ink) 70%,var(--text));opacity:calc(var(--wp-pat) * var(--wp-pat-max));
  -webkit-mask:url(/wallpaper/omnis-doodle.svg) 0 0/var(--wp-pat-size) repeat;mask:url(/wallpaper/omnis-doodle.svg) 0 0/var(--wp-pat-size) repeat}
.wp-host[data-wp=night]>.wp-l.pat{-webkit-mask-image:url(/wallpaper/snow.svg);mask-image:url(/wallpaper/snow.svg)}
.wp-host[data-wp=photo]>.wp-l.pat{display:none}
/* dim («تخفيت»): a veil in the mode's own background colour */
.wp-host>.wp-l.veil{background:var(--wp-veil);opacity:var(--wp-dim)}


@keyframes wpDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,3%,0) scale(1.08)}}
@keyframes wpWave{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:-200% 0;mask-position:-200% 0}}
@keyframes wpMist{from{transform:translate3d(-3%,0,0);opacity:.85}to{transform:translate3d(3%,-2%,0);opacity:1}}
/* !important: the effect rules above are more specific, so without it «الحركة» off and reduced motion never stopped them */
.wp-host[data-motion=off]>.wp-l{animation:none!important}
@media (prefers-reduced-motion:reduce){.wp-host>.wp-l{animation:none!important}}

/* readability over a wallpaper: solid agent bubbles, chips behind the day line and times (only when one is set) */
.has-wp .m.bot:not(.bare){background:var(--wp-bubble);box-shadow:var(--wp-bubble-shadow)}
.has-wp .m.user{box-shadow:var(--wp-bubble-shadow)}
.has-wp .day{padding:3px 10px;margin:8px 0 2px;border-radius:var(--radius-pill);background:var(--wp-chip);color:var(--wp-chip-ink)}
.has-wp .meta,.has-wp .sender{color:var(--text2)}
.wp-msg{min-height:1.3em;font-size:var(--fs-xs);padding:0 14px var(--space-2);color:var(--text3)}
.wp-msg.bad{color:var(--danger)}