/* Collapsed Node State */
.node.collapsed .node-content {
    display: none !important;
}

.node.collapsed {
    min-width: 200px !important;
    min-height: auto !important;
    height: auto !important;
    width: auto !important;
    resize: none !important;
    /* Disable resize when collapsed */
}

/* Ensure sockets are hidden or positioned correctly when collapsed if inside content */
/* If sockets are OUTSIDE content (renderSocket helper usually places them in content, but Preview nodes place them differently) */

/* For Preview Nodes specifically which have custom layout */
.node.collapsed .node-preview-content,
.node.collapsed .node-preview-actions,
.node.collapsed>div[style*="position: relative"] {
    /* This targets the wrapper in buildPreviewImageNode that holds sockets */
    display: none !important;
}

/* Force show sockets if they are direct children of node, but our arch puts them in content usually. 
   If they are in content, they are hidden equal to content.
   Users usually want to see sockets even when collapsed to keep connection context.
   However, simpler first step is to hide them. If we want them visible, we need to move them to header or keep a thin strip.
*/

.node-collapse-btn {
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.node-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}