/* Global Styles and Variables */
:root {
    --n8n-primary: #6366f1;
    --n8n-primary-dark: #5255cc;
    --n8n-bg: #f5f7fb;
    --n8n-sidebar: #243447;
    --n8n-node-bg: #ffffff;
    --n8n-border: #e1e5e9;
    --n8n-text: #1f2933;
    --n8n-muted: #6b7280;
    --n8n-connection-stroke: #a3b6d6;
    --n8n-connection-selected-stroke: #4c6ef5;
    --n8n-connection-arrow: #6366f1;
    --n8n-connector-input: #d9e2f3;
    --n8n-connector-output: #6366f1;
    --n8n-connector-border: #ffffff;
    --n8n-overlay: rgba(36, 52, 71, 0.72);
    --n8n-success: #24b47e;
    --n8n-warning: #f59e0b;
}

/* Add styles for the workflow visualization */
.n8n-workflow-container {
    margin-bottom: 20px;
}

.n8n-workflow-header h3 {
    color: var(--n8n-text);
    margin-bottom: 10px;
}

.n8n-workflow-header p {
    color: var(--n8n-muted);
    font-size: 13px;
    margin-top: 0;
}

.n8n-workflow-canvas {
    min-height: 200px;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 12px;
    background: white;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
}

.n8n-workflow-canvas.drag-over {
    border-color: var(--n8n-primary);
    background-color: #fff7f6;
}

.n8n-canvas-placeholder {
    text-align: center;
    padding: 30px;
    color: var(--n8n-muted);
}

.n8n-canvas-placeholder i {
    font-size: 24px;
    margin-bottom: 10px;
}

.n8n-suggestions-panel h4 {
    margin: 0 0 10px 0;
    color: var(--n8n-text);
}

.n8n-suggestions-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
}

.n8n-suggestion-card {
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    padding: 12px;
    background: white;
    cursor: grab;
    transition: all 0.2s ease;
}

.n8n-suggestion-card:hover {
    border-color: var(--n8n-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.n8n-suggestion-card.dragging {
    opacity: 0.5;
}

.n8n-workflow-node {
    background: white;
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.n8n-workflow-node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.n8n-workflow-node-title {
    font-size: 13px;
    color: var(--n8n-text);
    font-weight: bold;
}

.n8n-workflow-node-remove {
    padding: 4px;
    font-size: 12px;
    min-width: auto;
}

.n8n-workflow-node-content {
    font-size: 12px;
    color: var(--n8n-muted);
}

.n8n-value-selector-container {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.n8n-operator-select,
.n8n-value-input {
    flex: 1;
    min-width: 120px;
    font-size: 12px;
    padding: 6px;
}

.n8n-add-button {
    padding: 6px 10px;
    font-size: 12px;
}

@media (max-width: 1200px) {
    .n8n-container {
        grid-template-columns: minmax(240px, 240px) 1fr minmax(300px, 300px);
    }

    .n8n-sidebar {
        width: 240px;
    }

    .n8n-panel {
        width: 300px;
    }
}

@media (max-width: 900px) {
    .n8n-container {
        grid-template-columns: 1fr;
        grid-template-rows: 60px 1fr;
    }

    .n8n-sidebar,
    .n8n-panel {
        display: none;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Add to the existing CSS section */
#trigger-suggestions-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    padding: 8px;
    background: #f8fafc;
}

#trigger-suggestions-list .n8n-btn {
    background: white;
    border: 1px solid var(--n8n-border);
    text-align: left;
    margin-bottom: 6px;
}

#trigger-suggestions-list .n8n-btn:hover {
    background: #f1f5f9;
    border-color: var(--n8n-primary);
}

/* Build type buttons in empty state */
.build-type-buttons {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.build-type-buttons .n8n-btn,
.build-type-buttons .n8n-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    width: 100%;
}

.build-type-buttons .n8n-btn {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: var(--n8n-text);
    box-shadow: none;
    border-radius: 8px;
}

.build-type-buttons .n8n-btn:hover {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.6);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.build-type-buttons .n8n-btn-primary {
    border-radius: 8px;
}

.build-type-buttons .n8n-btn i,
.build-type-buttons .n8n-btn-primary i {
    margin-right: 8px;
}

/* Custom mapping action styling */
.n8n-sidebar-item[data-name="custom_mapping"].integration-mode {
    border: 2px solid var(--n8n-primary);
    border-radius: 6px;
    margin: 10px;
}

.custom-mapping-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.custom-mapping-stack.integration-mode {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.custom-mapping-empty {
    font-size: 12px;
    color: var(--n8n-muted);
    background: rgba(148, 163, 184, 0.15);
    border-radius: 6px;
    padding: 8px;
    text-align: left;
}

.custom-mapping-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fff1ed;
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.custom-mapping-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.4);
}

.custom-mapping-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    text-align: left;
}

.custom-mapping-row-target {
    font-weight: 600;
    font-size: 12px;
    color: var(--n8n-text);
}

.custom-mapping-row-expression {
    font-size: 11px;
    color: rgba(15, 23, 42, 0.68);
    word-break: break-word;
}

.custom-mapping-row-delete {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.custom-mapping-row-delete:hover {
    color: #b91c1c;
}

.custom-mapping-add {
    border: 1px dashed rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.08);
    color: var(--n8n-primary);
    border-radius: 6px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.custom-mapping-add:hover {
    background: rgba(99, 102, 241, 0.16);
    border-color: var(--n8n-primary);
    transform: translateY(-1px);
}

.custom-mapping-config-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.custom-mapping-config-empty {
    font-size: 13px;
    color: var(--n8n-muted);
    background: #f8fafc;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    border-radius: 8px;
    padding: 10px 12px;
}

.custom-mapping-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.custom-mapping-config-row:hover {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.custom-mapping-config-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.custom-mapping-config-row-main strong {
    font-size: 13px;
    color: var(--n8n-text);
}

.custom-mapping-config-row-main span {
    font-size: 12px;
    color: var(--n8n-muted);
    word-break: break-word;
}

.custom-mapping-config-delete {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.custom-mapping-config-delete:hover {
    color: #b91c1c;
}

.n8n-node.integration-custom-mapping,
.n8n-node.integration-custom-mapping.selected {
    min-width: 320px;
    max-width: 500px;
    min-height: 100px;
    max-height: 500px;
    width: auto;
}

.n8n-node.integration-custom-mapping .n8n-node-content,
.n8n-node.integration-custom-mapping.selected .n8n-node-content {
    min-height: 220px;
    max-height: 360px;
    overflow-y: auto;
    padding: 12px;
    box-sizing: border-box;
}

/* Add scrollable behavior to sidebar */
.n8n-sidebar-scrollable {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    margin-right: -8px;
}

.n8n-btn-primary:disabled {
    opacity: 1;
    cursor: pointer;
    background: var(--n8n-primary);
    color: white;
}

.n8n-refresh-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.n8n-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.n8n-sidebar-scrollable::-webkit-scrollbar {
    width: 6px;
}

#trigger-suggestions-modal-list {
    display: grid;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
    margin: 16px 0;
    padding-right: 8px;
}

/* Add scrollbar styling for better UX */
#trigger-suggestions-modal-list::-webkit-scrollbar {
    width: 8px;
}

#trigger-suggestions-modal-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#trigger-suggestions-modal-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

#trigger-suggestions-modal-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.n8n-sidebar-scrollable::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.n8n-sidebar-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.n8n-sidebar-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Add scrollable behavior to configuration panel */
.n8n-panel-scrollable {
    flex: 1;
    overflow-y: auto;
    padding-right: 12px;
    margin-right: -12px;
    /* Add smooth scrolling */
    scroll-behavior: smooth;
}

.n8n-panel-scrollable::-webkit-scrollbar {
    width: 6px;
}

.n8n-panel-scrollable::-webkit-scrollbar-track {
    background: rgba(36, 52, 71, 0.05);
    border-radius: 3px;
}

.n8n-panel-scrollable::-webkit-scrollbar-thumb {
    background: rgba(36, 52, 71, 0.2);
    border-radius: 3px;
}

.n8n-panel-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(36, 52, 71, 0.3);
}

/* Add scrollable behavior to configuration panel */
.n8n-panel-scrollable1 {
    flex: .5;
    overflow-y: auto;
    padding-right: 12px;
    margin-right: -12px;
}

.n8n-panel-scrollable1::-webkit-scrollbar {
    width: 6px;
}

.n8n-panel-scrollable1::-webkit-scrollbar-track {
    background: rgba(36, 52, 71, 0.05);
    border-radius: 3px;
}

.n8n-panel-scrollable1::-webkit-scrollbar-thumb {
    background: rgba(36, 52, 71, 0.2);
    border-radius: 3px;
}

.n8n-panel-scrollable1::-webkit-scrollbar-thumb:hover {
    background: rgba(36, 52, 71, 0.3);
}

/* Ensure proper layout for scrollable areas */
.n8n-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.n8n-sidebar-header {
    flex-shrink: 0;
}

.n8n-sidebar-search {
    flex-shrink: 0;
}

.n8n-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.n8n-panel>.n8n-panel-section:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.n8n-panel>.n8n-panel-section:first-child>h3 {
    flex-shrink: 0;
}

.n8n-panel>.n8n-panel-section:first-child>#config-panel {
    flex: 1;
    overflow-y: auto;
}

