body, html { margin: 0; padding: 0 !important; width: 100%; height: 100%; overflow: hidden; background-color: #f0f0f0; font-family: 'Segoe UI', sans-serif; }

#header{
    width: 100%;
    background: none;
    backdrop-filter: none;
    height: 60px;
}
#header .user-profile-card{}


.LoginRegister-Box{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: 8px;
}

.login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.LoginRegister-Box > a{
    display: inline-block;
    height: 30px;
    line-height: 30px;
    background: #ccc;
    padding: 0 16px;
    border-radius: 20px;
    box-sizing: border-box;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    transition: .2s;
}
.LoginRegister-Box > .dl-btn{
    background: #f0f5ff;
    border: 1px solid #d3dff5;
    color: #0560f8;
}
.LoginRegister-Box > .zc-btn{
    background: #0560f8;
    color: #fff;
}


.logo{
    position: fixed;
    z-index: 99;
    left: 14px;
    top: 14px;
    height: 36px;
}
.logo a{
    display: block;
    height: 100%;
}
.logo a img{
    display: block;
    height: 100%;
}


/* === 顶部标题读写分离样式 === */
#top-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0px;
    height: 30px;
    position: fixed;
    left: 60px;
    top: 18px;
    z-index: 99;
}

/* 展示态：Span */
.workflow-name-text {
    font-size: 16px;
    color: #333;
    /* 占位，防止切换时跳动 */
    cursor: pointer;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.2s;
    font-family: 'Open Sans', -apple-system, Helvetica Neue, Helvetica, Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.workflow-name-text:hover {
    background: rgba(0,0,0,0.03); /* 鼠标放上去微微变灰提示可点 */
}

/* 编辑态：Input */
#top-workflow-title-input {
    font-size: 16px;
    color: #333;
    padding: 0;
    border: none; /* 编辑时显示蓝框 */
    background: none;
    border-radius: 0;
    outline: none;
    min-width: 50px;
    position: absolute;
    left: 0;
    font-family: 'Open Sans', -apple-system, Helvetica Neue, Helvetica, Roboto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

/* 图标样式 */
#top-title-edit-btn {
    cursor: pointer;
    font-size: 18px;
    color: #1a1a1a;
    padding: 4px;
}
#top-title-edit-btn:hover {
    color: #1890ff;
}




/* 1. 信息弹窗容器样式：固定在顶部居中 */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px; /* 消息之间的间距 */
    width: 90%;
    max-width: 600px; /* 限制最大宽度，保持美观 */
}


/* 2. 单个消息卡片的基础样式 */
.toast-item {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    opacity: 0; /* 初始透明，用于淡入动画 */
    transition: opacity 0.3s ease;
}

