/* duanju 播放器真实互动：右侧互动栏、评论抽屉与横竖屏同步状态。 */
.dj-favorite-btn .dj-icon{color:#fff;transition:color .15s ease,transform .2s ease}
.dj-favorite-btn.is-favorite .dj-icon{color:var(--dj-gold);transform:scale(1.06)}
.dj-rail-btn[disabled]{opacity:.58;pointer-events:none}

.dj-landscape-social button.is-liked{color:var(--dj-like)}
.dj-landscape-social button.is-favorite{color:var(--dj-gold)}
.dj-landscape-social button[disabled]{opacity:.52;pointer-events:none}

.dj-interaction-summary[data-summary-kind="hot"]{cursor:pointer}
.dj-interaction-summary[data-summary-kind="hot"] .dj-icon{color:var(--dj-gold)}
.dj-interaction-summary[data-summary-kind="intro"] .dj-icon{color:rgba(255,255,255,.72)}
.dj-interaction-summary[hidden]{display:none}

.dj-comment-drawer{z-index:56}
.dj-comment-drawer .dj-drawer-mask{background:rgba(0,0,0,.62)}
.dj-comment-drawer .dj-drawer-panel{
  left:50%;right:auto;width:min(100%,560px);height:min(82%,760px);max-height:none;
  padding-bottom:calc(var(--dj-safe-b) + 8px);
  background:#17171C;border:1px solid rgba(255,255,255,.08);border-bottom:0;
  border-radius:var(--dj-radius-lg) var(--dj-radius-lg) 0 0;
  box-shadow:0 -16px 40px rgba(0,0,0,.42);
  transform:translate(-50%,100%);
}
.dj-comment-drawer.is-open .dj-drawer-panel{transform:translate(-50%,0)}
.dj-comment-drawer .dj-drawer-head{min-height:56px;padding:14px 16px 10px;border-bottom:1px solid var(--dj-line)}
.dj-comment-drawer .dj-drawer-title{display:flex;align-items:baseline;gap:7px}
#dj-comment-count{font-family:var(--dj-font-num);font-size:var(--dj-fs-cap);color:var(--dj-text-sub)}
.dj-comment-drawer .dj-drawer-close{display:grid;place-items:center;width:36px;height:36px;border-radius:50%}
.dj-comment-drawer .dj-drawer-close:active{background:rgba(255,255,255,.08)}

.dj-comment-scroll{min-height:0;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 18px}
.dj-comment-status{padding:34px 12px;color:var(--dj-text-sub);text-align:center;font-size:var(--dj-fs-cap)}
.dj-comment-status:empty{display:none}
.dj-comment-list{display:flex;flex-direction:column}
.dj-comment-item{position:relative;padding:16px 0;border-bottom:1px solid var(--dj-line)}
.dj-comment-item.is-focus{padding-left:12px}
.dj-comment-item.is-focus::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:2px;background:var(--dj-cyan);box-shadow:var(--dj-glow-cyan);
}
.dj-comment-main{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px}
.dj-comment-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--dj-card-2)}
.dj-comment-body{min-width:0}
.dj-comment-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dj-text-sub);font-size:var(--dj-fs-cap);font-weight:600}
.dj-comment-content{margin:5px 0 8px;color:var(--dj-text);font-size:var(--dj-fs-body);line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}
.dj-comment-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
.dj-comment-time{color:var(--dj-text-weak);font-family:var(--dj-font-num);font-size:var(--dj-fs-micro);font-variant-numeric:tabular-nums}
.dj-comment-actions{display:flex;align-items:center;gap:4px}
.dj-comment-action{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:36px;height:30px;padding:0 7px;
  border-radius:6px;color:var(--dj-text-sub);font-size:var(--dj-fs-cap)
}
.dj-comment-action .dj-icon{font-size:16px}
.dj-comment-action:active{background:rgba(255,255,255,.08)}
.dj-comment-action.is-liked{color:var(--dj-like)}
.dj-comment-action[disabled]{opacity:.5;pointer-events:none}

.dj-comment-replies{margin:12px 0 0 46px;padding-left:12px;border-left:1px solid rgba(255,255,255,.12)}
.dj-comment-reply{padding:10px 0}
.dj-comment-reply+.dj-comment-reply{border-top:1px solid rgba(255,255,255,.06)}
.dj-comment-reply .dj-comment-main{grid-template-columns:28px minmax(0,1fr);gap:9px}
.dj-comment-reply .dj-comment-avatar{width:28px;height:28px}
.dj-comment-reply .dj-comment-content{margin-top:3px;font-size:var(--dj-fs-cap)}
.dj-comment-more{
  display:block;width:100%;height:42px;margin-top:12px;border:1px solid var(--dj-line);border-radius:6px;
  color:var(--dj-text-sub);font-size:var(--dj-fs-cap)
}
.dj-comment-more[hidden]{display:none}
.dj-comment-more:active{background:rgba(255,255,255,.06)}

.dj-comment-compose{flex:none;padding:10px 14px 8px;border-top:1px solid var(--dj-line);background:#17171C}
.dj-comment-replying{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 8px;color:var(--dj-text-sub);font-size:var(--dj-fs-cap)}
.dj-comment-replying[hidden]{display:none}
.dj-comment-replying span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dj-comment-replying button{flex:none;color:var(--dj-accent)}
.dj-comment-input-row{display:grid;grid-template-columns:minmax(0,1fr) 58px;align-items:end;gap:9px}
#dj-comment-input{
  display:block;width:100%;min-height:42px;max-height:96px;resize:none;overflow-y:auto;
  border:1px solid rgba(255,255,255,.13);border-radius:8px;background:var(--dj-card-2);color:var(--dj-text);
  padding:10px 12px;font:inherit;line-height:1.45;outline:0
}
#dj-comment-input::placeholder{color:var(--dj-text-weak)}
#dj-comment-input:focus{border-color:rgba(255,46,99,.72);box-shadow:0 0 0 2px rgba(255,46,99,.12)}
.dj-comment-submit{height:42px;border-radius:8px;background:var(--dj-accent);color:#fff;font-weight:700}
.dj-comment-submit:disabled{opacity:.46;cursor:default}
.dj-comment-compose-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px;padding:6px 3px 0;color:var(--dj-text-weak);font-size:var(--dj-fs-micro)}
#dj-comment-remaining{font-family:var(--dj-font-num);font-variant-numeric:tabular-nums}
.dj-comment-verify{display:flex;align-items:center;gap:7px}
.dj-comment-verify[hidden]{display:none}
.dj-comment-verify input{width:82px;height:30px;border:1px solid var(--dj-line);border-radius:6px;background:var(--dj-card-2);color:#fff;padding:0 8px;outline:0}
.dj-comment-verify input:focus{border-color:var(--dj-accent)}
.dj-comment-verify button{width:78px;height:30px;overflow:hidden;border-radius:6px;background:#fff}
.dj-comment-verify img{width:100%;height:100%;object-fit:cover}

.dj-comment-drawer button:focus-visible,
.dj-comment-drawer textarea:focus-visible,
.dj-comment-drawer input:focus-visible{outline:2px solid var(--dj-cyan);outline-offset:2px}

@media (max-height:640px){
  .dj-comment-drawer .dj-drawer-panel{height:92%}
  .dj-comment-item{padding-top:12px;padding-bottom:12px}
}

@media (prefers-reduced-motion:reduce){
  .dj-comment-drawer .dj-drawer-panel,.dj-comment-drawer .dj-drawer-mask{transition-duration:.001ms}
}