/* xnx_avatar.css - 头像增强插件样式 */

/* 头像框容器 */
.xnx-avatar-wrapper {
    display: inline-block;
    position: relative;
}

/* 帖子列表头像框 */
.xnx-avatar-frame-wrap {
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    pointer-events: none;
    z-index: 2;
}

/* 用户资料页大头像框 */
.xnx-avatar-frame-wrap-xl {
    position: absolute;
    top: -6px;
    left: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    pointer-events: none;
    z-index: 2;
}

/* 头像框选择区域 */
.xnx-avatar-frame-section {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1.5rem;
}

.xnx-frame-item {
    cursor: pointer;
    padding: 0.5rem;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.xnx-frame-item:hover {
    background: var(--bs-tertiary-bg);
}

.xnx-frame-item.active {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.xnx-frame-preview {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

.xnx-frame-overlay {
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
}

/* 多端适配 */
@media (max-width: 576px) {
    .xnx-frame-item {
        padding: 0.25rem;
    }
    
    .xnx-frame-preview img {
        width: 48px !important;
        height: 48px !important;
    }
    
    .xnx-avatar-frame-wrap {
        top: -2px;
        left: -2px;
    }
}

@media (min-width: 577px) and (max-width: 992px) {
    .xnx-avatar-frame-wrap {
        top: -3px;
        left: -3px;
    }
}

@media (min-width: 993px) {
    .xnx-avatar-frame-wrap {
        top: -4px;
        left: -4px;
    }
}