/* =====================================================
   TouDY UX 增强样式（骨架屏 / 状态 / 交互动效 / 移动端导航 / 搜索）
   主色：#25FEB3 → #D3FC46
   依赖：style.css + ui-enhance.css（须在二者之后加载）
   ===================================================== */

/* ===== 1. 图片骨架微光（懒加载占位） ===== */
/* 卡片封面容器在未加载完成前显示微光骨架；图片加载完成后渐显覆盖 */
.list .img-grid,
.module-item-pic,
.rank-cover {
    position: relative;
    background-color: #1c1e22;
    background-image: linear-gradient(100deg, #1c1e22 30%, #27292e 50%, #1c1e22 70%);
    background-size: 200% 100%;
}
/* 微光层（位于图片之上，加载完成后隐藏） */
.list .img-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .07) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: ux-shimmer 1.4s ease-in-out infinite;
    opacity: 1;
    transition: opacity .4s ease;
}
/* 图片加载完成：隐藏微光（双保险：:has + JS 加的 .is-loaded） */
.list .img-grid:has(img.loaded)::after,
.list .img-grid.is-loaded::after {
    opacity: 0;
    animation: none;
}
@keyframes ux-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== 2. 加载中 / 空 / 错误 状态 ===== */
/* 详情页选集异步加载：旋转指示器 */
.ep-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 0;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
}
.ep-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(37, 254, 179, .25);
    border-top-color: #25FEB3;
    animation: ux-spin .7s linear infinite;
}
@keyframes ux-spin {
    to { transform: rotate(360deg); }
}
.ep-empty {
    padding: 18px 0;
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    text-align: center;
}

/* 通用空状态（列表 / 搜索无结果） */
.list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 70px 0;
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
    text-align: center;
}
.list-empty .empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #25FEB3;
}
.list-empty .empty-icon svg { width: 30px; height: 30px; }
.list-empty .empty-title { font-size: 16px; color: rgba(255, 255, 255, .8); font-weight: 600; }
.list-empty .empty-sub { font-size: 13px; color: rgba(255, 255, 255, .45); }
.list-empty .empty-action {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #16161a;
    background: linear-gradient(90deg, #25FEB3, #D3FC46);
    border-radius: 999px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.list-empty .empty-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 254, 179, .35);
}

/* 加载更多（列表分页触底自动加载） */
.ux-loadmore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 28px;
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
}
.ux-loadmore::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(37, 254, 179, .25);
    border-top-color: #25FEB3;
    animation: ux-spin .7s linear infinite;
}

/* ===== 3. 入场动效（stagger 淡入上浮） ===== */
.ux-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.ux-reveal.ux-in {
    opacity: 1;
    transform: none;
}

/* ===== 4. 点击波纹（ripple） ===== */
.ux-ripple-host {
    position: relative;
    overflow: hidden;
}
.ux-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(37, 254, 179, .35);
    pointer-events: none;
    animation: ux-ripple .6s ease-out;
    z-index: 3;
}
@keyframes ux-ripple {
    to { transform: scale(2.4); opacity: 0; }
}

/* ===== 5. 触感反馈（点击缩放） ===== */
.list a,
.more-link,
.module-info-tag-link,
.home-navigation .item,
.episode-filter .item,
.filter-opts .item,
.bottom-nav-item,
.nav-toggle,
.block-header .more-link {
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .list a:active,
    .more-link:active,
    .module-info-tag-link:active,
    .home-navigation .item:active,
    .episode-filter .item:active,
    .filter-opts .item:active { transform: scale(.97); }
}
.bottom-nav-item:active { transform: scale(.92); }

