Add light and dark canvas themes with floating dock and contextual actions

apps/studio/src/styles/infinite-canvas.module.css

@@ -4,3 +4,6 @@
 .card{overflow:visible}.cardBody{overflow:hidden}.inputPort,.outputPort{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border:2px solid #1a1d20;border-radius:50%;background:#d9ef9b;pointer-events:none}.inputPort{left:-5px}.outputPort{right:-5px}.cardHead:active{cursor:grabbing}
 /* Full-screen canvas: chrome floats above the world and never reserves layout space. */
 .app{height:100dvh;min-height:0;overflow:hidden}.workspace{position:absolute;inset:0;height:100%;display:block}.canvasArea{position:absolute;inset:0;width:100%;height:100%;background:none}.viewport{inset:0;background-color:#16191c;background-image:radial-gradient(circle,#556068 1px,transparent 1px);background-size:24px 24px}.canvasTitle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.header{position:absolute;z-index:5;top:16px;left:16px;right:auto;height:48px;max-width:calc(100% - 32px);padding:6px 10px;gap:12px;background:#202529eb;border:1px solid #424a51;border-radius:12px;box-shadow:0 8px 24px #0003;backdrop-filter:blur(12px)}.header strong,.header>i,.header .crumb,.header .badge{display:none}.header .brand{font-size:14px}.header .brand span{font-size:18px}.header a[href='/account']{font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .export{padding:8px}.rail{position:absolute;z-index:4;left:16px;top:50%;transform:translateY(-50%);width:48px;height:auto;padding:6px;gap:5px;border:1px solid #424a51;border-radius:12px;background:#202529eb;box-shadow:0 8px 24px #0003;backdrop-filter:blur(12px)}.rail button{width:34px;height:34px;padding:8px}.rail>.spacer,.rail>span{display:none}.rail hr{margin:3px}.canvasBottom{z-index:3;bottom:16px;left:16px;right:16px;pointer-events:none;flex-direction:row;align-items:center}.canvasBottom>span{max-width:none;padding:7px 10px;border-radius:7px;background:#202529c9}.controls{pointer-events:auto}.inspector{display:none;position:absolute;z-index:4;top:76px;left:16px;width:280px;max-height:calc(100dvh - 160px);height:auto;border:1px solid #424a51;border-radius:12px;padding:0 18px 20px;box-shadow:0 12px 32px #0005}.inspectorOpen{display:block}.inspectorClosed{display:none}.panelHeading{height:48px;margin-bottom:18px}.inspector h2{font-size:16px;margin-bottom:16px}.inspector .help{margin-top:18px}@media(max-width:700px){.header{top:10px;left:10px;max-width:calc(100% - 20px);gap:8px}.header>a:not(.brand):not(.back){display:none}.header .brand{font-size:12px}.header .export{font-size:11px}.rail{left:10px}.canvasBottom{left:10px;right:10px;bottom:10px;align-items:flex-end;gap:6px}.canvasBottom>span{max-width:110px;font-size:9px}.controls{gap:1px}.controls button{padding:6px}.inspector{left:10px;top:68px;width:min(280px,calc(100vw - 20px))}}
+/* Dock and contextual actions leave both sides of the canvas clear. */
+.rail{left:50%;top:auto;bottom:18px;transform:translateX(-50%);width:auto;height:58px;flex-direction:row;padding:7px 10px;gap:8px;border-radius:19px}.rail hr{width:1px;height:27px;border:0;background:#465059}.rail button{width:40px;height:40px;border-radius:11px;transition:transform .16s,background .16s}.rail button:hover{transform:translateY(-5px) scale(1.08)}.canvasBottom{top:16px;bottom:auto;left:auto;right:16px;flex-direction:column;align-items:flex-end}.canvasBottom>span{display:none}.contextMenu{position:absolute;z-index:10;width:240px;max-height:min(420px,calc(100dvh - 24px));overflow:auto;padding:8px;background:#252b30f5;border:1px solid #47525b;border-radius:14px;box-shadow:0 16px 50px #0005;backdrop-filter:blur(18px)}.contextMenu>button{display:flex;width:100%;justify-content:flex-start;border:0;background:transparent}.menuTitle{display:flex;align-items:center;justify-content:space-between;padding:3px 6px 8px;font-size:11px;color:#aebac4}.menuTitle button{padding:3px 8px}.contextMenu label{display:block;padding:8px;font-size:11px}.contextMenu select{display:block;width:100%;padding:8px;margin-top:6px;background:#171c20;color:inherit;border:1px solid #46515a;border-radius:6px}.card footer{display:flex;align-items:center;justify-content:space-between;padding:7px 12px}.card footer button{padding:2px 8px;border:0;background:transparent}.app[data-theme=light]{color-scheme:light;color:#25323b;background:#f5f6f8}.app[data-theme=dark]{color-scheme:dark}.app[data-theme=light] .viewport{background-color:#f5f6f8;background-image:radial-gradient(circle,#b8c3cc 1px,transparent 1px)}.app[data-theme=light] .header,.app[data-theme=light] .rail,.app[data-theme=light] .controls,.app[data-theme=light] .contextMenu{background:#ffffffed;border-color:#d3dce3;box-shadow:0 8px 28px #3c52601a}.app[data-theme=light] button{background:#edf1f4;border-color:#d5dfe5;color:#344650}.app[data-theme=light] button:hover{background:#dde6eb}.app[data-theme=light] .card{background:#fff;border-color:#b8c8d2;box-shadow:0 10px 30px #31465918}.app[data-theme=light] .cardHead{background:#eef3f6;color:#405663}.app[data-theme=light] .cardBody input,.app[data-theme=light] .cardBody textarea,.app[data-theme=light] .contextMenu select{background:#f7f9fa;color:#243641;border-color:#d6e0e6}.app[data-theme=light] .nodeType,.app[data-theme=light] .disconnected,.app[data-theme=light] .menuTitle{color:#567047}.app[data-theme=light] .selected{border-color:#60863b}.app[data-theme=light] .card footer{border-color:#e1e7eb;color:#526878}.app[data-theme=light] .wires path{stroke:#628e3e;opacity:.9}.app[data-theme=light] .brand span{color:#60863b}.app[data-theme=light] .rail button[aria-pressed=true]{background:#d8e9c4;color:#34501d}@media(max-width:700px){.rail{left:50%;bottom:12px;gap:4px;height:54px;padding:5px 8px}.rail button{width:36px;height:36px}.canvasBottom{top:70px;right:10px;bottom:auto}.controls{gap:0}.controls button{padding:5px}}
+.rail button{background:transparent;color:#bfcbd3}.rail button[aria-pressed=true]{background:#d9ef9b;color:#24301d}.app[data-theme=light] .rail button{background:transparent;color:#405663}.app[data-theme=light] .rail button[aria-pressed=true]{background:#d8e9c4;color:#34501d}