/**
 * zibll AI 模块前台样式
 * 作用域统一加 .zibll-ai- 前缀，不与父主题类冲突；依赖父主题 _main 之后加载
 * 配色仅用父主题 CSS 变量（--main-bg-color/--muted-bg-color/--theme-color 等），
 * 自动适配父主题浅色/深色模式（body.dark-theme 会重定义这些变量）；
 * 半透明主题色用 color-mix 并在其前提供纯变量回退行，老浏览器也能正常显示
 */

/*==================== AI创作页：左列表 + 右表单 ====================*/

.zibll-ai-page {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 12px;
    margin-bottom: 20px;
}

/*左右两卡片顶部对齐；间距统一交给 gap（抵消 zib-widget 自带 margin-bottom 的叠加）*/
.zibll-ai-page > .zib-widget {
    margin-bottom: 0;
}

.zibll-ai-side {
    flex: 0 0 280px;
    width: 280px;
    padding: 8px;
}

/*main 也是卡片；自身不留 padding，由内部表单的 padding 撑开，两侧内容起始位置对齐*/
.zibll-ai-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

/*main 已是卡片：内部表单退化为普通内容块，避免卡片套卡片*/
.zibll-ai-main .zibll-ai-form {
    background: transparent;
    box-shadow: none;
    margin: 0;
}

.zibll-ai-form-wrap.hide {
    display: none;
}

/*列表卡片头（标题+横滑箭头）仅移动端显示*/
.zibll-ai-side-head {
    display: none;
}

/*---- 列表项 ----*/

.zibll-ai-wf-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: var(--main-radius, 10px);
    cursor: pointer;
    border: 1px solid var(--main-border-color);
    transition: background .15s, border-color .15s;
    outline: none;
}

.zibll-ai-wf-item + .zibll-ai-wf-item {
    margin-top: 4px;
}

.zibll-ai-wf-item:hover {
    background: var(--muted-bg-color);
}

.zibll-ai-wf-item:focus-visible {
    border-color: var(--theme-color);
}

.zibll-ai-wf-item.cur {
    background: var(--muted-bg-color);
    background: color-mix(in srgb, var(--theme-color) 8%, transparent);
    border-color: var(--main-border-color);
    border-color: color-mix(in srgb, var(--theme-color) 35%, transparent);
}

/*列表缩图固定正方形：双类选择器压过父主题 .wp-posts-content img 的 height:auto/max-width*/
.zibll-ai-wf-item .zibll-ai-wf-cover {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: var(--mini-radius, 8px);
    object-fit: cover;
    background: var(--muted-bg-2-color);
    display: block;
}

.zibll-ai-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