.hidden {
    display: none !important;
}

/* n8n Main Layout */
.n8n-container {
    display: grid;
    grid-template-columns: 280px 1fr 350px;
    grid-template-rows: 60px 1fr;
    height: 100vh;
}

/* Visual Trigger Builder Styles */
.n8n-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.n8n-modal-content {
    background: white;
    border-radius: 10px;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.n8n-modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.n8n-modal-header h2 {
    margin: 0;
    color: #333;
}

.n8n-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.n8n-modal-body {
    padding: 0;
    flex: 1;
    overflow: auto;
}

.n8n-trigger-builder-container {
    display: flex;
    height: 70vh;
}

.n8n-trigger-palette {
    width: 250px;
    border-right: 1px solid #eee;
    padding: 20px;
    background: #f9f9f9;
    overflow-y: auto;
}

.n8n-trigger-palette h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #555;
    font-size: 16px;
}

.n8n-palette-item,
.n8n-operator-item,
.n8n-logical-item {
    padding: 10px;
    margin-bottom: 8px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: grab;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.n8n-palette-item:hover,
.n8n-operator-item:hover,
.n8n-logical-item:hover {
    background: #e9f5ff;
    border-color: #4da6ff;
    transform: translateY(-2px);
}

.n8n-palette-item i,
.n8n-operator-item i,
.n8n-logical-item i {
    margin-right: 10px;
    color: #4da6ff;
}

.n8n-trigger-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.n8n-canvas-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.n8n-canvas-header h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #555;
}

.n8n-expression-preview {
    background: #f0f8ff;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
}

.n8n-preview-text {
    margin-top: 5px;
    color: #333;
    min-height: 20px;
}

.n8n-canvas-dropzone {
    flex: 1;
    padding: 20px;
    position: relative;
}

.n8n-dropzone-placeholder {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ccc;
    border-radius: 10px;
    color: #999;
}

.n8n-dropzone-placeholder i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #ccc;
}

.n8n-dropzone-active {
    background: #e6f7ff;
    border-color: #4da6ff !important;
}

.n8n-condition-elements {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 100%;
}

.n8n-condition-element {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    min-width: 150px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.n8n-element-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.n8n-element-type {
    font-weight: bold;
    color: #555;
    font-size: 12px;
}

.n8n-element-remove {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
}

.n8n-element-input,
.n8n-element-select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.n8n-element-value {
    padding: 5px;
    background: #f0f0f0;
    border-radius: 4px;
    text-align: center;
}

.n8n-canvas-actions {
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.9;
    }
}

.n8n-empty-state i {
    animation: pulse 2.4s infinite;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--n8n-bg);
    color: var(--n8n-text);
    line-height: 1.5;
}

/* n8n Main Layout */
.n8n-container {
    display: grid;
    grid-template-columns: minmax(280px, 280px) 1fr minmax(350px, 350px);
    grid-template-rows: 60px 1fr;
    min-height: 100vh;
    height: auto;
    gap: 16px;
    /* Add proper overflow handling */
    overflow: hidden;
}

/* Header */
.n8n-header {
    grid-column: 1 / -1;
    background: white;
    border-bottom: 1px solid var(--n8n-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05);
    /* Remove fixed height and allow auto-sizing */
    min-height: 60px;
    /* Allow the header to grow based on content */
}

