/*
 * Spotlight — what the agent just read, and what it just changed.
 *
 * Two colours doing one job: amber for reads, and the accent for the single
 * tool that writes. If a visitor only ever learns one thing from this demo it
 * should be that those are different kinds of act.
 */

.wm-spot {
  position: relative;
  border-radius: 10px;
  animation: wm-spot-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* outline rather than box-shadow: it never affects layout, is not clipped by an
   ancestor's overflow, and follows border-radius. */
.wm-spot--read {
  outline: 2px solid #C9A15A;
  outline-offset: 3px;
  background-color: color-mix(in srgb, #C9A15A 9%, transparent);
}
.wm-spot--write {
  outline: 2px solid #E8412A;
  outline-offset: 3px;
  background-color: color-mix(in srgb, #E8412A 8%, transparent);
}

@keyframes wm-spot-in {
  from { outline-color: transparent; background-color: transparent; }
}

.wm-spot-label {
  position: fixed;
  z-index: 950;
  padding: 5px 11px;
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  max-width: min(420px, 60vw);
  color: #2A1F08;
  background: #C9A15A;
  box-shadow: 0 8px 22px -12px rgb(0 0 0 / 0.55);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.wm-spot-label.is-on { opacity: 1; transform: translateY(0); }
.wm-spot-label[data-mode="write"] { background: #E8412A; color: #FFF3F0; }

/* A little tail, flipped when the label sits below its target. */
.wm-spot-label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 14px;
  border: 5px solid transparent;
  border-top-color: #C9A15A;
}
.wm-spot-label[data-mode="write"]::after { border-top-color: #E8412A; }
.wm-spot-label.is-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #C9A15A;
}
.wm-spot-label.is-below[data-mode="write"]::after { border-bottom-color: #E8412A; }

@media (prefers-reduced-motion: reduce) {
  .wm-spot { animation: none; }
  .wm-spot-label { transition: none; }
}