/* Annotation canvas container */
.annotation-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* The annotation frame overlay */
#annotate-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* Canvas should receive pointer events */
#annotate-frame canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
  cursor: crosshair;
}

/* Tools panel should receive pointer events */
#annotate-frame .tools-panel {
  pointer-events: all;
}

/* Make the iframe non-interactive in annotation mode */
#app-iframe.annotation-mode {
  pointer-events: none;
}

/* View button states */
.view-button {
  transition: background-color 0.2s ease;
}

.view-button.active {
  background-color: rgb(71 85 105); /* bg-slate-600 */
}

.view-button:not(.active):not(:hover) {
  background-color: transparent;
}