/* ============================================================================
 * 金牛论坛 · 个性化模块样式（personalize.css）
 * ----------------------------------------------------------------------------
 * 只引用 aurora.css 设计令牌（--au-*），明暗主题自动跟随，不写死颜色。
 * 模块：
 *   1. 为你推荐（首页信息流卡片头）
 *   2. 兴趣标签墙（个人中心）
 *   3. 画像名片（体验分 / 分群 / 一句话画像）
 *   4. 个性化菜单徽标（为什么排这里）
 *   5. 响应式（≤768px 收档）
 * ========================================================================== */

/* ────────────────────────────────────────────────────────────────────────────
   1. 「为你推荐」区块
   ──────────────────────────────────────────────────────────────────────────── */
.pz-rec {
    margin-bottom: var(--au-s-6, 24px);
}

.pz-rec-head {
    display: flex;
    align-items: center;
    gap: var(--au-s-2, 8px);
    margin-bottom: var(--au-s-3, 12px);
}

.pz-rec-title {
    font-size: var(--fs-md, 1.05rem);
    font-weight: 600;
    color: var(--au-text-1);
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: var(--au-s-2, 8px);
    margin: 0;
}

.pz-rec-title::before {
    content: '';
    width: 3px;
    height: 1em;
    border-radius: var(--au-r-pill, 999px);
    background: linear-gradient(180deg, var(--au-brand), var(--au-brand-soft-2));
}

.pz-rec-badge {
    font-size: var(--fs-xs, .75rem);
    padding: 2px 10px;
    border-radius: var(--au-r-pill, 999px);
    background: var(--au-brand-soft);
    color: var(--au-brand-strong);
    border: 1px solid var(--au-brand-ring);
    white-space: nowrap;
}

.pz-rec-badge.is-default {
    background: var(--au-surface-2);
    color: var(--au-text-3);
    border-color: var(--au-line);
}

.pz-rec-more {
    margin-left: auto;
    font-size: var(--fs-xs, .75rem);
    color: var(--au-text-3);
    text-decoration: none;
    transition: color .15s ease;
}
.pz-rec-more:hover { color: var(--au-brand); }

/* 推荐卡片：复用站内 sidebar-list-item 视觉语言，加一条推荐理由 */
.pz-rec-item {
    display: flex;
    align-items: flex-start;
    gap: var(--au-s-3, 12px);
    padding: var(--au-s-3, 12px);
    border-radius: var(--au-r-sm, 12px);
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.pz-rec-item:hover {
    background: var(--au-surface);
    border-color: var(--au-line);
    transform: translateY(-1px);
}

.pz-rec-item + .pz-rec-item {
    margin-top: 2px;
}

.pz-rec-thumb {
    width: 56px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: var(--au-r-xs, 8px);
    object-fit: cover;
    background: var(--au-surface-2);
    border: 1px solid var(--au-glass-line);
}

.pz-rec-body { min-width: 0; flex: 1; }

.pz-rec-name {
    font-size: var(--fs-sm, .9rem);
    font-weight: 500;
    color: var(--au-text-1);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.pz-rec-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--au-s-2, 8px);
    margin-top: 4px;
    font-size: var(--fs-xs, .75rem);
    color: var(--au-text-3);
}

.pz-rec-reason {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--au-r-pill, 999px);
    background: var(--au-brand-soft);
    color: var(--au-brand-strong);
    font-size: var(--fs-xs, .72rem);
    white-space: nowrap;
}

.pz-rec-dismiss {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--au-r-xs, 8px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--au-text-3);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.pz-rec-item:hover .pz-rec-dismiss { opacity: 1; }
.pz-rec-dismiss:hover {
    background: var(--au-surface-2);
    color: var(--au-err);
    border-color: var(--au-line);
}

/* ────────────────────────────────────────────────────────────────────────────
   2. 兴趣标签墙
   ──────────────────────────────────────────────────────────────────────────── */
.pz-tagwall {
    display: flex;
    flex-wrap: wrap;
    gap: var(--au-s-2, 8px);
}

.pz-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--au-r-pill, 999px);
    font-size: var(--fs-xs, .78rem);
    line-height: 1.5;
    border: 1px solid var(--au-line);
    background: var(--au-surface-2);
    color: var(--au-text-2);
    white-space: nowrap;
}

.pz-tag[data-type="interest"] {
    border-color: var(--au-brand-ring);
    background: var(--au-brand-soft);
    color: var(--au-brand-strong);
}
.pz-tag[data-type="persona"] {
    border-color: var(--au-brand-strong);
    background: var(--au-brand-soft-2);
    color: var(--au-brand-strong);
    font-weight: 500;
}
.pz-tag[data-type="style"]   { opacity: .88; }
.pz-tag[data-type="role"]    { opacity: .78; font-size: .74rem; }

