:root {
    --pure-white: rgba(255, 255, 255, 1);
    --pure-white-transparent-heavy: rgba(255, 255, 255, 0.95);
    --pure-white-transparent-medium: rgba(255, 255, 255, 0.8);
    --pure-white-transparent-light: rgba(255, 255, 255, 0.6);
    --pure-white-transparent-faint: rgba(255, 255, 255, 0.4);

    --light-purple-base: rgba(210, 190, 255, 1);
    --light-purple-glow-strong: rgba(210, 190, 255, 0.75);
    --light-purple-glow-medium: rgba(210, 190, 255, 0.55);
    --light-purple-glow-faint: rgba(210, 190, 255, 0.35);
    --light-purple-glow-very-faint: rgba(210, 190, 255, 0.2);

    /* Semantic Color Variables for UI Elements */
    --inner-highlight-white: rgba(255, 255, 255, 0.5);
    --context-menu-bg: rgba(25, 20, 45, 0.97);
    --context-menu-border: var(--light-purple-glow-medium);
    --context-menu-item-hover-bg: var(--light-purple-glow-faint);
    --context-menu-item-text: #e8e8f0;
    --context-menu-item-hover-text: var(--pure-white);
    --context-menu-divider-color: var(--light-purple-glow-very-faint);

    --node-label-bg: rgba(40, 35, 65, 0.93);
    --node-label-border: var(--light-purple-glow-faint);
    --node-label-text: #f5f5fa;
    --node-label-hover-bg: rgba(50, 45, 80, 0.96);

    --node-selected-glow-outer: var(--pure-white);
    --node-selected-glow-inner-purple: var(--light-purple-glow-medium);
    --node-selected-highlight-inset: var(--inner-highlight-white);

    --node-input-bg: rgba(28, 22, 50, 0.98);
    --node-input-border: var(--light-purple-base);
    --node-input-text: var(--pure-white);
    --node-input-focus-border: var(--pure-white-transparent-heavy);
    --node-input-focus-shadow: var(--light-purple-glow-strong);

    --line-stroke-color: var(--light-purple-glow-medium);
    --line-gradient-1-start: var(--light-purple-glow-faint);
    --line-gradient-1-end: var(--pure-white-transparent-light);
    --line-gradient-2-start: var(--pure-white-transparent-light);
    --line-gradient-2-end: var(--light-purple-glow-strong);

    --default-node-size: 20px; 
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url('https://i.postimg.cc/7hVMyy2H/1.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #e0e0e0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    cursor: default; 
}
body.grabbing {
    cursor: grabbing;
}

#app { 
    display: flex; 
    width: 100vw; 
    height: 100vh; 
    position: relative; 
}
#star-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    pointer-events: none; 
}
#mind-map-container { 
    flex-grow: 1; 
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
}
#mind-map-canvas { 
    position: absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    background: transparent; 
    transform-origin: 0 0; 
}
#lines-svg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 1;
    transform-origin: 0 0; 
}

/* --- Node Base & Performance Optimized Animations --- */
.node {
    position: absolute;
    box-sizing: border-box;
    /* MODIFIED: Enhanced brightness for all nodes - THIS IS THE BASE BACKGROUND */
    background: radial-gradient(circle,
        var(--pure-white) 0%,                      /* Center: Pure white, fully opaque */
        var(--pure-white-transparent-heavy) 40%,  /* Heavy white extends further */
        var(--light-purple-glow-faint) 70%,       /* Softer, fainter purple glow, starts later */
        transparent 85%                           /* Transparent edge starts later */
    );
    border-radius: 50%;
    cursor: grab;
    /* MODIFIED: Added background to transition property */
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s; 
    /* MODIFIED: Enhanced default shadow for brighter nodes */
    box-shadow: 0 0 10px 3px var(--pure-white-transparent-medium), 
                0 0 18px 6px var(--light-purple-glow-very-faint); 
    z-index: 10;
    width: var(--node-size, var(--default-node-size));
    height: var(--node-size, var(--default-node-size));
}

.node:hover {
    transform: scale(1.15);
    box-shadow: 0 0 12px 4px var(--pure-white-transparent-heavy), 
                0 0 22px 8px var(--light-purple-glow-faint);
    /* MODIFIED: Optional slightly different background on hover */
    background: radial-gradient(circle,
        var(--pure-white) 0%,
        var(--pure-white-transparent-heavy) 45%,
        var(--light-purple-glow-medium) 75%, /* Slightly stronger purple on hover */
        transparent 90%
    );
    z-index: 15;
}

.node.dragging {
    transform: scale(1.1);
    box-shadow: 0 0 7px 3px var(--pure-white), 
                0 0 15px 8px var(--light-purple-glow-strong);
    cursor: grabbing;
    /* No specific background change for dragging, base bright style is usually sufficient */
}

