/**
 * Node Panel Styles
 *
 * Styling for floating metadata panels.
 * Uses BEM naming: .node-panel__element--modifier
 */

/* =============================================================================
   GLOBAL TEXT SELECTION
   Disable selection during drag operations, re-enable for editable content
   ============================================================================= */

body:has(.node-panel) {
    -webkit-user-select: none;
    user-select: none;
}

/* Re-enable selection for editable content */
input,
textarea,
[contenteditable="true"],
.metadata-editable.is-editing,
.metadata-editable.is-editing *,
.node-field__value.is-editing,
.node-field__value.is-editing *,
pre,
code {
    -webkit-user-select: text;
    user-select: text;
}

/* =============================================================================
   FROSTED GLASS TUNING VARIABLES
   These can be adjusted via the Glass Controls panel (Ctrl+Shift+G)
   ============================================================================= */

:root {
    /* Blur */
    --glass-blur: 12px;
    --glass-blur-saturate: 1.2;

    /* Opacity/Transparency */
    --glass-opacity-light: 0.75;    /* Lighter part of gradient */
    --glass-opacity-mid: 0.70;      /* Middle of gradient */
    --glass-opacity-dark: 0.72;     /* Darker part of gradient */

    /* Gradient position */
    --glass-gradient-x: 30%;
    --glass-gradient-y: 20%;

    /* Base colors (neutral grays) */
    --glass-color-light: 45, 45, 50;
    --glass-color-mid: 25, 25, 28;
    --glass-color-dark: 18, 18, 20;

    /* Chromatic aberration - expanded controls */
    --glass-chroma-x: 0px;          /* Horizontal offset */
    --glass-chroma-y: 0px;          /* Vertical offset */
    --glass-chroma-intensity: 0.4;  /* Overall opacity */
    --glass-chroma-spread: 70;      /* Gradient spread % (50-100) */
    /* Channel A (warm) */
    --glass-chroma-a-hue: 0;        /* 0 = red, 30 = orange, 60 = yellow */
    --glass-chroma-a-sat: 100%;
    --glass-chroma-a-strength: 0.15;
    /* Channel B (cool) */
    --glass-chroma-b-hue: 180;      /* 180 = cyan, 210 = blue, 270 = purple */
    --glass-chroma-b-sat: 100%;
    --glass-chroma-b-strength: 0.12;

    /* Border glow */
    --glass-border-opacity: 0.08;
    --glass-highlight-opacity: 0.05;
}

/* =============================================================================
   BASE PANEL
   ============================================================================= */

.node-panel {
    position: fixed;
    min-width: var(--node-panel-min-width, 280px);
    max-width: var(--node-panel-max-width, 500px);

    /* Frosted glass effect with radial gradient */
    background: radial-gradient(
        ellipse at var(--glass-gradient-x) var(--glass-gradient-y),
        rgba(var(--glass-color-light), var(--glass-opacity-light)) 0%,
        rgba(var(--glass-color-mid), var(--glass-opacity-mid)) 50%,
        rgba(var(--glass-color-dark), var(--glass-opacity-dark)) 100%
    );
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-blur-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-blur-saturate));

    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
    border-radius: var(--radius-md, 12px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, var(--glass-highlight-opacity));
    display: flex;
    flex-direction: column;
    overflow: visible; /* Allow ports to extend outside panel bounds */
    transition: box-shadow var(--transition-normal, 200ms ease),
                transform var(--transition-fast, 150ms ease);
    z-index: var(--z-node-base, 600);
    cursor: grab; /* Draggable from any empty area */
}

/* Reset cursor for interactive content within panels */
.node-panel input,
.node-panel textarea,
.node-panel select {
    cursor: text;
}

.node-panel button,
.node-panel a,
.node-panel [role="button"] {
    cursor: pointer;
}

/* Chromatic aberration pseudo-elements */
.node-panel::before,
.node-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--glass-chroma-intensity);
    z-index: -1;
    transition: transform 0.15s ease, opacity 0.15s ease;
    mix-blend-mode: var(--glass-chroma-blend, screen);
}

/* Channel A (warm - default red) - offset in negative direction */
.node-panel::before {
    background: radial-gradient(
        ellipse at var(--glass-gradient-x) var(--glass-gradient-y),
        hsla(var(--glass-chroma-a-hue), var(--glass-chroma-a-sat), 50%, var(--glass-chroma-a-strength)) 0%,
        hsla(var(--glass-chroma-a-hue), var(--glass-chroma-a-sat), 50%, calc(var(--glass-chroma-a-strength) * 0.5)) 50%,
        transparent calc(var(--glass-chroma-spread) * 1%)
    );
    transform: translate(calc(var(--glass-chroma-x) * -1), calc(var(--glass-chroma-y) * -1));
}

/* Channel B (cool - default cyan) - offset in positive direction */
.node-panel::after {
    background: radial-gradient(
        ellipse at var(--glass-gradient-x) var(--glass-gradient-y),
        hsla(var(--glass-chroma-b-hue), var(--glass-chroma-b-sat), 50%, var(--glass-chroma-b-strength)) 0%,
        hsla(var(--glass-chroma-b-hue), var(--glass-chroma-b-sat), 50%, calc(var(--glass-chroma-b-strength) * 0.5)) 50%,
        transparent calc(var(--glass-chroma-spread) * 1%)
    );
    transform: translate(var(--glass-chroma-x), var(--glass-chroma-y));
}

/* Focused state - subtle glow, raise above pipes */
.node-panel.is-focused {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    z-index: 800 !important;
}

/* Dragging state - lift effect */
.node-panel.is-dragging {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: scale(1.01);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}

/* Minimized state (hidden) */
.node-panel.is-minimized {
    display: none;
}

/* Collapsed state (header only) */
.node-panel.is-collapsed {
    height: var(--node-panel-header-height, 44px) !important;
}

.node-panel.is-collapsed .node-panel__content {
    display: none;
}

