/* Debug overlay — component names on hover (development only) */

body.component-overlay-active #view {
  overflow: visible;
}

body.component-overlay-active [data-component] {
  position: relative;
  outline: 1px dashed rgba(99, 102, 241, 0.4);
  outline-offset: 2px;
}

/* Leaf component (deepest hovered, no [data-component] child hovered) */
body.component-overlay-active [data-component]:hover:not(:has([data-component]:hover)) {
  outline: 2px solid red !important;
  outline-offset: 2px;
}

body.component-overlay-active [data-component]:hover:not(:has([data-component]:hover))::after {
  content: attr(data-component);
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
}