/*
 * node-ui-batch1.css — 服务器画布节点 UI 纯视觉层补丁（批次 1）
 * ------------------------------------------------------------------
 * 用途：把开源标杆 AI-CanvasPro（node-types.css / node-base.css）的
 *       节点内视觉规则，移植到服务器画布已有 DOM 上。
 *
 * 【纯视觉层】本文件只写 CSS，靠 class 选择器命中服务器现有 DOM。
 *   - 绝不新增 / 修改任何 JS、DOM 结构、onclick、data-* 行为。
 *   - 绝不写 position/layout 破坏性规则去动节点外壳。
 *   - 不碰 .node-head / .port / .resize-handle。
 *
 * 【引入顺序】必须在以下文件之后引入，否则会被 !important 覆盖：
 *       theme.css → flow-skin.css → ui-polish-web.css → (本文件)
 *   本文件复用 ui-polish-web.css 暴露的 --ld-* 令牌（如 --ld-brand
 *   = #6366f1 indigo、--ld-radius-* 等），因此必须排在其后。
 *
 * 【优先级】全部规则包裹进 @layer overrides + !important。
 *   服务器 flow-skin.css 全量使用 !important，不带 !important 无法生效；
 *   @layer overrides 与 ui-polish-web.css 同层，靠书写顺序 / 特指度胜出。
 *
 * 【变量策略】服务器 flow-skin.css 实测「没有」标杆的多数变量
 *   （--white-05 / --stroke-10 / --blue / --action-btn-bg / --indigo /
 *    --radius-18 均不存在）。服务器仅有 --text-muted / --muted /
 *    --text-main / --accent / --flow-blue 等。因此：
 *     · indigo 主色 → 优先 var(--ld-brand)，兜底 #6366f1
 *     · 文字弱化色 → var(--text-muted) （服务器确有）
 *     · 其余标杆特有变量 → 就地用 rgba() / 具体值兜底（见文末清单）
 *
 * 覆盖的 6 个视觉点：
 *   §1 底部工具栏 footer 两段式布局
 *   §2 圆形生成键（indigo 圆钮 + hover 发光）
 *   §3 pill 竖线 "|" 分隔
 *   §4 ref 缩略图圆角 / 边框 / hover / 拖拽态
 *   §5 markdown 输出排版（h1-3/ul/ol/li/p/pre/code/blockquote/table）
 *   §6 骨架屏占位 + shimmer 扫光
 * ------------------------------------------------------------------
 */



/* ============================================================
 §1  底部工具栏 footer 两段式布局
 标杆 .prompt-panel-footer: space-between，左 pills 右 actions。
 服务器兼容类名：.prompt-panel-footer / .image-param-toolbar /
 .video-param-toolbar。用兼容选择器一起命中。
 —— 只动 flex 排布，不动定位，不改节点外壳。
 ============================================================ */
.shell .node .prompt-panel-footer,
.shell .node .image-param-toolbar,
.shell .node .video-param-toolbar,
.prompt-panel-footer,
.image-param-toolbar,
.video-param-toolbar {
display: flex;
align-items: center;
justify-content: space-between;   /* 两段式：左参数 / 右动作 */
gap: 8px;
min-width: 0;
padding: 6px 0 2px;
min-height: 32px !important;
}

/* 左侧参数组（pills）——占弹性空间，不换行 */
.shell .node .prompt-panel-footer .img-model-pills,
.prompt-panel-footer .img-model-pills,
.image-param-toolbar .img-model-pills,
.video-param-toolbar .img-model-pills {
display: flex;
align-items: center;
gap: 0;
min-width: 0;
flex: 1 1 auto;
flex-wrap: nowrap;
overflow: visible !important;
}

/* 右侧动作组（生成键等）——不收缩，紧凑 */
.shell .node .prompt-panel-footer .prompt-actions,
.prompt-panel-footer .prompt-actions,
.image-param-toolbar .prompt-actions,
.video-param-toolbar .prompt-actions {
display: flex;
align-items: center;
flex: 0 0 auto;
gap: 4px;
}

/* pills 子项：不收缩、可省略号 */
.prompt-panel-footer .img-model-pills > *,
.image-param-toolbar .img-model-pills > *,
.video-param-toolbar .img-model-pills > * {
flex: 0 0 auto;
min-width: 0;
}

