/* 朋友头像样式 */
.friend-avatar {
    /* 设置圆形头像 */
    border-radius: 50%;
    /* 隐藏超出圆形部分的内容 */
    overflow: hidden;
    /* 响应式处理，最大宽度为父元素的 100% */
    max-width: 100%;
    /* 高度自动调整以保持图片比例 */
    height: auto;
    /* 确保图片在容器内完整显示，保持比例 */
    object-fit: contain;
    /* 添加边框 */
    border: 2px solid #ccc;
    /* 添加阴影效果 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* 大图片处理样式 */
.big-img-handle {
    /* 设置最大宽度 */
    max-width: 35px;
    /* 设置最大高度 */
    max-height: 35px;
    /* 宽度自动调整以保持图片比例 */
    width: auto;
    /* 高度自动调整以保持图片比例 */
    height: auto;
    /* 确保图片在容器内完整显示，保持比例 */
    object-fit: contain;
    /* 添加边框 */
    border: 2px solid #ccc;
    /* 添加阴影效果 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* 响应式处理，在小屏幕设备上调整大图片尺寸 */
@media (max-width: 768px) {
    .big-img-handle {
        /* 小屏幕下缩小最大宽度 */
        max-width: 30px;
    }
}

/* 鼠标悬停放大效果 */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.1);
}

.cursor {
    cursor: pointer!important;
}

.line {
    padding-bottom: 5px
}

/* 设置图片超链接的 cursor 样式 */
.image-link {
    cursor: pointer;
}

/* 超链接点击样式 */
.image-link:active {
    opacity: 0.8; 
    transition: opacity 0.1s ease; 
}