/* ═══════════════════════════════════════════
   Short Video Feed — TikTok-style CSS
   PC竖屏居中 + 移动端全屏
   ═══════════════════════════════════════════ */

/* ── Reset & Base ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#000;
  --surface:rgba(255,255,255,0.06);
  --surface-solid:#111;
  --text:#fff;
  --text-dim:rgba(255,255,255,0.55);
  --text-muted:rgba(255,255,255,0.35);
  --accent:#fe2c55;
  --accent-glow:rgba(254,44,85,0.35);
  --like-active:#fe2c55;
  --follow-bg:#fe2c55;
  --panel-bg:rgba(22,22,28,0.97);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --feed-width:100vw;
  --feed-height:100vh;
  --feed-height:100dvh;
}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-user-select:none;
}

/* PC端竖屏容器 */
@media (min-width:768px){
  :root{
    --feed-width:420px;
  }
  #app{
    width:var(--feed-width);
    max-width:420px;
    margin:0 auto;
    position:relative;
    height:100vh;
    height:100dvh;
    box-shadow:0 0 60px rgba(0,0,0,0.8);
    border-left:1px solid rgba(255,255,255,0.04);
    border-right:1px solid rgba(255,255,255,0.04);
  }
  body{
    background:#0a0a0a;
  }
}

/* 移动端全屏 */
@media (max-width:767px){
  #app{
    width:100%;
    height:100vh;
    height:100dvh;
  }
}

/* ── Top Bar ── */
.top-bar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:var(--feed-width);
  max-width:420px;
  z-index:100;
  display:flex;
  align-items:center;
  padding:12px 14px;
  padding-top:calc(12px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(0,0,0,0.55) 0%,transparent 100%);
  pointer-events:none;
}
@media (max-width:767px){
  .top-bar{
    width:100%;
    left:0;
    transform:none;
  }
}
.top-bar > *{pointer-events:auto}
.top-bar__back{
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  opacity:0.85;
  transition:opacity .2s;
}
.top-bar__back:active{opacity:0.5}
.top-bar__tabs{
  flex:1;
  display:flex;
  justify-content:center;
  gap:20px;
}
.top-bar__tab{
  font-size:16px;
  font-weight:600;
  opacity:0.5;
  cursor:pointer;
  transition:opacity .2s;
  letter-spacing:-0.2px;
}
.top-bar__tab.active{opacity:1}
.top-bar__spacer{width:22px}

/* ── Feed Container ── */
.feed{
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  position:relative;
  touch-action:pan-y;
}

/* ── Single Slide ── */
.slide{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  will-change:transform;
  transition:transform .35s cubic-bezier(0.23,1,0.32,1);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

.slide__video-wrap{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.slide__video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#000;
}


/* 播放/暂停图标 */
.slide__play-icon{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.6);
  z-index:5;
  opacity:0;
  pointer-events:none;
  transition:none;
}
.slide__play-icon.flash{
  animation:play-flash .4s ease-out forwards;
}
@keyframes play-flash{
  0%{opacity:0.8;transform:translate(-50%,-50%) scale(0.6)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}
}

