/* ========================================= */
/* NODE STYLES: Базовые стили для всех нод (.node) */
/* ========================================= */

.node {
    position: absolute;
    background: #222;
    border: 3px solid #444;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 10px; /* Фиксированный внутренний отступ для всех нод */
    cursor: move;
    pointer-events: auto; /* Ноды должны реагировать на события */
    z-index: 60;
    box-sizing: border-box;
}

.node a{
    color: #00ff88;
}

.node.selected { 
    border-color: var(--red)!important;
}

/* Текстовое поле внутри ноды (стандартное) */
.node textarea.normal {
    width: 100%;
    height: 100%;
    background: transparent;
    color: #fff;
    border: none;
    resize: none;
    outline: none;
    user-select: text;
}


.node.text-node{
    border-color: var(--blue);
}

.node.image-node{
    border-color: var(--purple);
}

/* Контейнер для изображений */
.node-img-container { width: 100%; height: 100%; overflow: hidden; }
.node-img-container img { width: 100%; height: 100%; object-fit: cover; }

/* Стабильные порты (по умолчанию) */
.port {
    width: 18px;
    height: 18px;
    background: var(--yellow);
    border: 2px solid #111;
    border-radius: 50%;
    position: absolute;
    cursor: crosshair;
    z-index: 70;
}

/* Позиционирование портов */
.port.input { 
    left: -10px; 
    top: 50%; 
    transform: translateY(-50%); 
}
.port.output { 
    right: -10px; 
    top: 50%; 
    transform: translateY(-50%); 
}

/* Ресайзер (угол) */
.resizer {
    width: 12px;
    height: 12px;
    /*background: #555;*/
    background: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      #888888 2px,
      #888888 4px
    );
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize;
    border-radius: 10px 0 4px 0;
}

/* Скрытое текстовое поле (используется для скрытого контента) */
.node > textarea.hidden{
    display: none !important;
}