@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

video {
  transform: scaleX(-1);
}

#output {
  transform: scaleX(-1);
}

.keypoint {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3b82f6;
  box-shadow: 0 0 0 2px white;
  z-index: 10;
}

.face-keypoint {
  background-color: #10b981;
}

.pose-keypoint {
  background-color: #8b5cf6;
}

.hand-keypoint {
  background-color: #f59e0b;
}

.skeleton-line {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.7);
  transform-origin: 0 0;
  z-index: 5;
}

.status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-active {
  background-color: #10b981;
}

.status-inactive {
  background-color: #ef4444;
}