.node.selected {
    box-shadow: 0 0 12px 5px var(--node-selected-glow-outer), 
                0 0 25px 10px var(--node-selected-glow-inner-purple),
                inset 0 0 5px 1px var(--node-selected-highlight-inset);
    z-index: 16;
    /* No specific background change for selected, base bright style is usually sufficient, relies on shadow for distinction */
}

/* --- Root Node - Pure White, Breathing Micro-Shimmer --- */
.node.root-node {
    /* This background gives the root node its specific pure white look before animation modifies shadow */
    background: radial-gradient(circle,
        var(--pure-white) 0%,
        var(--pure-white) 30%, /* More solid white core */
        var(--pure-white-transparent-heavy) 60%,
        var(--pure-white-transparent-faint) 80%,
        transparent 95%
    );
    box-shadow: none; /* Animation will handle the shadow */
    z-index: 12; /* Higher than default nodes, but below selected or dragging */
    border: none;
    animation: root-node-white-shimmer 3s infinite alternate ease-in-out;
}

@keyframes root-node-white-shimmer {
    0% {
        box-shadow: 0 0 12px 4px var(--pure-white-transparent-medium),
                    0 0 25px 8px var(--pure-white-transparent-faint),
                    inset 0 0 6px 1px var(--pure-white-transparent-light);
        transform: scale(1);
        opacity: 0.9;
    }
    100% {
        box-shadow: 0 0 18px 7px var(--pure-white-transparent-heavy), 
                    0 0 35px 12px var(--pure-white-transparent-medium),
                    inset 0 0 8px 2px var(--pure-white-transparent-medium);
        transform: scale(1.02);
        opacity: 1;
    }
}

.root-node-logo {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 55%; height: 55%;
    pointer-events: none;
}
.root-node-logo svg { 
    width: 100%; 
    height: 100%; 
    filter: drop-shadow(0 0 2px var(--light-purple-glow-faint)); 
}
.root-node-logo svg circle {
    fill: var(--light-purple-glow-very-faint);
    stroke: var(--light-purple-glow-faint);
    stroke-width: 2.5;
}
.root-node-logo svg path {
    fill: var(--light-purple-glow-faint);
}

/* --- Node Label & Input - Enhanced Clarity --- */
.node-label {
    position: absolute;
    background-color: var(--node-label-bg);
    color: var(--node-label-text);
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 0.92em;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    border: 1px solid var(--node-label-border);
    box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    transform: translateX(-50%);
    transition: opacity 0.25s ease-in-out, transform 0.15s ease-out, background-color 0.2s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.node-label::before {
    content: ''; 
    position: absolute; 
    bottom: -7px; 
    left: 50%;
    transform: translateX(-50%); 
    width: 0; 
    height: 0;
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent;
    border-top: 8px solid var(--node-label-border); 
    opacity: 0.95; 
    transition: opacity 0.2s, border-top-color 0.2s;
}
.node:hover .node-label { 
    transform: translateX(-50%) translateY(-5px); 
    background-color: var(--node-label-hover-bg); 
}
.node:hover .node-label::before { 
    opacity: 1; 
}
.node-label.empty-label { 
    display: none !important; 
}

.node-input {
    position: absolute;
    background-color: var(--node-input-bg);
    color: var(--node-input-text);
    border: 1px solid var(--node-input-border);
    padding: 9px 12px;
    border-radius: 6px;
    z-index: 101;
    min-width: 150px;
    font-size: 0.92em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 0 10px 3px var(--light-purple-glow-medium),
                inset 0 2px 4px rgba(0,0,0,0.4);
    resize: none;
    line-height: 1.4;
    transition: box-shadow 0.3s, border-color 0.3s;
    outline: none;
}
.node-input:focus {
    border-color: var(--node-input-focus-border);
    box-shadow: 0 0 15px 5px var(--node-input-focus-shadow),
                inset 0 1px 3px rgba(0,0,0,0.3);
}

/* Lines SVG */
#lines-svg line, 
#lines-svg path { 
    stroke: var(--line-stroke-color); 
    stroke-width: 1.5px; 
    transition: stroke 0.2s, stroke-width 0.2s, stroke-opacity 0.2s; /* Added stroke-opacity */
    fill: none; 
    stroke-opacity: 0.75; /* Default line opacity for a softer look */
}
#lines-svg line:hover, 
#lines-svg path:hover { /* This won't work directly as SVG elements don't receive hover like HTML, JS handles line hover effect on node hover */
    stroke-opacity: 1;
}
.line-flow { 
    stroke-dasharray: 7 3; 
    animation: flow-animation 1.8s linear infinite; 
}
@keyframes flow-animation { 
    to { stroke-dashoffset: -10; }
}