.n8n-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--n8n-primary);
}

.n8n-actions {
    display: flex;
    gap: 12px;
    /* Allow actions to wrap if needed */
    flex-wrap: wrap;
}

.n8n-header-separator {
    width: 1px;
    height: 20px;
    background-color: var(--n8n-border);
    margin: 0 4px;
}

/* Dropdown Menu Styles */
.n8n-dropdown {
    position: relative;
    display: inline-block;
}

.n8n-dropdown-menu {
    display: block;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    background-color: white;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    border-radius: 8px;
    border: 1px solid var(--n8n-border);
    padding: 8px;
    animation: dropdown-fade-in 0.15s ease-out;
}

@keyframes dropdown-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.n8n-dropdown-menu button {
    color: var(--n8n-text);
    padding: 8px 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-size: 13px;
    border-radius: 6px;
    margin: 2px 0;
}

.n8n-dropdown-menu button:hover {
    background-color: #f1f5f9;
}

.n8n-dropdown-divider {
    height: 1px;
    margin: 8px 0;
    background-color: var(--n8n-border);
}

/* Connection Lines */
.n8n-connection-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.n8n-connection-svg .n8n-connection {
    position: static;
    height: auto;
    background: none;
    stroke: var(--n8n-connection-stroke);
    stroke-width: 2.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0px 6px 12px rgba(15, 23, 42, 0.08));
    transition: stroke-width 0.2s ease, stroke 0.2s ease, filter 0.2s ease;
    shape-rendering: geometricPrecision;
}

.n8n-connection-svg .n8n-connection:hover {
    stroke: var(--n8n-connection-selected-stroke);
    filter: drop-shadow(0px 8px 16px rgba(15, 23, 42, 0.18));
}


/* Sidebar */
.n8n-sidebar {
    background: var(--n8n-sidebar);
    color: white;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.n8n-sidebar-header {
    padding: 0 24px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.n8n-sidebar-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.n8n-sidebar-header p {
    margin: 6px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.n8n-sidebar-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
}

.n8n-sidebar-search i {
    color: rgba(255, 255, 255, 0.7);
}

.n8n-sidebar-search input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    font-size: 13px;
}

.n8n-sidebar-search input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.n8n-sidebar-search input:focus {
    outline: 2px solid rgba(255, 255, 255, 0.35);
}

/* Search input for modal dialogs with light backgrounds */
.n8n-sidebar-search.modal-search input {
    background: #ffffff;
    color: var(--n8n-text);
    border: 1px solid var(--n8n-border);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.n8n-sidebar-search.modal-search input::placeholder {
    color: rgba(107, 114, 128, 0.7);
}

.n8n-sidebar-search.modal-search input:focus {
    outline: none;
    border-color: var(--n8n-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

#sidebar-groups {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 12px;
}

.n8n-sidebar-section {
    padding: 8px 0 12px;
}

.n8n-sidebar-section-title {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
    margin: 0 24px 8px;
    color: rgba(255, 255, 255, 0.55);
}

.n8n-trigger-hint {
    margin: 0 24px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

#sidebar-empty-state {
    margin: 0 24px 24px;
    font-size: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
}

.n8n-panel {
    background: white;
    border-left: 1px solid var(--n8n-border);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: visible;
}

/* Buttons */
.n8n-btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--n8n-border);
    background: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--n8n-text);
}

.trigger-suggestion-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--n8n-border);
    border-radius: 6px;
    background: #fff;
    margin-bottom: 8px;
}

/* Ensure consistent scrollbar appearance */
#trigger-suggestions-modal-list::-webkit-scrollbar {
    width: 8px;
}

#trigger-suggestions-modal-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#trigger-suggestions-modal-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#trigger-suggestions-modal-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.n8n-btn:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.n8n-btn:active,
.n8n-btn.active {
    transform: translateY(0);
    background: #f1f5f9;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.n8n-btn-primary {
    background: var(--n8n-primary);
    color: white;
    padding: auto;
    border: 1px solid var(--n8n-primary);
    border-color: var(--n8n-primary);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.35);
    cursor: pointer;
}


.n8n-btn-primary:hover {
    background: var(--n8n-primary-dark);
}

.n8n-btn-primary:active {
    transform: translateY(0px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.n8n-btn:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.5);
    outline-offset: 2px;
    box-shadow: none;
}

/* Canvas */
.n8n-canvas {
    position: relative;
    overflow: auto;
    background: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.1) 1px, transparent 0);
    background-size: 20px 20px;
    /* Add explicit overflow handling */
    overflow-x: auto;
    overflow-y: auto;
    /* Ensure proper scrolling behavior */
    scrollbar-width: thin;
    scrollbar-color: #6b7280 #f3f4f6;
    /* Prevent content from being clipped */
    clip-path: inset(0);
}

#drop-zone {
    position: relative;
    height: auto;
    min-height: 100%;
    min-width: 100%;
}


/* Nodes */
.n8n-node {
    position: absolute;
    width: 180px;
    min-height: 84px;
    background: var(--n8n-node-bg);
    border: 1px solid var(--n8n-border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    /* Ensure nodes don't overflow canvas */
    max-width: 100%;
    max-height: 100%;
    z-index: 2;
}

.n8n-node:hover {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
}

.n8n-node:active {
    cursor: grabbing;
}

.n8n-node.selected {
    border-color: var(--n8n-primary);
    box-shadow: 0 24px 45px rgba(99, 102, 241, 0.2);
}

.n8n-node:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.4);
    outline-offset: 2px;
}

.n8n-node-header {
    padding: 10px 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border-radius: 10px 10px 0 0;
}

.n8n-node-header div[style*="flex: 1;"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.n8n-node-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n8n-muted);
    opacity: 0.6;
    transition: all 0.2s ease;
}

.n8n-node-delete:hover {
    background: #ffebee;
    color: #c62828;
    opacity: 1;
}

.n8n-node-delete:focus-visible {
    outline: 2px solid var(--n8n-primary);
}

.n8n-node-content {
    display: block;
    padding: 10px 12px 12px;
    font-size: 12px;
    color: var(--n8n-muted);
    white-space: normal;
    max-height: 110px;
    overflow-y: auto;
}