/* 内容区域布局 */
.toast-icon {
    flex-shrink: 0;
    margin-right: 12px;
    width: 24px;
    height: 24px;
}
.toast-content {
    flex: 1;
}
.toast-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}
.toast-desc {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
    opacity: 0.9;
}
.toast-link {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.toast-close:hover {
    opacity: 1;
}

/* 3. 主题配色 (对应图中的5种风格) */

/* Purple (Info) */
.toast-info {
    background-color: #eff6ff; /* 浅蓝紫底 */
    border-color: #bfdbfe;
    color: #1e40af;
}
.toast-info .toast-icon svg { fill: #3b82f6; } /* 图标色 */

/* Gray (Default) */
.toast-default {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #374151;
}
.toast-default .toast-icon svg { fill: #6b7280; }

/* Red (Error) */
.toast-error {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.toast-error .toast-icon svg { fill: #ef4444; }

/* Yellow (Warning) */
.toast-warning {
    background-color: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
.toast-warning .toast-icon svg { fill: #f59e0b; }

/* Green (Success) */
.toast-success {
    background-color: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}
.toast-success .toast-icon svg { fill: #10b981; }

/* --- 新增：进度条样式 --- */

.toast-item {
    position: relative;
    overflow: hidden;
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(0,0,0, 0.05);
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
    /* 核心修改 1: 使用 scaleX 缩放，性能更好 */
    transform-origin: left; /* 【关键点】设置基点在右边 -> 这样左边会向右缩进 */
    animation: toast-countdown 2.5s linear forwards;
}

/* 核心修改 2: 动画从 1 (100%) 缩放到 0 */
@keyframes toast-countdown {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* 交互优化：鼠标悬停暂停 */
.toast-item:hover .toast-progress-bar {
    animation-play-state: paused;
}

/* 颜色保持不变 */
.toast-info .toast-progress-bar    { background-color: #3b82f6; }
.toast-default .toast-progress-bar { background-color: #9ca3af; }
.toast-error .toast-progress-bar   { background-color: #ef4444; }
.toast-warning .toast-progress-bar { background-color: #f59e0b; }
.toast-success .toast-progress-bar { background-color: #10b981; }


/* === 基础画布 === */
#viewport {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    user-select: none;

    background-color: #fafafa;
    /* 绘制横竖两条线 */
    background-image:
            linear-gradient(#f3f3f3 1px, transparent 1px),
            linear-gradient(90deg, #f3f3f3 1px, transparent 1px);

    background-size: 30px 30px;

}
#canvas-layer {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0;
}

/* === 连线层 === */
#connections-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2;}

.connection-path {
    fill: none; stroke: #999; stroke-width: 2px;
    pointer-events: stroke;
    cursor: pointer;
}
.connection-path:hover { stroke: #555; stroke-width: 4px; }
.connection-path.selected { stroke: #ff4d4f; stroke-width: 4px; filter: drop-shadow(0 0 2px rgba(255, 77, 79, 0.5)); }

/* === 节点样式 === */
.node {
    position: absolute;
    width: 380px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    z-index: 10;
    cursor: default;

    /* 🔥 核心修改：增加了 top 的过渡动画，让挤压效果丝滑 */
    transition: box-shadow 0.2s, border-color 0.2s, top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.type-image-upload {
    /* border: none; */
}

/* ✅ 统一：所有图片节点宽度固定 480px */
.node.type-image-upload {
    width: 480px !important;
}
/* 当你在拖拽节点时，必须关掉动画，否则手感会像拉皮筋一样延迟 */
.node.ui-draggable-dragging,
.node.selected {
    transition: box-shadow 0.2s, border-color 0.2s !important;
}


.node.type-ai-image {
    width: 480px;
}

/* 🔥【新增】生成的图片节点样式 */
.node.type-ai-generated-image {
    width: 480px !important;
    border-color: #ffd700; /* 给个金边，表示是生成的 */
}
.node.type-ai-generated-image .node-body {
    padding: 10px;
    background: #fffdf0; /* 微微发黄的背景 */
    border-radius: 0 0 12px 12px;
}

.node.selected {border-color: #1890ff;box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.5);z-index: 20;background: #fff;}

.node-header {
    background: none;
    padding: 10px 0;
    /* border-bottom: 1px solid #eee; */
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: normal;
    color: #444;
    cursor: grab;
    font-size: 14px;
    position: absolute;
    top: -41px;
    width: 100%;
}
.node-header .delete-btn {     font-size: 18px;
    color: #c8c8c8;
    cursor: pointer;
    position: relative;
    top: 1px;}
.node-header .delete-btn:hover { color: #ff4d4f; }

.node-body {
    position: relative !important; /* 关键：子元素绝对定位的参考点 */

    /* 保证最小高度，防止极端情况塌陷 */
    min-height: 60px;
    padding: 12px;
}
.type-ai-image .node-body{
    padding: 12px;
}
.node-body .placeholder-content{
    width: 100%;
    /* 高度由 JS 动态控制，这里保持 flex 布局 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease; /* 允许淡出 */
}
/* 结果层（上层，初始状态） */
.node-body .result-overlay {
    position: absolute; /* 🔥 绝对定位，悬浮在占位层上面 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 强制铺满 */
    opacity: 0; /* 一开始看不见 */
    background: #fff; /*要有背景色，这就把底下的转圈圈挡住了*/
    transition: opacity 0.4s ease; /* 慢慢显示出来 */
    z-index: 10;

    /* 内部布局 */
    display: flex;
    flex-direction: column;
}

/* 结果层（显示状态） */
.node-body .result-overlay.show {
    opacity: 1; /* 显示 */
}

textarea.node-input {
    width: 100%;
    border: 1px solid #eee;
    resize: vertical;
    outline: none;
    font-size: 14px;
    color: #333;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    overflow-y: auto;
    line-height: 1.6;
    transition: border-color 0.2s;
    border-radius: 4px;
    padding: 8px;
}

.type-image-upload  textarea.node-input {
    display: none;
}
textarea.node-input:focus { border-color: #ccc; }
textarea.node-input::-webkit-scrollbar { width: 6px; }
textarea.node-input::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px; }

.node.type-ai-text textarea.node-input, .node.type-ai-image textarea.node-input { height: 80px; }
.node.type-text textarea.node-input { height: 150px; border-color: transparent; }
.node.type-text textarea.node-input:focus { border-color: #eee; }

/* 操作栏 */
.node-actions {
    display: flex; justify-content: space-between; align-items: center; margin-top: 5px;
    position: relative;
    gap: 8px;
}

.actions-left {display: flex;gap: 8px;flex-grow: 1;position: relative;}

/* === 下拉菜单按钮样式 === */
.dropdown-trigger-btn {
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
    user-select: none;
    font-weight: 500;
}

.dropdown-trigger-btn span {
    display: none;
}
.dropdown-trigger-btn:hover, .dropdown-trigger-btn.active { background: #e5e5e5; border-color: #ccc; }
.dropdown-trigger-btn .btn-icon { font-size: 14px; color: #666; }

/* 🔥【新增】批量模式开关按钮 */
.batch-switch-btn {
    background: #fff;
    border: 1px solid #d9d9d9;
    color: #666;
    padding: 0;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    font-weight: 500;
    height: 36px;
}
.batch-switch-btn:hover { border-color: #40a9ff; color: #40a9ff; }
/* 激活状态：绿色背景 */
.batch-switch-btn.active {
    background: #f6ffed;
    border-color: #b7eb8f;
    color: #52c41a;
}


/* 下拉列表容器 */
.custom-dropdown {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 220px;
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 6px;
    display: none;
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
}
.custom-dropdown::-webkit-scrollbar { width: 4px; }
.custom-dropdown::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2px; }

/* 列表项 */
.dropdown-item {
    padding: 8px 10px;
    font-size: 12px;
    color: #444;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0;
    transition: background 0.1s;
    margin-bottom: 2px;
}
.dropdown-item:hover { background: #f5f5f5; }
.dropdown-item.active {color: #000000;font-weight: 600;background: #f0f0f0;}
.dropdown-item-icon { width: 16px; text-align: center; font-size: 12px;}

.exec-btn {
    background: #444;
    color: #fff;
    border: none;
    padding: 0 18px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    font-weight: 600;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid #ffffff;
}
.exec-btn:hover { background: #222; }
.exec-btn.loading { background: #666; cursor: wait; pointer-events: none; }

.node-output-area {
    margin: 0 10px 15px 10px;
    border: none;
    border-radius: 8px;
    min-height: 100px;
    background: #ffffff;
    padding: 0;
    max-height: 700px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.type-ai-text .node-output-area{
    height: 200px;
}
.node-output-area::-webkit-scrollbar { width: 6px; }
.node-output-area::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px; }

.node-output-label { font-size: 12px; color: #999; margin-bottom: 0; font-weight: 600; }

/* 🔥【新增】画廊头部容器样式 */
.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 5px;
}

/* 🔥【新增】批量操作按钮容器 */
.gallery-batch-actions {
    display: flex;
    gap: 6px;
}

/* 🔥【新增】批量操作按钮样式 */
.gallery-batch-btn {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 2px;
}

.gallery-batch-btn:hover {
    background: #e8e8e8;
    border-color: #d0d0d0;
    color: #333;
}

/* 全部独立按钮悬停变蓝 */
.gallery-batch-btn.detach-all:hover {
    background: #e6f7ff;
    border-color: #91d5ff;
    color: #1890ff;
}

/* 全部删除按钮悬停变红 */
.gallery-batch-btn.delete-all:hover {
    background: #fff1f0;
    border-color: #ffa39e;
    color: #ff4d4f;
}

/* 🔥【修改】增加了 user-select: text 允许选择文字，cursor: text 鼠标变工字型 */
.node-output-content {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    word-wrap: break-word;
    user-select: text !important; /* 强制允许选中 */
    cursor: text;
    position: relative; /* 为复制按钮定位做准备 */
}

/* 🔥【新增】复制按钮样式 */
.copy-btn {
    display: none; /* 默认隐藏，等生成完才显示 */
    margin-top: 8px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    color: #555;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    float: right; /* 靠右显示 */
    transition: all 0.2s;
}
.copy-btn:hover { background: #e6e6e6; color: #333; }
.copy-btn.copied { background: #d9f7be; color: #389e0d; border-color: #b7eb8f; } /* 复制成功的绿色状态 */

.node-output-content p { margin: 0 0 10px 0; }
.node-output-content pre { background: #222; color: #fff; padding: 10px; border-radius: 5px; overflow-x: auto; }
.node-output-content code { background: #e0e0e0; padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 12px; }

.node-output-content img { max-width: 100%; border-radius: 8px; border: 1px solid #eee; display: block; margin: auto; }

.port {
    width: 22px; height: 22px; background: #fff; border: 1px solid #ccc; border-radius: 50%;
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center; z-index: 15; color: #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.2s;
}
.port::after { content: '+'; position: relative; top: -1px;}
.port:hover { border-color: #666; color: #666; transform: translateY(-50%) scale(1.1); cursor: crosshair; }
.port-left { left: -26px; } .port-right { right: -26px; }

#context-menu {
    position: absolute;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    border-radius: 12px;
    padding: 8px;
    display: none;
    z-index: 1000;
    min-width: 170px;
    user-select: none;
}
#context-menu .menu-item {
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    color: #1f1f1f;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.1px;
}
#context-menu .menu-item:hover { background: #f0f5ff; color: #0b57d0; }
#context-menu .menu-item i{
    font-size: 18px;
    width: 20px;
    text-align: center;
    opacity: 0.9;
}
.controls-hint {
    position: fixed; bottom: 20px; left: 20px; background: rgba(0, 0, 0, 0.7); color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    padding: 10px 15px; border-radius: 8px; font-size: 12px; pointer-events: none; z-index: 200; font-family: 'Segoe UI Mono', monospace;
}

/* === 加载动画样式 === */
.loading-container {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    height: 100%; min-height: 120px; gap: 15px; color: #888; font-size: 13px;
    background: #fafafa; border-radius: 6px;
}
.loading-spinner {
    width: 24px; height: 24px;
    border: 3px solid #e0e0e0; border-top: 3px solid #555;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* === 图片上传节点样式 === */
.node.type-image-upload .node-body {padding: 0;}

.upload-area {
    width: 100%;
    min-height: 180px;
    border: none;
    border-radius: 11px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.upload-area:hover { border-color: #999; background: #f0f0f0; }
.upload-area.has-file { /* border-style: solid; */ border-color: #ccc; }

.upload-placeholder { color: #999; font-size: 12px; text-align: center; pointer-events: none; }
.upload-icon {font-size: 24px;margin-bottom: 10px;display: block;text-align: center;}

.upload-placeholder {
    font-size: 13px;
    color: #888888;
}
.hidden-file-input { display: none; }
.upload-preview {
    display: none;
}

.upload-preview, .result-img-item {
    width: 100%;
    height: auto;
    object-fit: contain;

    /* 关键 1: 允许鼠标点击图片 (解决点击无法上传的问题) */
    pointer-events: auto;

    /* 关键 2: 禁止用户选中图片变蓝 */
    user-select: none;

    /* 关键 3: 纯 CSS 禁止浏览器把图片当作文件拖动 */
    -webkit-user-drag: none;
}

/* 针对生成结果里的图片，也加上防拖拽 */
.node-output-content img {
    pointer-events: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* === 缩略图列表样式 (通用) === */
.input-thumbs-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 5px;
    min-height: 0;
    transition: all 0.2s;
    border-radius: 12px 12px 0 0;
}
.input-thumbs-container:empty { display: none; }

.thumb-item {
    width: 42px; height: 42px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background-size: cover; background-position: center;
    position: relative;
    cursor: grab;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: visible;
}
.thumb-item.selected {
    border-color: #ff4d4f;
    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.22), 0 2px 8px rgba(0,0,0,0.12);
}
.thumb-item:hover { transform: scale(1.05); z-index: 5; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.thumb-item:active { cursor: grabbing; }

/* 拖拽时的样式 */
.thumb-item.sortable-dragging { opacity: 0.5; border: 1px dashed #666; }
.thumb-item.sortable-over { border-color: #1890ff; transform: scale(1.1); }

.thumb-badge {
    position: absolute; top: 0; left: 0;
    background: rgba(0,0,0,0.7); color: white;
    font-size: 10px; font-weight: bold;
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 5px;
    pointer-events: none;
}
/* 删除按钮 */
.thumb-delete-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    text-align: center;
    line-height: 14px; /* 调整文字垂直居中 */
    display: flex;
    color: #ffffff;
    background: #e72d2d;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: none; /* 默认隐藏，悬停显示 */
    z-index: 10;
    transition: transform 0.1s;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.thumb-delete-btn i {
    font-size: 12px;
    font-weight: bold;
}

/* 鼠标悬停在缩略图上时显示按钮 */
.thumb-item:hover .thumb-delete-btn {
    display: flex;
}



/* ========================================= */
/* === 结果汇总节点 & 图片放大样式 === */
/* ========================================= */

/* 1. 结果汇总节点特定样式 */
.node.type-result-output {width: 400px;border-radius: 10px;}
.node.type-result-output .node-body {
    padding: 0;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

/* 结果容器滚动区 */
.result-display-container {
    padding: 15px;
    min-height: 150px;
    max-height: 500px;
    overflow-y: auto;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}
.result-display-container::-webkit-scrollbar { width: 6px; }
.result-display-container::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px; }

/* 文本段落 */
.result-section-text {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}
.result-section-text:last-child { border-bottom: none; }

/* 图片网格布局 */
.result-image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

/* 结果图单张样式 */
.result-img-item {
    width: calc(50% - 4px); /* 双列 */
    border-radius: 6px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    object-fit: cover;

}
.result-img-item:hover { transform: scale(1.02); }

/* 底部按钮栏 */
.result-footer {
    padding: 10px 15px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
}

/* 2. 交互体验增强 */
.upload-preview {  transition: opacity 0.2s; }
.upload-preview:hover { opacity: 0.9; }

.node-output-content img {  transition: transform 0.2s; }
.node-output-content img:hover { transform: scale(1.01); }

/* 3. 全屏图片查看器 (Lightbox) - 增强版 */
#image-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 99999;
    display: none; /* 默认隐藏 */
    flex-direction: column;
    backdrop-filter: blur(8px);
}

/* 图片容器 */
#image-overlay .lightbox-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    position: relative;
    cursor: grab;
}

/* 图片本身 */
#image-overlay #lightbox-img {
    max-width: none;
    max-height: none;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
    cursor: grab;
    will-change: transform; /* 🔥 GPU 加速 */
}

/* 底部工具栏 */
#image-overlay .lightbox-toolbar {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40, 40, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 10;
    user-select: none;
}

/* 图片信息区 */
#image-overlay .lightbox-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

#image-overlay .lightbox-info .lightbox-icon {
    font-size: 14px;
    opacity: 0.8;
}

/* 控制按钮区 */
#image-overlay .lightbox-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 单个按钮 */
#image-overlay .lightbox-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
    font-weight: 600;
}

#image-overlay .lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: scale(1.05);
}

#image-overlay .lightbox-btn:active {
    transform: scale(0.95);
}

/* 拖动按钮激活状态 */
#image-overlay .lightbox-btn.active {
    background: rgba(24, 144, 255, 0.8);
    color: #fff;
    box-shadow: 0 0 8px rgba(24, 144, 255, 0.5);
}

#image-overlay .lightbox-btn.active:hover {
    background: rgba(24, 144, 255, 1);
}

#image-overlay .lightbox-btn span {
    font-size: 16px;
    line-height: 1;
}

/* 分隔线 */
#image-overlay .lightbox-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 4px;
}

/* 百分比显示 */
#image-overlay .lightbox-zoom-percent {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

/* 关闭提示 */
#image-overlay .lightbox-close-hint {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.reupload-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #00000073;
    color: #fff;
    font-size: 14px;
    padding: 5px 8px;
    border-radius: 6px;
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* === 新增：框选选区样式 === */
#selection-marquee {
    position: absolute;
    border: 1px dashed #1890ff;
    background: rgba(24, 144, 255, 0.1);
    display: none;
    z-index: 1000;
    pointer-events: none; /* 确保鼠标事件穿透 */
}

/* === 新增：多选群组大边框 === */
#group-selection-frame {
    position: absolute;
    border: 2px dashed #1890ff; /* 蓝色虚线 */
    background: rgba(24, 144, 255, 0.05); /* 淡淡的背景色 */
    border-radius: 8px;
    z-index: 5; /* 在连线之上，节点之下 */
    display: none; /* 默认隐藏 */
    pointer-events: none; /* 关键：不挡鼠标 */
    overflow: visible; /* 允许工具栏超出边界显示 */
}

/* === 节点对齐工具栏 === */
#node-align-toolbar {
    position: absolute;
    display: none; /* 默认隐藏 */
    align-items: center;
    gap: 2px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    padding: 6px 8px;
    pointer-events: auto; /* 允许点击 */
    z-index: 1000; /* 确保在最上层 */
    /* ✅ 让 left/top 以“选框上边中心”为锚点，避免手动减去宽度导致偏移 */
    transform: translate(-50%, -100%);
    will-change: left, top, transform;
}

#node-align-toolbar.visible {
    display: flex;
}

#node-align-toolbar::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
}

.node-align-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: #666;
    transition: all 0.15s ease;
}

.node-align-btn:hover {
    background: #e6f7ff;
    color: #1890ff;
}

.node-align-btn:active {
    background: #bae7ff;
    transform: scale(0.95);
}

.node-align-btn .iconfont {
    font-size: 12px;
}

.align-toolbar-divider {
    width: 1px;
    height: 18px;
    background: #e8e8e8;
    margin: 0 4px;
}


/* === 新增：分组区域 (Group) 样式 === */
.node.type-group {
    background: rgba(240, 242, 245, 0.5); /* 半透明灰背景 */
    border: 2px dashed #bbb; /* 虚线边框 */
    box-shadow: none;
    display: flex; flex-direction: column;
    z-index: 1 !important;
    /* 🔥 修改：去掉了 width 和 height 的过渡，只保留 box-shadow */
    transition: box-shadow 0.2s;


}
.node.type-group.selected {
    border-color: #1890ff;
    background: rgba(24, 144, 255, 0.05);
}

.group-header {
    height: 36px;
    background: #e6e6e6;
    border-bottom: 1px dashed #bbb;
    border-radius: 10px 10px 0 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 10px;
    cursor: grab; /* 头部可以拖拽 */
}

.group-title { font-weight: bold; color: #555; font-size: 13px; }

.group-controls { display: flex; gap: 8px; align-items: center; }

/* 区域运行按钮 */
.group-run-btn {
    background: #1890ff; color: white; border: none;
    padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer;
    font-weight: bold;
}
.group-run-btn:hover { background: #40a9ff; }
.group-run-btn.running { background: #52c41a; cursor: wait; pointer-events: none; }

.group-header .delete-btn { font-size: 14px; color: #999; cursor: pointer; }
.group-header .delete-btn:hover { color: red; }

/* 调整大小的手柄 */
.resize-handle {
    position: absolute; bottom: 0; right: 0;
    width: 20px; height: 20px;
    cursor: se-resize; /* 东南方向箭头 */
    background: linear-gradient(135deg, transparent 50%, #ccc 50%);
    border-bottom-right-radius: 12px;
}

/* === 新增：占位节点样式 === */
.node.type-ai-generated-image .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 🔥 去掉了固定高度，改由 JS 控制 */
    background: #f9f9f9;
    color: #999;
    font-size: 13px;
    padding: 0;
    gap: 10px;
    border-radius: 0 0 12px 12px;
    /* 🔥 核心：添加高度过渡动画，这样当获取到上游图片比例时，盒子会平滑变高/变矮 */
    transition: height 0.3s ease-out;
    overflow: hidden; /* 防止调整大小时内容溢出 */
}
/* 成功加载图片后，去掉背景色，防止露边 */
.node.type-ai-generated-image .node-body.has-image {
    background: transparent;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

/* ========================================= */
/* 🔥【专业版】AB 对比节点样式优化 */
/* ========================================= */
.node.type-ab-compare {width: 420px;}

.node.type-ab-compare .node-body {
    padding: 0;
    background: #ffffff; /* 深色背景，更显专业 */
    border-radius: 0 0 12px 12px;
    border-radius: 10px;
}

/* 1. 容器：增加棋盘格背景（类似PS，防透明图看不清） */
.ab-compare-container {
    position: relative;
    width: 100%;
    /* height: 350px; 🔥 已删除固定高度 */
    min-height: 200px; /* 给个最小高度防止塌陷 */
    background-color: #ffffff;
    background-image: linear-gradient(45deg, #dddddd 25%, transparent 25%), linear-gradient(-45deg, #dddddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dddddd 75%), linear-gradient(-45deg, transparent 75%, #dddddd 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    overflow: hidden;
    display: none;
    user-select: none;
    cursor: col-resize;
    /* 🔥 新增：高度变化的过渡效果 */
    transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. 图片通用 */
.ab-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* 🔥 改为 cover，配合动态高度实现无缝填充 */
    pointer-events: none;
    user-select: none;
}

/* 底层图 (After / Right) */
.ab-img-bottom { z-index: 1; }

/* 顶层图容器 (Before / Left) */
.ab-img-top-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    border-right: 1px solid rgba(255,255,255,0.2); /* 细微白边 */
    /* box-shadow: 5px 0 15px rgba(0,0,0,0.5); */ /* 核心：给分割线加阴影，立体感 */
    will-change: width;
}

/* 顶层图片：宽度必须由JS强制设为容器宽，防止挤压 */
.ab-img-top {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 420px; /* 默认值，JS会修正 */
    max-width: none;
}

/* 3. 分割线手柄 */
.ab-slider-handle {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 4px;
    margin-left: -2px; /* 居中校正 */
    background: rgba(255, 255, 255, 0); /* 线本身透明，靠 ::after 画线 */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* 让鼠标事件穿透给 container */
}

/* 细线视觉层 */
.ab-slider-handle::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ffffff80;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* 中间圆形按钮 */
.ab-slider-button {
    width: 8px;
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    border-radius: 4px;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 11;
    /* 增加个双向箭头图标 */
}
.ab-slider-button::before {font-size:10px;font-weight:900;letter-spacing:-1px;color:#555;}

/* 4. 标签 (Badges) */
.ab-label {
    position: absolute;
    top: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    font-size: 12px;
    width: 78px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255,255,255,0.1);
    flex-wrap: nowrap;
    flex-direction: row;
}
.ab-label-left { left: 15px; z-index: 20; } /* 顶层 */
.ab-label-right { right: 15px; z-index: 5; } /* 底层 */

/* 底部操作栏 */
.ab-actions {
    padding: 10px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 12px 12px;
}
.ab-hint { font-size: 12px; color: #999; }
/* === 新增：自动整理按钮样式 === */
#auto-layout-btn {
    /* 放在右上角 */
}

#auto-layout-btn:active {
    transform: translateY(0);
}

.control-btn {
}

#file-controls{position: fixed;top: 14px;right: 14px;display: flex;gap: 8px;z-index: 1000;}

#file-controls button {
    height: 30px;
    border: 1px solid #e9e9e9;
    background: #fff;
    border-radius: 19px;
    padding: 0 16px;
    font-size: 13px;
    cursor: pointer;
    transition: 0.168s;
}

#file-controls button:hover {
    background: #e3e3e3;
    border-color: #d1d1d1;
}

#file-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
}

#file-controls button:disabled:hover {
    background: #f5f5f5;
    border-color: #e9e9e9;
}

#file-controls .toolbar-separator {
    width: 1px;
    height: 20px;
    background: #e0e0e0;
    margin: 5px 4px;
}

/* 🔥 全局运行按钮样式 */
#file-controls #global-run-btn {
    /* background: #333; */ /* 渐变绿，更专业 */
    /* color: white; */
    /* border-color: #333; */
}

#file-controls #global-run-btn:hover {
    /* box-shadow: 4px 4px 10px rgba(10,10,10,.2); */
}
#global-run-btn.running {
    background: #faad14; /* 运行中变橙 */
    cursor: wait;
    pointer-events: none;
    opacity: 0.8;
}
/* ========================================= */
/* 🔥【新增】右上角批量开关样式 */
/* ========================================= */
.batch-toggle-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.batch-label-text {
    font-size: 12px;
    color: #888;
    margin-right: 6px;
    font-weight: normal;
}

/* 开关容器 */
.batch-toggle {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
}

/* 隐藏原本的 checkbox */
.batch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* 滑块背景 */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 34px;
}

/* 滑块圆球 */
.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

/* 激活状态：变绿 */
input:checked + .slider {
    background-color: #6ee7b7;
}

/* 激活状态：圆球右移 */
input:checked + .slider:before {
    transform: translateX(14px);
}


/* === 🔥【新增】AI绘图内部画廊样式 === */
.node-output-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 4px; /* 图片之间的间距 */
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.gallery-item {
    width: 100%;
    background: #f3f3f3;
    border-radius: 4px;
    overflow: hidden;
    min-height: 130px;
    position: relative;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: height 0.3s ease, aspect-ratio 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填满格子，裁掉多余部分 */
    transition: transform 0.2s;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* 加载动画微调 */
.gallery-item .loading-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* 🔥【新增】错误提示角标样式 */
.gallery-item-error-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;/*  */
    background: #ff4d4f; /* 鲜艳的红色 */
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help; /* 鼠标移上去变成问号 */
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 一个简单的弹跳动画，让错误出现时更明显 */
@keyframes popIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* 针对错误格子的样式微调 */
.gallery-item.has-error {
    border-color: #ffccc7 !important; /* 边框变红 */
    background-color: #fff2f0 !important; /* 背景变淡红 */
    border-width: 2px;
    border-style: dashed;
}

/* 错误格子悬停时显示完整错误信息 */
.gallery-item.has-error:hover .gallery-error-text {
    -webkit-line-clamp: unset; /* 悬停时取消行数限制 */
    max-height: 200px;
    overflow-y: auto;
}

/* 🔥【新增】画廊错误信息样式 - 直接显示在格子内 */
.gallery-error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
    text-align: center;
    background: linear-gradient(135deg, #fff2f0 0%, #ffeded 100%);
}

.gallery-error-icon {
    font-size: 32px;
    color: #ff4d4f;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(255, 77, 79, 0.2);
}

.gallery-error-text {
    font-size: 12px;
    color: #cf1322;
    line-height: 1.5;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 最多显示4行 */
    -webkit-box-orient: vertical;
    max-width: 100%;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    margin-top: 2px;
}

/* ========================================= */
/* 🔥【新增】画廊图片的操作按钮样式 */
/* ========================================= */

/* 按钮容器：默认隐藏，悬停显示，覆盖在图片底部 */
.gallery-item-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: rgba(0, 0, 0, 0.7); /* 半透明黑底 */
    display: none; /* 平时隐藏 */
    align-items: center;
    justify-content: space-evenly; /* 按钮均匀分布 */
    z-index: 20;
    backdrop-filter: blur(2px);
}

/* 鼠标悬停在格子上时，显示按钮栏 */
.gallery-item:hover .gallery-item-actions {
    display: flex;
    animation: fadeIn 0.2s;
}

/* 单个按钮样式 */
.gallery-action-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    font-weight: 500;
}

/* 独立按钮悬停变蓝 */
.gallery-action-btn.detach:hover {
    color: #40a9ff;
    background: rgba(255,255,255,0.1);
}

/* 删除按钮悬停变红 */
.gallery-action-btn.del:hover {
    color: #ff4d4f;
    background: rgba(255,255,255,0.1);
}

/* 简单的淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 🔥【新增】标题可编辑样式 */
.node-header > span:first-child,
.group-title {
    /* cursor: text;  <-- 建议改掉：平时看起来像能拖拽，双击才变输入框 */
    cursor: pointer;
    transition: color 0.2s;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;

    /* 🔥🔥🔥 核心修复代码开始 🔥🔥🔥 */
    user-select: none;          /* 禁止文字被选中 */
    -webkit-user-select: none;  /* Safari/Chrome 兼容 */
    -webkit-user-drag: none;    /* 禁止原生拖拽 */
    /* 🔥🔥🔥 核心修复代码结束 🔥🔥🔥 */
}
.node-header > span:first-child:hover,
.group-title:hover {
    color: #1890ff; /* 鼠标悬停变蓝，提示可点击 */
    background: rgba(0,0,0,0.02);
    border-radius: 4px;
    padding: 0 4px;
    margin: 0 -4px; /* 抵消padding保持位置 */
}

/* 编辑时的输入框样式 */
.node-title-edit-input {
    font-size: 14px;
    font-weight: bold;
    padding: 2px 4px;
    border: 1px solid #1890ff;
    border-radius: 4px;
    outline: none;
    width: 200px;
    color: #333;
    font-family: inherit;
}

/* === 🔥【新增】智能辅助线样式 === */
#guide-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; /* 必须穿透，不挡鼠标 */
    z-index: 999; /* 在节点之下，连线之上，或者最顶层视情况而定 */
}

.guide-line {
    position: absolute;
    background-color: #ff00cc; /* 醒目的洋红色 */
    z-index: 999;
}

/* 垂直辅助线 */
.guide-line-v {
    width: 1px;
    border-left: 1px dashed #ff00cc;
    background: none;
}

/* 水平辅助线 */
.guide-line-h {
    height: 1px;
    border-top: 1px dashed #ff00cc;
    background: none;
}

/* 吸附时的数值提示 (可选) */
.guide-label {
    position: absolute;
    background: #ff00cc;
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
}

/* === 🔥【新增】底部浮动工具栏样式 === */
#node-floating-toolbar {
    position: absolute; /* 关键：改为绝对定位，相对于父节点 */
    bottom: -60px;      /* 挂在节点底部下方 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */

    background: white;
    padding: 6px 12px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);

    display: none;      /* 默认隐藏 */
    z-index: 100;       /* 保证在节点层级之上 */

    border: 1px solid #eee;
    gap: 8px;
    align-items: center;
    white-space: nowrap;

    /* 增加一个小三角箭头指向上面，增加一体感 */
    pointer-events: auto;
}
/* 增加一个小箭头 */
#node-floating-toolbar::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}

#node-floating-toolbar.visible {
    display: flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.float-tool-btn {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    color: #333;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.float-tool-btn:hover {
    background: #e7e7e7;
    border-color: #c5c5c5;
    color: #161616;
    /* transform: translateY(-2px); */
    /* box-shadow: 0 4px 8px rgba(24, 144, 255, 0.15); */
}

.float-tool-btn.loading {
    cursor: wait;
    opacity: 0.8;
    pointer-events: none;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: #eee;
    margin: 0 2px;
}




/* ========================================= */
/* 🔥【升级版】局部重绘编辑器样式 */
/* ========================================= */
/* ========================================= */
/* 🔥【最终版】局部重绘编辑器样式 */
/* ========================================= */
#paint-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #1f1f1f; /* 更专业的深灰底 */
    z-index: 100000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    overflow: hidden;
}

/* 顶部工具栏 */
.paint-toolbar {
    background: #2b2b2b;
    padding: 8px 15px;
    margin-top: 10px;
    border-radius: 8px;
    display: flex;
    gap: 12px;
    align-items: center;
    color: #e0e0e0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 100002;
    border: 1px solid #444;
}

/* 底部 AI 输入栏 */
.paint-bottom-bar {
    background: #2b2b2b;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    width: 60%;
    min-width: 400px;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.3);
    z-index: 100002;
    border: 1px solid #444;
}

.paint-input {
    flex: 1;
    background: #1f1f1f;
    border: 1px solid #444;
    color: white;
    padding: 10px;
    border-radius: 6px;
    outline: none;
}
.paint-input:focus { border-color: #1890ff; }

/* 画笔滑块 */
input[type=range] { width: 80px; cursor: pointer; }

/* 按钮通用 */
.paint-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #ccc;
    background: #444;
}
.paint-btn:hover { background: #555; color: white; }
.paint-btn:active { transform: translateY(1px); }
.paint-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* 🔥 新增：按钮激活/选中状态 */
.paint-btn.active {
    background: #1890ff !important;
    color: white !important;
    border-color: #1890ff !important;
}

.btn-save { background: #237804; color: #fff; }
.btn-save:hover { background: #389e0d; }

.btn-ai-run { background: #1890ff; color: white; }
.btn-ai-run:hover { background: #40a9ff; }

/* 画布容器 (视口) */
.canvas-viewport {
    position: relative;
    flex: 1; /* 占据剩余空间 */
    width: 100%;
    overflow: hidden; /* 裁剪超出部分 */
    background: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h10v10H0zm10 10h10v10H10z" fill="%23333" fill-opacity="0.2"/></svg>');
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none; /* 🔥 隐藏默认鼠标，使用自定义光标 */
}

/* 实际画布 (会被缩放平移) */
#paint-canvas {
    /* 关键：这一层必须透明，不要设置 background */
    transform-origin: 0 0; /* 变换基点设为左上角，方便同步 */
    will-change: transform;
}
#paint-bg-image {
    transform-origin: 0 0;
    will-change: transform;
    box-shadow: 0 0 20px rgba(0,0,0,0.5); /* 阴影加在底图上 */
}

/* 🔥 自定义画笔光标 (空心圆) */
#brush-cursor {
    position: fixed;
    border: 2px solid rgba(255, 255, 255, 0.8); /* 白圈 */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8); /* 黑阴影，保证在白底也能看见 */
    border-radius: 50%;
    pointer-events: none; /* 关键：让鼠标事件穿透它 */
    z-index: 100005;
    transform: translate(-50%, -50%); /* 居中 */
    display: none;
}

/* 🔥 加载遮罩层 (转圈圈) */
#paint-loading-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 100004;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    backdrop-filter: blur(2px);
}

/* === 🔥【新增】画布缩略图导航样式 === */
#canvas-minimap {
    position: fixed;
    bottom: 90px;
    right: 30px;
    z-index: 998;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid #e8e8e8;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 200px;
}

#canvas-minimap.collapsed {
    width: 120px;
}

#canvas-minimap.collapsed .minimap-content {
    display: none;
}

#canvas-minimap.collapsed .minimap-header span {
    font-size: 11px;
}

.minimap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: move;
    user-select: none;
}

.minimap-header span {
    display: flex;
    align-items: center;
    gap: 5px;
}

#minimap-toggle {
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

#minimap-toggle:hover {
    background: rgba(255, 255, 255, 0.35);
}

.minimap-content {
    padding: 10px;
    background: #fafafa;
}

.minimap-canvas {
    position: relative;
    width: 180px;
    height: 120px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    cursor: crosshair;
}

#minimap-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#minimap-svg rect.minimap-node {
    fill: #d9d9d9;
    stroke: #bfbfbf;
    stroke-width: 0.5;
    rx: 1;
    ry: 1;
}

