/* One-time red flash for detected keywords when they cross a randomized X inside the panel. */
.flash-mark {
  background: transparent;
  color: currentColor;
  padding: 0 .2em;
  border-radius: 3px;
  box-shadow: none;
}

/* JS adds this class exactly once at the trigger moment */
.flash-once {
  animation: markFlash 1.2s ease-out 1 both;
  will-change: background-color, box-shadow;
}

@keyframes markFlash {
  0% {
    background: rgba(244, 67, 54, 0.38);
    box-shadow: 0 0 0 1px rgba(244, 67, 54, 0.50) inset;
  }
  60% {
    background: rgba(244, 67, 54, 0.18);
    box-shadow: 0 0 0 1px rgba(244, 67, 54, 0.28) inset;
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flash-once { animation: none; }
}