.n8n-node-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.n8n-node-connector {
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--n8n-connector-input);
    border: 2px solid var(--n8n-connector-border);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
    position: absolute;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.n8n-node-connector.input {
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--n8n-connector-input);
}

.n8n-node-connector.output {
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--n8n-connector-output);
}

.n8n-node-connector.valid-target {
    background: var(--n8n-success) !important;
    transform: translateY(-50%) scale(1.25) !important;
}

.n8n-node-connector.connecting-source {
    animation: pulse-connector 1.5s infinite;
}

@keyframes pulse-connector {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.2);
    }
}


.n8n-node-connector:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.22);
}

.n8n-node-connector.input:hover {
    background: var(--n8n-connection-selected-stroke);
}

.n8n-node-connector.output:hover {
    background: var(--n8n-connection-arrow);
}

.n8n-node-connector:focus-visible {
    outline: 3px solid rgba(76, 110, 245, 0.35);
    outline-offset: 2px;
}

/* Connection Lines */
.n8n-connection {
    position: absolute;
    height: 2px;
    background: none;
    stroke: var(--n8n-connection-stroke);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 0 0;
    z-index: -1;
}

.n8n-connection-svg .n8n-connection.selected {
    stroke: var(--n8n-connection-selected-stroke);
    stroke-width: 3.4;
    filter: drop-shadow(0px 10px 22px rgba(15, 23, 42, 0.24));
}

.n8n-connection-svg .n8n-connection-hit:hover+.n8n-connection:not(.selected) {
    stroke: var(--n8n-connection-selected-stroke);
    stroke-width: 3;
    filter: drop-shadow(0px 8px 16px rgba(15, 23, 42, 0.18));
}

.n8n-connection.selected {
    stroke: var(--n8n-connection-selected-stroke);
    filter: drop-shadow(0px 8px 18px rgba(15, 23, 42, 0.24));
}

.n8n-connection-delete-btn {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.8);
}

.n8n-connection-delete-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.n8n-connection-delete-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.n8n-connection-hit {
    cursor: pointer;
}

.n8n-connection-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid var(--n8n-primary);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    position: absolute;
}

/* Sidebar Items */
.n8n-sidebar-item {
    padding: 12px 16px;
    margin: 4px 16px;
    cursor: grab;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid transparent;
    transition: background 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.n8n-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateX(4px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.25);
}

.n8n-sidebar-item:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
}

.n8n-sidebar-item:active {
    cursor: grabbing;
    user-select: none;
    transform: translateX(2px) scale(0.99);
}

.n8n-sidebar-item.hidden {
    display: none;
}


/* Panel Sections */
.n8n-panel-section {
    padding: 24px;
    border-bottom: 1px solid var(--n8n-border);
    margin: 0 0 0 14px;
    position: relative;
}

.n8n-panel-section:first-of-type {
    flex: 1;
    overflow-y: auto;
}

.n8n-connection-panel {
    padding: 16px;
    border: 1px solid var(--n8n-border);
    border-radius: 10px;
    background: #f9fafb;
    display: grid;
    gap: 12px;
    font-size: 13px;
}

.n8n-connection-panel__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 500;
    color: var(--n8n-text);
}

.n8n-connection-panel__label {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--n8n-muted);
}

.n8n-connection-panel__pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: white;
    border: 1px solid var(--n8n-border);
}

.n8n-connection-panel__arrow {
    font-size: 16px;
    color: var(--n8n-muted);
}

.n8n-connection-panel__tips {
    margin: 0;
    padding-left: 18px;
    color: var(--n8n-muted);
    display: grid;
    gap: 6px;
}

.n8n-connection-panel__tips li {
    line-height: 1.4;
}

#config-panel {
    display: grid;
    gap: 18px;
}

.n8n-node-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid var(--n8n-border);
    border-radius: 10px;
    padding: 12px 14px;
}

.n8n-node-summary strong {
    font-size: 14px;
    color: var(--n8n-text);
}

.n8n-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(99, 102, 241, 0.12);
    color: var(--n8n-primary);
    font-weight: 600;
}

.n8n-muted-text {
    font-size: 12px;
    color: var(--n8n-muted);
}

.n8n-config-hint {
    font-size: 12px;
    color: var(--n8n-muted);
    background: rgba(15, 23, 42, 0.04);
    border: 1px dashed var(--n8n-border);
    border-radius: 8px;
    padding: 10px 12px;
}

.n8n-config-actions {
    display: grid;
    gap: 10px;
}

.n8n-config-placeholder {
    text-align: center;
    color: var(--n8n-muted);
    font-size: 13px;
    padding: 24px;
    border: 1px dashed var(--n8n-border);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.04);
}

.n8n-dependency-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.n8n-dependency-pill {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 11px;
    color: var(--n8n-text);
}

.n8n-panel-section h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--n8n-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.n8n-form-group {
    margin-bottom: 18px;
}

.n8n-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--n8n-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.n8n-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--n8n-border);
    font-size: 13px;
    background: #ffffff;
    color: var(--n8n-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.n8n-input::placeholder {
    color: rgba(107, 114, 128, 0.7);
}

.n8n-input:focus {
    outline: none;
    border-color: var(--n8n-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

select.n8n-input {
    height: auto;
    min-height: 42px;
}

textarea.n8n-input {
    resize: vertical;
}

.n8n-input#parameters-input {
    max-height: 150px;
    overflow-y: auto;
}

/* JSON Output */
.n8n-json-output {
    background: #f8fafc;
    border: 1px solid var(--n8n-border);
    border-radius: 10px;
    padding: 16px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.6;
    height: 220px;
    overflow: auto;
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.05);
}

/* Empty State */
.n8n-empty-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--n8n-muted);
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 16px;
    padding: 36px 32px;
    width: min(90vw, 360px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    z-index: 3;
}

.n8n-empty-state h3 {
    margin: 12px 0 8px;
    font-size: 18px;
    color: var(--n8n-text);
}

.n8n-empty-state p {
    margin: 0 0 12px;
    font-size: 13px;
}

.n8n-empty-state ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 12px;
    text-align: left;
}

.n8n-empty-state ul li {
    position: relative;
    padding-left: 18px;
    color: var(--n8n-text);
}

.n8n-empty-state ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--n8n-primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.n8n-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--n8n-primary);
    opacity: 0.7;
}