#minimap-svg line.minimap-connection {
    stroke: #d9d9d9;
    stroke-width: 0.5;
}

#minimap-viewport {
    position: absolute;
    border: none;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    cursor: grab;
    transition: none;
}

#minimap-viewport:hover {
    background: rgba(0, 0, 0, 0.12);
}

#minimap-viewport:active {
    cursor: grabbing;
    background: rgba(0, 0, 0, 0.15);
}

/* === 🔥【新增】画布缩放控制栏样式 === */
/* === 🔥 最终优化版 CSS === */
#canvas-view-controls.zoom-capsule {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background: #ffffff;
    border-radius: 50px;
    padding: 8px 16px 8px 8px; /* 调整内边距 */
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); /* 更柔和的阴影 */
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: transform 0.2s;
}

#canvas-view-controls.zoom-capsule .control-btn {
    position: absolute;
    left: -96px;
    width: 42px;
    height: 42px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

#canvas-view-controls.zoom-capsule .control-btn i {
    font-size: 14px;
}

#canvas-view-controls.zoom-capsule #canvas-redo-btn {
    left: -48px;
}

#canvas-view-controls.zoom-capsule:hover {

}

/* 左侧复位按钮 */
#btn-canvas-reset {
    width: 24px;
    height: 24px;
    border: none;
    background: #f7f7f7;
    color: #666;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

