/* static/style.css - 4.0 可缩放版 */

body { 
    background-color: #0f0f11; 
    color: #eee; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    margin: 0; overflow: hidden; user-select: none; 
}

#viewport {
    width: 100vw; height: 100vh;
    position: absolute; top: 0; left: 0;
    cursor: grab; transform-origin: 0 0; 
}
#viewport:active { cursor: grabbing; }

#grid {
    position: absolute; top: -5000px; left: -5000px;
    width: 10000px; height: 10000px;
    background-image: linear-gradient(#222 1px, transparent 1px), linear-gradient(90deg, #222 1px, transparent 1px);
    background-size: 40px 40px; z-index: -1;
}

#toolbar {
    position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
    background: rgba(30, 30, 30, 0.8); backdrop-filter: blur(10px);
    border: 1px solid #444; border-radius: 12px;
    padding: 10px; display: flex; flex-direction: column; gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 100;
}
.tool-btn {
    width: 50px; height: 50px; background: #333; border: 1px solid #555;
    border-radius: 8px; cursor: pointer; color: white; font-size: 20px;
    display: flex; justify-content: center; align-items: center; transition: 0.2s;
}
.tool-btn:hover { background: #6c5ce7; border-color: #6c5ce7; transform: scale(1.1); }

/* --- 节点样式 (Flex 布局实现自适应) --- */
.node {
    position: absolute; 
    width: 340px; /* 默认宽度 */
    min-width: 300px; min-height: 200px; /* 限制最小尺寸，防止拖没了 */
    background: #1e1e1e; border: 1px solid #333; border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    display: flex; flex-direction: column; /* 纵向布局 */
    transition: box-shadow 0.2s, border-color 0.2s;
}
.node:hover { border-color: #666; box-shadow: 0 15px 35px rgba(0,0,0,0.7); }
.node.selected { border-color: #6c5ce7; box-shadow: 0 0 0 2px #6c5ce7; }

.node-header {
    padding: 12px; 
    padding-right: 25px;background: #2a2a2a; border-bottom: 1px solid #333;
    border-radius: 10px 10px 0 0;
    font-size: 13px; font-weight: bold; color: #ddd;
    display: flex; justify-content: space-between; align-items: center;
    cursor: move; flex-shrink: 0; /* 头部高度固定，不许压缩 */
}

/* 内容区域自适应：关键在于 flex: 1 */
.node-content { 
    padding: 15px; 
    flex: 1; /* 占满剩余空间 */
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    overflow: hidden; /* 防止内容溢出 */
}

/* 文本域自适应 */
textarea, input[type="text"] {
    background: #121212; border: 1px solid #333; color: #e0e0e0;
    padding: 8px 12px; border-radius: 6px; resize: none; outline: none;
    font-family: inherit; font-size: 12px; transition: 0.2s;width: 100%; 
    box-sizing: border-box;
}
textarea:focus, input[type="text"]:focus { border-color: #6c5ce7; background: #1a1a1a; }

/* 让输入框在文本节点里自动撑高 */
.node[data-type="text"] textarea.prompt-input {
    flex: 1; /* 纵向撑满 */
    min-height: 60px;
}

/* 媒体预览自适应 */
.media-preview {
    width: 100%; 
    flex: 1; /* 纵向撑满 */
    min-height: 100px; 
    background: #000; border-radius: 6px; 
    display: none; object-fit: contain; 
    border: 1px solid #333; margin-top: 10px;
}

/* --- 右下角缩放手柄 --- */
.resize-handle {
    position: absolute; bottom: 0; right: 0;
    width: 15px; height: 15px;
    cursor: nwse-resize; /* 鼠标变成斜向箭头 */
    background: linear-gradient(135deg, transparent 50%, #666 50%); /* 画个三角形 */
    border-radius: 0 0 10px 0;
    opacity: 0.5;
}
.resize-handle:hover { opacity: 1; background: linear-gradient(135deg, transparent 50%, #6c5ce7 50%); }

/* 其他样式保持不变 */
select {
    appearance: none; background-color: #252525; color: #eee;
    border: 1px solid #444; border-radius: 6px; padding: 8px 30px 8px 12px;
    font-size: 12px; cursor: pointer; flex: 1; outline: none; transition: 0.2s;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
button.run-btn {
    background: linear-gradient(90deg, #6c5ce7, #a29bfe); border: none; padding: 8px; border-radius: 6px;
    color: white; font-weight: bold; cursor: pointer; font-size: 12px; flex-shrink: 0;
}
.status-msg { font-size: 11px; color: #666; text-align: center; min-height: 15px; flex-shrink: 0;}
.port { width: 12px; height: 12px; background: #555; border-radius: 50%; border: 2px solid #1e1e1e; position: absolute; top: 18px; cursor: crosshair; }
.port:hover { background: #6c5ce7; transform: scale(1.2); }
.port-in { left: -7px; } .port-out { right: -7px; }
svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-btn-item { background: #2a2a2a; border: 1px solid #444; border-radius: 6px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: 0.2s; }
.tool-btn-item:hover { background: #3a3a3a; border-color: #6c5ce7; }
.control-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* --- 图片节点专用样式 --- */
.node-image .node-content {
    flex-direction: row; /* 左右布局 */
    gap: 15px;
}

/* 左侧上传区 */
.img-upload-area {
    flex: 1; /* 占比 1 */
    background: #1a1a1a;
    border: 2px dashed #333;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s;
    min-height: 150px;
}
.img-upload-area:hover {
    border-color: #555;
    background: #222;
}

.upload-placeholder {
    text-align: center;
    pointer-events: none;
}

.ref-image-preview {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持比例 */
    background: #000;
}

.del-ref-btn {
    position: absolute;
    top: 5px; right: 5px;
    width: 24px; height: 24px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    font-size: 12px;
    transition: 0.2s;
}
.del-ref-btn:hover { background: #e84118; }
/* --- 纯素材节点专用样式 (Resource Node) --- */

/* 1. 去掉内边距，让图片贴边 */
.node-resource_image .node-content {
    padding: 0;
    display: flex;
}

/* 2. 上传区铺满整个卡片 */
.resource-upload-area {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #000;
    position: relative;
}

/* --- 纯素材节点专用样式 (修正版) --- */

/* 1. 去掉内边距 */
.node-resource_image .node-content {
    padding: 0;
    display: flex;
}

/* 2. 上传区铺满 */
.resource-upload-area {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #000;
    position: relative;
    overflow: hidden;
}

/* 3. 标题栏样式回归正常 (但平时隐藏) */
.node-resource_image .node-header {
    position: absolute;
    top: 0; left: 0; width: 100%;

    /* 关键修复：给它一个半透明黑底，并且加上 box-sizing 防止撑破 */
    background: rgba(0, 0, 0, 0.7); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box; /* 👈 这行能解决 X 飞出去的问题 */
    padding-right: 25px;    /* 👈 保持和普通节点一样的安全距离 */

    z-index: 10;
    opacity: 0; /* 平时隐藏 */
    transition: opacity 0.2s ease;
}

/* 悬停显示 */
.node-resource_image:hover .node-header {
    opacity: 1;
}
.node-resource_image.selected .node-header {
    opacity: 1;
}
/* 连线样式 (修复版) */
.connection-line {
    stroke: #666;
    stroke-width: 4px;  /* 基础加粗，更容易点中 */
    fill: none;
    transition: all 0.2s;
    cursor: pointer;

    /* 🔥🔥🔥 核心修复：让线条能接收鼠标事件 🔥🔥🔥 */
    pointer-events: stroke; 
}

/* 悬停高亮 */
.connection-line:hover {
    stroke: #e84118;    /* 变红 */
    stroke-width: 8px;  /* 变超粗，给你满满的安全感 */
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
/* --- 注释节点专用样式 (Note) --- */

/* 1. 节点本体：透明、无边框、无阴影 */
.node-note {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.2s;
}

/* 2. 悬停时：显示淡淡的边框和背景，方便拖拽 */
.node-note:hover, .node-note.selected {
    background: rgba(30, 30, 30, 0.4) !important;
    border: 1px dashed #444 !important;
}

/* 3. 头部：平时隐藏，悬停显示 */
.node-note .node-header {
    background: transparent;
    border-bottom: none;
    padding: 5px 10px;
    opacity: 0;
    transition: opacity 0.2s;
}
.node-note:hover .node-header { opacity: 1; }

/* 4. 内容区：去掉内边距 */
.node-note .node-content {
    padding: 5px;
    gap: 0;
}

/* 5. 控制条：平时隐藏，悬停显示 */
.note-controls {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 5px;
    opacity: 0;
    transition: opacity 0.2s;
}
.node-note:hover .note-controls { opacity: 1; }

/* 6. 文本域：完全透明，像直接写在画布上一样 */
.note-textarea {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    resize: none;
    outline: none;
    width: 100%;
    height: 100%;
    font-family: sans-serif;
    line-height: 1.5;
}
/* 这里的 !important 是为了覆盖之前定义的全局 textarea 样式 */

/* --- 顶部导航栏样式 (Tab System) --- */
#top-header {
    position: fixed; top: 0; left: 0; width: 100%; height: 40px;
    background: #1e1e1e; border-bottom: 1px solid #333;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 200; padding-right: 10px;
}

/* 标签容器 */
#tabs-container {
    display: flex; align-items: center; height: 100%;
    overflow-x: auto; max-width: 70%;
    /* 👇 新增：隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
#tabs-container::-webkit-scrollbar { 
    display: none; /* Chrome/Safari */
}

/* 单个标签 */
.tab {
    background: #252525; color: #888;
    padding: 0 15px; height: 100%;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; cursor: pointer;
    border-right: 1px solid #333;
    min-width: 100px;
    transition: 0.2s;
}
.tab:hover { background: #2a2a2a; color: #ccc; }
.tab.active {
    background: #333; color: #fff; border-top: 2px solid #6c5ce7;
}
.tab-close {
    border-radius: 50%; width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
}
.tab-close:hover { background: #444; color: #fff; }

/* 顶部功能按钮区 */
#top-actions {
    display: flex; align-items: center; gap: 5px;
}
.top-btn {
    background: transparent; border: none; color: #aaa;
    padding: 5px 10px; border-radius: 4px; cursor: pointer;
    font-size: 12px; display: flex; align-items: center; gap: 5px;
    transition: 0.2s;
}
.top-btn:hover { background: #333; color: #fff; }
.divider { width: 1px; height: 16px; background: #444; margin: 0 5px; }

/* --- 用户状态区 --- */
#user-status {
    display: flex; align-items: center; gap: 6px;
    color: #ccc; cursor: pointer; font-size: 13px;
    padding: 5px 10px; border-radius: 4px;
    transition: 0.2s;
}
#user-status:hover { background: #333; color: #fff; }

/* --- 登录弹窗样式 --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(3px);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
}

.modal-box {
    background: #1e1e1e; border: 1px solid #444;
    padding: 30px; border-radius: 12px; width: 300px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    text-align: center; animation: popIn 0.3s ease;
}

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

/* --- 登录弹窗优化版 --- */
.modal-box {
    background: #1e1e1e; border: 1px solid #444;
    padding: 30px 40px; /* 左右内边距加大 */
    border-radius: 12px; width: 320px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    text-align: center; animation: popIn 0.3s ease;
}

/* 输入框容器 (相对定位，为了放小眼睛) */
.input-group {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.auth-input {
    width: 100%; 
    background: #111; border: 1px solid #333;
    color: #fff; padding: 12px 15px; 
    border-radius: 6px; font-size: 14px; 
    outline: none;
    box-sizing: border-box; /* 🔥 关键：防止宽度不一 */
    transition: 0.2s;
}
.auth-input:focus { border-color: #6c5ce7; background: #161616; }

/* 登录按钮 */
.auth-btn-primary {
    width: 100%; 
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    border: none; padding: 12px; 
    color: #fff; font-weight: bold;
    border-radius: 6px; cursor: pointer; font-size: 14px;
    box-sizing: border-box; /* 🔥 关键 */
    transition: 0.2s;
    margin-top: 10px;
}
.auth-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

/* 小眼睛图标 */
.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    cursor: pointer;
    font-size: 14px;
}
.password-toggle:hover { color: #aaa; }


/* --- 历史记录侧边栏 --- */
#history-sidebar {
    position: fixed; top: 40px; right: -320px; /* 默认藏在屏幕右边 */
    width: 300px; height: calc(100vh - 40px);
    background: #1a1a1a; border-left: 1px solid #333;
    z-index: 150; transition: right 0.3s ease;
    display: flex; flex-direction: column;
}
#history-sidebar.open { right: 0; /* 滑出来 */ }

.sidebar-header {
    padding: 15px; border-bottom: 1px solid #333;
    display: flex; justify-content: space-between; align-items: center;
    color: #eee; font-size: 14px; font-weight: bold;
}
.close-btn { cursor: pointer; font-size: 20px; color: #888; }
.close-btn:hover { color: #fff; }

#history-list { flex: 1; overflow-y: auto; padding: 15px; }

/* 单条记录卡片 */
.history-item {
    background: #252525; border-radius: 8px;
    margin-bottom: 15px; overflow: hidden;
    border: 1px solid #333; transition: 0.2s;
}
.history-item:hover { border-color: #6c5ce7; transform: translateY(-2px); }

.history-img {
    width: 100%; height: 160px; object-fit: cover;
    cursor: pointer; background: #000;
    display: block;
}
.history-info { padding: 10px; }
.history-prompt {
    font-size: 12px; color: #ccc; margin-bottom: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-meta {
    font-size: 10px; color: #666; display: flex; justify-content: space-between;
}
/* --- 修复：允许选中生成的文字 --- */
.node .node-content {
    /* 允许内容区域的文字被选中 */
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: auto; /* 恢复鼠标指针为“工”字形 */
}

/* 如果只想让结果区域可选中，用这个更精准： */
#result-[id] { /* 注意：这里只是伪代码示意，实际用下面的通用类 */ }

.node div[id^="result-"] {
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text;
}

/* --- 底部声明样式 --- */
#footer-disclaimer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8); /* 半透明黑底 */
    color: #666;
    font-size: 11px;
    text-align: center;
    padding: 5px 0;
    z-index: 100; /* 保证浮在最上面 */
    pointer-events: none; /* 让鼠标能透过文字点击下面的东西，不挡操作 */
    border-top: 1px solid #333;
}


/* --- 注释节点专用样式 (全黑极简版) --- */
.node-note {
    /* 默认背景：半透明黑色 (不再是黄色) */
    background: rgba(20, 20, 20, 0.6) !important; 
    
    /* 边框：深灰色 (不再是黄色虚线) */
    border: 1px solid #444 !important; 
    
    box-shadow: none !important;
    transition: all 0.2s;
    backdrop-filter: blur(2px); /* 稍微一点毛玻璃，提升质感 */
}

/* 鼠标悬停时：稍微亮一点的黑 */
.node-note:hover {
    background: rgba(40, 40, 40, 0.8) !important;
    border-color: #666 !important;
}

/* 选中时：保持黑色，或者加一点高亮边框 */
.node-note.selected {
    background: rgba(20, 20, 20, 0.9) !important;
    border: 1px solid #6c5ce7 !important; /* 选中时变紫，和普通节点一致 */
}

/* --- 模板弹窗升级版 --- */
/* 让弹窗变宽 */
#template-modal .modal-box {
    width: 800px !important; /* 加宽 */
    max-width: 95vw;
    padding: 25px;
}

/* 调整列表网格：一行 3 个 */
#template-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3列布局 */
    gap: 20px !important;
    max-height: 60vh;
}

/* 单个模板卡片 */
.template-card {
    background: #252525;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
}

.template-card:hover {
    border-color: #6c5ce7;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* 缩略图区域 */
.template-img-box {
    width: 100%;
    aspect-ratio: 16/9; /* 强制 16:9 */
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #333;
}

.template-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填满 */
}

/* 标题区域 */
.template-info {
    padding: 12px;
    text-align: center;
}
.template-name {
    color: #eee; font-weight: bold; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}