.canvas-panel-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: nowrap;
  color: rgba(255,255,255,0.48);
  font-size: 13px;
}

/* 统一发送按钮（图片/视频生成面板）：与创作页 .btn-send 同款的半透明白圆角方块，
   38px 方形纯图标尺寸；配色由主题层最终覆盖，这里定义几何与兜底材质。 */
.canvas-panel-run {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 38px;
  height: 38px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-color: transparent !important;
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
}

.canvas-panel-run.is-running {
  border-color: rgba(255,255,255,0.2) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.2), rgba(255,255,255,0.08)) !important;
  background-size: 220% 100% !important;
  color: rgba(255,255,255,0.9) !important;
  cursor: not-allowed;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  animation: canvasRunGlow 1.35s ease-in-out infinite;
}

.canvas-panel-run.is-running::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.18) 44%, transparent 62%);
  transform: translateX(-120%);
  animation: canvasRunSweep 1.7s ease-in-out infinite;
  pointer-events: none;
}

.canvas-panel-run .canvas-strands-wait.is-button {
  flex: 0 0 auto;
  width: 28px;
  height: 18px;
  gap: 0;
}

.canvas-panel-run .canvas-strands-wait.is-button .canvas-strands-pulse {
  height: 12px;
  gap: 3px;
}

.canvas-panel-run .canvas-strands-wait.is-button .canvas-strands-pulse i {
  width: 3px;
  height: 10px;
}

@keyframes canvasRunSweep {
  0% { transform: translateX(-120%); }
  58%, 100% { transform: translateX(130%); }
}

@keyframes canvasRunGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.canvas-panel-info {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 8px 12px;
  color: rgba(255,255,255,0.62);
  font-size: 13px;
}

