@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');



:root {

    /* --- User Palette Definitions --- */

    /* Dark Scale */

    --black: #000000;

    --night: #111111;

    --eerie-black: #232323;

    --jet: #343434;

    --outer-space: #464646;

    --davys-gray: #575757;

    --dim-gray: #696969;

    --gray: #7a7a7a;



    /* Light/Grey Scale */

    --seasalt: #f8f9fa;

    --antiflash-white: #e9ecef;

    --platinum: #dee2e6;

    --french-gray: #ced4da;

    --french-gray-2: #adb5bd;

    --slate-gray: #6c757d;

    --outer-space-grey: #495057;



    /* --- Light Mode Semantic Map (Preserved) --- */

    --color-background: #f8fafc;

    /* Slate 50 */

    --color-foreground: #0f172a;

    /* Slate 900 */



    --color-card: #ffffff;

    --color-card-foreground: #0f172a;



    --color-popover: #ffffff;

    --color-popover-foreground: #0f172a;



    --color-primary: #2563eb;

    /* Blue 600 */

    --color-primary-foreground: #ffffff;



    --color-secondary: #64748b;

    /* Slate 500 */

    --color-secondary-foreground: #ffffff;



    --color-muted: #f1f5f9;

    /* Slate 100 */

    --color-muted-foreground: #64748b;



    --color-accent: #0ea5e9;

    /* Sky 500 */

    --color-accent-foreground: #ffffff;



    --color-destructive: #ef4444;

    /* Red 500 */

    --color-destructive-foreground: #ffffff;



    --color-success: #10b981;

    /* Emerald 500 */

    --color-warning: #f59e0b;

    /* Amber 500 */

    --color-error: #ef4444;

    /* Red 500 */



    --color-border: #e2e8f0;

    /* Slate 200 */

    --color-input: #e2e8f0;

    --color-ring: #2563eb;



    --radius: 0.5rem;

}



.dark {

    /* --- Dark Mode Semantic Map (Using User Palette) --- */

    --color-background: var(--night);

    /* #111111 */

    --color-foreground: var(--seasalt);

    /* #f8f9fa */



    --color-card: var(--eerie-black);

    /* #232323 */

    --color-card-foreground: var(--seasalt);



    --color-popover: var(--eerie-black);

    /* #232323 */

    --color-popover-foreground: var(--seasalt);



    --color-primary: #60a5fa;

    /* Blue 400 */

    --color-primary-foreground: var(--night);



    --color-secondary: var(--french-gray-2);

    /* #adb5bd - Lighter in dark mode */

    --color-secondary-foreground: var(--night);



    --color-muted: var(--jet);

    /* #343434 */

    --color-muted-foreground: var(--french-gray);



    --color-accent: #38bdf8;

    --color-accent-foreground: var(--night);



    --color-destructive: #ef4444;

    --color-destructive-foreground: var(--seasalt);



    --color-success: #34d399;

    --color-warning: #fbbf24;

    --color-error: #ef4444;



    --color-border: var(--jet);

    /* #343434 */

    --color-input: var(--jet);

    --color-ring: #60a5fa;

}



/* Base Styles */

body {

    background-color: var(--color-background);

    color: var(--color-foreground);

    font-family: 'Inter', sans-serif;

}



/* Sidebar Transitions */

#sidebar {

    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Allow tooltips to be visible when collapsed */

}



.sidebar-text {

    transition: opacity 0.2s ease-in-out;

    white-space: nowrap;

    opacity: 1;

}



#sidebar.w-20 .sidebar-text {

    opacity: 0;

    pointer-events: none;

    display: none;

}



/* Sidebar Footer Refinements */

#sidebar.w-20 .p-4.border-t {

    padding: 1rem 0.5rem;

}



#sidebar.w-20 .flex.items-center.gap-3.p-2 {

    justify-content: center;

    gap: 0;

}



#sidebar.w-20 #logout-btn {

    display: none;

}



/* Custom Scrollbar */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}



::-webkit-scrollbar-track {

    background: transparent;

}



::-webkit-scrollbar-thumb {

    background: var(--color-border);

    border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--color-secondary);

}



/* Loader */

