/* 全局及主体样式：移除边距和填充，确保全屏铺满 */
body {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: flex-start; /* 顶部对齐 */
    min-height: 100vh; /* 最小高度占满视口 */
    margin: 0; /* 移除 body 默认外边距 */
    font-family: Arial, sans-serif; /* 字体设置 */
    padding: 0; /* 移除 body 默认内边距 */
    box-sizing: border-box; /* 盒模型为边框盒 */
    width: 100vw; /* 宽度占满视口 */
    overflow-x: hidden; /* 防止水平滚动条 */
}

/* 主内容容器：左右布局，增加播放器和列表之间的间距 */
.main-content-wrapper {
    display: flex;
    width: 100%; /* 宽度自适应 */
    max-width: 1100px; /* 桌面端最大宽度 */
    gap: 32px; /* 播放器和列表之间的间隔改为 32px */
    background-color: #fff; /* 背景色 */
    box-shadow: none; /* 移除阴影 */
    border-radius: 0; /* 移除圆角 */
    padding: 0; /* 移除内边距 */
    box-sizing: border-box;
}

/* 播放器和信息区域的容器 */
.player-and-info {
    flex-shrink: 0; /* 不收缩 */
    width: 450px; /* 桌面端播放器固定宽度 */
    display: flex;
    flex-direction: column; /* 垂直排列 */
    background-color: #fff; /* 播放器区域的背景色，保持白色 */
    border-radius: 8px; /* 播放器区域圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 播放器区域阴影 */
    overflow: hidden; /* 确保内容在圆角内 */
}

/* 视频播放器容器 */
.video-container {
    width: 100%; /* 填充父容器宽度 */
    aspect-ratio: 9 / 16; /* 保持 9:16 宽高比 (竖屏视频常用) */
    background-color: #000; /* 黑色背景 */
    box-shadow: none; /* 移除阴影 */
    overflow: hidden; /* 隐藏溢出内容 */
    position: relative; /* 相对定位，用于子元素定位 */
    display: flex;
    justify-content: center;
    align-items: center;
}

video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 视频填充容器并裁剪 */
    cursor: pointer; /* 鼠标手势 */
}

/* 播放/暂停/加载覆盖层 */
.play-pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.3s ease; /* 过渡效果 */
    pointer-events: none; /* 不响应鼠标事件 */
}

.play-pause-overlay.show {
    opacity: 1; /* 显示时完全不透明 */
}

/* 播放图标 (自定义形状) */
.play-pause-overlay.play-icon::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #2b2b2b; /* 背景圆 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    transform: scale(1);
}
.play-pause-overlay.play-icon::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid transparent; /* 播放三角形 */
    border-bottom: 20px solid transparent;
    border-left: 30px solid white;
    margin-left: 5px;
    transition: transform 0.3s ease;
    transform: scale(1);
}

/* 暂停图标 */
.play-pause-overlay.pause-icon .fa-pause {
    position: relative;
    font-size: 40px;
    color: white;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}
/* 隐藏其他状态下的暂停图标 */
.play-pause-overlay:not(.show) .fa-pause,
.play-pause-overlay.play-icon .fa-pause,
.play-pause-overlay.loading-icon .fa-pause {
    opacity: 0;
    pointer-events: none;
}

/* 加载图标样式 (旋转动画) */
.play-pause-overlay.loading-icon .loader {
    position: relative;
    width: 80px;
    height: 80px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top: 6px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite; /* 旋转动画 */
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* 隐藏其他状态下的加载图标 */
.play-pause-overlay:not(.show) .loader,
.play-pause-overlay.play-icon .loader,
.play-pause-overlay.pause-icon .loader {
    opacity: 0;
    pointer-events: none;
}

/* 旋转动画关键帧 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 统一控制图标隐藏时的过渡效果 */
.play-pause-overlay:not(.show) .fa-pause,
.play-pause-overlay:not(.show) .loader,
.play-pause-overlay:not(.show).play-icon::before,
.play-pause-overlay:not(.show).play-icon::after {
    opacity: 0;
    transform: scale(0.5); /* 缩小并隐藏 */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 视频播放器控制条 */
.controls {
    display: flex;
    align-items: center;
    padding: 10px;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)); /* 底部渐变背景 */
}

.progress-bar-container {
    flex-grow: 1; /* 占据剩余空间 */
    height: 6px;
    background-color: #555; /* 进度条背景 */
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    margin: 0 10px;
}

.progress-bar {
    height: 100%;
    width: 0%; /* 初始宽度为0 */
    background-color: #007bff; /* 进度条颜色 */
    border-radius: 3px;
}

