/* 狱友模块样式 */

.friends-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; /* 防止任何内容溢出浮层 */
}

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

/* 标题栏 */
.friends-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: space-between;
    align-items: center;
    padding: 0 clamp(10px, 1.04vw, 20px); /* 左右padding为20px */
}

/* 正常状态标题 */
.friends-title-normal {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.04vw, 20px); /* 20/1920=1.04% */
}

.friends-title {
    font-family: 'Knewave', sans-serif;
    font-size: clamp(24px, 2.08vw, 40px); /* 40/1920=2.08% */
    font-weight: bold;
    color: #fff; /* 亮色模式用白色 */
}

.friends-count {
    font-family: 'Knewave', sans-serif;
    font-size: clamp(12px, 1.25vw, 24px); /* 24/1920=1.25% */
    color: rgba(255, 255, 255, 0.5); /* 50%透明度 */
}

/* 有申请状态标题 */
.friends-title-request {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.52vw, 10px); /* 10/1920=0.52% */
}

.friends-request-text {
    font-family: 'Knewave', sans-serif;
    font-size: clamp(24px, 2.08vw, 40px); /* 40/1920=2.08% */
    font-weight: bold;
    color: #fff; /* 亮色模式用白色 */
}

.red-dot {
    width: clamp(8px, 0.625vw, 12px); /* 12/1920=0.625% */
    height: clamp(8px, 0.625vw, 12px);
    background: #FF0000;
    border-radius: 50%;
}

/* 右侧按钮组 */
.friends-header-actions {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.04vw, 20px); /* 20/1920=1.04% */
}

/* 管理按钮 */
.friends-manage-btn {
    font-family: 'Knewave', sans-serif;
    font-size: clamp(12px, 1.25vw, 24px); /* 24/1920=1.25% */
    color: rgba(255, 255, 255, 0.5); /* 50%透明度 */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.friends-manage-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.friends-expand-icon {
    width: clamp(24px, 2.08vw, 40px); /* 40/1920=2.08% */
    height: clamp(24px, 2.08vw, 40px);
    background: url('/images/icon/expand_white.svg') center center no-repeat; /* 默认展开图标 */
    background-size: 100% 100%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

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

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

/* 展开状态（显示申请列表时） */
.friends-modal.requests-expanded .friends-expand-icon {
    background-image: url('/images/icon/collapse_white.svg'); /* 收起图标 */
}

/* 统一内容容器：申请列表和狱友列表共用 */
.friends-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 */
    display: flex;
    flex-direction: column; /* 申请列表在上，狱友列表在下 */
}

/* 申请列表（在friends-content内，展开时占据空间并把狱友列表往下挤） */
.friends-requests {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0; /* 不收缩，保持完整高度 */
}

/* 狱友列表（在friends-content内，跟随申请列表之后） */
.friends-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1; /* 占据剩余空间 */
    min-height: 0; /* 允许在flex容器内正确收缩 */
}

.friend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: clamp(75px, 7.81vw, 150px); /* 150/1920=7.81% - 与request-item高度一致 */
    gap: clamp(12px, 1.04vw, 20px); /* 20/1920=1.04% */
    padding: 0; /* 不需要padding，容器已有padding */
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
    max-width: 100%; /* 限制最大宽度 */
    overflow: visible; /* 允许::before和::after溢出 */
}

/* 分割线素材：在列表项底部显示，延伸到容器外 */
.friend-item::after {
    content: '';
    position: absolute;
    left: calc(-1 * clamp(10px, 1.04vw, 20px)); /* 延伸到容器padding外（到浮层边缘） */
    right: calc(-1 * clamp(10px, 1.04vw, 20px)); /* 延伸到容器padding外（到浮层边缘） */
    bottom: 0;
    height: 6px; /* SVG原始高度 */
    background-image: url('/images/popup/room_line_day.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%; /* 填充整个after元素 */
}

.friend-item-content {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.04vw, 20px);
    flex: 1;
    min-width: 0; /* 允许收缩 */
    overflow: hidden; /* 防止溢出 */
}

.friend-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; /* 放在内容后面 */
}

.friend-avatar {
    width: clamp(60px, 6.25vw, 120px); /* 120/1920=6.25% - 与申请列表头像大小一致 */
    height: clamp(60px, 6.25vw, 120px);
    flex-shrink: 0;
}

.friend-info {
    flex: 1;
    min-width: 0; /* 允许flex子元素收缩到内容以下 */
    overflow: hidden; /* 防止内容溢出 */
    display: flex;
    flex-direction: column;
    gap: 0; /* 编号和副文案之间无间距 */
}

.friend-number {
    font-family: 'Knewave', sans-serif;
    font-size: 30px; /* 固定字号30 */
    font-weight: bold;
    color: #000;
}

.friend-sentence {
    font-size: 24px; /* 固定字号24 */
    font-weight: normal; /* 不加粗 */
    color: #666;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
}

/* 跑马灯容器 */
.friend-sentence.overflow {
    display: flex;
    align-items: center;
}

