/* 背包模块样式 */

.bag-modal {
    position: fixed; /* 为absolute子元素提供定位参考 */
    /* bottom：button高度 + 底部容器bottom + 固定间距20px */
    bottom: calc(81px + 2.08vw + 20px);
    right: clamp(30px, 3.125vw, 60px); /* 与底部容器右侧对齐，顶到安全距离 */
    width: clamp(259px, 26.98vw, 518px); /* 518/1920=26.98% - 更新素材真实宽度 */
    height: clamp(402.5px, 41.93vw, 805px); /* 805/1920=41.93% - 更新素材真实高度 */
    background: url('/images/popup/Floating_day.svg') center center no-repeat;
    background-size: 100% 100%;
    z-index: 150;
    display: none;
    box-sizing: border-box;
    overflow: hidden;
    /* 给弹窗添加padding，避免内容覆盖边框 */
    padding: clamp(2.5px, 0.26vw, 5px); /* 5/1920=0.26% - 边框厚度 */
}

.bag-modal.show {
    display: flex;
}

/* 标题栏 */
.bag-header {
    position: absolute;
    top: clamp(2.5px, 0.26vw, 5px); /* 避开顶部边框 */
    left: clamp(2.5px, 0.26vw, 5px); /* 避开左侧边框 */
    right: clamp(2.5px, 0.26vw, 5px); /* 避开右侧边框 */
    height: clamp(54px, 5.42vw, 104px); /* 104/1920=5.42% - 标题背景固定高度 */
    display: flex;
    justify-content: flex-start; /* 左对齐 */
    align-items: center;
    padding: 0 clamp(10px, 1.04vw, 20px); /* 左右padding为20px */
}

.bag-title {
    font-family: 'Knewave', sans-serif;
    font-size: clamp(24px, 2.08vw, 40px); /* 40/1920=2.08% */
    font-weight: bold;
    color: #fff; /* 亮色模式用白色（Floating_day背景是深色） */
    text-align: center;
    margin: 0;
}

.bag-tab {
    font-size: clamp(18px, 1.56vw, 30px); /* 30/1920=1.56% */
    font-weight: bold;
    color: rgba(255, 255, 255, 0.6); /* 亮色模式用半透明白色 */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: clamp(4px, 0.42vw, 8px) clamp(8px, 0.83vw, 16px); /* 8/1920=0.42%, 16/1920=0.83% */
    transition: all 0.2s ease;
}

.bag-tab.active {
    color: #fff; /* 亮色模式选中态用白色 */
    border-bottom: clamp(2px, 0.16vw, 3px) solid #fff; /* 亮色模式用白色边框 */
}

/* 桌面端hover效果（仅支持hover的设备） */
@media (hover: hover) {
    .bag-tab:hover {
        transform: scale(1.15);
    }
}

.bag-tab:active {
    transform: scale(0.8);
}

.bag-expand-icon {
    width: clamp(24px, 2.08vw, 40px); /* 40/1920=2.08% */
    height: clamp(24px, 2.08vw, 40px);
    background: url('/images/icon/collapse_white.svg') center center no-repeat; /* 亮色模式用白色图标 */
    background-size: 100% 100%;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: none; /* 默认隐藏 */
}

/* 浮层展开时显示icon */
.bag-modal.show .bag-expand-icon {
    display: block;
}

/* 桌面端hover效果（仅支持hover的设备） */
@media (hover: hover) {
    .bag-expand-icon:hover {
        transform: scale(1.15);
    }
}

.bag-expand-icon:active {
    transform: scale(0.8);
}

/* 背包内容 */
.bag-content {
    position: absolute;
    top: clamp(54px, 5.42vw, 104px); /* 从标题下方开始 */
    left: clamp(2.5px, 0.26vw, 5px); /* 避开左侧边框 */
    right: clamp(2.5px, 0.26vw, 5px); /* 避开右侧边框 */
    bottom: clamp(2.5px, 0.26vw, 5px); /* 避开底部边框 */
    overflow-y: auto;
    overflow-x: hidden; /* 强制禁止横向滚动 */
    padding: 0 clamp(10px, 1.04vw, 20px); /* 左右padding为20px */
}

/* 装饰列表 */
.bag-list {
    display: flex;
    flex-direction: column;
}

/* 装饰列表项 */
.bag-item {
    display: flex;
    align-items: center;
    height: clamp(75px, 7.81vw, 150px); /* 150/1920=7.81% - 与好友列表高度一致 */
    gap: clamp(12px, 1.25vw, 24px); /* 24/1920=1.25% */
    padding: 0; /* 不需要padding，容器已有padding */
    position: relative;
    transition: background 0.2s;
    max-width: 100%; /* 限制最大宽度 */
    overflow: visible; /* 允许::before和::after溢出 */
}

