/* Yappy iMessage v26 — native-style iMessage group conversations.
   Scoped to group rooms only so DMs and the stable composer stay untouched. */

html[data-social-app="imessage"] .imessage-v19.im26-group-room{
  --im26-group-avatar:30px;
}

/* ---------- Group conversation header ---------- */
html[data-social-app="imessage"] .im26-group-room .im19-person.im26-group-person{
  overflow:visible!important;
  min-width:0!important;
  padding:0!important;
  gap:0!important;
}

html[data-social-app="imessage"] .im26-group-header-stack{
  position:relative!important;
  display:block!important;
  width:82px!important;
  min-width:0!important;
  max-width:none!important;
  height:54px!important;
  min-height:0!important;
  margin:-3px auto -5px!important;
  padding:0!important;
  flex:0 0 54px!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

html[data-social-app="imessage"] .im26-head-avatar{
  position:absolute;
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border-radius:50%;
  overflow:hidden;
  box-sizing:border-box;
  border:2.5px solid var(--im-bg);
  background:#d1d1d6;
  color:#fff;
  font-size:13px;
  font-weight:650;
  line-height:1;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

html[data-social-app="imessage"] .im26-head-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

html[data-social-app="imessage"] .im26-head-avatar.a1{
  left:22px;
  top:0;
  z-index:3;
}

html[data-social-app="imessage"] .im26-head-avatar.a2{
  left:2px;
  top:17px;
  z-index:2;
}

html[data-social-app="imessage"] .im26-head-avatar.a3{
  right:2px;
  top:17px;
  z-index:2;
}

html[data-social-app="imessage"] .im26-group-title{
  width:auto!important;
  min-width:76px!important;
  max-width:170px!important;
  min-height:30px!important;
  padding:3px 12px 4px!important;
  margin:0!important;
  overflow:visible!important;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:color-mix(in srgb,var(--im-bg) 76%,rgba(118,118,128,.25));
  border:1px solid var(--im-line);
  color:var(--im-text);
  font-size:18px;
  font-weight:700;
  line-height:22px;
  white-space:nowrap;
  box-shadow:0 1px 7px rgba(0,0,0,.07);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}

html[data-social-app="imessage"] .im26-group-title b{
  color:var(--im-sub);
  font-size:22px;
  font-weight:500;
  line-height:1;
  transform:translateY(-1px);
}

html[data-social-app="imessage"] .im26-group-date{display:none!important;}

/* Match the personal-chat header rhythm: no extra timestamp row, no oversized gap. */
html[data-social-app="imessage"] .im26-group-room .chat-navbar{
  --im-header-h:98px;
}
html[data-social-app="imessage"] .im26-group-room .chat-navbar-inner{
  height:98px!important;
  min-height:98px!important;
  padding-top:6px!important;
  padding-bottom:2px!important;
}

/* Only a small native-looking breathing space below the group name. */
html[data-social-app="imessage"] .im26-group-room .imessage-scroll-v19{
  padding-top:calc(var(--status-h) + 98px + 4px)!important;
  scroll-padding-top:calc(var(--status-h) + 98px + 4px)!important;
}

/* ---------- Group incoming messages ---------- */
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in{
  position:relative!important;
  box-sizing:border-box!important;
  padding-left:42px!important;
  padding-top:20px!important;
  min-height:calc(var(--im26-group-avatar) + 4px);
  overflow:visible!important;
}

html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in.im26-sender-mid,
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in.im26-sender-end{
  padding-top:0!important;
}

html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in > [data-mid]{
  position:relative!important;
  margin-left:0!important;
  max-width:calc(86% - 26px)!important;
  overflow:visible!important;
}

/* Sender name is visually outside the bubble, like native Messages. */
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in .im-sender{
  position:absolute!important;
  left:12px!important;
  top:-19px!important;
  margin:0!important;
  color:var(--im-sub)!important;
  font-size:12.5px!important;
  font-weight:500!important;
  line-height:16px!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}

html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in.im26-sender-mid .im-sender,
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in.im26-sender-end .im-sender{
  display:none!important;
}

/* Sender avatar sits outside the bubble at the lower-left edge. */
html[data-social-app="imessage"] .im26-group-avatar{
  position:absolute;
  left:0;
  bottom:1px;
  width:var(--im26-group-avatar);
  height:var(--im26-group-avatar);
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  background:#d1d1d6;
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:1;
  z-index:3;
}

html[data-social-app="imessage"] .im26-group-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

html[data-social-app="imessage"] .im-msg-row.im26-group-in.im26-sender-start .im26-group-avatar,
html[data-social-app="imessage"] .im-msg-row.im26-group-in.im26-sender-mid .im26-group-avatar{
  visibility:hidden!important;
}

/* Keep outgoing messages exactly like the established iMessage room. */
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-out{
  padding-left:0!important;
}

/* Slightly separate one participant run from the next one. */
html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-sender-end,
html[data-social-app="imessage"] .im26-group-room .im-msg-row.cluster-single{
  margin-bottom:9px!important;
}

@media(max-width:390px){
  html[data-social-app="imessage"] .im26-group-header-stack{
    width:76px;
  }
  html[data-social-app="imessage"] .im26-head-avatar{
    width:37px;
    height:37px;
  }
  html[data-social-app="imessage"] .im26-group-title{
    font-size:17px;
    max-width:150px;
  }
  html[data-social-app="imessage"] .im26-group-room .im-msg-row.im26-group-in > [data-mid]{
    max-width:calc(88% - 26px)!important;
  }
}