/* Canvas Workspace Styles */
/* TouchDesigner-style Network Editor following gatito-cheer specifications */

.canvas-workspace {
    position: relative;
    width: 100%;
    height: 100%;
    background: #161616;
    overflow: hidden;
    cursor: default;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.canvas-workspace.panning {
    cursor: grabbing;
}

.canvas-workspace.panning-active {
    cursor: grabbing !important;
}

.canvas-workspace-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.canvas-workspace-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.canvas-workspace-svg.grid-layer {
    pointer-events: none;
}

.canvas-workspace-svg.wire-layer {
    pointer-events: none;
}

.canvas-workspace-svg.node-layer {
    pointer-events: all;
}

/* Grid background */
.grid-pattern {
    fill: #222;
}

/* Node styles */
.canvas-node {
    cursor: move;
    user-select: none;
    transition: filter 0.1s;
}

.canvas-node:hover {
    filter: brightness(1.1);
}

.canvas-node.selected {
    filter: brightness(1.2);
}

.canvas-node.dragging {
    opacity: 0.8;
    cursor: grabbing;
}

.canvas-node-group {
    cursor: move;
}

.canvas-node-rect {
    fill: #1e1e1e;
    stroke: #444;
    stroke-width: 1;
    rx: 4;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.canvas-node.selected .canvas-node-rect {
    stroke: #fff;
    stroke-width: 2;
    filter: drop-shadow(0 0 0 2px rgba(255, 255, 255, 0.2)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.canvas-node.multi-selected .canvas-node-rect {
    stroke: #fff;
    stroke-width: 2;
    stroke-dasharray: 4, 4;
    fill: rgba(255, 255, 255, 0.05);
}

.canvas-node-header {
    fill: #2a2a2a;
    stroke: #444;
    stroke-width: 1;
    rx: 4;
}

.canvas-node-header-rect {
    fill: #2a2a2a;
}

.canvas-node-icon {
    font-size: 16px;
    pointer-events: none;
}

.canvas-node-name {
    font-size: 13px;
    font-weight: 500;
    fill: #fff;
    pointer-events: none;
}

.canvas-node-body {
    fill: #1e1e1e;
}

.canvas-node-input-dot,
.canvas-node-output-dot {
    cursor: pointer;
    transition: r 0.1s;
}

.canvas-node-input-dot {
    fill: #4a9eff;
    stroke: #1e1e1e;
    stroke-width: 2;
}

.canvas-node-input-dot:hover {
    fill: #6bb0ff;
    r: 7;
}

.canvas-node-output-dot {
    fill: #ff6b6b;
    stroke: #1e1e1e;
    stroke-width: 2;
}

.canvas-node-output-dot:hover {
    fill: #ff8e8e;
    r: 7;
}

/* Wire styles */
.canvas-wire {
    fill: none;
    stroke: #666;
    stroke-width: 2;
    pointer-events: stroke;
    cursor: pointer;
}

.canvas-wire:hover {
    stroke: #999;
}

.canvas-wire.selected {
    stroke: #fff;
    stroke-width: 3;
}

/* Connection preview wire - Sakura pink, thick, fuzzy */
.canvas-wire-preview {
    stroke: #FFB7C5 !important; /* Sakura pink */
    stroke-width: 4 !important; /* Thicker */
    fill: none !important;
    opacity: 1 !important;
    pointer-events: none !important; /* Don't interfere with port clicks */
    /* Fuzzy glow effect using multiple shadows */
    filter: drop-shadow(0 0 3px rgba(255, 183, 197, 1)) drop-shadow(0 0 6px rgba(255, 183, 197, 0.6)) drop-shadow(0 0 10px rgba(255, 183, 197, 0.3));
}

/* Box selection */
.canvas-selection-box {
    fill: rgba(74, 158, 255, 0.1);
    stroke: #4a9eff;
    stroke-width: 1;
    stroke-dasharray: 4, 4;
    pointer-events: none;
}

/* Zoom controls */
.canvas-zoom-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1000;
}

.canvas-zoom-button {
    width: 32px;
    height: 32px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.canvas-zoom-button:hover {
    background: #333;
}

.canvas-zoom-button:active {
    background: #3a3a3a;
}

/* Viewport info */
.canvas-viewport-info {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid #444;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 11px;
    color: #ccc;
    z-index: 1000;
    pointer-events: none;
}

/* Node menu button */
.canvas-node-menu-button {
    cursor: pointer;
    fill: #888;
    font-size: 16px;
    transition: fill 0.2s;
}

.canvas-node-menu-button:hover {
    fill: #fff;
}