/* 跑马灯文本（双份循环显示） */
.friend-sentence.overflow span {
    display: inline-block;
    padding-right: 30px; /* 循环间隔 */
    animation: marquee-scroll 7.5s linear infinite;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* 删除按钮（管理模式下显示） */
.friend-delete-btn {
    width: clamp(32px, 2.6vw, 50px); /* 50/1920=2.6% */
    height: clamp(32px, 2.6vw, 50px);
    background-image: url('/images/icon/refuse.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    display: none; /* 默认隐藏 */
}

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

.friend-delete-btn:active {
    transform: scale(0.7);
}

/* 管理模式下显示删除按钮 */
.friends-modal.manage-mode .friend-delete-btn {
    display: block;
}

/* 管理模式下好友项不可点击跳转 */
.friends-modal.manage-mode .friend-item {
    cursor: default;
}

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

/* 申请项样式 */
.request-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: clamp(75px, 7.81vw, 150px); /* 150/1920=7.81% */
    padding: 0; /* 不需要padding，容器已有padding */
    background-color: transparent;
    position: relative;
    max-width: 100%; /* 限制最大宽度 */
    overflow: visible; /* 允许::before和::after溢出 */
}

.request-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; /* 放在内容后面 */
}

/* 分割线素材 */
.request-item::after {
    content: '';
    position: absolute;
    left: calc(-1 * clamp(10px, 1.04vw, 20px)); /* 延伸到容器padding外（到浮层边缘） */
    right: calc(-1 * clamp(10px, 1.04vw, 20px)); /* 延伸到容器padding外（到浮层边缘） */
    bottom: 0;
    height: 6px; /* SVG原始高度 */
    background-image: url('/images/popup/room_line_day.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%; /* 填充整个after元素 */
}

.request-item-left {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.04vw, 20px); /* 20/1920=1.04% */
    flex: 1;
    min-width: 0; /* 允许收缩 */
    overflow: hidden; /* 防止溢出 */
}

.request-avatar {
    width: clamp(60px, 6.25vw, 120px); /* 120/1920=6.25% */
    height: clamp(60px, 6.25vw, 120px);
    border-radius: 50%;
    overflow: hidden;
    background: transparent; /* 不添加背景色 */
    flex-shrink: 0;
}

.request-info {
    flex: 1;
    min-width: 0; /* 允许flex子元素收缩到内容以下 */
    overflow: hidden; /* 防止内容溢出 */
}

.request-number {
    font-family: 'Knewave', sans-serif;
    font-size: 30px; /* 固定字号30 - 与friend-number保持一致 */
    font-weight: bold;
    color: #000;
}

.request-sentence {
    font-size: 24px; /* 固定字号24 - 与friend-sentence保持一致 */
    font-weight: normal;
    color: #666;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
}

/* 跑马灯容器（与friend-sentence共用样式） */
.request-sentence.overflow {
    display: flex;
    align-items: center;
}

.request-sentence.overflow span {
    display: inline-block;
    padding-right: 30px; /* 循环间隔 */
    animation: marquee-scroll 7.5s linear infinite;
}

.request-actions {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.04vw, 20px); /* 20/1920=1.04% */
}

.request-action-icon {
    width: clamp(32px, 2.6vw, 50px); /* 50/1920=2.6% */
    height: clamp(32px, 2.6vw, 50px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* 不添加背景色 */
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

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

.request-action-icon:active {
    transform: scale(0.7);
}

.request-action-accept {
    background-image: url('/images/icon/accept.svg');
}

.request-action-reject {
    background-image: url('/images/icon/refuse.svg');
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    .friends-modal {
        background-image: url('/images/popup/Floating_night.svg');
    }
    
    /* 暗色模式标题用黑色 */
    .friends-title {
        color: #000;
    }
    
    .friends-count {
        color: rgba(0, 0, 0, 0.5);
    }
    
    .friends-request-text {
        color: #000;
    }
    
    /* 暗色模式管理按钮用黑色 */
    .friends-manage-btn {
        color: rgba(0, 0, 0, 0.5);
    }
    
    .friends-manage-btn:hover {
        color: rgba(0, 0, 0, 0.8);
    }
    
    /* 暗色模式展开按钮用黑色 */
    .friends-expand-icon {
        background-image: url('/images/icon/expand_black.svg');
    }
    
    .friends-modal.requests-expanded .friends-expand-icon {
        background-image: url('/images/icon/collapse_black.svg');
    }
    
    /* 暗色模式分割线 */
    .request-item::after {
        background-image: url('/images/popup/room_line_night.svg');
    }
    
    .friend-item::after {
        background-image: url('/images/popup/room_line_night.svg');
    }
    
    /* 暗色模式操作图标 */
    .request-action-accept {
        background-image: url('/images/icon/accept_night.svg');
    }
    
    .request-action-reject {
        background-image: url('/images/icon/refuse_night.svg');
    }
    
    /* 暗色模式删除按钮 */
    .friend-delete-btn {
        background-image: url('/images/icon/refuse_night.svg');
    }
    
    .friend-number {
        color: #fff !important;
    }
    
    .friend-sentence {
        color: #aaa;
    }
    
    .friend-item:hover::before {
        background: rgba(255, 255, 255, 0.1); /* 暗色模式10%白色背景 */
    }
    
    .request-item:hover::before {
        background: rgba(255, 255, 255, 0.1); /* 暗色模式10%白色背景 */
    }
    
    .request-number {
        color: #fff !important;
    }
    
    .request-sentence {
        color: #aaa; /* 与friend-sentence暗色模式保持一致 */
    }
    
    .empty-friends {
        color: #666;
    }
}

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