#btn-canvas-reset:hover {
    background: #e6f7ff;
    color: #1890ff;
}
#btn-canvas-reset i{
    font-size: 20px;
}


/* 滑块外层容器 (用于定位气泡) */
.zoom-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 120px; /*稍微加宽一点 */
    height: 4px;
    border-radius: 4px;
}

/* 气泡提示 */
#zoom-tooltip {
    position: absolute;
    top: -40px; /* 在上方 */
    left: 0; /* JS 动态控制 */
    transform: translateX(-50%) scale(0.8);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 小三角箭头 */
#zoom-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #333;
}

/* 显示状态 */
#zoom-tooltip.show {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* --- Range Slider 样式 --- */
input[type=range]#canvas-zoom-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 100%; /* 占满容器方便点击 */
    background: transparent;
    cursor: pointer;
    margin: 0;
    z-index: 2;
    border-radius: 4px;
}



/* 圆钮 */
input[type=range]#canvas-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    margin-top: -0px; /* 垂直居中 */
    transition: transform 0.1s;
    border: 2px solid #555;
}

input[type=range]#canvas-zoom-slider:hover::-webkit-slider-thumb {
    transform: scale(1.15);

}



/* === 🔥【新增】左上角用户信息卡片样式 === */
#user-profile-card {z-index: 10; /* 保证在画布和连线之上 */ /* 磨砂玻璃效果 */ /* 胶囊形状 */display: flex; /* 默认隐藏，AJAX加载成功后显示 */align-items: center;gap: 10px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;transition: transform 0.2s, box-shadow 0.2s;user-select: none;max-width: 260px;flex-wrap: nowrap;align-content: center;justify-content: flex-start;}