.loader {

    border: 3px solid var(--color-muted);

    border-top: 3px solid var(--color-primary);

    border-radius: 50%;

    width: 24px;

    height: 24px;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



/* Animation Utilities for Modals */

@keyframes fadeIn {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



@keyframes slideUp {

    from {

        transform: translateY(10px);

        opacity: 0;

    }



    to {

        transform: translateY(0);

        opacity: 1;

    }

}



.animate-in {

    animation: fadeIn 0.2s ease-out forwards;

}



.slide-in-from-bottom-4 {

    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



/* --- Badge Styles (for Risk and Status) --- */

.risk-badge {

    display: inline-flex;

    align-items: center;

    padding: 0.25rem 0.625rem;

    /* px-2.5 py-0.5 */

    border-radius: 9999px;

    /* rounded-full */

    font-size: 0.75rem;

    /* text-xs */

    font-weight: 500;

    /* font-medium */

    border: 1px solid;

}



.risk-badge.low {

    background-color: rgba(16, 185, 129, 0.1);

    /* bg-success/10 */

    color: #10b981;

    /* text-success */

    border-color: rgba(16, 185, 129, 0.2);

    /* border-success/20 */

}



.risk-badge.medium {

    background-color: rgba(245, 158, 11, 0.1);

    /* bg-warning/10 */

    color: #f59e0b;

    /* text-warning */

    border-color: rgba(245, 158, 11, 0.2);

    /* border-warning/20 */

}



.risk-badge.high {

    background-color: rgba(239, 68, 68, 0.1);

    /* bg-error/10 */

    color: #ef4444;

    /* text-error */

    border-color: rgba(239, 68, 68, 0.2);

    /* border-error/20 */

}



.status-badge {

    display: inline-flex;

    align-items: center;

    padding: 0.25rem 0.625rem;

    /* px-2.5 py-0.5 */

    border-radius: 9999px;

    /* rounded-full */

    font-size: 0.75rem;

    /* text-xs */

    font-weight: 500;

    /* font-medium */

    border: 1px solid;

}



.status-badge.active {

    background-color: rgba(16, 185, 129, 0.1);

    /* bg-success/10 */

    color: #10b981;

    /* text-success */

    border-color: rgba(16, 185, 129, 0.2);

    /* border-success/20 */

}



.status-badge.pending {

    background-color: rgba(245, 158, 11, 0.1);

    /* bg-warning/10 */

    color: #f59e0b;

    /* text-warning */

    border-color: rgba(245, 158, 11, 0.2);

    /* border-warning/20 */

}



.status-badge.overdue {

    background-color: rgba(239, 68, 68, 0.1);

    /* bg-error/10 */

    color: #ef4444;

    /* text-error */

    border-color: rgba(239, 68, 68, 0.2);

    /* border-error/20 */

}



.status-badge.renewed {

    background-color: rgba(37, 99, 235, 0.1);

    /* bg-primary/10 */

    color: #2563eb;

    /* text-primary */

    border-color: rgba(37, 99, 235, 0.2);

    /* border-primary/20 */

}





/* Toast Animations handled via Tailwind classes in JS */

.z-100 {

    z-index: 100;

}



/* Fix for Date/Time Input Icons in Dark Mode */

.dark input[type="date"]::-webkit-calendar-picker-indicator,

.dark input[type="time"]::-webkit-calendar-picker-indicator {

    filter: invert(1);

    cursor: pointer;

    opacity: 0.8;

}



.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,

.dark input[type="time"]::-webkit-calendar-picker-indicator:hover {

    opacity: 1;

}



/* ============================================

   AI HELPER PANEL

   ============================================ */



/* Transition engine — all states animated here */

#ai-helper-window {

    transition:

        width 0.42s cubic-bezier(0.16, 1, 0.3, 1),

        height 0.42s cubic-bezier(0.16, 1, 0.3, 1),

        border-radius 0.38s cubic-bezier(0.16, 1, 0.3, 1),

        opacity 0.25s ease,

        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 0.3s ease;

    resize: both;

    min-width: 300px;

    min-height: 400px;

    max-width: 90vw;

    max-height: 90vh;

}



/* Disable resize in minimized pill mode */

#ai-helper-window.ai-minimized {

    resize: none !important;

}



/* Kill transitions while resizing so the mouse isn't fighting a CSS ease */

#ai-helper-window:active {

    transition: none !important;

}