.pz-tag-w {
    font-size: .68rem;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────────────────────
   3. 画像名片
   ──────────────────────────────────────────────────────────────────────────── */
.pz-persona {
    border: 1px solid var(--au-line);
    border-radius: var(--au-r-md, 16px);
    background: var(--au-surface);
    backdrop-filter: var(--au-glass-blur-sm, blur(14px));
    -webkit-backdrop-filter: var(--au-glass-blur-sm, blur(14px));
    padding: var(--au-s-4, 16px);
}

.pz-persona-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--au-s-3, 12px);
    margin-bottom: var(--au-s-3, 12px);
}

.pz-persona-title {
    font-size: var(--fs-sm, .92rem);
    font-weight: 600;
    color: var(--au-text-1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pz-persona-ai {
    font-size: .68rem;
    padding: 2px 8px;
    border-radius: var(--au-r-pill, 999px);
    background: var(--au-brand-soft);
    color: var(--au-brand-strong);
    border: 1px solid var(--au-brand-ring);
}

.pz-persona-quote {
    font-size: var(--fs-sm, .88rem);
    color: var(--au-text-2);
    line-height: 1.7;
    padding: var(--au-s-3, 12px);
    border-radius: var(--au-r-sm, 12px);
    background: var(--au-surface-2);
    border-left: 3px solid var(--au-brand);
    margin: 0 0 var(--au-s-3, 12px);
}

.pz-persona-quote:empty,
.pz-persona-quote.is-empty {
    display: none;
}

/* 体验分进度环 / 条 */
.pz-score {
    display: flex;
    align-items: center;
    gap: var(--au-s-3, 12px);
}

.pz-score-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--au-brand);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    min-width: 2.4em;
}

.pz-score-num small {
    font-size: .55em;
    font-weight: 400;
    color: var(--au-text-3);
    margin-left: 2px;
}

.pz-score-bar {
    flex: 1;
    height: 6px;
    border-radius: var(--au-r-pill, 999px);
    background: var(--au-surface-2);
    overflow: hidden;
    border: 1px solid var(--au-glass-line);
}

.pz-score-fill {
    height: 100%;
    border-radius: var(--au-r-pill, 999px);
    background: linear-gradient(90deg, var(--au-brand-soft-2), var(--au-brand));
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.pz-score-label {
    font-size: var(--fs-xs, .75rem);
    color: var(--au-text-3);
    white-space: nowrap;
}

.pz-seg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--au-r-pill, 999px);
    font-size: var(--fs-xs, .76rem);
    background: var(--au-surface-2);
    border: 1px solid var(--au-line);
    color: var(--au-text-2);
}

/* ────────────────────────────────────────────────────────────────────────────
   4. 个性化菜单「为什么排这里」徽标
   ──────────────────────────────────────────────────────────────────────────── */
.pz-why {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--au-r-pill, 999px);
    font-size: .68rem;
    line-height: 1.6;
    background: var(--au-brand-soft);
    color: var(--au-brand-strong);
    border: 1px solid var(--au-brand-ring);
    cursor: help;
    vertical-align: middle;
    white-space: nowrap;
}

/* 个性化态的菜单项：轻微强调，不做重装饰 */
.pz-menu-item.is-personalized > .ico,
.pz-menu-item.is-personalized > .txt {
    color: var(--au-text-1);
}

.pz-menu-item.is-core > .txt::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--au-brand);
    margin-left: 5px;
    vertical-align: middle;
    opacity: .7;
}

/* ────────────────────────────────────────────────────────────────────────────
   5. 响应式
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pz-rec-thumb {
        width: 48px;
        height: 36px;
    }

    .pz-rec-dismiss {
        opacity: 1;              /* 触屏没有 hover，直接常显 */
    }

    .pz-persona-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--au-s-2, 8px);
    }

    .pz-score-num { font-size: 1.35rem; }

    .pz-tag {
        font-size: .74rem;
        padding: 3px 9px;
    }

    .pz-why {
        display: none;           /* 窄屏隐藏解释徽标，保留排序本身 */
    }
}

@media (max-width: 480px) {
    .pz-rec-item {
        padding: var(--au-s-2, 8px);
        gap: var(--au-s-2, 8px);
    }
    .pz-rec-thumb {
        width: 40px;
        height: 30px;
    }
    .pz-rec-reason {
        display: none;           /* 极窄屏只留标题 */
    }
}

/* 无障碍：尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .pz-rec-item,
    .pz-score-fill {
        transition: none;
    }
}