/* Zoom Controls */
.n8n-zoom-controls {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 8px;
    background: white;
    border: 1px solid var(--n8n-border);
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(6px);
    z-index: 100;
}

/* Responsive adjustments for zoom controls */
@media (max-width: 768px) {
    .n8n-zoom-controls {
        top: 90px;
        left: 11px;
        padding: 6px;
        gap: 6px;
    }

    .n8n-zoom-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

.n8n-zoom-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n8n-text);
    transition: background 0.2s, transform 0.2s;
}

.n8n-zoom-btn:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
}

.n8n-zoom-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.n8n-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.n8n-toast {
    min-width: 220px;
    max-width: 320px;
    background: var(--n8n-sidebar);
    color: white;
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.4);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toast-slide-in 0.35s ease, toast-fade-out 0.35s ease 2.65s forwards;
}

.n8n-toast i {
    color: var(--n8n-primary);
}

@keyframes toast-slide-in {
    from {
        transform: translateY(16px) translateX(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

@keyframes toast-fade-out {
    to {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes progress-animation {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.n8n-help-overlay {
    position: fixed;
    inset: 0;
    background: var(--n8n-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 240;
}

.n8n-help-content {
    background: white;
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    padding: 28px 32px 32px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.16);
}

.n8n-help-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.n8n-help-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--n8n-text);
}

.n8n-help-header p {
    margin: 6px 0 0;
    color: var(--n8n-muted);
    font-size: 13px;
}

.n8n-help-steps {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 12px;
    color: var(--n8n-text);
}

.n8n-help-steps li {
    font-size: 14px;
}

.n8n-help-steps strong {
    color: var(--n8n-primary);
}

.n8n-help-steps em {
    font-style: normal;
    color: var(--n8n-text);
    background: rgba(99, 102, 241, 0.12);
    padding: 2px 6px;
    border-radius: 6px;
}

.n8n-help-actions {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.n8n-help-checkbox {
    font-size: 12px;
    color: var(--n8n-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.n8n-help-checkbox input {
    width: 16px;
    height: 16px;
}

/* Integration Mode Modal Styles */
.integration-modal-overlay {
    z-index: 1500;
}

/* Three Column Layout */
.integration-three-column-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1.15fr;
    gap: 20px;
    min-height: 520px;
    height: calc(100vh - 320px);
    margin-bottom: 24px;
}

.select-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--n8n-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.integration-column {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    background: white;
    overflow: hidden;
}

.column-header {
    padding: 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--n8n-border);
}

.column-header h3 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--n8n-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--n8n-primary);
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: help;
}

.column-header p {
    margin: 0;
    font-size: 12px;
    color: var(--n8n-muted);
    line-height: 1.4;
}

.column-content {
    flex: 1;
    padding: 16px;
    overflow: hidden;
}

/* Sample Events Column */
.sample-select-container {
    margin-bottom: 16px;
}

.sample-select-container select {
    width: 100%;
}

.sample-select-status {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--n8n-muted);
}

.sample-select-status i {
    font-size: 13px;
    color: inherit;
}

.sample-select-status.error {
    color: #dc2626;
}

.sample-select-status.loading {
    color: var(--n8n-primary);
}

/* JSON Editor */
.json-editor-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.json-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.validation-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.validation-status i {
    color: var(--n8n-success);
}

.validation-status.has-error i {
    color: #dc2626;
}

.validation-status.has-error span {
    color: #dc2626;
}

.editor-actions {
    display: flex;
    gap: 6px;
}

.json-editor-wrapper {
    flex: 1;
    display: flex;
    border: 1px solid var(--n8n-border);
    border-radius: 6px;
    overflow: hidden;
    background: white;
}

.json-textarea-container {
    flex: 1;
    border: 1px solid var(--n8n-border);
    border-radius: 6px;
    background: #ffffff;
    display: flex;
    /* Use flexbox to manage child size */
}

.json-textarea {
    height: 100%;
    /* Make textarea fill the container */
    width: 100%;
    min-height: 400px;
    border: none;
    outline: none;
    resize: none;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px;
    background: transparent;
    white-space: pre;
}

.json-textarea-container.scrollable {
    max-height: 400px;
    overflow-y: auto;
    /* Move overflow to the scrollable container */
}

/* Highlight the selected line in the JSON textarea */
.json-textarea::selection {
    background: rgba(99, 102, 241, 0.3);
}

.json-textarea:focus {
    outline: none;
}

.payload-editor {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.payload-editor-header {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.payload-textarea {
    flex: 1;
    resize: none;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.4;
    min-height: 400px;
}

/* Transformer Column */
.transformer-editor-container {
    max-height: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}

.transformer-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.expression-path-display {
    margin-bottom: 12px;
}

.expression-path-display label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--n8n-text);
}

.path-display {
    background: #f1f5f9;
    border: 1px solid var(--n8n-border);
    border-radius: 4px;
    padding: 6px 8px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 11px;
    color: var(--n8n-text);
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.path-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.12);
    color: var(--n8n-primary);
    font-size: 10px;
}

.path-tip i {
    pointer-events: none;
}

.path-display.has-path {
    background: rgba(99, 102, 241, 0.08);
    border-color: var(--n8n-primary);
}

.clear-path-btn {
    background: none;
    border: none;
    color: var(--n8n-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 2px;
    font-size: 10px;
    transition: all 0.2s ease;
}

.clear-path-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--n8n-primary);
}


.jmes-suggestions {
    margin-top: 8px;
    font-size: 11px;
    color: var(--n8n-muted);
}

ul.jmes-suggestions {
    padding-left: 18px;
}

ul.jmes-suggestions li {
    margin-bottom: 2px;
    line-height: 1.4;
}

.jmes-suggestions--empty {
    margin-top: 8px;
    font-size: 11px;
    color: var(--n8n-muted);
    font-style: italic;
}

.expression-buttons {
    margin-bottom: 12px;
}

.expression-buttons label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--n8n-text);
}

.expression-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}

.expression-btn {
    padding: 4px 8px;
    border: 1px solid var(--n8n-border);
    border-radius: 4px;
    background: white;
    font-size: 11px;
    color: var(--n8n-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Monaco', 'Menlo', monospace;
}

.expression-btn:hover {
    background: #f8fafc;
    border-color: var(--n8n-primary);
}

.expression-btn.selected {
    background: var(--n8n-primary);
    color: white;
    border-color: var(--n8n-primary);
}

.custom-functions {
    margin-bottom: 12px;
}

.custom-functions label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--n8n-text);
}

