/* ========================================
   ELECTRIMANCER CORE STYLES
   ========================================
   Shared styles for all Electrimancer simulators
   Import this in your simulator's HTML before simulator-specific styles
*/

/* ========================================
   DESIGN TOKENS (Theming)
   ======================================== */
@import url("./tokens.css");

/* ========================================
   CSS-FIRST LAYOUT VARIABLES
   ======================================== */

:root {
    --pane-width: 0px;  /* Set to 360px by integratedPane.js when pane is present */
}

/* ========================================
   BASE RESET
   ======================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* ========================================
   APP CONTAINER & WORKBENCH
   ======================================== */

.app-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;         /* Center workbench vertically */
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-left: var(--pane-width, 0px);  /* Reserve space for integrated pane */
    padding-top: 64px;                      /* Reserve space for fixed header */
    padding-bottom: var(--ladder-drawer-height, 0px); /* Reserve space for ladder drawer */
}

/* Fixed gradient background layer behind everything */
.app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 800px 600px at 20% 30%, var(--gradient-coral) 0%, transparent 50%),
        radial-gradient(ellipse 600px 800px at 80% 70%, var(--gradient-purple) 0%, transparent 50%),
        radial-gradient(ellipse 700px 500px at 50% 50%, color-mix(in srgb, var(--gradient-coral) 30%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, var(--gradient-purple) 0%, var(--gradient-coral) 50%, var(--accent) 100%);
    background-size: 100% 100%;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* Workbench - main simulator area (responsive, maintains aspect ratio) */
.workbench {
    position: relative;
    /* Use the full authored coordinate system (1320x820) */
    /* The 60px visual margin is built into component positions */
    aspect-ratio: 1320 / 820;
    /* Largest width that respects BOTH available width AND max-height while maintaining ratio */
    width: min(100%, calc((100vh - 64px) * 1320 / 820));
    max-height: calc(100vh - 64px);
    overflow: hidden;
    /* CSS centering — no JS needed for correct initial display */
    align-self: center;
    margin: auto 0;                       /* Vertical centering via auto margins */
    background:
        radial-gradient(ellipse 800px 600px at 20% 30%, var(--gradient-coral) 0%, transparent 50%),
        radial-gradient(ellipse 600px 800px at 80% 70%, var(--gradient-purple) 0%, transparent 50%),
        radial-gradient(ellipse 700px 500px at 50% 50%, color-mix(in srgb, var(--gradient-coral) 30%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, var(--gradient-purple) 0%, var(--gradient-coral) 50%, var(--accent) 100%);
    background-size: 100% 100%;
    background-position: center;
    touch-action: none;
}


/* Wire canvas - absolute positioned within workbench */
#wireCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    pointer-events: none;
}

/* Component layer - absolute positioned within workbench
   No z-index or isolation - components participate directly in workbench stacking context
   pointer-events: none lets wire creation clicks pass through to canvas */
.component-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Component bodies need pointer-events for view toggling (click to open/close)
   This overrides the inherited pointer-events: none from component-layer */
.realistic-body {
    pointer-events: auto;
    cursor: pointer;
}

/* Header layer - separate layer for component headers
   z-index 5 ensures headers are always BELOW wires (z-index 500)
   This fixes the issue where headers on closed components (z-index 650)
   would appear above wires */
.header-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* Hover label layer - separate layer for component hover labels
   z-index 1001 ensures labels stay above trigger-boosted components
   (trigger-label-active boosts component to 1000). Terminal pin labels
   at 9999/10000 remain far above — no conflict. */
.hover-label-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1001;
}

/* Wire hover label overlay - renders wire identification labels above wires
   and closed components, escaping the component stacking context trap.
   z-index 700: above wireCanvas (500), above closed components (650),
   below wirePreviewCanvas (800), below trigger labels (900). */
.wire-hover-label-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 700;
}

/* Overlay label styling (matches pin-label wire-hovered appearance) */
.wire-hover-label {
    position: absolute;
    background: rgba(59, 130, 246, 0.95);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.6), 0 0 8px rgba(59, 130, 246, 0.2);
}

/* Learn phase terminal labels — shown during sequential draw, fade out between phases */
.learn-label-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 710;  /* Above wire-hover-label-layer (700), below wirePreviewCanvas (800) */
}

.learn-wire-label {
    position: absolute;
    background: rgba(59, 130, 246, 0.95);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.6), 0 0 8px rgba(59, 130, 246, 0.2);
    opacity: 1;
    transition: opacity 300ms ease-out;
}

.learn-wire-label.fading {
    opacity: 0;
}

/* ========================================
   HEADER
   ======================================== */

header,
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--header-bg);
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.25),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 0 0 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* 3D glass overlay gradient */
header::after,
.site-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 30%,
            transparent 50%,
            rgba(0, 0, 0, 0.05) 100%);
    border-radius: 0 0 16px 16px;
    pointer-events: none;
    z-index: 1;
}

/* Ensure header content is above the overlay */
header > *,
.site-header > * {
    position: relative;
    z-index: 2;
}

/* ========================================
   HEADER NAVIGATION
   ======================================== */

