/* ============================================================
   小离短视频 —— 视频播放页（仿抖音样式）
   ============================================================ */

#videoPage { position:relative; width:100%; height:100%; overflow:hidden; background:#000; }

/* ---------- 视频轨道 ---------- */
.video-list {
    height:100%;
    transition: transform .34s var(--dy-ease);
    will-change: transform;
}
.video-list.no-anim { transition: none !important; }

.video-item {
    width:100%;
    height:100vh;
    position:absolute;
    left:0;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.video-player {
    width:100%;
    height:100%;
    /* 竖屏视频铺满（抖音效果），横屏视频自动改为完整显示 */
    object-fit: cover;
    background:#000;
    display:block;
}
.video-player.fit-contain { object-fit: contain; }

/* 单击/长按热区 */
.video-overlay { position:absolute; inset:0; background:transparent; z-index:5; }

/* ---------- 加载指示 ---------- */
.loading {
    position:absolute; top:50%; left:50%;
    width:34px; height:34px; border-radius:50%;
    border:2.5px solid rgba(255,255,255,.22);
    border-top-color:#fff;
    animation:spin .75s linear infinite;
    transform:translate(-50%,-50%);
    display:none; z-index:9;
}
.loading.show { display:block; }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* ============================================================
   单击暂停 / 播放 反馈
   ============================================================ */
.tap-feedback {
    position:absolute; inset:0; z-index:20;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
}
.tap-feedback svg {
    width:78px; height:78px;
    fill: rgba(255,255,255,.92);
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.55));
    opacity:0;
    transform: scale(.5);
}
.tap-feedback.show svg { animation: tapPop .6s var(--dy-ease) forwards; }
@keyframes tapPop {
    0%   { opacity:0;   transform: scale(.5); }
    22%  { opacity:.95; transform: scale(1.08); }
    55%  { opacity:.9;  transform: scale(.98); }
    100% { opacity:0;   transform: scale(1.45); }
}

/* 暂停时常驻的播放按钮 */
.tap-feedback.paused svg {
    animation: none;
    opacity:.9;
    transform: scale(1);
    transition: opacity .2s, transform .2s;
}

/* ============================================================
   双击点赞 —— 爱心爆发
   ============================================================ */
