/* Project Embeddings Visualization */

/* Embeddings container - positioned to not block text/buttons */
.project-embeddings {
  position: absolute;
  /* Align with container (1200px), allow 100px extra to the right */
  right: max(calc(50vw - 700px), 0px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  /* Container doesn't receive pointer events - only the canvas does */
  pointer-events: none;
}

.project-embeddings canvas {
  display: block;
  cursor: pointer;
  touch-action: none;
  background: transparent;
  pointer-events: auto;
}

/* Responsive: hide on smaller screens */
@media (max-width: 1024px) {
  .project-embeddings {
    display: none;
  }
}

/* Timeline - positioned above the label */
.embeddings-timeline {
  position: absolute;
  bottom: 55px;
  right: 80px;
  width: 400px;
  height: 24px;
  display: flex;
  align-items: center;
  pointer-events: auto;
  cursor: crosshair;
}

.timeline-track {
  position: relative;
  width: 100%;
  height: 1px;
  background: rgba(113, 113, 122, 0.3);
}

.timeline-ticks {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-family: system-ui, -apple-system, sans-serif;
  color: rgba(113, 113, 122, 0.5);
  pointer-events: none;
}

.timeline-tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.timeline-tick::after {
  content: '';
  width: 1px;
  height: 4px;
  background: rgba(113, 113, 122, 0.4);
}

.timeline-indicator {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: rgba(113, 113, 122, 0.6);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.embeddings-timeline:hover .timeline-indicator {
  opacity: 1;
}

/* Dark mode - keep transparent */