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

.node {
    position: absolute;
    background: #222;
    border: 3px solid #444;
    border-radius: 6px;
    display: flex;
    flex-direction: column;

    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; }




/* ==========================================
   СУЩНОСТИ ПОРТОВ И ТОЧКИ СВЯЗИ
   ========================================== */
/* Невидимые вертикальные столбцы-контейнеры для портов */
.node-block-type .ports-column {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 10;
}
.node-block-type .left-ports { left: 0; }
.node-block-type .right-ports { right: 0; }

/* Абсолютные контейнеры-сущности для каждого отдельного порта (id="node_..._in0") */
.node-block-type .port-entity {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 10;
    transform: translateY(-50%); /* Центрирование относительно топ-процента */
}

/* Привязка сущностей портов к левому или правому краю */
.node-block-type .left-ports .port-entity { left: 0; }
.node-block-type .right-ports .port-entity { right: 0; }


.port-entity .port.input,
.port-entity .port.output{
    background-color: var(--yellow);
}


.port-entity.red .port {
    background-color: var(--red);
}
.port-entity.green .port {
    background-color: var(--green);
}
.port-entity.blue .port {
    background-color: var(--blue);
}
.port-entity.yellow .port {
    background-color: var(--yellow);
}


/* Корректный сдвиг кружков за границы блока */
.node-block-type .left-ports .port { left: -7px; }
.node-block-type .right-ports .port { right: -7px; }




/* Стабильные порты (по умолчанию) */
.port {
    width: 18px;
    height: 18px;
    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;
}