:root, [data-theme='dark'] {
    --bg-primary: #000000;
    --bg-primary-rgb: 0, 0, 0;
    --bg-secondary: #111111;
    --bg-secondary-rgb: 17, 17, 17;
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --border-primary: #333333;
    --accent-primary: #ffffff;
    --accent-color: #3b82f6; /* Lighter blue for dark mode */
    --accent-hover: #2563eb;
    --hover-bg: #222222;
    --bg-tertiary: #2a2a2a;
    --accent-soft: rgba(59, 130, 246, 0.25);
    --danger-soft: rgba(239, 68, 68, 0.15);
    --accent-soft-border: rgba(59, 130, 246, 0.4);
    --accent-shadow: rgba(59, 130, 246, 0.4);
    --port-outline: #ffffff;
    --port-border: rgba(255, 255, 255, 0.4);
    --port-shadow: rgba(255, 255, 255, 0.4);
    --video-opacity: 1.0;
    --video-overlay-start: rgba(0, 0, 0, 0.4);
    --video-overlay-end: rgba(0, 0, 0, 0.7);
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.2);
    --text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    --dot-inactive: rgba(255, 255, 255, 0.3);
    --dot-border: rgba(255, 255, 255, 0.1);
    --text-weight: 400;
}

[data-theme='light'] {
    --bg-primary: #ffffff;
    --bg-primary-rgb: 255, 255, 255;
    --bg-secondary: #fafafa;
    --bg-secondary-rgb: 250, 250, 250;
    --text-primary: #000000;
    --text-secondary: #666666;
    --border-primary: #eaeaea;
    --accent-primary: #000000;
    --accent-color: #2563eb; /* Blue for light mode */
    --accent-hover: #1d4ed8;
    --hover-bg: #f5f5f5;
    --bg-tertiary: #f0f0f0;
    --accent-soft: rgba(37, 99, 235, 0.15);
    --danger-soft: rgba(239, 68, 68, 0.08);
    --accent-soft-border: rgba(37, 99, 235, 0.1);
    --accent-shadow: rgba(37, 99, 235, 0.2);
    --port-outline: #22c55e;
    --port-border: rgba(0, 0, 0, 0.15);
    --port-shadow: rgba(34, 197, 94, 0.4);
    --video-opacity: 0.6;
    --video-overlay-start: rgba(255, 255, 255, 0.4);
    --video-overlay-end: rgba(255, 255, 255, 0.7);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.05);
    --glass-shadow: rgba(0, 0, 0, 0.05);
    --text-shadow: none;
    --dot-inactive: rgba(0, 0, 0, 0.1);
    --dot-border: rgba(0, 0, 0, 0.05);
    --text-weight: 500;
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body, #root {
    width: 100%;
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background-color: var(--bg-primary);
}

html, body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    margin: 0;
}

input, select, textarea {
    font-size: 16px; /* Prevents auto-zoom on iOS */
}

button {
    transition: all 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes toastSlideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-shadow); }
    70% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@keyframes mute-pulse {
    0% { opacity: 1; color: #ef4444; }
    50% { opacity: 0.4; color: #b91c1c; }
    100% { opacity: 1; color: #ef4444; }
}

/* Force React Flow Edge Visibility */
.react-flow__edges {
    pointer-events: none !important;
    overflow: visible !important;
    z-index: 1001 !important;
}

/* Ensure UI panels and edge labels are above edges */
.react-flow__panel, .react-flow__edge-label-renderer {
    z-index: 2002 !important;
}

.react-flow__edge {
    pointer-events: visibleStroke !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.react-flow__edge-path {
    stroke-opacity: 1 !important;
    visibility: visible !important;
    fill: none !important;
}

/* Ensure markers (arrows) are visible */
.react-flow__arrowhead {
    opacity: 1 !important;
    visibility: visible !important;
    fill-opacity: 1 !important;
}

/* High Density Port Interaction */
.react-flow__handle {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out !important;
}

.react-flow__handle:hover {
    transform: scale(1.5) !important;
    z-index: 100 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5) !important;
}

.react-flow__handle span {
    pointer-events: none !important;
}

.react-flow__handle:hover span {
    opacity: 1 !important;
    transform: translate(-50%, 4px) scale(0.8) !important;
}

/* Hide MiniMap on mobile */
@media (max-width: 768px) {
    .react-flow__minimap {
        display: none !important;
    }
}