.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; position:relative; }

.msg-lang-wrap{position:absolute;right:8px;top:0;height:40px;display:flex;align-items:center;}
.page-message .lang-switch-wrap{position:relative;width:44px;height:24px;display:flex;align-items:center;justify-content:center;}
.page-message .lang-switch{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:4px;background:transparent;color:#fff;font-size:11px;cursor:pointer;outline:none;}
.page-message .lang-icon{width:24px;height:18px;}
.page-message .lang-text{display:none;}
.page-message .lang-menu{position:absolute;left:auto;right:0;top:100%;margin-top:6px;width:68px;background:#fff;border-radius:5px;box-shadow:0 0 20px 5px rgba(0,0,0,0.3);padding:3px 0;display:none;z-index:1200;max-height:181px;overflow-y:auto;}
.page-message .lang-menu.lang-menu-open{display:block;}
.page-message .lang-item{display:flex;align-items:center;justify-content:center;padding:8px 6px 5px;font-size:12px;cursor:pointer;border-bottom:1px solid #DFDDDD;text-align:center;white-space:nowrap;}
.page-message .lang-item:last-child{border-bottom:none;}
.page-message .lang-item img{width:24px;height:18px;margin-right:4px;}
.page-message .lang-item:hover{background:#f5f7fa;}
.page-message .lang-label{color:#999;font-size:12px;}
.page-message .lang-item-active{background:#ff7f2a;}
.page-message .lang-item-active .lang-label{color:#fff;}
.page-message .triangle{width:0;height:0;border-top:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-bottom:6px solid #fff;border-left:6px solid rgba(0,0,0,0);position:absolute;top:-10px;left:50%;transform:translateX(-50%);box-sizing:content-box;}

.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; }
}