.functions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 6px;
}

.function-btn {
    padding: 4px 8px;
    border: 1px solid var(--n8n-border);
    border-radius: 4px;
    background: #f8fafc;
    font-size: 11px;
    color: var(--n8n-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Monaco', 'Menlo', monospace;
}

.function-btn:hover {
    background: var(--n8n-primary);
    color: white;
    border-color: var(--n8n-primary);
}

.transformer-editor-header {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.transformer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transformer-textarea {
    width: 100%;
    resize: none;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.4;
    min-height: 400px;
    border: 1px solid var(--n8n-border);
    border-radius: 4px;
    padding: 8px;
    background: white;
}

.transformer-textarea:focus {
    outline: none;
    border-color: var(--n8n-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.transformer-variables {
    border-top: 1px solid var(--n8n-border);
    padding-top: 12px;
}

.variables-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--n8n-text);
}

.variables-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
}

.variable-button {
    padding: 4px 8px;
    background: #f1f5f9;
    border: 1px solid var(--n8n-border);
    border-radius: 4px;
    font-size: 11px;
    color: var(--n8n-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.variable-button:hover {
    background: var(--n8n-primary);
    color: white;
    border-color: var(--n8n-primary);
}

.variables-more {
    font-size: 10px;
    color: var(--n8n-muted);
    padding: 4px 0;
}

/* Output Column */
.output-editor {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.output-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.output-editor-actions {
    display: flex;
    gap: 6px;
}

.output-textarea {
    flex: 1;
    resize: none;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.4;
    background: #f8fafc;
    min-height: 400px;
}

/* Info tooltips */
.info-tooltips {
    position: relative;
}

.info-tooltip {
    position: absolute;
    background: var(--n8n-sidebar);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.info-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--n8n-sidebar);
}

.info-icon:hover+.info-tooltip,
.info-tooltip:hover {
    opacity: 1;
    visibility: visible;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .integration-three-column-layout {
        grid-template-columns: 1fr;
        gap: 16px;
        height: auto;
    }

    .integration-column {
        max-height: 500px;
    }
}

.integration-modal-content {
    width: min(96vw, 1880px);
    max-width: none;
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
}

.integration-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--n8n-border);
}

.integration-modal-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--n8n-text);
}

.integration-modal-subtitle {
    margin: 6px 0 0;
    color: var(--n8n-muted);
    font-size: 13px;
}

.integration-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.unsaved-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--n8n-warning);
}

.unsaved-indicator i {
    color: var(--n8n-warning);
    font-size: 8px;
}

/* Tab Navigation */
.integration-modal-tabs {
    margin-bottom: 24px;
}

.tab-navigation {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--n8n-border);
}

.tab-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    background: none;
    color: var(--n8n-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.tab-button:hover {
    color: var(--n8n-text);
    background: rgba(15, 23, 42, 0.04);
}

.tab-button.active {
    color: var(--n8n-primary);
    border-bottom-color: var(--n8n-primary);
    background: rgba(99, 102, 241, 0.08);
}

/* Tab Content */
.integration-modal-body {
    flex: 1;
    overflow: hidden;
}

.tab-content {
    height: 100%;
    overflow-y: auto;
}

.tab-content h3 {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--n8n-text);
}

/* Raw Data Tab */
.raw-data-tab {
    height: 100%;
}

.raw-data-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.raw-data-header {
    margin-bottom: 16px;
}

.raw-data-header p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--n8n-muted);
}

.json-display-container {
    flex: 1;
    display: flex;
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
}

.json-line-numbers {
    width: 60px;
    background: #e2e8f0;
    border-right: 1px solid var(--n8n-border);
    padding: 8px 0;
    text-align: center;
    user-select: none;
}

.line-number {
    display: block;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--n8n-muted);
    cursor: pointer;
    transition: background 0.2s ease;
}

.line-number:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--n8n-primary);
}

.json-content {
    flex: 1;
    overflow: auto;
    padding: 8px;
}

.json-display {
    margin: 0;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre;
}

.json-display code {
    color: var(--n8n-text);
}

/* Expressions Tab */
.expressions-tab {
    height: 100%;
}

.expressions-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.expressions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
}

.expressions-actions {
    display: flex;
    gap: 8px;
}

.expressions-list {
    flex: 1;
    overflow-y: auto;
}

.expressions-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--n8n-muted);
}

.expressions-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--n8n-primary);
    opacity: 0.5;
}

.expressions-empty h4 {
    margin: 0 0 8px;
    color: var(--n8n-text);
}

.expression-item {
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.expression-item:hover {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.expression-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.expression-header h4 {
    margin: 0;
    font-size: 14px;
    color: var(--n8n-text);
}

.expression-actions {
    display: flex;
    gap: 4px;
}

.expression-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.expression-code {
    background: #f1f5f9;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    color: var(--n8n-text);
    word-break: break-all;
}

.expression-description {
    margin: 0;
    font-size: 12px;
    color: var(--n8n-muted);
}

/* Output Tab */
.output-tab {
    height: 100%;
}

.output-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
}

.output-actions {
    display: flex;
    gap: 8px;
}

.output-display {
    flex: 1;
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}

.output-content {
    height: 100%;
    overflow: auto;
    padding: 16px;
    margin: 0;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre;
}

.output-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--n8n-muted);
}

.output-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--n8n-primary);
    opacity: 0.5;
}

.output-empty h4 {
    margin: 0 0 8px;
    color: var(--n8n-text);
}

.output-content-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.output-content {
    flex: 1;
    overflow: auto;
    padding: 16px;
    margin: 0;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.output-content.json code {
    color: var(--n8n-text);
}

.output-content.yaml code {
    color: #2d5016;
}

.output-content.xml code {
    color: #0969da;
}

.output-stats {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    color: var(--n8n-muted);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-item i {
    font-size: 10px;
}

/* Button success state */
.n8n-btn.success {
    background: var(--n8n-success) !important;
    color: white !important;
    border-color: var(--n8n-success) !important;
}

.n8n-btn.success:hover {
    background: var(--n8n-success) !important;
    border-color: var(--n8n-success) !important;
}

/* Button loading state */
.n8n-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.n8n-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dialog Styles */
.transformation-dialog-overlay,
.expression-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.transformation-dialog,
.expression-editor-modal {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
}

.dialog-header,
.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--n8n-border);
}