/*封面渐变兜底块为纯装饰，深浅色通用*/
.zibll-ai-cover-fallback.fb-image { background: linear-gradient(135deg, #5b8cff, #8c6bff); }
.zibll-ai-cover-fallback.fb-video { background: linear-gradient(135deg, #ff8f5b, #ff5b8f); }
.zibll-ai-cover-fallback.fb-audio { background: linear-gradient(135deg, #35c28f, #2bb3c0); }
.zibll-ai-cover-fallback.fb-mixed { background: linear-gradient(135deg, #6b7bff, #b05bff); }

.zibll-ai-wf-info {
    flex: 1 1 auto;
    min-width: 0;
    /*名称1行+简介2行+标签1行的固定高度：无简介/标签少的工作流也保持同一外观*/
    min-height: 80px;
}

.zibll-ai-wf-name {
    display: block;
    font-size: 13.5px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zibll-ai-wf-summary {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted-2-color);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zibll-ai-wf-meta {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 5px;
    overflow: hidden;
}

/*列表场景双保险：height/line-height 锁定 20px 保证文字垂直居中，
不被父主题内容区 .wp-posts-content{line-height:2} 的继承环境干扰*/
.zibll-ai-wf-meta .zibll-ai-tag {
    flex: 0 0 auto;
    margin: 0;
    height: 20px;
    line-height: 20px;
}

/*付费方式标签灰色弱化，与类型/自定义标签区分*/
.zibll-ai-tag-pay {
    color: var(--muted-2-color);
    background: var(--muted-bg-2-color);
}

.zibll-ai-tag {
    display: inline-block;
    padding: 0 6px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    border-radius: 10px;
    color: var(--theme-color);
    background: var(--muted-bg-2-color);
    background: color-mix(in srgb, var(--theme-color) 12%, transparent);
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*==================== 表单 ====================*/

.zibll-ai-form {
    padding: 18px 20px;
}

.zibll-ai-form-head {
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--main-border-color);
}

/*标题：工作流名称 + 简介 + 小徽标行（双类选择器提高特异性，防止被父主题正文规则覆盖）*/
.zibll-ai-form .zibll-ai-form-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

.zibll-ai-form-summary {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted-2-color);
}

.zibll-ai-form-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.zibll-ai-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0 16px;
}

.zibll-ai-field {
    margin-bottom: 14px;
    min-width: 0;
}

/*提示词等大字段独占一行*/
.zibll-ai-field:has(textarea),
.zibll-ai-field:has(.zibll-ai-uploader) {
    grid-column: 1 / -1;
}

.zibll-ai-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

/*必填星号与文字留一点呼吸距离*/
.zibll-ai-field > label .c-red {
    margin-left: 3px;
}

/*==================== 多文件槽位组 ====================*/

/*多文件节点：组标题 + N个独立上传框（节点级标签作组标题，槽位级标签在各框上）。
  规则须位于上方 :has(.zibll-ai-uploader) 之后——同特异性下后来者胜，
  否则槽位框会被整行规则撑成每个占满一行*/
.zibll-ai-multigrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    margin-bottom: 14px;
}

.zibll-ai-multigrid .zibll-ai-field {
    grid-column: auto; /*压过 :has 整行规则：槽位框并排而非独占一行*/
    margin-bottom: 0;
    display: flex; /*列向布局：标签在上，上传框拉伸补齐，与同行邻居等高*/
    flex-direction: column;
}

.zibll-ai-multigrid .zibll-ai-field > label {
    flex: 0 0 auto;
}

.zibll-ai-multigrid .zibll-ai-uploader {
    padding: 14px 10px; /*槽位框数量多，比单文件面板稍紧凑*/
    flex: 1 1 auto; /*用 flex 拉伸等高；height:100% 会叠加标签高度致溢出*/
    min-height: 88px;
    box-sizing: border-box;
}

/*槽位框里的云朵图标比单文件面板小一档，保持紧凑*/
.zibll-ai-multigrid .zibll-ai-uploader-hint i {
    font-size: 18px;
}

/*槽位为奇数时末位通栏补齐，避免右列空缺产生的对不齐感*/
.zibll-ai-multigrid .zibll-ai-upbox:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.zibll-ai-input,
.zibll-ai-form textarea {
    width: 100%;
    max-width: 100%;
    padding: 9px 12px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--main-color);
    background: var(--main-bg-color);
    border: 1px solid var(--main-border-color);
    border-radius: var(--mini-radius, 8px);
    outline: none;
    box-sizing: border-box;
    appearance: auto;
    transition: border-color .15s, box-shadow .15s;
}

.zibll-ai-form select.zibll-ai-input {
    height: auto;
}

textarea.zibll-ai-input {
    min-height: 110px;
    resize: vertical;
}

.zibll-ai-input:focus,
.zibll-ai-form textarea:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(45, 108, 246, .1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 15%, transparent);
}

input[type="checkbox"].zibll-ai-switch {
    width: 16px;
    height: 16px;
    accent-color: var(--theme-color);
    vertical-align: middle;
}

.zibll-ai-submit {
    width: 100%;
    height: 42px;
    font-size: 14px;
    border-radius: var(--main-radius, 10px);
    margin-top: 4px;
    background: var(--theme-color);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(45, 108, 246, .25);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-color) 28%, transparent);
    transition: opacity .15s, box-shadow .15s;
}

.zibll-ai-submit:hover {
    opacity: .9;
}

.zibll-ai-submit[disabled] {
    opacity: .65;
    cursor: not-allowed;
}

/*按钮下方小字提醒：我的AI任务入口 + 剩余可提交数*/
.zibll-ai-submit-hint {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted-2-color);
}

.zibll-ai-submit-hint b {
    color: var(--theme-color);
    margin: 0 2px;
}

/*==================== 上传面板 ====================*/

.zibll-ai-uploader {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /*内容垂直居中：空面板时提示文字不顶在上面*/
    gap: 3px;
    min-height: 96px;
    box-sizing: border-box;
    border: 1.5px dashed var(--muted-border-color);
    border-radius: var(--main-radius, 10px);
    padding: 16px 14px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.zibll-ai-uploader:hover {
    border-color: var(--theme-color);
    background: var(--muted-bg-color);
    background: color-mix(in srgb, var(--theme-color) 4%, transparent);
}

/*焦点环只给键盘操作（:focus-visible），鼠标点选文件后不会常亮*/
.zibll-ai-uploader:focus-visible {
    border-color: var(--theme-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 108, 246, .1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 15%, transparent);
}

/*上传中（文件名行出现且尚未就绪）：主题色虚线呼吸，传达进行中*/
.zibll-ai-uploader:has(.zibll-ai-uploader-name:not([hidden])) {
    border-color: var(--theme-color);
    animation: zibll-ai-up-pulse 1.6s ease-in-out infinite;
}

/*已就绪：实线收边+主题色浅底，与虚线空面板形成状态对比*/
.zibll-ai-uploader:has(.zibll-ai-uploaded-ok:not([hidden])) {
    border-style: solid;
    border-color: rgba(45, 108, 246, .45);
    border-color: color-mix(in srgb, var(--theme-color) 45%, var(--main-border-color));
    background: var(--muted-bg-color);
    background: color-mix(in srgb, var(--theme-color) 5%, transparent);
    animation: none;
}

@keyframes zibll-ai-up-pulse {
    0%,
    100% {
        border-color: var(--muted-border-color);
    }
    50% {
        border-color: var(--theme-color);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zibll-ai-uploader {
        animation: none;
    }
}

.zibll-ai-fileinput {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/*云朵图标+文字上下堆叠（图标为面板视觉锚点），HTML 见 ai-shortcode.php*/
.zibll-ai-uploader-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    font-size: 15px;
    color: var(--muted-2-color);
    line-height: 1.6;
}

/*上传成功后 JS 清空 hint 内容，:empty 免得留一行空高*/
.zibll-ai-uploader-hint:empty {
    display: none;
}

.zibll-ai-uploader-hint i {
    font-size: 21px;
    line-height: 1;
    color: var(--theme-color);
}

/*已上传文件名过长时省略，不把面板撑破*/
.zibll-ai-uploader-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zibll-ai-thumb {
    display: block;
    max-width: 100%;
    max-height: 150px;
    margin: 0 auto;
    border-radius: var(--mini-radius, 6px);
}

img.zibll-ai-thumb[hidden] {
    display: none !important;
}

.zibll-ai-uploaded-ok[hidden],
.zibll-ai-msg[hidden],
.zibll-ai-result[hidden],
.zibll-ai-uploader-name[hidden] {
    display: none !important;
}

/*==================== 提示与结果 ====================*/

.zibll-ai-msg {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.8;
    background: var(--muted-bg-2-color);
    border-radius: var(--mini-radius, 6px);
}

/*---- 产物网格（AI页结果区与用户中心任务卡共用） ----*/

.zibll-ai-arts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.zibll-ai-art {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--main-border-color);
    border-radius: var(--mini-radius, 8px);
    overflow: hidden;
    padding: 8px;
    background: var(--main-bg-color);
    min-width: 0;
}

/*文本/音频/视频产物独占整行，与图片瓦片混排不显乱*/
.zibll-ai-art.zibll-ai-art-full {
    grid-column: 1 / -1;
}

/*图片瓦片：交给父主题 imgbox 灯箱打开*/
.zibll-ai-art img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    background: var(--muted-bg-2-color);
    cursor: zoom-in;
}

.zibll-ai-art video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
}

