/*
 * ui-polish-web.css — 灵动万象服务器版画布 UI 优化补丁
 * 适用版本：服务器画布（.shell .node 体系）
 * 引入顺序：必须在 theme.css 和 flow-skin.css 之后引入，否则会被覆盖
 * 作者：CSS 工程师补丁
 * 日期：2026-07-04
 *
 * 本文件所有规则均带 !important，原因：
 *   flow-skin.css 全量使用 !important，不带 !important 的规则无法生效。
 */

/*
 * LD Canvas UI 层级体系
 * 优先级从低到高：base → theme → overrides
 * base = flow-skin.css / theme.css 的原始定义
 * theme = multi-theme.css 的主题变量
 * overrides = 本文件的所有修复规则（最高优先级）
 */
/* LD Design Tokens（供 JS inline style 引用） */
:root {
  --ld-brand: #6366f1;
  --ld-brand-gold: #F59E0B;
  --ld-gap-xs: 4px;
  --ld-gap-sm: 8px;
  --ld-gap-md: 12px;
  --ld-gap-lg: 16px;
}

/* 本文件无层加载，靠源顺序（在 theme.css 之后）取胜，仅在与 theme.css !important 冲突时保留 !important */


/* ============================================================
 § 0  统一 transition（基础变量，先声明）
 ============================================================ */
.shell .node,
.shell .node-head,
.shell .node *,
.mode-btn,
.gen-btn,
.image-submit-btn,
.video-submit-btn,
.tool-btn {
transition: box-shadow 0.18s ease, border-color 0.18s ease,
            background-color 0.18s ease, opacity 0.18s ease !important;
}

/* ============================================================
 § 1  节点圆角统一
 ============================================================ */
.shell .node {
border-radius: 16px !important;
}

.shell .node-head {
border-radius: 16px 16px 0 0 !important;
}

/* ============================================================
 § 2  节点 hover 状态
 仅对 .shell .node 生效，不影响其他组件
 ============================================================ */
.shell .node:hover {
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35),
            0 4px 20px rgba(99, 102, 241, 0.15) !important;
border-color: rgba(99, 102, 241, 0.5) !important;
}

/* ============================================================
 § 3  节点选中态 → indigo 发光环（替代灰白 outline）
 ============================================================ */
.shell .node.selected,
.shell .node.node-selected,
.shell .node[data-selected="true"],
.shell .node.is-selected {
outline: none;
box-shadow: 0 0 0 2px #6366f1,
            0 0 16px 4px rgba(99, 102, 241, 0.45),
            0 0 32px 8px rgba(99, 102, 241, 0.2) !important;
border-color: #6366f1 !important;
}

/* ============================================================
 § 4  模式按钮 active 颜色 → indigo（覆盖 JS inline #5b21b6）
 ============================================================ */
.mode-btn.active,
.mode-btn[data-active="true"],
.mode-btn.is-active,
.mode-btn:active {
background-color: #6366f1 !important;
border-color: #6366f1 !important;
color: #ffffff !important;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4) !important;
}

/* ============================================================
 § 5  生成按钮视觉提升（.gen-btn / .image-submit-btn / .video-submit-btn）
 ============================================================ */
