/* ============================================================
   子比论坛 · 小红书瀑布流美化  v2（照 8uid.com/zibll-forum-waterfall 还原）
   作用域：body.zibll-bbs-xhs-active
   明暗色走子比主题变量；文字卡淡彩色相 + 点阵 + 数字水印
   ============================================================ */

:root {
    --xhs-radius: 6px;
    --xhs-shadow: 0 1px 2px rgba(34, 36, 38, .025);
    --xhs-gap: 16px;
}

/* —— 瀑布流容器（CSS 多列）—— */
.zibll-bbs-xhs-active .xhs-masonry {
    column-count: var(--xhs-cols, 3);
    column-gap: var(--xhs-gap, 16px);
    -webkit-column-count: var(--xhs-cols, 3);
    -webkit-column-gap: var(--xhs-gap, 16px);
}
@media (max-width: 1024px) {
    .zibll-bbs-xhs-active .xhs-masonry { column-count: var(--xhs-cols-tablet, 3); -webkit-column-count: var(--xhs-cols-tablet, 3); }
}
@media (max-width: 767px) {
    .zibll-bbs-xhs-active .xhs-masonry { column-count: var(--xhs-cols-mobile, 2); -webkit-column-count: var(--xhs-cols-mobile, 2); }
}

/* —— 卡片 —— */
.zibll-bbs-xhs-active .xhs-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 var(--xhs-gap, 16px);
    border: 0;
    border-radius: var(--xhs-radius, 6px);
    background: var(--main-bg-color, #fff);
    box-shadow: var(--xhs-shadow);
}

/* —— 封面通用 hover 遮罩 —— */
.zibll-bbs-xhs-active .xhs-card-media::after,
.zibll-bbs-xhs-active .xhs-card-textcover::after {
    position: absolute; inset: 0; z-index: 2;
    background: rgba(0, 0, 0, .1);
    content: ""; opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.zibll-bbs-xhs-active .xhs-card-media:hover::after,
.zibll-bbs-xhs-active .xhs-card-textcover:hover::after { opacity: 1; }

/* —— 图片封面 —— */
.zibll-bbs-xhs-active .xhs-card-media {
    position: relative; display: block; width: 100%;
    overflow: hidden; border: 0; padding: 0;
    background: rgba(125, 125, 125, .08);
    color: inherit; cursor: pointer;
}
.zibll-bbs-xhs-active .xhs-card-media img {
    display: block; width: 100%; max-height: 680px;
    object-fit: cover; transition: transform .25s ease;
}
.zibll-bbs-xhs-active .xhs-card-media:hover img { transform: scale(1.025); }

/* —— 文字封面（淡彩 + 点阵 + 数字水印 + 居中大字）—— */
.zibll-bbs-xhs-active .xhs-card-textcover {
    --xhs-tone-bg: rgba(79, 129, 189, .075);
    --xhs-tone-accent: rgba(79, 129, 189, .18);
    position: relative; display: block; width: 100%; height: 0;
    border: 0; padding-top: 130%; overflow: hidden;
    border-radius: var(--xhs-radius, 6px) var(--xhs-radius, 6px) 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0)), var(--xhs-tone-bg);
    color: inherit; cursor: pointer;
}
.zibll-bbs-xhs-active .xhs-tone-2 { --xhs-tone-bg: rgba(82, 153, 122, .075); --xhs-tone-accent: rgba(82, 153, 122, .18); }
.zibll-bbs-xhs-active .xhs-tone-3 { --xhs-tone-bg: rgba(202, 151, 63, .075); --xhs-tone-accent: rgba(202, 151, 63, .18); }
.zibll-bbs-xhs-active .xhs-tone-4 { --xhs-tone-bg: rgba(166, 98, 120, .07); --xhs-tone-accent: rgba(166, 98, 120, .17); }
.zibll-bbs-xhs-active .xhs-tone-5 { --xhs-tone-bg: rgba(109, 124, 138, .07); --xhs-tone-accent: rgba(109, 124, 138, .17); }

