.canvas-page .canvas-user-area .dropdown-item:focus-visible .ui-icon {
  color: #a3a3a3 !important;
}

.canvas-page .canvas-user-area .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.067) !important;
}

.canvas-page .canvas-user-area .dropdown-item-danger:hover,
.canvas-page .canvas-user-area .dropdown-item-danger:focus-visible {
  background: rgba(242, 125, 125, 0.1) !important;
  color: #ffc0bd !important;
}

.canvas-page .canvas-user-area .dropdown-item-danger:hover .ui-icon,
.canvas-page .canvas-user-area .dropdown-item-danger:focus-visible .ui-icon {
  color: #f27d7d !important;
}

/* TapNow loading button: the bundle uses a 16px spinner at 1s linear infinite.
   半透明白发送按钮上的 spinner 用浅色描边，与创作页发送按钮提交态一致。 */
.canvas-page .canvas-panel-run .canvas-strands-wait.is-button {
  position: relative;
}

.canvas-page .canvas-panel-run .canvas-strands-wait.is-button .canvas-strands-pulse {
  visibility: hidden;
}

.canvas-page .canvas-panel-run .canvas-strands-wait.is-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid rgba(245, 245, 245, 0.28);
  border-top-color: #f5f5f5;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: canvasTapnowSpinner 1s linear infinite;
}