/* ============================================================
 §2  圆形生成键（indigo 圆钮）
 标杆 .img-gen-btn：节点内 36px 圆形，indigo 背景，hover scale+发光。
 服务器生成键：.gen-btn.image-submit-btn / .video-submit-btn。
 —— 只改视觉（形状/颜色/发光），不动 onclick / 事件。
 indigo 主色：var(--ld-brand) 兜底 #6366f1（标杆 --action-btn-bg）
 ============================================================ */
.shell .node .gen-btn.image-submit-btn,
.shell .node .gen-btn.video-submit-btn,
.shell .node .image-submit-btn,
.shell .node .video-submit-btn,
.gen-btn.image-submit-btn,
.gen-btn.video-submit-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px;
padding: 0;
border-radius: 50% !important;                 /* 圆形 */
border: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* indigo 背景（兜底 #6366f1 = 标杆 --action-btn-bg） */
background: var(--ld-brand, #6366f1) !important;
color: #ffffff !important;                      /* 标杆 --text-on-icon-badge */
box-shadow: none !important;
transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

/* 图标尺寸对齐标杆 16px */
.shell .node .gen-btn.image-submit-btn svg,
.shell .node .gen-btn.video-submit-btn svg,
.shell .node .image-submit-btn svg,
.shell .node .video-submit-btn svg,
.gen-btn.image-submit-btn svg,
.gen-btn.video-submit-btn svg,
.shell .node .image-submit-btn i[data-lucide],
.shell .node .video-submit-btn i[data-lucide] {
width: 16px !important;
height: 16px !important;
}

/* hover：加深 indigo + scale + 蓝色发光（标杆 --action-btn-hover-bg / --blue-40） */
.shell .node .gen-btn.image-submit-btn:hover,
.shell .node .gen-btn.video-submit-btn:hover,
.shell .node .image-submit-btn:hover,
.shell .node .video-submit-btn:hover,
.gen-btn.image-submit-btn:hover,
.gen-btn.video-submit-btn:hover {
background: #4f46e5 !important;                            /* 标杆 --action-btn-hover-bg 兜底 */
box-shadow: 0 0 12px rgba(99, 102, 241, 0.40) !important;  /* 标杆 --blue-40 兜底 */
transform: scale(1.05);
}

/* disabled：灰化（标杆 --white-15 / --white-40 兜底） */
.shell .node .gen-btn.image-submit-btn:disabled,
.shell .node .gen-btn.video-submit-btn:disabled,
.shell .node .image-submit-btn:disabled,
.shell .node .video-submit-btn:disabled,
.shell .node .image-submit-btn[disabled],
.shell .node .video-submit-btn[disabled],
.gen-btn.image-submit-btn:disabled,
.gen-btn.video-submit-btn:disabled {
background: rgba(255, 255, 255, 0.15) !important;   /* 标杆 --white-15 兜底 */
color: rgba(255, 255, 255, 0.40) !important;        /* 标杆 --white-40 兜底 */
box-shadow: none !important;
transform: none;
cursor: not-allowed;
}

.shell .node .image-submit-btn:disabled:hover,
.shell .node .video-submit-btn:disabled:hover,
.shell .node .image-submit-btn[disabled]:hover,
.shell .node .video-submit-btn[disabled]:hover,
.gen-btn.image-submit-btn:disabled:hover,
.gen-btn.video-submit-btn:disabled:hover {
transform: none;
background: rgba(255, 255, 255, 0.15) !important;
box-shadow: none !important;
}

/* ============================================================
 §3  pill 竖线 "|" 分隔
 标杆 .img-model-pills > :not(:first-child)::before 竖线分隔。
 —— 纯装饰伪元素，pointer-events:none，不拦截点击。
 ============================================================ */
.prompt-panel-footer .img-model-pills > :not(:first-child),
.image-param-toolbar  .img-model-pills > :not(:first-child),
.video-param-toolbar  .img-model-pills > :not(:first-child) {
display: inline-flex;
align-items: center;
position: relative;
padding-left: 18px;
}

.prompt-panel-footer .img-model-pills > :not(:first-child)::before,
.image-param-toolbar  .img-model-pills > :not(:first-child)::before,
.video-param-toolbar  .img-model-pills > :not(:first-child)::before {
content: "|";
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
width: 8px !important;
height: 18px !important;
margin: 0;
color: var(--text-muted, rgba(255, 255, 255, 0.55)) !important; /* 服务器确有 --text-muted */
opacity: 0.45;
font-size: 14px !important;
line-height: 1;
pointer-events: none;                 /* 装饰，不拦点击 */
}

/* ============================================================
 §4  ref 缩略图样式
 标杆 .ref-thumb-wrap / .ref-thumb-media / .ref-upload-slot：
 44px 缩略图、8px 圆角、边框、hover、拖拽态 is-dragging / is-drop-allow。
 —— 只改视觉，拖拽逻辑由服务器 JS 提供（这里只呈现拖拽态外观）。
 ============================================================ */
.shell .node .ref-thumb-wrap,
.ref-thumb-wrap {
position: relative;
width: 44px !important;
height: 44px !important;
min-width: 44px;
border-radius: 8px !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;  /* 标杆 --stroke-10 兜底 */
background: rgba(255, 255, 255, 0.05) !important;        /* 标杆 --white-05 兜底 */
transition: box-shadow .15s ease, border-color .15s ease, opacity .15s ease;
}

.shell .node .ref-thumb-wrap:hover,
.ref-thumb-wrap:hover {
border-color: rgba(99, 102, 241, 0.55) !important;
box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35) !important;
}