.header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-nav-link {
    font-family: 'Barlow', sans-serif;
    color: var(--primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}

@media (hover: hover) {
    .header-nav-link:hover {
        color: var(--primary-hover);
    }
}

.header-nav-link:active {
    color: var(--primary-hover);
}

/* ========================================
   LOGO & BRANDING
   ======================================== */

.logo {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: 'Allura', cursive;
    font-weight: 400;
    font-size: 2.7rem;
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
    letter-spacing: 1px;
    position: relative;
    top: 6px;
}

.logo span {
    margin-top: 8px;
}

.logo-image {
    width: 51px;
    height: 51px;
    position: relative;
    left: 4px;
    top: -11px;
    transform: rotate(15deg);
    filter: var(--logo-filter);
}

.logo svg {
    color: var(--primary);
}

.logo .version {
    font-size: 0.75rem;
    background: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

/* ========================================
   TOOLBAR & MODULE TITLE
   ======================================== */

.module-title {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary);
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0.95;
}

/* ========================================
   TERMINAL PINS
   ========================================
   Base terminal pin styles for all simulators.

   Two visibility modes:
   1. Always visible (default): For simulators where terminals are interactive
   2. Hidden by default: Add `opacity: 0` override in simulator CSS,
      terminals become visible in calibration mode or when selected
   ======================================== */

.terminal-pin,
.terminal.terminal-pin {
    position: absolute;
    width: 32px;  /* Large hitbox for easier connection */
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid transparent;
    cursor: crosshair;
    transform: translate(-50%, -50%);
    z-index: 100;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s, background 0.2s;
    opacity: 0;  /* Hidden by default - shown on hover, selection, or calibration mode */
}

body.drawing-wire {
    cursor: crosshair;
}

/* Wire canvas stays at normal z-index during drag.
   Drag-to-peek opens components to interior (z-index auto — no stacking context),
   so wires are naturally visible above open components (DOM order: component-layer before wireCanvas).
   Closed components (z-index 650) correctly hide wires behind them.
   Interior components must NOT set z-index — that creates a stacking context
   trapping terminal labels below wireCanvas (z-index 500). */

/* Show terminals in calibration mode (overrides any simulator opacity: 0) */
body.calibration-mode .terminal-pin,
.calibration-mode .terminal-pin {
    opacity: 1;
}

@media (hover: hover) {
    .terminal-pin:hover {
        opacity: 1;  /* Show on hover */
        background: rgba(34, 211, 238, 0.5);  /* Cyan - distinct from proximity blue */
        box-shadow:
            0 0 0 4px rgba(34, 211, 238, 0.6),  /* Cyan ring */
            0 0 12px rgba(34, 211, 238, 0.8);   /* Outer glow */
        border-color: rgba(34, 211, 238, 1);
        transform: translate(-50%, -50%) scale(1.3);  /* Larger than proximity */
        z-index: 850;  /* Above wireCanvas (500) and wirePreviewCanvas (800) so pin-label is visible */
    }
}

/* Touch feedback - works on both desktop and mobile */
.terminal-pin:active {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Highlighted terminal (for teaching/guidance) */
.terminal-pin.highlight {
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.4);
}

/* Selected terminal (during wire drawing) */
.terminal-pin.selected,
.terminal.selected {
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.6);
    opacity: 1;  /* Always visible when selected */
    z-index: 850;  /* Above wireCanvas (500) and wirePreviewCanvas (800) */
}

/* Proximity visible - shows terminal when wire is being dragged nearby */
.terminal-pin.proximity-visible {
    opacity: 1;
    background: rgba(59, 130, 246, 0.25);  /* Softer than hover */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);  /* Subtler ring */
    border-color: rgba(59, 130, 246, 0.5);
    transform: translate(-50%, -50%) scale(1.1);  /* Slightly smaller than hover */
    z-index: 600;  /* Above wireCanvas (500) so pin-label is visible during drag */
}

/* Proximity-visible terminal that is ALSO directly hovered - must override proximity styles */
@media (hover: hover) {
    .terminal-pin.proximity-visible:hover {
        background: rgba(34, 211, 238, 0.5);  /* Cyan - distinct from proximity blue */
        box-shadow:
            0 0 0 4px rgba(34, 211, 238, 0.6),
            0 0 12px rgba(34, 211, 238, 0.8);
        border-color: rgba(34, 211, 238, 1);
        transform: translate(-50%, -50%) scale(1.3);  /* Larger than proximity */
        z-index: 850;  /* Above wireCanvas (500) and wirePreviewCanvas (800) */
    }
}

/* Connected terminal */
.terminal-pin.connected {
    background: rgba(34, 197, 94, 0.3);
    border-color: var(--success);
}

/* Terminal Labels - Standalone (sibling to terminal-pin) */
.pin-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.8);
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Terminal Labels - Nested (child of terminal-pin) */
.terminal-pin .pin-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    border: 1px solid rgba(139, 92, 246, 0.4);
    box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.6), 0 0 8px rgba(139, 92, 246, 0.2);
    z-index: 9999;
}

@media (hover: hover) {
    .terminal-pin:hover .pin-label {
        opacity: 1;
        background: rgba(34, 211, 238, 0.95);  /* Cyan - matches hover state */
        color: var(--bg-dark);  /* Dark text on bright cyan */
        font-weight: 600;
        z-index: 10000;  /* Above proximity-visible labels */
    }
}

/* Show labels when terminal is proximity-visible (while dragging wire nearby) */
.terminal-pin.proximity-visible .pin-label {
    opacity: 1;
    background: rgba(59, 130, 246, 0.85);  /* Slightly softer than hover */
    color: var(--text-main);
    z-index: 9999;
}

/* Proximity-visible terminal that is ALSO hovered - label uses cyan */
@media (hover: hover) {
    .terminal-pin.proximity-visible:hover .pin-label {
        background: rgba(34, 211, 238, 0.95);  /* Cyan - matches hover state */
        color: var(--bg-dark);
        font-weight: 600;
        z-index: 10000;
    }
}

/* Auto-position labels opposite to wire exit direction
   Wire exits top → label below terminal
   Wire exits bottom → label above terminal (default)
   Wire exits left/right → label above terminal (default) */
.terminal-pin[data-exit-direction="top"] .pin-label {
    top: auto;
    bottom: -20px;
}

/* Explicit label position override (independent of exitDirection) */
.terminal-pin[data-label-position="below"] .pin-label {
    top: auto;
    bottom: -20px;
}

.terminal-pin[data-exit-direction="left"] .pin-label,
.terminal-pin[data-exit-direction="right"] .pin-label {
    /* Keep default (above) for left/right exits - less likely to overlap */
}

/* Terminal pins visible and highlighted when their wire is hovered */
.terminal-pin.wire-hovered {
    opacity: 1;
    background: rgba(59, 130, 246, 0.4);  /* Blue with transparency */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);  /* Blue ring outline */
    border-color: rgba(59, 130, 246, 0.8);
    transform: translate(-50%, -50%) scale(1.15);
    z-index: 600;  /* Above wireCanvas (500) so pin-label children are visible */
}

/* Original pin-label suppressed when wire-hovered -- overlay layer takes over.
   :not(:hover) ensures direct terminal hover still shows the teal label. */
.terminal-pin.wire-hovered:not(:hover) .pin-label {
    opacity: 0;
}

.terminal-pin.multi-wire-active .pin-label {
    opacity: 1;
    background: rgba(139, 92, 246, 0.95);
    color: white;
    font-weight: 600;
    border: 2px solid rgba(167, 139, 250, 0.8);
    z-index: 9999;  /* Ensure labels appear above wires */
}

.terminal-pin.multi-wire-active {
    opacity: 1;
    background: rgba(139, 92, 246, 0.4);
    border-color: rgba(167, 139, 250, 0.8);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.5);  /* Purple ring outline */
    z-index: 600;  /* Above wireCanvas (500) so pin-label children are visible */
}

/* Touch-visible labels (mobile tap-to-show) */
.terminal-pin.touch-visible .pin-label,
.pin-label.touch-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Terminal Wire Count Badge */
.terminal-wire-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #dc2626;
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 8px;
    min-width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 101;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ========================================
   INTERACTIVE TRIGGERS (Buttons)
   ======================================== */