.zibll-ai-art audio {
    width: 100%;
    height: 40px;
    margin: 10px 0 0;
}

/*文本产物展示块*/
.zibll-ai-textout {
    flex: 1 1 auto;
    background: var(--muted-bg-color);
    border: 1px solid var(--main-border-color);
    border-radius: var(--mini-radius, 6px);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow: auto;
}

/*底部操作按钮行：下载/复制 居中*/
.zibll-ai-art-act {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.zibll-ai-art-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 16px;
    font-size: 12px;
    line-height: 1;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    text-decoration: none;
    color: var(--theme-color);
    background: var(--muted-bg-color);
    background: color-mix(in srgb, var(--theme-color) 10%, transparent);
    transition: background .15s;
}

.zibll-ai-art-btn i {
    font-size: 12px;
    line-height: 1;
}

.zibll-ai-art-btn:hover {
    background: var(--muted-bg-2-color);
    background: color-mix(in srgb, var(--theme-color) 20%, transparent);
}

/*---- 生成记录组（连续生成按组分隔，最新在最上） ----*/

.zibll-ai-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
}

.zibll-ai-result-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted-color);
}

.zibll-ai-result-clear {
    background: none;
    border: none;
    padding: 2px 8px;
    font-size: 12px;
    color: var(--muted-2-color);
    cursor: pointer;
    border-radius: var(--mini-radius, 4px);
}

