/* Mention pills follow the existing recipient pill appearance. */
.tnx-email-mention {
    display: inline-block;
    max-width: min(32ch, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    padding: 1px 6px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-color);
    color: var(--link-color);
    text-decoration: none;
    white-space: nowrap;
}
.tnx-mention-marker { opacity: .5; }
.tnx-inline-reference {
    display: inline-flex;
    gap: .15em;
    border-radius: 4px;
    --api-reference-color: var(--text-color);
    color: var(--api-reference-color);
    border-color: var(--api-reference-color);
    background: color-mix(in srgb, var(--api-reference-color) 12%, var(--bg-color));
}
.tnx-inline-reference-value { border-radius: 999px; }
.tnx-reference-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tnx-reference-marker { flex: none; opacity: .5; }
.tnx-inline-reference[href] { opacity: 1; }
.tnx-inline-reference[href]:hover { opacity: .8; }
.tnx-inline-reference.tnx-reference-empty { opacity: .5; }
.tnx-inline-reference.tnx-reference-empty[href]:hover { opacity: .4; }
.tnx-inline-reference:is([data-reference-access="false"], [data-reference-access="loading"]),
.tnx-inline-reference:is([data-reference-access="false"], [data-reference-access="loading"]):hover { cursor: default; opacity: .5; }
.tnx-reference-search-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; width: 100%; position: sticky; top: 0; z-index: 1; background: var(--input-bg); }
.tnx-reference-search[data-search-above="1"] .tnx-reference-search-tabs { top: auto; bottom: 0; }
/* Match the team-page filter cards, with equal widths and a single compact label line. */
.tnx-reference-search-tabs > [role="button"] { display: flex; align-items: center; justify-content: center; gap: .3rem; min-width: 0; min-height: 0; width: 100%; margin: 0; padding: .25rem .75rem; border: 0; border-radius: 4px; background: var(--border-color); color: var(--link-color); font-size: .8rem; line-height: 1.3; cursor: pointer; opacity: .3; transition: opacity .2s ease; box-shadow: none; filter: none; transform: none; text-decoration: none; }
.tnx-reference-search-tabs > [role="button"]:hover { background: var(--border-color); opacity: .8; filter: none; }
.tnx-reference-search-tabs > [role="button"][aria-pressed="true"],
.tnx-reference-search-tabs > [role="button"][aria-pressed="true"]:hover { opacity: 1; cursor: default; }
.tnx-reference-search-tabs > [role="button"]:focus-visible { outline: 2px solid var(--link-color); outline-offset: -2px; }
.tnx-reference-search-tab-icon { flex: none; }
.tnx-reference-search-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnx-reference-search .search-select { opacity: var(--reference-match-opacity, 1); }
.tnx-reference-search .search-select:hover { opacity: calc(var(--reference-match-opacity, 1) * .8); }
.tnx-reference-table-icon { display: inline-block; border-radius: 4px; padding: 2px 4px; }
.tnx-code-reference, .tnx-code-reference:hover { opacity: 1 !important; cursor: text !important; line-height: inherit; vertical-align: baseline; }
/* Source-width API pills reserve their limited space for the resolved label. */
.tnx-code-reference > .tnx-reference-marker { display: none; }
a[data-reference-markdown-link]:is([data-reference-access="false"], [data-reference-access="loading"]),
a[data-reference-markdown-link]:is([data-reference-access="false"], [data-reference-access="loading"]):hover { cursor: default; opacity: 1; text-decoration: none; }
.tnx-mention-label { opacity: .5; }
.tnx-mention-label[data-tnx-identity="self"] { opacity: 1; }
.tnx-mention-label[data-tnx-identity="role"], .tnx-mention-label[data-tnx-identity="location"] { opacity: .75; }
.tnx-mention-label[data-tnx-identity] { outline-color: var(--link-color); }
.tnx-mention-label.tnx-email-mention[data-tnx-identity],
.tnx-mention-label.emailbot-recipient-pill[data-tnx-identity] { border-color: var(--link-color); }
.tnx-mention-label:hover, .tnx-mention-label.emailbot-recipient-pill:hover { opacity: .4; }
.tnx-mention-label[data-tnx-identity="self"]:hover { opacity: .8; }
.tnx-mention-label[data-tnx-identity="role"]:hover, .tnx-mention-label[data-tnx-identity="location"]:hover { opacity: .6; }
.tnx-mention-backing, [data-tnx-mention-backing="1"] { display: none !important; }
.tnx-mention-editor-host > .tnx-markdown-editable-preview:not(.tnx-markdown-editable-preview--mentions),
.tnx-mention-editor-host > .entry-editable-markdown-preview,
.tnx-mention-editor-host > .interactive-table-editable-markdown-preview,
.tnx-mention-editor-host > .emailbot-editable-markdown-preview { display: none !important; }
.tnx-mention-editor {
    display: block;
    position: relative;
    min-height: var(--tnx-mention-min-height, 0);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    overflow: auto;
    cursor: text;
    outline: none;
    font-family: monospace;
    -webkit-text-fill-color: currentColor;
}
.tnx-mention-editor.is-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: inherit;
    box-sizing: border-box;
    opacity: .5;
    pointer-events: none;
}
.tnx-mention-editor .tnx-email-mention { cursor: default; }
.tnx-email-mention[href], .tnx-mention-editor .tnx-email-mention[href] { cursor: pointer; }
.tnx-mention-editor[aria-multiline="false"] { white-space: pre; overflow-y: hidden; }
.tnx-mention-editor.tnx-mention-markdown-active {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    caret-color: var(--text-color);
}
.tnx-mention-editor .tnx-email-mention {
    color: var(--link-color);
    -webkit-text-fill-color: currentColor;
}
/* The editable pill owns clicks, selection and hover. The Markdown layer reserves its space and
   paints marker and code backgrounds behind it, so the pill sits just above that layer. */