.interactive-trigger {
    position: absolute;
    transform: translate(-50%, -50%);
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.08s ease-out;
    z-index: 110;
    background: transparent;
    cursor: pointer;
}

@media (hover: hover) {
    /* Circular buttons (pushbuttons, OL reset) - radial glow on hover */
    .interactive-trigger.trigger-button[data-shape="circle"]:hover {
        background: radial-gradient(circle at center, rgba(59, 130, 246, 0.5), transparent 55%);
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.5);
    }

    /* Rectangular buttons (manual operator) - glow on hover */
    .interactive-trigger.trigger-button[data-shape="rect"]:hover {
        background: rgba(59, 130, 246, 0.25);
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.5);
    }

    /* Handle triggers (disconnect switch) - glow on hover */
    .interactive-trigger.trigger-handle:hover {
        background: rgba(59, 130, 246, 0.25);
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.5);
    }
}

.interactive-trigger:active {
    opacity: 0.8;
}

.interactive-trigger.pressed {
    transform: translate(-50%, -50%) scale(0.92) !important;
    animation: buttonPress 0.15s ease-out;
}

/* Circular buttons (STOP/RUN/JOG) */
.interactive-trigger[data-shape="circle"].pressed {
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.4), rgba(59, 130, 246, 0.15));
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.6),
        inset 0 0 0 2px rgba(59, 130, 246, 0.3),
        0 0 15px rgba(59, 130, 246, 0.5);
}

/* Rectangular buttons (bump button) */
.interactive-trigger[data-shape="rect"].pressed {
    background: rgba(0, 0, 0, 0.3);
    box-shadow:
        inset 0 4px 8px rgba(0, 0, 0, 0.7),
        inset 0 0 0 2px rgba(255, 193, 7, 0.4),
        0 0 12px rgba(255, 193, 7, 0.3);
    border: 1px solid rgba(255, 193, 7, 0.6);
}

@keyframes buttonPress {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(0.88); }
    100% { transform: translate(-50%, -50%) scale(0.92); }
}

/* ========================================
   LED INDICATORS
   ======================================== */

.led-indicator {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
    transition: all 0.15s ease-out;
}

.led-indicator.led-off {
    background: radial-gradient(circle at 30% 30%, #2a2a2a, #111);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.led-indicator.led-on {
    background: radial-gradient(circle at 30% 30%, #93c5fd, #3b82f6);
    box-shadow:
        0 0 6px rgba(59, 130, 246, 1),
        0 0 12px rgba(59, 130, 246, 0.9),
        0 0 20px rgba(59, 130, 246, 0.7),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(147, 197, 253, 0.6);
}

/* ========================================
   SIDE MENU
   ======================================== */

.side-menu {
    position: fixed;
    top: 64px;
    right: -280px;
    width: 280px;
    max-height: calc(100vh - 64px);
    background: rgba(15, 23, 42, 0.4);
    box-shadow:
        inset 1px 0 1px rgba(255, 255, 255, 0.25),
        inset -1px 0 1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        -8px 0 30px rgba(0, 0, 0, 0.5),
        -1px 0 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    z-index: 2000;
    transition: right 0.3s ease;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.side-menu.open {
    right: 0;
}

.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    position: sticky;
    top: 0;
    z-index: 10;
}

.side-menu-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-main);
}

.side-menu-content {
    flex: 1;
    padding: 8px;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.menu-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.menu-section h3 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    color: var(--primary);
}

/* 3D glass overlay gradient for side menu */
.side-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border-radius: 16px 0 0 16px;
    pointer-events: none;
    z-index: 1;
}

/* Menu Options List */
.menu-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
}

.menu-option-item {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #f8fafc;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    user-select: none;
    text-shadow: 0 0 5px rgba(139, 92, 246, 0.2);
}

@media (hover: hover) {
    .menu-option-item:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
    }
}

.menu-option-item.active {
    background: rgba(59, 130, 246, 0.15);
    border-left-color: var(--primary);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.menu-option-item.active span {
    color: var(--primary);
}

/* Menu divider for separating nav items from other menu items */
.menu-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent);
    margin: 8px 0;
}

/* Menu parent with submenu */
.menu-parent {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.submenu-arrow {
    margin-left: 8px;
    transition: transform 0.2s ease;
}

@media (hover: hover) {
    .menu-parent:hover .submenu-arrow {
        transform: translateX(3px);
    }
}

/* Submenu styles */
.submenu {
    position: absolute;
    right: calc(100% + 9px);
    top: 0;
    min-width: 220px;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 1px 0 1px rgba(255, 255, 255, 0.25),
        inset -1px 0 1px rgba(0, 0, 0, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 8px;
    display: none;
    z-index: 2100;
}

@media (hover: hover) {
    .menu-parent:hover .submenu {
        display: block !important;
    }
}

/* Tap-to-toggle for mobile (touch devices) */
.submenu.visible {
    display: block !important;
    opacity: 1;
}

.submenu .menu-option-item {
    margin-bottom: 4px;
    pointer-events: auto;
}

.submenu .menu-option-item:last-child {
    margin-bottom: 0;
}

/* Scrollbar styling for menu */
.side-menu-content::-webkit-scrollbar {
    width: 8px;
}

.side-menu-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.side-menu-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

@media (hover: hover) {
    .side-menu-content::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

/* ========================================
   TERMINATIONS MODAL - Slide-out Sidebar
   ======================================== */

.modal {
    position: fixed;
    top: 64px;
    right: -380px;
    width: 350px;
    max-height: calc(100vh - 64px);
    background: linear-gradient(to bottom,
            #fdfcf8 0%,
            #f8f6ed 100%);
    border-radius: 8px 0 0 8px;
    border: 1px solid #d4c5a9;
    border-right: none;
    box-shadow:
        -8px 0 30px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 700;
    transition: right 0.3s ease;
    overflow: hidden;
    /* Notebook paper lines */
    background-image:
        linear-gradient(to bottom, #fdfcf8 0%, #f8f6ed 100%),
        repeating-linear-gradient(transparent,
            transparent 29px,
            #e8dcc4 29px,
            #e8dcc4 30px);
    background-size: 100% 100%, 100% 30px;
    background-position: 0 0, 0 40px;
}

.modal.open {
    right: 0;
}

.modal-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 10px 30px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: #2c3e50;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: normal;
}

.modal-header .btn {
    font-size: 24px;
    line-height: 1;
    padding: 4px 12px;
}

.modal-body {
    position: relative;
    padding: 10px 30px 30px 30px;
    overflow-y: auto;
    flex: 1;
    z-index: 2;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    color: #2c3e50;
    line-height: 30px;
}

/* Copy button in notebook modal */
#copyModalTerminationsBtn {
    background: transparent;
    border: none;
    color: #2c3e50;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

@media (hover: hover) {
    #copyModalTerminationsBtn:hover {
        background: rgba(44, 62, 80, 0.1);
    }
}

#copyModalTerminationsBtn svg {
    display: block;
}

/* ========================================
   QUICK-CHECK QUESTIONS
   ======================================== */

.mentor-message.quick-check {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--primary);
}

.quick-check-question {
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.4;
}

.quick-check-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-check-option {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: var(--text-main);
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.quick-check-option:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 74, 222, 128), 0.2) 0%, rgba(var(--primary-rgb, 74, 222, 128), 0.1) 100%);
    border-color: var(--primary);
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.quick-check-option:disabled {
    cursor: default;
    opacity: 0.7;
}

