/* ============================================================================
   Unobits custom cursor engine
   A single overlay element follows the pointer and renders a smooth-edge cursor
   set (tail-less triangle by default, real tool cursors on boards). Each cursor
   is a SOLID dark shape with a white border + soft shadow, so it reads on any
   background on both themes — no blend modes (those can crash the GPU compositor
   inside the transparent desktop window). Native cursors are only hidden once the
   JS engine confirms it is live on a fine pointer (it adds `uno-cursor-active`);
   if the script fails to load, or on touch devices, the OS cursors remain.
   ============================================================================ */

/* Hide the OS cursor ONLY inside a whiteboard canvas, where the custom overlay
   renders. Everywhere else in the app the native cursor is left untouched — a
   DOM overlay can never match the hardware cursor's latency, so it isn't worth
   the cost off the boards. `cursor` inherits, so scoping to the container plus
   its descendants covers the blank canvas and every child for free; per-element
   suppression below still wins over authored `cursor:` rules on board widgets. */
html.uno-cursor-active .whiteboards-canvas-container,
html.uno-cursor-active .whiteboards-canvas-container * {
  cursor: none !important;
}

/* The element currently under the pointer gets this class so its authored
   native cursor (pointer / text / grab / crosshair …) is hidden while the
   overlay renders our custom version. Only ever one element at a time. */
.uno-cursor-suppress {
  cursor: none !important;
}

/* The overlay itself. Fixed, never interactive, always on top.
   It is declared as a manual popover so it can join the browser top layer and
   render above modal dialogs; the overrides below cancel the user-agent
   `[popover]` chrome (inset / margin / border / background / padding / sizing)
   so it keeps following the pointer exactly as a plain fixed element would. */
#uno-cursor {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  border: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  background: transparent;
  overflow: visible;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity .12s ease;
}

#uno-cursor.is-visible {
  opacity: 1;
}

#uno-cursor .uno-cursor-shape {
  position: relative;
  display: block;
  /* hotspot anchor (set inline by JS) keeps press-scale pinned to the tip */
  transition: transform .08s ease-out;
}

/* Subtle tactile press feedback on click / draw-down. */
#uno-cursor.is-press .uno-cursor-shape {
  transform: scale(.86);
}

/* Soft dark halo so the white border stays legible even on white backgrounds. */
#uno-cursor .uno-cursor-shape svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45));
}

/* Respect users who have asked for no animation: drop the smoothing easings. */
@media (prefers-reduced-motion: reduce) {
  #uno-cursor,
  #uno-cursor .uno-cursor-shape {
    transition: none;
  }
}