/* Yappy iMessage v27 — dark mode tuned to the supplied native Messages reference.
   Applies to BOTH personal and group conversations. */

html[data-theme="dark"][data-social-app="imessage"]{
  --im-bg:#000;
  --im-in:#2c2c2e;
  --im-text:#fff;
  --im-sub:#8e8e93;
  --im-panel:#1c1c1e;
  --im-card:#1c1c1e;
  --im-pill:#1c1c1e;
  --im-line:#38383a;
  --im-blue:#0a84ff;
}

/* Pure black conversation canvas. */
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .imessage-scroll-v19{
  background:#000!important;
  background-image:none!important;
  color:#fff!important;
}

/* Header glass/pills in dark mode. */
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .chat-navbar{
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.99) 0%,
    rgba(0,0,0,.96) 68%,
    rgba(0,0,0,.72) 88%,
    transparent 100%
  )!important;
  border:0!important;
  box-shadow:none!important;
}

html[data-theme="dark"][data-social-app="imessage"] .im19-back,
html[data-theme="dark"][data-social-app="imessage"] .im19-video{
  background:rgba(28,28,30,.92)!important;
  border:1px solid #38383a!important;
  color:#fff!important;
  box-shadow:0 4px 18px rgba(0,0,0,.28)!important;
}

html[data-theme="dark"][data-social-app="imessage"] .im19-person>span,
html[data-theme="dark"][data-social-app="imessage"] .im26-group-title{
  background:rgba(28,28,30,.92)!important;
  border:1px solid #38383a!important;
  color:#fff!important;
  box-shadow:0 4px 18px rgba(0,0,0,.24)!important;
}

html[data-theme="dark"][data-social-app="imessage"] .im19-person>span b,
html[data-theme="dark"][data-social-app="imessage"] .im26-group-title b,
html[data-theme="dark"][data-social-app="imessage"] .im26-group-date{
  color:#8e8e93!important;
}

/* Incoming / outgoing bubbles. */
html[data-theme="dark"][data-social-app="imessage"] .im-bubble.in{
  background:#2c2c2e!important;
  color:#fff!important;
}

html[data-theme="dark"][data-social-app="imessage"] .im-bubble.out{
  color:#fff!important;
  background:linear-gradient(
    180deg,
    var(--im-out-top,#2da8ff) 0%,
    var(--im-out-bottom,#0a84ff) 100%
  )!important;
}

/* Native-looking tails with dark cut-outs. */
html[data-theme="dark"][data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.in::before,
html[data-theme="dark"][data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in::before{
  border-left-color:#2c2c2e!important;
  background:transparent!important;
}

html[data-theme="dark"][data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.in::after,
html[data-theme="dark"][data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.in::after{
  background:#000!important;
}

html[data-theme="dark"][data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.out::before,
html[data-theme="dark"][data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out::before{
  border-right-color:var(--im-out-bottom,#0a84ff)!important;
  background:transparent!important;
}

html[data-theme="dark"][data-social-app="imessage"] .im-msg-row.cluster-single .im-bubble.out::after,
html[data-theme="dark"][data-social-app="imessage"] .im-msg-row.cluster-end .im-bubble.out::after{
  background:#000!important;
}

/* Group sender labels / avatars. */
html[data-theme="dark"][data-social-app="imessage"] .im26-group-room .im-sender{
  color:#8e8e93!important;
}
html[data-theme="dark"][data-social-app="imessage"] .im26-head-avatar{
  border-color:#000!important;
}

/* Composer mirrors native Messages dark mode. */
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .composer{
  background:linear-gradient(
    to top,
    rgba(0,0,0,.99) 0%,
    rgba(0,0,0,.98) 72%,
    rgba(0,0,0,.72) 88%,
    transparent 100%
  )!important;
  -webkit-backdrop-filter:blur(22px) saturate(145%)!important;
  backdrop-filter:blur(22px) saturate(145%)!important;
}

html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .composer-round,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .composer-field-wrap{
  background:#1c1c1e!important;
  border:.5px solid #38383a!important;
  box-shadow:none!important;
  color:#fff!important;
}

html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 #cv-input{
  color:#fff!important;
}

html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 #cv-input::placeholder{
  color:#8e8e93!important;
  opacity:1!important;
}

html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 #cv-clock,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 #cv-sticker,
html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .voice-main{
  color:#8e8e93!important;
}

html[data-theme="dark"][data-social-app="imessage"] .imessage-v19 .voice-main.send-main{
  background:#0a84ff!important;
  color:#fff!important;
}

/* Receipts, separators and system text. */
html[data-theme="dark"][data-social-app="imessage"] .im-receipt,
html[data-theme="dark"][data-social-app="imessage"] .im-date,
html[data-theme="dark"][data-social-app="imessage"] .im-system{
  color:#8e8e93!important;
}

/* Messages list + iMessage bottom tabs. */
html[data-theme="dark"][data-social-app="imessage"] .imessage-list-screen,
html[data-theme="dark"][data-social-app="imessage"] .imessage-list-screen .searchbar-wrap,
html[data-theme="dark"][data-social-app="imessage"] .imessage-list-screen .screen-body,
html[data-theme="dark"][data-social-app="imessage"] .im-list-nav{
  background:#000!important;
  color:#fff!important;
}

html[data-theme="dark"][data-social-app="imessage"] .imessage-list-screen .searchbar{
  background:#1c1c1e!important;
  color:#fff!important;
}

html[data-theme="dark"][data-social-app="imessage"] #tabbar.imessage-main-tabs{
  background:rgba(28,28,30,.92)!important;
  border-color:#38383a!important;
  box-shadow:0 5px 18px rgba(0,0,0,.32)!important;
}

html[data-theme="dark"][data-social-app="imessage"] #tabbar.imessage-main-tabs .tab-btn{
  color:#8e8e93!important;
}

html[data-theme="dark"][data-social-app="imessage"] #tabbar.imessage-main-tabs .tab-btn.active{
  background:#2c2c2e!important;
  color:#fff!important;
}

/* Contact/group info screen. */
html[data-theme="dark"][data-social-app="imessage"] .imessage-info-v19{
  background:#000!important;
  color:#fff!important;
}
html[data-theme="dark"][data-social-app="imessage"] .im19-info-nav{
  background:rgba(0,0,0,.88)!important;
}
html[data-theme="dark"][data-social-app="imessage"] .im19-card,
html[data-theme="dark"][data-social-app="imessage"] .im19-tabs button.active,
html[data-theme="dark"][data-social-app="imessage"] .im19-info-actions button>svg{
  background:#1c1c1e!important;
}