.quick-check-option.correct {
    background: rgba(74, 222, 128, 0.25);
    border-color: var(--success);
    color: var(--success);
}

.quick-check-option.incorrect {
    background: rgba(239, 68, 68, 0.25);
    border-color: var(--danger);
    color: var(--danger);
}

/* ========================================
   HAMBURGER MENU BUTTON (Schematic Node)
   ======================================== */

.btn-hamburger {
    display: none; /* Hidden by default; shown via JS on localhost only */
    flex-direction: column;
    justify-content: space-between;
    width: 36px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Each line is a row with dot + line */
.btn-hamburger .menu-line {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 6px;
}

/* Terminal dot on the left */
.btn-hamburger .menu-dot {
    width: 6px;
    height: 6px;
    background-color: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Line extending from the dot */
.btn-hamburger .menu-bar {
    height: 2px;
    flex-grow: 1;
    background-color: var(--primary);
    border-radius: 1px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s;
}

/* Energize animation gradient overlay */
.btn-hamburger .menu-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

/* Hover state - energize animation */
@media (hover: hover) {
    .btn-hamburger:hover .menu-dot {
        box-shadow: 0 0 6px var(--primary);
    }

    .btn-hamburger:hover .menu-bar::after {
        opacity: 1;
        animation: energize 0.8s infinite;
    }

    .btn-hamburger:hover .menu-line:nth-child(2) .menu-bar::after {
        animation-delay: 0.15s;
    }

    .btn-hamburger:hover .menu-line:nth-child(3) .menu-bar::after {
        animation-delay: 0.3s;
    }
}

@keyframes energize {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ========================================
   CALIBRATION MODE
   ======================================== */

body.calibration-mode .terminal-pin {
    background: rgba(245, 158, 11, 0.4);  /* Amber - highly visible */
    border: 2px solid var(--warning);     /* Solid amber border */
    cursor: move;
}

body.calibration-mode .terminal-pin .pin-label {
    opacity: 1;
    background: transparent;
    color: #f59e0b;
    font-size: 9px;
    padding: 0;
    box-shadow: none;
    border: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.7);
}

/* Disable proximity-visible effects in calibration mode */
body.calibration-mode .terminal-pin.proximity-visible {
    background: rgba(245, 158, 11, 0.4);
    box-shadow: none;
    border: 2px solid var(--warning);
    transform: translate(-50%, -50%);
    z-index: auto;
}

body.calibration-mode .terminal-pin.proximity-visible .pin-label {
    background: transparent;
    color: #f59e0b;
    box-shadow: none;
    border: none;
}

/* ========================================
   COMPONENT HEADERS
   ======================================== */

/* Legacy component header style - REMOVED from renderers (2026-01-31)
   Replaced by hover labels created in componentManager.js
   Keeping minimal styles for backwards compatibility if any still exist */
.component-header {
    display: none;
}

/* ========================================
   HOVER LABELS (Glass Tags)
   ========================================
   New hover-based component identification system.
   Replaces permanent rotated headers with on-demand labels.
*/

/* Container for hover label - positioned relative to component */
.component-hover-label {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 1000;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Animation */
    transition:
        opacity var(--timing-hover, 150ms) var(--easing-smooth, ease-out),
        transform var(--timing-hover, 150ms) var(--easing-smooth, ease-out);
}

/* Hide hover labels during wire drawing to keep focus on wiring */
body.drawing-wire .component-hover-label {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Show on component hover (when label is inside component) */
.component:hover .component-hover-label,
.component.label-visible .component-hover-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-100%) translateY(-4px);
}

/* Show when label is in separate layer (uses .visible class from JS) */
.hover-label-layer .component-hover-label.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-100%) translateY(-4px);
}

/* Below variant in separate layer — override bottom: -8px from in-component variant
   to prevent element stretching (inline top handles positioning) */
.hover-label-layer .component-hover-label--below {
    bottom: auto;
}

.hover-label-layer .component-hover-label--below.visible {
    transform: translateX(-50%) translateY(4px);
}

/* Glass tag styling */
.component-hover-label .label-content {
    background: var(--hover-label-bg, rgba(30, 41, 59, 0.9));
    border: 1px solid var(--hover-label-border, rgba(255, 255, 255, 0.15));
    border-radius: var(--hover-label-radius, 6px);
    padding: var(--hover-label-padding, 6px 12px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Typography */
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--hover-label-text, #f8fafc);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;

    /* Subtle glow */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 20px rgba(var(--primary-rgb, 74, 222, 128), 0.1);
}

/* Component ID styling (e.g., "CR1") */
.component-hover-label .label-id {
    color: var(--primary);
    font-weight: 600;
}

/* Component name styling (primary display element) */
.component-hover-label .label-name {
    color: var(--text-main);
    font-weight: 600;
}

/* Separator between ID and name */
.component-hover-label .label-id::after {
    content: ' •';
    color: var(--text-dim);
    font-weight: 400;
}

/* Interaction hint styling */
.component-hover-label .label-hint {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 4px;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    max-width: 220px;
}

/* Pointer triangle */
.component-hover-label::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--hover-label-bg, rgba(30, 41, 59, 0.9));
}

/* Tooltip below variant - for components near top edge */
.component-hover-label--below {
    top: auto;
    bottom: -8px;
    transform: translateX(-50%) translateY(100%);
}

.component:hover .component-hover-label--below,
.component.label-visible .component-hover-label--below {
    transform: translateX(-50%) translateY(100%) translateY(4px);
}

/* Flip the pointer triangle for below variant */
.component-hover-label--below::after {
    bottom: auto;
    top: -6px;
    border-top: none;
    border-bottom: 6px solid var(--hover-label-bg, rgba(30, 41, 59, 0.9));
}

