/* Yappy iMessage Recovery v62 */

/* Room header must actually receive taps. Older iMessage layers intentionally disabled
   pointer events on the glass header; v62 restores them on the real controls. */
html[data-social-app="imessage"] .imessage-v19 .chat-navbar,
html[data-social-app="imessage"] .imessage-v19 .chat-navbar-inner{
  pointer-events:auto!important;
}
html[data-social-app="imessage"] .imessage-v19 .im19-person,
html[data-social-app="imessage"] .imessage-v19 .im19-person *{
  pointer-events:auto!important;
}
html[data-social-app="imessage"] .imessage-v19 .im19-person{
  position:relative!important;
  z-index:70!important;
  cursor:pointer!important;
}

/* Custom/preset conversation background uses a dedicated layer instead of the scroll
   background property, so older iMessage CSS cannot reset it back to white/black. */
html[data-social-app="imessage"] .imessage-v19 > .im62-wallpaper-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  z-index:0!important;
  pointer-events:none!important;
}
html[data-social-app="imessage"] .imessage-v19 > img.im62-wallpaper-layer{
  object-fit:cover!important;
  object-position:center!important;
}
html[data-social-app="imessage"] .imessage-v19 > .im62-wallpaper-color{
  background:var(--im62-wallpaper-color)!important;
}
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .imessage-scroll-v19,
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper #cv-scroll{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .chat-navbar{
  background:linear-gradient(
    to bottom,
    color-mix(in srgb,var(--im-bg) 92%,transparent) 0%,
    color-mix(in srgb,var(--im-bg) 78%,transparent) 65%,
    color-mix(in srgb,var(--im-bg) 36%,transparent) 88%,
    transparent 100%
  )!important;
}
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .composer{
  background:linear-gradient(
    to top,
    color-mix(in srgb,var(--im-bg) 90%,transparent) 58%,
    color-mix(in srgb,var(--im-bg) 0%,transparent) 100%
  )!important;
}

/* Stable contact/group info navigation. */
html[data-social-app="imessage"] .imessage-info-v19.im62-info-fixed,
html[data-social-app="imessage"] .imessage-info-v19.im62-member-contact{
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}
html[data-social-app="imessage"] .imessage-info-v19.im62-info-fixed .im19-info-nav,
html[data-social-app="imessage"] .imessage-info-v19.im62-member-contact .im19-info-nav{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  height:calc(var(--status-h) + 56px)!important;
  min-height:calc(var(--status-h) + 56px)!important;
  box-sizing:border-box!important;
  padding:var(--status-h) 14px 0!important;
  z-index:90!important;
}
html[data-social-app="imessage"] .imessage-info-v19.im62-info-fixed .im19-info-body,
html[data-social-app="imessage"] .imessage-info-v19.im62-member-contact .im19-info-body{
  min-height:auto!important;
  overflow:visible!important;
  padding-top:6px!important;
}

/* Group members are interactive contacts. */
html[data-social-app="imessage"] .im62-info-fixed .im19-member{
  cursor:pointer!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
html[data-social-app="imessage"] .im62-info-fixed .im19-member:active{
  background:rgba(120,120,128,.12)!important;
}
html[data-social-app="imessage"] .im62-member-chevron{
  margin-left:auto;
  flex:0 0 auto;
  color:var(--im-sub);
  font-size:26px!important;
  line-height:1;
  font-weight:400;
}

/* Member avatars inside group messages open their contact info. */
html[data-social-app="imessage"] .im26-group-avatar[data-im62-contact],
html[data-social-app="imessage"] .im-sender[data-im62-contact]{
  pointer-events:auto!important;
  cursor:pointer!important;
}
html[data-social-app="imessage"] .im26-group-avatar[data-im62-contact]{
  box-shadow:0 0 0 5px transparent;
}

/* Background picker upload tile. */
.im62-upload-wall{
  display:grid!important;
  place-items:center!important;
  padding:10px!important;
  font-size:13px!important;
  text-align:center!important;
}


html[data-social-app="imessage"] .im19-member{
  font:inherit!important;
}
html[data-social-app="imessage"] .im19-member-chevron{
  margin-left:auto;
  flex:0 0 auto;
  color:var(--im-sub);
  font-size:26px!important;
  line-height:1;
  font-weight:400;
}


/* v63: one dedicated interaction layer over the visible group avatar + title.
   It deliberately stops before the back/video columns, so those controls are untouched. */
html[data-social-app="imessage"] .imessage-v19 .chat-navbar-inner{
  position:relative!important;
}
html[data-social-app="imessage"] .imessage-v19 .im63-group-hitbox{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:95px!important;
  right:95px!important;
  z-index:140!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:transparent!important;
  opacity:.001!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}
@media(max-width:420px){
  html[data-social-app="imessage"] .imessage-v19 .im63-group-hitbox{
    left:86px!important;
    right:86px!important;
  }
}


/* v64 compatibility — control layering only; fade geometry is owned by v65 below. */
html[data-social-app="imessage"] .imessage-v19 .chat-navbar-inner{
  position:relative!important;
  z-index:1!important;
}
html[data-social-app="imessage"] .imessage-v19 .im19-person{
  z-index:72!important;
}
html[data-social-app="imessage"] .imessage-v19 .im19-person>span{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:color-mix(in srgb,var(--im-bg) 86%,var(--im-pill))!important;
}

/* v65 — full-width, theme-aware iMessage conversation fade.
   Replaces the old centered 300px veil that rendered as a visible rectangle. */
html[data-social-app="imessage"] .imessage-v19 .chat-navbar{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html[data-social-app="imessage"] .imessage-v19 .chat-navbar::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0 0 auto 0!important;
  width:100%!important;
  min-width:100%!important;
  max-width:none!important;
  height:calc(100% + 46px)!important;
  transform:none!important;
  pointer-events:none!important;
  z-index:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 58%,
    rgba(255,255,255,.96) 68%,
    rgba(255,255,255,.78) 79%,
    rgba(255,255,255,.48) 88%,
    rgba(255,255,255,.20) 95%,
    rgba(255,255,255,0) 100%
  )!important;
}
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .chat-navbar::after{
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 58%,
    rgba(0,0,0,.96) 68%,
    rgba(0,0,0,.78) 79%,
    rgba(0,0,0,.48) 88%,
    rgba(0,0,0,.20) 95%,
    rgba(0,0,0,0) 100%
  )!important;
}
html[data-social-app="imessage"] .imessage-v19 .chat-navbar-inner{
  position:relative!important;
  z-index:2!important;
}
html[data-social-app="imessage"] .imessage-v19 .im19-person,
html[data-social-app="imessage"] .imessage-v19 .im26-group-person{
  position:relative!important;
  z-index:3!important;
}