/* 缩略图媒体：铺满、圆角内切 */
.shell .node .ref-thumb-media,
.ref-thumb-media {
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 8px !important;
display: block;
}

/* 可拖拽：grab 光标 */
.shell .node .ref-thumb-wrap[draggable="true"],
.ref-thumb-wrap[draggable="true"] {
cursor: grab;             /* 标杆 --grab-cursor 兜底 */
}

/* 拖拽进行中：半透明 + grabbing（标杆 is-dragging） */
.shell .node .ref-thumb-wrap.is-dragging,
.ref-thumb-wrap.is-dragging {
opacity: 0.35;
cursor: grabbing;         /* 标杆 --grabbing-cursor 兜底 */
}

/* 允许放置：蓝环 + 浅底（标杆 is-drop-allow / --blue-40 / --white-06） */
.shell .node .ref-thumb-wrap.is-drop-allow,
.ref-thumb-wrap.is-drop-allow,
.node-ref-bar .ref-thumb-wrap.is-drop-allow {
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.40) !important;  /* --blue-40 兜底 */
background: rgba(255, 255, 255, 0.06) !important;           /* --white-06 兜底 */
}

/* 上传槽：44px 虚线占位（标杆 .ref-upload-slot） */
.shell .node .ref-upload-slot,
.ref-upload-slot {
width: 44px !important;
height: 44px !important;
min-width: 44px;
max-width: 44px;
padding: 0;
border-radius: 8px !important;
border: 1px dashed rgba(255, 255, 255, 0.15) !important;    /* --stroke-15 兜底 */
background: rgba(255, 255, 255, 0.03) !important;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: normal;
word-break: break-all;
line-height: 1.1;
text-align: center;
color: var(--text-muted, rgba(255, 255, 255, 0.5)) !important;
cursor: pointer;                                 /* --link-cursor 兜底 */
transition: border-color .15s ease, background .15s ease;
}

