/* ============================================================
 * VJ Engine - 站内消息中心（message-center.css）
 * 功能：侧边栏未读角标 + 消息弹窗（公告/反馈回复/系统通知）
 * ============================================================ */

/* 未读角标（通用） */
.msg-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  position: absolute; top: -4px; right: -6px;
  box-shadow: 0 0 6px rgba(239, 68, 68, .5);
}
.msg-badge:empty, .msg-badge.zero { display: none; }

/* 侧边栏菜单项内的角标位置修正 */
.nav-item { position: relative; }
.nav-item .msg-badge { top: 50%; right: 12px; transform: translateY(-50%); }
.sidebar.shrunk .nav-item .msg-badge { top: 6px; right: 6px; transform: none; }

/* 会员中心消息按钮 */
.mp-msg-btn {
  position: relative; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--muted); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .2s;
  flex-shrink: 0;
}
.mp-msg-btn:hover { color: var(--text); border-color: var(--accent); }
.mp-msg-btn svg { width: 19px; height: 19px; }
.mp-msg-btn .msg-badge { top: -4px; right: -4px; }

/* 消息弹窗遮罩 */
.msg-mask {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.msg-mask.open { opacity: 1; pointer-events: auto; }

/* 消息弹窗 */
.msg-panel {
  position: fixed; top: 50%; left: 50%; z-index: 951;
  transform: translate(-50%, -48%) scale(.96);
  width: 480px; max-width: 92vw; max-height: 80vh;
  background: var(--bg2, #1a1a2e); border: 1px solid var(--border, #2a2a4a);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none; transition: all .25s;
}
.msg-panel.open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

.msg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border, #2a2a4a);
}
.msg-title { font-size: 16px; font-weight: 800; color: var(--text, #fff); }
.msg-title small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.msg-actions { display: flex; align-items: center; gap: 10px; }
.msg-read-all {
  font-size: 12px; color: var(--accent, #8b5cf6); cursor: pointer;
  background: none; border: none; padding: 4px 8px; border-radius: 6px;
}
.msg-read-all:hover { background: var(--accent-dim, rgba(139,92,246,.12)); }
.msg-close {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: transparent; color: var(--muted, #888); font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.msg-close:hover { background: var(--bg3, #2a2a4a); color: var(--text, #fff); }

.msg-body { flex: 1; overflow-y: auto; padding: 8px 0; }

.msg-item {
  padding: 14px 20px; border-bottom: 1px solid var(--border, #2a2a4a);
  cursor: pointer; transition: background .15s; position: relative;
}
.msg-item:hover { background: var(--bg3, #1e1e36); }
.msg-item:last-child { border-bottom: none; }
.msg-item.unread::before {
  content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #ef4444;
}
.msg-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.msg-type {
  font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600;
}
.msg-type.announcement { background: rgba(139, 92, 246, .15); color: #a78bfa; }
.msg-type.feedback { background: rgba(16, 185, 129, .15); color: #34d399; }
.msg-type.system { background: rgba(59, 130, 246, .15); color: #60a5fa; }
.msg-time { font-size: 11px; color: var(--faint, #666); }
.msg-item-title { font-size: 13.5px; font-weight: 700; color: var(--text, #fff); margin-bottom: 4px; }
.msg-item-content { font-size: 12.5px; color: var(--muted, #aaa); line-height: 1.6; word-break: break-all; }
.msg-item.unread .msg-item-title { color: var(--accent, #a78bfa); }

.msg-empty { text-align: center; color: var(--faint, #666); font-size: 13px; padding: 40px 0; }
.msg-loading { text-align: center; color: var(--muted, #888); font-size: 13px; padding: 30px 0; }