/* ===== 消息页面 — 深色抖音风格 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#0a0a0a;color:#e0e0e0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}

.msg-container{max-width:680px;margin:0 auto;padding:20px 16px 100px}

/* 头部 */
.msg-header{margin-bottom:20px}
.msg-header h2{font-size:24px;font-weight:700;color:#fff;margin:0 0 4px}
.msg-subtitle{font-size:13px;color:#666}

/* 标签栏 */
.msg-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid #1a1a1a;overflow-x:auto;-webkit-overflow-scrolling:touch}
.msg-tabs::-webkit-scrollbar{display:none}
.msg-tab{flex-shrink:0;padding:12px 20px;font-size:14px;color:#888;cursor:pointer;position:relative;transition:color .2s;border:none;background:none;white-space:nowrap}
.msg-tab:hover{color:#ccc}
.msg-tab.active{color:#fff;font-weight:600}
.msg-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,#FE2C55,#FFD54F,#42A5F5,#AB47BC);border-radius:1px}

/* 消息列表 */
.msg-list{display:flex;flex-direction:column;gap:2px}

/* 消息卡片 */
.msg-card{display:flex;align-items:flex-start;gap:14px;padding:16px 14px;background:#0d0d0d;border-radius:10px;position:relative;cursor:pointer;transition:background .2s}
.msg-card:hover{background:#141414}
.msg-card.unread{background:rgba(254,44,85,.04)}

.msg-dot{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#FE2C55;flex-shrink:0}

.msg-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;object-fit:cover}

.msg-body{flex:1;min-width:0}
.msg-action{font-size:14px;line-height:1.6}
.msg-sender{font-weight:700;color:#fff}
.msg-desc{color:#888}
.msg-post-title{display:block;margin-top:4px;font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;cursor:pointer}
.msg-post-title:hover{color:#aaa}

.msg-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.msg-time{font-size:12px;color:#555;white-space:nowrap}
.msg-delete{width:22px;height:22px;cursor:pointer;color:#555;font-size:16px;text-align:center;line-height:22px;border-radius:50%;transition:all .2s;opacity:0;margin-left:4px}
.msg-card:hover .msg-delete{opacity:1}
.msg-delete:hover{color:#FE2C55;background:rgba(254,44,85,.1)}

/* 底部固定栏 */
.msg-footer{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:16px;background:linear-gradient(transparent,#0a0a0a 40%);z-index:50}
.msg-footer .btn-all-read{padding:10px 32px;background:transparent;border:2px solid #FE2C55;border-radius:24px;color:#FE2C55;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.msg-footer .btn-all-read:hover{background:rgba(254,44,85,.1)}
.msg-footer .btn-all-read:disabled{opacity:.35;cursor:not-allowed}

/* 加载更多 */
.msg-load-more{text-align:center;padding:20px}
.msg-load-more button{padding:8px 28px;background:transparent;border:1px solid #333;border-radius:20px;color:#888;font-size:13px;cursor:pointer;transition:all .2s}
.msg-load-more button:hover{background:#1a1a1a;color:#fff}

/* 空状态 */
.msg-empty{text-align:center;padding:80px 20px}
.msg-empty p{font-size:15px;color:#666;margin:0}

/* Toast */
.msg-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(13,13,13,.95);color:#fff;padding:10px 24px;border-radius:20px;font-size:14px;z-index:9999;pointer-events:none;animation:toastFade .3s ease}
@keyframes toastFade{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

@media(max-width:480px){
  .msg-container{padding:12px 8px 90px}
  .msg-card{padding:14px 10px}
  .msg-tab{padding:10px 14px;font-size:13px}
}