.dialog-header h3,
.editor-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--n8n-text);
}

.dialog-content {
    padding: 24px;
}

.dialog-content p {
    margin: 0 0 16px;
    line-height: 1.5;
}

.dialog-content p code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Editor Styles */
.editor-content {
    padding: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--n8n-text);
}

.code-editor-container {
    position: relative;
}

.code-editor {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
    min-height: 80px;
}

.code-editor.error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--n8n-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

.autocomplete-item:hover {
    background: #f8fafc;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--n8n-text);
}

.autocomplete-description {
    font-size: 11px;
    color: var(--n8n-muted);
    margin-top: 2px;
}

.validation-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: #dc2626;
}

.validation-error i {
    font-size: 14px;
}

.editor-help {
    margin-top: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 6px;
    border-left: 3px solid var(--n8n-primary);
}

.editor-help p {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--n8n-text);
}

.editor-help ul {
    margin: 0;
    padding-left: 20px;
}

.editor-help li {
    font-size: 11px;
    color: var(--n8n-muted);
    line-height: 1.4;
}

.editor-help code {
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--n8n-primary);
}

/* Modal Actions */
.integration-modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--n8n-border);
    flex-wrap: wrap;
}

.modal-actions-left,
.modal-actions-right {
    display: flex;
    gap: 8px;
}

.modal-actions-right {
    align-items: center;
    min-height: 24px;
}

.modal-error-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #dc2626;
}

.modal-error-status i {
    font-size: 13px;
}


/* Expressions Tab Enhancements */
.expressions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.expressions-header-left {
    flex: 1;
}

.expressions-header-left h3 {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--n8n-text);
}

.expressions-count {
    margin: 0;
    font-size: 12px;
    color: var(--n8n-muted);
}

.expressions-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-container i {
    position: absolute;
    left: 10px;
    color: var(--n8n-muted);
    font-size: 12px;
}

.expressions-search {
    padding-left: 32px;
    width: 200px;
    font-size: 13px;
}

.expression-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.expression-meta {
    display: flex;
    gap: 12px;
    align-items: center;
}

.expression-version {
    font-size: 11px;
    color: var(--n8n-primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
}

.expression-date {
    font-size: 11px;
    color: var(--n8n-muted);
}

/* History Modal */
.history-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.history-modal {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
}

.history-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--n8n-border);
}

.history-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--n8n-text);
}

.history-modal-content {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.history-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--n8n-muted);
}

.history-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--n8n-primary);
    opacity: 0.5;
}

.history-empty h4 {
    margin: 0 0 8px;
    color: var(--n8n-text);
}

.history-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.history-entry {
    padding: 16px;
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    background: #f8fafc;
}

.history-timestamp {
    font-size: 12px;
    color: var(--n8n-muted);
    margin-bottom: 8px;
}

.history-action {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.action-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.action-badge.created {
    background: rgba(36, 179, 126, 0.1);
    color: var(--n8n-success);
}

.action-badge.updated {
    background: rgba(245, 158, 11, 0.1);
    color: var(--n8n-warning);
}

.action-badge.deleted {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.expression-name {
    font-weight: 500;
    color: var(--n8n-text);
}

.history-expression {
    background: white;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.history-expression code {
    font-size: 12px;
    color: var(--n8n-text);
}

/* Export Modal */
.export-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.export-modal {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
}

.export-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--n8n-border);
}

.export-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--n8n-text);
}

.export-modal-content {
    padding: 24px;
}

.export-options {
    margin-bottom: 24px;
}

.export-options p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--n8n-text);
}

.export-format-options {
    display: flex;
    gap: 8px;
}

.export-format-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--n8n-border);
    background: white;
    color: var(--n8n-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.export-format-btn:hover {
    background: #f8fafc;
    border-color: var(--n8n-primary);
}

.export-format-btn.active {
    background: var(--n8n-primary);
    color: white;
    border-color: var(--n8n-primary);
}

.export-preview {
    margin-bottom: 24px;
}

.export-preview h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--n8n-text);
}

.export-preview-content {
    background: #f8fafc;
    border: 1px solid var(--n8n-border);
    border-radius: 6px;
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.preview-item {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.preview-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.preview-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--n8n-text);
}

.preview-item code {
    display: block;
    background: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    word-break: break-all;
}

.preview-more {
    text-align: center;
    font-size: 12px;
    color: var(--n8n-muted);
    font-style: italic;
    padding: 8px 0 0;
}

.export-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Expression Builder Modal Styles */
.expression-builder-modal {
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.expression-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--n8n-border);
    flex-shrink: 0;
}

.expression-builder-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--n8n-text);
}

.expression-builder-body {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.expression-builder-sidebar {
    width: 300px;
    border-right: 1px solid var(--n8n-border);
    padding: 24px 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    overflow-y: auto;
    flex-shrink: 0;
}

.builder-section {
    margin-bottom: 24px;
}

.builder-section h4 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--n8n-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.variables-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 6px;
}

.variables-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    padding: 8px 12px 8px 36px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.variables-search i {
    position: absolute;
    left: 12px;
    font-size: 13px;
    color: var(--n8n-muted);
}

.variables-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: var(--n8n-text);
    background: transparent;
}

.variables-search input::placeholder {
    color: rgba(71, 85, 105, 0.65);
}

