/* v3.27 — account-synced wallpaper with true viewport-fixed mobile rendering. */
html[data-app-wallpaper]:not([data-app-wallpaper="default"]) {
  --app-wallpaper-base: #eeeeee;
  --app-wallpaper-layer:
    linear-gradient(
      color-mix(in srgb, var(--app-wallpaper-base) var(--app-wallpaper-shade, 60%), transparent),
      color-mix(in srgb, var(--app-wallpaper-base) var(--app-wallpaper-shade, 60%), transparent)
    ),
    var(--app-wallpaper-image);

  background-color: var(--app-wallpaper-base) !important;
  background-image: var(--app-wallpaper-layer) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
}

html[data-app-wallpaper]:not([data-app-wallpaper="default"])[data-app-wallpaper-theme="dark"] {
  --app-wallpaper-base: #101010;
}

/* The root owns the wallpaper. The app itself stays transparent so the same
   single cropped image is visible everywhere instead of restarting in cards. */
html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body {
  background: transparent !important;
}

/* The brand header is sticky, so content can pass underneath it. Paint the
   exact same fixed wallpaper behind the header instead of the old gray page
   gradient. This makes the header look like the top of the same background. */
html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body > .site-header::before {
  background-color: var(--app-wallpaper-base) !important;
  background-image: var(--app-wallpaper-layer) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
}

#appWallpaperSettings {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#appWallpaperSettings h3,
#appWallpaperSettings p {
  margin: 0;
}

#appWallpaperChoices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#appWallpaperChoices .app-wallpaper-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 12px 10px 10px;
  border: 1px solid var(--border);
  border-radius: 18px !important;
  background: var(--card);
  color: var(--text);
  box-shadow: none;
  transform: none;
  white-space: normal;
  font-size: 12px;
  text-align: center;
}

#appWallpaperChoices .app-wallpaper-choice.active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

#appWallpaperChoices .app-wallpaper-choice[hidden] {
  display: none !important;
}

#appWallpaperChoices .app-wallpaper-choice > :last-child {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.15;
  font-weight: 700;
}

.app-wallpaper-preview {
  display: block !important;
  position: relative;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  flex: 0 0 72px !important;
  margin: 0 auto !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  border-radius: 16px !important;
  background-color: var(--background) !important;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent);
}

.app-wallpaper-preview[data-pack]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--wallpaper-preview-accent, var(--primary));
  opacity: .78;
  -webkit-mask-image: var(--pack-mask);
  mask-image: var(--pack-mask);
  -webkit-mask-size: 88px auto;
  mask-size: 88px auto;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  pointer-events: none;
}

.app-wallpaper-preview[data-pack="meme"] { --pack-mask: url('./dm-theme-meme-mask.png?v=4'); }
.app-wallpaper-preview[data-pack="summer"] { --pack-mask: url('./dm-theme-summer-mask.png?v=4'); }
.app-wallpaper-preview[data-pack="alternative"] { --pack-mask: url('./dm-theme-alternative-mask.png?v=4'); }
.app-wallpaper-preview[data-pack="8bit"] { --pack-mask: url('./dm-theme-8bit-mask.png?v=4'); }

#appWallpaperChoices .app-wallpaper-choice[data-app-wallpaper-choice="default"] .app-wallpaper-preview {
  background: var(--background) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent);
}

/* Wallpaper actions use REAL buttons so they inherit the exact same global
   Yapper button skin as Custom color. Only layout/size lives here. */
.app-wallpaper-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
}

.app-wallpaper-actions > button {
  width: 100%;
  min-height: 46px;
}

.app-wallpaper-actions:has(#appWallpaperRemove[hidden]) #appWallpaperChoose {
  grid-column: 1 / -1;
}

#appWallpaperFile {
  display: none !important;
}

#appWallpaperRemove[hidden] {
  display: none !important;
}

/* Clean Yapper-style visibility slider instead of the browser-default range. */
.app-wallpaper-strength-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 20px;
  font-size: 13px;
  font-weight: 600;
}

#appWallpaperStrengthValue {
  color: var(--secondary-text);
  font-variant-numeric: tabular-nums;
}

#appWallpaperStrength {
  --app-wallpaper-fill-end: 10px;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background:
    linear-gradient(var(--primary), var(--primary)) left center / var(--app-wallpaper-fill-end) 8px no-repeat,
    linear-gradient(
      color-mix(in srgb, var(--button) 88%, var(--border)),
      color-mix(in srgb, var(--button) 88%, var(--border))
    ) left center / 100% 8px no-repeat;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

#appWallpaperStrength::-webkit-slider-runnable-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

#appWallpaperStrength::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 1px 5px var(--shadow);
  appearance: none;
  -webkit-appearance: none;
}

#appWallpaperStrength::-moz-range-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

#appWallpaperStrength::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 1px 5px var(--shadow);
}

#appWallpaperStrength:disabled {
  cursor: default;
  opacity: .48;
}

#appWallpaperStatus:empty {
  display: none;
}

#appWallpaperStatus {
  font-size: 12px;
}

/* Keep controls scrollable below the header with all three mobile dock modes. */
#customizationMenu.customization-scroll-ready {
  height: min(640px, calc(100dvh - 48px)) !important;
}

@media (max-width: 440px) {
  #appWallpaperChoices {
    gap: 8px;
  }

  .app-wallpaper-actions {
    gap: 8px;
  }
}


/* v3.27 — true viewport-fixed wallpaper on phones/tablets.
   Mobile Safari/Chromium do not reliably honor background-attachment: fixed
   on the root document. Use a real fixed compositor layer instead, so the
   wallpaper is always one screen-sized crop and page content scrolls over it. */
@media (max-width: 760px), (pointer: coarse) {
  html[data-app-wallpaper]:not([data-app-wallpaper="default"]) {
    position: relative;
    isolation: isolate;
    background-color: var(--app-wallpaper-base) !important;
    background-image: none !important;
    background-attachment: scroll !important;
  }

  html[data-app-wallpaper]:not([data-app-wallpaper="default"])::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    pointer-events: none;
    background-color: var(--app-wallpaper-base);
    background-image: var(--app-wallpaper-layer);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transform: translateZ(0);
    will-change: transform;
  }

  html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    background: transparent !important;
  }

  /* The header must not reveal scrolled feed content underneath it.
     Use a second full-viewport wallpaper paint clipped to the live header
     height, so its crop stays pixel-aligned with the main fixed layer. */
  html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    background-color: var(--app-wallpaper-base);
    background-image: var(--app-wallpaper-layer);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    clip-path: inset(0 0 calc(100% - var(--app-wallpaper-mobile-header-bottom, 96px)) 0);
    transform: translateZ(0);
  }

  html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body > .site-header {
    position: sticky !important;
    z-index: 100 !important;
    background: transparent !important;
  }

  html[data-app-wallpaper]:not([data-app-wallpaper="default"]) > body > .site-header::before {
    display: none !important;
    content: none !important;
  }
}