/* Text-only pinned message banner — WhatsApp + iMessage. */
.yappy-pinned-message{
  appearance:none;
  border:0;
  margin:0;
  width:100%;
  height:56px;
  min-height:56px;
  flex:0 0 56px;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  cursor:pointer;
  z-index:32;
  box-sizing:border-box;
  color:var(--nav-text);
  background:var(--nav-bg);
  border-bottom:.5px solid rgba(120,120,128,.16);
}
.yappy-pinned-message-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  color:var(--text-sub);
}
.yappy-pinned-message-icon svg{width:24px;height:24px}
.yappy-pinned-message-copy{
  min-width:0;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:17px;
  line-height:22px;
  font-weight:500;
  letter-spacing:-.01em;
}
.yappy-pin-message-action-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:currentColor;
}
.yappy-pin-message-action-icon svg{width:20px;height:20px}

/* WhatsApp keeps the banner in normal flex flow directly below its header. */
html[data-social-app="whatsapp"] .yappy-pinned-message{
  background:var(--nav-bg);
  color:var(--nav-text);
}
html[data-social-app="whatsapp"][data-theme="light"] .yappy-pinned-message{
  background:color-mix(in srgb,var(--nav-bg) 96%,white);
}
html[data-social-app="whatsapp"][data-theme="dark"] .yappy-pinned-message{
  background:color-mix(in srgb,var(--nav-bg) 94%,black);
}

/* iMessage header is an overlay, so the pinned banner is an overlay too. */
html[data-social-app="imessage"] .imessage-v19 .yappy-pinned-message{
  position:absolute;
  top:calc(var(--status-h) + var(--im-header-h));
  left:0;
  right:0;
  z-index:29;
  background:color-mix(in srgb,var(--im-bg) 96%,transparent);
  color:var(--im-text);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
}
html[data-social-app="imessage"] .imessage-v19.yappy-has-pinned-message .imessage-scroll-v19{
  padding-top:calc(var(--status-h) + var(--im-header-h) + 66px)!important;
  scroll-padding-top:calc(var(--status-h) + var(--im-header-h) + 66px)!important;
}

/* Dedicated iMessage screenshot renderer. */
.imx-pinned-message{
  position:absolute;
  top:var(--imx-header-total);
  left:0;
  right:0;
  height:56px;
  padding:0 18px;
  z-index:29;
  display:flex;
  align-items:center;
  gap:14px;
  box-sizing:border-box;
  color:var(--imx-text);
  background:var(--imx-head94);
  border-bottom:.5px solid var(--imx-line);
}
.imx-pinned-message-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  color:var(--imx-sub);
}
.imx-pinned-message-icon svg{width:24px;height:24px}
.imx-pinned-message-copy{
  min-width:0;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:17px;
  line-height:22px;
  font-weight:500;
  letter-spacing:-.01em;
}