/* The ✕ on recurring tips (hint_close, static/js/hint-note.js, 2026-10-28).
   Community tokens where they exist, the Desk's purple ink otherwise. */
.hint-close {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 20px; height: 20px; margin-inline-start: 6px; padding: 0;
  border: 0; border-radius: 50%; vertical-align: middle; cursor: pointer;
  background: var(--cm-light, rgba(73, 54, 87, 0.08)); color: var(--cm-dim, #6b5b7b);
  font: inherit; line-height: 1;
}
/* A larger touch target without moving the text around it. */
.hint-close::after { content: ""; position: absolute; inset: -8px; }
.hint-close:hover { color: var(--cm-fg, #493657); }
.hint-close:focus-visible { outline: 2px solid var(--cm-brand, #493657); outline-offset: 2px; }
.hint-close svg { width: 10px; height: 10px; pointer-events: none; }
/* The Spotty price beside Send reads 0 while a reply streams: its ✕ goes with it. */
.pen-cost-hint[data-pen-hint-cost="0"] + .hint-close { display: none; }
/* "Understood" on a dismissible COST REMINDER (docs/PEN_RATE_NOTICES.md): the
   same store as the ✕, a word instead of an icon. A display preference only. */
.hint-understood {
  display: inline-flex; align-items: center; min-height: 44px; margin-inline-start: 4px; padding: 0 .55rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--cm-dim, #6b5b7b);
  font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.5; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.hint-understood:hover { color: var(--cm-fg, #493657); }
.hint-understood:focus-visible { outline: 2px solid var(--cm-brand, #493657); outline-offset: 2px; }
.pen-cost-hint[data-pen-hint-cost="0"] + .hint-understood { display: none; }
/* "Understood" beside a Pen price chip (2026-10-29): chip + word stay one
   inline unit, and the word keeps its 44px target without growing the row. */
.pen-cost-ack { display: inline-flex; align-items: center; vertical-align: middle; }
.pen-cost-ack .hint-understood { position: relative; min-height: 0; padding: .125rem .4rem; }
.pen-cost-ack .hint-understood::after { content: ""; position: absolute; inset: -12px -2px; }