#user-profile-card > a {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

#user-profile-card:hover {}

.user-avatar {width: 30px;height: 30px;border-radius: 50%;object-fit: cover;box-shadow: 0 2px 8px rgba(0,0,0,0.1);background-color: #f0f0f0;margin-right: 6px;}

.user-info-col {display: flex;flex-direction: row;justify-content: center;gap: 2px;}

.user-name-row {font-size: 14px;color: #555;display: flex;gap: 8px;}

.user-name-row span {
    display: block;
}

.user-id-badge {font-size: 10px;color: #999;background: #f5f5f5;padding: 1px 4px;border-radius: 4px;font-weight: normal;display: none !important;}

.user-integral-row { /* 金币/积分颜色 */height: 100%;display: block;padding: 0 10px;border-radius: 15px;/* border: 1px solid #dddddd; */font-size: 14px;color: #222;-webkit-transition: .2s;-moz-transition: .2s;transition: .2s;}

.user-integral-row > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    height: 100%;
}

.user-integral-row > a i {
    font-size: 22px;
}

/* === 🔥 全局保存加载遮罩层 === */
#save-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 70%);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    user-select: none;
}

/* 大号转圈圈动画 */
.big-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgb(177 177 177 / 30%);

    border-top: 5px solid #1890ff; /* 蓝色高亮 */
    border-radius: 50%;
    animation: big-spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes big-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text-large {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #666;
}






/* === 新增：扩图工作区样式 === */
#outpaint-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1e1e1e; /* 深色背景更专业 */
    z-index: 10000;
    flex-direction: column;
}

.outpaint-header {
    height: 50px;
    background: #252526;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: #fff;
}

.outpaint-workspace {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e1e1e; /* 🔥 改成纯深灰背景，不再用格子 */
    padding: 20px; /* 给四周留点空隙 */
}

/* 画布阴影 */
#outpaint-canvas {
    background-image:
            linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
            linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
            linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
    background-color: #333; /* 格子的底色 */
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

    /* 🔥 关键：添加白色细边框和黑色投影，让它“浮”起来 */
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 0 50px rgba(0,0,0,0.8);

    /* 确保大图能缩放显示在屏幕内 */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: grab;
}
#outpaint-canvas.grabbing {
    cursor: grabbing;
}

