/* Mobile fix (added 2026-07-07): this node-editor UI is desktop-oriented by
   design (drag/drop canvas, side panels). On narrow screens the fixed-width
   side panels + header controls previously overlapped each other and made
   the page unreadable. This just stops the overlap/overflow - it does not
   redesign the editor for touch. */
@media (max-width: 820px) {
    .left-sidebar,
    .right-sidebar {
        display: none !important;
    }

    .app-header {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px;
        row-gap: 6px;
    }

    .header-left {
        min-width: 0;
        gap: 8px;
    }

    .header-right {
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }

    .header-center {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .version,
    .workflow-status {
        display: none;
    }

    .workflow-name-input {
        width: 140px;
    }

    /* utils.js sets this notification's position via inline style, so we
       need !important to win over it and keep it inside the viewport
       instead of covering the header. */
    .notification {
        top: auto !important;
        bottom: 12px !important;
        right: 12px !important;
        left: 12px !important;
    }

    .chat-panel {
        width: auto !important;
        left: 12px;
        right: 12px;
    }

    /* The draggable zoom widget floats via position:absolute (bottom/left)
       relative to the viewport and would otherwise sit on top of the
       execution log panel once the side panels are hidden above. Move it
       clear of the log panel. */
    #zoomPanel.zoom-controls {
        bottom: 232px;
        left: 12px;
    }
}