.contact-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex:0 0 auto;
}
.unread-badge{
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#052e16;
  font-size:11px;
  font-weight:800;
  line-height:1;
}
.message-receipt{
  margin-left:3px;
  font-weight:800;
  letter-spacing:-2px;
}

/* Online contact: highlight the whole avatar, not just a tiny dot. */
.contact:has(.status-dot.online) .avatar{
  background:radial-gradient(circle at 30% 30%,#22c55e,#14532d);
  color:#ecfdf5;
  box-shadow:
    0 0 0 2px rgba(34,197,94,.30),
    0 0 16px rgba(34,197,94,.32);
  transition:background .18s ease,box-shadow .18s ease;
}

@media (max-width:760px){
  .contact{position:relative}
  .contact-meta{
    position:absolute;
    right:6px;
    top:6px;
    align-items:center;
    gap:4px;
  }
  .contact-meta .status-dot{
    display:none;
  }
  .unread-badge{
    min-width:19px;
    height:19px;
    padding:0 5px;
    font-size:10px;
  }

  .contact:has(.status-dot.online) .avatar{
    background:radial-gradient(circle at 30% 30%,#2ee56f,#0f6b32);
    color:#fff;
    box-shadow:
      0 0 0 3px rgba(34,197,94,.38),
      0 0 22px rgba(34,197,94,.50);
  }
}