.shell .node .ref-upload-slot:hover,
.ref-upload-slot:hover {
border-color: rgba(99, 102, 241, 0.5) !important;
background: rgba(99, 102, 241, 0.06) !important;
color: var(--text-main, #e5e7eb) !important;
}

/* ============================================================
 §5  markdown 输出样式
 标杆 .aigen-text-output 排版（h1-3/ul/ol/li/p/pre/code/blockquote/table）。
 —— 防御性：命中不到（服务器无此容器）也无害，不影响其它区域。
 文字色用服务器确有的 --text-main / --text-muted / --strong-text。
 ============================================================ */
.shell .node .aigen-text-output,
.aigen-text-output {
font-size: 14px !important;
line-height: 1.7;
word-break: break-word;
overflow-wrap: anywhere;
}

.aigen-text-output h1,
.aigen-text-output h2,
.aigen-text-output h3 {
margin: 0 0 0.55em;
color: var(--strong-text, var(--text-main, #e5e7eb)) !important;
font-weight: 700 !important;
line-height: 1.35;
}
.aigen-text-output h1 { font-size: 1.25em !important; }
.aigen-text-output h2 { font-size: 1.16em !important; }
.aigen-text-output h3 { font-size: 1.08em !important; }

.aigen-text-output p,
.aigen-text-output ul,
.aigen-text-output ol,
.aigen-text-output pre,
.aigen-text-output table,
.aigen-text-output blockquote {
margin: 0 0 0.8em;
}
.aigen-text-output p:last-child,
.aigen-text-output ul:last-child,
.aigen-text-output ol:last-child,
.aigen-text-output pre:last-child,
.aigen-text-output table:last-child,
.aigen-text-output blockquote:last-child {
margin-bottom: 0;
}

.aigen-text-output ul,
.aigen-text-output ol {
padding-left: 1.35em;
}
.aigen-text-output li {
margin: 0.22em 0;
}

.aigen-text-output strong {
color: var(--strong-text, var(--text-main, #e5e7eb)) !important;
font-weight: 700 !important;
}

.aigen-text-output blockquote {
padding-left: 0.9em;
border-left: 2px solid rgba(255, 255, 255, 0.15);  /* --stroke-15 兜底 */
color: var(--text-muted, rgba(255, 255, 255, 0.6)) !important;
}

.aigen-text-output pre {
padding: 8px 10px;
overflow-x: auto;
border: 1px solid rgba(255, 255, 255, 0.08) !important;       /* --stroke-08 兜底 */
border-radius: 6px !important;
background: rgba(255, 255, 255, 0.05) !important;             /* --bg-panel-card 兜底 */
white-space: pre-wrap;
}

.aigen-text-output code {
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
font-size: 0.92em !important;
}
.aigen-text-output :not(pre) > code {
padding: 0.08em 0.32em;
border-radius: 4px !important;
background: rgba(255, 255, 255, 0.05) !important;             /* --bg-panel-card 兜底 */
}

.aigen-text-output table {
width: 100% !important;
border-collapse: collapse;
table-layout: auto;
}
.aigen-text-output th,
.aigen-text-output td {
padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, 0.10) !important;       /* --stroke-10 兜底 */
vertical-align: top;
text-align: left;
overflow-wrap: anywhere;
}
.aigen-text-output th {
color: var(--strong-text, var(--text-main, #e5e7eb)) !important;
font-weight: 700 !important;
background: rgba(255, 255, 255, 0.05) !important;             /* --bg-panel-card 兜底 */
}

/* ============================================================
 §6  骨架屏占位 + shimmer 扫光
 标杆 .aigen-text-placeholder::after 渐变骨架条；图片 loading shimmer。
 —— 纯装饰伪元素 / 覆盖层，pointer-events:none，不拦交互。
 ============================================================ */

/* 文本骨架：多行渐变占位条（标杆 .aigen-text-placeholder::after） */
.shell .node .aigen-text-placeholder,
.aigen-text-placeholder {
position: relative;
}
.shell .node .aigen-text-placeholder::after,
.aigen-text-placeholder::after {
content: "";
position: absolute;
inset: 8px 4px;
pointer-events: none;
opacity: 0.7;
border-radius: 6px !important;
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 22px / 94% 8px  no-repeat,
  linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) 0 40px / 86% 8px  no-repeat,
  linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) 0 58px / 58% 8px  no-repeat !important;
animation: ld-skeleton-pulse 1.6s ease-in-out infinite;
}

@keyframes ld-skeleton-pulse {
0%, 100% { opacity: 0.45; }
50%      { opacity: 0.85; }
}

/* 图片 loading shimmer 扫光条（标杆 .img-loading-shimmer / img-shimmer-sweep） */
.shell .node .img-loading-shimmer,
.img-loading-shimmer {
position: absolute;
top: 0;
bottom: 0;
width: 55% !important;
pointer-events: none;
/* 标杆 --loading-overlay-shimmer-bg 兜底：斜向白色高光带 */
background: linear-gradient(
  100deg,
  transparent 0%,
  rgba(255, 255, 255, 0.14) 50%,
  transparent 100%
) !important;
animation: img-shimmer-sweep 1.4s ease-in-out infinite;
will-change: transform;
}

@keyframes img-shimmer-sweep {
0%   { transform: translateX(-120%); }
100% { transform: translateX(200%); }
}


/* ============================================================
   EOF node-ui-batch1.css
   ============================================================ */