/*
 * Reader highlights on AI answers: CSS Custom Highlight API.
 *
 * Static for the same reason as chat-search-highlight.css: the production CSS
 * optimizer does not parse `::highlight()`.
 *
 * Consumed by src/components/Chat/ChatWindow/ChatSession/Highlights/ChatHighlighter.jsx,
 * which registers one highlight per color (`chat-hl-<color>`).
 *
 * Light: pastels behind the normal text (#09090B), every one at least 10.9:1.
 * Dark: deep tints behind the dark theme's body text (#C5C5C5), every one at
 * least 4.9:1. The text keeps its own color in both, so links and code stay
 * recognizable.
 */
::highlight(chat-hl-yellow) { background-color: #FEF08A; }
::highlight(chat-hl-green) { background-color: #A7F3D0; }
::highlight(chat-hl-blue) { background-color: #BFDBFE; }
::highlight(chat-hl-pink) { background-color: #F9A8D4; }

.dark ::highlight(chat-hl-yellow) { background-color: #5C4B00; }
.dark ::highlight(chat-hl-green) { background-color: #114F3B; }
.dark ::highlight(chat-hl-blue) { background-color: #1F3A6B; }
.dark ::highlight(chat-hl-pink) { background-color: #6A1E4C; }

/* The highlight being edited. */
::highlight(chat-hl-focus) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Pen mode: a marker cursor over the answers it can mark. */
[data-highlighter-pen="on"] [data-highlight-root] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2309090B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 11-6 6v3h9l3-3' fill='%23FEF08A'/%3E%3Cpath d='m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4' fill='white'/%3E%3C/svg%3E") 3 21, text;
}