/* 暗色：实色淡彩 + 渐变叠加 */
body.dark-theme .zibll-bbs-xhs-active .xhs-card-textcover { --xhs-tone-bg: #526f91; --xhs-tone-accent: rgba(204, 228, 255, .4); background: linear-gradient(155deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .025) 54%, rgba(0, 0, 0, .06)), var(--xhs-tone-bg); }
body.dark-theme .zibll-bbs-xhs-active .xhs-tone-2 { --xhs-tone-bg: #4f7967; --xhs-tone-accent: rgba(198, 245, 219, .38); }
body.dark-theme .zibll-bbs-xhs-active .xhs-tone-3 { --xhs-tone-bg: #806943; --xhs-tone-accent: rgba(255, 226, 170, .4); }
body.dark-theme .zibll-bbs-xhs-active .xhs-tone-4 { --xhs-tone-bg: #7a5566; --xhs-tone-accent: rgba(255, 205, 224, .38); }
body.dark-theme .zibll-bbs-xhs-active .xhs-tone-5 { --xhs-tone-bg: #566270; --xhs-tone-accent: rgba(214, 228, 245, .38); }

/* 点阵纹理 */
.zibll-bbs-xhs-active .xhs-card-pattern {
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(var(--xhs-tone-accent) .7px, transparent .7px) 0 0 / 13px 13px,
                linear-gradient(135deg, transparent, rgba(255, 255, 255, .22));
    opacity: .45; pointer-events: none;
}
/* 数字水印 */
.zibll-bbs-xhs-active .xhs-card-mark {
    position: absolute; right: -4px; bottom: -13px; z-index: 0;
    color: var(--xhs-tone-accent);
    font-size: clamp(82px, 8vw, 118px); font-weight: 700; line-height: 1;
    opacity: .2; pointer-events: none;
}
/* 内容层 */
.zibll-bbs-xhs-active .xhs-card-cover-content {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 14px 20px;
}
.zibll-bbs-xhs-active .xhs-card-cover-meta {
    display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px;
    color: rgba(45, 49, 53, .45); font-size: 12px; font-weight: 500; line-height: 16px;
}
body.dark-theme .zibll-bbs-xhs-active .xhs-card-cover-meta { color: rgba(255, 255, 255, .55); }
.zibll-bbs-xhs-active .xhs-card-cover-copy {
    display: -webkit-box; overflow: hidden;
    color: var(--main-color, #2c2f32); font-weight: 500; text-align: center;
    -webkit-box-orient: vertical;
}
body.dark-theme .zibll-bbs-xhs-active .xhs-card-cover-copy { color: rgba(255, 255, 255, .92); }
.zibll-bbs-xhs-active .xhs-copy-short  { font-size: 22px; line-height: 1.45; -webkit-line-clamp: 3; }
.zibll-bbs-xhs-active .xhs-copy-medium { font-size: 20px; line-height: 1.55; -webkit-line-clamp: 5; }
.zibll-bbs-xhs-active .xhs-copy-long   { font-size: 16px; line-height: 1.65; text-align: left; -webkit-line-clamp: 8; }
.zibll-bbs-xhs-active .xhs-card-cover-footer {
    color: rgba(45, 49, 53, .45); font-size: 12px; line-height: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dark-theme .zibll-bbs-xhs-active .xhs-card-cover-footer { color: rgba(255, 255, 255, .55); }

/* —— 卡片主体（标题 + 作者 + 统计）—— */
.zibll-bbs-xhs-active .xhs-card-body { display: flex; flex-direction: column; gap: 12px; padding: 15px 16px 16px; }
.zibll-bbs-xhs-active .xhs-card-title {
    margin: 0;
    color: var(--key-color, #222); font-size: 16px; font-weight: 400; line-height: 1.5;
    display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.zibll-bbs-xhs-active .xhs-card-title:hover { color: var(--theme-color, #f1404b); }
.zibll-bbs-xhs-active .xhs-card-author { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zibll-bbs-xhs-active .xhs-card-author-link { display: flex; min-width: 0; align-items: center; gap: 6px; color: var(--muted-color, #909399); }
.zibll-bbs-xhs-active .xhs-card-author .avatar-img { flex: 0 0 24px; }
.zibll-bbs-xhs-active .xhs-card-author .avatar-img img { width: 24px; height: 24px; border-radius: 50%; display: block; }
.zibll-bbs-xhs-active .xhs-card-author-name { min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zibll-bbs-xhs-active .xhs-card-stats { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; color: var(--muted-color, #909399); font-size: 12px; }
.zibll-bbs-xhs-active .xhs-card-stats .item { display: inline-flex; align-items: center; gap: 3px; }
.zibll-bbs-xhs-active .xhs-card-stats svg { width: 14px; height: 14px; fill: currentColor; }

/* —— 隐藏原始子比帖子项（重建后）—— */
.zibll-bbs-xhs-active .xhs-source-hidden { display: none !important; }

/* ============================================================
   弹窗（两栏小红书详情：左卡片视觉 + 右[作者头/滚动正文/底部操作栏]）
   ============================================================ */
.xhs-modal { position: fixed; inset: 0; z-index: 2050; display: flex; align-items: center; justify-content: center; padding: 5vh 4.3vw; }
.xhs-modal[hidden] { display: none; }
.xhs-modal-backdrop { position: absolute; inset: 0; background: rgba(78, 82, 86, .56); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.xhs-modal-dialog {
    position: relative; z-index: 1;
    width: min(112vh, 94vw); height: min(90vh, 880px);
    display: flex;
    background: transparent; border-radius: 4px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.xhs-modal-close {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    width: 38px; height: 38px; border: 0; border-radius: 50%;
    background: rgba(25, 28, 31, .24); color: rgba(255, 255, 255, .92);
    font-size: 20px; line-height: 1; cursor: pointer;
}
.xhs-modal-close:hover { background: rgba(25, 28, 31, .46); color: #fff; }

/* 左：卡片视觉 */
.xhs-modal-visual { flex: 0 0 50%; max-width: 50%; background: var(--xhs-media-bg, #f8faf9); display: flex; align-items: stretch; justify-content: center; overflow: hidden; }
body.dark-theme .xhs-modal-visual { --xhs-media-bg: #292b2e; }
.xhs-modal-visual .xhs-card-media { width: 100%; height: 100%; }
.xhs-modal-visual .xhs-card-media img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.xhs-modal-visual .xhs-card-textcover { padding-top: 0; height: 100%; border-radius: 0; }

/* 右：详情（作者头 / 滚动正文 / 底部操作栏） */
.xhs-modal-detail { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--main-bg-color, #fff); }
.xhs-modal-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 28px; }
.xhs-modal-authorbar { display: flex; min-width: 0; align-items: flex-start; }
.xhs-modal-authorbar .avatar-img { flex: 0 0 45px; width: 45px; height: 45px; margin-right: 20px; }
.xhs-modal-authorbar .avatar-img img { width: 45px; height: 45px; border-radius: 50%; display: block; object-fit: cover; }
.xhs-modal-ainfo { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.xhs-modal-aname { font-weight: 500; font-size: 15px; color: var(--key-color, #222); }
.xhs-modal-adate { color: var(--muted-2-color, #666); font-size: 14px; line-height: 1.4; }
.xhs-modal-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 28px; }
.xhs-modal-title { margin: 0 0 6px; font-size: 20px; font-weight: 500; color: var(--key-color, #222); line-height: 1.4; }
.xhs-modal-title a { color: inherit; text-decoration: none; }
.xhs-modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; color: var(--muted-color, #888); font-size: 12px; }
.xhs-modal-content { color: var(--main-color, #333); font-size: 15px; line-height: 1.8; word-break: break-word; padding: 4px 0 18px; }
.xhs-modal-content img { max-width: 100%; height: auto; border-radius: 6px; }
.xhs-modal-score { margin: 8px 0 6px; }
.xhs-modal-comments { padding: 8px 0 12px; }
.xhs-modal-comments .zib-widget, .xhs-modal-comments .theme-box { background: transparent; box-shadow: none; padding: 0; }
.xhs-modal-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px; border-top: 1px solid var(--muted-border-color, rgba(125, 125, 125, .12)); background: var(--main-bg-color, #fff); }
.xhs-modal-act-right { display: flex; align-items: center; gap: 4px; }
.xhs-modal-loading { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--muted-color, #999); }
body.xhs-modal-open { overflow: hidden; }

@media (max-width: 767px) {
    .xhs-modal { padding: 0; align-items: flex-end; }
    .xhs-modal-dialog { width: 100vw; height: 94vh; border-radius: 14px 14px 0 0; flex-direction: column; }
    .xhs-modal-visual { flex: 0 0 auto; max-width: 100%; max-height: 40vh; }
    .xhs-modal-visual .xhs-card-textcover { padding-top: 120%; height: auto; }
    .xhs-modal-head { padding: 14px 16px; }
    .xhs-modal-scroll { padding: 0 16px; }
    .xhs-modal-foot { padding: 0 12px; }
}