body {
    margin: 0;
    font-family: sans-serif;
    background-color: #1e1e1e;
    color: #eeeeee;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

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

.tools-panel {
    background-color: #2d2d2d;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #3a3a3a;
    flex-shrink: 0; /* Prevent shrinking */
    overflow-x: auto; /* Allow horizontal scrolling if tools exceed width */
}

.tools-panel h2 {
    margin: 0; /* Remove default h2 margin in flex container */
    color: #cccccc;
    font-size: 1.2em;
}

.tools-panel button {
    padding: 8px 12px;
    background-color: #505050;
    color: #eeeeee;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap; /* Prevent text wrapping in buttons */
}

.tools-panel button:hover {
    background-color: #606060;
}

.tools-panel button.toggle-button.on {
    background-color: #007acc; /* Default highlight color */
}

#select-mode.on {
    background-color: #007acc; /* Blue */
}

#connect-mode.on {
     background-color: #28a745; /* Green */
}

#delete-mode.on {
     background-color: #dc3545; /* Red */
}

/* Style for the new workspace div */
.workspace {
    flex-grow: 1; /* Allows the workspace to take up remaining vertical space */
    display: flex; /* Enables horizontal layout for palette and simulation area */
    overflow: hidden; /* Hide overflow if content exceeds container */
}

.elements-palette {
    background-color: #3a3a3a;
    padding: 10px;
    width: 180px; /* Fixed width for the palette */
    flex-shrink: 0; /* Prevent shrinking */
    border-right: 1px solid #4a4a4a;
    overflow-y: auto; /* Allow scrolling if elements exceed height */
}

.elements-palette h2 {
     margin: 0 0 10px 0;
     color: #cccccc;
     font-size: 1.1em;
     text-align: center;
}

.element-item {
    background-color: #555555;
    color: #eeeeee;
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid #666666;
    border-radius: 4px;
    cursor: grab; /* Indicate draggable */
    text-align: center;
    font-weight: bold;
}

.element-item:hover {
    background-color: #666666;
}

.simulation-area {
    flex-grow: 1; /* Allows the simulation area to take up remaining horizontal space */
    background-color: #1e1e1e; /* Background for the main work area */
    position: relative; /* Needed for positioning elements absolutely */
    overflow: hidden; /* Hide anything outside this area */
    /* Added by ui.js */
}

/* Styles for dragged elements */
.gate {
    background-color: #444;
    border: 1px solid #777;
    border-radius: 4px;
    padding: 15px 20px; /* Adjust padding to make space for points */
    text-align: center;
    color: white;
    font-weight: bold;
    cursor: move; /* Indicate draggable */
    min-width: 60px; /* Minimum width */
    min-height: 30px; /* Minimum height */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    display: flex; /* Use flex to center content */
    justify-content: center;
    align-items: center;
    user-select: none; /* Prevent text selection */
    z-index: 10; /* Default z-index above lines */
    transition: background-color 0.1s ease; /* Smooth hover effect */
}

.gate:hover {
    background-color: #555;
}

.gate.selected {
    outline: 2px dashed #00aaff; /* Highlight for selected element */
}

/* Specific gate styles (optional, for visual distinction) */
.gate.and { background-color: #007acc; }
.gate.or { background-color: #ff9800; }
.gate.not { background-color: #f44336; }
.gate.xor { background-color: #9c27b0; } /* Purple */
.gate.nand { background-color: #4caf50; } /* Green */
.gate.nor { background-color: #ffc107; } /* Amber */
.gate.xnor { background-color: #3f51b5; } /* Indigo */

/* Input/Output Specific Styles */
.gate.input { background-color: #607d8b; /* Blue Grey */ }
.gate.input.on { background-color: #8bc34a; /* Light Green when ON */ } /* Indicate toggled state */
.gate.output { background-color: #607d8b; /* Blue Grey */ } /* Outputs might look similar to inputs */
/* Output LED visual state handled by UI script adding a class or changing style */


/* Connection Point Styles */
.connection-point {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #cccccc;
    border: 1px solid #333333;
    border-radius: 50%;
    cursor: crosshair; /* Indicate connectable */
    z-index: 15; /* Above gates */
    /* Positioning handled by JS based on input/output index */
    /* Translate to center the circle on the coordinate */
    transform: translate(-50%, -50%);
}

.connection-point:hover {
     background-color: #ffffff;
     border-color: #555;
}

.connection-point.selected {
    background-color: yellow; /* Highlight when selected as first point */
}

.input-point {
    left: 0; /* Position on the left edge of the gate */
}

.output-point {
    right: 0; /* Position on the right edge of the gate */
}

/* SVG Styles for Connection Lines */
/* Style added dynamically by JS */
/* .connection-line {} */