/* Kill transitions while dragging */

#ai-helper-window.ai-is-dragging {

    transition: none !important;

    will-change: left, top;

    box-shadow:

        0 0 0 1px var(--color-border),

        0 32px 80px -8px rgba(0, 0, 0, 0.45),

        0 0 50px -15px rgba(96, 165, 250, 0.2) !important;

}



/* Panel glow when open */

#ai-helper-window:not(.hidden) {

    box-shadow:

        0 0 0 1px var(--color-border),

        0 20px 60px -10px rgba(0, 0, 0, 0.3),

        0 0 40px -15px rgba(96, 165, 250, 0.12);

}



/* Header drag cursor */

#ai-helper-header {

    cursor: grab;

}



#ai-helper-header:active {

    cursor: grabbing;

}



/* ── Pill: hide ALL sections except header ── */

#ai-helper-window.ai-minimized>*:not(#ai-helper-header) {

    display: none !important;

}



/* ── Pill State Fine-tuning ── */

#ai-helper-window.ai-minimized {

    border-color: rgba(96, 165, 250, 0.3) !important;

    background: var(--color-card) !important;

    opacity: 0.9 !important;

    /* Glass-like */

    backdrop-filter: blur(16px) saturate(180%);

    min-width: 0 !important;

    min-height: 0 !important;

    box-shadow:

        0 0 0 1px rgba(255, 255, 255, 0.1),

        0 8px 32px -4px rgba(0, 0, 0, 0.2),

        0 0 20px -5px rgba(96, 165, 250, 0.2) !important;

}



#ai-helper-window.ai-minimized #ai-helper-header {

    height: 100%;

    padding: 0 10px !important;

    /* Tighter padding for icon-only layout */

    border-bottom: none !important;

    cursor: pointer !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 8px;

}



/* ── Pill: always visible regardless of light/dark theme ── */

#ai-helper-window.ai-minimized {

    background: var(--color-card) !important;

    border: 1.5px solid var(--color-border) !important;

    box-shadow:

        0 0 0 1px var(--color-border),

        0 4px 24px -4px rgba(0, 0, 0, 0.18),

        0 0 0 4px rgba(96, 165, 250, 0.08) !important;

}



/* ── Pill: icon colors always visible in light mode ── */

#ai-helper-window.ai-minimized .ai-header-btn {

    color: var(--color-foreground) !important;

}



/* ── Pill: gradient icon background stays visible ── */

#ai-helper-window.ai-minimized #ai-helper-header .w-8 {

    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.35);

}



/* ── Pill: status dot always visible ── */

#ai-helper-window.ai-minimized .ai-status-dot {

    border-color: var(--color-card) !important;

}





#ai-helper-window.ai-minimized .ai-header-btn:not(.ai-hide-on-pill) {

    display: flex !important;

}



/* ── Pill: hide specific elements ── */

#ai-helper-window.ai-minimized .ai-hide-on-pill {

    display: none !important;

    width: 0;

    height: 0;

    opacity: 0;

    margin: 0;

    padding: 0;

    pointer-events: none;

}



#ai-helper-window.ai-minimized .ai-pill-title-container {

    display: flex !important;

    flex-direction: column;

    justify-content: center;

    width: auto;

    height: auto;

    opacity: 1;

    margin: 0;

    padding: 0;

    pointer-events: auto;

}



/* Status dot pulse */

@keyframes ai-pulse {



    0%,

    100% {

        opacity: 1;

        transform: scale(1);

    }



    50% {

        opacity: 0.5;

        transform: scale(0.8);

    }

}



.ai-status-dot {

    width: 7px;

    height: 7px;

    border-radius: 9999px;

    background: #34d399;

    flex-shrink: 0;

    animation: ai-pulse 2.2s ease-in-out infinite;

}



/* Typing animation */

@keyframes ai-bounce {



    0%,

    60%,

    100% {

        transform: translateY(0);

    }



    30% {

        transform: translateY(-5px);

    }

}



.ai-typing-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #818cf8;

    animation: ai-bounce 1.2s ease-in-out infinite;

}



.ai-typing-dot:nth-child(2) {

    animation-delay: 0.15s;

}



