body {
    margin: 0;
    font-family: sans-serif;
}

#top-svg {
    width: 100vw;
    height: 35vh;
    background: #eef0ff;
    border-bottom: 1px solid #ccc;
}

#bottom-svg {
    width: 100vw;
    height: 65vh;
    background: #f7f7f7;
}

.state-node rect {
    fill: rgb(40,58,160);
}

.ros-node rect {
    fill: rgb(93, 178, 148);
}

rect {
    stroke: black;
    stroke-width: 2;
}

text {
    pointer-events: none;
    fill: white;
    font-size: 20px;
}


.node-label {
    fill: #e3e3e3;
    font-size: 25px;
}

.port {
    fill: white;
    /* stroke: black; */
    stroke-width: 2;
    cursor: pointer;
}

.port:hover {
    fill: yellow;
}

.port[data-type="topic"] {
    stroke: #000000;
    fill: rgb(234, 114, 232);
}

.port[data-type="service"] {
    stroke: #000000;
    fill: rgb(248, 196, 53);
}

.port[data-type="action"] {
    stroke: #000000;
    fill: rgb(243, 124, 124);
}

.port-label {
    fill: #000000;
    font-size: 12px;
    pointer-events: none;
}

.port-label.right {
    text-anchor: end;
}


path.wire {
    stroke: black;
    stroke-width: 2;
    fill: none;
    pointer-events: none;
}

.wire {
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px currentColor); /* matches wire color */
}

.packet {
    r: 5;
    fill: white;
    stroke-width: 2;
    filter: drop-shadow(0 0 4px currentColor);
    pointer-events: none;
}


.ghost-wire {
    fill: none;
    stroke: #999;
    stroke-width: 2;
    stroke-dasharray: 6 6;
    pointer-events: none;
}