/* Yappy iMessage v22 — lock the conversation viewport and match the supplied native Messages reference. */

html[data-social-app="imessage"]{
  --im-in:#e9e9ea;
}

/* The v21 regression came from changing the pushed .screen from absolute to relative.
   Keep the conversation pinned to the app viewport so the composer can never drift with content. */
html[data-social-app="imessage"] .imessage-v19{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  background:var(--im-bg)!important;
}

/* Native Messages is effectively three overlay layers: scroll content, glass header, glass composer. */
html[data-social-app="imessage"] .imessage-v19 .imessage-scroll-v19{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  z-index:1!important;
  box-sizing:border-box!important;
  padding:
    calc(var(--status-h) + var(--im-header-h) + 10px)
    14px
    calc(98px + env(safe-area-inset-bottom,0px))!important;
  scroll-padding-top:calc(var(--status-h) + var(--im-header-h) + 10px)!important;
  scroll-padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))!important;
  background:var(--im-bg);
}
html[data-social-app="imessage"] .imessage-v19 .imessage-scroll-v19:not(.wallpaper-custom){
  background:var(--im-bg)!important;
  background-image:none!important;
}

html[data-social-app="imessage"] .imessage-v19 .chat-navbar{
  z-index:30!important;
}

/* Composer is anchored to the screen, not laid out after the message column. */
html[data-social-app="imessage"] .imessage-v19 .composer{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:40!important;
  width:100%!important;
  flex:none!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:flex-end!important;
  gap:10px!important;
  margin:0!important;
  padding:9px 14px calc(11px + env(safe-area-inset-bottom,0px))!important;
  border:0!important;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb,var(--im-bg) 99%,transparent) 0%,
      color-mix(in srgb,var(--im-bg) 98%,transparent) 72%,
      color-mix(in srgb,var(--im-bg) 88%,transparent) 88%,
      transparent 100%
    )!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
  backdrop-filter:blur(22px) saturate(150%)!important;
}

html[data-social-app="imessage"] .imessage-v19 .composer-round{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  flex:0 0 44px!important;
  border-radius:50%!important;
  color:var(--im-text)!important;
  background:color-mix(in srgb,var(--im-bg) 94%,var(--im-pill))!important;
  border:.5px solid rgba(120,120,128,.16)!important;
  box-shadow:0 4px 18px rgba(0,0,0,.055)!important;
}

html[data-social-app="imessage"] .imessage-v19 .composer-field-wrap{
  min-height:44px!important;
  border-radius:23px!important;
  padding:0 43px 0 13px!important;
  display:flex!important;
  align-items:flex-end!important;
  background:color-mix(in srgb,var(--im-bg) 95%,var(--im-pill))!important;
  border:.5px solid rgba(120,120,128,.16)!important;
  box-shadow:0 4px 18px rgba(0,0,0,.045)!important;
}

html[data-social-app="imessage"] .imessage-v19 #cv-input{
  min-height:43px!important;
  max-height:104px!important;
  padding:10px 2px 9px!important;
  font-size:17px!important;
  line-height:22px!important;
  letter-spacing:-.012em!important;
  color:var(--im-text)!important;
}
html[data-social-app="imessage"] .imessage-v19 #cv-input::placeholder{
  color:#9b9ba0!important;
  opacity:1!important;
}

/* Keep the waveform/send control visually inside the field, like the reference. */
html[data-social-app="imessage"] .imessage-v19 .voice-main{
  margin-left:-53px!important;
  margin-right:3px!important;
  z-index:41!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  flex:0 0 40px!important;
  border:0!important;
  background:transparent!important;
  color:var(--im-sub)!important;
  box-shadow:none!important;
}
html[data-social-app="imessage"] .imessage-v19 .voice-main svg{
  width:27px!important;
  height:23px!important;
}
html[data-social-app="imessage"] .imessage-v19 .voice-main.send-main{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  flex-basis:34px!important;
  margin:5px 6px 5px -46px!important;
  border-radius:50%!important;
  background:#0a84ff!important;
  color:#fff!important;
}