.ai-typing-dot:nth-child(3) {

    animation-delay: 0.3s;

}



/* Message entrance */

@keyframes ai-msg-in {

    from {

        opacity: 0;

        transform: translateY(6px) scale(0.98);

    }



    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



.ai-msg-bot,

.ai-msg-user {

    animation: ai-msg-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



/* Message bubbles */

.ai-msg-user .ai-bubble {

    background: var(--color-primary);

    color: #fff;

    border-radius: 18px 18px 4px 18px;

}



.ai-msg-bot .ai-bubble {

    background: var(--color-muted);

    color: var(--color-foreground);

    border: 1px solid var(--color-border);

    border-radius: 18px 18px 18px 4px;

}



.ai-bubble .prose-ai p {

    margin: 0 0 0.5rem;

    font-size: 0.8125rem;

    line-height: 1.6;

}



.ai-bubble .prose-ai p:last-child {

    margin: 0;

}



.ai-bubble .prose-ai ul {

    padding-left: 1.1rem;

    margin: 0.3rem 0;

}



.ai-bubble .prose-ai li {

    font-size: 0.8125rem;

    margin-bottom: 0.2rem;

}



.ai-bubble .prose-ai strong {

    font-weight: 600;

}



.ai-bubble .prose-ai code {

    font-family: 'JetBrains Mono', monospace;

    font-size: 0.72rem;

    background: rgba(0, 0, 0, 0.08);

    padding: 0.1em 0.35em;

    border-radius: 4px;

}



.dark .ai-bubble .prose-ai code {

    background: rgba(255, 255, 255, 0.1);

}



/* Quick action chips */

.ai-quick-chip {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 10px;

    font-size: 0.75rem;

    font-weight: 500;

    border: 1px solid var(--color-border);

    background: var(--color-card);

    color: var(--color-foreground);

    cursor: pointer;

    transition: all 0.15s ease;

    text-align: left;

}



.ai-quick-chip:hover {

    border-color: var(--color-primary);

    background: rgba(96, 165, 250, 0.07);

    color: var(--color-primary);

    transform: translateY(-1px);

}



/* Suggestion chips */

.ai-suggest-chip {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px 10px;

    border-radius: 9999px;

    font-size: 0.7rem;

    font-weight: 500;

    border: 1px solid var(--color-border);

    background: transparent;

    color: var(--color-secondary);

    cursor: pointer;

    transition: all 0.15s ease;

}



.ai-suggest-chip:hover {

    border-color: var(--color-primary);

    color: var(--color-primary);

    background: rgba(96, 165, 250, 0.06);

}



/* Header icon buttons */

.ai-header-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 26px;

    height: 26px;

    border-radius: 7px;

    color: var(--color-secondary);

    transition: background 0.15s ease, color 0.15s ease;

    flex-shrink: 0;

}



.ai-header-btn:hover {

    background: var(--color-muted);

    color: var(--color-foreground);

}



/* Chat scrollbar */

#ai-chat-messages::-webkit-scrollbar {

    width: 4px;

}



#ai-chat-messages::-webkit-scrollbar-thumb {

    background: var(--color-border);

    border-radius: 4px;

}



/* ── Renewal360 Copilot Glow Button ── */

.ai-glow-btn {

    background: var(--color-card);

    backdrop-filter: blur(8px);

    box-shadow: 0 0 15px -2px rgba(96, 165, 250, 0.3);

    animation: ai-glow-pulse 3s infinite alternate ease-in-out;

}



.ai-glow-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 50%;

    height: 100%;

    background: linear-gradient(to right,

            rgba(255, 255, 255, 0) 0%,

            rgba(255, 255, 255, 0.1) 50%,

            rgba(255, 255, 255, 0) 100%);

    transform: skewX(-25deg);

    animation: ai-glass-shine 5s infinite linear;

    z-index: 1;

    pointer-events: none;

}



.ai-glow-btn:hover {

    box-shadow: 0 0 20px 2px rgba(96, 165, 250, 0.5);

    transform: translateY(-1px);

    border-color: rgba(96, 165, 250, 0.4);

}



@keyframes ai-glow-pulse {

    0% {

        box-shadow: 0 0 10px -2px rgba(96, 165, 250, 0.2);

    }



    100% {

        box-shadow: 0 0 20px 2px rgba(96, 165, 250, 0.4);

    }

}



