.page-message { min-height: 100vh; padding-bottom: 60px; background:#f5f5f5; }

.msg-header { height:40px; line-height:40px; text-align:center; background:#1787e7; color:#fff; font-size:15px; }

.msg-section { margin-top:10px; }

.msg-card { display:flex; align-items:center; background:#fff; padding:14px 14px; border-bottom:1px solid #eee; cursor:pointer; }
.msg-card-img img { width:56px; height:56px; border-radius:8px; object-fit:cover; }
.msg-card-main { margin-left:12px; flex:1; }
.msg-card-title-row { display:flex; align-items:center; justify-content:space-between; }
.msg-card-title { font-size:14px; font-weight:700; color:#333; }
.msg-card-desc { margin-top:4px; font-size:12px; color:#999; }

.msg-badge { min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:#ff4d4f; color:#fff; font-size:11px; line-height:18px; text-align:center; box-sizing:border-box; }

@media (min-width:768px) {
  .page-message { max-width:480px; margin:0 auto; border:1px solid #eee; }
}