/* Wallpaper conversations use the same full-width veil, with slightly more
   translucency so the wallpaper still reads naturally behind the chrome. */
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .chat-navbar{
  background:transparent!important;
}
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .chat-navbar::after{
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.96) 58%,
    rgba(255,255,255,.84) 72%,
    rgba(255,255,255,.56) 84%,
    rgba(255,255,255,.24) 93%,
    rgba(255,255,255,0) 100%
  )!important;
}
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .chat-navbar::after{
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.98) 0%,
    rgba(0,0,0,.96) 58%,
    rgba(0,0,0,.84) 72%,
    rgba(0,0,0,.56) 84%,
    rgba(0,0,0,.24) 93%,
    rgba(0,0,0,0) 100%
  )!important;
}


/* v66 — composer chrome should float over the conversation without a full-width
   frosted veil. The individual + and input pills keep their own surfaces. */
html[data-social-app="imessage"] .imessage-v19 .composer,
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .composer{
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}


/* v67 — localize iMessage header glass to the contact-name pill only.
   Remove the full-width conversation veil and pull the name slightly upward. */
html[data-social-app="imessage"] .imessage-v19 .chat-navbar::after,
html[data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .chat-navbar::after{
  content:none!important;
  display:none!important;
  background:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Personal contact: glass only behind the displayed name. */
html[data-social-app="imessage"] .imessage-v19 .im19-person:not(.im26-group-person)>span{
  margin-top:clamp(-7px,-1.5vw,-4px)!important;
  transform:none!important;
  background:color-mix(in srgb,var(--im-bg) 62%,var(--im-pill))!important;
  border:1px solid color-mix(in srgb,var(--im-line) 78%,transparent)!important;
  -webkit-backdrop-filter:blur(20px) saturate(155%)!important;
  backdrop-filter:blur(20px) saturate(155%)!important;
  box-shadow:0 2px 10px rgba(0,0,0,.035)!important;
}

/* Group title follows the same localized-glass treatment. */
html[data-social-app="imessage"] .imessage-v19 .im26-group-title{
  margin-top:clamp(-7px,-1.5vw,-4px)!important;
  background:color-mix(in srgb,var(--im-bg) 62%,var(--im-pill))!important;
  border-color:color-mix(in srgb,var(--im-line) 78%,transparent)!important;
  -webkit-backdrop-filter:blur(20px) saturate(155%)!important;
  backdrop-filter:blur(20px) saturate(155%)!important;
  box-shadow:0 2px 10px rgba(0,0,0,.035)!important;
}


/* v68 — restore the light iMessage conversation fade to mirror dark mode.
   v67 intentionally removed the old pseudo-element veil, but dark mode still
   owns a navbar gradient in imessage-v27-dark.css. Light mode needs the same
   treatment in white so messages soften naturally behind the header. */
html[data-theme="light"][data-social-app="imessage"] .imessage-v19 .chat-navbar{
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.99) 0%,
    rgba(255,255,255,.96) 68%,
    rgba(255,255,255,.72) 88%,
    rgba(255,255,255,0) 100%
  )!important;
  -webkit-backdrop-filter:blur(17px) saturate(150%)!important;
  backdrop-filter:blur(17px) saturate(150%)!important;
  border:0!important;
  box-shadow:none!important;
}

/* Keep custom wallpaper readable, but retain the same white fade geometry. */
html[data-theme="light"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .chat-navbar{
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.92) 68%,
    rgba(255,255,255,.66) 88%,
    rgba(255,255,255,0) 100%
  )!important;
  -webkit-backdrop-filter:blur(17px) saturate(150%)!important;
  backdrop-filter:blur(17px) saturate(150%)!important;
}


/* v69 — live iMessage header fade exactly mirrors the screenshot renderer.
   Screenshot v51/v52 keeps the theme background solid through 76% of the
   header, then fades in the same color space to transparent at the bottom. */
html[data-theme="light"][data-social-app="imessage"] .imessage-v19 .chat-navbar,
html[data-theme="light"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .chat-navbar{
  background:linear-gradient(
    to bottom,
    #fff 0%,
    #fff 76%,
    rgba(255,255,255,0) 100%
  )!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}

html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .chat-navbar,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19.im62-has-wallpaper .chat-navbar{
  background:linear-gradient(
    to bottom,
    #000 0%,
    #000 76%,
    rgba(0,0,0,0) 100%
  )!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}