/* The "Use example" button that appears inside an empty free-text box.
   See public/js/sampletext.js for which boxes get one and why. */
.sample-chip {
  position: fixed;
  z-index: 10001;
  padding: 3px 10px;
  font-family: inherit; font-weight: 600; font-size: 11.5px; line-height: 1.5;
  color: var(--blue, #2563eb);
  background: var(--card, #fff);
  border: 1px solid var(--blue, #2563eb);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  -webkit-tap-highlight-color: transparent;
}
.sample-chip[hidden] { display: none; }
.sample-chip:hover { background: var(--blue, #2563eb); color: #fff; }
/* On a touch screen the button is the whole feature (there is no Tab), so it is
   sized for a thumb rather than for a mouse. */
@media (pointer: coarse) {
  .sample-chip { padding: 8px 14px; font-size: 13px; min-height: 36px; }
}