/* ============================================
   视频播放页样式
   ============================================ */

.video-page {
    max-width: 1400px;
    margin: 84px auto 0;
    padding: 20px;
    display: flex;
    gap: 20px;
    color: #212121;
    background: #f4f5f7;
}

.video-page .video-title {
    color: #212121;
}

.video-page .video-meta {
    color: #999;
}

.video-page .video-desc {
    color: #333;
}

.video-page .recommend-title {
    color: #212121;
}

.video-page .recommend-meta {
    color: #999;
}

.video-page .sidebar-section h3 {
    color: #212121;
}

.video-container {
    flex: 1;
    min-width: 0;
}

/* 视频播放器 */
.player-wrapper {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
}

#videoPlayer {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.danmaku-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

/* 视频水印 */
.video-watermark {
    position: absolute;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(14px, 2vw, 24px);
    font-weight: 400;
    letter-spacing: 2px;
    pointer-events: none;
    z-index: 2;
    user-select: none;
    padding: clamp(10px, 2.5vh, 24px) clamp(16px, 2vw, 30px);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(19px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.watermark-top-right {
    top: 6px;
    right: 6px;
}

.watermark-bottom-right {
    bottom: 6px;
    right: 6px;
}

/* 自定义播放器控件 */
.custom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding: 30px 12px 8px;
    opacity: 0;
    transition: opacity 0.3s;
}

.player-wrapper:hover .custom-controls,
.player-wrapper.show-controls .custom-controls {
    opacity: 1;
}

/* 移动端：暂停时始终显示控件 */
@media (max-width: 768px) {
    .player-wrapper.show-controls .custom-controls {
        opacity: 1;
    }

    /* 确保控件可点击 */
    .custom-controls {
        pointer-events: auto;
    }

    .custom-controls button,
    .custom-controls .progress-bar,
    .custom-controls .volume-slider {
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

.controls-progress {
    padding: 0 0 6px;
}

.progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height 0.15s;
}

.progress-bar:hover {
    height: 5px;
}

.progress-buffered {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    pointer-events: none;
}

.progress-played {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--bili-pink, #ff9a56);
    border-radius: 2px;
    pointer-events: none;
}

.progress-thumb {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--bili-pink, #ff9a56);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s;
}

.progress-bar:hover .progress-thumb {
    opacity: 1;
}

.controls-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 140px;
}

.controls-left,
.controls-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ctrl-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.ctrl-btn:hover {
    background: rgba(255,255,255,0.15);
}

.ctrl-btn.active {
    color: var(--bili-pink, #ff9a56);
}

.ctrl-volume {
    display: flex;
    align-items: center;
    gap: 2px;
}

.volume-slider-wrap {
    width: 0;
    overflow: hidden;
    transition: width 0.2s;
}

.ctrl-volume:hover .volume-slider-wrap {
    width: 70px;
}

.volume-slider {
    width: 64px;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    margin: 0 4px;
}

.volume-level {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    pointer-events: none;
}

.ctrl-time {
    color: #fff;
    font-size: 12px;
    margin-left: 8px;
    white-space: nowrap;
    user-select: none;
}

/* 移动端控件 */
@media (max-width: 768px) {
    .custom-controls {
        padding: 20px 8px 6px;
    }

    .controls-bottom {
        margin-right: 100px;
    }

    .ctrl-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .ctrl-time {
        font-size: 11px;
    }

    .volume-slider-wrap {
        display: none;
    }
}

.danmaku-item {
    position: absolute;
    white-space: nowrap;
    font-size: 24px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    animation: danmaku-scroll 10s linear forwards;
}

.danmaku-item.type-top {
    top: 10%;
    left: 50%;
    margin-left: -50%;
}

.danmaku-item.type-bottom {
    bottom: 10%;
    left: 50%;
    margin-left: -50%;
}

@keyframes danmaku-scroll {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

/* 视频信息 */
.video-info-section {
    padding: 20px 0;
}

.video-title {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 1.4;
}

.video-meta {
    display: flex;
    gap: 20px;
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.video-meta i {
    margin-right: 5px;
}

/* 操作按钮 */
.video-actions {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-primary);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.action-btn:hover {
    background: #e3e5e7;
}

.action-btn.active {
    background: var(--bili-pink);
    color: white;
}

.action-count {
    color: var(--text-secondary);
}

.action-btn.active .action-count {
    color: white;
}

/* UP主信息 */
.uploader-info {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.uploader-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
}

.uploader-detail {
    flex: 1;
}

.uploader-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

.uploader-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.follow-btn {
    padding: 8px 24px;
    background: var(--bili-pink);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.follow-btn:hover {
    background: var(--bili-pink-light);
}

.follow-btn.followed {
    background: var(--bg-primary);
    color: var(--text-secondary);
}

/* 视频简介 */
.video-desc {
    padding: 20px 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* 弹幕输入 */
.danmaku-input {
    display: flex;
    gap: 10px;
    padding: 15px 0;
}

.danmaku-input input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

.danmaku-input input:focus {
    border-color: var(--bili-blue);
}

.danmaku-input button {
    padding: 12px 24px;
    background: var(--bili-blue);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.danmaku-input button:hover {
    background: var(--bili-blue-light);
}

/* 侧边栏 */
.video-sidebar {
    width: 350px;
    flex-shrink: 0;
}

.sidebar-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.sidebar-section h3 {
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* 推荐视频列表 */
.recommend-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.recommend-item {
    display: flex;
    gap: 12px;
    cursor: pointer;
}

.recommend-item:hover .recommend-title {
    color: var(--bili-blue);
}

.recommend-cover {
    width: 160px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.recommend-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommend-info {
    flex: 1;
    min-width: 0;
}

.recommend-title {
    font-size: 14px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
    transition: color 0.3s;
}

.recommend-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 评论区 */
.comment-section {
    width: 100%;
    margin-top: 20px;
    padding: 0;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 2px solid var(--bili-blue);
}

.comment-header h3 {
    font-size: 20px;
}

.comment-sort button {
    padding: 6px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    transition: color 0.3s;
}

.comment-sort button.active {
    color: var(--bili-blue);
}

/* 评论输入 */
.comment-input {
    display: flex;
    gap: 15px;
    padding: 20px 0;
}

.comment-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.comment-input textarea {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    min-height: 80px;
    outline: none;
}

.comment-input textarea:focus {
    border-color: var(--bili-blue);
}

.comment-input button {
    align-self: flex-end;
    padding: 10px 24px;
    background: var(--bili-blue);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.comment-input button:hover {
    background: var(--bili-blue-light);
}

/* 评论列表 */
.comment-list {
    padding: 10px 0;
}

.comment-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.comment-main {
    display: flex;
    gap: 15px;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.comment-body {
    flex: 1;
}

.comment-user {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.comment-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.comment-footer {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.comment-footer span {
    cursor: pointer;
    transition: color 0.3s;
}

.comment-footer span:hover {
    color: var(--bili-blue);
}

/* 回复列表 */
.reply-list {
    margin-left: 55px;
    padding: 15px;
    background: var(--bg-primary);
    border-radius: 8px;
}

.reply-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.reply-item:last-child {
    border-bottom: none;
}

.reply-content {
    font-size: 14px;
    line-height: 1.6;
}

.reply-user {
    color: var(--bili-blue);
    margin-right: 5px;
}

.reply-to {
    color: var(--text-secondary);
    margin-right: 5px;
}

.reply-time {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.more-replies {
    padding: 10px 0;
    color: var(--bili-blue);
    cursor: pointer;
    font-size: 14px;
}

/* 响应式 */
@media (max-width: 1200px) {
    .video-sidebar {
        width: 300px;
    }
}

@media (max-width: 900px) {
    .video-page {
        flex-direction: column;
    }

    .video-sidebar {
        width: 100%;
    }

    .recommend-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .recommend-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 600px) {
    .video-actions {
        flex-wrap: wrap;
    }

    .action-btn {
        flex: 1;
        justify-content: center;
    }

    .recommend-item {
        width: 100%;
    }
}

/* ============================================
   视频播放页移动端UI组件优化
   ============================================ */

@media (max-width: 768px) {
    .video-page {
        margin-top: calc(var(--header-height, 64px) + 8px);
        padding: 12px;
        gap: 12px;
    }

    .player-wrapper {
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .video-title {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .video-meta {
        font-size: 13px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .video-actions {
        gap: 8px;
        padding: 12px 0;
    }

    .action-btn {
        padding: 10px 12px;
        font-size: 13px;
        border-radius: 16px;
        background: var(--bg-primary);
        border: none;
    }

    .action-btn.active {
        background: var(--bili-pink);
        color: white;
    }

    .action-count {
        font-size: 12px;
    }

    .uploader-info {
        padding: 16px 0;
        gap: 12px;
    }

    .uploader-avatar {
        width: 48px;
        height: 48px;
        margin-right: 12px;
    }

    .uploader-name {
        font-size: 15px;
    }

    .uploader-desc {
        font-size: 12px;
    }

    .follow-btn {
        padding: 8px 20px;
        font-size: 13px;
    }

    .video-desc {
        font-size: 13px;
        padding: 16px 0;
    }

    .danmaku-input {
        gap: 8px;
        padding: 12px 0;
    }

    .danmaku-input input {
        padding: 12px;
        font-size: 14px;
        border-radius: 20px;
    }

    .danmaku-input button {
        padding: 12px 20px;
        border-radius: 20px;
        font-size: 14px;
    }

    .comment-section {
        margin-top: 16px;
    }

    .comment-header {
        padding: 16px 0;
    }

    .comment-header h3 {
        font-size: 16px;
    }

    .comment-input {
        gap: 10px;
        padding: 16px 0;
    }

    .comment-avatar {
        width: 36px;
        height: 36px;
    }

    .comment-input textarea {
        padding: 12px;
        font-size: 14px;
        min-height: 70px;
        border-radius: 20px;
    }

    .comment-input button {
        padding: 10px 20px;
        border-radius: 20px;
    }

    .comment-item {
        padding: 16px 0;
    }

    .comment-main {
        gap: 10px;
    }

    .comment-avatar {
        width: 36px;
        height: 36px;
    }

    .comment-text {
        font-size: 14px;
    }

    .comment-footer {
        gap: 16px;
        font-size: 12px;
    }

    .reply-list {
        margin-left: 46px;
        padding: 12px;
    }

    .reply-item {
        padding: 10px 0;
    }

    .reply-content {
        font-size: 13px;
    }

    .sidebar-section {
        padding: 16px;
    }

    .sidebar-section h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .recommend-cover {
        width: 120px;
        height: 75px;
    }

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

    .recommend-meta {
        font-size: 11px;
    }
}