/* ========================================= */
/* LAYOUT STYLES: Структура холста и контейнеров */
/* ========================================= */

.node, .image-node, .todo-item {
    /* Браузер сам пропустит этапы рендеринга, если нода за экраном */
    content-visibility: auto;
    /* Укажите примерные средние размеры вашей ноды. 
       Это нужно, чтобы скроллбар и холст не прыгали при появлении ноды на экране */
    contain-intrinsic-size: 200px 140px;
}


#viewport {
    position: relative;
    overflow: hidden; /* Чтобы холст не вылезал за границы экрана */
    width: 100vw;
    height: 100vh;
    
    /* Перенесенные свойства вашей сетки */
    background-image: 
        linear-gradient(to right, rgba(0, 255, 136, 0.15) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(0, 255, 136, 0.15) 2px, transparent 2px),
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 2px, transparent 2px);
}


/* Бесконечный холст (Canvas) */
#canvas {
    position: absolute;
    width: 1000px;
    height: 1000px;
    top: 0;
    left: 0;
    transform-origin: 0 0; /* Важно: трансформация должна идти от левого верхнего угла! */
}

.chunk-label {
    position: absolute;
    width: 100px;
    color: rgba(0, 255, 136, 0.8);
    font-family: sans-serif;
    font-weight: bold;
    pointer-events: none;
    transform: translate(-50%, -50%);
    /* ЗАПРЕТ ПЕРЕНОСА СТРОК */
    white-space: nowrap; 
}


/* Слой для линий соединения (SVG) */
#connections-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50000;
    pointer-events: none; /* Чтобы слой не мешал кликать по нодам */
    overflow: visible;    /* Чтобы линии не обрезались по краям */
    z-index: 69;
}

.connection-line {
    stroke: var(--yellow); 
    stroke-width: 3;  /* <-- Толщина линии */
    fill: none;       /* <-- Линия не закрашена, только контур */
    z-index: 69;
    display: block; 
    visibility: visible; 
    opacity: 1;
}


/* Контейнер для всех нод (для управления их позиционированием) */
#nodes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


/* Рамка группового выделения */
#selection-marquee {
    position: absolute;
    border: 1px dashed #00ff88;
    background: rgba(0, 255, 136, 0.1);
    pointer-events: none;
    z-index: 90;
}


.node-view-mode {
    white-space: pre-wrap;
    word-break: break-word; /* Чтобы длинные ссылки не вылезали за края ноды */
    overflow-y: hidden;
}