/* ================================================
   SportHub — Message Styles
   ================================================ */

/* ─── Message Card ─── */
.msg-card { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); padding: .75rem .85rem; cursor: pointer; transition: all var(--transition); }
.msg-card:hover { border-color: var(--accent); }
.msg-card-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.msg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.msg-dot.unread { background: var(--info); }
.msg-dot.read { background: var(--border); }
.msg-type { font-size: .7rem; padding: .1rem .4rem; border-radius: var(--radius-full); font-weight: 600; background: var(--accent-bg); color: var(--accent); }
.msg-type-system { background: rgba(59,130,246,.12); color: #3b82f6; }
.msg-type-activity { background: rgba(16,185,129,.12); color: #10b981; }
.msg-type-trade { background: rgba(245,158,11,.12); color: #f59e0b; }
.msg-type-private { background: rgba(168,85,247,.12); color: #a855f7; }
.msg-title { font-weight: 600; font-size: .85rem; flex: 1; }
.msg-preview { font-size: .78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-time { font-size: .7rem; color: var(--text-muted); margin-top: .2rem; }
.storage-bar { text-align: center; font-size: .78rem; color: var(--text-muted); padding: .5rem; }

/* ─── Message Manage ─── */
.msg-manage-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; }
.msg-manage-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.msg-manage-title { font-weight: 600; font-size: .85rem; }
.msg-read-rate { font-size: .72rem; color: var(--text-muted); }

/* ─── 訊息動作按鈕 & 狀態標籤 ─── */
.msg-action-btns { display: flex; gap: .4rem; margin-top: .8rem; }
.msg-action-btns button { flex: 1; padding: .45rem; border-radius: var(--radius); border: none; font-size: .8rem; font-weight: 600; cursor: pointer; }
.msg-action-approve { background: var(--success); color: #fff; }
.msg-action-reject { background: var(--danger); color: #fff; }
.msg-action-ignore { background: var(--border); color: var(--text-secondary); }
.msg-action-status { display: inline-block; padding: .2rem .5rem; border-radius: var(--radius-full); font-size: .72rem; font-weight: 600; margin-top: .5rem; }

[data-theme="dark"] .msg-type-system { background: rgba(59,130,246,.18); }
[data-theme="dark"] .msg-type-activity { background: rgba(16,185,129,.18); }
[data-theme="dark"] .msg-type-trade { background: rgba(245,158,11,.18); }
[data-theme="dark"] .msg-type-private { background: rgba(168,85,247,.18); }