.zibll-ai-result-clear:hover {
    color: #d93025;
    background: var(--muted-bg-color);
}

.zibll-ai-rgroup {
    border: 1px solid var(--main-border-color);
    border-radius: var(--mini-radius, 8px);
    padding: 10px;
    margin-bottom: 10px;
    background: var(--main-bg-color);
}

.zibll-ai-rgroup:last-child {
    margin-bottom: 0;
}

/*最新一组高亮边框 + 入场动画*/
.zibll-ai-rgroup-new {
    border-color: var(--main-border-color);
    border-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
    animation: zibll-ai-pop .25s ease;
}

@keyframes zibll-ai-pop {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.zibll-ai-rgroup-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--muted-2-color);
}

.zibll-ai-rgroup-time {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--muted-bg-color);
}

/*==================== AI页面通知卡片（后台配置HTML，仅约束排版不干预内容样式） ====================*/

/*独立通知卡：由子主题 page.php 注入在 content-wrap 上方，与AI内容body完全分离；
配色全部用父主题变量（.dark-theme 重定义后自动适配深色模式），不依赖 color-mix*/
.zibll-ai-notice {
    padding: 0; /*清掉 zib-widget 的15px，让标题条通栏、圆角由卡片裁切*/
    overflow: hidden;
}

/*通栏标题条：muted 底色在浅色(白卡)与深色模式下都与卡身形成明确对比*/
.zibll-ai-notice-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    margin: 0;
    background: var(--muted-bg-color);
    border-bottom: 1px solid var(--main-border-color);
    font-size: 16px;
    font-weight: 600;
    color: var(--main-color);
}

/*喇叭图标圆片：主题色实底白图标，深浅色模式下都醒目*/
.zibll-ai-notice-head .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--theme-color);
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.zibll-ai-notice-body {
    padding: 12px 15px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--main-color);
}

/*管理员可写任意HTML：压平首尾元素外边距，避免卡片内上下留白不齐
（双类特异性高于父主题 .wp-posts-content p 等内容区规则）*/
.zibll-ai-notice-body > :first-child {
    margin-top: 0;
}

.zibll-ai-notice-body > :last-child {
    margin-bottom: 0;
}

/*==================== 登录引导 ====================*/

.zibll-ai-login-wall {
    padding: 40px 20px;
}

/*==================== 用户中心任务卡片（渲染见 ai-user.php） ====================*/

.zibll-ai-card {
    padding: 14px 16px;
    border-left: 3px solid var(--theme-color);
}

.zibll-ai-head {
    padding: 14px 16px;
}

/*---- 批量删除工具栏 ----*/

.zibll-ai-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    padding: 8px 14px;
    margin-top: 10px;
    gap: 10px;
}

.zibll-ai-toolbar[hidden] {
    display: none !important;
}

.zibll-ai-toolbar-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    cursor: pointer;
    min-width: 0;
}

/*同任务卡勾选框：属性选择器压过父主题的 1em 尺寸与 baseline 偏移*/
input[type='checkbox'].zibll-ai-selall {
    width: 15px;
    height: 15px;
    min-width: 15px;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    vertical-align: middle;
    accent-color: var(--theme-color);
    cursor: pointer;
}

/*---- 任务卡头部：整体垂直居中 ----*/

.zibll-ai-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 8px;
}

.zibll-ai-card-head-left,
.zibll-ai-card-head-right {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
}

/*勾选框与后面内容的间隔统一交给 flex gap（不依赖内联 margin，避免贴死）*/
.zibll-ai-card-head-left {
    gap: 10px;
}

.zibll-ai-card-head-left b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*父主题 input[type=checkbox] 规则特异性更高（1em尺寸+baseline偏移），必须带属性选择器才能覆盖*/
input[type='checkbox'].zibll-ai-selbox {
    width: 15px;
    height: 15px;
    min-width: 15px;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    vertical-align: middle;
    accent-color: var(--theme-color);
    cursor: pointer;
}

/*状态徽标缩小*/
.zibll-ai-stbadge {
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    flex: 0 0 auto;
}

.zibll-ai-delone {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--muted-2-color);
    display: inline-flex;
    align-items: center;
}

.zibll-ai-delone:hover {
    color: #d93025;
}