.gen-btn,
.image-submit-btn,
.video-submit-btn {
background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
border-color: #6366f1 !important;
color: #ffffff !important;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

.gen-btn:hover,
.image-submit-btn:hover,
.video-submit-btn:hover {
background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
border-color: #4f46e5 !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35),
            0 4px 16px rgba(99, 102, 241, 0.45) !important;
}

.gen-btn:disabled,
.image-submit-btn:disabled,
.video-submit-btn:disabled {
background: linear-gradient(135deg, #a5b4fc 0%, #c7d2fe 100%) !important;
border-color: #a5b4fc !important;
box-shadow: none !important;
opacity: 0.6;
cursor: not-allowed;
}

/* ============================================================
 § 6  画布网格可见性提升（透明度 4.5% → 8%）
 ============================================================ */
.canvas-grid,
[class*="canvas-grid"],
.flow-canvas-grid {
opacity: 0.08;
}

/* ============================================================
 § 7  工具按钮 hover 更明显
 ============================================================ */
.tool-btn:hover,
.toolbar-btn:hover,
.canvas-toolbar .btn:hover,
.canvas-tool:hover {
background-color: rgba(99, 102, 241, 0.12) !important;
border-color: rgba(99, 102, 241, 0.4) !important;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
color: #6366f1 !important;
}

.tool-btn.active,
.toolbar-btn.active,
.canvas-toolbar .btn.active,
.canvas-tool.active {
background-color: rgba(99, 102, 241, 0.18) !important;
border-color: #6366f1 !important;
color: #6366f1 !important;
}

/* ============================================================
 § 8  输入框 / textarea focus 样式
 ============================================================ */
.shell input:focus,
.shell textarea:focus,
.shell select:focus,
.shell .node-inline-prompt[contenteditable]:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5),
            0 0 12px rgba(99, 102, 241, 0.2) !important;
border-color: rgba(99, 102, 241, 0.8) !important;
}

/* ============================================================
 § 9  电商金主题（Commerce Gold）
 激活方式：给 <html> 添加 class="theme-commerce"
 必须用 !important 覆盖 flow-skin.css 的 :root !important
 ============================================================ */
html.theme-commerce,
html.theme-commerce body {
--brand-from: #FCD34D;
--brand-mid:  #F59E0B;
--brand-to:   #D97706;
--brand-grad: linear-gradient(135deg, #FCD34D 0%, #F59E0B 50%, #D97706 100%);
--brand-glow: 0 0 20px rgba(245,158,11,0.5), 0 0 40px rgba(252,211,77,0.3);
--brand-soft: rgba(245,158,11,0.12);
--brand-border: rgba(245,158,11,0.32);
--canvas-bg: #1a1410;
--canvas-grid: rgba(245,158,11,0.14);
--accent: #F59E0B;
--flow-blue: #F59E0B;
--flow-blue-hi: #FCD34D;
}

/* 电商金：生成按钮用金色渐变 */
html.theme-commerce .gen-btn,
html.theme-commerce .image-submit-btn,
html.theme-commerce .video-submit-btn {
background: linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%) !important;
border-color: #F59E0B !important;
color: #1a1410 !important;
box-shadow: 0 2px 8px rgba(245,158,11,0.4) !important;
}

html.theme-commerce .gen-btn:hover,
html.theme-commerce .image-submit-btn:hover,
html.theme-commerce .video-submit-btn:hover {
background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%) !important;
box-shadow: 0 0 16px rgba(245,158,11,0.6),
            0 4px 12px rgba(245,158,11,0.4) !important;
}

/* 电商金：节点选中态 */
html.theme-commerce .shell .node.selected,
html.theme-commerce .shell .node.node-selected {
box-shadow: 0 0 0 2px #F59E0B,
            0 0 16px 4px rgba(245,158,11,0.45),
            0 0 32px 8px rgba(245,158,11,0.2) !important;
border-color: #F59E0B !important;
}

/* 电商金：hover */
html.theme-commerce .shell .node:hover {
box-shadow: 0 0 0 2px rgba(245,158,11,0.5),
            0 4px 20px rgba(245,158,11,0.2) !important;
border-color: rgba(245,158,11,0.6) !important;
}

/* ============================================================
 EOF ui-polish-web.css
 ============================================================ */

