/* ==========================================================================
   推荐内容（2026-10-10 新功能，preview 首发）
   未搜索时：有推荐数据 → 显示推荐关键词动态展示；无数据/加载失败 → 回退原雷达。
   数据：GET /api/recommend（HK api.php 读 /var/lib/kpan/recommend.json，后台可管理）。
   点击：配了指定原链接的词 → 直接转存（复用转存弹窗，60s 失效）；
         未配链接的词 → 回退为普通搜索。
   结构：#homeHero(.orbit，供 home.min.js 显隐)
         > #radarFallback(.orbit-wrap 原雷达，默认显示)
         > #recommendSection(.recommend 推荐区，默认 hidden；有数据时由 recommend.js
           隐藏雷达、加 .recommend-mode、移除 hidden)
   ========================================================================== */

/* hidden 守卫：.recommend/.recommend-refresh 自带 display，需显式覆盖 UA 的 [hidden] */
.recommend[hidden],
.recommend-refresh[hidden] {
    display: none;
}

.orbit.recommend-mode {
    height: auto;
    min-height: 300px;
    padding: 6px 30px 0;
    overflow: visible;
    align-items: center;
}

.recommend {
    position: relative;
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 6px 0 4px;
}

/* 背景柔光：呼应原雷达底盘，给关键词区一点空间感 */
.recommend::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 560px;
    height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side,
            rgba(82, 104, 255, 0.09),
            rgba(168, 85, 247, 0.05) 55%,
            rgba(255, 255, 255, 0) 78%);
    pointer-events: none;
}

.recommend-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recommend-spark {
    width: 20px;
    height: 20px;
    animation: recommend-spark 3.2s ease-in-out infinite;
}

@keyframes recommend-spark {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50%      { transform: scale(1.12) rotate(8deg); opacity: .86; }
}

.recommend-title {
    font-size: 16px;
    font-weight: 600;
    color: #3d4763;
    letter-spacing: 0.06em;
}

.recommend-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px 13px;
    width: 100%;
    min-height: 96px;   /* 预留两行，数据到达前页面不抖动 */
}

.recommend-chip {
    --i: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e6eaf5;
    color: #4b5670;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(23, 32, 68, 0.04);
    cursor: pointer;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1),
                border-color .25s ease,
                box-shadow .25s ease,
                color .25s ease;
    /* backwards：延迟阶段保持隐藏（0% 帧），动画结束后回到常规样式，不锁 hover */
    animation: recommend-in .55s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 70ms) backwards;
}

/* 依次点亮环：错开 1px 描边、不参与布局（原雷达波束的轻量回声，周期 9s 同雷达） */
.recommend-chip::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(82, 104, 255, 0.14);
    opacity: 0;
    pointer-events: none;
    animation: recommend-glow 9s linear infinite calc(var(--i) * .9s);
}

.recommend-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(82, 104, 255, 0.42);
    color: #3b46a0;
    box-shadow: 0 8px 20px rgba(82, 104, 255, 0.16);
}

.recommend-chip:active {
    transform: translateY(0) scale(0.98);
}

.recommend-chip:focus-visible {
    outline: 2px solid rgba(82, 104, 255, 0.55);
    outline-offset: 2px;
}

.recommend-chip-text {
    max-width: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes recommend-in {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes recommend-glow {
    0%   { opacity: .95; border-color: rgba(82, 104, 255, 0.55); box-shadow: 0 0 0 5px rgba(82, 104, 255, 0.13), 0 6px 16px rgba(82, 104, 255, 0.20); }
    10%  { opacity: 0; border-color: rgba(82, 104, 255, 0.14); box-shadow: 0 0 0 0 rgba(82, 104, 255, 0); }
    100% { opacity: 0; }
}

.recommend-refresh {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #e6eaf5;
    background: rgba(255, 255, 255, 0.72);
    color: #8a93a8;
    font-size: 13px;
    line-height: 1;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.recommend-refresh svg {
    width: 13px;
    height: 13px;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.recommend-refresh:hover {
    color: #3b46a0;
    border-color: rgba(82, 104, 255, 0.35);
    background: #fff;
}

.recommend-refresh:hover svg {
    transform: rotate(180deg);
}

.recommend-refresh:focus-visible {
    outline: 2px solid rgba(82, 104, 255, 0.55);
    outline-offset: 2px;
}

/* 预览版角标（仅 preview.html 显示，recommend.js 按路径自动判断） */
.recommend-preview-badge {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 250;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(31, 41, 55, 0.82);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.08em;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .recommend-spark,
    .recommend-chip,
    .recommend-chip::after {
        animation: none;
    }
}

@media only screen and (max-width: 767px) {
    .orbit.recommend-mode {
        min-height: 240px;
        margin: 0 -15px;
        padding: 4px 15px 0;
    }

    .recommend {
        gap: 18px;
    }

    .recommend::before {
        width: 340px;
        height: 220px;
    }

    .recommend-title {
        font-size: 14px;
    }

    .recommend-list {
        gap: 11px 9px;
        min-height: 88px;
    }

    .recommend-chip {
        padding: 9px 15px;
        font-size: 13.5px;
    }
}