/* Anchored state */
.node-panel.is-anchored {
    /* Subtle glow to indicate anchored */
    box-shadow: var(--node-panel-shadow, 0 8px 32px rgba(0, 0, 0, 0.4)),
                0 0 0 1px var(--node-accent, var(--color-cyan, #00D9FF)),
                0 0 20px -5px var(--node-accent, rgba(0, 217, 255, 0.3));
}

.node-panel.is-anchored .node-panel__header::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--node-accent, var(--color-cyan, #00D9FF));
    border-radius: 50%;
    animation: anchor-pulse 2s ease-in-out infinite;
}

@keyframes anchor-pulse {
    0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
    50% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

/* Docked state */
.node-panel.is-docked {
    border-radius: 0;
    max-width: none;
    transition: none;
}

.node-panel.is-docked .node-panel__header {
    border-radius: 0;
}

.node-panel.is-docked .node-panel__content {
    border-radius: 0;
}

.node-panel.is-docked--left {
    border-left: none;
    border-right: 1px solid var(--node-panel-border, rgba(255, 255, 255, 0.1));
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}

.node-panel.is-docked--right {
    border-right: none;
    border-left: 1px solid var(--node-panel-border, rgba(255, 255, 255, 0.1));
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

.node-panel.is-docked .node-panel__header {
    border-radius: 0;
}

/* Near dock visual indicator during drag */
.node-panel.is-near-dock {
    box-shadow: 0 0 0 2px var(--color-cyan, #00D9FF),
                0 8px 32px rgba(0, 0, 0, 0.4);
    transform: scale(0.98);
}

/* Dock zone animation */
@keyframes dock-zone-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* =============================================================================
   PANEL HEADER (Drag Handle)
   ============================================================================= */

.node-panel__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--node-panel-header-height, 44px);
    min-height: var(--node-panel-header-height, 44px);
    padding: 0 12px;
    background: var(--node-panel-header-bg, rgba(0, 0, 0, 0.25));
    border-bottom: 1px solid var(--node-panel-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    /* Accent border (uses panel type accent) */
    border-left: 3px solid var(--node-accent, var(--color-cyan, #00D9FF));
    overflow: visible; /* Allow ports to extend outside header */
}

.node-panel.is-dragging .node-panel__header {
    cursor: grabbing;
}

/* Drag indicator pill */
.node-panel__header::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* =============================================================================
   PANEL ICON
   ============================================================================= */

.node-panel__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--node-accent, var(--color-cyan, #00D9FF));
}

.node-panel__icon svg {
    width: 100%;
    height: 100%;
}

/* =============================================================================
   PANEL TITLE
   ============================================================================= */

.node-panel__title {
    flex: 1;
    font-size: var(--text-base, 14px);
    font-weight: var(--font-semibold, 600);
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* pointer-events enabled to allow double-click for edit mode */
    cursor: default;
}

/* =============================================================================
   HEADER ACTION BUTTONS
   ============================================================================= */

.node-panel__actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.node-panel__btn {
    width: var(--node-btn-size, 28px);
    height: var(--node-btn-size, 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--node-btn-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--node-btn-border, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
    color: var(--node-btn-color, rgba(255, 255, 255, 0.6));
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
}

.node-panel__btn:hover {
    background: var(--node-btn-bg-hover, rgba(255, 255, 255, 0.1));
    color: var(--node-btn-color-hover, rgba(255, 255, 255, 0.9));
}

.node-panel__btn:active {
    transform: scale(0.95);
}

.node-panel__btn svg {
    width: 14px;
    height: 14px;
}

/* Collapse button hover */
.node-panel__btn--collapse:hover {
    background: var(--node-btn-collapse-bg-hover, rgba(255, 193, 7, 0.15));
    border-color: var(--node-btn-collapse-border-hover, rgba(255, 193, 7, 0.3));
    color: var(--node-btn-collapse-color-hover, rgb(255, 193, 7));
}

/* Minimize button hover */
.node-panel__btn--minimize:hover {
    background: var(--node-btn-minimize-bg-hover, rgba(0, 217, 255, 0.15));
    border-color: var(--node-btn-minimize-border-hover, rgba(0, 217, 255, 0.3));
    color: var(--node-btn-minimize-color-hover, #00D9FF);
}

/* Close button hover */
.node-panel__btn--close:hover {
    background: var(--node-btn-close-bg-hover, rgba(239, 68, 68, 0.15));
    border-color: var(--node-btn-close-border-hover, rgba(239, 68, 68, 0.3));
    color: var(--node-btn-close-color-hover, rgb(239, 68, 68));
}

/* Pin button - screenplay line anchor */
.node-panel__btn--pin {
    cursor: grab;
}

.node-panel__btn--pin:hover {
    background: var(--node-btn-pin-bg-hover, rgba(255, 193, 7, 0.15));
    border-color: var(--node-btn-pin-border-hover, rgba(255, 193, 7, 0.3));
    color: var(--node-btn-pin-color-hover, rgb(255, 193, 7));
}

.node-panel__btn--pin:active {
    cursor: grabbing;
}

/* Pin button - pinned state (pushed in) */
.node-panel__btn--pin.is-pinned {
    background: var(--node-btn-pin-active-bg, rgba(255, 193, 7, 0.25));
    border-color: var(--node-btn-pin-active-border, rgba(255, 193, 7, 0.5));
    color: var(--node-btn-pin-active-color, rgb(255, 193, 7));
}

.node-panel__btn--pin.is-pinned svg {
    transform: rotate(-45deg) scale(0.9);
    transition: transform 0.2s ease;
}

.node-panel__btn--pin:not(.is-pinned) svg {
    transform: rotate(0deg) scale(1);
    transition: transform 0.2s ease;
}

/* Pin button - pushed in effect for pinned state */
.node-panel__btn--pin.is-pinned .pin-head {
    fill: currentColor;
}

/* =============================================================================
   PIN WHIP MODE - Screenplay line highlighting
   ============================================================================= */

/* Body state when pin-whipping */
body.is-pin-whipping {
    cursor: crosshair !important;
}

body.is-pin-whipping * {
    cursor: crosshair !important;
}

/* Screenplay line highlight during pin-whip */
.script-line.pin-target-highlight {
    background: rgba(255, 193, 7, 0.15) !important;
    box-shadow: inset 0 0 0 2px rgba(255, 193, 7, 0.5);
    border-radius: 4px;
    transition: all 0.15s ease;
}

.script-line.pin-target-highlight::before {
    content: '📍';
    position: absolute;
    left: -24px;
    font-size: 14px;
    animation: pin-bounce 0.3s ease;
}

@keyframes pin-bounce {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* =============================================================================
   PIN CONNECTOR LINE
   ============================================================================= */

/* Smooth opacity transitions for pin connector */
.node-connector__line,
.node-connector__dot {
    transition: opacity 0.2s ease;
}

/* =============================================================================
   PANEL CONTENT
   ============================================================================= */

.node-panel__content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    /* No bottom radius - footer handles that */
    border-radius: 0;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.node-panel__content::-webkit-scrollbar {
    width: 6px;
}

.node-panel__content::-webkit-scrollbar-track {
    background: transparent;
}

.node-panel__content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.node-panel__content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* =============================================================================
   PANEL FOOTER (IO Ports)
   ============================================================================= */

.node-panel__footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--node-panel-footer-height, 24px);
    min-height: var(--node-panel-footer-height, 24px);
    padding: 0 8px;
    background: var(--node-panel-footer-bg, rgba(0, 0, 0, 0.2));
    border-top: 1px solid var(--node-panel-border, rgba(255, 255, 255, 0.08));
    border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
    /* Allow ports to extend outside footer */
    overflow: visible;
}

/* Footer ports use relative positioning within flex container */
.node-panel__footer .node-port {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
}

.node-panel__footer .node-port:hover {
    transform: scale(1.2);
}

/* Hide footer when collapsed */
.node-panel.is-collapsed .node-panel__footer {
    display: none;
}

/* Hide footer when pancaked */
.node-panel.is-pancaked .node-panel__footer {
    display: none;
}

/* =============================================================================
   PANEL TYPE VARIANTS (Accent Colors)
   ============================================================================= */

.node-panel--identity { --node-accent: var(--node-identity-accent, #1E88E5); }
.node-panel--characters { --node-accent: var(--node-characters-accent, #E53935); }
.node-panel--story { --node-accent: var(--node-story-accent, #43A047); }
.node-panel--technical { --node-accent: var(--node-technical-accent, #8E24AA); }
.node-panel--planning { --node-accent: var(--node-planning-accent, #FB8C00); }
.node-panel--analysis { --node-accent: var(--node-analysis-accent, #00ACC1); }

/* =============================================================================
   CONTENT FORM ELEMENTS
   ============================================================================= */

.node-field {
    margin-bottom: 16px;
}

.node-field:last-child {
    margin-bottom: 0;
}

.node-field__label {
    display: block;
    font-size: var(--text-xs, 11px);
    font-weight: var(--font-medium, 500);
    color: var(--color-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.node-field__input,
.node-field__textarea,
.node-field__select {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--color-text, #e0e0e0);
    font-size: var(--text-sm, 12px);
    font-family: inherit;
    transition: border-color var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease);
}

.node-field__input:focus,
.node-field__textarea:focus,
.node-field__select:focus {
    outline: none;
    border-color: var(--node-accent, var(--color-cyan, #00D9FF));
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

.node-field__textarea {
    min-height: 80px;
    resize: vertical;
}

.node-field__input::placeholder,
.node-field__textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* =============================================================================
   EDITABLE FIELD VALUES
   ============================================================================= */

.node-field__value {
    display: block;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--color-text, #e0e0e0);
    font-size: var(--text-sm, 12px);
    line-height: 1.5;
    min-height: 32px;
    cursor: text;
    transition: border-color var(--transition-fast, 150ms ease),
                background var(--transition-fast, 150ms ease);
}

.node-field__value:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.15);
}

.node-field__value.is-editing {
    background: rgba(0, 0, 0, 0.3);
    border-color: var(--node-accent, var(--color-cyan, #00D9FF));
    box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.15);
}

.node-field__value.metadata-multiline {
    min-height: 60px;
    white-space: pre-wrap;
}

/* Piped/Connected TARGET field - uses source's spectral color */
.node-field__value.is-piped {
    position: relative;
    background: rgba(128, 128, 128, 0.05);
    pointer-events: none;
    cursor: default;
    /* Color and text-shadow applied dynamically via inline styles */
}

.node-field__value.is-piped::before {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0.6;
}

.node-field__value.is-piped:hover {
    background: rgba(128, 128, 128, 0.08);
}

/* Connected SOURCE field - uses field's spectral color */
.node-field__value.is-source {
    position: relative;
    /* Color and text-shadow applied dynamically via inline styles based on field index */
}

.node-field__value.is-source::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0.7;
}

/* Subtle pulse when piped field receives data */
.node-field__value.is-piped.field-received {
    animation: pipedPulse 0.4s ease-out;
}

@keyframes pipedPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 217, 255, 0.4); }
    100% { box-shadow: 0 0 0 6px rgba(0, 217, 255, 0); }
}

/* =============================================================================
   MULTI-INPUT TAG CHIPS
   ============================================================================= */

/* Container for tag chips */
.node-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    min-height: 36px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    align-items: center;
}

.node-chips:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.25);
}

/* Individual chip/pill */
.node-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: var(--text-xs, 11px);
    font-weight: var(--font-medium, 500);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User-added chip - white/gray */
.node-chip--user {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Piped chip - uses source panel bg color, target panel text color */
.node-chip--piped {
    --chip-bg: rgba(0, 217, 255, 1);
    --chip-text: #FFFFFF;
    background: color-mix(in srgb, var(--chip-bg) 20%, transparent);
    color: var(--chip-text);
    border: 1px solid color-mix(in srgb, var(--chip-bg) 40%, transparent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--chip-text) 50%, transparent);
}

/* Source indicator on piped chip */
.node-chip__source {
    font-size: 9px;
    opacity: 0.6;
    margin-left: 2px;
}

/* Remove button */
.node-chip__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    margin-right: -4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.node-chip__remove:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.node-chip--piped .node-chip__remove:hover {
    background: color-mix(in srgb, var(--chip-bg) 30%, transparent);
}

/* Piped chip interactive states */
.node-chip--piped {
    cursor: grab;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.node-chip--piped:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--chip-bg) 40%, transparent);
}

.node-chip--piped.is-dragging {
    cursor: grabbing;
    transform: scale(1.05);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--chip-bg) 50%, transparent);
    z-index: 1000;
}

/* Field highlight (when navigating from chip) */
[data-field].is-highlighted {
    animation: field-highlight 1.5s ease-out;
}

@keyframes field-highlight {
    0% {
        background: rgba(255, 200, 100, 0.3);
        box-shadow: 0 0 0 2px rgba(255, 200, 100, 0.5), 0 0 20px rgba(255, 200, 100, 0.3);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* Inline input for adding new chips */
.node-chips__input {
    flex: 1;
    min-width: 60px;
    padding: 2px 4px;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-xs, 11px);
    font-family: inherit;
}

.node-chips__input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Collector port style (⊕) */
.node-field__port--collector {
    width: 14px;
    height: 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(0, 217, 255, 0.5);
    border-radius: 50%;
    position: relative;
}

.node-field__port--collector::before,
.node-field__port--collector::after {
    content: '';
    position: absolute;
    background: rgba(0, 217, 255, 0.7);
}

.node-field__port--collector::before {
    width: 8px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.node-field__port--collector::after {
    width: 2px;
    height: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.node-field__port--collector:hover {
    border-color: rgba(0, 217, 255, 0.8);
    box-shadow: 0 0 8px rgba(0, 217, 255, 0.4);
}

.node-field__port--collector.has-connections {
    background: rgba(0, 217, 255, 0.2);
    border-color: #00D9FF;
}

/* Field row layout (side-by-side) */
.node-field--row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.node-field--row > .node-field {
    margin-bottom: 0;
}

.node-field--half {
    flex: 1;
}

/* AI action fields */
.node-field--ai {
    position: relative;
}

.node-field__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.node-field__header .node-field__label {
    margin-bottom: 0;
}

.node-field__hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin-left: auto;
    padding-left: 8px;
}

.node-field__ai-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(138, 43, 226, 0.15);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 4px;
    color: #a78bfa;
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
}

.node-field__ai-btn:hover {
    background: rgba(138, 43, 226, 0.25);
    border-color: rgba(138, 43, 226, 0.5);
    color: #c4b5fd;
}

/* Upload button - styled like AI button but with file icon */
.node-field__upload-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(67, 160, 71, 0.1);
    border: 1px solid rgba(67, 160, 71, 0.2);
    border-radius: 4px;
    color: rgba(67, 160, 71, 0.7);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
    margin-right: 4px;
}

.node-field__upload-btn:hover {
    background: rgba(67, 160, 71, 0.2);
    border-color: rgba(67, 160, 71, 0.4);
    color: #43A047;
}

/* Droppable field styling */
.node-field--droppable {
    position: relative;
}

.node-field--droppable .node-field__value {
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Dropzone active state */
.node-field--droppable.is-dropzone-active .node-field__value {
    background: rgba(67, 160, 71, 0.15);
    border: 2px dashed rgba(67, 160, 71, 0.5);
    border-radius: var(--radius-sm, 4px);
}

.node-field--droppable.is-dropzone-active .node-field__value::after {
    content: 'Drop file here';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #43A047;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm, 4px);
    pointer-events: none;
}

/* Field received animation */
.node-field__value.field-received {
    animation: field-pulse 0.5s ease;
}

@keyframes field-pulse {
    0% { background: rgba(67, 160, 71, 0.3); }
    100% { background: transparent; }
}

/* =============================================================================
   MIXED INPUT (VARCHAR + TAGS)
   ============================================================================= */

.node-field--mixed-input {
    position: relative;
}

.node-field__mixed-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm, 4px);
    min-height: 60px;
}

/* Chips container for tags */
.node-field__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.node-field__chips:empty {
    display: none;
}

/* Individual tag chip */
.node-field__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(156, 39, 176, 0.2);
    border: 1px solid rgba(156, 39, 176, 0.4);
    border-radius: 12px;
    font-size: 11px;
    color: #ce93d8;
}

.node-field__chip--piped {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.4);
    color: #64b5f6;
}

.node-field__chip--piped::before {
    content: '⟁';
    font-size: 10px;
    opacity: 0.7;
}

.node-field__chip-remove {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    line-height: 1;
}

.node-field__chip-remove:hover {
    opacity: 1;
    color: #ef4444;
}

/* Free text area within mixed container */
.node-field__text {
    flex: 1;
    min-height: 32px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text, rgba(255, 255, 255, 0.9));
}

.node-field__text:empty::before {
    content: 'Add notes...';
    color: rgba(255, 255, 255, 0.3);
}

/* Tag input at bottom */
.node-field__tag-input {
    width: 100%;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm, 4px);
    font-size: 11px;
    color: var(--color-text, rgba(255, 255, 255, 0.9));
    outline: none;
}

.node-field__tag-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.node-field__tag-input:focus {
    border-color: rgba(156, 39, 176, 0.5);
    background: rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   CHARACTER LIST
   ============================================================================= */

.node-characters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.node-character {
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: background var(--transition-fast, 150ms ease);
}

.node-character:hover {
    background: rgba(0, 0, 0, 0.25);
}

.node-character__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.node-character__color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.node-character__name {
    font-weight: var(--font-semibold, 600);
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
    cursor: text;
}

.node-character__name.is-editing {
    outline: 1px solid rgba(0, 217, 255, 0.5);
    background: rgba(0, 217, 255, 0.1);
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 3px;
    min-width: 60px;
}

.node-character__name.is-editing:focus {
    outline: 1px solid rgba(0, 217, 255, 0.8);
    background: rgba(0, 217, 255, 0.15);
}

.node-character__role {
    font-size: var(--text-xs, 11px);
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.node-character__actor {
    margin-top: 4px;
    font-size: var(--text-xs, 11px);
    color: rgba(255, 255, 255, 0.6);
}

/* Empty state */
.node-empty {
    text-align: center;
    padding: 24px 16px;
    color: rgba(255, 255, 255, 0.5);
}

.node-empty p {
    margin: 0 0 12px 0;
}

.node-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: var(--text-sm, 12px);
    font-weight: var(--font-medium, 500);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
}

.node-btn--primary {
    background: var(--node-accent, var(--color-cyan, #00D9FF));
    border: none;
    color: #000;
}

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

/* =============================================================================
   ANALYSIS STATS
   ============================================================================= */

.node-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.node-stat {
    text-align: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.node-stat__value {
    display: block;
    font-size: var(--text-lg, 18px);
    font-weight: var(--font-semibold, 600);
    color: var(--node-accent, var(--color-cyan, #00D9FF));
    margin-bottom: 4px;
}

.node-stat__label {
    font-size: var(--text-xs, 11px);
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.node-stat-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.node-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
}

.node-stat-row__label {
    font-size: var(--text-sm, 12px);
    color: rgba(255, 255, 255, 0.6);
}

.node-stat-row__value {
    font-size: var(--text-sm, 12px);
    font-weight: var(--font-medium, 500);
    color: rgba(255, 255, 255, 0.9);
}

/* Paired stats with centered divider grid layout */
.node-stat-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    font-family: var(--font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
    font-size: 10px;
    letter-spacing: 0.03em;
}

.node-stat-pair__item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

/* Left item: label outer (left), port inner (right) */
.node-stat-pair__item--left {
    justify-content: space-between;
}

/* Right item: port inner (left), label outer (right) */
.node-stat-pair__item--right {
    justify-content: space-between;
}

.node-stat-pair__label {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.node-stat-pair__port {
    color: var(--node-accent, #00ACC1);
    font-weight: 600;
    opacity: 0.9;
}

.node-stat-pair__divider {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 300;
    font-size: 12px;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

/* Tablet: constrain panel sizes for portrait orientation */
@media (min-width: 769px) and (max-width: 1024px) {
    .node-panel {
        min-width: 260px;
        max-width: 380px;
    }

    .node-panel__content {
        padding: 14px;
    }

    /* Reduce font sizes slightly */
    .node-panel__title {
        font-size: 13px;
    }
}

/* Mobile: full-width panels */
@media (max-width: 768px) {
    .node-panel {
        min-width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
    }

    .node-panel__header {
        padding: 0 10px;
    }

    .node-panel__content {
        padding: 12px;
    }
}

/* =============================================================================
   CONNECTION PORTS (in footer)
   ============================================================================= */

.node-port {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;
    z-index: 20;
    transition: transform var(--transition-fast, 150ms ease);
}

.node-port:hover {
    transform: scale(1.2);
}

.node-port__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--node-port-bg, rgba(60, 60, 80, 0.9));
    border: 2px solid var(--node-port-border, rgba(0, 217, 255, 0.5));
    transition: all var(--transition-fast, 150ms ease);
}

.node-port:hover .node-port__dot {
    background: var(--node-port-bg-hover, rgba(0, 217, 255, 0.3));
    border-color: var(--color-cyan, #00D9FF);
    box-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
}

/* Connected state */
.node-port.is-connected .node-port__dot {
    background: var(--color-cyan, #00D9FF);
    border-color: var(--color-cyan, #00D9FF);
}

/* Panel with connections indicator */
.node-panel.has-connections {
    /* Subtle indicator */
}

.node-panel.has-connections .node-panel__header::before {
    background: rgba(0, 217, 255, 0.3);
}

/* Hide ports when docked (optional - they may interfere with dock edge) */
.node-panel.is-docked--left .node-port--input {
    display: none;
}

.node-panel.is-docked--right .node-port--output {
    display: none;
}

/* =============================================================================
   FIELD-LEVEL PORTS (Cable Management)
   ============================================================================= */

/* Field ports container - positioned relative to field */
.has-field-ports {
    position: relative;
}

/* Field port - small dots on field edges */
.field-port {
    position: absolute;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;
    z-index: 20; /* Above content, needs to be clickable */
    opacity: 0;
    /* Smooth transitions for JS-driven proximity changes */
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

/* Input port - left side, vertically centered */
.field-port--input {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
}

/* Output port - right side, bottom of field */
.field-port--output {
    right: -6px;
    bottom: 4px;
    top: auto;
}

/* Snap-ready state - cursor is very close */
.field-port.is-snap-ready .field-port__dot {
    box-shadow: 0 0 12px var(--field-color-glow, rgba(0, 217, 255, 0.8)),
                0 0 20px var(--field-color-glow, rgba(0, 217, 255, 0.4));
}

/* Snap pulse animation */
@keyframes port-snap-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.8);
    }
    100% {
        transform: scale(1.4);
    }
}

/* Field port dot */
.field-port__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(40, 40, 60, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    transition: all 0.15s ease;
    cursor: crosshair;
}

/* Use field's spectral color for border */
.field-port--output .field-port__dot {
    border-color: var(--field-color, rgba(0, 217, 255, 0.4));
}

/* Hover state - glow effect (transform controlled by JS proximity) */
.field-port:hover .field-port__dot {
    background: var(--field-color, rgba(0, 217, 255, 0.3));
    border-color: var(--field-color-light, var(--color-cyan, #00D9FF));
    box-shadow: 0 0 8px var(--field-color-glow, rgba(0, 217, 255, 0.6)),
                0 0 16px var(--field-color-glow, rgba(0, 217, 255, 0.3));
}

/* Connected field port */
.field-port.is-connected .field-port__dot {
    background: var(--field-color, var(--color-cyan, #00D9FF));
    border-color: var(--field-color, var(--color-cyan, #00D9FF));
    box-shadow: 0 0 4px var(--field-color-glow, rgba(0, 217, 255, 0.4));
}

/* Highlight potential drop targets during drag */
.field-port.is-drop-target .field-port__dot {
    background: var(--field-color, rgba(0, 217, 255, 0.5));
    border-color: var(--field-color-light, var(--color-cyan, #00D9FF));
    box-shadow: 0 0 12px var(--field-color-glow, rgba(0, 217, 255, 0.8)),
                0 0 24px var(--field-color-glow, rgba(0, 217, 255, 0.4));
    transform: scale(1.8);
    animation: port-pulse 0.6s ease-in-out infinite;
}

@keyframes port-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* When dragging, ensure all ports are interactive (proximity JS handles opacity) */
body.is-connecting .field-port {
    pointer-events: auto !important;
}

/* Highlight field row when its port is a drop target */
body.is-connecting .node-field:has(.field-port.is-drop-target) {
    background: rgba(0, 217, 255, 0.08);
    border-radius: 4px;
}

/* Visual feedback when hovering over any field during drag */
body.is-connecting .node-field:hover {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

/* =============================================================================
   CONNECTION LINES (SVG)
   ============================================================================= */

.node-connections {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 650; /* Above unfocused panels (600), below focused panel (700) */
    overflow: visible;
}

.node-connection {
    pointer-events: visibleStroke;
    cursor: crosshair;
    stroke-linecap: round;
    transition: stroke-width var(--transition-fast, 150ms ease),
                stroke var(--transition-fast, 150ms ease),
                filter var(--transition-fast, 150ms ease);
}

.node-connection:hover {
    stroke-width: 4 !important;
    filter: drop-shadow(0 0 6px currentColor);
}

/* Flowing pulse overlay on connections */
.node-connection-pulse {
    pointer-events: none;
}

.node-connection-pulse-group {
    pointer-events: none;
}

/* Primary white core pulse */
.node-connection-pulse.pulse-primary {
    opacity: 0.95;
}

/* Secondary colored glow pulse */
.node-connection-pulse.pulse-secondary {
    opacity: 0.8;
}

@keyframes flowPulse {
    0% {
        stroke-dashoffset: 52;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Temporary connection line during drag */
.node-connection--temp {
    pointer-events: none;
    animation: connection-drag-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes connection-drag-pulse {
    from { stroke-opacity: 0.4; }
    to { stroke-opacity: 0.8; }
}

/* Sliced connection - fruit ninja effect */
.node-connection.is-sliced {
    stroke: #ff4444 !important;
    stroke-width: 4 !important;
    animation: connection-slice 150ms ease-out forwards;
}

@keyframes connection-slice {
    0% {
        stroke-opacity: 1;
        stroke-width: 4;
    }
    50% {
        stroke: #ff8800;
        stroke-width: 6;
    }
    100% {
        stroke-opacity: 0;
        stroke-width: 8;
    }
}

/* =============================================================================
   FIELD-LEVEL CONNECTION VISUAL CUES
   ============================================================================= */

/* Connected field port indicator */
.field-port.is-connected .field-port__dot {
    background: var(--color-cyan, #00D9FF);
    border-color: var(--color-cyan, #00D9FF);
    box-shadow: 0 0 4px rgba(0, 217, 255, 0.5);
}

/* Visual indicator when panel has bundled field connections */
.node-panel.has-field-connections .node-port__dot {
    box-shadow: 0 0 8px rgba(0, 217, 255, 0.6),
                0 0 16px rgba(0, 217, 255, 0.3);
}

/* Pulse animation for bundled connections indicator */
.node-panel.has-field-connections:not(.field-ports-expanded) .node-port.is-connected::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 217, 255, 0.15);
    animation: bundled-pulse 2s ease-in-out infinite;
}

@keyframes bundled-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 0; }
}

/* Field ports toggle button - active state */
.node-panel__btn--ports.is-active {
    background: rgba(0, 217, 255, 0.15);
    border-color: rgba(0, 217, 255, 0.3);
    color: var(--color-cyan, #00D9FF);
}

/* Smooth transition for field ports appearing/hiding */
.has-field-ports {
    transition: padding var(--transition-normal, 200ms ease);
}

/* Add padding when field ports are expanded to give them room */
.node-panel.field-ports-expanded .node-panel__content {
    padding-left: 20px;
    padding-right: 20px;
}

.node-panel.field-ports-expanded .has-field-ports {
    padding-left: 4px;
    padding-right: 4px;
}

/* =============================================================================
   RESIZE HANDLES
   ============================================================================= */

/* Corner resize handle (bottom-right) */
.node-panel__resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 10;
    opacity: 0;
    transition: opacity var(--transition-fast, 100ms ease);
}

.node-panel__resize::before {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.3);
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.node-panel:hover .node-panel__resize,
.node-panel.is-resizing .node-panel__resize {
    opacity: 1;
}

.node-panel__resize:hover::before,
.node-panel.is-resizing .node-panel__resize::before {
    border-color: var(--color-cyan, #00D9FF);
}

/* Edge resize handles */
.node-panel__resize-edge {
    position: absolute;
    z-index: 9;
    opacity: 0;
}

.node-panel__resize-edge--right {
    top: var(--node-header-height, 40px);
    right: 0;
    width: 6px;
    height: calc(100% - var(--node-header-height, 40px));
    cursor: ew-resize;
}

.node-panel__resize-edge--bottom {
    left: 0;
    bottom: 0;
    width: calc(100% - 16px); /* Leave room for corner handle */
    height: 6px;
    cursor: ns-resize;
}

.node-panel:hover .node-panel__resize-edge {
    opacity: 1;
}

.node-panel__resize-edge:hover {
    background: rgba(0, 217, 255, 0.2);
}

/* Visual feedback during resize */
.node-panel.is-resizing {
    transition: none !important;
}

.node-panel.is-resizing .node-panel__resize-edge:hover,
.node-panel.is-resizing .node-panel__resize-edge {
    background: rgba(0, 217, 255, 0.3);
}

/* Hide resize handles when docked (full height is determined by dock) */
.node-panel.is-docked--left .node-panel__resize-edge--bottom,
.node-panel.is-docked--right .node-panel__resize-edge--bottom,
.node-panel.is-docked--left .node-panel__resize,
.node-panel.is-docked--right .node-panel__resize {
    display: none;
}

/* But allow width resize when docked */
.node-panel.is-docked--left .node-panel__resize-edge--right,
.node-panel.is-docked--right .node-panel__resize-edge--right {
    opacity: 1;
}

/* =============================================================================
   DATA FLOW VISUAL FEEDBACK
   ============================================================================= */

/* Field receiving data - brief highlight */
.field-received {
    animation: field-receive-pulse 500ms ease-out;
}

@keyframes field-receive-pulse {
    0% {
        background-color: rgba(0, 217, 255, 0.3);
        box-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Connection line styling */
.node-connection {
    transition: stroke 200ms ease, stroke-width 200ms ease, filter 200ms ease;
}

/* =============================================================================
   CONTEXT MENU
   ============================================================================= */

.context-menu {
    position: fixed;
    min-width: 160px;
    background: var(--surface-elevated, rgba(30, 30, 50, 0.98));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 4px 0;
    z-index: 1000;
    backdrop-filter: blur(12px);
}

.context-menu--submenu {
    margin-left: 2px;
}

.context-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    transition: background 100ms ease;
}

.context-menu__item:hover {
    background: rgba(0, 217, 255, 0.15);
}

.context-menu__item.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.context-menu__item.is-disabled:hover {
    background: transparent;
}

.context-menu__icon {
    width: 16px;
    text-align: center;
    font-size: 14px;
}

.context-menu__swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.context-menu__label {
    flex: 1;
}

.context-menu__shortcut {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    margin-left: auto;
}

.context-menu__arrow {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    margin-left: auto;
}

.context-menu__separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 8px;
}

/* Connection line pulse when data flows */
.node-connection.is-flowing {
    stroke: var(--color-cyan, #00D9FF);
    stroke-width: 4;
    filter: drop-shadow(0 0 6px rgba(0, 217, 255, 0.9));
    animation: connection-flow-pulse 500ms ease-out;
}

@keyframes connection-flow-pulse {
    0% {
        stroke-width: 3;
        filter: drop-shadow(0 0 2px rgba(0, 217, 255, 0.5));
    }
    50% {
        stroke-width: 5;
        filter: drop-shadow(0 0 10px rgba(0, 217, 255, 1));
    }
    100% {
        stroke-width: 3;
        filter: drop-shadow(0 0 4px rgba(0, 217, 255, 0.6));
    }
}

/* =============================================================================
   MASTER EDIT PANEL (Connection/Pulse Visual Controls)
   ============================================================================= */

/* Panel type color */
.node-panel--master-edit {
    --node-accent: #FF6B6B;
}

/* Collapsible section groups */
.master-edit-group {
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.master-edit-group__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.master-edit-group__header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.master-edit-group__chevron {
    width: 12px;
    height: 12px;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.master-edit-group.is-collapsed .master-edit-group__chevron {
    transform: rotate(-90deg);
}

.master-edit-group__title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.master-edit-group__body {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: block;
}

.master-edit-group.is-collapsed .master-edit-group__body {
    display: none;
}

/* Section grouping within groups */
.master-edit-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.master-edit-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

/* Collapsible sub-section (nested within groups) */
.master-edit-subsection {
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.master-edit-subsection__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.master-edit-subsection__header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.master-edit-subsection__chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
    opacity: 0.5;
}

.master-edit-subsection.is-collapsed .master-edit-subsection__chevron {
    transform: rotate(-90deg);
}

.master-edit-subsection__title {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.master-edit-subsection__body {
    padding: 8px 10px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.master-edit-subsection.is-collapsed .master-edit-subsection__body {
    display: none;
}

/* Sections inside subsections need less margin */
.master-edit-subsection .master-edit-section {
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.master-edit-section__title {
    font-size: var(--text-xs, 11px);
    font-weight: var(--font-semibold, 600);
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px 0;
}

/* Toggle checkbox in section title */
.master-edit-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.master-edit-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--node-accent, #FF6B6B);
    cursor: pointer;
}

.master-edit-toggle span {
    color: rgba(255, 255, 255, 0.7);
}

.master-edit-toggle:has(input:checked) span {
    color: rgba(255, 255, 255, 0.9);
}

/* Individual control row */
.master-edit-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.master-edit-control:last-child {
    margin-bottom: 0;
}

.master-edit-control__label {
    flex: 0 0 90px;
    font-size: var(--text-xs, 11px);
    color: rgba(255, 255, 255, 0.6);
}

/* Range slider styling */
.master-edit-control__slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.master-edit-control__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--node-accent, #FF6B6B);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 107, 107, 0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.master-edit-control__slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.7);
}

.master-edit-control__slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--node-accent, #FF6B6B);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 107, 107, 0.5);
}

/* Value display */
.master-edit-control__value {
    flex: 0 0 45px;
    text-align: right;
    font-size: var(--text-xs, 11px);
    font-family: var(--font-mono, 'SF Mono', monospace);
    color: rgba(255, 255, 255, 0.8);
}

/* Select dropdown */
.master-edit-control__select {
    flex: 1;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-xs, 11px);
    cursor: pointer;
    outline: none;
}

.master-edit-control__select:focus {
    border-color: var(--node-accent, #FF6B6B);
}

.master-edit-control__select option {
    background: #1a1a2e;
    color: rgba(255, 255, 255, 0.9);
}

/* Hue slider with color preview */
.master-edit-control__slider--hue {
    background: linear-gradient(to right,
        hsl(0, 80%, 50%),
        hsl(60, 80%, 50%),
        hsl(120, 80%, 50%),
        hsl(180, 80%, 50%),
        hsl(240, 80%, 50%),
        hsl(300, 80%, 50%),
        hsl(360, 80%, 50%)
    );
    border-radius: 4px;
}

.master-edit-control__slider--hue::-webkit-slider-thumb {
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: var(--thumb-color, #fff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.master-edit-control__slider--hue::-moz-range-thumb {
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: var(--thumb-color, #fff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Hue value as color swatch */
.master-edit-control__value--hue {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Conditional visibility for controls */
.master-edit-control[data-show-when],
.master-edit-control[data-pulse-show-when] {
    display: none;
}

.master-edit-control[data-show-when].is-visible,
.master-edit-control[data-pulse-show-when].is-visible {
    display: flex;
}

/* Action buttons */
.master-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.master-edit-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-xs, 11px);
    font-weight: var(--font-medium, 500);
    cursor: pointer;
    transition: all 0.15s ease;
}

.master-edit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 1);
}

.master-edit-btn--reset {
    border-color: rgba(255, 107, 107, 0.3);
    color: #FF6B6B;
}

.master-edit-btn--reset:hover {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.5);
}

/* Undo/Redo history buttons */
.master-edit-history {
    display: flex;
    gap: 4px;
    margin-right: auto;
}

.master-edit-btn--undo,
.master-edit-btn--redo {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.master-edit-btn--undo:disabled,
.master-edit-btn--redo:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.master-edit-btn--undo:disabled:hover,
.master-edit-btn--redo:disabled:hover {
    background: var(--node-btn-bg, rgba(255, 255, 255, 0.05));
    border-color: var(--node-btn-border, rgba(255, 255, 255, 0.1));
}

.master-edit-btn--undo:not(:disabled):hover,
.master-edit-btn--redo:not(:disabled):hover {
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.4);
    color: #FF6B6B;
}

.master-edit-btn--undo svg,
.master-edit-btn--redo svg {
    width: 16px;
    height: 16px;
}

/* =========================================
   PORTED SLIDERS (with connection ports)
   ========================================= */

/* Ported control has ports on left and right of the slider area */
.master-edit-control--ported {
    position: relative;
}

/* Slider wrapper contains slider + ports */
.master-edit-slider-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Slider port - mini connection points */
.master-edit-slider-port {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    cursor: crosshair;
    transition: all 0.15s ease;
    flex-shrink: 0;
    position: relative;
}

.master-edit-slider-port::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.15s ease;
}

.master-edit-slider-port:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.2);
}

.master-edit-slider-port:hover::after {
    background: rgba(255, 255, 255, 0.3);
}

/* Input port - left side (receives values) */
.master-edit-slider-port--input {
    border-color: rgba(100, 200, 255, 0.4);
}

.master-edit-slider-port--input:hover {
    border-color: rgba(100, 200, 255, 0.8);
    box-shadow: 0 0 8px rgba(100, 200, 255, 0.4);
}

.master-edit-slider-port--input.is-connected {
    background: rgba(100, 200, 255, 0.2);
    border-color: rgba(100, 200, 255, 0.8);
}

.master-edit-slider-port--input.is-connected::after {
    background: rgba(100, 200, 255, 0.6);
}

/* Output port - right side (sends values) */
.master-edit-slider-port--output {
    border-color: rgba(255, 150, 100, 0.4);
}

.master-edit-slider-port--output:hover {
    border-color: rgba(255, 150, 100, 0.8);
    box-shadow: 0 0 8px rgba(255, 150, 100, 0.4);
}

.master-edit-slider-port--output.is-connected {
    background: rgba(255, 150, 100, 0.2);
    border-color: rgba(255, 150, 100, 0.8);
}

.master-edit-slider-port--output.is-connected::after {
    background: rgba(255, 150, 100, 0.6);
}

/* Drag state */
.master-edit-slider-port.is-dragging {
    transform: scale(1.3);
    box-shadow: 0 0 12px currentColor;
}

/* Ported slider grows to fill remaining space */
.master-edit-slider-wrapper .master-edit-control__slider {
    flex: 1;
    min-width: 0;
}

/* =========================================
   DYNAMIC PULSE MANAGEMENT
   ========================================= */

/* Pulses header with Add button */
.master-edit-pulses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
}

.master-edit-pulses-header__title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
}

.master-edit-btn--add-pulse {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(100, 255, 150, 0.1);
    border-color: rgba(100, 255, 150, 0.3);
    color: #64FF96;
}

.master-edit-btn--add-pulse:hover {
    background: rgba(100, 255, 150, 0.2);
    border-color: rgba(100, 255, 150, 0.5);
}

/* Pulse section styling */
.master-edit-pulse-section {
    border-left: 2px solid rgba(0, 217, 255, 0.3);
    margin-left: 8px;
    padding-left: 8px;
}

.master-edit-pulse-section:first-child {
    border-left-color: rgba(255, 255, 255, 0.4);
}

.master-edit-pulse-section:nth-child(2) {
    border-left-color: rgba(0, 217, 255, 0.4);
}

.master-edit-pulse-section:nth-child(3) {
    border-left-color: rgba(255, 100, 200, 0.4);
}

.master-edit-pulse-section:nth-child(4) {
    border-left-color: rgba(255, 200, 100, 0.4);
}

/* Pulse title with actions */
.master-edit-pulse-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.master-edit-pulse-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-edit-pulse-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    padding-left: 8px;
}

/* Small icon buttons */
.master-edit-btn--icon {
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
}

.master-edit-btn--icon:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.master-edit-btn--icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.master-edit-btn--icon:disabled:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

/* Danger button (remove) */
.master-edit-btn--danger:not(:disabled):hover {
    background: rgba(255, 80, 80, 0.15);
    border-color: rgba(255, 80, 80, 0.4);
    color: #FF5050;
}

/* Pulse controls container */
.master-edit-pulse-controls {
    padding-left: 4px;
}

/* =========================================
   CUSTOM PANEL STYLES
   User-created panels with editable fields
   ========================================= */

/* Custom Panel - Purple accent */
.node-panel[data-node-id^="custom-"] {
    --node-accent: #7C4DFF;
}

/* Dirty State - Red Glowing Edges */
.node-panel.is-dirty {
    animation: custom-panel-dirty-pulse 1.5s ease-in-out infinite;
}

@keyframes custom-panel-dirty-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.4),
                    0 8px 32px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(255, 80, 80, 0.7),
                    0 0 20px rgba(255, 80, 80, 0.4),
                    0 8px 32px rgba(0, 0, 0, 0.4);
    }
}

/* Header red flash when custom panel dirty */
body.custom-panel-dirty .site-header {
    animation: header-edge-glow 1.4s ease-in-out infinite;
}

/* Save Button (Checkmark) */
.node-panel__btn--save {
    color: #4CAF50;
}

.node-panel__btn--save:hover {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.4);
}

.node-panel__btn--save.save-success {
    background: rgba(76, 175, 80, 0.3);
    animation: save-flash 0.5s ease-out;
}

@keyframes save-flash {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Cancel Button - red X in header */
.node-panel__btn--cancel {
    border-color: var(--color-border, rgba(255, 255, 255, 0.1));
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    background: transparent;
}

.node-panel__btn--cancel:hover {
    border-color: var(--color-red, #ef4444);
    color: #F87171;
    background: rgba(239, 68, 68, 0.15);
}

/* Lock Button - green when locked, animated shackle */
.node-panel__btn--lock {
    border-color: var(--color-border, rgba(255, 255, 255, 0.1));
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    background: transparent;
}

.node-panel__btn--lock .lock-shackle {
    transform-origin: 12px 7px;
    transform: rotate(-25deg) translateX(3px) translateY(-2px);
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.node-panel__btn--lock:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10B981;
}

/* Locked state - green accent, shackle closed */
.node-panel.is-locked .node-panel__btn--lock {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10B981;
}

.node-panel.is-locked .node-panel__btn--lock .lock-shackle {
    transform: rotate(0deg) translateX(0) translateY(0);
    opacity: 1;
}

.node-panel.is-locked .node-panel__btn--lock svg rect {
    fill: rgba(16, 185, 129, 0.2);
}

.node-panel.is-locked .node-panel__btn--lock svg {
    filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.4));
}

/* Locked panel border accent */
.node-panel.is-locked {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(16, 185, 129, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, var(--glass-highlight-opacity, 0.1));
}

/* Locked badge in header */
.node-panel.is-locked .node-panel__header::after {
    content: 'LOCKED';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 4px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border-radius: var(--radius-sm, 4px);
    pointer-events: none;
}

/* Delete Button - gray default, red on hover (matches kanban cards) */
.node-panel__btn--delete {
    border-color: var(--color-border, rgba(255, 255, 255, 0.1));
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    background: transparent;
}

.node-panel__btn--delete:hover {
    border-color: var(--color-red, #ef4444);
    color: #F87171;
    background: rgba(239, 68, 68, 0.15);
}

/* Corner-positioned delete button (bottom-right of panel) */
.node-panel__btn--corner {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 5;
    opacity: 0.6;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.node-panel:hover .node-panel__btn--corner {
    opacity: 1;
}

/* Editable Title */
.node-panel__title[contenteditable="true"] {
    cursor: text;
    min-width: 60px;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 3px;
    transition: background 0.15s ease;
}

.node-panel__title[contenteditable="true"]:hover {
    background: rgba(255, 255, 255, 0.05);
}

.node-panel__title[contenteditable="true"]:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
}

/* Custom Panel Content */
.custom-panel__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

/* Custom Fields */
.custom-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    position: relative;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    transition: background 0.15s ease;
}

.custom-field:hover {
    background: rgba(0, 0, 0, 0.2);
}

.custom-field__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 2px 0;
    width: 100%;
    transition: border-color 0.15s ease;
}

.custom-field__label:focus {
    outline: none;
    border-bottom-color: var(--node-accent, #7C4DFF);
}

/* Read-only label (outside edit mode) - looks like static text */
.custom-field__label[readonly] {
    cursor: default;
    border-bottom-color: transparent;
    pointer-events: none;
}

.custom-field__label::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.custom-field__value {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--color-text, #e0e0e0);
    font-size: 13px;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.custom-field__value:focus {
    outline: none;
    border-color: var(--node-accent, #7C4DFF);
    box-shadow: 0 0 0 2px rgba(124, 77, 255, 0.2);
}

.custom-field__value::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.custom-field__remove {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
}

.custom-field:hover .custom-field__remove {
    opacity: 0.6;
}

.custom-field__remove:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

/* Add Field Button */
.custom-panel__add-field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 4px 0;
    padding: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.custom-panel__add-field:hover {
    border-color: var(--node-accent, #7C4DFF);
    background: rgba(124, 77, 255, 0.1);
    color: var(--node-accent, #7C4DFF);
}

/* =========================================
   EDIT MODE STYLES
   Panel editing with Add Field dropdown
   ========================================= */

/* Edit mode indicator */
.node-panel.is-edit-mode {
    box-shadow: 0 0 0 2px var(--node-accent, #00D9FF),
                0 8px 32px rgba(0, 0, 0, 0.4);
}

.node-panel.is-edit-mode .node-panel__title {
    cursor: text;
}

/* Add Field Container */
.node-panel__add-field-container {
    position: relative;
    margin: 8px;
}

.node-panel__add-field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.node-panel__add-field:hover {
    border-color: var(--node-accent, #00D9FF);
    background: rgba(0, 217, 255, 0.1);
    color: var(--node-accent, #00D9FF);
}

/* Field Type Dropdown */
.node-panel__field-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 4px;
    background: rgba(20, 20, 25, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.15s ease;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.node-panel__field-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.node-panel__field-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text, #e0e0e0);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.1s ease;
}

.node-panel__field-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.node-panel__field-dropdown-item .dropdown-icon {
    width: 18px;
    text-align: center;
    font-size: 14px;
    opacity: 0.7;
}

/* Field type-specific value styling */
.custom-field__value--textarea {
    min-height: 60px;
    resize: vertical;
    font-family: inherit;
}

.custom-field__value--color {
    width: 100%;
    height: 32px;
    padding: 2px;
    cursor: pointer;
}

/* Edit mode visible indicator on header */
.node-panel.is-edit-mode .node-panel__header::after {
    content: 'EDITING';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--node-accent, #00D9FF);
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================
   iPad/Touch Device Optimizations
   ============================================ */

/* Prevent scroll/pan interference during panel drag */
.node-panel__header {
    touch-action: none;
}

/* Prevent scroll/pan interference during port drag */
.node-port,
.field-port {
    touch-action: none;
}

/* Touch device optimizations - larger touch targets */
@media (pointer: coarse) {
    /* Increase panel header buttons to 44px minimum (Apple HIG) */
    .node-panel__btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    /* Increase port touch targets */
    .node-port {
        min-width: 44px;
        min-height: 44px;
    }

    .field-port {
        min-width: 36px;
        min-height: 36px;
    }

    /* Increase resize handle size for touch */
    .node-panel__resize {
        width: 24px;
        height: 24px;
    }

    .node-panel__resize-edge--right {
        width: 16px;
    }

    .node-panel__resize-edge--bottom {
        height: 16px;
    }

    /* Slightly increase panel header height for easier drag */
    .node-panel__header {
        min-height: 48px;
    }

    /* Increase tap targets on pancake items */
    .node-pancake-item {
        min-height: 44px;
    }

    /* Better spacing between field rows for touch */
    .node-panel__field-row {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}