@keyframes ai-glass-shine {

    0% {

        left: -100%;

    }



    20% {

        left: 200%;

    }



    100% {

        left: 200%;

    }

}



/* ============================================

   VISUAL FLOW BUILDER (Pipeline)

   ============================================ */



/* ── Pipeline Container ── */

.vf-pipeline {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 60px 24px 100px;

    overflow-y: auto;

    max-height: calc(100vh - 280px);

    background:

        radial-gradient(circle at 1px 1px, var(--color-border) 0.5px, transparent 0);

    background-size: 20px 20px;

    background-color: var(--color-background);

    gap: 0;

}



.vf-pipeline>* {

    flex-shrink: 0;

    /* Prevent items from collapsing */

}



/* ── Toolbar ── */

.vf-toolbar {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 8px 12px;

    background: var(--color-card);

    border-bottom: 1px solid var(--color-border);

    z-index: 10;

    position: relative;

}



.vf-toolbar__spacer {

    flex: 1;

}



.vf-toolbar__btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border-radius: 8px;

    font-size: 0.8rem;

    font-weight: 500;

    color: var(--color-secondary);

    background: transparent;

    border: 1px solid var(--color-border);

    cursor: pointer;

    transition: all 0.15s ease;

}



.vf-toolbar__btn:hover {

    background: var(--color-muted);

    color: var(--color-foreground);

    border-color: var(--color-primary);

}



.vf-toolbar__btn--add {

    background: var(--color-primary);

    color: #fff;

    border-color: var(--color-primary);

}



.vf-toolbar__btn--add:hover {

    opacity: 0.9;

    color: #fff;

}



.vf-toolbar__hint {

    font-size: 0.72rem;

    color: var(--color-secondary);

    font-weight: 500;

}



/* ── Arrow Connectors ── */

.vf-arrow {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0;

    padding: 4px 0;

}



.vf-arrow__line {

    width: 2px;

    height: 24px;

    background: var(--color-primary);

    opacity: 0.4;

}



.vf-arrow__label {

    display: inline-flex;

    align-items: center;

    padding: 3px 12px;

    font-size: 0.68rem;

    font-weight: 600;

    color: var(--color-primary);

    background: var(--color-card);

    border-radius: 999px;

    border: 1px solid var(--color-primary);

    white-space: nowrap;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    transition: all 0.15s ease;

}



.vf-arrow__label[onclick]:hover {

    background: var(--color-primary);

    color: #fff;

    cursor: pointer;

    position: relative;

}



.vf-arrow__label[onclick]::after {

    content: 'Click to edit';

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%) translateY(2px);

    font-size: 0.6rem;

    font-weight: 500;

    color: var(--color-secondary);

    white-space: nowrap;

    opacity: 0;

    transition: opacity 0.15s ease;

    pointer-events: none;

}



.vf-arrow__label[onclick]:hover::after {

    opacity: 1;

}



.vf-arrow__edit {

    width: 50px;

    padding: 0 4px;

    font-size: 0.72rem;

    font-weight: 600;

    border: none;

    background: transparent;

    color: inherit;

    text-align: center;

    outline: none;

}



.vf-arrow__tip {

    font-size: 0.65rem;

    color: var(--color-primary);

    opacity: 0.6;

    line-height: 1;

    margin-top: -2px;

}



/* ── Start / End Markers ── */

.vf-marker {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 16px;

    border-radius: 999px;

    font-size: 0.72rem;

    font-weight: 600;

    letter-spacing: 0.04em;

    margin: 4px 0;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}



.vf-marker--start {

    background: #ecfdf5;

    color: #059669;

    border: 1px solid #10b981;

}



.vf-marker--end {

    background: #fef2f2;

    color: #dc2626;

    border: 1px solid #ef4444;

}



/* ── Add Button ── */

.vf-add-between {

    display: flex;

    justify-content: center;

    padding: 16px 0;

}



.vf-add-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: var(--color-card);

    border: 2px dashed var(--color-border);

    color: var(--color-secondary);

    cursor: pointer;

    transition: all 0.2s ease;

}