.progress-thumb {
    width: 12px;
    height: 12px;
    background-color: #fff; /* 进度条拖动圆点 */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%); /* 居中 */
    cursor: grab; /* 拖拽手势 */
    display: block;
}

/* 浮动时间显示 */
.floating-time-display {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* 侧边功能图标 (旧位置，将被新的 .video-action-buttons 替代) */
.sidebar-icons {
    position: absolute;
    bottom: 60px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 5;
}

.sidebar-icon {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}

.sidebar-icon:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* 视频标题和简介区域 */
.video-info {
    padding: 15px 20px;
    color: #333;
    background-color: #fff;
    box-sizing: border-box;
    border-top: 1px solid #eee; /* 顶部边框，与分享按钮分隔 */
}

.video-info h2 {
    margin: 0 0 10px 0;
    font-size: 24px;
    color: #333;
}

.video-info p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 15px; /* 简介下方增加一些间距 */
}

/* 分享按钮区域 */
.share-buttons {
    padding: 15px 20px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 按钮间距 */
    align-items: center;
    border-top: 1px solid #eee; /* 顶部边框与简介分隔 */
    box-sizing: border-box;
}

.share-buttons .share-label {
    font-size: 16px;
    color: #555;
    font-weight: bold;
    margin-right: 5px;
    flex-shrink: 0; /* 不收缩 */
}

.share-buttons .social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
    flex-shrink: 0; /* 不收缩 */
}

