/* 用户动态滚动条样式 —— 三列垂直 Swiper 轮播 */

/* 外层 widget 包裹器 —— 卡片式容器 */
.zib-widget.cxzzt-user-scroll-widget {
    padding: 15px !important;
    background: var(--main-bg-color, #fff) !important;
    border-radius: var(--main-radius, 7px) !important;
    box-shadow: 0 0 10px var(--main-shadow, rgba(0, 0, 0, .08)) !important;
    border: none !important;
    margin-bottom: 10px !important;
    overflow: visible;
}

/* 内层容器 */
.member-scrolling-container {
    padding: 0;
}

/* 三列 flex 布局 */
.member-scrolling {
    height: 70px;
    overflow: hidden;
}

.member-scrolling.hh {
    height: 70px;
}

/* 每列滚动容器 */
.member-scrolling .cxzzt-scroll-column {
    flex: 0 0 calc(100% - 10px);
    width: calc(100% - 10px);
    height: 60px;
    margin: 5px;
    overflow: hidden;
    border-radius: 9px;
}

/* 轨道 */
.member-scrolling .cxzzt-scroll-track {
    display: block;
    transform: translate3d(0, 0, 0);
}

/* 单项高度锁定 */
.member-scrolling .cxzzt-scroll-item {
    height: 60px;
    border-radius: 9px;
}

/* 卡片行 */
.member-scrolling .relative-h {
    padding: 7px 10px 6px;
    width: 100%;
    height: 100%;
}

.member-scrolling .list-inline {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
}

.member-scrolling .list-inline > li:first-child {
    flex-shrink: 0;
}

.member-scrolling .list-inline > li:last-child {
    flex: 1;
    min-width: 0;
}

/* 三列背景色对齐参考站 */
.member-scrolling .orange {
    background: rgba(230, 125, 97, .08);
}

.member-scrolling .blue {
    background: rgba(63, 140, 255, .08);
}

.member-scrolling .green {
    background: rgba(70, 198, 158, .08);
}

/* 头像 */
.member-scrolling .avatar-img {
    display: inline-block;
    position: relative;
}

.member-scrolling .avatar-img img.avatar {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    object-fit: cover;
    display: block;
}

/* 信息区 */
.member-scrolling dl {
    margin: 0;
}

.member-scrolling dt {
    font-weight: normal;
}

.member-scrolling dd {
    margin: 0;
}

/* 用户名 */
.member-scrolling .display-name {
    font-size: 14px;
    font-weight: 700;
    max-width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text, #4e5358);
    text-decoration: none;
    vertical-align: middle;
}

.member-scrolling .display-name:hover {
    color: var(--focus-color, #ff6000);
}

/* 时间 */
.member-scrolling count {
    white-space: nowrap;
}

/* 内容行链接 */
.member-scrolling dd .c-blue {
    color: var(--focus-color, #1890ff);
}

.member-scrolling dd .c-red,
.member-scrolling .c-red {
    color: #f44336;
    font-weight: 600;
}

.member-scrolling dd a {
    text-decoration: none;
}

.member-scrolling dd a:hover .c-blue {
    text-decoration: underline;
}


/* 深色模式 */
[data-theme="dark"] .member-scrolling .display-name,
.dark-theme .member-scrolling .display-name {
    color: var(--color-text, #ccc);
}

/* 响应式 */
@media (max-width: 768px) {
    .member-scrolling {
        height: 60px;
    }

    .member-scrolling .cxzzt-scroll-column {
        flex-basis: calc(100% - 10px) !important;
        width: calc(100% - 10px) !important;
        height: 60px;
    }

    /* 移动端仅展示第一列 */
    .member-scrolling .cxzzt-scroll-column:nth-child(n+2) {
        display: none;
    }

    .member-scrolling .avatar-img img.avatar {
        width: 32px;
        height: 32px;
    }

    .member-scrolling .display-name {
        max-width: 80px;
        font-size: 13px;
    }

    .member-scrolling .relative-h {
        padding: 5px 8px;
    }
}

@media (min-width: 768px) {
    .member-scrolling .cxzzt-scroll-column {
        flex-basis: calc(33.33333% - 10px);
        width: calc(33.33333% - 10px);
    }
}