.reference-chip[data-reference],.content-reference[data-reference]{touch-action:manipulation;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.reference-chip[data-reference]:hover,.reference-chip[data-reference]:focus{color:#fff;background:var(--reference-color);border-color:var(--reference-color);outline:0}.reference-chip[data-reference]:focus-visible,.content-reference[data-reference]:focus-visible{outline:2px solid var(--orange);outline-offset:2px}.discussion-message .message-meta .reference-chip{color:var(--reference-color)}
/* Copy confirmation. site.js sets .copied for 1200ms and swaps the token icon for a check; these
   rules stay last in the file so the state outranks the hover rules above (equal specificity, later
   declaration) and the --reference-color overrides of dense metadata rows. No toast, no text swap. */
.reference-chip[data-reference].copied,.content-reference[data-reference].copied{--reference-color:var(--green);--reference-surface:color-mix(in srgb,var(--green) 14%,var(--white));--reference-border:var(--green);color:var(--green);background:var(--reference-surface);border-color:var(--green)}
.reference-chip[data-reference].copied:hover,.reference-chip[data-reference].copied:focus,.reference-chip[data-reference].copied:focus-visible{color:var(--green);background:var(--reference-surface);border-color:var(--green)}
@keyframes reference-copied-pulse{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 45%,transparent)}to{box-shadow:0 0 0 9px color-mix(in srgb,var(--green) 0%,transparent)}}
@media(prefers-reduced-motion:no-preference){.reference-chip[data-reference].copied,.content-reference[data-reference].copied{animation:reference-copied-pulse .5s ease-out}}