#lines-svg defs #lineGrad1 stop[offset="0%"] { stop-color: var(--line-gradient-1-start); stop-opacity:0.8 }
#lines-svg defs #lineGrad1 stop[offset="100%"] { stop-color: var(--line-gradient-1-end); stop-opacity:0.9 }
#lines-svg defs #lineGrad2 stop[offset="0%"] { stop-color: var(--line-gradient-2-start); stop-opacity:0.9 }
#lines-svg defs #lineGrad2 stop[offset="100%"] { stop-color: var(--line-gradient-2-end); stop-opacity:0.8 }

.line-gradient-1 { stroke: url(#lineGrad1); }
.line-gradient-2 { stroke: url(#lineGrad2); }

/* Context Menu */
#node-context-menu { 
    display: none; 
    position: absolute; 
    background: var(--context-menu-bg); 
    border: 1px solid var(--context-menu-border); 
    border-radius: 6px; 
    padding: 8px 0; 
    z-index: 200; 
    box-shadow: 0px 4px 15px rgba(0,0,0,0.55); 
    min-width: 250px; 
}
#node-context-menu .context-menu-item { 
    padding: 11px 22px; 
    color: var(--context-menu-item-text); 
    cursor: pointer; 
    font-size: 0.9em; 
    display: flex; 
    align-items: center; 
    transition: background-color 0.15s, color 0.15s; 
}
.context-menu-item .icon { 
    margin-right: 12px; 
    font-size: 1.1em; 
    opacity: 0.9; 
    transition: opacity 0.15s;
}
.context-menu-item .menu-text-dynamic { 
    flex-grow: 1; 
    text-align: left; 
}
#node-context-menu .context-menu-item:hover { 
    background: var(--context-menu-item-hover-bg); 
    color: var(--context-menu-item-hover-text); 
}
.context-menu-item:hover .icon { 
    opacity: 1; 
}
.context-menu-item.disabled { 
    color: #666 !important; 
    cursor: not-allowed !important; 
    background: rgba(40,40,40,0.2) !important; 
}
.context-menu-item.disabled .icon { 
    opacity: 0.4; 
}
.context-menu-divider { 
    border-color: var(--context-menu-divider-color); 
    margin: 8px 0; 
    border-style: solid; 
    border-width: 1px 0 0 0; 
    opacity: 0.5; 
}

/* User Logo & Loading */
#user-logo { 
    position: absolute; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    color: var(--pure-white-transparent-heavy); 
    font-size: 0.9em; 
    font-family: 'Verdana', sans-serif; 
    z-index: 5; 
    pointer-events: none; 
    white-space: nowrap; 
    text-align: center; 
    animation: user-logo-breathing-glow 4s infinite ease-in-out; 
}
@keyframes user-logo-breathing-glow { 
    0%, 100% { text-shadow: 0 0 4px var(--light-purple-glow-very-faint); opacity: 0.7; } 
    50% { text-shadow: 0 0 8px var(--light-purple-glow-faint); opacity: 1; } 
}

.node-icon { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: calc(var(--node-size, var(--default-node-size)) * 0.55);
    pointer-events: none; 
    opacity: 0.85; 
    color: var(--light-purple-base); 
}

#loading-indicator { 
    display: none; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background-color: rgba(30, 25, 50, 0.92); 
    color: var(--pure-white);
    padding: 25px 35px; 
    border-radius: 10px; 
    z-index: 2000; 
    font-size: 1.15em; 
    box-shadow: 0 0 20px var(--light-purple-glow-strong); 
    text-align: center; 
}
#loading-indicator span { 
    margin-bottom: 10px; 
}
#loading-indicator::after { 
    content: ''; 
    display: block; 
    width: 28px; 
    height: 28px; 
    border: 4px solid var(--light-purple-glow-faint); 
    border-top-color: var(--pure-white); 
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Empty Canvas Prompt */
#empty-canvas-prompt {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--pure-white-transparent-light);
    text-align: center;
    font-size: 1.1em;
    pointer-events: none;
    z-index: 5;
    opacity: 0.8;
}
#empty-canvas-prompt p { margin: 5px 0; }

/* Toast Notification */
.toast {
    visibility: hidden;
    min-width: 250px;
    background-color: var(--context-menu-bg);
    color: var(--pure-white);
    text-align: center;
    border-radius: 5px;
    padding: 16px;
    position: fixed;
    z-index: 3000;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-size: 0.95em;
    border: 1px solid var(--light-purple-glow-faint);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s, visibility 0.5s;
}
.toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
}