/* 暂停状态持续显示 */
.slide__pause-overlay{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.slide__pause-overlay.show{opacity:0.6}

/* 进度条 */
.slide__progress{
  position:absolute;
  bottom:0;left:0;right:0;
  height:2px;
  z-index:6;
  background:rgba(255,255,255,0.15);
}
.slide__progress-bar{
  height:100%;
  width:0;
  background:#fff;
  transition:width .25s linear;
}
.slide__progress-bar.speeding{
  background:var(--accent);
}

/* ── Right Side Actions ── */
.slide__actions{
  position:absolute;
  right:10px;
  bottom:140px;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

/* 头像 + 关注 */
.action-avatar{
  position:relative;
  margin-bottom:6px;
}
.action-avatar__img{
  width:44px;height:44px;
  border-radius:50%;
  border:2px solid #fff;
  object-fit:cover;
  display:block;
  background:#333;
}
.action-avatar__follow{
  position:absolute;
  bottom:-8px;left:50%;
  transform:translateX(-50%);
  width:20px;height:20px;
  border-radius:50%;
  background:var(--follow-bg);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .15s, background .2s;
}
.action-avatar__follow:active{transform:translateX(-50%) scale(0.85)}
.action-avatar__follow.followed{background:#666}
.action-avatar__follow svg{width:12px;height:12px}

/* 通用 Action 按钮 */
.action-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.action-btn__icon{
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s, background .2s;
}
.action-btn:active .action-btn__icon{
  transform:scale(0.85);
}
.action-btn__label{
  font-size:11px;
  color:var(--text-dim);
  line-height:1;
}

/* 点赞激活 */
.action-btn.liked .action-btn__icon{
  background:rgba(254,44,85,0.15);
}
.action-btn.liked .action-btn__icon svg{
  fill:var(--like-active);
  stroke:var(--like-active);
}
.action-btn.liked .action-btn__label{
  color:var(--like-active);
}

/* 点赞动画 */
@keyframes like-pop{
  0%{transform:scale(1)}
  30%{transform:scale(1.35)}
  60%{transform:scale(0.9)}
  100%{transform:scale(1)}
}
.action-btn.liked .action-btn__icon{
  animation:like-pop .4s ease;
}

/* ── Bottom Info ── */
.slide__info{
  position:absolute;
  left:0;right:68px;
  bottom:28px;
  z-index:8;
  padding:0 14px;
  padding-bottom:var(--safe-bottom);
}
.slide__info-author{
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  letter-spacing:-0.1px;
}
.slide__info-title{
  font-size:13px;
  color:rgba(255,255,255,0.85);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
}

/* ── Speed Badge ── */
.speed-badge{
  position:fixed;
  top:70px;
  left:50%;
  transform:translateX(-50%) scale(0.85);
  z-index:200;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
  padding:7px 18px;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:7px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.speed-badge.show{
  opacity:1;
  transform:translateX(-50%) scale(1);
}

/* ── Comment Panel ── */
.comment-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:500;
  background:rgba(0,0,0,0.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.comment-overlay.open{
  opacity:1;
  pointer-events:auto;
}

/* PC端：面板居中对齐视频列 */
.comment-panel{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%) translateY(100%);
  width:var(--feed-width);
  max-width:420px;
  height:65vh;
  background:var(--panel-bg);
  border-radius:14px 14px 0 0;
  display:flex;
  flex-direction:column;
  transition:transform .35s cubic-bezier(0.23,1,0.32,1);
  overflow:hidden;
}
.comment-overlay.open .comment-panel{
  transform:translateX(-50%) translateY(0);
}

/* 移动端：全屏宽度，left 归零 */
@media (max-width:767px){
  .comment-panel{
    width:100%;
    left:0;
    right:0;
    max-width:100%;
    transform:translateY(100%);
  }
  .comment-overlay.open .comment-panel{
    transform:translateY(0);
  }
}

.comment-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
}
.comment-panel__count{
  font-size:14px;font-weight:600;
}
.comment-panel__close{
  background:none;border:none;color:#fff;
  cursor:pointer;opacity:0.6;
  transition:opacity .2s;
  padding:4px;
}
.comment-panel__close:active{opacity:0.3}

.comment-panel__list{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 0;
}

.comment-panel__loading,
.comment-panel__empty{
  text-align:center;
  color:var(--text-dim);
  font-size:13px;
  padding:30px 16px;
}

/* 单条评论 */
.comment-item{
  display:flex;
  gap:10px;
  padding:10px 16px;
}
.comment-item__avatar{
  width:32px;height:32px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:#333;
}
.comment-item__body{flex:1;min-width:0}
.comment-item__name{
  font-size:12px;
  color:var(--text-dim);
  margin-bottom:3px;
}
.comment-item__text{
  font-size:13px;
  color:rgba(255,255,255,0.9);
  line-height:1.5;
  word-break:break-word;
}
.comment-item__meta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:6px;
  font-size:11px;
  color:var(--text-muted);
}

/* 评论输入 */
.comment-panel__input{
  flex-shrink:0;
  border-top:1px solid rgba(255,255,255,0.06);
  padding:10px 14px;
  padding-bottom:calc(10px + var(--safe-bottom));
  background:rgba(0,0,0,0.3);
}
.comment-captcha-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.captcha-img{
  height:34px;
  border-radius:6px;
  cursor:pointer;
  flex-shrink:0;
}
.captcha-input{
  flex:1;
  height:34px;
  padding:0 10px;
  background:var(--surface);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  color:#fff;
  font-size:13px;
  outline:none;
}
.captcha-input:focus{border-color:rgba(255,255,255,0.2)}

.comment-input-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.comment-input{
  flex:1;
  height:38px;
  padding:0 14px;
  background:var(--surface);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  color:#fff;
  font-size:14px;
  outline:none;
  transition:border-color .2s;
}
.comment-input:focus{
  border-color:rgba(255,255,255,0.2);
}
.comment-input::placeholder{color:var(--text-muted)}
.comment-send{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--accent);
  border:none;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:opacity .2s, transform .15s;
}
.comment-send:active{transform:scale(0.9)}
.comment-send:disabled{opacity:0.4}

/* ── Global Loader ── */
.global-loader{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  transition:opacity .3s;
}
.global-loader.hidden{
  opacity:0;
  pointer-events:none;
}
.global-loader__spinner{
  width:28px;height:28px;
  border:2.5px solid rgba(255,255,255,0.1);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Toast ── */
.toast{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.9);
  z-index:999;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  font-size:13px;
  font-weight:500;
  padding:10px 22px;
  border-radius:10px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s;
  text-align:center;
  max-width:280px;
}
.toast.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* ── Scrollbar hide (PC) ── */
.comment-panel__list::-webkit-scrollbar{width:0;display:none}
.comment-panel__list{scrollbar-width:none}
.feed::-webkit-scrollbar{width:0;display:none}
.feed{scrollbar-width:none}

/* ── ★ 线路选择面板 ── */
.line-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:500;
  background:rgba(0,0,0,0.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.line-overlay.open{
  opacity:1;
  pointer-events:auto;
}

.line-panel{
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%) translateY(100%);
  width:var(--feed-width);
  max-width:420px;
  background:var(--panel-bg);
  border-radius:14px 14px 0 0;
  display:flex;
  flex-direction:column;
  transition:transform .35s cubic-bezier(0.23,1,0.32,1);
  overflow:hidden;
  padding-bottom:calc(10px + var(--safe-bottom));
}
@media (max-width:767px){
  .line-panel{
    width:100%;
    left:0;
    transform:translateX(0) translateY(100%);
  }
}
.line-overlay.open .line-panel{
  transform:translateX(-50%) translateY(0);
}
@media (max-width:767px){
  .line-overlay.open .line-panel{
    transform:translateX(0) translateY(0);
  }
}

.line-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.line-panel__title{
  font-size:14px;font-weight:600;
}
.line-panel__close{
  background:none;border:none;color:#fff;
  cursor:pointer;opacity:0.6;
  transition:opacity .2s;padding:4px;
}
.line-panel__close:active{opacity:0.3}

.line-panel__list{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px;
}

.line-option{
  width:100%;
  padding:13px 16px;
  background:var(--surface);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  color:var(--text-dim);
  font-size:14px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.line-option:active{
  background:rgba(255,255,255,0.12);
}
.line-option.active{
  background:rgba(254,44,85,0.12);
  border-color:rgba(254,44,85,0.4);
  color:#fff;
}
.line-option.active::after{
  content:'✓';
  float:right;
  color:var(--accent);
}