/* Yappy iMessage v21.2 — supplied iOS Messages references, including frosted overlay header. */
html[data-social-app="imessage"]{
  --im-blue:#0a84ff;
  --im-bg:#fff;
  --im-in:#e9e9eb;
  --im-text:#000;
  --im-sub:#8e8e93;
  --im-pill:rgba(118,118,128,.12);
  --im-header-h:110px;
}
html[data-theme="dark"][data-social-app="imessage"]{
  --im-bg:#000;
  --im-in:#2c2c2e;
  --im-text:#fff;
  --im-sub:#8e8e93;
  --im-pill:rgba(118,118,128,.24);
}

/* Messages home keeps a tiny Chats / Settings dock so Yappy controls stay reachable. */
html[data-social-app="imessage"] #tabbar.imessage-tabbar{
  display:flex!important;
  margin:6px 18px calc(8px + env(safe-area-inset-bottom,0px))!important;
  padding:4px 5px!important;
  border:.5px solid rgba(120,120,128,.22)!important;
  border-radius:27px!important;
  background:color-mix(in srgb,var(--im-bg) 84%,transparent)!important;
  -webkit-backdrop-filter:blur(28px) saturate(165%)!important;
  backdrop-filter:blur(28px) saturate(165%)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.08)!important;
}
html[data-social-app="imessage"] #tabbar.imessage-tabbar .tab-btn{
  min-height:52px!important;
  color:var(--im-sub)!important;
}
html[data-social-app="imessage"] #tabbar.imessage-tabbar .tab-btn.active{
  background:var(--im-pill)!important;
  color:var(--im-text)!important;
}
html[data-social-app="imessage"] #tabbar.imessage-tabbar .tab-btn svg{width:24px!important;height:24px!important}

/* Fix the Messages list title colliding with the fake status bar. */
html[data-social-app="imessage"] .im-list-nav{
  box-sizing:border-box!important;
  height:calc(var(--status-h) + 56px)!important;
  padding:var(--status-h) 14px 0!important;
  align-items:center!important;
  background:color-mix(in srgb,var(--im-bg) 95%,transparent)!important;
  -webkit-backdrop-filter:blur(22px) saturate(155%)!important;
  backdrop-filter:blur(22px) saturate(155%)!important;
}
html[data-social-app="imessage"] .im-list-nav>strong{
  font-size:20px!important;
  line-height:24px!important;
  letter-spacing:-.02em!important;
}
html[data-social-app="imessage"] .imessage-list-screen .searchbar-wrap{padding-top:8px!important}

/* Conversation header:
   - content starts safely below it on first open
   - after scrolling, the thread moves behind the translucent avatar/name header */
html[data-social-app="imessage"] .imessage-v19{
  position:relative!important;
  overflow:hidden!important;
  background:var(--im-bg)!important;
}
html[data-social-app="imessage"] .imessage-v19 .chat-navbar{
  position:absolute!important;
  inset:0 0 auto 0!important;
  z-index:30!important;
  box-sizing:border-box!important;
  height:calc(var(--status-h) + var(--im-header-h))!important;
  min-height:calc(var(--status-h) + var(--im-header-h))!important;
  flex:0 0 auto!important;
  padding-top:var(--status-h)!important;
  overflow:visible!important;
  pointer-events:none!important;
  border:0!important;
  box-shadow:none!important;
  background:linear-gradient(
    to bottom,
    color-mix(in srgb,var(--im-bg) 99%,transparent) 0%,
    color-mix(in srgb,var(--im-bg) 94%,transparent) 66%,
    color-mix(in srgb,var(--im-bg) 58%,transparent) 86%,
    transparent 100%
  )!important;
  -webkit-backdrop-filter:blur(17px) saturate(150%)!important;
  backdrop-filter:blur(17px) saturate(150%)!important;
}
html[data-social-app="imessage"] .imessage-v19 .chat-navbar-inner{
  box-sizing:border-box!important;
  height:var(--im-header-h)!important;
  min-height:var(--im-header-h)!important;
  display:grid!important;
  grid-template-columns:84px minmax(0,1fr) 84px!important;
  align-items:start!important;
  padding:7px 12px 4px!important;
  overflow:visible!important;
  pointer-events:none!important;
}
html[data-social-app="imessage"] .imessage-v19 .chat-navbar-inner button{pointer-events:auto!important}
html[data-social-app="imessage"] .im19-back,
html[data-social-app="imessage"] .im19-video{
  height:46px!important;
  min-width:46px!important;
  border-radius:24px!important;
  border:1px solid rgba(120,120,128,.20)!important;
  background:color-mix(in srgb,var(--im-bg) 66%,var(--im-pill))!important;
  color:var(--im-text)!important;
  box-shadow:0 4px 22px rgba(0,0,0,.045)!important;
  -webkit-backdrop-filter:blur(24px) saturate(170%)!important;
  backdrop-filter:blur(24px) saturate(170%)!important;
}
html[data-social-app="imessage"] .im19-back svg,
html[data-social-app="imessage"] .im19-video svg{width:28px!important;height:28px!important}
html[data-social-app="imessage"] .im19-back span{
  background:#1c1c1e!important;
  color:#fff!important;
  border-radius:13px!important;
  min-width:28px!important;
  height:25px!important;
  padding:1px 7px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:15px!important;
  line-height:1!important;
  margin-left:1px!important;
}
html[data-social-app="imessage"] .im19-person{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:0!important;
  padding:0!important;
  transform:translateY(-1px)!important;
}
html[data-social-app="imessage"] .im19-person .avatar{
  width:58px!important;height:58px!important;
  font-size:20px!important;
  margin:0!important;
  border:0!important;
  box-shadow:none!important;
}
html[data-social-app="imessage"] .im19-person>span{
  width:auto!important;
  min-width:90px!important;
  max-width:190px!important;
  min-height:31px!important;
  height:auto!important;
  margin-top:-1px!important;
  padding:3px 12px 4px!important;
  border-radius:17px!important;
  border:1px solid rgba(120,120,128,.20)!important;
  background:color-mix(in srgb,var(--im-bg) 61%,var(--im-pill))!important;
  -webkit-backdrop-filter:blur(24px) saturate(170%)!important;
  backdrop-filter:blur(24px) saturate(170%)!important;
  box-shadow:0 4px 18px rgba(0,0,0,.04)!important;
  font-size:17px!important;
  line-height:22px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}
