/* 基础布局（回归旧版宽度与外边距） */
.jizone-weibo-feed{max-width:720px;margin:0 auto;}
@media (min-width: 1024px) {
    .lg\:col-span-8{grid-column:span 16 / span 8;}
}

/* Random Topics Top Block */
.jz-top-random-topics a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Random Topics Bottom Block - Gradient Border Style */
.jz-random-topic-link {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    
    /* Gradient Border Trick */
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, 
                linear-gradient(135deg, #ff7a7a, #ffd36e, #79ff7a, #79d0ff, #b679ff) border-box;
    
    color: #333;
    transition: all 0.2s ease;
}

.jz-random-topic-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background: linear-gradient(#f9f9f9, #f9f9f9) padding-box, 
                linear-gradient(135deg, #ff7a7a, #ffd36e, #79ff7a, #79d0ff, #b679ff) border-box;
}

/* 
   新版频道导航样式 
   结构: .jz-channel-nav-container > .jz-channel-bar > (.jz-channel-scroll-mask > .jz-channel-list) + .jz-channel-toggle-btn
         .jz-channel-nav-container > .jz-channel-panel > .jz-channel-grid
*/

.jz-channel-nav-container {
    position: relative;
    z-index: 100;
    background: transparent;
    margin: 0 -12px 12px -12px; /* 抵消父容器 padding */
}

.jz-channel-bg-layer {
    display: none;
    height: 130px;
    width: 100%;
    border-radius: 12px;
    margin-bottom: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 背景图模式适配 */
.jz-channel-nav-container.has-bg-image {
    margin-top: -20px; /* 向上延伸覆盖默认间距 */
}
.jz-channel-nav-container.has-bg-image .jz-channel-bg-layer {
    display: block;
}

/* 移除旧的背景图样式覆盖，让 bar 保持独立样式 */
/* .jz-channel-nav-container.has-bg-image .jz-channel-bar { ... } */

.jz-channel-bar {
    display: flex;
    align-items: center;
    /* height: 48px; Removed fixed height for vertical layout */
    padding: 12px 0;
    background: #fff;
    position: relative;
    z-index: 102;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.jz-channel-scroll-mask {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: 0 12px;
}
.jz-channel-scroll-mask::-webkit-scrollbar {
    display: none;
}

.jz-channel-list {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}

.jz-channel-toggle-btn {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    cursor: pointer;
    color: #666;
    flex-shrink: 0;
    box-shadow: -4px 0 12px -4px rgba(0,0,0,0.1); /* 左侧阴影遮罩感 */
    position: relative;
    z-index: 103;
}
.jz-channel-toggle-btn:hover {
    color: #333;
}

/* 展开的面板 */
.jz-channel-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 101;
    border-top: 1px solid #f0f0f0;
}

.jz-channel-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 频道链接样式调整 - 上图下文布局 */
.jz-channel-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
    background: transparent;
    padding: 0;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
    min-width: 60px; /* 保证点击区域宽度 */
}

.jz-channel-text {
    display: block;
    padding: 0;
    margin-top: 6px;
    border-radius: 0;
    background: transparent;
    color: #666;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    font-weight: 500;
}

.jz-channel-link.active .jz-channel-text {
    background: transparent;
    color: #333;
    font-weight: bold;
}

/* 频道图标通用样式 - 圆形按钮居中 */
.jz-channel-icon {
    width: 48px; 
    height: 48px; 
    object-fit: cover; 
    position: relative; 
    z-index: 5;
    border-radius: 50%;
    background: #f4f4f5;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.jz-channel-link.active .jz-channel-icon {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: scale(1.05);
}

/* 重置/覆盖旧的风格样式以适应垂直布局 */
.jz-style-float .jz-channel-icon,
.jz-style-card .jz-channel-icon,
.jz-style-merged .jz-channel-icon,
.jz-style-sticker .jz-channel-icon,
.jz-style-bubble .jz-channel-icon,
.jz-style-minimal .jz-channel-icon {
    margin-right: 0;
    margin-top: 0;
    left: auto;
    top: auto;
    position: relative;
    border: none;
}

.jz-style-float .jz-channel-icon + .jz-channel-text,
.jz-style-card .jz-channel-icon + .jz-channel-text,
.jz-style-merged .jz-channel-text,
.jz-style-sticker .jz-channel-icon + .jz-channel-text,
.jz-style-bubble .jz-channel-text,
.jz-style-minimal .jz-channel-text {
    padding-left: 0;
}

/* 特殊处理 Merged 风格 */
.jz-style-merged {
    position: relative;
}
.jz-style-merged .jz-channel-icon {
    /* 保持圆形基础 */
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) drop-shadow(1px 2px 4px rgba(0,0,0,0.2));
}

/* Bubble 风格特殊处理 - 保持一点气泡感但适配垂直 */
.jz-style-bubble .jz-channel-icon {
    padding: 6px; /* 内边距 */
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Minimal 风格特殊处理 */
.jz-style-minimal .jz-channel-icon {
    filter: grayscale(100%);
    opacity: 0.8;
}
.jz-style-minimal.active .jz-channel-icon {
    filter: none;
    opacity: 1;
}
/* Sticker 风格特殊处理 */
.jz-style-sticker .jz-channel-icon {
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) drop-shadow(1px 2px 4px rgba(0,0,0,0.2));
    transform: rotate(-5deg);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.jz-style-sticker.active .jz-channel-icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #fff) drop-shadow(2px 5px 10px rgba(0,0,0,0.3));
    z-index: 20;
}

.weibo-list{list-style:none;margin:0;padding:0;}
.jizone-weibo-feed .weibo-list,
.jizone-weibo-feed .jz-weibo-list{padding-left:0 !important;margin-left:0 !important;}
.jizone-weibo-feed .weibo-item,
.jizone-weibo-feed .jz-weibo-item{padding-left:0 !important;margin-left:0 !important;}
.jz-weibo-item{margin:12px 0;}
.jz-weibo-card{border:1px solid #e5e7eb;border-radius:10px;padding:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.04);} 

/* 头部 */
.jz-weibo-header{display:flex;align-items:center;gap:12px;position:relative;}
.weibo-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#fafafa;}
.weibo-header-text{flex:1;}
.weibo-author{font-weight:600;color:#1a1a1a;position:relative;z-index:2;}
.weibo-author-link{color:inherit;text-decoration:none;display:inline-block;}
.weibo-author-link:hover{text-decoration:underline;}
.weibo-meta{color:#888;font-size:12px;margin-top:2px;}
/* 置顶标签：右上角，七彩渐变文字，与旧版一致 */
.jz-pinned-label{position:absolute;right:40px;top:8px;font-weight:700;font-size:16px;letter-spacing:1px;background:linear-gradient(90deg,#ff7a7a,#ffd36e,#79ff7a,#79d0ff,#b679ff);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none;z-index:10;}

/* 置顶卡片外框：渐变边框与柔和投影（应用于卡片） */
.jz-weibo-item[data-pinned="1"] .jz-weibo-card{border:2px solid transparent;border-radius:10px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ff7a7a,#ffd36e,#79ff7a,#79d0ff,#b679ff) border-box;box-shadow:0 4px 16px rgba(99,102,241,0.12);}

/* 推荐徽章：白字黑底，圆角，紧跟用户名 */
.weibo-author .jz-recommend-badge{display:inline-block;margin-left:6px;padding:0 6px;height:18px;line-height:18px;font-size:12px;color:#fff;background:#111;border-radius:10px;}

/* 更多菜单 */
.jz-weibo-more{margin-left:auto;position:relative;}
.jz-more-btn{width:28px;height:28px;border:none;border-radius:6px;background:#f4f4f5;color:#333;cursor:pointer;}
.jz-more-btn:hover{background:#ececee;}
.jz-more-menu{position:absolute;right:0;top:32px;background:#fff;border:1px solid #eee;border-radius:10px;box-shadow:0 6px 12px rgba(0,0,0,0.08);list-style:none;padding:10px 0px 10px 10px;margin:0;min-width:140px;z-index:50;}
.jz-more-item{padding:6px;font-size:12px;cursor:pointer;color:#222;}
.jz-more-item:hover{background:#f6f7f9;}

/* 内容 */
.jz-weibo-content{margin-top:10px;color:#222;font-size:15px;line-height:1.7;}
.weibo-content-excerpt{color:#222;}
.weibo-content-full{color:#222;word-break:break-word;}
.weibo-content-full > *:last-child { margin-bottom: 0 !important; }
.jz-weibo-expand{margin-top:6px;padding:6px 8px;border:1px solid #eee;border-radius:8px;background:#f9f9fb;color:#333;cursor:pointer;display:inline-block;line-height:1.5;}
.jz-weibo-expand:hover{background:#f0f1f4;}

/* 媒体九宫格 */
.jz-weibo-media{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;margin-bottom:10px;width:100%;max-width:700px;} /* 限制整体最大宽度，确保图片不会过大 */
.jz-weibo-media.count-1{grid-template-columns:1fr;max-width:240px;} /* 单图最大宽度限制 */
.jz-weibo-media.count-2,.jz-weibo-media.count-4{grid-template-columns:repeat(2,1fr);max-width:320px;} /* 2图和4图采用双列，并限制总宽 */

/* 图片尺寸一致性控制 */
.jz-weibo-media-link,.jz-weibo-media-video{aspect-ratio:1/1;display:block;position:relative;border-radius:10px;overflow:hidden;background:#f7f7f7;}
.jz-weibo-media-link img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover;object-position:center;display:block;margin:0;padding:0;transform:none !important;}

/* 单图特殊处理：虽然也是固定比例，但可以稍微灵活一点或者保持正方形 */
/* 用户要求所有图片尺寸一致，所以单图也保持 aspect-ratio:1/1 */

.jz-video-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000;}
.jz-preview-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
.jz-video-play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;border:none;background:rgba(0,0,0,0.55);color:#fff;cursor:pointer;}
.jz-video-play-btn::before{content:'';display:block;margin:0 auto;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff;width:0;height:0;}

/* 操作区 */
.jz-weibo-actions{display:flex;align-items:center;gap:10px;padding-top:8px;border-top:1px solid #f0f0f0;margin-top:8px;}
.jz-weibo-action{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:4px;color:#555;font-size:14px;text-decoration:none;}
.jz-weibo-action:hover{color:#2b5df7;}
.jz-link-btn{color:#888;}
.jz-link-btn:hover{color:#2b5df7;}
.jz-like-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;border:1px solid #eee;background:#fafafa;color:#333;cursor:pointer;}
.jz-like-btn:hover{background:#f3f3f5;}
.jz-like-btn.liked{border-color:#ff6a6a;background:#ffecec;color:#d84141;}
.jz-like-btn.liked .jz-like-icon{fill:currentColor;}
.jz-like-icon{display:inline-block;}

/* 评论框 */
.jz-comment-box{margin-top:10px;border:1px solid #eee;border-radius:10px;padding:8px;background:#fafafa;}
.jz-comment-input{width:100%;resize:vertical;border:1px solid #ddd;border-radius:8px;padding:6px;background:#fff;}
.jz-comment-actions{display:flex;gap:8px;margin-top:6px;}
.jz-comment-submit,.jz-comment-cancel{padding:6px 10px;border-radius:8px;border:1px solid #eee;background:#f4f4f5;cursor:pointer;}

/* =========================================
   发布框样式 (Restored)
   ========================================= */
.jz-weibo-compose {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
    position: relative;
    z-index: 20;
}
.jz-compose-form {
    padding: 16px;
    position: relative;
}
.jz-compose-textarea {
    width: 100%;
    min-height: 80px;
    padding: 0;
    border: none;
    outline: none;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    resize: none;
    display: block;
    margin-bottom: 12px;
}
.jz-compose-textarea:empty:before {
    content: attr(data-placeholder);
    color: #999;
}
.jz-compose-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.jz-compose-tools {
    display: flex;
    gap: 0px;
}
.jz-compose-tool {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #666;
    border-radius: 6px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jz-compose-tool:hover {
    background: #f5f5f5;
    color: #333;
}
.jz-compose-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.jz-compose-send {
    background: #2b5df7;
    color: #fff;
    border: none;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.jz-compose-send:hover {
    background: #1d4ed8;
}
.jz-compose-send:disabled {
    background: #93c5fd;
    cursor: not-allowed;
}

/* 可见性/频道选择下拉 */
.jz-visible {
    position: relative;
}
.jz-visible-btn {
    background: #f4f4f5;
    border: none;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.jz-visible-btn:hover {
    background: #ececee;
    color: #333;
}
.jz-visible-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 6px 0;
    list-style: none;
    min-width: 120px;
    z-index: 50;
    display: none;
}
.jz-visible-menu li {
    padding: 8px 16px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.jz-visible-menu li:hover {
    background: #f5f7fa;
}
.jz-visible-menu li[aria-selected="true"] {
    color: #2b5df7;
    background: #f0f5ff;
}

/* 表情面板 */
.jz-emoji-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px;
    width: 320px;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 50;
}
.jz-emoji-panel.show {
    display: flex;
}
.jz-emoji-item {
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    line-height: 1;
}
.jz-emoji-item:hover {
    background: #f0f0f0;
}

/* 预览区域 */
.jz-compose-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}
.jz-compose-previews:not(:empty) {
    margin-bottom: 12px;
}
.jz-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
}
.jz-preview-item img, .jz-preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
    transform: none !important;
}
.jz-preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jz-preview-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    text-align: center;
    padding: 2px 0;
}

/* Global styling updates */

/* Video Controls */
.jz-video-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    display: flex;
    align-items: center;
    padding: 0 10px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none; /* Let clicks pass through if hidden */
    z-index: 20;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.jz-weibo-media-video[data-state="playing"]:hover .jz-video-controls,
.jz-weibo-media-video[data-state="paused"] .jz-video-controls {
    opacity: 1;
    pointer-events: auto;
}
/* Ensure controls are hidden in preview state */
.jz-weibo-media-video[data-state="preview"] .jz-video-controls {
    display: none !important;
}

.jz-video-controls button {
    background: none; border: none; padding: 8px;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
}
.jz-video-controls button:hover {
    background: rgba(255,255,255,0.2);
}

/* Single Video Sizing Override */
/* Override the count-1 240px limit for single videos */
.jz-weibo-media.jz-single-video.count-1 {
    max-width: 100% !important; /* Allow taking full width of container (up to 640px) */
    display: block; /* Use block instead of grid for single flexible item */
}
.jz-weibo-media.jz-single-video .jz-weibo-media-video {
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Aspect ratio is handled inline */
}
.jz-weibo-media.jz-single-video .jz-video-thumb {
    width: 100%;
    height: 100%;
}

/* Video Player State */
.jz-weibo-media-video video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure video fits within the aspect ratio box */
    background: #000;
}
/* Hide play button when playing */
.jz-weibo-media-video[data-state="playing"] .jz-video-play-btn,
.jz-weibo-media-video[data-state="paused"] .jz-video-play-btn {
    display: none;
}

/* =========================================
   Lightbox Styles (Added)
   ========================================= */
.jz-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.jz-lightbox.show {
    display: flex;
    opacity: 1;
}
.jz-lightbox-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.jz-lightbox-main-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.jz-lightbox-main {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    user-select: none;
}
.jz-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    opacity: 0.8;
}
.jz-lightbox-close:hover {
    opacity: 1;
}
.jz-lightbox-prev, .jz-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 40px;
    width: 50px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s;
}
.jz-lightbox-prev:hover, .jz-lightbox-next:hover {
    background: rgba(255,255,255,0.2);
}
.jz-lightbox-prev { left: 0; }
.jz-lightbox-next { right: 0; }

.jz-lightbox-thumbs {
    height: 80px;
    width: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    overflow-x: auto;
}
.jz-lightbox-thumb-btn {
    width: 50px;
    height: 50px;
    border: 2px solid transparent;
    padding: 0;
    background: none;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
}
.jz-lightbox-thumb-btn.active {
    border-color: #fff;
    opacity: 1;
}
.jz-lightbox-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   New Channel Display Styles (Layouts)
   ========================================= */

/* Common: Hide toggle button for all explicit styles (including scroll if we want to enforce it without toggle) */
.jz-channel-nav-container[class*="style-"] .jz-channel-toggle-btn {
    display: none !important;
}

/* 1. Scroll (Default) - 强制横向滑动 */
.jz-channel-nav-container.style-scroll .jz-channel-scroll-mask {
    overflow-x: auto;
    white-space: nowrap;
    display: block;
}
.jz-channel-nav-container.style-scroll .jz-channel-list {
    display: inline-flex;
    flex-wrap: nowrap;
}

/* 3. Wrap (多行排列) - 自动换行 */
.jz-channel-nav-container.style-wrap .jz-channel-bar {
    height: auto;
    padding: 10px 0;
}
.jz-channel-nav-container.style-wrap .jz-channel-scroll-mask {
    overflow: visible;
    white-space: normal;
}
.jz-channel-nav-container.style-wrap .jz-channel-list {
    display: grid;
    grid-template-columns: repeat(var(--jz-grid-cols, 4), 1fr);
    gap: 10px;
    width: 100%;
}
.jz-channel-nav-container.style-wrap .jz-channel-link {
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 4. Minimal (极简文本) - 仅文字 */
.jz-channel-nav-container.style-minimal .jz-channel-bar {
    height: auto;
    padding: 10px 0;
}
.jz-channel-nav-container.style-minimal .jz-channel-scroll-mask {
    overflow-x: auto;
}
.jz-channel-nav-container.style-minimal .jz-channel-list {
    display: flex;
    gap: 15px;
}
.jz-channel-nav-container.style-minimal .jz-channel-link {
    background: none;
    padding: 0;
}
.jz-channel-nav-container.style-minimal .jz-channel-text {
    background: none;
    padding: 0;
    color: #666;
    font-weight: 500;
}
.jz-channel-nav-container.style-minimal .jz-channel-link.active .jz-channel-text {
    color: #2b5df7;
    font-weight: bold;
}
.jz-channel-nav-container.style-minimal .jz-channel-icon {
    display: none;
}

/* 5. Block (网格卡片) - 方块布局 */
.jz-channel-nav-container.style-block .jz-channel-bar {
    height: auto;
    padding: 10px 0;
}
.jz-channel-nav-container.style-block .jz-channel-scroll-mask {
    overflow: visible;
    white-space: normal;
}
.jz-channel-nav-container.style-block .jz-channel-list {
    display: grid;
    grid-template-columns: repeat(var(--jz-grid-cols, 4), 1fr);
    gap: 10px;
    width: 100%;
}
.jz-channel-nav-container.style-block .jz-channel-link {
    width: auto;
    height: 100%;
    background: #f9f9fb;
    border-radius: 8px;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 8px;
}
.jz-channel-nav-container.style-block .jz-channel-icon {
    margin: 0;
    width: 32px;
    height: 32px;
}
.jz-channel-nav-container.style-block .jz-channel-text {
    background: none;
    padding: 0;
    white-space: normal;
    font-size: 13px;
}
.jz-channel-nav-container.style-block .jz-channel-link.active {
    background: #2b5df7;
    color: #fff;
}
.jz-channel-nav-container.style-block .jz-channel-link.active .jz-channel-text {
    color: #fff;
}

/* 6. Segmented (分段控制器) - 按钮组 */
.jz-channel-nav-container.style-segmented .jz-channel-bar {
    height: auto;
    padding: 10px 0;
    justify-content: center;
}
.jz-channel-nav-container.style-segmented .jz-channel-scroll-mask {
    flex: 0 1 auto; /* Grow/shrink but based on content */
    overflow: visible;
    padding: 4px;
    background: #f4f4f5;
    border-radius: 8px;
}
.jz-channel-nav-container.style-segmented .jz-channel-list {
    gap: 2px;
}
.jz-channel-nav-container.style-segmented .jz-channel-link {
    padding: 6px 16px;
    border-radius: 6px;
    color: #666;
    transition: all 0.2s;
}
.jz-channel-nav-container.style-segmented .jz-channel-text {
    background: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
}
.jz-channel-nav-container.style-segmented .jz-channel-icon {
    display: none;
}
.jz-channel-nav-container.style-segmented .jz-channel-link:hover {
    color: #333;
}
.jz-channel-nav-container.style-segmented .jz-channel-link.active {
    background: #fff;
    color: #2b5df7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.jz-channel-nav-container.style-segmented .jz-channel-link.active .jz-channel-text {
    background: none;
    color: #2b5df7;
}

/* =========================================
   New Bubble Styles: Gradient & Floating
   ========================================= */

/* 2.1 Gradient Bubble Cloud (多彩渐变气泡云) & 2.2 Floating Bubble Cloud */
.jz-channel-nav-container.style-bubble_gradient .jz-channel-bar,
.jz-channel-nav-container.style-bubble_floating .jz-channel-bar {
    height: auto;
    padding: 20px 0;
    display: block;
}
.jz-channel-nav-container.style-bubble_gradient .jz-channel-scroll-mask,
.jz-channel-nav-container.style-bubble_floating .jz-channel-scroll-mask {
    overflow: visible;
    white-space: normal;
    padding: 0;
}
.jz-channel-nav-container.style-bubble_gradient .jz-channel-list,
.jz-channel-nav-container.style-bubble_floating .jz-channel-list {
    display: block;
    position: relative;
    height: 220px; /* Reduced height to remove empty space */
    width: 100%;
    max-width: 600px; /* Increased max-width for elliptical spread */
    margin: 0 auto;
    perspective: 800px; /* Add perspective for 3D feel */
}

.jz-channel-nav-container.style-bubble_gradient .jz-channel-link,
.jz-channel-nav-container.style-bubble_floating .jz-channel-link {
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
    overflow: hidden;
    width: var(--bubble-size, 60px);
    height: var(--bubble-size, 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: absolute; /* Absolute positioning for radial layout */
    transform: translate(-50%, -50%); /* Center anchor point */
    margin: 0;
}

.jz-channel-nav-container.style-bubble_gradient .jz-channel-link {
    color: #fff !important; /* Force white text */
}

/* Sizes - Optimized for better coordination (Min: 48px, Max: 80px) */
.jz-channel-nav-container.style-bubble_gradient .jz-channel-link.bubble-xs,
.jz-channel-nav-container.style-bubble_floating .jz-channel-link.bubble-xs { --bubble-size: 48px; font-size: 12px; }

.jz-channel-nav-container.style-bubble_gradient .jz-channel-link.bubble-s,
.jz-channel-nav-container.style-bubble_floating .jz-channel-link.bubble-s { --bubble-size: 56px; font-size: 13px; }

.jz-channel-nav-container.style-bubble_gradient .jz-channel-link.bubble-m,
.jz-channel-nav-container.style-bubble_floating .jz-channel-link.bubble-m { --bubble-size: 64px; font-size: 14px; }

.jz-channel-nav-container.style-bubble_gradient .jz-channel-link.bubble-l,
.jz-channel-nav-container.style-bubble_floating .jz-channel-link.bubble-l { --bubble-size: 72px; font-size: 15px; font-weight: bold; }

.jz-channel-nav-container.style-bubble_gradient .jz-channel-link.bubble-xl,
.jz-channel-nav-container.style-bubble_floating .jz-channel-link.bubble-xl { --bubble-size: 80px; font-size: 16px; font-weight: 800; z-index: 2; }

.jz-channel-nav-container.style-bubble_gradient .jz-channel-icon,
.jz-channel-nav-container.style-bubble_floating .jz-channel-icon { display: none; }

.jz-channel-nav-container.style-bubble_gradient .jz-channel-text,
.jz-channel-nav-container.style-bubble_floating .jz-channel-text {
    background: transparent !important;
    padding: 0;
    white-space: normal;
    line-height: 1.2;
    color: inherit !important;
    font-weight: 600; /* Increased weight */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Added subtle shadow for legibility */
    letter-spacing: 0.5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.jz-channel-nav-container.style-bubble_gradient .jz-channel-link:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); z-index: 30; }

.jz-channel-nav-container.style-bubble_gradient .jz-channel-link:nth-child(5n+1) { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); }
.jz-channel-nav-container.style-bubble_gradient .jz-channel-link:nth-child(5n+2) { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.jz-channel-nav-container.style-bubble_gradient .jz-channel-link:nth-child(5n+3) { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.jz-channel-nav-container.style-bubble_gradient .jz-channel-link:nth-child(5n+4) { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.jz-channel-nav-container.style-bubble_gradient .jz-channel-link:nth-child(5n+5) { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

/* Style: Bubble Floating */
.jz-channel-nav-container.style-bubble_floating .jz-channel-link {
    color: #fff !important;
    animation: jz-float-centered 3s infinite ease-in-out;
}

.jz-channel-nav-container.style-bubble_floating .jz-channel-link:hover { animation-play-state: paused; transform: translate(-50%, -50%) scale(1.2); z-index: 30; }

.jz-channel-nav-container.style-bubble_floating .jz-channel-link:nth-child(5n+1) { background: radial-gradient(circle at 30% 30%, #ff9a9e, #fad0c4); }
.jz-channel-nav-container.style-bubble_floating .jz-channel-link:nth-child(5n+2) { background: radial-gradient(circle at 30% 30%, #a1c4fd, #c2e9fb); }
.jz-channel-nav-container.style-bubble_floating .jz-channel-link:nth-child(5n+3) { background: radial-gradient(circle at 30% 30%, #d4fc79, #96e6a1); }
.jz-channel-nav-container.style-bubble_floating .jz-channel-link:nth-child(5n+4) { background: radial-gradient(circle at 30% 30%, #fbc2eb, #a6c1ee); }
.jz-channel-nav-container.style-bubble_floating .jz-channel-link:nth-child(5n+5) { background: radial-gradient(circle at 30% 30%, #f6d365, #fda085); }

@keyframes jz-float-centered {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-10px); }
}

/* Active State for Bubble Cloud */
.jz-channel-nav-container.style-bubble_gradient .jz-channel-link.active,
.jz-channel-nav-container.style-bubble_floating .jz-channel-link.active {
    z-index: 50;
    animation: jz-bubble-active-pulse 2s infinite ease-in-out !important;
    filter: brightness(1.1);
}

@keyframes jz-bubble-active-pulse {
    0% { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.8); }
    50% { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 0 8px rgba(255, 255, 255, 0.4); }
    100% { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.8); }
}

/* Comments List Styles */
.jz-comments-section {
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
    padding-top: 10px;
}
.jz-comment-list {
    margin-bottom: 12px;
}
.jz-comment-item {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
}
.jz-comment-item:last-child {
    margin-bottom: 0;
}
.jz-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.jz-comment-body {
    flex: 1;
    background: #f9f9fb;
    padding: 8px 12px;
    border-radius: 8px;
}
.jz-comment-author {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
    font-size: 13px;
}
.jz-comment-content {
    color: #444;
    line-height: 1.5;
    word-break: break-word;
}
.jz-comment-content p {
    margin: 0;
}
.jz-comment-meta {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}
.jz-comment-loading, .jz-no-comments, .jz-comment-error {
    text-align: center;
    color: #999;
    padding: 20px 0;
    font-size: 13px;
}

/* Sub Comments Styles */
.jz-sub-comment-list {
    margin-top: 12px;
    background: #f5f5f7;
    border-radius: 8px;
    padding: 12px;
}
.jz-sub-comment-list .jz-comment-item {
    margin-bottom: 12px;
    font-size: 13px;
}
.jz-sub-comment-list .jz-comment-item:last-child {
    margin-bottom: 0;
}
.jz-sub-comment-list .jz-comment-avatar {
    width: 24px;
    height: 24px;
}
.jz-sub-comment-list .jz-comment-body {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.jz-sub-comment-list .jz-comment-author {
    font-size: 12px;
}
.jz-sub-comment-list .jz-comment-content {
    font-size: 13px;
}