/**
 * UserHub Pro - Design v2 组件层
 *
 * 在 frontend.css 之后加载（uap-design-v2 依赖 uap-frontend）。
 * 只覆盖关键界面的视觉表现，不改动布局结构与交互逻辑。
 * 设计语言：墨玉青品牌调 + 落款金点缀 + 暖纸画布（令牌见 design-system.css）。
 *
 * 目录：
 * 1. 用户中心 / 公开主页头部
 * 2. 想法信息流（卡片 → 信息流）
 * 3. 徽章卡
 * 4. 付费墙与价格
 * 5. 排版细节
 */

/* ==========================================================================
   1. 用户中心 / 公开主页头部
   ========================================================================== */

/* 头部卡片收敛为轻投影，去掉旧的内描边白环 */
.uap-user-center .uap-profile-header {
    border: 1px solid var(--uap-border-subtle);
    box-shadow: var(--uap-shadow-sm);
}

/* 无自定义封面时使用品牌墨玉渐变（用户已上传封面时不生效） */
.uap-user-center .uap-profile-cover:not([style*="url("]) {
    background: linear-gradient(115deg, #083f39 0%, #0e7a6d 52%, #2fa08b 100%);
    background-size: cover;
    background-position: center;
}

/* 默认封面上叠加方向性光晕，形成品牌视觉签名 */
.uap-user-center .uap-profile-cover:not([style*="url("])::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 85% 10%, rgba(58, 160, 140, 0.38) 0%, transparent 55%),
        radial-gradient(90% 70% at 10% 92%, rgba(8, 63, 57, 0.42) 0%, transparent 52%);
    pointer-events: none;
}

/* 底部压暗改为墨玉深色，与品牌渐变同族 */
.uap-user-center .uap-profile-cover::after {
    background: linear-gradient(180deg, transparent 55%, rgba(8, 47, 42, 0.38) 100%);
}

/* 头像：白色纸面环 + 品牌色环境投影，从封面中"浮"出来 */
.uap-user-center .uap-profile-avatar {
    box-shadow: 0 0 0 4px var(--uap-surface), 0 6px 16px rgba(8, 47, 42, 0.18);
}

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

/* ==========================================================================
   3. 徽章卡
   已获得：悬停浮起 + 图标微光扫过；未获得：降低存在感，突出"待解锁"。
   ========================================================================== */

/* 未获得：只降低图标存在感；名称与解锁条件保持全不透明度，文字对比度不降级 */
.uap-badge-item.locked .uap-badge-icon {
    opacity: 0.55;
    filter: saturate(0.2);
}

.uap-badge-item.earned {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.uap-badge-item.earned:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(var(--uap-primary-rgb), 0.16), var(--uap-shadow);
}

.uap-badge-item.earned .uap-badge-icon {
    position: relative;
    overflow: hidden;
}

.uap-badge-item.earned .uap-badge-icon::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}

.uap-badge-item.earned:hover .uap-badge-icon::after {
    left: 135%;
    transition: left 0.65s ease;
}

/* 减少动态效果：全局规则只压缩过渡时长，悬停位移需显式移除 */
@media (prefers-reduced-motion: reduce) {
    .uap-badge-item.earned:hover {
        transform: none;
    }
}

/* ==========================================================================
   4. 付费墙与价格
   落款金仅小面积出现：顶部发丝线与价格数字，传达" premium "但不喧宾夺主。
   ========================================================================== */

div.uap-paywall-container {
    background: linear-gradient(180deg, var(--uap-accent-bg) 0%, var(--uap-surface) 42%);
    border-top: 2px solid rgba(var(--uap-accent-rgb), 0.4);
}

.uap-paywall-container .uap-price-current,
.uap-paywall-container .uap-price-value,
.uap-paywall-container .uap-price-currency {
    color: var(--uap-accent-strong);
}

/* ==========================================================================
   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-user-center,
.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);
}