/* Workspace skin for the existing board; restrained evergreen accents. */
body.canvas-view {
  --canvas-bg: #111514;
  --canvas-surface: #202725;
  --canvas-line: #3b4741;
  --canvas-muted: #a9b8ae;
  --canvas-accent: #c3d7a5;
}
body.canvas-view .atelier-stage { padding: 0; background: var(--canvas-bg); }
body.canvas-view .topbar { min-height: calc(60px + var(--safe-top)); padding: var(--safe-top) max(20px,var(--safe-right)) 0 max(20px,var(--safe-left)); background: #1b2320; border-bottom: 1px solid var(--canvas-line); }
body.canvas-view .library-search { background: #26312b; border-color: #45534a; color: #b6c9bc; }
body.canvas-view .library-search input { color: #eef3eb; }
body.canvas-view .redeem-trigger { color:#dce8dc; }
body.canvas-view .canvas-section { border-radius: 0; background: var(--canvas-bg); }
.canvas-workspace-header { position: absolute; top: 0; left: 0; right: 0; height: 58px; padding: 16px 24px; display:flex; align-items:center; justify-content:space-between; color:#e5eee7; background:linear-gradient(#111514f5,#11151400); pointer-events:none; z-index:4; }
.canvas-workspace-header strong { font-size:14px; font-weight:600; letter-spacing:.05em; }
#canvas-selection-count { margin-left:16px; color:var(--canvas-muted); font-size:12px; }
#canvas-save-status { color:var(--canvas-muted); font-size:11px; }
.canvas-world { will-change:transform; }
.canvas-edges { left:0; top:0; width:1px; height:1px; overflow:visible; }
.canvas-edges path.edge-line { stroke:#9cbba1; stroke-width:2; }
.canvas-edges path.edge-temp { stroke:var(--canvas-accent); }
.canvas-edges g.edge-selected path.edge-line { stroke:#e9d58c; stroke-width:3; }
.canvas-viewport { overscroll-behavior:none; }
.canvas-viewport[data-tool="select"] { cursor:crosshair; }
.canvas-viewport[data-tool="hand"],.canvas-viewport.space-pan { cursor:grab; }
.canvas-viewport.is-panning,.canvas-viewport.is-panning * { cursor:grabbing!important; }
.canvas-viewport:focus-visible { box-shadow:inset 0 0 0 2px #829e76; }
.canvas-node { border-radius:12px; border-color:var(--canvas-line); background:var(--canvas-surface); box-shadow:0 4px 16px #0003; cursor:grab; }
.canvas-node.is-selected { border-color:var(--canvas-accent); box-shadow:0 0 0 1px var(--canvas-accent),0 5px 20px #0003; }
.canvas-node.is-link-target { border-color:#dfebc8; box-shadow:0 0 0 4px #c3d7a533; }
.canvas-node-head { min-height:40px; padding:10px 12px; }
.canvas-node-title { color:#e2ebe5; font-size:12px; }
.canvas-node-image { width:calc(100% - 20px); border-radius:8px; min-height:150px; margin:0 10px 10px; cursor:grab; }
.canvas-node-image img { pointer-events:none; }
.canvas-node-empty { min-height:150px; color:#a4b1a9; gap:14px; }
.canvas-node-close { min-width:28px; min-height:28px; }
.canvas-port { width:24px; height:24px; padding:0; border:2px solid #9fae9e; background:#26332b; color:#dcebc8; z-index:3; touch-action:none; }
.canvas-port:hover,.canvas-port:focus-visible { background:#dcebc8; border-color:#dcebc8; color:#183322; transform:translateY(-50%) scale(1.12); }
.canvas-port.port-left { left:-13px; }
.canvas-port.port-right { right:-13px; }
.canvas-tools { top:calc(72px + var(--safe-top)); left:max(20px,var(--safe-left)); right:auto; bottom:auto; z-index:6; padding:6px; background:#202725f2; border:1px solid var(--canvas-line); border-radius:12px; gap:2px; }
.canvas-tool { min-width:42px; min-height:36px; padding:7px; box-shadow:none; border-color:transparent; background:transparent; border-radius:7px; font-size:12px; color:#c4d0c7; }
.canvas-tool:hover { background:#34433a; border-color:transparent; }
.canvas-tool[aria-pressed="true"] { background:#c3d7a5; color:#1b3526; }
.canvas-tool-divider { height:1px; width:28px; background:var(--canvas-line); margin:4px 0; }
.canvas-tool-danger { color:#daa899; }
.canvas-fab { top:calc(72px + var(--safe-top)); right:max(24px,var(--safe-right)); left:auto; bottom:auto; width:44px; height:44px; border:1px solid #d4e2ba; background:#c3d7a5; color:#203b2a; border-radius:12px; box-shadow:0 4px 16px #0003; }
.canvas-fab:hover { background:#d5e5bf; }
.canvas-empty { display:flex; flex-direction:column; gap:12px; max-width:70%; text-align:center; color:#a1afa5; pointer-events:none; border:0; border-radius:0; background:none; white-space:normal; }
.canvas-empty strong { font-size:32px; font-weight:500; color:#dde9df; letter-spacing:.08em; }
.canvas-empty span { font-size:14px; }
.canvas-empty small { font-size:12px; color:#899e90; }
.canvas-hint { top:auto; bottom:16px; left:96px; max-width:calc(100% - 120px); color:#a3b3a8; font-size:11px; z-index:4; }
.canvas-section:has(.canvas-panel:not([hidden])) .canvas-hint { display:none; }
.canvas-panel { position:absolute; left:50%; top:auto; bottom:20px; transform:translateX(-50%); width:min(740px,calc(100% - 200px)); max-height:45%; overflow:visible; border-radius:14px; border:1px solid #4a594e; background:#202925f5; box-shadow:0 8px 32px #0005; z-index:7; }
.canvas-panel-prompt { width:100%; color:#f0f4ec; border-bottom-color:#3b4b40; min-height:44px; }
.canvas-panel-row { flex-wrap:wrap; gap:8px; }
.canvas-panel-status { max-width:160px; }
.canvas-panel-thumbs { max-height:70px; overflow:auto; }
.canvas-send { background:#c3d7a5; color:#1e3727; min-width:38px; min-height:38px; }
.canvas-panel .canvas-pop { top:auto; bottom:calc(100% + 10px); max-height:min(360px,45vh); overflow-y:auto; }
.canvas-panel .canvas-pop[hidden] { display:none; }
.canvas-section button:focus-visible { outline:2px solid #dcebc8; outline-offset:3px; }
@media (max-width:1100px) {
  body.canvas-view .topbar { min-height:58px; padding:0 12px; }
  .canvas-workspace-header { padding:12px 16px; }
  #canvas-save-status { max-width:180px; text-align:right; }
  .canvas-panel { width:calc(100% - 120px); left:calc(50% + 30px); }
}
@media (max-width:600px) {
  body.canvas-view .topbar .library-search { display:none; }
  .canvas-workspace-header { height:48px; padding:10px 12px; }
  .canvas-workspace-header strong { font-size:13px; }
  #canvas-selection-count { margin-left:8px; font-size:11px; }
  #canvas-save-status { max-width:112px; font-size:10px; line-height:1.5; }
  .canvas-tools { left:8px; top:58px; padding:4px; max-height:calc(100% - 80px); overflow-y:auto; scrollbar-width:none; }
  .canvas-tool { min-width:44px; min-height:44px; padding:7px; font-size:11px; }
  .canvas-fab { top:58px; right:12px; width:44px; height:44px; }
  .canvas-panel {
    left:50%;
    width:calc(100% - max(16px,var(--safe-left) + var(--safe-right)));
    bottom:max(8px,var(--safe-bottom));
    padding:12px 12px calc(64px + var(--safe-bottom));
    max-height:min(58%,320px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .canvas-panel-prompt { font-size:14px; }
  .canvas-panel-row { gap:6px; }
  .canvas-panel .canvas-price {
    position:absolute;
    right:70px;
    bottom:25px;
    max-width:calc(100% - 92px);
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .canvas-panel .canvas-send {
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:2;
  }
  .canvas-panel .canvas-pop { position:static; margin-top:8px; width:100%; max-height:180px; }
  .canvas-hint { left:62px; right:12px; bottom:12px; max-width:none; font-size:10px; line-height:1.8; }
  .canvas-empty { left:72px; right:12px; max-width:none; padding:12px 8px; transform:translateY(-50%); }
  .canvas-empty strong { font-size:24px; }
  .canvas-empty span { font-size:12px; }
  .canvas-empty small { font-size:10px; }
}
@media (max-height:560px) and (pointer:coarse) {
  .canvas-panel {
    bottom:8px;
    padding-bottom:64px;
    max-height:min(68%,300px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .canvas-panel .canvas-price {
    position:absolute;
    right:70px;
    bottom:25px;
    max-width:calc(100% - 92px);
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .canvas-panel .canvas-send {
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:2;
  }
}
@media (pointer:coarse) {
  .canvas-tool,.canvas-fab,.canvas-send,.canvas-node-close,.canvas-node-overlay,.canvas-panel-thumb-add { min-width:44px; min-height:44px; }
  .canvas-port { width:44px; height:44px; border:0; background:transparent; }
  .canvas-port::before { content:""; position:absolute; width:24px; height:24px; border:2px solid #9fae9e; border-radius:50%; background:#26332b; }
  .canvas-port:hover,.canvas-port:focus-visible { border:0; background:transparent; transform:translateY(-50%); }
  .canvas-port:hover::before,.canvas-port:focus-visible::before { border-color:#dcebc8; background:#dcebc8; transform:scale(1.12); }
  .canvas-port.port-left { left:-23px; }
  .canvas-port.port-right { right:-23px; }
}
@media (prefers-reduced-motion:reduce) { .canvas-section * { transition:none!important; } }
/* Wan shares the existing composer, wallet and task lifecycle. */
.canvas-fab-video { top:calc(124px + var(--safe-top)); width:auto; min-width:76px; padding:0 12px; font-size:12px; }
.canvas-panel textarea.canvas-panel-prompt { display:block; resize:vertical; max-height:140px; padding-top:12px; line-height:1.5; font-family:inherit; }
.canvas-video-duration { display:flex; align-items:center; gap:5px; color:#c4d0c7; font-size:12px; }
.canvas-video-duration select { min-height:32px; max-width:94px; padding:4px 7px; border:1px solid #4a594e; border-radius:6px; background:#26332b; color:#e2ebe5; }
.canvas-video-refs { display:flex; align-items:center; gap:7px; flex-wrap:wrap; max-height:130px; overflow:auto; margin:0 0 8px; padding:5px; border:1px dashed #4a594e; border-radius:8px; }
.canvas-video-refs[hidden],.canvas-video-duration[hidden],.canvas-video-notice[hidden] { display:none; }
.canvas-video-refs.is-drop-active { background:#c3d7a51c; border-color:#c3d7a5; }
.canvas-video-ref-count { color:#a9b8ae; font-size:11px; }
.canvas-video-reference { max-width:180px; display:flex; align-items:center; gap:5px; padding:4px; border:1px solid #425447; border-radius:7px; font-size:11px; color:#dce8dc; }
.canvas-video-reference img { width:36px; height:36px; border-radius:4px; object-fit:cover; }
.canvas-video-reference span { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.canvas-video-reference button { flex-shrink:0; min-width:26px; min-height:28px; background:transparent; border:0; color:#dce8dc; cursor:pointer; }
.canvas-video-reference-message,.canvas-video-notice { font-size:11px; line-height:1.5; color:#a9b8ae; }
.canvas-video-notice { margin:0 0 8px; }
.canvas-node-video-media { margin:0 10px 10px; min-height:150px; border-radius:8px; overflow:hidden; background:#14201b; }
.canvas-node-video-media video { display:block; width:100%; max-height:320px; background:#101511; cursor:auto; }
.canvas-node-video-media .canvas-node-empty { padding:18px 12px; text-align:center; font-size:12px; line-height:1.6; }
.canvas-node-video-media .canvas-node-empty span { max-width:254px; overflow-wrap:anywhere; }
.canvas-node-video-media > button { display:block; margin:8px auto; color:#dce8dc; }
.canvas-node.is-unknown .canvas-node-status { background:#e1b969; }
.canvas-panel button:disabled { cursor:default; opacity:.55; }
@media (max-width:600px) {
  .canvas-fab-video { top:110px; width:76px; }
  .canvas-video-refs { max-height:100px; }
  .canvas-video-reference { max-width:150px; }
  .canvas-video-reference span { max-width:90px; }
}

.canvas-node-video-media .canvas-video-elapsed { display:block; padding:5px 10px 9px; color:#c8ddcb; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }

.video-runtime { margin: 4px 0 0; color: #52715d; font-size: 12px; font-variant-numeric: tabular-nums; }