.bag-item:hover::before {
    content: '';
    position: absolute;
    left: calc(-1 * clamp(10px, 1.04vw, 20px)); /* 延伸到容器padding外（到浮层边缘） */
    right: calc(-1 * clamp(10px, 1.04vw, 20px)); /* 延伸到容器padding外（到浮层边缘） */
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.05); /* 亮色模式5%黑色背景 */
    z-index: -1; /* 放在内容后面 */
}

/* 装饰图标 */
.bag-item-icon {
    width: clamp(60px, 6.25vw, 120px); /* 120/1920=6.25% */
    height: clamp(60px, 6.25vw, 120px);
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 装饰信息 */
.bag-item-info {
    flex: 1;
    min-width: 0; /* 允许收缩 */
    overflow: hidden; /* 防止溢出 */
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 装饰标题 */
.bag-item-title {
    font-family: 'Knewave', sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #000;
}

/* 装饰副文案 */
.bag-item-subtitle {
    font-size: 24px;
    font-weight: normal;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
}

/* 跑马灯（与friends共用） */
.bag-item-subtitle.overflow {
    display: flex;
    align-items: center;
}

.bag-item-subtitle.overflow span {
    display: inline-block;
    padding-right: 30px;
    animation: marquee-scroll 7.5s linear infinite;
}

/* 使用/去掉按钮 */
.bag-item-btn {
    /* 素材76×37，比例2.05:1 */
    width: clamp(38px, 3.96vw, 76px); /* 76/1920=3.96% */
    height: clamp(18.5px, 1.93vw, 37px); /* 37/1920=1.93% */
    background: url('/images/button/button_s.svg') center center no-repeat;
    background-size: contain;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Knewave', sans-serif;
    font-size: clamp(10px, 1.04vw, 20px); /* 20/1920=1.04% */
    font-weight: bold;
    color: #000;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 桌面端hover效果（仅支持hover的设备） */
@media (hover: hover) {
    .bag-item-btn:hover {
        transform: scale(1.1);
    }
}

.bag-item-btn:active {
    transform: scale(0.7);
}

/* 穿戴状态标记 - 已通过按钮文字（使用/去掉）区分，无需背景色 */
.bag-item.equipped {
    /* background: rgba(0, 255, 100, 0.1); */ /* 已移除背景遮罩 */
}

/* 分割线 */
.bag-item::after {
    content: '';
    position: absolute;
    left: calc(-1 * clamp(10px, 1.04vw, 20px));
    right: calc(-1 * clamp(10px, 1.04vw, 20px));
    bottom: 0;
    height: 6px;
    background-image: url('/images/popup/room_line_day.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%;
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
    .bag-title {
        color: #000; /* 暗色模式用黑色（Floating_night背景是浅色） */
    }
    
    .bag-item:hover::before {
        background: rgba(255, 255, 255, 0.1); /* 暗色模式10%白色背景 */
    }
    
    .bag-item-btn {
        background-image: url('/images/button/button_s_night.svg');
        color: #fff;
    }
    
    .bag-item-title {
        color: #fff;
    }
    
    .bag-item-subtitle {
        color: #aaa;
    }
    
    .bag-item::after {
        background-image: url('/images/popup/room_line_night.svg');
    }
    
    .bag-item.equipped {
        /* background: rgba(0, 255, 100, 0.15); */ /* 已移除背景遮罩 */
    }
}

.empty-bag {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: clamp(16px, 1.25vw, 24px); /* 24/1920=1.25% */
    color: #999;
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    .bag-modal {
        background-image: url('/images/popup/Floating_night.svg');
    }
    
    /* 暗色模式tab用黑色 */
    .bag-tab {
        color: rgba(0, 0, 0, 0.6);
    }
    
    .bag-tab.active {
        color: #000; /* 暗色模式选中态用黑色 */
        border-bottom-color: #000; /* 暗色模式用黑色边框 */
    }
    
    /* 暗色模式展开按钮用黑色 */
    .bag-expand-icon {
        background-image: url('/images/icon/collapse_black.svg');
    }
    
    .empty-bag {
        color: #666;
    }
}

/* 极小屏适配：420px以下底部变两行，浮层仍在按钮上方固定距离 */
@media (max-width: 420px) {
    .bag-modal {
        /* 双行布局时，浮层仍在第二行按钮上方：button高度 + 底部容器bottom + 固定间距20px */
        bottom: calc(81px + 2.08vw + 20px);
    }
}