/* 抽屉总高度 298px */
#mobile-nav-drawer {
    position: fixed;
    bottom: -238px; /* 初始隐藏 content 部分 (298-60) */
    left: 0;
    width: 100%;
    height: 298px;
    background-color: #76b900;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    margin: 0;
    padding: 0;
    z-index: 2147483647 !important; /* 使用 32 位整数的最大值 */
    color: white;
}

#mobile-nav-drawer.is-expanded {
    transform: translateY(-238px);
}

/* 顶部 Continue Reading 区域 */
#drawer-trigger {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #76b900;
    padding: 0;
    z-index: 2147483647 !important;
}

/* 3. 针对视频容器的补丁 */
video, iframe, .video-js {
    z-index: 1 !important;
}

/* 资源滚动容器 */
.drawer-content {
    height: 238px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    padding: 0;
}

#resource-list {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    /* 关键：左右填充，保证第一个/最后一个项也能居中 */
    padding: 10px calc(50vw - 100px);
    margin: 0;
}

/* 资源项：宽 200px, 高 226px (150图 + 76文字区) */
.resource-item {
    flex: 0 0 200px;
    height: 226px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    background: transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 图片：200x150 */
.resource-item .pf-mobile-thumbnail {
    width: 200px;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    border-radius: 5px;
}

/* 文字区：遵循 calc(18px * 3 + 10px) */
.resource-item .resource-title-div {
    padding: 7px 10px;
    height: calc(18px * 3 + 10px); /* 64px */
    background-color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.resource-item p {
    margin: 0;
    color: #000000;
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    font-family: "NVIDIASansWRg", sans-serif;
    /* 多行文本截断 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 高亮样式 */
.resource-item.active .pf-mobile-thumbnail {
    /*box-shadow: inset 0 0 0 4px #76b900;*/
}

.header-icon-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;

}
.arrow-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.4s ease; /* 旋转动画 */
    display: block;
}
/* 关键：当容器展开时，箭头旋转 180 度 */
#mobile-nav-drawer.is-expanded .arrow-icon {
    transform: rotate(180deg);
}


#mobile-nav-drawer {
    transition: transform 0.3s ease-out, opacity 0.3s;
    touch-action: pan-x; /* 允许横向滚动内容，但拦截纵向手势用于关闭 */
}

#mobile-nav-drawer.dragging {
    transition: none; /* 拖拽时取消动画，保证跟手 */
}