/* WhatsApp wallpaper depth v129
   Wallpaper is one continuous, ratio-safe surface from the message pane to the
   bottom edge. The scroll box remains a separate flex child above composer. */
html[data-social-app="whatsapp"] .screen.wa129-wallpaper-host{
  isolation:isolate;
  overflow:hidden;
}
html[data-social-app="whatsapp"] .screen.wa129-wallpaper-host>.wa129-wallpaper-layer{
  position:absolute;
  left:0;
  right:0;
  /* Native WhatsApp shows the wallpaper behind the status bar and the floating
     header controls, so the layer starts at the top of the room. */
  top:0;
  bottom:0;
  z-index:0;
  pointer-events:none;
  background-color:var(--chat-bg);
  background-repeat:repeat;
  background-position:center;
}

/* Only the dedicated full-depth layer paints wallpaper. This prevents the same
   custom photo from being independently cropped once for scroll and again for
   composer, while never changing the image aspect ratio. */
html[data-social-app="whatsapp"] .screen.wa129-wallpaper-host>.chat-scroll.wa129-wallpaper-scroll{
  position:relative;
  z-index:1;
  background-color:transparent!important;
  background-image:none!important;
  background-size:auto!important;
}

/* Keep a clean breathing gap between the last bubble and the composer. The
   composer is still outside the scroll area, so bubbles cannot slide behind it. */
html[data-social-app="whatsapp"] .screen.wa129-wallpaper-host>.chat-scroll{
  padding-bottom:22px!important;
  scroll-padding-bottom:22px!important;
}
html[data-social-app="whatsapp"] .screen.wa129-wallpaper-host>.composer{
  position:relative;
  z-index:2;
  flex:none;
  background:transparent!important;
}
/* Native dark mode dims photo wallpapers to ~52% brightness (measured from
   the same wallpaper in light vs dark captures). Colour presets already have
   their own dark values, so only photo layers get the dim. */
html[data-social-app="whatsapp"][data-theme="dark"] .screen.wa129-wallpaper-host>.wa129-wallpaper-layer[style*="url("]::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,var(--wa-wall-dim,.48));
}
html[data-social-app="whatsapp"] .screen.wa129-wallpaper-host>.chat-navbar{
  background:var(--nav-bg)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.3)!important;
  backdrop-filter:blur(24px) saturate(1.3)!important;
  box-shadow:none!important;
}

html[data-social-app="whatsapp"] .screen.wa129-wallpaper-host>.chat-navbar,
html[data-social-app="whatsapp"] .screen.wa129-wallpaper-host>.yappy-pinned-message{
  position:relative;
  z-index:4;
}

@media(max-width:420px){
  html[data-social-app="whatsapp"] .screen.wa129-wallpaper-host>.chat-scroll{
    padding-bottom:20px!important;
    scroll-padding-bottom:20px!important;
  }
}

/* Wallpaper picker: light / dark tabs and the dark-mode dimming slider. */
.wa-wall-tabs{
  display:flex;
  gap:4px;
  padding:3px;
  margin:4px 0 12px;
  border-radius:10px;
  background:rgba(120,120,128,.16);
}
.wa-wall-tab{
  flex:1;
  height:32px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:600 14px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
}
.wa-wall-tab.active{
  background:#fff;
  color:#000;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
html[data-theme="dark"] .wa-wall-tab.active{
  background:rgba(255,255,255,.22);
  color:#fff;
  box-shadow:none;
}
.wa-wall-tabs~.option-grid .option-tile.selected{
  outline:2.5px solid #1daa61;
  outline-offset:2px;
}
.wa-wall-same{
  font-size:13px;
  font-weight:600;
}
.wa-wall-dim{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:6px 10px;
  margin-top:14px;
  font-size:14px;
  font-weight:600;
}
.wa-wall-dim input{grid-column:1 / -1;width:100%;accent-color:#1daa61}
.wa-wall-dim output{font-variant-numeric:tabular-nums;opacity:.7}