.vf-add-btn:hover {

    border-color: var(--color-primary);

    color: var(--color-primary);

    background: rgba(37, 99, 235, 0.06);

    transform: scale(1.1);

}



/* ── Empty State ── */

.vf-empty {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 60px 20px;

    text-align: center;

}



.vf-empty__icon {

    color: var(--color-border);

    margin-bottom: 16px;

}



.vf-empty__title {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--color-foreground);

    margin: 0 0 6px;

}



.vf-empty__desc {

    font-size: 0.82rem;

    color: var(--color-secondary);

    margin: 0;

}



/* ── Custom Node Cards ── */

.vf-node {

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: 12px;

    width: 680px;

    max-width: 90vw;

    min-height: 260px;

    /* Force minimum height to prevent collapse */

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    transition: all 0.2s ease;

    font-family: 'Inter', sans-serif;

    overflow: hidden;

    position: relative;

    z-index: 5;

    display: block;

    /* Ensure it calculates height based on content */

}



.vf-node:hover {

    border-color: var(--color-primary);

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

}



.vf-node__header {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    background: var(--color-muted);

    border-bottom: 1px solid var(--color-border);

}



.vf-node__badge {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 26px;

    height: 26px;

    border-radius: 8px;

    font-size: 0.75rem;

    font-weight: 700;

    color: #fff;

    background: var(--color-primary);

    flex-shrink: 0;

}



.vf-node__type {

    flex: 1;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 6px;

    padding: 4px 8px;

    font-size: 0.75rem;

    font-weight: 500;

    color: var(--color-foreground);

    cursor: pointer;

    outline: none;

}



.vf-node__type:focus {

    border-color: var(--color-primary);

}



.vf-node__delete {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border-radius: 6px;

    color: var(--color-secondary);

    background: transparent;

    border: none;

    cursor: pointer;

    transition: all 0.15s ease;

    flex-shrink: 0;

}



.vf-node__delete:hover {

    background: rgba(239, 68, 68, 0.1);

    color: var(--color-error);

}



.vf-node__body {

    padding: 14px;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.vf-node__label {

    font-size: 0.68rem;

    font-weight: 600;

    color: var(--color-secondary);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.vf-node__input {

    width: 100%;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 6px;

    padding: 7px 10px;

    font-size: 0.8rem;

    color: var(--color-foreground);

    outline: none;

    transition: border-color 0.15s ease;

}



.vf-node__input:focus {

    border-color: var(--color-primary);

    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);

}



.vf-node__input--sm {

    width: 80px;

}



.vf-node__textarea {

    width: 100%;

    min-height: 100px;

    max-height: 200px;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 6px;

    padding: 7px 10px;

    font-size: 0.78rem;

    color: var(--color-foreground);

    resize: vertical;

    outline: none;

    font-family: 'Inter', sans-serif;

}



.vf-node__textarea:focus {

    border-color: var(--color-primary);

    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);

}



.vf-node__select {

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 6px;

    padding: 5px 8px;

    font-size: 0.75rem;

    color: var(--color-foreground);

    cursor: pointer;

    outline: none;

    width: 100%;

}



.vf-node__row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}



.vf-node__field {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.vf-node__checkbox {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.72rem;

    color: var(--color-foreground);

    cursor: pointer;

}



.vf-node__checkbox input[type="checkbox"] {

    width: 14px;

    height: 14px;

    accent-color: var(--color-primary);

    cursor: pointer;

}



.vf-node__checkbox span {

    font-weight: 500;

}



/* ── Branch Rules Section ── */

.vf-node__rules {

    padding: 10px 14px;

    border-top: 1px dashed var(--color-border);

    background: rgba(37, 99, 235, 0.02);

}



.vf-node__rules-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

}



.vf-node__rules-title {

    font-size: 0.7rem;

    font-weight: 600;

    color: var(--color-secondary);

    display: flex;

    align-items: center;

    gap: 5px;

}



.vf-node__rules-add {

    font-size: 0.65rem;

    font-weight: 700;

    color: var(--color-primary);

    background: transparent;

    border: 1px solid var(--color-primary);

    border-radius: 4px;

    padding: 2px 8px;

    cursor: pointer;

    transition: all 0.15s;

}



.vf-node__rules-add:hover {

    background: var(--color-primary);

    color: #fff;

}



