/* Yap Streaks — flame + count pill, built on the existing .dm-inbox-count pill. */
.dm-inbox-count.yapper-streak {
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  min-width: 0;
  height: 22px;
  padding: 0 8px 0 6px;
  gap: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  animation: yapperStreakIn 260ms ease-out both;
}
.dm-inbox-count.yapper-streak.is-ending {
  background: var(--primary);
  color: var(--primary-text, #fff);
}
.yapper-streak-flame {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: currentColor;
}
.yapper-streak-label {
  font-weight: 600;
  opacity: .9;
}

/* DM list: sits right after the name; the time keeps its own margin-left:auto. */
.dm-inbox-topline > .yapper-streak-list { margin: -4px 0 !important; align-self: center; flex: none; }
.dm-inbox-topline > .dm-inbox-profile-target { min-width: 0; overflow: hidden; }
.dm-inbox-topline > .dm-inbox-profile-target strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-inbox-topline > .dm-inbox-time { flex: 0 0 auto; }
/* Chat header: inside the name pill, same inset as the avatar, never taller than the pill. */
.dm-conversation-profile-button.has-yapper-streak .dm-conversation-person-copy { flex: 0 1 auto; }
.dm-inbox-count.yapper-streak-header {
  height: 34px;
  max-height: calc(100% - 4px);
  padding: 0 12px 0 10px;
  font-size: 14px;
}
.yapper-streak-header .yapper-streak-flame { width: 16px; height: 16px; }

@keyframes yapperStreakIn {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-inbox-count.yapper-streak { animation: none !important; transition: none !important; }
}