.zibll-ai-card .zibll-ai-arts {
    margin-top: 10px;
}

/*==================== 移动端适配（AI页大气、易交互） ====================*/

/*触屏基础：去掉点按高亮闪烁*/
.zibll-ai-page,
.zibll-ai-form,
.zibll-ai-card,
.zibll-ai-wf-item,
.zibll-ai-art-btn,
.zibll-ai-uploader {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
    .zibll-ai-page {
        flex-direction: column;
        gap: 10px;
    }

    /*---- 顶部独立卡片：标题行 + 左右箭头 + 横滑轨道 ----*/
    .zibll-ai-side {
        flex: 1 1 auto;
        width: 100%;
        position: static;
        padding: 10px 0 0;
    }

    .zibll-ai-side-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px 8px;
    }

    .zibll-ai-side-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--muted-color);
    }

    .zibll-ai-side-nav {
        display: flex;
        gap: 6px;
    }

    .zibll-ai-nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--muted-bg-2-color);
        color: var(--muted-color);
        font-size: 14px;
        cursor: pointer;
        transition: opacity .15s, color .15s, background .15s;
    }

    .zibll-ai-nav-btn[disabled] {
        opacity: .35;
        cursor: default;
    }

    .zibll-ai-side-nav[hidden] {
        display: none !important;
    }

    /*横滑轨道：滑动吸边、隐藏滚动条*/
    .zibll-ai-side-track {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 2px 12px 12px;
        scroll-snap-type: x proximity;
        scroll-padding-left: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .zibll-ai-side-track::-webkit-scrollbar {
        display: none;
    }

    /*竖版小卡：封面正方形满铺，名称与标签叠加在图片底部*/
    .zibll-ai-wf-item {
        flex: 0 0 172px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
        scroll-snap-align: start;
        border: 1px solid var(--main-border-color);
    }

    .zibll-ai-wf-item + .zibll-ai-wf-item {
        margin-top: 0;
    }

    .zibll-ai-wf-item .zibll-ai-wf-cover {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 0; /*圆角交给卡片裁切，避免边框处露缝*/
    }

    /*名称+标签固定叠加在图片底部：渐变压暗保证可读性；叠加层不占布局，卡片等高由封面比例决定*/
    .zibll-ai-wf-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 0;
        padding: 26px 8px 8px;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6));
        color: #fff;
    }

    /*叠加层只放名称+标签：隐藏简介*/
    .zibll-ai-wf-summary {
        display: none;
    }

    .zibll-ai-wf-name {
        font-size: 13px;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    }

    /*叠加层上的标签改为半透明黑底白字，深色渐变上保持对比度*/
    .zibll-ai-wf-info .zibll-ai-tag {
        color: #fff;
        background: rgba(0, 0, 0, .32);
    }

    .zibll-ai-wf-info .zibll-ai-tag-pay {
        color: rgba(255, 255, 255, .8);
        background: rgba(0, 0, 0, .32);
    }

    /*满铺图片下背景高亮不可见：选中态用主题色描边强化*/
    .zibll-ai-wf-item.cur {
        border-color: var(--theme-color);
        box-shadow: 0 0 0 1.5px var(--theme-color);
    }

    /*---- 底部主内容卡片：全宽 ----*/
    .zibll-ai-main {
        width: 100%;
    }

    /*表单：满宽单列、标题收敛、按钮加大便于点按*/
    .zibll-ai-form {
        padding: 16px 14px;
    }

    .zibll-ai-form-title {
        font-size: 22px;
    }

    .zibll-ai-fields {
        grid-template-columns: 1fr;
    }

    /*多文件槽位：窄屏退化为单列，上传框过小不好点*/
    .zibll-ai-multigrid {
        grid-template-columns: 1fr;
    }

    .zibll-ai-submit {
        height: 46px;
        font-size: 15px;
    }

    .zibll-ai-uploader {
        padding: 18px 14px; /*触控面积已由 min-height 保证，内边距回收一点*/
    }

    .zibll-ai-art-btn {
        height: 30px;
        padding: 0 18px;
    }

    .zibll-ai-card {
        padding: 12px 14px;
    }
}

@media (max-width: 640px) {
    /*图片瓦片固定两列，整齐大方；文本/音频/视频仍整行*/
    .zibll-ai-arts {
        grid-template-columns: repeat(2, 1fr);
    }

    .zibll-ai-art.zibll-ai-art-full {
        grid-column: 1 / -1;
    }
}