/* 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)!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;
}