/* iMessage wallpaper-safe viewport v132
   Wallpaper is full-screen from the iOS status bar through the composer.
   Messages scroll only inside the clear middle band, matching WA-style guards
   at both the top and bottom. */

html[data-social-app="imessage"] .imessage-v19[data-im131-bottom-safe="1"] .imessage-scroll-v19,
html[data-social-app="imessage"] .imessage-v19[data-im131-bottom-safe="1"] #cv-scroll{
  inset:
    calc(var(--im131-header-h,142px) - 11px)
    0
    calc(var(--im131-composer-h,70px) + var(--im131-gap,0px))
    0!important;
  height:auto!important;
  min-height:0!important;
  padding:8px 14px 8px!important;
  scroll-padding-top:8px!important;
  scroll-padding-bottom:8px!important;
}

/* The wallpaper itself never gets cropped to the scroll viewport. */
html[data-social-app="imessage"] .imessage-v19[data-im131-bottom-safe="1"]>.im62-wallpaper-layer{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:0!important;
}
html[data-social-app="imessage"] .imessage-v19[data-im131-bottom-safe="1"]>img.im62-wallpaper-layer{
  object-fit:cover!important;
  object-position:center!important;
}

/* Wallpaper chats: remove the old white/black full-width veil completely.
   Header controls stay interactive and float over the actual wallpaper. */
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper[data-im131-bottom-safe="1"] .chat-navbar,
html[data-theme="light"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper[data-im131-bottom-safe="1"] .chat-navbar,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper[data-im131-bottom-safe="1"] .chat-navbar{
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper[data-im131-bottom-safe="1"] .chat-navbar::before,
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper[data-im131-bottom-safe="1"] .chat-navbar::after{
  content:none!important;
  display:none!important;
  background:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* The app-level fake iOS status bar has no solid field in wallpaper chats;
   the room wallpaper underneath remains visible all the way to y=0. */
html[data-social-app="imessage"]:has(.imessage-v19.active.im62-has-wallpaper[data-im131-bottom-safe="1"])
#phone-screen>.statusbar{
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Composer remains floating over the same wallpaper. */
html[data-social-app="imessage"] .imessage-v19[data-im131-bottom-safe="1"]>.composer{
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

/* Independent screenshot renderer: same full wallpaper + hard top/bottom
   message bounds. The header/status bar are transparent only when wallpaper exists. */
.imx-root .imx-message-viewport{
  inset:
    calc(var(--imx-header-total) - 11px)
    0
    var(--imx-composer-h)
    0!important;
  height:auto!important;
}
.imx-root .imx-message-content{
  min-height:100%;
  padding:
    8px
    var(--imx-scroll-right)
    8px
    var(--imx-scroll-left)!important;
}
.imx-root.imx-has-wallpaper .imx-header,
.imx-root.imx-has-wallpaper .imx-statusbar{
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.imx-root.imx-has-wallpaper .imx-header::before,
.imx-root.imx-has-wallpaper .imx-header::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

@media(max-width:420px){
  html[data-social-app="imessage"] .imessage-v19[data-im131-bottom-safe="1"] .imessage-scroll-v19,
  html[data-social-app="imessage"] .imessage-v19[data-im131-bottom-safe="1"] #cv-scroll{
    padding-top:7px!important;
    padding-bottom:7px!important;
    scroll-padding-top:7px!important;
    scroll-padding-bottom:7px!important;
  }
  .imx-root .imx-message-content{
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
}


/* v133 — native-style unread count badge inside the iMessage back pill.
   Theme inversion follows iOS contrast: dark badge on light UI, white badge
   on dark UI. Multi-digit totals expand into a compact capsule. */
html[data-social-app="imessage"] .imessage-v19 .im-back-pill>span,
html[data-social-app="imessage"] .imessage-v19 .im19-back>span{
  min-width:27px!important;
  height:27px!important;
  padding:0 7px!important;
  margin-left:2px!important;
  border-radius:999px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  background:var(--im-text)!important;
  color:var(--im-bg)!important;
  border:0!important;
  box-shadow:none!important;
  font-size:15px!important;
  font-weight:650!important;
  line-height:1!important;
  letter-spacing:-.2px!important;
  font-variant-numeric:tabular-nums!important;
}

/* Explicit dark-mode lock: the unread bubble must stay white. */
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .im-back-pill>span,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .im19-back>span{
  background:#fff!important;
  color:#111!important;
}

/* Keep enough room for arrow + unread badge without making the whole back
   control excessively wide. */
html[data-social-app="imessage"] .imessage-v19 .im-back-pill:has(>span),
html[data-social-app="imessage"] .imessage-v19 .im19-back:has(>span){
  gap:3px!important;
  padding-left:9px!important;
  padding-right:10px!important;
}

/* Independent screenshot renderer uses the same inverted badge treatment. */
.imx-root .imx-back-count{
  min-width:27px!important;
  height:27px!important;
  padding:0 7px!important;
  margin-left:2px!important;
  border-radius:999px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  background:var(--imx-text)!important;
  color:var(--imx-bg)!important;
  border:0!important;
  box-shadow:none!important;
  font-size:15px!important;
  font-weight:650!important;
  line-height:1!important;
  letter-spacing:-.2px!important;
  font-variant-numeric:tabular-nums!important;
}
.imx-root .imx-back:has(.imx-back-count){
  gap:3px!important;
  padding-left:9px!important;
  padding-right:10px!important;
}


/* v134 — wallpaper-aware iMessage metadata.
   When a non-default conversation wallpaper is active, all floating metadata
   uses WA-media-style white text + soft dark shadow for reliable contrast.
   Default/no-wallpaper rooms keep their existing theme colors untouched. */
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .im-receipt,
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .im-date,
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .im-system,
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .yx36-im-unsent,
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .im-sender{
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.72)!important;
}

/* Dark-mode legacy metadata rules have higher specificity, so lock wallpaper
   metadata here too. */
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .im-receipt,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .im-date,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .im-system,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .yx36-im-unsent,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .im-sender{
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.72)!important;
}

/* Independent iMessage screenshot renderer mirrors the live wallpaper metadata. */
.imx-root.imx-has-wallpaper .imx-receipt,
.imx-root.imx-has-wallpaper .imx-date,
.imx-root.imx-has-wallpaper .imx-system,
.imx-root.imx-has-wallpaper .imx-unsent,
.imx-root.imx-has-wallpaper .imx-sender{
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.72)!important;
}


/* Base export geometry for iMessage unsent lines. */
.imx-unsent{
  width:100%;
  margin:8px auto;
  padding:0 16px;
  color:var(--imx-sub);
  font-size:12.5px;
  line-height:16px;
  text-align:center;
}