/* § 10 生成中 shimmer 扫光 */
.image-gen-loading {
position: relative;
overflow: hidden !important;
}
.ld-shimmer-bar {
position: absolute;
inset: 0;
background: linear-gradient(90deg,
  transparent 0%,
  rgba(99,102,241,0.25) 50%,
  transparent 100%) !important;
animation: ld-shimmer 1.6s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
@keyframes ld-shimmer {
0%   { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

/* § 11 参数摘要 pill */
.image-param-summary .ld-param-pill {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 4px !important;
background: rgba(255,255,255,0.08) !important;
font-size: 11px !important;
margin-right: 3px;
}

/* § 12 连接线 hover */
.shell svg .edge-path:hover,
.shell svg .connector:hover,
.shell .canvas-edge:hover path {
stroke: rgba(99,102,241,0.9) !important;
stroke-width: 2.5;
filter: drop-shadow(0 0 4px rgba(99,102,241,0.5));
}

/* § 14 拖动时关闭阴影（性能优化） */
.shell.is-dragging .node,
.shell .node.is-dragging,
body.is-dragging .shell .node {
box-shadow: none !important;
transition: none;
}


/* ============================================================
 § 15  设计令牌补全（对标 AICanvasPro dark.css）
 ============================================================ */
:root {
/* 阴影系统 */
--ld-shadow-node:    0 4px 12px rgba(0,0,0,0.35), 0 12px 40px rgba(0,0,0,0.25);
--ld-shadow-float:   0 8px 32px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.06) inset;
--ld-shadow-menu:    0 8px 32px rgba(0,0,0,0.6),  0 0 0 0.5px rgba(255,255,255,0.07) inset;
--ld-shadow-fab:     0 4px 20px rgba(99,102,241,0.55);
--ld-shadow-fab-h:   0 6px 28px rgba(99,102,241,0.75);
/* 毛玻璃 blur 档位 */
--ld-blur-panel:  20px;
--ld-blur-menu:   16px;
--ld-blur-node:    8px;
/* 圆角 token */
--ld-radius-node: 16px;
--ld-radius-card: 14px;
--ld-radius-btn:  10px;
--ld-radius-pill: 999px;
/* 字体大小 */
--ld-font-xs:  11px;
--ld-font-sm:  12px;
--ld-font-md:  13px;
--ld-font-lg:  14px;
/* surface 语义背景 */
--ld-surface-node:  rgba(255,255,255,0.05);
--ld-surface-float: rgba(18,18,26,0.96);
--ld-surface-menu:  rgba(20,21,26,0.97);
/* 弹簧曲线 */
--ld-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ld-ease-out:    cubic-bezier(0.2, 0, 0.2, 1);
--ld-ease-damp:   cubic-bezier(0.19, 1, 0.22, 1);
}

/* ============================================================
 § 16  节点静止态阴影（最高视觉提升）
 ============================================================ */
.shell .node {
box-shadow: var(--ld-shadow-node) !important;
}

/* ============================================================
 § 17  节点边框改为半透明白色（对标 Pro 版 stroke-10）
 ============================================================ */
.shell .node {
border-color: rgba(255,255,255,0.12) !important;
}

/* ============================================================
 § 18  节点背景双层（实色 + 半透明叠加，产生玻璃分层感）
 ============================================================ */
.shell .node {
background-color: #171d29 !important;
/* 用 outline 模拟内侧高光（不影响 box-shadow） */
outline: 0.5px solid rgba(255,255,255,0.05);
outline-offset: -1px;
}

/* ============================================================
 § 19  毛玻璃效果（浮层/工具栏/菜单）
 ============================================================ */
.shell .node-head,
.shell .toolbar,
.shell .param-popover-panel,
.shell .floating-panel,
.video-model-menu,
.image-gen-popover,
.param-console {
backdrop-filter: blur(var(--ld-blur-panel)) !important;
-webkit-backdrop-filter: blur(var(--ld-blur-panel));
}

/* 工具栏更轻的模糊 */
.shell .tool-btn,
.shell .gen-btn-wrap {
backdrop-filter: blur(var(--ld-blur-node)) !important;
-webkit-backdrop-filter: blur(var(--ld-blur-node));
}

/* ============================================================
 § 20  弹簧缓动（按钮/节点交互更有弹性）
 ============================================================ */
.shell .node:hover,
.gen-btn,
.image-submit-btn,
.video-submit-btn,
.tool-btn {
transition:
  box-shadow 0.18s var(--ld-ease-out),
  border-color 0.18s var(--ld-ease-out),
  background-color 0.18s var(--ld-ease-out),
  transform 0.22s var(--ld-ease-spring) !important;
}

.gen-btn:hover,
.image-submit-btn:hover,
.video-submit-btn:hover {
transform: scale(1.04);
}

.gen-btn:active,
.image-submit-btn:active,
.video-submit-btn:active {
transform: scale(0.96);
}

/* ============================================================
 § 21  生成按钮光晕强度提升（0.45 → 0.75，对标 Pro 版）
 ============================================================ */
.gen-btn:hover,
.image-submit-btn:hover,
.video-submit-btn:hover {
box-shadow: 0 0 0 3px rgba(99,102,241,0.4),
            0 4px 20px rgba(99,102,241,0.75) !important;
}

/* ============================================================
 § 22  loading 骨架屏（多行占位线，对标 Pro 版）
 ============================================================ */
.image-gen-loading::before {
content: "";
position: absolute;
inset: 18px 20px;
border-radius: 8px !important;
pointer-events: none;
opacity: 0.75;
background:
  linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)) 0 0/72% 10px no-repeat,
  linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) 0 24px/94% 8px no-repeat,
  linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) 0 44px/86% 8px no-repeat,
  linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) 0 64px/58% 8px no-repeat !important;