.canvas-panel-info code {
  overflow: hidden;
  color: rgba(255,255,255,0.86);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-marquee {
  position: absolute;
  z-index: 35;
  border: 1px solid rgba(56,189,248,0.85);
  background: rgba(56,189,248,0.12);
  pointer-events: none;
}

.canvas-context-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.canvas-context-tabs,
.canvas-context-actions,
.canvas-context-settings {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.canvas-context-settings {
  min-width: 0;
  flex: 1 1 auto;
  /* 数量 等无标题控件与带标题控件底边对齐，避免居中后错位 */
  align-items: flex-end;
}

.canvas-context-actions {
  flex: 0 0 auto;
}

/* Points-cost chip — unified with the Create-page reference style:
   dark pill, 1px white 10% border, muted text, near-white value/icon. */
.canvas-point-cost-preview {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: #181818;
  color: #a3a3a3;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
  font-size: 13px;
  white-space: nowrap;
}

.canvas-point-cost-preview strong {
  color: #f5f5f5;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.canvas-point-cost-icon {
  color: #f5f5f5;
  font-size: 14px;
  line-height: 1;
}

.canvas-context-tab {
  min-width: 62px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.canvas-context-tab .ui-icon {
  width: 15px;
  height: 15px;
  margin-right: 0;
}

.canvas-context-tab-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.canvas-context-tab.active {
  border-color: rgba(147,197,253,0.55);
  background: rgba(56,189,248,0.12);
  color: #fff;
}

/* Folded capability picker: the trigger is a compact fixed slot next to the primary
   tab (user-specified 215px width), and the expanded option grid renders on <body>
   so the clipped panel box never cuts it. */
.canvas-capability-picker {
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
}

.canvas-capability-trigger {
  width: auto;
  min-width: 215px;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  cursor: pointer;
  text-align: left;
}

.canvas-capability-trigger-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.canvas-capability-trigger-icon .ui-icon {
  width: 16px;
  height: 16px;
}

.canvas-capability-trigger-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-capability-trigger-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.canvas-capability-trigger-arrow .ui-icon {
  width: 15px;
  height: 15px;
}

.canvas-capability-picker.is-open .canvas-capability-trigger-arrow {
  transform: rotate(180deg);
}

/* Authoritative option list kept in the panel markup; the menu is built from it. */
.canvas-capability-source {
  display: none;
}

.canvas-capability-menu {
  position: fixed;
  z-index: 1400;
  box-sizing: border-box;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: left top;
}

.canvas-capability-menu.is-dropup {
  transform-origin: left bottom;
}

.canvas-capability-menu-grid {
  display: grid;
  grid-template-columns: repeat(var(--capability-menu-columns, 3), minmax(0, 1fr));
  gap: 6px;
}

.canvas-capability-option {
  position: relative;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 8px 10px;
  cursor: pointer;
  text-align: center;
}

.canvas-capability-option-icon {
  display: inline-flex;
}

.canvas-capability-option-icon .ui-icon {
  width: 22px;
  height: 22px;
}

/* Capability names wrap to at most two lines instead of ellipsizing. The
   电商功能 sub-feature names are marketing names (淘宝一键套图) and must stay
   whole; the 电商 menu also drops to two columns (see
   data-capability-max-columns in renderers/node-panel.js) so the common case
   still fits one line. A cell that does wrap grows past the 74px floor and the
   grid row stretches its neighbours, so the menu stays a clean grid. */
.canvas-capability-option-label {
  max-width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  overflow: hidden;
  overflow-wrap: break-word;
}

.canvas-capability-option-check {
  position: absolute;
  top: 6px;
  right: 7px;
  display: inline-flex;
}

.canvas-capability-option-check .ui-icon {
  width: 13px;
  height: 13px;
}

/* 电商功能 — standalone folded module sitting next to 图像功能 on image
   nodes. It shares the row's leftover width (no fixed 215px floor) and lets
   its label ellipsize, so the two triggers coexist even at the narrow
   360px panel without wrapping. */
.canvas-ecommerce-picker {
  flex: 1 1 auto;
}

.canvas-ecommerce-picker .canvas-capability-trigger {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

/* Empty-module placeholder cell (a picker that ships with an empty option
   list, e.g. 电商功能 before its sub-features land): one inert row so the
   folded trigger still opens a real menu. */
.canvas-capability-option-empty {
  cursor: default;
  pointer-events: none;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  min-height: 64px;
}

.canvas-capability-option-empty .canvas-capability-option-icon .ui-icon {
  color: rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .canvas-capability-trigger-arrow,
  .canvas-capability-menu {
    transition: none;
    animation: none;
  }
}

.canvas-context-title {
  min-width: 0;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-context-title input {
  width: 180px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  background: transparent;
  color: #fff;
  padding: 4px 0;
  outline: none;
  font: inherit;
}

.canvas-context-prompt {
  width: 100%;
  min-height: 72px;
  max-height: 180px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.82);
  outline: none;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  padding-right: 6px;
}

.canvas-context-prompt::placeholder {
  color: rgba(255,255,255,0.38);
}

.canvas-context-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 10px;
}

.canvas-context-select,
.canvas-context-input {
  width: 124px;
  min-width: 0;
  max-width: 124px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  padding: 0 12px;
}

.canvas-context-select {
  appearance: none;
  cursor: pointer;
}

.canvas-context-select option {
  background: #1a1a1f;
}

.canvas-context-input {
  text-align: center;
}

.canvas-context-select-model {
  width: 170px;
  flex: 1 1 170px;
  max-width: 190px;
}

.canvas-context-select-count {
  width: 86px;
  flex: 0 0 86px;
  max-width: 86px;
}

.canvas-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.canvas-composer-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.canvas-composer-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.canvas-composer-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.canvas-composer-title > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.canvas-composer-title .canvas-panel-title-input {
  width: min(280px, 100%);
  height: 22px;
  margin: 0;
  padding: 0;
}

.canvas-composer-title > div > span {
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.canvas-panel-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  padding: 0 !important;
}

.canvas-panel-close .ui-icon {
  width: 16px;
  height: 16px;
}

.canvas-composer-field-head {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px;
}

.canvas-composer-field-head span {
  font-size: 12px;
  font-weight: 720;
}

.canvas-composer-field-head small {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-param-control {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.canvas-param-control > span {
  padding-left: 2px;
  font-size: 9px;
  font-weight: 700;
}

.canvas-param-control .canvas-context-select {
  height: 40px;
}

.canvas-panel-run-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.canvas-panel-run-icon,
.canvas-panel-run-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.canvas-point-cost-icon,
.canvas-point-cost-icon .ui-icon {
  width: 14px;
  height: 14px;
}

/* 预留的统一发送按钮类：与创作页 .btn-send 同款材质。 */
.canvas-send-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}

.canvas-send-btn:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.canvas-context-tool {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.canvas-context-tool:hover {
  color: #93c5fd;
}

.canvas-context-muted {
  color: rgba(255,255,255,0.44);
  font-size: 13px;
}