/**
 * 对话式 AI 生成卡片 [zibll_ai_chat] 样式
 * 作用域前缀 .zibll-ai-chat；配色全部用父主题变量（深色模式 .dark-theme 重定义同名变量，自动适配）；
 * color-mix 前均给纯变量回退行。产物网格复用 ai.css 的 .zibll-ai-arts 全局类。
 */

/*==================== 卡片骨架与高度策略 ====================*/

.zibll-ai-chat {
    width: 100%;
    background: var(--main-bg-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/*full 模式：撑满父级高度（父容器给确定高度即整卡吃满；父级 auto 时自然退化为内容高）*/
.zibll-ai-chat.zibll-ai-chat--full {
    height: 100%;
    min-height: 0;
}

/*---- 消息流 ----
  消息区始终吃剩余空间内部滚动：full 模式下容器高度=父容器高度（不随消息增长），
  固定高度模式下容器 height:Npx——两种模式消息区都不撑开整体结构*/
.zibll-ai-chat-msgs {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.zibll-ai-chat-empty {
    text-align: center;
    font-size: 13px;
    padding: 26px 10px;
}

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

/*==================== 消息气泡 ====================*/

.zibll-ai-chat-msg {
    max-width: 86%;
    margin: 0 0 12px;
    padding: 9px 13px;
    border-radius: var(--main-radius, 10px);
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
    clear: both;
}

/*用户气泡：右对齐、主题色浅底（回退行在前）*/
.zibll-ai-chat-msg--user {
    margin-left: auto;
    background: var(--muted-bg-color);
    background: color-mix(in srgb, var(--theme-color) 12%, var(--main-bg-color));
}

/*AI 气泡：左对齐、灰底*/
.zibll-ai-chat-msg--ai {
    margin-right: auto;
    background: var(--muted-bg-color);
}

/*描述文本保留换行*/
.zibll-ai-chat-msg-text {
    white-space: pre-wrap;
}

/*错误/提示三态（对应后端 ys：danger/warning/info）*/
.zibll-ai-chat-msg--err {
    background: rgba(235, 69, 86, .1);
    background: color-mix(in srgb, #eb4556 10%, var(--main-bg-color));
    color: #eb4556;
}

.zibll-ai-chat-msg--warn {
    background: rgba(244, 156, 34, .12);
    background: color-mix(in srgb, #f49c22 12%, var(--main-bg-color));
    color: #c77f14;
}

.dark-theme .zibll-ai-chat-msg--warn {
    color: #f4b04a;
}

.zibll-ai-chat-msg--info {
    background: rgba(45, 108, 246, .08);
    background: color-mix(in srgb, var(--theme-color) 8%, var(--main-bg-color));
}

/*参数回显 chips 行（用户气泡内）*/
.zibll-ai-chat-msg-params {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 12px;
}

.zibll-ai-chat-msg-param {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--main-bg-color);
    border: 1px solid var(--main-border-color);
    color: var(--muted-2-color);
}

/*发送回执条：居中小字，终态由 JS 整条移除（结果气泡自身已承载状态）*/
.zibll-ai-chat-receipt {
    clear: both;
    text-align: center;
    font-size: 12px;
    color: var(--muted-2-color);
    margin: 0 0 12px;
}

.zibll-ai-chat-receipt a {
    margin-left: 4px;
}

/*生成中的转圈*/
.zibll-ai-chat-gen {
    display: inline-flex;
    align-items: center;
    color: var(--muted-2-color);
}

/*产物网格在气泡内放宽：小气泡里 160px 起排即可，宽媒体不越界*/
.zibll-ai-chat .zibll-ai-arts {
    margin-top: 8px;
}

.zibll-ai-chat .zibll-ai-art video,
.zibll-ai-chat .zibll-ai-art audio {
    max-width: 100%;
}

/*==================== 输入区 ====================*/

.zibll-ai-chat-input {
    flex: none;
    border-top: 1px solid var(--main-border-color);
    padding: 10px 12px 8px;
}

.zibll-ai-chat-wf.hide {
    display: none !important;
}

/*主描述 textarea：自增高 1~6 行，无边框融入卡片*/
.zibll-ai-chat-prompt {
    display: block;
    width: 100%;
    min-height: 104px;
    max-height: 156px; /*约6行，超出内部滚动*/
    overflow-y: auto;
    border: 1px solid var(--main-border-color);
    outline: none;
    resize: none;
    background: transparent;
    color: var(--main-color);
    font-size: 15px;
    line-height: 1.7;
    padding: 5px 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/*纯参数工作流（无描述区）：工具栏顶部留一点呼吸*/
.zibll-ai-chat-block--noprompt .zibll-ai-chat-tools {
    padding-top: 4px;
}

/*---- 工具栏 chips ----*/
.zibll-ai-chat-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 2px 0 8px;
}

.zibll-ai-chat-tools:empty {
    display: none;
}

.zibll-ai-chat-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border: 1px solid var(--main-border-color);
    border-radius: 999px;
    background: var(--muted-bg-color);
    font-size: 12px;
    line-height: 2;
    color: var(--muted-2-color);
    transition: border-color .15s, box-shadow .15s;
}

.zibll-ai-chat-chip:focus-within {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 2px rgba(45, 108, 246, .12);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-color) 12%, transparent);
}

.zibll-ai-chat-chip-lb {
    white-space: nowrap;
    cursor: default;
    margin-bottom: 0;
}

.zibll-ai-chat-star {
    color: #eb4556;
    margin-left: 2px;
}

.zibll-ai-chat-ctl {
    border: none;
    outline: none;
    background: transparent;
    color: var(--main-color);
    font-size: 12px;
    width: 120px;
    min-width: 0;
    padding: 0;
}

select.zibll-ai-chat-ctl {
    appearance: auto;
    cursor: pointer;
}

/*迷你开关：input 隐藏 + i 胶囊滑钮*/
.zibll-ai-chat-switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
    flex: none;
    cursor: pointer;
}