.outpaint-controls {
    height: 60px;
    background: #252526;
    border-top: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.op-btn {
    background: #333;
    color: #ccc;
    border: 1px solid #444;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.op-btn:hover { background: #444; color: #fff; }
.op-btn.active { background: #1890ff; color: #fff; border-color: #1890ff; }

.op-run-btn {
    background: linear-gradient(90deg, #1890ff, #36cfc9);
    color: #fff;
    border: none;
    padding: 8px 24px;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(24,144,255,0.3);
}
.op-run-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* === 吸管连线模式专用样式 === */
body.is-pipette-active {
    cursor: crosshair !important; /* 鼠标变为十字准星 */
}
body.is-pipette-active .node {
    cursor: crosshair !important;
}


/* 吸管按钮样式 */
.pipette-trigger-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    color: #555;
    margin-left: auto; /* 靠右对齐 */
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pipette-trigger-btn:hover {
    background: #e6f7ff;
    color: #1890ff;
    border-color: #1890ff;
}
.pipette-trigger-btn.active {
    background: #1890ff;
    color: #fff;
    border-color: #1890ff;
}

#auto-save-status{
    color:#999;
    font-size: 12px;
    min-width:80px;
    text-align:right;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    position: relative;
    top: -1px;
}
#auto-save-status i{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: block;
    margin-right: 4px;
    position: relative;
}

#workflow-list-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background: rgb(0 0 0 / 23%);z-index:9999;justify-content:center;align-items:center;}
#workflow-list-modal > div{box-shadow:0 4px 12px rgba(0,0,0,0.2);background:#fff;width: 92%;max-width: 1600px;max-height: 70%;border-radius: 10px;padding: 0;display:flex;flex-direction:column;box-sizing: border-box;}
#workflow-list-modal .list-modal-title{display:flex;justify-content:space-between;align-items:center;border-bottom: 1px solid #e7e7e7;background: #efefef;border-radius: 10px 10px 0 0;padding: 10px 24px;box-sizing: border-box;}
#workflow-list-modal .list-modal-title h3{margin:0;font-size:18px;display: flex;align-items: center;justify-content: flex-start;align-content: center;}

#workflow-list-modal .list-modal-title h3 i {
    font-size: 24px;
    margin-right: 4px;
}
#workflow-list-modal .list-modal-title span{cursor:pointer; font-size:20px;}
#workflow-list-modal #workflow-list-container{overflow-y:auto;display: flex;flex-wrap: wrap;flex-direction: row;align-content: flex-start;justify-content: flex-start;align-items: flex-start;gap: 24px;padding: 24PX;}
#workflow-list-modal .workflow-list-con-loading{text-align:center; color:#999; margin-top:50px;}
#workflow-list-modal .workflow-item{display:flex;padding: 0;box-sizing: border-box;width: calc((100% - 24px * 4) / 4);flex-direction: row;flex-wrap: wrap;}
#workflow-list-modal .workflow-item .share-btn{}
#workflow-list-modal .workflow-item-top{display:flex;align-items:center;gap:12px;width: 100%;flex-wrap: wrap;}
#workflow-list-modal .workflow-item-img{border:1px solid #eee;width: 100%;min-height: 100px;border-radius:6px;background-size:cover;background-position:center;aspect-ratio: 4 / 2.6;position: relative;}
#workflow-list-modal .workflow-item-content{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#workflow-list-modal .workflow-item-title{font-size: 14px;color:#333;width: 100%;display: flex;justify-content: space-between;align-content: center;align-items: center;padding: 3px 0 10px;}

#workflow-list-modal .workflow-item-title h2 {
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 75%;
    overflow: hidden;
    font-size: 16px;
}