.clear-search-btn {
    border: none;
    background: transparent;
    color: var(--n8n-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clear-search-btn:hover {
    color: var(--n8n-primary);
}

.variable-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.variable-btn,
.variable-btn-vertical {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--n8n-text);
    cursor: pointer;
    transition: all 0.2s ease, transform 0.2s ease;
    font-size: 12px;
    text-align: left;
    width: 100%;
}

.variable-btn:hover,
.variable-btn-vertical:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: var(--n8n-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -12px rgba(51, 65, 85, 0.45);
}

.variable-name strong {
    font-size: 13px;
    font-weight: 600;
}

.variable-btn code,
.variable-btn-vertical code {
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: 500;
    color: var(--n8n-muted);
}

.variable-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.variable-meta code {
    font-size: 12px;
    color: rgba(148, 163, 184, 0.9);
}

.variable-meta small {
    font-size: 10px;
    color: rgba(71, 85, 105, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.variables-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    color: rgba(71, 85, 105, 0.7);
    font-size: 12px;
    text-align: center;
}

.variables-empty-state i {
    font-size: 16px;
    color: rgba(100, 116, 139, 0.7);
}

.variable-btn small,
.variable-btn-vertical small {
    font-size: 10px;
    color: var(--n8n-muted);
    font-weight: normal;
}

.function-category {
    margin-bottom: 16px;
}

.function-category h5 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--n8n-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.functions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.function-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--n8n-border);
    border-radius: 4px;
    background: white;
    color: var(--n8n-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    font-family: 'Monaco', 'Menlo', monospace;
}

.function-btn:hover {
    background: var(--n8n-primary);
    color: white;
    border-color: var(--n8n-primary);
    transform: translateY(-1px);
}

.custom-functions-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    color: var(--n8n-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.6);
    transition: all 0.2s ease;
}

.custom-functions-btn i {
    font-size: 13px;
    color: var(--n8n-primary);
}

.custom-functions-btn:hover {
    background: var(--n8n-primary);
    color: #fff;
    border-color: var(--n8n-primary);
    box-shadow: 0 12px 30px -14px rgba(99, 102, 241, 0.65);
    transform: translateY(-1px);
}

.custom-functions-btn:hover i {
    color: #fff;
}

.expression-builder-main {
    flex: 1;
    display: flex;
    gap: 0;
    min-width: 0;
    background: #ffffff;
}

.expression-editor-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-right: 1px solid var(--n8n-border);
    background: #ffffff;
    min-width: 0;
}

.expression-key-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.expression-key-input label {
    font-size: 12px;
    font-weight: 600;
    color: var(--n8n-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.expression-key-input .n8n-input {
    font-family: 'Inter', sans-serif;
    border-radius: 6px;
    padding: 10px 12px;
    border: 1px solid var(--n8n-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.expression-key-input .n8n-input:focus {
    border-color: var(--n8n-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    outline: none;
}

.expression-operators {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.expression-operators span {
    font-size: 12px;
    font-weight: 600;
    color: var(--n8n-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.operator-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.operator-buttons .n8n-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: white;
    color: var(--n8n-text);
    box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.2);
    transition: all 0.2s ease;
}

.operator-buttons .n8n-btn:hover {
    background: var(--n8n-primary);
    border-color: var(--n8n-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px rgba(99, 102, 241, 0.6);
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.editor-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--n8n-text);
}

.expression-textarea {
    flex: 1;
    resize: none;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--n8n-border);
    border-radius: 6px;
    padding: 14px 16px;
    background: white;
    min-height: 200px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.expression-textarea:focus {
    outline: none;
    border-color: var(--n8n-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.expression-preview-section {
    width: 340px;
    padding: 24px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid var(--n8n-border);
    position: relative;
}

.expression-preview-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(248, 250, 252, 0.75));
    opacity: 0.35;
}

.expression-preview-section>* {
    position: relative;
    z-index: 1;
}

.preview-header h4 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--n8n-text);
}

.preview-textarea {
    width: 100%;
    resize: none;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.4;
    background: white;
    border: 1px solid var(--n8n-border);
    border-radius: 8px;
    padding: 16px;
    min-height: 240px;
    box-shadow: inset 0 1px 4px rgba(15, 23, 42, 0.08);
    overflow: auto;
}

.preview-textarea:focus {
    outline: none;
    border-color: var(--n8n-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.expression-builder-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--n8n-border);
    background: #f8fafc;
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .expression-builder-body {
        flex-direction: column;
    }

    .expression-builder-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--n8n-border);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }

    .expression-builder-main {
        flex-direction: column;
    }

    .expression-preview-section {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--n8n-border);
    }

    .operator-buttons {
        gap: 8px;
    }

    .variables-search {
        grid-column: 1 / -1;
    }
}

/* Responsive Design for Expression Builder */
@media (max-width: 1200px) {
    .expression-builder-modal {
        max-width: 95vw;
        max-height: 95vh;
    }

    .expression-builder-body {
        flex-direction: column;
    }

    .expression-builder-sidebar {
        width: 100%;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid var(--n8n-border);
    }
}

/* Enhanced Responsive Design */
@media (max-width: 1024px) {
    .n8n-container {
        grid-template-columns: 260px 1fr 320px;
    }

    .n8n-sidebar {
        width: 260px;
    }

    .n8n-panel {
        width: 320px;
    }
}

@media (max-width: 768px) {
    .n8n-header {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
        min-height: auto;
    }

    .n8n-logo {
        font-size: 16px;
    }

    .n8n-actions {
        width: 100%;
        justify-content: space-between;
    }

    .n8n-mode-indicator {
        order: -1;
    }
}

/* Responsive Design */
@media (max-width: 968px) {
    .integration-modal-content {
        max-width: 105vw;
        max-height: 95vh;
        margin: 2.5vh 2.5vw;
    }

    .integration-modal-header {
        flex-direction: column;
        gap: 12px;
    }

    .integration-modal-header-actions {
        align-self: stretch;
        justify-content: space-between;
    }

    .tab-navigation {
        flex-direction: column;
    }

    .tab-button {
        justify-content: flex-start;
        border-bottom: none;
        border-left: 2px solid transparent;
    }

    .tab-button.active {
        border-bottom: none;
        border-left-color: var(--n8n-primary);
    }

    .expressions-header {
        flex-direction: column;
        align-items: stretch;
    }

    .output-header {
        flex-direction: column;
        align-items: stretch;
    }

    .integration-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-actions-left,
    .modal-actions-right {
        justify-content: center;
    }
}

/* Sidebar mode hint styling */
.n8n-sidebar-mode-hint {
    font-size: 10px;
    color: var(--n8n-muted);
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

/* Configuration Panel Header with Actions */
.n8n-panel-header-with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--n8n-border);
}

.n8n-panel-header-with-actions h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--n8n-text);
}

.n8n-panel-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Tooltip Styles */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: var(--n8n-sidebar);
    color: white;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 1000;
}

[data-tooltip]:hover:before {
    opacity: 1;
    visibility: visible;
}

/* Keyboard Shortcut Hint */
.keyboard-shortcut {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 11px;
    color: var(--n8n-muted);
    margin-left: 8px;
}