/* Telegram-style subtle doodle wallpaper — stays behind content */

body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 340px 340px;
  opacity: 0.07;
}

/* Default / light */
html[data-theme="light"] body::before,
body[data-theme="light"]::before,
html:not([data-theme]) body::before {
  background-image: url("/images/bg/doodles-light.svg");
  opacity: 0.075;
}

html[data-theme="dark"] body::before,
body[data-theme="dark"]::before {
  background-image: url("/images/bg/doodles-dark.svg");
  opacity: 0.09;
}

/* white / classic themes also use light doodles */
html[data-theme="white"] body::before,
body[data-theme="white"]::before,
html[data-theme="classic"] body::before,
body[data-theme="classic"]::before {
  background-image: url("/images/bg/doodles-light.svg");
  opacity: 0.07;
}

/* Keep page content above the wallpaper */
body > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  body::before {
    background-size: 280px 280px;
    opacity: 0.06;
  }

  html[data-theme="dark"] body::before,
  body[data-theme="dark"]::before {
    opacity: 0.08;
  }
}