/* Bubble geometry calibrated to the Oca reference. */
html[data-social-app="imessage"] .im-msg-row{
  margin:2px 0!important;
}
html[data-social-app="imessage"] .im-bubble{
  position:relative!important;
  max-width:84%!important;
  padding:8px 13px 9px!important;
  border-radius:19px!important;
  font-size:18px!important;
  line-height:1.23!important;
  letter-spacing:-.014em!important;
  word-break:break-word!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html[data-social-app="imessage"] .im-bubble.in{
  background:#e9e9ea!important;
  color:#000!important;
}
html[data-social-app="imessage"] .im-bubble.out{
  color:#fff!important;
  background:
    linear-gradient(
      180deg,
      var(--im-out-top,#84c0eb) 0%,
      var(--im-out-bottom,#3b82f6) 100%
    )!important;
}

/* Consecutive message groups use the tighter inner corners visible in native Messages. */
html[data-social-app="imessage"] .im-msg-row.cluster-start .im-bubble.in{
  border-radius:19px 19px 19px 6px!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-mid .im-bubble.in{
  border-radius:6px 19px 19px 6px!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in{
  border-radius:6px 19px 19px 19px!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-start .im-bubble.out{
  border-radius:19px 19px 6px 19px!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-mid .im-bubble.out{
  border-radius:19px 6px 6px 19px!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out{
  border-radius:19px 6px 19px 19px!important;
}

html[data-social-app="imessage"] .im-msg-row.cluster-start,
html[data-social-app="imessage"] .im-msg-row.cluster-mid{
  margin-bottom:2px!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-single,
html[data-social-app="imessage"] .im-msg-row.cluster-end{
  margin-bottom:8px!important;
}

/* Curved iMessage tails: colored lobe + background cut-out, rather than a triangular pointer. */
html[data-social-app="imessage"] .im-bubble::before,
html[data-social-app="imessage"] .im-bubble::after{
  content:""!important;
  position:absolute!important;
  display:none!important;
  pointer-events:none!important;
  clip-path:none!important;
}

html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.in::before,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in::before{
  display:block!important;
  left:-6px!important;
  right:auto!important;
  bottom:-1px!important;
  width:13px!important;
  height:15px!important;
  border:0!important;
  border-bottom-right-radius:12px!important;
  background:#e9e9ea!important;
  transform:none!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.in::after,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in::after{
  display:block!important;
  left:-10px!important;
  right:auto!important;
  bottom:-2px!important;
  width:9px!important;
  height:17px!important;
  border:0!important;
  border-bottom-right-radius:10px!important;
  background:var(--im-bg)!important;
  transform:none!important;
}

html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.out::before,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out::before{
  display:block!important;
  right:-6px!important;
  left:auto!important;
  bottom:-1px!important;
  width:13px!important;
  height:15px!important;
  border:0!important;
  border-bottom-left-radius:12px!important;
  background:var(--im-out-bottom,#3b82f6)!important;
  transform:none!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.out::after,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out::after{
  display:block!important;
  right:-10px!important;
  left:auto!important;
  bottom:-2px!important;
  width:9px!important;
  height:17px!important;
  border:0!important;
  border-bottom-left-radius:10px!important;
  background:var(--im-bg)!important;
  transform:none!important;
}

html[data-social-app="imessage"] .im-receipt{
  margin:1px 7px 9px!important;
  font-size:12.5px!important;
  line-height:1.15!important;
  color:var(--im-sub)!important;
  text-align:right!important;
}

/* Small screens keep the same proportions; only permit a little more bubble width. */
@media(max-width:700px){
  html[data-social-app="imessage"] .im-bubble{
    max-width:86%!important;
  }
  html[data-social-app="imessage"] .imessage-v19 .composer{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}


/* v22.1 — SIMPLE, ROUNDED iMessage bubbles based on the supplied Oca screenshot.
   Keep the stable composer untouched; only soften message geometry and simplify tails. */
html[data-social-app="imessage"] .im-bubble{
  border-radius:24px!important;
  padding:8px 14px 9px!important;
}

/* Consecutive messages stay visibly rounded — no sharp 6px inner corners. */
html[data-social-app="imessage"] .im-msg-row.cluster-start .im-bubble.in,
html[data-social-app="imessage"] .im-msg-row.cluster-mid .im-bubble.in,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in,
html[data-social-app="imessage"] .im-msg-row.cluster-start .im-bubble.out,
html[data-social-app="imessage"] .im-msg-row.cluster-mid .im-bubble.out,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out{
  border-radius:24px!important;
}

/* Slightly tighter vertical rhythm, matching the compact native Messages stacks. */
html[data-social-app="imessage"] .im-msg-row{
  margin:2px 0!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-start,
html[data-social-app="imessage"] .im-msg-row.cluster-mid{
  margin-bottom:3px!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-single,
html[data-social-app="imessage"] .im-msg-row.cluster-end{
  margin-bottom:8px!important;
}

/* Remove the previous two-piece tail. Use one small, soft tail only on the last bubble. */
html[data-social-app="imessage"] .im-bubble::before,
html[data-social-app="imessage"] .im-bubble::after{
  display:none!important;
}

html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.in::after,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:-5px!important;
  right:auto!important;
  bottom:1px!important;
  width:10px!important;
  height:12px!important;
  background:#e9e9ea!important;
  border:0!important;
  border-bottom-right-radius:9px!important;
  transform:skewX(-18deg)!important;
  clip-path:none!important;
}

html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.out::after,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:-5px!important;
  left:auto!important;
  bottom:1px!important;
  width:10px!important;
  height:12px!important;
  background:var(--im-out-bottom,#3b82f6)!important;
  border:0!important;
  border-bottom-left-radius:9px!important;
  transform:skewX(18deg)!important;
  clip-path:none!important;
}


/* v22.2 — native iMessage-style tails.
   Bubble rounding/composer stay exactly as they are; this only replaces the tail geometry. */
html[data-social-app="imessage"] .im-bubble{
  isolation:isolate!important;
}

/* Hide tails everywhere by default, then add them only to a single/last bubble in a run. */
html[data-social-app="imessage"] .im-bubble::before,
html[data-social-app="imessage"] .im-bubble::after{
  display:none!important;
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  clip-path:none!important;
  transform:none!important;
  border:0!important;
}

/* INCOMING — classic Messages curved tail:
   one coloured lobe, then a white/background cut-out to create the concave inner curve. */
html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.in::before,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in::before{
  display:block!important;
  z-index:-2!important;
  left:-7px!important;
  right:auto!important;
  bottom:-2px!important;
  width:0!important;
  height:20px!important;
  background:transparent!important;
  border-left:20px solid #e9e9ea!important;
  border-bottom-right-radius:16px 14px!important;
  transform:translateY(-2px)!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.in::after,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in::after{
  display:block!important;
  z-index:-1!important;
  left:4px!important;
  right:auto!important;
  bottom:-2px!important;
  width:26px!important;
  height:20px!important;
  background:var(--im-bg)!important;
  border-bottom-right-radius:10px!important;
  transform:translate(-30px,-2px)!important;
}

/* OUTGOING — mirrored version of the same native Messages tail. */
html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.out::before,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out::before{
  display:block!important;
  z-index:-2!important;
  right:-7px!important;
  left:auto!important;
  bottom:-2px!important;
  width:0!important;
  height:20px!important;
  background:transparent!important;
  border-right:20px solid var(--im-out-bottom,#3b82f6)!important;
  border-bottom-left-radius:16px 14px!important;
  transform:translateY(-2px)!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.out::after,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out::after{
  display:block!important;
  z-index:-1!important;
  right:4px!important;
  left:auto!important;
  bottom:-2px!important;
  width:26px!important;
  height:20px!important;
  background:var(--im-bg)!important;
  border-bottom-left-radius:10px!important;
  transform:translate(30px,-2px)!important;
}


/* v45: keep iMessage info navigation pinned below the fake status bar. */
html[data-social-app="imessage"] .imessage-info-v19{
  overflow:hidden!important;
}
html[data-social-app="imessage"] .imessage-info-v19 .im19-info-nav{
  position:relative!important;
  top:auto!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;
  flex:0 0 calc(var(--status-h) + 56px)!important;
  box-sizing:border-box!important;
  padding:var(--status-h) 14px 0!important;
  z-index:30!important;
}
html[data-social-app="imessage"] .imessage-info-v19 .im19-info-body{
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}

/* v45: subtle rounded photo/video cards in iMessage. */
html[data-social-app="imessage"] .im-media-wrap{
  border-radius:18px!important;
  overflow:hidden!important;
}
html[data-social-app="imessage"] .im-media-wrap>img{
  border-radius:inherit!important;
}

/* v45: iMessage reply preview + quoted reply. */
html[data-social-app="imessage"] .im44-reply-compose{
  position:absolute;
  left:14px;
  right:14px;
  bottom:calc(65px + env(safe-area-inset-bottom,0px));
  z-index:39;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px 8px 12px;
  box-sizing:border-box;
  border-radius:15px;
  background:color-mix(in srgb,var(--im-bg) 92%,var(--im-pill));
  border:.5px solid var(--im-line);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 5px 20px rgba(0,0,0,.08);
}
html[data-social-app="imessage"] .im44-reply-compose-copy{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
html[data-social-app="imessage"] .im44-reply-name{
  font-size:12px;
  line-height:15px;
  font-weight:700;
  color:#0a84ff;
}
html[data-social-app="imessage"] .im44-reply-copy{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--im-sub);
  font-size:12px;
  line-height:15px;
}
html[data-social-app="imessage"] .im44-reply-close{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(120,120,128,.14);
  color:var(--im-sub);
  font:inherit;
  font-size:21px;
  line-height:1;
}
html[data-social-app="imessage"] .im44-reply-quote{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
  margin:0 0 6px;
  padding:6px 8px;
  box-sizing:border-box;
  border:0;
  border-left:3px solid currentColor;
  border-radius:9px;
  background:rgba(120,120,128,.14);
  color:#0a84ff;
  text-align:left;
  font:inherit;
}
html[data-social-app="imessage"] .im44-reply-quote .im44-reply-copy{
  color:inherit;
  opacity:.72;
}
html[data-social-app="imessage"] .im-bubble.out .im44-reply-quote{
  background:rgba(255,255,255,.18);
  color:#fff;
}
html[data-social-app="imessage"] .im-media>.im44-reply-quote,
html[data-social-app="imessage"] .im-sticker>.im44-reply-quote{
  width:min(100%,280px);
}
html[data-social-app="imessage"] .im44-reply-target-flash{
  animation:im44-reply-flash .9s ease;
}
@keyframes im44-reply-flash{
  0%,100%{filter:none}
  35%{filter:brightness(1.35)}
}
html[data-social-app="imessage"] .im44-reply-action-icon{
  width:28px;
  display:inline-flex;
  justify-content:center;
  color:#0a84ff;
  font-size:21px;
}


/* v46 — native-style iMessage inline reply thread.
   The replied-to message appears as a smaller linked bubble above the reply,
   and the original message gets an unobtrusive "1 Reply" / "N Replies" link. */
html[data-social-app="imessage"] .im44-reply-quote{display:none!important}

html[data-social-app="imessage"] .im46-reply-context{
  position:relative;
  display:flex;
  align-items:flex-end;
  max-width:min(78%,310px);
  margin:7px 2px 3px;
  padding:0 0 9px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
html[data-social-app="imessage"] .im46-reply-context.in{align-self:flex-start}
html[data-social-app="imessage"] .im46-reply-context.out{align-self:flex-end}

html[data-social-app="imessage"] .im46-reply-context::after{
  content:"";
  position:absolute;
  bottom:0;
  width:22px;
  height:15px;
  border-bottom:2px solid rgba(142,142,147,.34);
}
html[data-social-app="imessage"] .im46-reply-context.in::after{
  left:8px;
  border-left:2px solid rgba(142,142,147,.34);
  border-bottom-left-radius:14px;
}
html[data-social-app="imessage"] .im46-reply-context.out::after{
  right:8px;
  border-right:2px solid rgba(142,142,147,.34);
  border-bottom-right-radius:14px;
}

html[data-social-app="imessage"] .im46-reply-card{
  min-width:0;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid rgba(142,142,147,.28);
  border-radius:14px;
  background:color-mix(in srgb,var(--im-bg) 86%,rgba(142,142,147,.12));
  color:var(--im-text);
  opacity:.78;
  box-shadow:0 1px 1px rgba(0,0,0,.02);
}
html[data-social-app="imessage"] .im46-reply-context.out .im46-reply-card{
  background:color-mix(in srgb,var(--im-bg) 88%,rgba(10,132,255,.08));
}
html[data-social-app="imessage"] .im46-reply-thumb{
  width:30px;
  height:30px;
  flex:0 0 30px;
  overflow:hidden;
  border-radius:7px;
  background:rgba(142,142,147,.14);
}
html[data-social-app="imessage"] .im46-reply-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
html[data-social-app="imessage"] .im46-reply-card-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:1px;
}
html[data-social-app="imessage"] .im46-reply-card-name{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11.5px;
  line-height:14px;
  font-weight:600;
  color:var(--im-sub);
}
html[data-social-app="imessage"] .im46-reply-card-text{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  line-height:16px;
  font-weight:400;
  color:var(--im-text);
}

html[data-social-app="imessage"] .im46-reply-count{
  appearance:none;
  border:0;
  background:transparent;
  color:#0a84ff;
  font:inherit;
  font-size:12px;
  line-height:15px;
  padding:2px 8px 4px;
  margin:0;
  cursor:pointer;
}
html[data-social-app="imessage"] .im-msg-row.in .im46-reply-count{align-self:flex-start}
html[data-social-app="imessage"] .im-msg-row.out .im46-reply-count{align-self:flex-end}

/* Preserve native group-avatar spacing when a quoted preview is present. */
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in.im46-has-reply{
  padding-top:24px!important;
}
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in.im46-has-reply .im46-reply-context{
  margin-left:40px;
}


/* v47 — native iMessage reply hooks + wallpaper-safe bubble tails. */

/* Reply relationship.
   The source message keeps only the "1 Reply / N Replies" affordance.
   The curved branch belongs beside the message that is actually replying. */
html[data-social-app="imessage"] .im46-reply-count,
html[data-social-app="imessage"] .im47-reply-hook{
  display:none!important;
}
html[data-social-app="imessage"] .im46-reply-context{
  display:flex!important;
  padding-bottom:0!important;
  margin-bottom:3px!important;
}
html[data-social-app="imessage"] .im46-reply-context::after{
  display:none!important;
  content:none!important;
}
html[data-social-app="imessage"] .im47-reply-meta{
  display:flex;
  align-items:flex-start;
  min-height:18px;
  margin:0 4px 4px;
  color:#0a84ff;
}
html[data-social-app="imessage"] .im47-reply-meta.in{align-self:flex-start}
html[data-social-app="imessage"] .im47-reply-meta.out{align-self:flex-end}
html[data-social-app="imessage"] .im47-reply-count{
  appearance:none;
  border:0;
  background:transparent;
  color:#0a84ff;
  font:inherit;
  font-size:12px;
  line-height:16px;
  padding:1px 0 0;
  margin:0;
  cursor:pointer;
  white-space:nowrap;
}

/* v48 — the branch is physically beside the replying bubble, matching native Messages. */
html[data-social-app="imessage"] .im48-reply-branch{
  position:relative;
  display:block;
  width:22px;
  height:25px;
  flex:0 0 22px;
  align-self:flex-end;
  margin-bottom:8px;
  pointer-events:none;
  color:rgba(142,142,147,.28);
}
html[data-social-app="imessage"] .im48-reply-branch::before{
  content:"";
  position:absolute;
  bottom:1px;
  width:20px;
  height:24px;
  border-bottom:2px solid currentColor;
  box-sizing:border-box;
}
html[data-social-app="imessage"] .im-msg-row.in .im48-reply-branch{
  margin-right:-5px;
}
html[data-social-app="imessage"] .im-msg-row.in .im48-reply-branch::before{
  right:-1px;
  border-left:2px solid currentColor;
  border-bottom-left-radius:14px;
}
html[data-social-app="imessage"] .im-msg-row.out .im48-reply-branch{
  margin-left:-5px;
}
html[data-social-app="imessage"] .im-msg-row.out .im48-reply-branch::before{
  left:-1px;
  border-right:2px solid currentColor;
  border-bottom-right-radius:14px;
}

/* Keep group avatars in their native position; the reply branch sits between avatar and bubble. */
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in.im48-is-reply .im48-reply-branch{
  margin-left:0;
}

/* The old wingtail used a second pseudo-element painted with --im-bg as an eraser.
   That looks white on top of a custom wallpaper. v47 uses one clipped coloured lobe
   only, so everything around the tail is genuinely transparent. */
html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.in::before,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in::before,
html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.out::before,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out::before{
  display:none!important;
}

html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.in::after,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  left:-8px!important;
  right:auto!important;
  bottom:-1px!important;
  width:18px!important;
  height:18px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--im-in,#e9e9ea)!important;
  transform:none!important;
  clip-path:polygon(100% 0,88% 38%,65% 68%,6% 89%,39% 100%,72% 94%,100% 72%)!important;
  clip-path:path("M18 0 C16 7 12 13 1 16 C7 18 13 17 18 13 Z")!important;
  pointer-events:none!important;
}

html[data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.out::after,
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  right:-8px!important;
  left:auto!important;
  bottom:-1px!important;
  width:18px!important;
  height:18px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--im-out-bottom,#3b82f6)!important;
  transform:scaleX(-1)!important;
  clip-path:polygon(100% 0,88% 38%,65% 68%,6% 89%,39% 100%,72% 94%,100% 72%)!important;
  clip-path:path("M18 0 C16 7 12 13 1 16 C7 18 13 17 18 13 Z")!important;
  pointer-events:none!important;
}


/* v49: preserve the c42b037 replied-message preview, but keep the curve beside
   the replying bubble instead of attaching it to the preview card. */
html[data-social-app="imessage"] .im-msg-row.im48-is-reply{
  position:relative!important;
}
html[data-social-app="imessage"] .im-msg-row.im48-is-reply .im46-reply-context{
  opacity:.92;
}
html[data-social-app="imessage"] .im-msg-row.in.im48-is-reply .im46-reply-context{
  margin-left:26px!important;
}
html[data-social-app="imessage"] .im-msg-row.out.im48-is-reply .im46-reply-context{
  margin-right:26px!important;
}

/* The branch is a separate transparent stroke next to the actual reply bubble. */
html[data-social-app="imessage"] .im-msg-row.in.im48-is-reply .im48-reply-branch{
  width:20px;
  flex-basis:20px;
  margin-right:-4px;
  margin-left:0;
}
html[data-social-app="imessage"] .im-msg-row.out.im48-is-reply .im48-reply-branch{
  width:20px;
  flex-basis:20px;
  margin-left:-4px;
  margin-right:0;
}


/* v50 — native inward reply branch.
   Keep the c42b037 preview card. The curve sits level with the actual reply bubble,
   on its inner side, and bends away from the bubble (opposite the previous version). */
html[data-social-app="imessage"] .im-msg-row.im48-is-reply .im48-reply-branch{
  align-self:center!important;
  width:22px!important;
  height:28px!important;
  flex:0 0 22px!important;
  margin-top:0!important;
  margin-bottom:0!important;
  transform:translateY(2px);
}
html[data-social-app="imessage"] .im-msg-row.im48-is-reply .im48-reply-branch::before{
  top:2px!important;
  bottom:auto!important;
  width:20px!important;
  height:23px!important;
  border-bottom:2px solid currentColor!important;
}

/* outgoing (blue): connector is to the LEFT of the bubble */
html[data-social-app="imessage"] .im-msg-row.out.im48-is-reply .im48-reply-branch{
  margin-left:0!important;
  margin-right:-4px!important;
}
html[data-social-app="imessage"] .im-msg-row.out.im48-is-reply .im48-reply-branch::before{
  right:-1px!important;
  left:auto!important;
  border-left:0!important;
  border-right:2px solid currentColor!important;
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:14px!important;
}

/* incoming (grey): connector is to the RIGHT of the bubble */
html[data-social-app="imessage"] .im-msg-row.in.im48-is-reply .im48-reply-branch{
  margin-right:0!important;
  margin-left:-4px!important;
}
html[data-social-app="imessage"] .im-msg-row.in.im48-is-reply .im48-reply-branch::before{
  left:-1px!important;
  right:auto!important;
  border-right:0!important;
  border-left:2px solid currentColor!important;
  border-bottom-right-radius:0!important;
  border-bottom-left-radius:14px!important;
}


/* v51 — true L-shaped reply connector.
   Outgoing replies: vertical stroke starts above on the left, then bends right into
   the blue bubble. Incoming is the exact mirror on the right. */
html[data-social-app="imessage"] .im-msg-row.out.im48-is-reply .im48-reply-branch::before{
  left:1px!important;
  right:auto!important;
  top:-3px!important;
  width:20px!important;
  height:26px!important;
  border-left:2px solid currentColor!important;
  border-right:0!important;
  border-bottom:2px solid currentColor!important;
  border-bottom-left-radius:14px!important;
  border-bottom-right-radius:0!important;
}
html[data-social-app="imessage"] .im-msg-row.in.im48-is-reply .im48-reply-branch::before{
  right:1px!important;
  left:auto!important;
  top:-3px!important;
  width:20px!important;
  height:26px!important;
  border-right:2px solid currentColor!important;
  border-left:0!important;
  border-bottom:2px solid currentColor!important;
  border-bottom-right-radius:14px!important;
  border-bottom-left-radius:0!important;
}


/* v52 — compact, symmetric iMessage replies.
   Preview stays above the reply. The connector is side-mounted on the actual bubble,
   so incoming and outgoing replies use the same visual logic without large gaps. */
html[data-social-app="imessage"] .im-msg-row.im48-is-reply{
  position:relative!important;
}
html[data-social-app="imessage"] .im-msg-row.im48-is-reply .im46-reply-context{
  width:auto!important;
  max-width:72%!important;
  min-width:0!important;
  padding:0!important;
  margin-top:0!important;
  margin-bottom:4px!important;
  opacity:.88!important;
}
html[data-social-app="imessage"] .im-msg-row.in.im48-is-reply .im46-reply-context{
  align-self:flex-start!important;
  margin-left:0!important;
  margin-right:auto!important;
}
html[data-social-app="imessage"] .im-msg-row.out.im48-is-reply .im46-reply-context{
  align-self:flex-end!important;
  margin-left:auto!important;
  margin-right:0!important;
}
html[data-social-app="imessage"] .im-msg-row.im48-is-reply .im46-reply-card{
  max-width:100%!important;
  padding:5px 9px!important;
  border-radius:13px!important;
  border-color:rgba(142,142,147,.24)!important;
  box-shadow:none!important;
}
html[data-social-app="imessage"] .im-msg-row.im48-is-reply .im46-reply-card-name{
  font-size:11px!important;
  line-height:13px!important;
}
html[data-social-app="imessage"] .im-msg-row.im48-is-reply .im46-reply-card-text{
  font-size:12.5px!important;
  line-height:15px!important;
}

/* The branch no longer participates in row layout. */
html[data-social-app="imessage"] .im-msg-row.im48-is-reply .im48-reply-branch{
  position:absolute!important;
  display:block!important;
  width:18px!important;
  height:22px!important;
  min-width:0!important;
  flex:none!important;
  top:50%!important;
  bottom:auto!important;
  margin:0!important;
  transform:translateY(-46%)!important;
  pointer-events:none!important;
  color:rgba(142,142,147,.30)!important;
  z-index:0!important;
}
html[data-social-app="imessage"] .im-msg-row.im48-is-reply .im48-reply-branch::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:auto!important;
  width:18px!important;
  height:22px!important;
  box-sizing:border-box!important;
  background:transparent!important;
}

/* Outgoing blue reply: L-shape sits just left of the bubble and bends toward it. */
html[data-social-app="imessage"] .im-msg-row.out.im48-is-reply [data-mid]{
  position:relative!important;
}
html[data-social-app="imessage"] .im-msg-row.out.im48-is-reply [data-mid]>.im48-reply-branch{
  left:-18px!important;
  right:auto!important;
}
html[data-social-app="imessage"] .im-msg-row.out.im48-is-reply [data-mid]>.im48-reply-branch::before{
  left:0!important;
  right:auto!important;
  border-left:1.5px solid currentColor!important;
  border-right:0!important;
  border-bottom:1.5px solid currentColor!important;
  border-top:0!important;
  border-bottom-left-radius:12px!important;
  border-bottom-right-radius:0!important;
}

/* Incoming grey reply: exact mirror, kept just right of the bubble. */
html[data-social-app="imessage"] .im-msg-row.in.im48-is-reply [data-mid]{
  position:relative!important;
}
html[data-social-app="imessage"] .im-msg-row.in.im48-is-reply [data-mid]>.im48-reply-branch{
  right:-18px!important;
  left:auto!important;
}
html[data-social-app="imessage"] .im-msg-row.in.im48-is-reply [data-mid]>.im48-reply-branch::before{
  right:0!important;
  left:auto!important;
  border-right:1.5px solid currentColor!important;
  border-left:0!important;
  border-bottom:1.5px solid currentColor!important;
  border-top:0!important;
  border-bottom-right-radius:12px!important;
  border-bottom-left-radius:0!important;
}

/* Group replies should use the same compact spacing as outgoing replies.
   Do not add a second reply-specific indent/padding layer. */
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in.im46-has-reply{
  padding-top:20px!important;
}
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in.im46-has-reply .im46-reply-context{
  margin-left:0!important;
  margin-right:auto!important;
  max-width:72%!important;
}
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in.im48-is-reply .im48-reply-branch{
  margin:0!important;
}

/* Smaller rooms keep the reply pair compact without shrinking the actual message. */
@media(max-width:390px){
  html[data-social-app="imessage"] .im-msg-row.im48-is-reply .im46-reply-context{
    max-width:76%!important;
  }
}


/* v53 — group reply stacking order.
   In group chats the quoted preview must sit above the sender label, then the real
   replying bubble. Reserve only one sender-line of space between preview and bubble. */
html[data-social-app="imessage"] .im26-group-room
.im-msg-row.im26-group-in.im48-is-reply.im26-sender-single > [data-mid],
html[data-social-app="imessage"] .im26-group-room
.im-msg-row.im26-group-in.im48-is-reply.im26-sender-start > [data-mid]{
  margin-top:20px!important;
}
html[data-social-app="imessage"] .im26-group-room
.im-msg-row.im26-group-in.im48-is-reply.im26-sender-single .im46-reply-context,
html[data-social-app="imessage"] .im26-group-room
.im-msg-row.im26-group-in.im48-is-reply.im26-sender-start .im46-reply-context{
  margin-bottom:0!important;
}
html[data-social-app="imessage"] .im26-group-room
.im-msg-row.im26-group-in.im48-is-reply.im26-sender-single .im-sender,
html[data-social-app="imessage"] .im26-group-room
.im-msg-row.im26-group-in.im48-is-reply.im26-sender-start .im-sender{
  top:-19px!important;
  line-height:16px!important;
  z-index:2!important;
}

/* Mid/end messages have no visible sender label, so keep them compact. */
html[data-social-app="imessage"] .im26-group-room
.im-msg-row.im26-group-in.im48-is-reply.im26-sender-mid > [data-mid],
html[data-social-app="imessage"] .im26-group-room
.im-msg-row.im26-group-in.im48-is-reply.im26-sender-end > [data-mid]{
  margin-top:4px!important;
}