.workflow-node {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.workflow-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.strat-node {
    cursor: grab;
    position: absolute;
}
.strat-node:active { cursor: grabbing; }

/* SVG Line Animation */
.flow-line {
    stroke-dasharray: 10;
    animation: flow 1s linear infinite;
}
@keyframes flow {
    to { stroke-dashoffset: -20; }
}
.hide { display: none !important; }
.active-tab { background-color: #2563EB; color: white; }
.inactive-tab { color: #94A3B8; hover:text-white; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ─── Hamburger — always visible, allows collapsing sidebar on all sizes ─── */
#hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation; /* eliminates 300ms tap delay on mobile */
}

/* ─── Header needs position so z-10 creates a stacking context ─── */
header {
    position: relative;
    z-index: 10;
}

/* ─── Sidebar overlay — inactive by default ─── */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 50;          /* above header (z-10) but below sidebar (z-60) */
    backdrop-filter: blur(2px);
    cursor: pointer;
}
#sidebar-overlay.active {
    display: block;
}

/* ─── Desktop breakpoint (>=768px): sidebar collapses in-flow ─── */
@media (min-width: 768px) {
    #sidebar {
        transition: width 0.25s ease-in-out, opacity 0.25s ease-in-out;
        overflow: hidden;
    }
    #sidebar.sidebar-closed {
        width: 0;
        opacity: 0;
        border: none;
    }
    /* Prevent overlay from ever showing on desktop */
    #sidebar-overlay {
        display: none !important;
    }
    /* Console follows sidebar width */
    #console-overlay {
        transition: left 0.25s ease-in-out;
    }
    #sidebar.sidebar-closed ~ main #console-overlay,
    body.sidebar-closed #console-overlay {
        left: 0;
    }
}

/* ─── Mobile breakpoint (<768px) ─── */
@media (max-width: 767px) {

    /* Sidebar: slide off-screen by default, slide in when .sidebar-open */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 60;
    }
    #sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
    }

    /* Main fills the full width since sidebar is out of flow */
    main {
        width: 100%;
        min-width: 0;
    }

    /* Console overlay — full width on mobile */
    #console-overlay {
        left: 0;
    }

    /* Reduce view padding on small screens */
    #view-agents,
    #view-strategies {
        padding: 1rem;
    }

    /* Strategy view: stack palette panel above the canvas */
    #view-strategy {
        flex-direction: column;
    }
    #view-strategy > .w-64:first-child {
        width: 100%;
        max-height: 10rem;
        border-right: none;
        border-bottom: 1px solid #1e293b;
        overflow-y: auto;
    }

    /* Workflow canvas toolbar: wrap on small screens */
    #view-workflow > .absolute.top-6.right-6 {
        position: relative;
        top: auto;
        right: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
        z-index: 50;
    }
    #view-workflow > .absolute.top-6.right-6 input[type="text"] {
        width: 100%;
    }

    /* Strategy builder toolbar: wrap */
    #strategy-canvas > .absolute.top-4 > .flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Agent builder grids: collapse to single column */
    #view-agents .grid.grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* Modals: fill screen width with margin, cap height, allow scroll */
    #execute-strategy-modal > div,
    #connector-modal > div,
    #login-modal > div {
        width: calc(100% - 2rem);
        max-width: 500px;
        max-height: 90dvh;
        margin: 0 1rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #execute-strategy-modal > div > div:not(:first-child),
    #connector-modal > div > div:not(:first-child) {
        overflow-y: auto;
        flex: 1;
    }

    /* Left-side toolbar in workflow canvas: stack above canvas */
    #view-workflow > .absolute.top-6.left-6 {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
        z-index: 50;
    }
}