.tnx-markdown-editable-preview--mentions .tnx-email-mention { visibility: hidden; }
.tnx-mention-editor.tnx-mention-markdown-active .tnx-email-mention { position: relative; z-index: 3; }
/* Markdown around a mention formats the whole pill. Rendered Markdown supplies the elements; an
   editable pill receives the same formats from ./UI/MarkdownRuntime.js as data-mention-format. */
.tnx-email-mention[data-mention-format~="strong"] { font-weight: 700; }
.tnx-email-mention[data-mention-format~="em"] { font-style: italic; }
u .tnx-email-mention, .tnx-email-mention[data-mention-format~="u"] { text-decoration-line: underline; }
:is(del, s, .tnx-markdown-checkbox-text--done) .tnx-email-mention,
.tnx-email-mention:is([data-mention-format~="del"], [data-mention-format~="done"]) { text-decoration-line: line-through; }
u :is(del, s, .tnx-markdown-checkbox-text--done) .tnx-email-mention,
:is(del, s, .tnx-markdown-checkbox-text--done) u .tnx-email-mention,
.tnx-email-mention[data-mention-format~="u"]:is([data-mention-format~="del"], [data-mention-format~="done"]) { text-decoration-line: underline line-through; }
/* A checked task dims its rendered line. The editable pill sits outside that line. */
.tnx-email-mention[data-mention-format~="done"] { filter: opacity(.5); }
.tnx-markdown-textmarker .tnx-email-mention, .tnx-email-mention[data-mention-format~="mark"] {
    background: var(--tnx-markdown-marker-bg);
    color: var(--tnx-markdown-marker-text);
}
code .tnx-email-mention, .tnx-email-mention[data-mention-format~="code"] {
    background: var(--tnx-markdown-code-bg);
    color: var(--tnx-markdown-code-text);
}
/* Emoji artwork is an atomic box that a line through the label cannot cross, so it gets its own. */
:is(del, s, .tnx-markdown-checkbox-text--done) .tnx-email-mention .tnx-emoji,
.tnx-email-mention:is([data-mention-format~="del"], [data-mention-format~="done"]) .tnx-emoji { position: relative; }
:is(del, s, .tnx-markdown-checkbox-text--done) .tnx-email-mention .tnx-emoji::after,
.tnx-email-mention:is([data-mention-format~="del"], [data-mention-format~="done"]) .tnx-emoji::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 58%;
    height: max(1px, .06em);
    background: currentColor;
    pointer-events: none;
}
.tnx-mention-search-results {
    position: fixed;
    z-index: 1200;
    display: none;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-color);
    min-height: 0;
    height: auto;
    overflow-y: auto;
    line-height: 1.4;
    text-align: left;
    resize: none;
}
.tnx-mention-search-results.is-visible { display: block; }
.tnx-mention-search-results[hidden] { display: none; }
.tnx-mention-search-row { margin-bottom: .5em; }
.tnx-mention-search-results .search-select { display: inline-block; max-width: 100%; text-decoration: none; cursor: pointer; color: var(--link-color); }
.tnx-mention-search-results .search-select-active { opacity: .8; }
.tnx-mention-private-warning { opacity: .5; margin-bottom: .5em; }
[data-mention-access="false"], .tnx-mention-label[data-mention-access="false"] { opacity: .5; }
[data-mention-access="false"]:hover, .tnx-mention-label[data-mention-access="false"]:hover { opacity: .4; }
.tnx-email-mention[data-mention-static], .tnx-email-mention[data-mention-static]:hover { cursor: default; opacity: .5; }