/**
 * UserHub Pro - Design v2 组件层
 *
 * 在 frontend.css 之后加载（uap-design-v2 依赖 uap-frontend）。
 * 只覆盖关键界面的视觉表现，不改动布局结构与交互逻辑。
 * 设计语言：墨玉青品牌调 + 落款金点缀 + 暖纸画布（令牌见 design-system.css）。
 *
 * 目录（用户中心头部、徽章卡、付费墙、信息流与评论区已于 2026/9/24 合回各自组件样式）：
 * 5. 排版细节
 * 8. 私信  9. 通知中心
 */

/* ==========================================================================
   5. 排版细节
   金额与关键数字使用等宽数字，避免位数变化时布局跳动。
   ========================================================================== */

.uap-order-summary-total,
.uap-price-current,
.uap-price-value,
.uap-price-int,
.uap-price-dec,
.uap-total-price {
    font-feature-settings: "tnum";
}

/* ==========================================================================
   8. 私信
   两套气泡实现统一为：接收 = 暖纸气泡，发送 = 品牌渐变气泡。
   ========================================================================== */

.uap-chat-message.received .uap-chat-msg-bubble {
    background: var(--uap-border-light);
    color: var(--uap-text);
    box-shadow: none;
}

.uap-chat-message.sent .uap-chat-msg-bubble {
    background: linear-gradient(135deg, var(--uap-action-bg), var(--uap-action-end));
    color: #fff;
}

.uap-chat-msg-time {
    color: var(--uap-text-light);
}

.uap-conversation-item:hover {
    background: var(--uap-surface-hover);
}

.uap-conversation-item.active {
    background: var(--uap-primary-bg);
}

/* ==========================================================================
   9. 通知中心
   未读底从硬编码蓝切换为品牌浅底；系统通知头像从过时紫渐变切换为品牌渐变。
   ========================================================================== */

.uap-notifications-container {
    background: var(--uap-surface);
    border: 1px solid var(--uap-border-subtle);
    box-shadow: var(--uap-shadow-sm);
}

.uap-notifications-tabs {
    background: var(--uap-surface-hover);
}

.uap-notification-tab:hover {
    background: var(--uap-surface);
}

.uap-notification-item:hover {
    background: var(--uap-surface-hover);
}

.uap-notification-item.unread {
    background: var(--uap-primary-bg);
}

.uap-notification-item.unread:hover {
    background: var(--uap-primary-light);
}

.uap-notification-avatar-system {
    background: linear-gradient(135deg, var(--uap-action-bg), var(--uap-action-end));
}

.uap-notification-extra {
    background: var(--uap-surface-hover);
}

.uap-notification-time {
    color: var(--uap-text-light);
}