/* Right-edge variant - for components near the right side of the workbench */
.component-hover-label--right-edge {
    transform: translateX(-95%) translateY(-100%);
}

.component:hover .component-hover-label--right-edge,
.component.label-visible .component-hover-label--right-edge {
    transform: translateX(-95%) translateY(-100%) translateY(-4px);
}

.hover-label-layer .component-hover-label--right-edge.visible {
    transform: translateX(-95%) translateY(-100%) translateY(-4px);
}

/* Right-edge + below combo */
.hover-label-layer .component-hover-label--right-edge.component-hover-label--below.visible {
    transform: translateX(-95%) translateY(4px);
}

.component:hover .component-hover-label--right-edge.component-hover-label--below,
.component.label-visible .component-hover-label--right-edge.component-hover-label--below {
    transform: translateX(-95%) translateY(100%) translateY(4px);
}

/* Shift pointer triangle for right-edge variant */
.component-hover-label--right-edge::after {
    left: 95%;
}

.component-hover-label--right-edge.component-hover-label--below::after {
    left: 95%;
}

/* ========================================
   TRIGGER HOVER LABELS (Blue Accent Glass)
   ========================================
   Labels appear on interactive trigger hover.
   Visually distinct from dark component labels.
*/

.trigger-hover-label {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 900;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
                visibility 150ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.trigger-hover-label.visible {
    opacity: 1;
    visibility: visible;
}

body.drawing-wire .trigger-hover-label {
    display: none !important;
}

/* Boost component z-index when trigger label is showing so label
   isn't trapped behind adjacent components (stacking context fix).
   Suppressed during wire drawing — labels are already hidden then. */
.component.trigger-label-active:not(.drawing-wire-active) {
    z-index: 1000 !important;
}
body.drawing-wire .component.trigger-label-active {
    z-index: unset !important;
}

.trigger-label-content {
    position: relative;
    background: var(--trigger-label-bg);
    border: 1px solid var(--trigger-label-border);
    border-radius: var(--trigger-label-radius);
    padding: var(--trigger-label-padding);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(59, 130, 246, 0.2);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.trigger-label-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--trigger-label-name-color);
    line-height: 1.2;
}

.trigger-label-action {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--trigger-label-action-color);
    line-height: 1.2;
}

/* Position: Right of trigger */
.trigger-label-right {
    transform: translateY(-50%) translateX(16px);
}

.trigger-label-right.visible {
    transform: translateY(-50%) translateX(20px);
}

.trigger-label-right .trigger-label-content::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid var(--trigger-label-border);
}

/* Position: Left of trigger */
.trigger-label-left {
    transform: translateY(-50%) translateX(-100%) translateX(-16px);
}

.trigger-label-left.visible {
    transform: translateY(-50%) translateX(-100%) translateX(-20px);
}

.trigger-label-left .trigger-label-content::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid var(--trigger-label-border);
}

/* Position: Above trigger */
.trigger-label-above {
    transform: translateX(-50%) translateY(-100%) translateY(-16px);
}

.trigger-label-above.visible {
    transform: translateX(-50%) translateY(-100%) translateY(-20px);
}

.trigger-label-above .trigger-label-content::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--trigger-label-border);
}

/* Position: Below trigger */
.trigger-label-below {
    transform: translateX(-50%) translateY(16px);
}

.trigger-label-below.visible {
    transform: translateX(-50%) translateY(20px);
}

.trigger-label-below .trigger-label-content::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--trigger-label-border);
}

/* ========================================
   FIRST-TIME HINTS
   ========================================
   Pulse animation for onboarding hints.
*/

/* First-time hint pulse on key elements */
.first-time-hint {
    animation: hint-pulse var(--timing-glow-pulse, 2000ms) ease-in-out infinite;
}

@keyframes hint-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 74, 222, 128), 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(var(--primary-rgb, 74, 222, 128), 0);
    }
}

/* ========================================
   DEV MODE OVERRIDES
   ======================================== */

/* Layout Design Mode - Comprehensive styles for all simulators */
body.layout-design-mode .component {
    outline: 2px dashed var(--dev-highlight);
    outline-offset: 4px;
    transition: outline-color 0.2s;
}

@media (hover: hover) {
    body.layout-design-mode .component:hover {
        outline-color: var(--primary, #3b82f6);
    }
}

/* Header layer MUST stay pointer-events: none even in layout design mode!
   Setting it to auto creates a full-screen element that blocks component body dragging.
   Individual headers get pointer-events: auto instead (below). */
/* body.layout-design-mode .header-layer { pointer-events: auto !important; } -- REMOVED */

/* Legacy - component-header removed from renderers (2026-01-31) */

body.layout-design-mode .realistic-body {
    cursor: move !important;
    background-color: rgba(234, 179, 8, 0.1) !important;
    pointer-events: auto !important;
}

/* In layout design mode, disable terminal/trigger clicks so body dragging works */
body.layout-design-mode .terminal-pin,
body.layout-design-mode .terminal-dot,
body.layout-design-mode .interactive-trigger,
body.layout-design-mode .selector-knob-overlay {
    pointer-events: none !important;
}

/* Junction box / view overlays in layout design mode */
body.layout-design-mode .junction-box-overlay,
body.layout-design-mode .view-overlay {
    cursor: move;
    outline: 2px dashed var(--dev-highlight);
}

/* Label Calibration Mode - Legacy component-header removed (2026-01-31) */

/* Trigger Calibration Mode */
body.trigger-calibration-mode .interactive-trigger {
    background: rgba(59, 130, 246, 0.3);
    border: 2px solid rgba(59, 130, 246, 0.8);
    cursor: move;
}

/* Debug Overlay */
.dev-debug-overlay .bounds-box {
    border: 2px dashed rgba(255, 0, 0, 0.5);
    background: rgba(255, 0, 0, 0.1);
}

/* ========================================
   CONFIRMATION MODAL
   ======================================== */

.confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.confirm-modal.open {
    display: flex;
}

.confirm-modal-content {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 28px 36px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: confirmSlideIn 0.2s ease-out;
}

@keyframes confirmSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.confirm-modal-content p {
    margin: 0 0 24px 0;
    font-size: 1.1rem;
    color: var(--text-main);
}

.confirm-modal-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.confirm-modal-message {
    font-size: 16px;
    color: var(--text-main);
    margin-bottom: 24px;
    line-height: 1.5;
}

.confirm-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Button base styles for confirmation modal */
.confirm-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.confirm-btn-cancel,
.confirm-modal-buttons .btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (hover: hover) {
    .confirm-btn-cancel:hover,
    .confirm-modal-buttons .btn-cancel:hover {
        background: rgba(255, 255, 255, 0.15);
    }
}

.confirm-btn-confirm,
.confirm-modal-buttons .btn-confirm {
    background: var(--danger);
    color: white;
}

@media (hover: hover) {
    .confirm-btn-confirm:hover,
    .confirm-modal-buttons .btn-confirm:hover {
        background: #dc2626;
    }
}

/* ========================================
   CANVAS (Wire Rendering)
   ======================================== */

#wireCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    pointer-events: none;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* Prevent tap highlight on all elements */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Body becomes the viewport container */
    body {
        overflow: hidden;
        position: fixed;
        width: 100vw;
        height: 100vh;
    }

    /* Hide header on mobile to maximize workbench space */
    header,
    .site-header {
        display: none;
    }

    /* App container fills viewport — no pane on mobile */
    .app-container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        padding-left: 0;    /* No pane on mobile */
        padding-top: 0;     /* Header hidden on mobile */
    }

    /* Workbench scales to fit viewport on mobile */
    .workbench {
        position: relative;
        /* Must match desktop aspect ratio (1320/820) for correct component scaling */
        aspect-ratio: 1320 / 820;
        /* Largest width that respects BOTH viewport width AND max-height while maintaining ratio */
        width: min(100%, calc(100vh * 1320 / 820));
        max-height: 100vh;
        overflow: hidden;
        align-self: center;
        margin: auto 0;
        /* No padding - components fill the full reference area */
    }

    /* Side menu full width on mobile */
    .side-menu {
        width: 100%;
        right: -100%;
    }

}

