#vel-tablet-selection-overlay {
  position: fixed;
  z-index: 10020;
  box-sizing: border-box;
  pointer-events: none;
  touch-action: none;
  border: 0;
  outline: 0;
  background: transparent;
}

#vel-tablet-selection-overlay[hidden] {
  display: none !important;
}

#vel-tablet-selection-overlay [data-part="body"] {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  touch-action: none;
  background: transparent;
}

#vel-tablet-selection-overlay button {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
  pointer-events: auto;
  touch-action: none;
  transform: translate(-50%, -50%);
}

/* Hit targets are intentionally invisible. Formal mainline annotation rendering owns
   the visible selection and handle presentation. */
#vel-tablet-selection-overlay button::after { content: none; }

#vel-tablet-selection-overlay [data-handle="nw"] { left: 0; top: 0; }
#vel-tablet-selection-overlay [data-handle="ne"] { left: 100%; top: 0; }
#vel-tablet-selection-overlay [data-handle="sw"] { left: 0; top: 100%; }
#vel-tablet-selection-overlay [data-handle="se"] { left: 100%; top: 100%; }

/* Hybrid hardware is pointer-modality aware. Ordinary mouse interaction remains on
   the canonical mainline annotation canvas, while touch/pen can still use the
   invisible 44px direct-manipulation overlay. The runtime updates
   data-vel-active-pointer from real pointerover/pointerdown events. */
html[data-vel-tablet-input][data-vel-active-pointer="mouse"] #vel-tablet-selection-overlay [data-part="body"],
html[data-vel-tablet-input][data-vel-active-pointer="mouse"] #vel-tablet-selection-overlay button {
  pointer-events: none !important;
}

html[data-vel-tablet-input][data-vel-active-pointer="touch"] #vel-tablet-selection-overlay [data-part="body"],
html[data-vel-tablet-input][data-vel-active-pointer="touch"] #vel-tablet-selection-overlay button,
html[data-vel-tablet-input][data-vel-active-pointer="pen"] #vel-tablet-selection-overlay [data-part="body"],
html[data-vel-tablet-input][data-vel-active-pointer="pen"] #vel-tablet-selection-overlay button {
  pointer-events: auto !important;
}

@media (any-pointer: coarse) {
  html[data-vel-tablet-input] #annotateCanvas,
  html[data-vel-tablet-input] #web-model-canvas,
  html[data-vel-tablet-input] #pdf-canvas-stage,
  html[data-vel-tablet-input] #whiteboard-board {
    touch-action: none !important;
    overscroll-behavior: contain;
  }

  /* Invisible hit slop only. Measured mainline control geometry is unchanged. */
  html[data-vel-tablet-input] body [data-vel-annotate-tool],
  html[data-vel-tablet-input] body [data-vel-section-axis],
  html[data-vel-tablet-input] body [data-section-axis],
  html[data-vel-tablet-input] body [data-section-direction],
  html[data-vel-tablet-input] body [data-vel-section-step] {
    position: relative;
  }

  html[data-vel-tablet-input] body [data-vel-annotate-tool]::before,
  html[data-vel-tablet-input] body [data-vel-section-axis]::before,
  html[data-vel-tablet-input] body [data-section-axis]::before,
  html[data-vel-tablet-input] body [data-section-direction]::before,
  html[data-vel-tablet-input] body [data-vel-section-step]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
    background: transparent;
    pointer-events: auto;
  }

  html[data-vel-tablet-input] .vel-right-panel,
  html[data-vel-tablet-input] .vel-left-panel,
  html[data-vel-tablet-input] .vel-menu,
  html[data-vel-tablet-input] .vel-dropdown,
  html[data-vel-tablet-input] [role="menu"],
  html[data-vel-tablet-input] [role="listbox"] {
    touch-action: pan-y !important;
    overscroll-behavior: contain;
  }
}