/* Citation markers.
 *
 * The model writes [1] / [2,5] into the answer prose (see
 * tempo_oracle/agent/prompts.py); public/citations.js wraps each one in a
 * button.oracle-marker. Styled as a superscript pill so it reads as a reference
 * rather than as literal bracketed text in the sentence.
 *
 * Nothing here touches Chainlit's layout — every rule is scoped to a class this
 * project adds. The default chat width is Chainlit's own.
 */

.oracle-marker {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72em;
  line-height: 1;
  vertical-align: super;
  color: #d946a6;
  background: color-mix(in srgb, #d946a6 12%, transparent);
  border: 1px solid color-mix(in srgb, #d946a6 30%, transparent);
  border-radius: 4px;
  padding: 0.08em 0.3em;
  margin: 0 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}

.oracle-marker:hover {
  background: color-mix(in srgb, #d946a6 26%, transparent);
  border-color: #d946a6;
}

/* The marker whose source is currently selected in the panel. */
.oracle-marker-on {
  background: #d946a6;
  border-color: #d946a6;
  color: #fff;
}