.share-buttons .social-icon:hover {
    transform: translateY(-2px); /* 悬停时上浮 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 社交媒体图标颜色 */
.share-buttons .fa-facebook-f { background-color: #1877F2; }
.share-buttons .fa-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.share-buttons .fa-whatsapp { background-color: #25D366; }
.share-buttons .fa-linkedin-in { background-color: #0A66C2; } /* LinkedIn 蓝色 */
.share-buttons .fa-x-twitter { background-color: #000000; } /* X/Twitter 黑色 */


/* 右侧列表区域样式 (美化版，新增边框和圆角，去除背景色) */
.right-list-area {
    flex-grow: 1; /* 占据剩余空间 */
    padding: 20px; /* 内部内边距 */
    background-color: #fff; /* 右侧列表容器背景色改为白色 */
    border-radius: 8px; /* 容器圆角 */
    border: 1px solid #ddd; /* 增加灰色边框 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 微妙的阴影 */
    overflow-y: auto; /* 允许内容滚动 */
    box-sizing: border-box;
}

.right-list-area h3 {
    margin-top: 0;
    color: #333;
    font-size: 20px;
    border-bottom: 1px solid #ddd; /* 更浅的底部边框 */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 列表容器改为 Grid 布局，实现两列 */
.right-list-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid; /* 启用 Grid 布局 */
    grid-template-columns: repeat(2, 1fr); /* 两列，每列等宽 */
    gap: 15px; /* 列和行之间的间距 */
}

/* 列表项的样式：图片和标题垂直排列的卡片式 */
.right-list-area li {
    display: flex; /* 启用 Flexbox */
    flex-direction: column; /* 内容垂直堆叠 */
    align-items: stretch; /* 项目拉伸以填充容器宽度 */
    padding: 10px; /* 每个列表项内部内边距 */
    border-bottom: none; /* 移除虚线边框 */
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* 悬停效果的平滑过渡 */
    box-sizing: border-box;
    background-color: #fff; /* 每个列表项的背景色 */
    border-radius: 6px; /* 列表项的柔和圆角 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); /* 列表项的微妙阴影 */
    overflow: hidden; /* 确保内容在圆角内 */
}

.right-list-area li:hover {
    background-color: #f0f0f0; /* 悬停时更浅的背景色 */
    transform: translateY(-2px); /* 悬停时轻微上浮 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 悬停时更明显的阴影 */
}

/* 修复链接标签对布局的影响 */
.right-list-area a {
    display: flex;
    flex-direction: column; /* 保持原有垂直布局 */
    text-decoration: none; /* 移除默认下划线 */
    color: inherit; /* 继承父元素颜色 */
}

/* 视频缩略图容器 - 用于定位时长标签 */
.video-thumb-container {
    position: relative;
    width: 100%; /* 确保容器宽度与图片一致 */
}

/* 缩略图样式 */
.right-list-area .thumbnail {
    width: 100%; /* 缩略图宽度占满父容器 */
    aspect-ratio: 16 / 9; /* 常用视频缩略图比例 */
    object-fit: cover; /* 确保图片覆盖整个区域，不失真 */
    border-radius: 4px 4px 0 0; /* 缩略图顶部圆角 */
    margin-bottom: 8px; /* 缩略图和标题之间的间距 */
    display: block; /* 防止图片下方出现额外空白 */
}

/* 视频时长标签样式 */
.video-duration {
    position: absolute;
    right: 4px; /* 距离右侧的距离 */
    bottom: 12px; /* 距离底部的距离，考虑到图片的margin-bottom */
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
    color: white; /* 白色文字 */
    padding: 2px 6px; /* 内边距 */
    font-size: 12px; /* 文字大小 */
    border-radius: 3px; /* 圆角 */
    z-index: 2; /* 确保显示在图片上方 */
    margin: 0; /* 移除默认外边距 */
}

/* 标题容器样式 */
.right-list-area .video-list-title {
    width: 100%; /* 标题宽度占满父容器 */
    padding: 0 8px 5px 8px; /* 标题周围添加微妙的内边距 */
    font-size: 14px; /* 略小、更干净的字体大小 */
    line-height: 1.5; /* 提升可读性的行高 */
    color: #333;
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出显示省略号 */
    display: -webkit-box; /* 启用多行文本省略 */
    -webkit-line-clamp: 2; /* 最多显示2行 */
    -webkit-box-orient: vertical;
    margin: 0; /* 移除默认外边距 */
}

/* 新增的按钮区域样式 */
.video-action-buttons {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    padding: 15px 20px;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; /* 与下方视频信息分隔 */
    box-sizing: border-box;
    flex-wrap: wrap; /* 允许换行 */
    gap: 10px; /* 左右两组按钮之间的间距 */
}

.bottom-controls-left,
.bottom-controls-right {
    display: flex;
    gap: 10px; /* 组内按钮之间的间距 */
    flex-wrap: wrap; /* 允许组内按钮换行 */
}

.action-button {
    background-color: #f0f0f0; /* 按钮背景色 */
    color: #555;
    padding: 8px 15px;
    border-radius: 20px; /* 圆角胶囊形状 */
    display: flex;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* 轻微阴影 */
    text-decoration: none; /* 移除链接下划线 */
}

.action-button i {
    font-size: 16px; /* 图标大小 */
}

.action-button:hover {
    background-color: #e0e0e0; /* 悬停时背景色变深 */
    transform: translateY(-1px); /* 悬停时轻微上浮 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* New styles for category navigation */
.category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px; /* Space between categories and heading */
}

.category-button {
    background-color: #e9e9e9;
    color: #333;
    padding: 8px 15px;
    border-radius: 8px; /* Slightly more rounded corners */
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap; /* Prevent text wrapping */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.category-button:hover {
    background-color: #dcdcdc;
    transform: translateY(-1px);
}


/* --- 响应式设计：手机自动适配 --- */
@media (max-width: 768px) {
    body {
        align-items: flex-start; /* 保持顶部对齐 */
        background-color: #fff; /* 手机端容器背景色 */
    }
    .header { /* 这会选择包含Logo和所有导航项的整个头部 */
        display: none !important; /* 在移动端隐藏整个头部 */
    }
    .main-content-wrapper {
        flex-direction: column; /* 主要内容变为垂直堆叠 */
        width: 100vw; /* 占据整个视口宽度 */
        max-width: 100vw;
        gap: 0; /* 手机端无间隔 */
    }

    .player-and-info {
        width: 100vw; /* 播放器区域占据整个视口宽度 */
        max-width: 100vw;
        border-radius: 0; /* 手机端移除播放器区域圆角和阴影 */
        box-shadow: none;
    }

    .video-container {
        width: 100vw;
        aspect-ratio: 9 / 16; /* 手机端保持 9:16 比例 */
        max-width: 100vw;
        height: auto;
    }

    /* 手机端隐藏旧的按钮组 */
    .mobile-header-buttons,
    .sidebar-icons {
        display: none !important;
    }

    /* 调整新的按钮组布局 */
    .video-action-buttons {
        flex-direction: column; /* 垂直堆叠按钮组 */
        align-items: stretch; /* 拉伸以填充宽度 */
        padding: 10px 15px; /* 调整内边距 */
        gap: 15px; /* 组之间的间距 */
    }

    .bottom-controls-left,
    .bottom-controls-right {
        justify-content: center; /* 组内按钮居中 */
        gap: 8px; /* 组内按钮间距 */
    }

    .action-button {
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 18px;
    }
    .action-button i {
        font-size: 16px;
    }


    .video-info {
        padding: 15px; /* 手机端标题简介内边距 */
        border-top: none; /* 手机端移除顶部边框 */
        padding-bottom: 10px; /* 手机端简介下方内边距 */
        margin-bottom: 0; /* 手机端简介底部无额外间距 */
    }
    .video-info p {
        margin-bottom: 0; /* 手机端简介底部无额外间距 */
    }

    .share-buttons {
        padding: 10px 15px; /* 手机端分享按钮内边距 */
        border-top: 1px solid #eee; /* 手机端分享按钮顶部边框 */
        justify-content: center; /* 手机端分享按钮居中 */
        gap: 10px;
    }
    .share-buttons .share-label {
        display: none; /* 手机端隐藏“分享到”文字 */
    }
    .share-buttons .social-icon {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }


    .right-list-area {
        width: 100vw;
        padding: 15px; /* 手机端列表内边距 */
        border-radius: 0; /* 小屏幕上移除容器圆角 */
        box-shadow: none;
        background-color: transparent; /* 小屏幕上移除容器背景色 */
        border: none; /* 手机端移除列表区域边框 */
    }

    .right-list-area h3 {
        border-bottom: 1px solid #eee;
    }

    /* 手机端列表容器改为单列 */
    .right-list-area ul {
        grid-template-columns: 1fr; /* 单列 */
        gap: 10px; /* 列表项之间的间距 */
    }

    /* 手机端列表项样式：恢复为水平布局，去除卡片样式 */
    .right-list-area li {
        flex-direction: row; /* 恢复为水平布局，图片和标题在一行 */
        align-items: center;
        padding: 8px 10px; /* 手机端列表项内边距 */
        border-bottom: 1px solid #eee; /* 恢复底部边框 */
        box-shadow: none; /* 移除阴影 */
        border-radius: 0; /* 移除圆角 */
        background-color: #fff; /* 列表项背景色 */
    }
    .right-list-area li:last-child {
         border-bottom: none; /* 最后一个列表项无边框 */
    }

    /* 手机端链接布局调整 */
    .right-list-area a {
        flex-direction: row; /* 手机端恢复水平布局 */
        align-items: center; /* 垂直居中对齐 */
    }
    
    /* 确保视频容器在手机端正确显示 */
    .right-list-area .video-thumb-container {
        flex-shrink: 0; /* 防止容器被压缩 */
        width: 160px; /* 与缩略图宽度保持一致 */
    }
    
    /* 手机端缩略图宽度调整 */
    .right-list-area .thumbnail {
        width: 100%; /* 缩略图宽度占满容器 */
        border-radius: 4px; /* 缩略图本身带圆角 */
        margin-bottom: 0; /* 标题旁无外边距 */
        margin-right: 0; /* 缩略图和标题之间的间距由容器控制 */
    }

    /* 手机端标题区域布局 */
    .right-list-area .video-list-title {
        flex-grow: 1; /* 标题区域占满剩余空间 */
        font-size: 14px;
        line-height: 1.4;
        padding: 0 0 0 10px; /* 调整水平布局的内边距，仅左侧有间距 */
        -webkit-line-clamp: 2; /* 最多显示2行 */
    }

    /* 手机端时长标签位置调整 */
    .video-duration {
        bottom: 4px; /* 手机端缩略图没有margin-bottom，调整位置 */
    }

    .category-nav {
        justify-content: flex-start; /* Align left on mobile */
        gap: 8px;
        margin-bottom: 15px;
        overflow-x: auto; /* Allow horizontal scrolling if many categories */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        padding-bottom: 5px; /* Add some padding for scrollbar */
    }

    .category-button {
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 8px;
    }
}

/* Further adjustments for very small screens */
@media (max-width: 480px) {
    /* 手机端隐藏旧的按钮组 */
    .mobile-header-button {
        display: none !important;
    }
    .sidebar-icons {
        display: none !important;
    }

    .video-info {
        padding: 10px;
    }
    .share-buttons {
        padding: 8px 10px;
        gap: 8px;
    }
    .share-buttons .social-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    .right-list-area {
        padding: 10px;
    }
    /* 调整新的按钮组布局 */
    .action-button {
        padding: 8px 14px;
        font-size: 12px;
        border-radius: 16px;
    }
    .action-button i {
        font-size: 16px;
    }
    /* 更小屏幕的缩略图容器宽度 */
    .right-list-area .video-thumb-container {
        width: 120px;
    }
    .right-list-area .video-list-title {
        font-size: 13px;
        -webkit-line-clamp: 3; /* 允许显示更多行 */
    }

    .category-button {
        padding: 5px 10px;
        font-size: 12px;
    }
}