html[data-social-app="imessage"] .im19-person>span b{color:var(--im-sub)!important;font-size:21px!important}

/* This padding is part of the scrollable content. It protects the first message,
   but disappears naturally as the user scrolls, which creates the see-through header effect. */
html[data-social-app="imessage"] .imessage-scroll-v19{
  flex:1 1 auto!important;
  min-height:0!important;
  box-sizing:border-box!important;
  padding:
    calc(var(--status-h) + var(--im-header-h) + 10px)
    14px
    108px!important;
  background:var(--im-bg)!important;
  background-image:none!important;
  overscroll-behavior:contain!important;
}

/* iMessage bubble runs: keep single bubbles as-is, refine consecutive bubbles. */
html[data-social-app="imessage"] .im-msg-row{margin:1.5px 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;
  box-shadow:none!important;
}
html[data-social-app="imessage"] .im-bubble.in{background:var(--im-in)!important;color:var(--im-text)!important}
html[data-social-app="imessage"] .im-bubble.out{background:var(--im-blue)!important;color:#fff!important}

/* incoming run */
html[data-social-app="imessage"] .im-msg-row.cluster-start .im-bubble.in{border-radius:19px 19px 19px 7px!important}
html[data-social-app="imessage"] .im-msg-row.cluster-mid .im-bubble.in{border-radius:7px 19px 19px 7px!important}
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in{border-radius:7px 19px 19px 19px!important}
/* outgoing run */
html[data-social-app="imessage"] .im-msg-row.cluster-start .im-bubble.out{border-radius:19px 19px 7px 19px!important}
html[data-social-app="imessage"] .im-msg-row.cluster-mid .im-bubble.out{border-radius:19px 7px 7px 19px!important}
html[data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out{border-radius:19px 7px 19px 19px!important}

/* no tail until the final bubble in a consecutive run */
html[data-social-app="imessage"] .im-msg-row.cluster-start .im-bubble:after,
html[data-social-app="imessage"] .im-msg-row.cluster-mid .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{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:-7px!important;right:auto!important;bottom:0!important;
  width:16px!important;height:17px!important;
  border:0!important;
  background:var(--im-in)!important;
  clip-path:polygon(100% 0,100% 100%,0 100%,45% 76%,72% 44%)!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;
  content:""!important;
  position:absolute!important;
  right:-7px!important;left:auto!important;bottom:0!important;
  width:16px!important;height:17px!important;
  border:0!important;
  background:var(--im-blue)!important;
  transform:scaleX(-1)!important;
  clip-path:polygon(100% 0,100% 100%,0 100%,45% 76%,72% 44%)!important;
}
html[data-social-app="imessage"] .im-msg-row.cluster-start,
html[data-social-app="imessage"] .im-msg-row.cluster-mid{margin-bottom:1px!important}
html[data-social-app="imessage"] .im-msg-row.cluster-single,
html[data-social-app="imessage"] .im-msg-row.cluster-end{margin-bottom:7px!important}

html[data-social-app="imessage"] .im-receipt{
  font-size:12.5px!important;
  color:var(--im-sub)!important;
  margin:1px 7px 8px!important;
  line-height:1.15!important;
  text-align:right!important;
}
html[data-social-app="imessage"] .im-date-wrap{margin:16px 0 11px!important}
html[data-social-app="imessage"] .im-date{
  color:var(--im-sub)!important;
  font-size:13px!important;
  font-weight:500!important;
  background:none!important;
}
html[data-social-app="imessage"] .im-system{
  position:relative!important;
  z-index:1!important;
  margin:12px auto!important;
  max-width:82%!important;
  color:var(--im-sub)!important;
  font-size:12.5px!important;
  line-height:1.32!important;
  text-align:center!important;
}

/* Frosted composer, matching the same layering idea as the header. */
html[data-social-app="imessage"] .imessage-v19 .composer{
  background:linear-gradient(to top,color-mix(in srgb,var(--im-bg) 98%,transparent) 73%,transparent)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  border:0!important;
  padding:8px 12px calc(10px + env(safe-area-inset-bottom))!important;
}
html[data-social-app="imessage"] .imessage-v19 .composer-round{
  width:44px!important;height:44px!important;flex:0 0 44px!important;border-radius:23px!important;
}
html[data-social-app="imessage"] .imessage-v19 .composer-field-wrap{
  min-height:44px!important;border-radius:23px!important;padding-left:13px!important;
}
html[data-social-app="imessage"] .imessage-v19 #cv-input{
  min-height:42px!important;padding:10px 4px 9px!important;font-size:17px!important;
}

@media(max-width:700px){
  html[data-social-app="imessage"]{--im-header-h:106px}
  html[data-social-app="imessage"] .imessage-v19 .chat-navbar-inner{
    grid-template-columns:78px minmax(0,1fr) 78px!important;
    padding-left:10px!important;padding-right:10px!important;
  }
  html[data-social-app="imessage"] .im19-person>span{max-width:150px!important}
  html[data-social-app="imessage"] .im-bubble{max-width:86%!important}
}