/* ========================================
   DEV TOOLBARS
   ======================================== */

.dev-toolbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 12px;
    border: 1px solid var(--accent);
    display: none;
    gap: 16px;
    align-items: center;
    z-index: 4000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 30px rgba(245, 158, 11, 0.2);
    animation: devToolbarSlideUp 0.3s ease-out;
}

@keyframes devToolbarSlideUp {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.dev-toolbar-title {
    font-weight: bold;
    color: var(--accent);
    white-space: nowrap;
}

.dev-toolbar-desc {
    color: var(--text-muted);
    font-size: 12px;
    margin-right: 10px;
    white-space: nowrap;
}

.dev-toolbar-output {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 15px;
    max-width: 600px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 4000;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent);
    white-space: pre-wrap;
}

/* Terminal Calibration Toolbar */
#calibrationToolbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 12px;
    border: 1px solid var(--accent);
    display: none;
    gap: 16px;
    align-items: center;
    z-index: 4000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 30px rgba(245, 158, 11, 0.2);
}

body.calibration-mode #calibrationToolbar {
    display: flex;
}

/* Duct Design Toolbar - Blue accent, positioned over header to stay out of the way */
#ductDesignToolbar {
    position: fixed;
    top: 18px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 12px;
    border: 1px solid var(--primary);
    display: none;
    gap: 16px;
    align-items: center;
    z-index: 4000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 30px rgba(59, 130, 246, 0.2);
}

body.duct-design-mode #ductDesignToolbar {
    display: flex;
}

/* ========================================
   DUCT OVERLAY STYLES
   ======================================== */

.duct-overlay {
    position: absolute;
    pointer-events: auto;
    cursor: move;
    z-index: 100;
}

.duct-overlay.vertical {
    width: 4px;
    background: rgba(59, 130, 246, 0.6);
    border-left: 1px solid rgba(59, 130, 246, 0.9);
    border-right: 1px solid rgba(59, 130, 246, 0.9);
}

.duct-overlay.horizontal {
    height: 4px;
    background: rgba(59, 130, 246, 0.6);
    border-top: 1px solid rgba(59, 130, 246, 0.9);
    border-bottom: 1px solid rgba(59, 130, 246, 0.9);
}

@media (hover: hover) {
    .duct-overlay:hover {
        background: rgba(245, 158, 11, 0.8);
        border-color: rgba(245, 158, 11, 1);
    }
}

.duct-overlay.selected {
    background: rgba(34, 197, 94, 0.8);
    border-color: rgba(34, 197, 94, 1);
}

.duct-label {
    position: absolute;
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-main);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    pointer-events: none;
}

.duct-overlay.vertical .duct-label {
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
}

.duct-overlay.horizontal .duct-label {
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
}

.duct-overlay.corner {
    width: 0;
    height: 0;
    pointer-events: none;
}

.duct-segment {
    position: absolute;
    background: rgba(59, 130, 246, 0.6);
    pointer-events: auto;
    z-index: 100;
}

.duct-segment.vertical {
    width: 4px;
    border-left: 1px solid rgba(59, 130, 246, 0.9);
    border-right: 1px solid rgba(59, 130, 246, 0.9);
}

.duct-segment.horizontal {
    height: 4px;
    border-top: 1px solid rgba(59, 130, 246, 0.9);
    border-bottom: 1px solid rgba(59, 130, 246, 0.9);
}

@media (hover: hover) {
    .duct-segment:hover {
        background: rgba(245, 158, 11, 0.8);
        border-color: rgba(245, 158, 11, 1);
    }
}

.duct-endpoint {
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(34, 197, 94, 0.8);
    border: 2px solid rgba(34, 197, 94, 1);
    border-radius: 50%;
    cursor: move;
    z-index: 101;
    transform: translate(-50%, -50%);
}

@media (hover: hover) {
    .duct-endpoint:hover {
        transform: translate(-50%, -50%) scale(1.5);
        background: #FFD700;
    }
}

.duct-junction-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(59, 130, 246, 1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 101;
}

/* Label Calibration Toolbar - Green accent */
#labelCalibrationToolbar {
    border-color: var(--success);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 30px rgba(34, 197, 94, 0.2);
}

#labelCalibrationToolbar .dev-toolbar-title {
    color: var(--success);
}

#labelCSSOutput {
    border-color: var(--success);
    color: var(--success);
}

/* ========================================
   DEV TOOLBAR BUTTONS
   ======================================== */

.btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary);
    color: var(--text-main);
}

@media (hover: hover) {
    .btn-primary:hover {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
}

.btn-secondary {
    background: transparent;
    color: var(--text-main);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

@media (hover: hover) {
    .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    }
}

.btn-danger {
    background: var(--danger);
    color: white;
}

@media (hover: hover) {
    .btn-danger:hover {
        background: #dc2626;
        transform: translateY(-1px);
    }
}

.btn-warning {
    background: var(--warning);
    color: #000;
}

@media (hover: hover) {
    .btn-warning:hover {
        background: #d97706;
        transform: translateY(-1px);
    }
}

.btn-success {
    background: var(--success);
    color: white;
}

@media (hover: hover) {
    .btn-success:hover {
        background: #16a34a;
        transform: translateY(-1px);
    }
}

/* ========================================
   MULTIMETER
   ======================================== */

#multimeterContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 660;
    /* Above closed components (650) so cables can pass over them, below interactive elements (902+) */
    pointer-events: none;
}