.zibll-ai-chat-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.zibll-ai-chat-switch i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--muted-border-color, #d9d9d9);
    transition: background .15s;
    pointer-events: none;
}

.zibll-ai-chat-switch i::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .15s;
}

.zibll-ai-chat-switch input:checked + i {
    background: var(--theme-color);
}

.zibll-ai-chat-switch input:checked + i::after {
    transform: translateX(13px);
}

/*---- 文件上传 chip：整颗胶囊即上传热区 ----
  内部 uploader 绝对铺满、透明、保持可点击可聚焦；图标/文字不吃指针，
  点击直达 uploader（其 click→input.click 由 ai-chat.js 绑定）。*/
.zibll-ai-chat-chip-file {
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
}

.zibll-ai-chat-chip-file .zibll-ai-chat-uploader {
    position: absolute;
    inset: 0;
    opacity: 0;
    border: none;
    min-height: 0;
    padding: 0;
    cursor: pointer;
}

.zibll-ai-chat-chip-file .zibll-ai-chat-chip-ico,
.zibll-ai-chat-chip-file .zibll-ai-chat-chip-lb,
.zibll-ai-chat-chip-file .zibll-ai-chat-chip-dot {
    pointer-events: none;
}

.zibll-ai-chat-chip-file > .zibll-ai-chat-chip-ico,
.zibll-ai-chat-chip-file > .zibll-ai-chat-chip-lb,
.zibll-ai-chat-chip-file > .zibll-ai-chat-chip-dot {
    margin-left: 11px;
}

.zibll-ai-chat-chip-file > .zibll-ai-chat-chip-dot {
    margin-right: 11px;
}

.zibll-ai-chat-chip-ico {
    display: inline-flex;
    align-items: center;
    color: var(--theme-color);
}

/*状态点：空心=未上传，绿实心=已就绪，主题色呼吸=上传中*/
.zibll-ai-chat-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--muted-2-color);
    flex: none;
}

.zibll-ai-chat-chip-file.is-ok {
    border-color: rgba(45, 108, 246, .45);
    border-color: color-mix(in srgb, var(--theme-color) 45%, var(--main-border-color));
}

.zibll-ai-chat-chip-file.is-ok .zibll-ai-chat-chip-dot {
    border: none;
    background: #4caf7d;
}

.zibll-ai-chat-chip-file.is-busy .zibll-ai-chat-chip-dot {
    border: none;
    background: var(--theme-color);
    animation: zibll-ai-chat-dot 1.2s ease-in-out infinite;
}

.zibll-ai-chat-chip-file.is-busy {
    border-color: var(--theme-color);
}

@keyframes zibll-ai-chat-dot {
    50% {
        opacity: .3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zibll-ai-chat-chip-file.is-busy .zibll-ai-chat-chip-dot {
        animation: none;
    }
}

/*==================== 底栏：功能选择 + 发送 ====================*/

.zibll-ai-chat-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.zibll-ai-chat-func {
    max-width: 55%;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--main-color);
    background: var(--muted-bg-color);
    border: 1px solid var(--main-border-color);
    border-radius: var(--mini-radius, 8px);
    outline: none;
    cursor: pointer;
}

.zibll-ai-chat-func:focus {
    border-color: var(--theme-color);
}

.zibll-ai-chat-func-label {
    font-size: 13px;
    color: var(--muted-2-color);
    padding: 6px 2px;
}

.zibll-ai-chat-send {
    margin-left: auto;
    flex: none;
}

.zibll-ai-chat-send[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/*额度提示槽 + hint 状态尾注*/
.zibll-ai-chat-quota-slot {
    font-size: 12px;
}

.zibll-ai-chat-quota-slot:empty {
    display: none;
}

.zibll-ai-chat-hint-status:empty {
    display: none;
}

.zibll-ai-chat-hint-status {
    margin-left: 4px;
    color: #f49c22;
}

/*未登录提示（点击发送/上传即弹登录）*/
.zibll-ai-chat-login-tip {
    margin-left: 6px;
    color: var(--theme-color);
}

/*==================== 窄屏收紧 ====================*/

@media (max-width: 480px) {
    .zibll-ai-chat-msg {
        max-width: 94%;
    }

    .zibll-ai-chat-ctl {
        width: 105px;
    }

    .zibll-ai-chat-tools,
    .zibll-ai-chat-bar {
        gap: 6px;
    }
}