.vf-branch-list {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.vf-branch {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    background: var(--color-card);

    border-radius: 6px;

    border: 1px solid var(--color-border);

    white-space: nowrap;

}



.vf-branch__if,

.vf-branch__then {

    font-size: 0.68rem;

    font-weight: 600;

    color: var(--color-secondary);

    white-space: nowrap;

}



.vf-branch__cond {

    font-size: 0.7rem;

    padding: 2px 6px;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 4px;

    color: var(--color-foreground);

    max-width: 140px;

    outline: none;

}



.vf-branch__arr {

    width: 70px;

    font-size: 0.7rem;

    padding: 2px 4px;

    border: 1px solid var(--color-border);

    border-radius: 4px;

    background: var(--color-background);

    color: var(--color-foreground);

    outline: none;

}



.vf-branch__action {

    font-size: 0.68rem;

    padding: 2px 6px;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 4px;

    color: var(--color-foreground);

    outline: none;

    font-weight: 600;

    cursor: pointer;

}



.vf-branch__jump {

    width: 42px;

    font-size: 0.7rem;

    padding: 2px 4px;

    border: 1px solid var(--color-border);

    border-radius: 4px;

    text-align: center;

    background: var(--color-background);

    color: var(--color-foreground);

    outline: none;

}



.vf-branch__del {

    color: var(--color-secondary);

    opacity: 0.5;

    cursor: pointer;

    background: transparent;

    border: none;

    padding: 2px;

    transition: all 0.15s;

    margin-left: auto;

}



.vf-branch__del:hover {

    opacity: 1;

    color: var(--color-error);

}



.vf-branch__empty {

    font-size: 0.68rem;

    color: var(--color-secondary);

    font-style: italic;

    padding: 2px 0;

}







.vf-node__footer {

    padding: 8px 14px;

    border-top: 1px solid var(--color-border);

    background: var(--color-muted);

}



.vf-node__order-label {

    font-size: 0.68rem;

    color: var(--color-secondary);

    font-weight: 500;

}



/* ── Type Colors ── */

.vf-node--email .vf-node__header {

    border-left: 3px solid #2563eb;

}



.vf-node--email .vf-node__badge {

    background: #2563eb;

}



.vf-node--task .vf-node__header {

    border-left: 3px solid #f59e0b;

}



.vf-node--task .vf-node__badge {

    background: #f59e0b;

}



.vf-node--slack .vf-node__header {

    border-left: 3px solid #8b5cf6;

}



.vf-node--slack .vf-node__badge {

    background: #8b5cf6;

}



.vf-node--alert .vf-node__header {

    border-left: 3px solid #10b981;

}



.vf-node--alert .vf-node__badge {

    background: #10b981;

}



/* ============================================

   @ MENTION DROPDOWN

   ============================================ */

.mention-dropdown {

    position: absolute;

    z-index: 9999;

    background: var(--color-card);

    border: 1px solid var(--color-border);

    border-radius: 10px;

    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.08);

    max-height: 240px;

    overflow-y: auto;

    opacity: 0;

    transform: translateY(-4px);

    pointer-events: none;

    transition: all 0.15s ease;

}



.mention-dropdown--visible {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

}



.mention-dropdown__item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 14px;

    cursor: pointer;

    transition: background 0.1s ease;

}



.mention-dropdown__item:first-child {

    border-radius: 10px 10px 0 0;

}



.mention-dropdown__item:last-child {

    border-radius: 0 0 10px 10px;

}



.mention-dropdown__item:hover,

.mention-dropdown__item--active {

    background: var(--color-muted);

}



.mention-dropdown__icon {

    font-size: 1rem;

    flex-shrink: 0;

    width: 24px;

    text-align: center;

}



.mention-dropdown__text {

    display: flex;

    flex-direction: column;

    gap: 1px;

    min-width: 0;

}



.mention-dropdown__key {

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--color-primary);

    font-family: 'JetBrains Mono', monospace;

}



.mention-dropdown__desc {

    font-size: 0.68rem;

    color: var(--color-secondary);

}



.mention-dropdown__empty {

    padding: 12px 16px;

    font-size: 0.75rem;

    color: var(--color-secondary);

    text-align: center;

}