#multimeterContainer * {
    pointer-events: auto;
}

#meterLeadsCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 660;
    /* Above closed components (650) by default, dynamically adjusted to 640 when leads inside closed component */
}

.multimeter-body {
    position: absolute;
    left: 84px;
    top: 313px;
    width: 203px;
    /* 45% of 451px */
    height: 384px;
    /* 45% of 853px */
    cursor: move;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
    transition: filter 0.3s ease;
    z-index: 600;
    /* Above wires (500), below interactive elements (902+) */
}

@media (hover: hover) {
    .multimeter-body:hover {
        filter: drop-shadow(0 25px 50px rgba(232, 138, 147, 0.3));
    }
}

.multimeter-body.dragging {
    cursor: grabbing;
    filter: drop-shadow(0 30px 60px rgba(232, 138, 147, 0.4));
}

.multimeter-image {
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

/* LCD Display Overlay */
.lcd-display {
    position: absolute;
    left: 29.7px;
    /* 45% of 66px */
    top: 43.65px;
    /* 45% of 97px */
    width: 142.65px;
    /* 45% of (383-66) = 317px */
    height: 78.3px;
    /* 45% of (271-97) = 174px */
    background: linear-gradient(165deg,
            rgba(20, 30, 25, 0.95) 0%,
            rgba(15, 25, 20, 0.98) 50%,
            rgba(10, 20, 15, 1) 100%);
    border-radius: 2px;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.8),
        inset 0 -1px 2px rgba(0, 255, 136, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    pointer-events: none;
}

.lcd-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(0deg,
            transparent 0%,
            rgba(0, 255, 136, 0.02) 50%,
            transparent 100%),
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.3) 0px,
            rgba(0, 0, 0, 0.3) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
}

.lcd-screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
}

.lcd-mode {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 7px;
    /* 44% of 14px */
    font-weight: 700;
    color: rgba(0, 255, 136, 0.9);
    text-shadow:
        0 0 4px rgba(0, 255, 136, 0.8),
        0 0 8px rgba(0, 255, 136, 0.4);
    letter-spacing: 1px;
    text-align: center;
    min-height: 9px;
}

.lcd-value {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 19px;
    /* 44% of 42px */
    font-weight: 700;
    color: rgba(0, 255, 136, 1);
    text-shadow:
        0 0 6px rgba(0, 255, 136, 1),
        0 0 12px rgba(0, 255, 136, 0.6),
        0 0 18px rgba(0, 255, 136, 0.3);
    letter-spacing: 2px;
    text-align: center;
    line-height: 1;
    filter: blur(0.2px);
}

/* LCD Flicker Animation */
@keyframes lcdFlicker {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.98;
    }
}

.lcd-value.measuring {
    animation: lcdFlicker 0.15s infinite;
}

/* Meter Clickable Zones */
.meter-clickzone {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 902;
}

@media (hover: hover) {
    .meter-clickzone:hover {
        background: rgba(232, 138, 147, 0.2) !important;
    }
}

.meter-clickzone:active {
    background: rgba(232, 138, 147, 0.4) !important;
}

/* Meter Ports */
.meter-port {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 902;
}

@media (hover: hover) {
    .meter-port:hover {
        background: radial-gradient(circle, rgba(232, 138, 147, 0.3) 0%, transparent 70%);
    }
}

/* Lead Tips - Probe Tips (compact version matching real multimeter probes) */
/* The element is positioned so the needle tip is the anchor point */
.lead-tip {
    position: absolute;
    width: 24px;
    height: 120px;
    /* PROBE_HEIGHT in multimeter.js */
    cursor: pointer;
    z-index: 903;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    pointer-events: auto;
    border-radius: 0;
    transform-origin: 12px 0;
    /* Center horizontally (24/2), rotate around needle tip (top) */
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
}

/* Metal needle tip - at TOP (starts at position 0, the anchor/contact point) */
.lead-tip::before {
    content: '';
    position: absolute;
    top: 0;
    /* Needle tip IS the anchor point */
    left: 50%;
    transform: translateX(-50%);
    width: 3.5px;
    height: 32px;
    background: linear-gradient(90deg,
            #4a4a4a 0%,
            #7d7d7d 20%,
            #ffffff 50%,
            #b1b1b1 80%,
            #636363 100%);
    border-radius: 2px 2px 1px 1px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    pointer-events: auto;
    z-index: 2;
}

/* Insulated body - realistic multimeter probe shape */
.lead-tip::after {
    content: '';
    position: absolute;
    top: 28px;
    /* Starts after needle */
    left: 0;
    width: 100%;
    height: 92px;
    /* Rest of lead */

    /* Correct continuous loop for the probe handle silhouette */
    clip-path: polygon(
            /* Top Collet */
            35% 0%, 65% 0%,
            /* Collet to Flange */
            65% 10%, 100% 10%,
            /* Flange */
            100% 18%, 85% 18%,
            /* Handle side */
            85% 85%, 75% 85%,
            /* Strain Relief side */
            75% 100%, 25% 100%,
            /* Up the other side */
            25% 85%, 15% 85%,
            /* Handle side up */
            15% 18%, 0% 18%,
            /* Flange left side */
            0% 10%, 35% 10%);
    z-index: 1;
}

/* Black lead - high-end industrial finish */
.lead-tip-black::after {
    background:
        /* Top rim highlight */
        linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 2%),
        /* 3D Cylindrical Highlight */
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(255, 255, 255, 0.08) 20%,
            rgba(255, 255, 255, 0.18) 30%,
            rgba(255, 255, 255, 0.08) 45%,
            transparent 70%,
            rgba(0, 0, 0, 0.5) 100%),
        /* Knurled Grip Pattern */
        repeating-linear-gradient(45deg,
            rgba(0, 0, 0, 0.15) 0px,
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 3px),
        repeating-linear-gradient(-45deg,
            rgba(0, 0, 0, 0.15) 0px,
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 3px),
        /* Base Color */
        #121820;
}

