/* Source: styles-cd-avatar.css */
/* The existing avatar box and story outline retain their original dimensions. */
.profile-avatar.is-cd-avatar { position: relative; background: transparent !important; border-color: transparent; }
/* A thin silver edge, printed picture label and clear polycarbonate hub. */
.profile-avatar.is-cd-avatar > .cd-avatar-disc {
  position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 75%, #20293790 76%, #ffffffaa 77%, transparent 79%, #ffffff45 82%, transparent 83%, #15192355 95%, #ffffffc0 96%, #777f8b 98%, #e8edf4 99%),
    conic-gradient(from 25deg, #b5bdc9, #f8fafc 12%, #939da9 23%, #d6eeef 27%, #c4bddb 30%, #f8fafc 35%, #a3acb8 47%, #edf2f7 60%, #8d97a5 72%, #c0dbd4 77%, #d7c5dc 80%, #f6f8fb 86%, #b5bdc9);
  /* closest-side makes the spindle hole proportional to the actual disc radius. */
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 12.5%, #000 13.5%);
  mask-image: radial-gradient(circle closest-side, transparent 12.5%, #000 13.5%);
  animation: yapper-cd-spin var(--cd-spin-duration, 9s) linear infinite !important;
  pointer-events: none;
}
.profile-avatar.is-cd-avatar > .cd-avatar-disc > img {
  position: absolute !important; inset: 12% !important; width: 76% !important; height: 76% !important;
  max-width: none !important; max-height: none !important; border-radius: 50% !important;
  object-fit: cover !important; animation: none !important;
}
/* Low-opacity light on the printed surface: the photo remains readable. */
.profile-avatar.is-cd-avatar > .cd-avatar-disc::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 74%, #ffffff18 75%, transparent 76%, #ffffff30 78%, transparent 79%),
    conic-gradient(from -35deg, transparent 0deg 40deg, #dcf8ff20 52deg, #ffffff40 62deg, #e7d6ff20 72deg, transparent 88deg 210deg, #d8ffef18 226deg, #ffffff30 239deg, #edd8ff18 250deg, transparent 267deg);
}
.profile-avatar.is-cd-avatar > .cd-avatar-disc::after {
  content: ''; position: absolute; inset: 34.5%; z-index: 2; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 40%, #616975 42%, #e4eaf1 45%, #a8b2bf 48%, transparent 51%, #e1e9f03b 75%, #ecf4ff90 79%, #606b7970 82%, #dce4ee55 85%, transparent 88%),
    conic-gradient(from 25deg, #c5cddba0, #ffffffc0 16%, #a6b3c180 29%, #f2f7ffc0 48%, #9fa9b980 63%, #ffffffb0 83%, #c5cddba0);
}
.profile-cd-option {
  position: relative !important;
  box-sizing: border-box !important;
  display: grid;
  gap: 14px;
  width: 100% !important;
  margin: 16px 0 20px !important;
  padding: 16px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)) !important;
  border-radius: var(--ui-radius-panel, 34px) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 54%),
    var(--bubble) !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent) !important;
}

@media (max-width: 700px) {
  .profile-cd-option {
    padding: 14px !important;
    border-radius: 29px !important;
  }
}
.profile-cd-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.profile-cd-toggle-row > span { min-width: 0; }
.profile-cd-option strong, .profile-cd-option small { display: block; }
.profile-cd-option small { color: var(--muted); margin-top: 4px; font-size: 12px; }

/* Fully custom Yapper ticker: identical on Safari/iOS/Chrome/desktop. */
.profile-cd-toggle {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  flex: 0 0 27px !important;
  width: 27px !important;
  min-width: 27px !important;
  max-width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid color-mix(in srgb, var(--text) 28%, var(--border)) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--button) 96%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent) !important;
  outline: none !important;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, opacity .14s ease !important;
}
.profile-cd-toggle::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 13px;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(.72);
  transform-origin: center;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease !important;
}
.profile-cd-toggle:checked {
  background: #5C77FF !important;
  border-color: #5C77FF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.profile-cd-toggle:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.profile-cd-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, #5C77FF 78%, white) !important;
  outline-offset: 3px !important;
}
.profile-cd-toggle:disabled { opacity: .48 !important; cursor: default; }