z-index: 2;
}

/* ============================================================
 § 23  节点选中时高亮提升（移除静止阴影，换为发光）
 ============================================================ */
.shell .node.selected,
.shell .node.node-selected,
.shell .node[data-selected="true"],
.shell .node.is-selected {
background-color: #1a2030 !important;
}

/* ============================================================
 § 24  图片生成节点——预览区圆角统一到 18px（对标 Pro 版）
 ============================================================ */
.shell .node .image-gen-preview,
.shell .node .image-preview-card,
.shell .node .tech-node-main.image-gen-preview {
border-radius: 14px !important;
overflow: hidden !important;
}

/* ============================================================
 § 25  图片生成节点——预览区最小高度（防止空节点高度坍塌）
 ============================================================ */
.shell .node .image-gen-stage {
min-height: 220px !important;
}

.shell .node .image-preview-card {
min-height: 200px !important;
}

/* ============================================================
 § 26  图片生成结果——object-fit: cover（裁满，无留白）
 ============================================================ */
.shell .node .image-gen-preview-img,
.shell .node .image-preview-card img,
.shell .node .image-preview-card .generated-result-media {
object-fit: cover;
width: 100% !important;
height: 100% !important;
position: absolute;
inset: 0;
}

/* ============================================================
 § 27  视频生成节点——底部工具栏两端对齐
 ============================================================ */
.shell .node .video-composer-toolbar,
.shell .node .video-composer-actions,
.shell .node .param-panel-row.video-control-row {
justify-content: space-between;
gap: 6px;
padding: 4px 0;
}

/* 视频工具栏左侧参数组（模型+时长+分辨率）flex对齐 */
.shell .node .video-family-menu-wrap,
.shell .node .video-param-mini-wrap {
flex-shrink: 0;
}

/* ============================================================
 § 28  空状态占位——图标缩小，颜色更低调
 ============================================================ */
.shell .node .image-gen-placeholder {
opacity: 0.45;
}

.shell .node .image-gen-placeholder i[data-lucide],
.shell .node .image-gen-placeholder svg {
width: 28px !important;
height: 28px !important;
opacity: 0.6;
}

.shell .node .video-tech-placeholder {
opacity: 0.45;
}

.shell .node .video-tech-placeholder i[data-lucide],
.shell .node .video-tech-placeholder svg {
width: 28px !important;
height: 28px !important;
}

/* ============================================================
 § 29  视频节点预览区圆角统一
 ============================================================ */
.shell .node .video-tech-stage,
.shell .node .video-tech-preview,
.shell .node .video-preview-card {
border-radius: 14px !important;
overflow: hidden !important;
}

/* ============================================================
 § 30  图片节点底部参数行对齐（对标 Pro 版 prompt-panel-footer）
 ============================================================ */
.shell .node .image-param-toolbar,
.shell .node .param-panel-row.image-control-row {
justify-content: space-between;
align-items: center;
gap: 6px;
padding: 6px 0 2px;
min-height: 32px !important;
}

/* ============================================================
 § 31  (保留) 模型菜单弹层深色
 ============================================================ */
.video-model-menu,
.video-mode-menu,
.video-param-popover {
background: rgba(20, 21, 28, 0.97) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #e5e9f0 !important;
}