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

/* ==========================================================================
   2. 想法信息流（卡片 → 信息流）
   列表容器承载卡片感，条目之间只留发丝分隔线；悬停仅改底色，不再上浮。
   ========================================================================== */

.uap-thought-stream-list {
    gap: 0;
    background: var(--uap-surface);
    border: 1px solid var(--uap-border-subtle);
    border-radius: var(--uap-radius-lg);
    box-shadow: var(--uap-shadow-sm);
    overflow: hidden;
}

.uap-thought-stream-list .uap-thought-card {
    margin: 0;
    padding: 18px 22px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--uap-border-light);
    border-radius: 0;
    box-shadow: none;
    transition: background 0.15s ease;
}

.uap-thought-stream-list .uap-thought-card:last-child {
    border-bottom: 0;
}

.uap-thought-stream-list .uap-thought-card:hover {
    background: var(--uap-surface-hover);
    transform: none;
    border-color: var(--uap-border-light);
    box-shadow: none;
}

/* 用户中心"动态"等网格流：与信息流保持同一悬停语言 */
.uap-posts-grid .uap-thought-card {
    box-shadow: none;
    transition: background 0.15s ease;
}

.uap-posts-grid .uap-thought-card:hover {
    background: var(--uap-surface-hover);
    transform: none;
    border-color: var(--uap-border-light);
    box-shadow: none;
}

@media (max-width: 640px) {
    .uap-thought-stream-list .uap-thought-card {
        padding: 14px 16px;
    }
}

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

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

/* ==========================================================================
   6. 入场动效
   首屏内容轻微上浮淡入；全局 prefers-reduced-motion 约束见 design-system.css。
   ========================================================================== */

@keyframes uap-dv2-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.uap-thought-stream {
    animation: uap-dv2-rise 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   7. 评论区
   置顶评论从"灰色一块"升级为落款金书脊；排序器对齐画布色。
   ========================================================================== */

/* 提高一级特异性：comments.css 独立入队，加载顺序不保证在 design-v2 之前 */
.uap-comments-wrapper .uap-comment-item.is-pinned {
    background: var(--uap-accent-bg);
    border-left: 2px solid var(--uap-accent);
    border-radius: 4px var(--uap-radius-md) var(--uap-radius-md) 4px;
}

.uap-comments-wrapper .uap-comment-sort-wrapper {
    background: var(--uap-border-light);
}

/* ==========================================================================
   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);
}