.profile-cd-speed-control {
  display: grid;
  gap: 7px;
  padding-top: 2px;
  transition: opacity .16s ease;
}
.profile-cd-speed-control.is-disabled { opacity: .48; }
.profile-cd-speed-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
#profileCdSpeedValue {
  color: var(--secondary-text);
  font-variant-numeric: tabular-nums;
}
.profile-cd-speed {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background:
    linear-gradient(
      to right,
      #5C77FF 0 var(--cd-speed-fill, 33.333%),
      color-mix(in srgb, var(--button) 88%, var(--border)) var(--cd-speed-fill, 33.333%) 100%
    ) center / 100% 8px no-repeat !important;
  border-radius: 999px !important;
  cursor: pointer;
  box-shadow: none !important;
}
.profile-cd-speed::-webkit-slider-runnable-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.profile-cd-speed::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: #5C77FF;
  box-shadow: 0 1px 5px var(--shadow);
}
.profile-cd-speed::-moz-range-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.profile-cd-speed::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: #5C77FF;
  box-shadow: 0 1px 5px var(--shadow);
}
.profile-cd-speed:disabled { cursor: default; }
@keyframes yapper-cd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .profile-avatar.is-cd-avatar > .cd-avatar-disc { animation: none !important; } }


/* v3.24 — low-key curved display name around the spinning CD on profile views. */
.profile-avatar.is-cd-avatar > .cd-avatar-disc > .cd-avatar-ring {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.profile-avatar.is-cd-avatar > .cd-avatar-disc > .cd-avatar-ring text {
  fill: color-mix(in srgb, var(--text) 82%, transparent);
  opacity: .40;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Compact avatars physically shrink the SVG, so their ring lettering needs a
   larger viewBox font. Profile-sized CDs keep the finer, subtler lettering. */
.profile-avatar.is-cd-avatar.profile-avatar-large > .cd-avatar-disc > .cd-avatar-ring text,
.profile-avatar.is-cd-avatar.profile-avatar-edit > .cd-avatar-disc > .cd-avatar-ring text,
#profileAvatarDisplay .profile-avatar.is-cd-avatar > .cd-avatar-disc > .cd-avatar-ring text,
.plus-preview-profile-view .profile-avatar.is-cd-avatar > .cd-avatar-disc > .cd-avatar-ring text {
  opacity: .34;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .13em;
}

.profile-avatar.is-cd-avatar > .cd-avatar-disc > .cd-avatar-ring textPath {
  dominant-baseline: middle;
}



/* v3.33 — feed/reply CD spin escape hatch.
   Mobile feed performance CSS intentionally disables animation on every node
   inside a yap. Re-enable ONLY the CD disc so yap + reply avatars keep spinning. */
#yapFeed .profile-avatar.is-cd-avatar > .cd-avatar-disc {
  animation: yapper-cd-spin var(--cd-spin-duration, 9s) linear infinite !important;
  animation-play-state: running !important;
}

@media (prefers-reduced-motion: reduce) {
  #yapFeed .profile-avatar.is-cd-avatar > .cd-avatar-disc {
    animation: none !important;
  }
}


/* Source: styles-app-wallpaper.css */
/* 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;
}

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

:is(#appWallpaperChoices, #onboardingWallpaperChoices) .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;
}

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

:is(#appWallpaperChoices, #onboardingWallpaperChoices) .app-wallpaper-choice[hidden] {
  display: none !important;
}

:is(#appWallpaperChoices, #onboardingWallpaperChoices) .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'); }

:is(#appWallpaperChoices, #onboardingWallpaperChoices) .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;
}

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

:is(#appWallpaperStrength, #onboardingWallpaperStrength) {
  --app-wallpaper-fill-end: 10px;
  width: 100%;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-inline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  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 !important;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

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

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

:is(#appWallpaperStrength, #onboardingWallpaperStrength)::-moz-range-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

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

:is(#appWallpaperStrength, #onboardingWallpaperStrength):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) {
  :is(#appWallpaperChoices, #onboardingWallpaperChoices) {
    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;
  }
}

/* One motion frame drives both wallpaper paints. Only built-in packs opt in.
   Overscan prevents exposed edges; the header clip stays fixed in the viewport. */
@media (max-width: 760px), (pointer: coarse) {
  html[data-app-wallpaper-motion="on"]::before,
  html[data-app-wallpaper-motion="on"] > body::after {
    left: -8px;
    top: -8px;
    right: auto;
    bottom: auto;
    width: calc(100vw + 16px);
    height: calc(100dvh + 16px);
    transform: translate3d(var(--app-wallpaper-motion-x, 0px), var(--app-wallpaper-motion-y, 0px), 0);
  }
  html[data-app-wallpaper-motion="on"] > body::after {
    clip-path: inset(
      calc(8px - var(--app-wallpaper-motion-y, 0px))
      calc(8px + var(--app-wallpaper-motion-x, 0px))
      calc(100% - var(--app-wallpaper-mobile-header-bottom, 96px) - 8px + var(--app-wallpaper-motion-y, 0px))
      calc(8px - var(--app-wallpaper-motion-x, 0px))
    );
  }
}