#toolbar {
    position: absolute;
    top: 60px;
    left: 20px;
    min-width: 65px;
    min-height: 95px;
    resize: both;
    overflow: auto;
    z-index: 1000;
    background: #2a2a2a;
    border: 1px solid #444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

#historyToolbar {
    position: absolute;
    top: 80px;
    left: 450px; /* Offset to the right so it doesn't overlap the drawing toolbar */
    min-width: 65px;
    min-height: 95px;
    resize: both;
    overflow: auto;
    z-index: 1000;
    background: #2a2a2a;
    border: 1px solid #444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

/* A header handle specifically for dragging */
.toolbar-header {
    cursor: move;
    background: #333;
    padding: 8px;
    font-weight: bold;
    user-select: none;
    border-bottom: 1px solid #444;
}

/* Auto-align buttons horizontally or vertically */
#toolbar .tool-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    align-content: flex-start;
    box-sizing: border-box;
}

/* Ensure individual buttons don't block fluid wrapping */
#toolbar .tool-buttons button {
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* Auto-align buttons horizontally or vertically */
#historyToolbar .tool-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    align-content: flex-start;
    box-sizing: border-box;
}

/* Ensure individual buttons don't block fluid wrapping */
#historyToolbar .tool-buttons button {
    flex: 0 0 auto;
    box-sizing: border-box;
}

.drop-zone.drag-active {
    background-color: rgba(0, 120, 215, 0.15);
    border-color: #0078d7;
}