body {
            background-color: #245c94;
            color: #0F1523;
            /* Faint blueprint grid in light mode */
            background-image:
                linear-gradient(rgba(15, 21, 35, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(15, 21, 35, 0.04) 1px, transparent 1px);
            background-size: 40px 40px;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94A3B8;
        }

        /* Schematic Crosshair Decorative Element */
        .crosshair {
            position: absolute;
            width: 20px;
            height: 20px;
            opacity: 0.15;
        }

        .crosshair::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -10px;
            right: -10px;
            height: 1px;
            background: #0F1523;
        }

        .crosshair::after {
            content: '';
            position: absolute;
            left: 50%;
            top: -10px;
            bottom: -10px;
            width: 1px;
            background: #0F1523;
        }

        .typing-indicator span {
            display: inline-block;
            width: 4px;
            height: 4px;
            background-color: #0F1523;
            border-radius: 50%;
            margin: 0 2px;
            animation: bounce 1.4s infinite ease-in-out both;
        }

        .typing-indicator span:nth-child(1) {
            animation-delay: -0.32s;
        }

        .typing-indicator span:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes bounce {

            0%,
            80%,
            100% {
                transform: scale(0);
                opacity: 0.3;
            }

            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Sidebar Collapse Styles */
        #sidebar {
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #sidebar.collapsed {
            width: 64px;
            /* Matches Tailwind w-16 */
        }

        #sidebar.collapsed .sidebar-text {
            display: none;
        }

        #sidebar.collapsed .sidebar-header {
            justify-content: center;
            padding: 0;
        }

        #sidebar.collapsed .nav-link {
            justify-content: center;
            padding-left: 0;
            padding-right: 0;
            gap: 0;
        }

        #sidebar.collapsed .footer-content {
            justify-content: center;
        }

        /* Workflow Node Styles */
        .node-path {
            stroke: #94A3B8;
            stroke-width: 2;
            fill: none;
        }

        .node-path-animated {
            stroke: #3B82F6;
            stroke-width: 3;
            fill: none;
            stroke-dasharray: 8 8;
            animation: flow 1s linear infinite;
        }

        .node-path-hover {
            stroke: #EF4444;
            stroke-width: 2.5;
            fill: none;
            stroke-dasharray: 5 4;
        }

        @keyframes flow {
            to {
                stroke-dashoffset: -16;
            }
        }

        .node-card {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: transform 0.1s, box-shadow 0.1s;
        }

        .node-card:active {
            transform: scale(0.98);
        }

        .node-port {
            width: 12px;
            height: 12px;
            background: #fff;
            border: 2px solid #94A3B8;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: crosshair;
        }

        .node-port.input {
            left: -6px;
        }

        .node-port.output {
            right: -6px;
        }

        .node-port:hover {
            border-color: #3B82F6;
            background: #E0E7FF;
        }