.heart-burst-layer { position:absolute; inset:0; z-index:22; pointer-events:none; overflow:hidden; }
.burst-heart {
    position:absolute;
    width:96px; height:96px;
    margin-left:-48px; margin-top:-48px;
    fill: var(--dy-red);
    filter: drop-shadow(0 0 14px rgba(254,44,85,.55));
    transform-origin:50% 50%;
    animation: heartBurst .95s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes heartBurst {
    0%   { opacity:0; transform: scale(.2) rotate(var(--rot,0deg)); }
    16%  { opacity:1; transform: scale(1.18) rotate(var(--rot,0deg)); }
    32%  { opacity:1; transform: scale(.94)  rotate(var(--rot,0deg)); }
    60%  { opacity:.95; transform: scale(1.06) rotate(var(--rot,0deg)); }
    100% { opacity:0; transform: scale(1.3) translateY(-38px) rotate(var(--rot,0deg)); }
}
/* 拖尾的小爱心 */
.burst-heart.mini { width:52px; height:52px; margin-left:-26px; margin-top:-26px; opacity:.9; }

/* ============================================================
   顶部栏
   ============================================================ */
.video-topbar {
    position:absolute; top:0; left:0; right:0;
    z-index:26;
    padding: max(14px, env(safe-area-inset-top)) 14px 0;
    display:flex; align-items:flex-start; justify-content:space-between;
    pointer-events:none;
}
.video-topbar > * { pointer-events:auto; }

.topbar-right { display:flex; align-items:center; gap:10px; }

.topbar-btn {
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(28,28,30,.42);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    color:#fff; cursor:pointer; padding:0;
    transition: transform .18s var(--dy-ease), background .2s, opacity .2s;
    -webkit-appearance:none; appearance:none;
}
.topbar-btn svg { width:20px; height:20px; fill:#fff; }
.topbar-btn:active { transform: scale(.88); background: rgba(28,28,30,.7); }
.topbar-btn.muted svg { fill: rgba(255,255,255,.6); }
.topbar-btn.spin svg { animation: gearSpin .5s var(--dy-ease); }
@keyframes gearSpin { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }

/* 左上角接口菜单（三条杠） */
.api-menu-btn {
    width:34px; height:30px;
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    cursor:pointer; z-index:25;
    padding:6px;
    border-radius:10px;
    background: rgba(28,28,30,.42);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border:1px solid rgba(255,255,255,.12);
    transition: background .2s, transform .18s var(--dy-ease);
}
.api-menu-btn:active { background: rgba(28,28,30,.72); transform: scale(.94); }
.api-menu-btn span { display:block; height:2px; background:rgba(255,255,255,.92); border-radius:2px; transition: all .25s var(--dy-ease); }
.api-menu-btn span:nth-child(1) { width:16px; }
.api-menu-btn span:nth-child(2) { width:20px; }
.api-menu-btn span:nth-child(3) { width:12px; }
.api-menu-btn:hover span { background: var(--dy-red); }

/* ============================================================
   前景 UI（信息区 + 右侧操作栏）—— 切换视频时整块跟随位移
   ============================================================ */
.video-ui {
    position:absolute; inset:0; z-index:14;
    pointer-events:none;
    transition: transform .34s var(--dy-ease), opacity .34s var(--dy-ease);
    will-change: transform, opacity;
}
.video-ui > * { pointer-events:auto; }

/* 跟随动画：切下一个（向上） */
.video-ui.ui-out-up    { transform: translateY(-14%); opacity:0; }
.video-ui.ui-out-down  { transform: translateY(14%);  opacity:0; }
.video-ui.ui-in-from-down { transform: translateY(14%);  opacity:0; transition:none; }
.video-ui.ui-in-from-up   { transform: translateY(-14%); opacity:0; transition:none; }

/* 切页时隐藏前景 UI */
#videoPage:not(.active) .video-ui { opacity:0; }

/* ============================================================
   左下角信息区
   ============================================================ */
.info-box {
    position:absolute;
    left:14px;
    bottom: calc(var(--nav-h) + 26px);
    z-index:15;
    width: calc(100% - 104px);
    max-width: 560px;
    color:#fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.seo-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

.at-text { font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:.2px; }
.at-text a { color:#fff; text-decoration:none; }
.at-text a:active { opacity:.7; }

.video-desc {
    color: rgba(255,255,255,.96);
    font-size:14.5px;
    line-height:1.42;
    margin-bottom:8px;
    max-width:100%;
    word-break:break-word;
    font-weight:400;
    /* 默认两行截断；是否显示由 JS 通过内联 display 控制 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:hidden;
}

.tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.tags span {
    font-size:14px;
    color:#fff;
    font-weight:600;
    text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.tags span::before { content:'#'; opacity:.9; }

.video-views { color: rgba(255,255,255,.72); font-size:12px; margin-top:8px; display:flex; align-items:center; gap:16px; }
.video-views .vg { display:flex; align-items:center; gap:4px; }
.video-views .vg svg { fill: rgba(255,255,255,.72); }

/* 全屏按钮：低调的小胶囊 */
.inline-fullscreen-btn {
    display:inline-flex; align-items:center; gap:5px;
    background: rgba(28,28,30,.42);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,.14);
    border-radius:99px;
    padding:5px 12px;
    margin-top:10px;
    color:#fff; cursor:pointer;
    font-size:12px; font-weight:500;
    transition: transform .18s var(--dy-ease), background .2s;
    white-space:nowrap;
}
.inline-fullscreen-btn:hover { background: rgba(28,28,30,.66); }
.inline-fullscreen-btn:active { transform: scale(.94); }
.inline-fullscreen-btn svg { fill:#fff; }

/* ============================================================
   右侧操作栏（抖音）
   ============================================================ */
.toolbar {
    position:absolute;
    right:10px;
    bottom: calc(var(--nav-h) + 20px);
    z-index:15;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.tool {
    width:46px; min-height:44px;
    background:transparent;
    border:none;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    color:#fff; cursor:pointer; padding:0;
    box-shadow:none;
    transition: transform .16s var(--dy-ease);
    -webkit-appearance:none; appearance:none;
}
.tool:active { transform: scale(.86); }
.tool .tool-icon { display:flex; align-items:center; justify-content:center; line-height:0; }
.tool .tool-icon svg {
    width:33px; height:33px;
    fill:#fff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
    transition: fill .2s var(--dy-ease), transform .2s var(--dy-ease);
}
.tool-count {
    font-size:12.5px; font-weight:600; margin-top:3px;
    color:#fff; line-height:1;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    font-variant-numeric: tabular-nums;
}
.tool .tool-label {
    font-size:12.5px; font-weight:600; margin-top:3px; color:#fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* 点赞激活：红心 + 弹一下 */
#likeBtn.active .tool-icon svg { fill: var(--dy-red); filter: drop-shadow(0 0 10px rgba(254,44,85,.55)); }
#likeBtn.pop .tool-icon svg { animation: likePop .45s var(--dy-ease); }
@keyframes likePop {
    0% { transform: scale(1); }
    35% { transform: scale(1.42); }
    60% { transform: scale(.9); }
    100% { transform: scale(1); }
}
#collectBtn.active .tool-icon svg { fill: #FFC107; filter: drop-shadow(0 0 10px rgba(255,193,7,.5)); }
#collectBtn.pop .tool-icon svg { animation: likePop .45s var(--dy-ease); }

/* 头像 */
.user-avatar-tool {
    width:50px; min-height:50px;
    border-radius:50% !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    overflow:visible;
    border:none !important;
    margin-bottom:14px;
    position:relative;
}
.user-avatar-tool:active { transform: scale(.92); }
.user-avatar-img {
    width:50px; height:50px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.92);
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
    background:#111;
    display:block;
}

/* 关注加号（抖音：头像下方红色圆 + 白色加号） */
.follow-plus {
    position:absolute;
    bottom:-9px; left:50%;
    transform: translateX(-50%);
    width:21px; height:21px;
    background: var(--dy-red);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    border:1.5px solid #000;
    cursor:pointer;
    transition: transform .3s var(--dy-ease), opacity .25s, background .25s;
    opacity:0;
    pointer-events:none;
    line-height:0;
}
.follow-plus svg { width:12px; height:12px; fill:#fff; }
.follow-plus.show { opacity:1; pointer-events:auto; }
.follow-plus.followed { background:#22c55e; }
.follow-plus.animating { transform: translateX(-50%) scale(1.45); }

/* 音乐唱片（旋转） */
.music-disc {
    width:44px; height:44px;
    border-radius:50%;
    margin-top:4px;
    background: radial-gradient(circle at 50% 50%, #3a3a3c 0%, #1c1c1e 58%, #0a0a0a 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
    position:relative;
    animation: discSpin 7s linear infinite;
}
.music-disc img {
    width:24px; height:24px;
    border-radius:50%;
    object-fit:cover;
    opacity:.95;
}
.music-disc::after {
    content:'';
    position:absolute; inset:0;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,.16);
}
@keyframes discSpin { to { transform: rotate(360deg); } }
.music-disc.paused { animation-play-state: paused; }

/* ============================================================
   进度条
   ============================================================ */
.progress-wrap {
    position:absolute;
    left:0; right:0;
    bottom: var(--nav-h);
    height:2px;
    background: rgba(255,255,255,.16);
    z-index:16;
    overflow:hidden;
}
.buffer-bar { position:absolute; left:0; top:0; height:100%; background: rgba(255,255,255,.4); width:0; }
.play-bar   { position:absolute; left:0; top:0; height:100%; background: var(--dy-red); width:0; z-index:2; }

/* ============================================================
   底部导航（抖音）
   ============================================================ */
.nav {
    position:fixed; bottom:0; left:0; right:0;
    height: var(--nav-h);
    background: #000;
    display:flex; align-items:center; justify-content:space-around;
    color: rgba(255,255,255,.55);
    z-index:30;
    border-top:1px solid rgba(255,255,255,.07);
    padding-bottom: env(safe-area-inset-bottom);
}
.nav .item {
    flex:1; text-align:center; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; min-width:0;
    transition: color .2s var(--dy-ease);
}
.nav .item .nav-icon { position:relative; display:flex; align-items:center; justify-content:center; line-height:0; }
.nav .item .nav-icon svg { width:26px; height:26px; fill: currentColor; transition: transform .22s var(--dy-ease); }
/* 抖音：未选中=描边，选中=实心 */
.nav .item .nav-icon .ic-on,
.nav .item .nav-icon .ic-off { display:flex; align-items:center; justify-content:center; }
.nav .item .nav-icon .ic-on { display:none; }
.nav .item.active .nav-icon .ic-on { display:flex; }
.nav .item.active .nav-icon .ic-off { display:none; }
.nav .item span:last-child { font-size:11px; white-space:nowrap; letter-spacing:.2px; }
.nav .item:active .nav-icon svg { transform: scale(.86); }
.nav .item.active { color:#fff; font-weight:600; }
.nav .item.active .nav-icon svg { transform: scale(1.04); }

/* ============================================================
   播放倍速
   ============================================================ */
.topbar-btn.speed-btn {
    width:auto;
    padding:0 11px;
    gap:5px;
    border-radius:99px;
    display:inline-flex;
    align-items:center;
}
.topbar-btn.speed-btn svg { fill:#fff; }
.topbar-btn .speed-val {
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.2px;
    font-variant-numeric: tabular-nums;
    color:#fff;
}
.topbar-btn.speed-btn.active { background: var(--dy-red); border-color: var(--dy-red); }

.speed-panel {
    position:absolute;
    top: calc(max(14px, env(safe-area-inset-top)) + 46px);
    right:14px;
    z-index:200;
    background: rgba(28,28,30,.95);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-radius:18px;
    padding:14px 16px 16px;
    width:236px;
    border:1px solid rgba(255,255,255,.1);
    box-shadow: 0 14px 40px rgba(0,0,0,.55);
    display:none;
    transform-origin: top right;
}
.speed-panel.show { display:block; animation: panelIn .18s var(--dy-ease); }
.speed-panel-title {
    display:flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:600; color: var(--dy-text-2);
    margin-bottom:11px;
}
.speed-panel-title svg { fill: var(--dy-text-2); }
.speed-panel .speed-options { display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; }
.speed-panel .speed-option {
    text-align:center; padding:8px 0;
    background: rgba(255,255,255,.09);
    border-radius:99px; font-size:13px; font-weight:600; color:#d1d1d6;
    cursor:pointer; transition: all .2s var(--dy-ease);
    border:1px solid transparent;
} 
.speed-panel .speed-option.active {
    background: var(--dy-red); color:#fff;
    box-shadow:0 4px 12px rgba(254,44,85,.4);
}
.speed-panel .speed-option:active { transform: scale(.94); }

/* ============================================================
   全屏模式
   ============================================================ */
#videoPage:fullscreen .info-box { display:none !important; }
#videoPage:fullscreen .nav { display:none !important; }
#videoPage:fullscreen .toolbar .tool:not(#videoUserBtn) { display:none !important; }
#videoPage:fullscreen .progress-wrap { bottom:0; }
#videoPage:fullscreen .toolbar { bottom:24px; }
#videoPage:fullscreen .play-settings-panel { z-index:250 !important; }

#videoPage:-webkit-full-screen .info-box { display:none !important; }
#videoPage:-webkit-full-screen .nav { display:none !important; }
#videoPage:-webkit-full-screen .toolbar .tool:not(#videoUserBtn) { display:none !important; }
#videoPage:-webkit-full-screen .progress-wrap { bottom:0; }
#videoPage:-webkit-full-screen .toolbar { bottom:24px; }
#videoPage:-webkit-full-screen .play-settings-panel { z-index:250 !important; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 480px) {
    .tool .tool-icon svg { width:31px; height:31px; }
    .tool-count, .tool .tool-label { font-size:11.5px; }
    .toolbar { right:8px; gap:14px; }
    .user-avatar-tool, .user-avatar-img { width:46px; height:46px; }
    .music-disc { width:40px; height:40px; }
    .music-disc img { width:22px; height:22px; }
    .info-box { left:12px; width: calc(100% - 92px); }
    .at-text { font-size:16px; }
    .video-desc { font-size:13.5px; }
    .tags span { font-size:13px; }
}
@media (max-height: 620px) {
    .toolbar { gap:11px; }
    .tool .tool-icon svg { width:28px; height:28px; }
    .music-disc { width:36px; height:36px; }
    .music-disc img { width:20px; height:20px; }
}

/* ============================================================
   接口列表面板
   ============================================================ */
.api-list-panel { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; display:none; }
.api-list-panel.show { display:block; }
.api-panel-mask { position:absolute; inset:0; background:rgba(0,0,0,.6); animation: apiFadeIn .2s ease; }
@keyframes apiFadeIn { from { opacity:0; } to { opacity:1; } }
.api-panel-body {
    position:absolute; top:0; left:0; bottom:0;
    width:84%; max-width:360px;
    background:#141416; color:#fff;
    display:flex; flex-direction:column;
    box-shadow:4px 0 26px rgba(0,0,0,.55);
    animation: apiSlideIn .26s var(--dy-ease);
}
@keyframes apiSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.api-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:max(18px, env(safe-area-inset-top)) 18px 18px;
    border-bottom:1px solid #26262a; flex-shrink:0;
}
.api-panel-title { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.api-panel-title svg { fill: var(--dy-red); }
.api-panel-close {
    background:none; border:none; color:#8e8e93; cursor:pointer; padding:2px;
    display:flex; align-items:center; justify-content:center;
    transition: color .2s, transform .2s;
}
.api-panel-close svg { fill: currentColor; }
.api-panel-close:hover { color: var(--dy-red); transform: rotate(90deg); }
.api-panel-content { flex:1; overflow-y:auto; padding:10px 0; }
.api-loading, .api-empty { text-align:center; color:#8e8e93; padding:60px 20px; font-size:14px; }
.api-item {
    display:flex; align-items:center; gap:12px;
    padding:14px 18px;
    border-bottom:1px solid rgba(255,255,255,.05);
    transition: background .15s;
}
.api-item:active { background: rgba(255,255,255,.04); }
.api-item-index {
    width:26px; height:26px; border-radius:50%;
    background: rgba(254,44,85,.16); color: var(--dy-red);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; flex-shrink:0;
}
.api-item-info { flex:1; min-width:0; }
.api-item-name { font-size:14px; font-weight:600; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.api-item-url { font-size:11px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px; }
.api-item-url .api-url-hidden {
    display:inline-flex; align-items:center; gap:3px;
    color:#fbbf24; background: rgba(251,191,36,.12);
    border:1px solid rgba(251,191,36,.28);
    padding:1px 8px; border-radius:10px;
    font-size:10px; font-weight:600; letter-spacing:.3px; font-style:normal; line-height:1.6;
}
.api-item-url .api-url-hidden svg { fill:#fbbf24; }
.api-item-meta { display:flex; gap:8px; align-items:center; }
.api-priority-badge {
    font-size:10px; padding:1px 6px;
    background: rgba(254,44,85,.16); border:1px solid rgba(254,44,85,.32);
    color:#ff8fa6; border-radius:8px; font-weight:700;
}
.api-last-check { font-size:10px; color:#6b7280; }
.api-item-status { font-size:12px; font-weight:600; display:flex; align-items:center; gap:5px; flex-shrink:0; }
.api-item-status.online { color:#22c55e; }
.api-item-status.offline { color:#ef4444; }
.api-status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-online  { background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.6); }
.dot-offline { background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.6); }
.api-panel-footer {
    padding:12px 18px;
    border-top:1px solid #26262a;
    font-size:12px; color:#6b7280; flex-shrink:0; text-align:center;
}
.api-panel-footer svg { vertical-align:-2px; fill:#6b7280; }

/* 浅色模式 */
body.light-mode .api-menu-btn span { background:#1c1c1e; }
body.light-mode .api-menu-btn { background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.08); }
body.light-mode .api-panel-body { background:#fff; color:#1c1c1e; }
body.light-mode .api-panel-header { border-bottom-color:#e5e7eb; }
body.light-mode .api-panel-title { color:#111; }
body.light-mode .api-panel-close { color:#8e8e93; }
body.light-mode .api-item { border-bottom-color:#f2f2f7; }
body.light-mode .api-item-name { color:#1c1c1e; }
body.light-mode .api-item-url { color:#8e8e93; }
body.light-mode .api-last-check { color:#8e8e93; }
body.light-mode .api-panel-footer { border-top-color:#e5e7eb; color:#8e8e93; }
body.light-mode .api-loading, body.light-mode .api-empty { color:#8e8e93; }