.workflow-switch-open-btn {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
#workflow-list-modal .workflow-item-tips{font-size:12px; color:#999; margin-top:6px; display:flex; align-items:center; gap:6px;}
#workflow-list-modal .batch-toggle-wrapper{}
#workflow-list-modal .workflow-item-tips span{}
#workflow-list-modal .workflow-item-time{position: absolute;top: 4px;left: 4px;background: #ffffff;padding: 4px;border-radius: 6px;font-size: 12px;}
#workflow-list-modal .workflow-item-bottom{display:flex; align-items:center;}
#workflow-list-modal .workflow-item-bottom button{margin-right:5px;height: 30px;border: 1px solid #e9e9e9;background: #fff;border-radius: 19px;padding: 0 16px;font-size: 13px;cursor: pointer;transition: 0.168s;}
#workflow-list-modal .list-modal-other{margin-top:15px; text-align:right; border-top:1px solid #eee; padding-top:10px;}
#workflow-list-modal #import-local-json-btn{float:left; background:#f0f0f0; border:none; padding:6px 12px; border-radius:4px; cursor:pointer;}
#workflow-list-modal .close-modal-btn{color: #414141;border:none;padding:6px 20px;border-radius:4px;cursor:pointer;}


/* =====================================================
   📊 AI 调用记录弹窗样式
   ===================================================== */
.ai-logs-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.ai-logs-container {
    background: #fff;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.ai-logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.ai-logs-header h3 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-logs-header h3 i {
    font-size: 22px;
}

.close-ai-logs-btn {
    cursor: pointer;
    font-size: 24px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.close-ai-logs-btn:hover {
    opacity: 1;
}

/* 统计卡片 */
.ai-logs-stats {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.stat-card {
    flex: 1;
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.stat-label {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-sub {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.stat-sub span {
    color: #e67e22;
    font-weight: 600;
}

/* 筛选条件 */
.ai-logs-filters {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    background: #fff;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}

.ai-logs-filters select,
.ai-logs-filters input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.ai-logs-filters select:focus,
.ai-logs-filters input:focus {
    border-color: #667eea;
}

.ai-logs-filters input[type="text"] {
    min-width: 180px;
}

.filter-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.filter-btn.filter-reset {
    background: #f0f0f0;
    color: #666;
}

.filter-btn.filter-reset:hover {
    background: #e0e0e0;
    box-shadow: none;
}

/* 记录列表 */
.ai-logs-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    min-height: 300px;
}

.ai-logs-loading {
    text-align: center;
    padding: 60px;
    color: #999;
}

.ai-log-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 12px;
    transition: all 0.2s;
    cursor: pointer;
}

.ai-log-item:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.ai-log-time {
    min-width: 140px;
    font-size: 13px;
    color: #666;
}

.ai-log-type {
    min-width: 90px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    text-align: center;
    margin-right: 12px;
}

.ai-log-type.text {
    background: #e3f2fd;
    color: #1976d2;
}

.ai-log-type.image {
    background: #fce4ec;
    color: #c2185b;
}

.ai-log-type.gemini_image {
    background: #fff3e0;
    color: #e65100;
}

.ai-log-model {
    min-width: 120px;
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.ai-log-prompt {
    flex: 1;
    font-size: 13px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 16px;
}

.ai-log-status {
    min-width: 60px;
    text-align: center;
}

.ai-log-status.success {
    color: #27ae60;
}

.ai-log-status.failed {
    color: #e74c3c;
}

.ai-log-status.pending {
    color: #f39c12;
}

.ai-log-cost {
    min-width: 70px;
    text-align: right;
    font-size: 13px;
    color: #e67e22;
    font-weight: 600;
}

.ai-log-time-cost {
    min-width: 80px;
    text-align: right;
    font-size: 12px;
    color: #999;
}

/* 分页 */
.ai-logs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.ai-logs-pagination button {
    padding: 8px 20px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-logs-pagination button:hover:not(:disabled) {
    border-color: #667eea;
    color: #667eea;
}

.ai-logs-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#logs-page-info {
    font-size: 13px;
    color: #666;
}

/* 详情弹窗 */
.ai-log-detail-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    justify-content: center;
    align-items: center;
}

.ai-log-detail-container {
    background: #fff;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ai-log-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #eee;
}

.ai-log-detail-header h3 {
    margin: 0;
    font-size: 16px;
}

.close-detail-btn {
    cursor: pointer;
    font-size: 20px;
    color: #666;
}

.close-detail-btn:hover {
    color: #333;
}

.ai-log-detail-content {
    padding: 24px;
    overflow-y: auto;
}

.detail-row {
    display: flex;
    margin-bottom: 16px;
    font-size: 14px;
}

.detail-label {
    min-width: 100px;
    color: #888;
}

.detail-value {
    flex: 1;
    color: #333;
    word-break: break-all;
}

.detail-value.prompt-content,
.detail-value.response-content {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
}

.detail-value img {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 8px;
}

/* 空状态 */
.ai-logs-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.ai-logs-empty i {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* ========================================= */
/* 左侧悬浮快捷导航（新增） */
/* ========================================= */
#left-quick-nav{
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    z-index: 3000;
    backdrop-filter: blur(8px);
}

#left-quick-nav .lqn-btn{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid #eee;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    user-select: none;
}

#left-quick-nav .lqn-btn:hover{
    transform: translateY(-1px);
    border-color: #d6e4ff;
    box-shadow: 0 6px 18px rgba(24,144,255,0.18);
}

#left-quick-nav .lqn-btn:active{
    transform: translateY(0);
    box-shadow: none;
}

.lqn-panel{
    position: fixed;
    left: 78px;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 12px 34px rgba(0,0,0,0.14);
    border-radius: 14px;
    z-index: 3000;
    backdrop-filter: blur(8px);
    padding: 12px;
}

.lqn-panel .lqn-panel-title{
    font-size: 14px;
    font-weight: 700;
    color: #222;
    margin-bottom: 6px;
}

.lqn-panel .lqn-panel-desc{
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
}

.lqn-panel .lqn-panel-item{
    width: 100%;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #eee;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #222;
    text-align: left;
    padding: 0 12px;
    margin-bottom: 10px;
    transition: background .12s ease, border-color .12s ease;
}

.lqn-panel .lqn-panel-item:hover{
    background: #f0f9ff;
    border-color: #91d5ff;
}

.lqn-panel .lqn-panel-item:last-child{ margin-bottom: 0; }

.lqn-gallery-panel{
    width: 380px;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow: hidden;
}

.lqn-panel-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.lqn-close-btn{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid #eee;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.lqn-close-btn:hover{
    background: #fafafa;
}

.lqn-gallery-grid{
    overflow: auto;
    padding-top: 6px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.lqn-gallery-item{
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #f3f3f3;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}

.lqn-gallery-thumb{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform .16s ease;
}

.lqn-gallery-item:hover .lqn-gallery-thumb{
    transform: scale(1.05);
}

.lqn-gallery-actions{
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity .12s ease;
}

.lqn-gallery-item:hover .lqn-gallery-actions{
    opacity: 1;
}

.lqn-gallery-action-btn{
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.lqn-gallery-action-btn:hover{
    background: rgba(0,0,0,0.7);
}