/* Red lead - high-end industrial finish */
.lead-tip-red::after {
    background:
        /* Top rim highlight */
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 2%),
        /* 3D Cylindrical Highlight */
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(255, 255, 255, 0.2) 20%,
            rgba(255, 255, 255, 0.3) 30%,
            rgba(255, 255, 255, 0.2) 45%,
            transparent 70%,
            rgba(0, 0, 0, 0.3) 100%),
        /* Knurled Grip Pattern */
        repeating-linear-gradient(45deg,
            rgba(0, 0, 0, 0.15) 0px,
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 3px),
        repeating-linear-gradient(-45deg,
            rgba(0, 0, 0, 0.15) 0px,
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 3px),
        /* Base Color */
        #b91c1c;
}

#multimeterContainer .lead-tip.active {
    transform: scale(1.1) translateY(-5px);
    filter: brightness(1.2) drop-shadow(0 15px 25px rgba(0, 0, 0, 0.7));
    animation: leadPulse 1.5s ease-in-out infinite;
    pointer-events: none;
    /* Allow clicks to pass through to terminals — #multimeterContainer prefix
       needed to beat the #multimeterContainer * { pointer-events: auto } rule */
    transition: none !important;
    /* Disable transitions when dragging for instant response */
    z-index: 1000;
}

.lead-tip.docked {
    opacity: 0.6;
}

@keyframes leadPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(232, 138, 147, 0.6),
            0 0 16px rgba(232, 138, 147, 0.8),
            0 6px 16px rgba(0, 0, 0, 0.6);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(232, 138, 147, 0.8),
            0 0 24px rgba(232, 138, 147, 1),
            0 6px 16px rgba(0, 0, 0, 0.6);
    }
}

/* Rotary Switch Overlay - circular element that rotates */
.rotary-switch-overlay {
    position: absolute;
    /* Mapped coords: center (225, 481) radius 109, scaled to 45% */
    left: 52.2px;
    /* (225 * 0.45) - (109 * 0.45) */
    top: 167.4px;
    /* (481 * 0.45) - (109 * 0.45) */
    width: 98.1px;
    /* diameter = radius * 2 * 0.45 = 218 * 0.45 */
    height: 98.1px;
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    pointer-events: none;
    z-index: 902;
}

/* Rotary switch image */
.rotary-switch-image {
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

/* Rotary Selector Clickable Area */
.rotary-selector-zone {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 903;
}

@media (hover: hover) {
    .rotary-selector-zone:hover {
        background: radial-gradient(circle, rgba(232, 138, 147, 0.15) 0%, transparent 70%);
    }
}

/* ========================================
   WIRE CONTEXT MENU
   ======================================== */

.wire-context-menu {
    position: fixed;
    z-index: 10000;
    display: none;
    background: var(--bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width: 120px;
}

.wire-context-menu.open {
    display: block;
}

.wire-context-menu-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-main);
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

@media (hover: hover) {
    .wire-context-menu-item:hover {
        background: rgba(239, 68, 68, 0.6);
    }
}

.wire-context-menu-item:active {
    background: rgba(239, 68, 68, 0.6);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
}

/* ========================================
   DIALOG MANAGER STYLES
   ======================================== */

/* Dialog Backdrop */
.dialog-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.dialog-backdrop.open {
    display: flex;
}

/* Dialog Card */
.dialog-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 28px 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: dialogSlideIn 0.25s ease-out;
}

@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dialog-title {
    margin: 0 0 16px 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-header);
}

.dialog-context {
    margin: 0 0 16px 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-main);
}

.dialog-divider {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 20px 0;
}

.dialog-section {
    margin-bottom: 16px;
}

.dialog-section-label {
    margin: 0 0 8px 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--primary);
    text-transform: uppercase;
}

.dialog-section-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-main);
}

.dialog-tips {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.dialog-tips li {
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--text-main);
}

.dialog-button {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dialog-button-primary {
    background: var(--primary);
    color: white;
}

.dialog-button-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.dialog-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    margin: 12px 0 4px;
}

.dialog-pane-hint {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    text-align: center;
    font-style: italic;
}

/* Phase Transition Dialog */
.dialog-completion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dialog-checkmark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
}

.dialog-completion-header .dialog-title {
    margin: 0;
}

/* Welcome Back Dialog - wave icon */
.dialog-welcome-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
}

/* Completion Dialog - trophy icon */
.dialog-trophy-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
}

/* Completion Dialog - badge placeholder */
.dialog-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin: 8px 0 4px;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 10px;
}

.dialog-badge-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: bold;
    flex-shrink: 0;
}

.dialog-badge-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dialog-badge-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-header);
}

.dialog-badge-score {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Fail Dialog - X icon */
.dialog-fail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Safety warning in transition dialog */
.dialog-warning-section {
    padding: 12px 16px;
    background: color-mix(in srgb, var(--warning, #ca8a04) 8%, transparent);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--warning, #ca8a04) 25%, transparent);
    margin-top: 12px;
}

.dialog-warning-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.dialog-warning-icon {
    font-size: 16px;
    color: var(--warning, #ca8a04);
}

.dialog-warning-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--warning, #ca8a04);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.dialog-warning-text {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    line-height: 1.5;
    margin: 0;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background:
        radial-gradient(ellipse 800px 600px at 20% 30%, var(--gradient-coral) 0%, transparent 50%),
        radial-gradient(ellipse 600px 800px at 80% 70%, var(--gradient-purple) 0%, transparent 50%),
        radial-gradient(ellipse 700px 500px at 50% 50%, color-mix(in srgb, var(--gradient-coral) 30%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, var(--gradient-purple) 0%, var(--gradient-coral) 50%, var(--accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loading-overlay[hidden] {
    display: none;
}

/* Progress bar track */
.loading-overlay-bar {
    width: 192px;
    height: 4px;
    background: var(--bg-panel, rgba(255, 255, 255, 0.15));
    border-radius: 9999px;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

/* Animated progress bar inner */
.loading-overlay-bar-inner {
    width: 100%;
    height: 100%;
    background: var(--primary, #50b5a0);
    border-radius: 9999px;
    animation: loadingOverlaySweep 1.5s ease-in-out infinite;
}

@keyframes loadingOverlaySweep {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(200%); }
    100% { transform: translateX(-100%); }
}

/* Dialog container inside overlay (used when dialog renders on overlay) */
.loading-overlay-dialog {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loading-overlay-dialog.visible {
    opacity: 1;
}

/* Dissolve/blur reveal animation */
@keyframes overlayReveal {
    0%   { opacity: 1; filter: blur(0px); }
    40%  { opacity: 0.8; filter: blur(12px); }
    100% { opacity: 0; filter: blur(0px); }
}

.loading-overlay.revealing {
    animation: overlayReveal 500ms ease-out forwards;
    pointer-events: none;
}