/* ===== 6. 移动端底部导航 ===== */
.ux-bottom-nav {
    display: none;
}
@media (max-width: 768px) {
    .ux-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10010;
        height: 56px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        display: flex;
        background: rgba(20, 21, 25, .92);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid rgba(255, 255, 255, .08);
    }
    /* 内容区让出底部导航高度 */
    body { padding-bottom: 56px; }
    .footer-content { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)); }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: rgba(255, 255, 255, .55);
        text-decoration: none;
        font-size: 11px;
        background: transparent;
        border: 0;
        cursor: pointer;
        transition: color .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .bottom-nav-item svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        transition: transform .2s ease;
    }
    .bottom-nav-item.active {
        color: #25FEB3;
    }
    .bottom-nav-item.active svg {
        transform: translateY(-1px);
        filter: drop-shadow(0 0 6px rgba(37, 254, 179, .5));
    }
    .bottom-nav-item .nav-fab {
        width: 38px;
        height: 38px;
        margin-top: -6px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #25FEB3, #D3FC46);
        color: #16161a;
        box-shadow: 0 4px 14px rgba(37, 254, 179, .4);
    }
    .bottom-nav-item .nav-fab svg {
        stroke: #16161a;
        fill: none;
        width: 20px;
        height: 20px;
    }

    /* AddToAny 浮动分享条在移动端与底部导航重叠：移动端隐藏，分享改由内容页内联 .a2a_kit 提供 */
    .a2a_floating_style {
        display: none !important;
    }
}

/* ===== 7. 搜索建议下拉 / 移动端全屏搜索 ===== */
.ux-search-wrap {
    position: relative;
}
.ux-search-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 60vh;
    overflow-y: auto;
    background: #1f2122;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
    padding: 6px;
    display: none;
}
.ux-search-suggest.open { display: block; }
.ux-suggest-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, .4);
    letter-spacing: .5px;
}
.ux-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ux-suggest-item svg { width: 16px; height: 16px; stroke: rgba(255, 255, 255, .4); fill: none; flex-shrink: 0; }
.ux-suggest-item .s-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-suggest-item .s-text b { color: #25FEB3; font-weight: 600; }
.ux-suggest-item .s-tag {
    font-size: 11px;
    color: rgba(255, 255, 255, .4);
    flex-shrink: 0;
}
.ux-suggest-item:hover,
.ux-suggest-item.active {
    background: rgba(37, 254, 179, .1);
    color: #fff;
}
.ux-suggest-item.active svg { stroke: #25FEB3; }
/* 热搜榜排名序号：前三名高亮配色 */
.ux-suggest-item .s-rank {
    width: 20px; height: 20px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; font-style: italic;
    color: rgba(255, 255, 255, .4);
    border-radius: 6px;
}
.ux-suggest-item.rank-1 .s-rank { color: #ff5b5b; background: rgba(255, 91, 91, .14); }
.ux-suggest-item.rank-2 .s-rank { color: #ff9f43; background: rgba(255, 159, 67, .14); }
.ux-suggest-item.rank-3 .s-rank { color: #ffd93b; background: rgba(255, 217, 59, .14); }
.ux-suggest-item.rank-1 .s-text,
.ux-suggest-item.rank-2 .s-text,
.ux-suggest-item.rank-3 .s-text { color: #fff; font-weight: 600; }
.ux-suggest-empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .4);
}
.ux-search-overlay{
    display: none;
}
/* 移动端：搜索框聚焦时升级为全屏层 */
@media (max-width: 768px) {
    .ux-search-overlay {
        position: fixed;
        inset: 0;
        z-index: 10020;
        background: #16161a;
        flex-direction: column;
        padding: calc(env(safe-area-inset-top, 0) + 12px) 14px 14px;
    }
    .ux-search-overlay.open { display: flex; }
    .ux-search-overlay .ux-search-bar {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .ux-search-overlay .ux-search-back {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 10px;
        cursor: pointer;
    }
    .ux-search-overlay .ux-search-back svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
    .ux-search-overlay .searchbar {
        margin: 0;
        max-width: none;
        flex: 1;
    }
    .ux-search-overlay .ux-search-suggest {
        position: static;
        box-shadow: none;
        border: 0;
        background: transparent;
        max-height: none;
        flex: 1;
        margin-top: 14px;
    }
}

/* ===== 8. 减少动效偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    .ux-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .list .img-grid::after { animation: none; }
    .ep-loading::before, .ux-loadmore::before { animation-duration: 1.4s; }
    .ux-ripple { animation: none; opacity: 0; }
    * { scroll-behavior: auto !important; }
}