@keyframes canvasTapnowSpinner {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*
 * TapNow v2.13.14 add-node menu mapped onto the existing Canvas markup.
 * The local popup keeps its established geometry; material, states, and motion
 * come from TapNow's colorfulCard, CommandItem, and right-side Popover.
 */
.canvas-page .canvas-node-menu {
  isolation: isolate;
  overflow: hidden;
  border-color: #3f3f46;
  border-radius: 12px;
  background: #18181b;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: canvasTapnowMenuIn 150ms ease both;
}

.canvas-page .canvas-node-menu::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 28% 45% at 111% 78%, #0093ff, transparent 100%),
    radial-gradient(ellipse 58% 25% at 69% 108%, #0093ff, transparent 100%),
    radial-gradient(ellipse 29% 35% at 90% 98%, #f15b0e, transparent 100%),
    radial-gradient(ellipse 20% 23% at 6% 1%, #f15b0e, transparent 100%),
    rgba(63, 63, 70, 0.6);
  filter: blur(64px);
  opacity: 0.2;
  pointer-events: none;
}

.canvas-page .canvas-node-menu-title {
  color: #7a7a7a;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.canvas-page .canvas-node-menu button {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  border-radius: 12px;
  background: transparent;
  color: #cccccc;
  box-shadow: none;
  transition-property: color, background-color, border-color, opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.canvas-page .canvas-node-menu button:hover,
.canvas-page .canvas-node-menu button:focus-visible {
  border-color: transparent;
  background: rgba(64, 64, 64, 0.5);
  color: #cccccc;
  box-shadow: none;
  transform: none;
}

.canvas-page .canvas-node-menu button span {
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(64, 64, 64, 0.4);
  color: #cccccc;
  font-weight: 500;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.canvas-page .canvas-node-menu button:hover span,
.canvas-page .canvas-node-menu button:focus-visible span {
  color: #cccccc;
}

.canvas-page .canvas-node-menu button b {
  color: #cccccc;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
}

@keyframes canvasTapnowMenuIn {
  from {
    opacity: 0;
    transform: translate3d(-8px, 0, 0) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-page .canvas-node-menu {
    animation: none;
  }

  .canvas-page .canvas-panel-run .canvas-strands-wait.is-button::before {
    animation: none;
  }
}

/* ---- tapnow 文本节点：单卡片 + 选中后下方 AI 卡（对齐图片节点工作流工具栏模式） ---- */
.canvas-page .canvas-node.canvas-node-text,
.canvas-page .canvas-node.canvas-node-text.hovered:not(.selected),
.canvas-page .canvas-node.canvas-node-text.selected,
.canvas-page .canvas-node.canvas-node-text.is-dragging:not(.selected) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.canvas-page .canvas-node-text .canvas-text-card {
  border-color: rgba(255, 255, 255, 0.2);
  background: #1f1f1f;
  box-shadow: none;
}

.canvas-page .canvas-node-text.hovered:not(.selected) .canvas-text-card {
  border-color: rgba(255, 255, 255, 0.45);
}

.canvas-page .canvas-node-text.selected .canvas-text-card {
  border-color: rgb(122, 122, 122);
  box-shadow: 0 0 0 1px rgb(122, 122, 122);
}

.canvas-page .canvas-node-text .canvas-text-ai-card {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(31, 31, 31, 0.96);
}

.canvas-page .canvas-node-text .canvas-text-composer .canvas-text-card .canvas-text-editor-shell,
.canvas-page .canvas-node-text .canvas-text-composer .canvas-text-card .canvas-text-editor-shell:focus-within {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Focus cue for the text-node AI composer, mirroring the image-node panel:
   the card edge brightens instead of any inner field ring. */
.canvas-page .canvas-node-text .canvas-text-ai-card:focus-within {
  border-color: rgba(255, 255, 255, 0.36);
}

/* Audio-node hover/focus borders keep the graphite language (legacy purple). */
.canvas-page .canvas-audio-upload:hover,
.canvas-page .canvas-audio-upload:focus-visible,
.canvas-page .canvas-audio-action:hover,
.canvas-page .canvas-audio-action:focus-visible,
.canvas-page .canvas-audio-reselect:hover,
.canvas-page .canvas-audio-reselect:focus-visible {
  border-color: rgba(255, 255, 255, 0.45);
}

/* ---- 折叠的功能选择器：触发器沿用能力槽材质，展开层为两排图标网格 ---- */
.canvas-page .canvas-capability-trigger {
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--canvas-text-soft);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  transition: color var(--canvas-motion-fast), background var(--canvas-motion-fast), box-shadow var(--canvas-motion-fast);
}

.canvas-page .canvas-capability-trigger:hover,
.canvas-page .canvas-capability-picker.is-open .canvas-capability-trigger {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.07);
  color: var(--canvas-text);
  box-shadow: none;
}

/* 生成面板的能力槽是一组分段控件：常驻项与折叠触发器共用同一标签尺寸 */
.canvas-page .is-image-generation-panel .canvas-capability-primary,
.canvas-page .is-image-generation-panel .canvas-capability-trigger {
  font-size: 12px;
}

.canvas-page .canvas-capability-trigger:focus-visible {
  outline: none;
  box-shadow: var(--canvas-focus-ring);
}

.canvas-page .canvas-capability-trigger.active {
  border-color: transparent;
  background: #4a4a4a;
  color: #f5f5f5;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12), 0 4px 4px rgba(0, 0, 0, 0.04);
}

.canvas-page .canvas-capability-trigger.is-empty {
  color: var(--canvas-text-muted);
}

.canvas-page .canvas-capability-trigger-arrow .ui-icon {
  color: var(--canvas-text-muted);
}

.canvas-page .canvas-capability-trigger:hover .canvas-capability-trigger-arrow .ui-icon,
.canvas-page .canvas-capability-trigger.active .canvas-capability-trigger-arrow .ui-icon {
  color: rgba(255, 255, 255, 0.7);
}

.canvas-page .canvas-capability-menu {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--canvas-radius-sm);
  background: #1c1c1e;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  animation: canvasCapabilityMenuIn 170ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.canvas-page .canvas-capability-menu.is-dropup {
  animation-name: canvasCapabilityMenuUp;
}

.canvas-page .canvas-capability-option {
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--canvas-text-soft);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 600;
  transition: color var(--canvas-motion-fast), background var(--canvas-motion-fast), box-shadow var(--canvas-motion-fast);
}

.canvas-page .canvas-capability-option:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  color: var(--canvas-text);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}

.canvas-page .canvas-capability-option.is-keyboard-active:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: var(--canvas-text);
}

.canvas-page .canvas-capability-option:focus-visible {
  outline: none;
  box-shadow: var(--canvas-focus-ring);
}

.canvas-page .canvas-capability-option.is-selected {
  background: #4a4a4a;
  color: #f5f5f5;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}

.canvas-page .canvas-capability-option.is-selected:hover {
  background: #565656;
}

.canvas-page .canvas-capability-option:disabled,
.canvas-page .canvas-capability-option:disabled:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  cursor: not-allowed;
}

@keyframes canvasCapabilityMenuIn {
  from {
    opacity: 0;
    transform: translate3d(0, -5px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes canvasCapabilityMenuUp {
  from {
    opacity: 0;
    transform: translate3d(0, 5px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-page .canvas-capability-menu {
    animation: none;
  }
}