/* Canvas area and robot styles */
.canvas-pane {
  flex-grow: 1;
  background: var(--bg-color);
  overflow: hidden;
  padding: 0;
  display: flex; /* Added flexbox */
  flex-direction: column; /* Stack buttons and viewport vertically */
}

#canvas-viewport {
  flex-grow: 1;
  position: relative;
  overflow: hidden; /* This keeps the zoomed canvas from bleeding out */
  width: 100%;
}

#canvas-area {
  background: #f0f0f0;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: 0 0;
  will-change: transform;
  image-rendering: pixelated; /* Sharp edges for zoomed images */
  image-rendering: crisp-edges; /* Firefox & Safari compatibility */
  transition:
    width 0.3s,
    height 0.3s;
}

#robot {
  width: 50px;
  height: 50px;
  background: #ff4757;
  position: absolute;
  border-radius: 4px;
  border: 2px solid #333;
  cursor: grab;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
}

.wheel {
  width: 8px;
  height: 14px;
  background: #000;
  position: absolute;
  border-radius: 2px;
}

.w-l {
  top: -8px;
  left: calc(50% + (var(--motorPos) * 1px) - 4px);
}

.w-r {
  bottom: -8px;
  left: calc(50% + (var(--motorPos) * 1px) - 4px);
}

.w-l-back {
  top: -8px;
  left: calc(50% + (var(--motorPosBack) * 1px) - 4px);
}

.w-r-back {
  bottom: -8px;
  left: calc(50% + (var(--motorPosBack) * 1px) - 4px);
}

.sensor-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #4caf50;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

.sensor-dot:hover {
  background: #66bb6a;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.9);
}

/* Grip On Canvas */
.grip-canvas-el {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

.grip-arm-canvas-el {
  position: absolute;
  background-color: #f39c12;
  height: 2px;
  transform-origin: 0 50%;
}

.grip-jaw-canvas-el {
  position: absolute;
  background-color: #f39c12;
  height: 1.5px;
  transform-origin: 0 50%;
}

.grip-base-canvas-el {
  position: absolute;
  background-color: #e67e22;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}