.tnx-entry-chat-preview { position: relative; min-width: 0; width: 100%; container-type: inline-size; }
.tnx-entry-chat-messages[data-chat-url]:hover:not(:has(a:hover,button:hover)), .tnx-entry-chat-message:hover { opacity: .8; }
.tnx-entry-chat-counts { display: flex; justify-content: center; gap: 3px; min-width: 0; margin-bottom: 5px; overflow: hidden; }
/* The shared pill base, scoped here because other pages define their own .log-tag-filter. */
.tnx-entry-chat-counts .log-tag-filter { display: inline-flex; align-items: center; justify-content: center; height: 20px; border: 1px solid transparent; border-radius: 4px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; transition: opacity 0.2s ease, filter 0.2s ease; outline: none; box-sizing: border-box; }
.tnx-entry-chat-counts .log-tag-filter:hover, .tnx-entry-chat-counts .log-tag-filter:focus-visible { filter: opacity(0.8); }
.tnx-entry-chat-counts .tnx-entry-chat-count { flex: 1 1 auto; min-width: calc(var(--tnx-chat-this-digits, 1) * .7em + min(1.1rem, 2.2cqw) + 2px); max-width: max-content; padding-inline: min(.55rem, 1.1cqw); font-size: .65rem; text-decoration: none; opacity: .4; }
.tnx-entry-chat-count.has-count { opacity: 1; }
.tnx-entry-chat-counts .tnx-entry-chat-count-placeholder { flex: 1 1 0; background: var(--text-color); opacity: .1; cursor: default; pointer-events: none; }
.tnx-entry-chat-count .emailbot-state-filter-label { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.tnx-entry-chat-count .emailbot-state-filter-count, .tnx-entry-chat-count .emailbot-state-filter-separator { flex: 0 0 auto; }
/* One colour per state for the pills, the message boxes, the card circle, its menu and the bars. */
:is(.tnx-entry-chat-count, .tnx-entry-chat-state, .tnx-entry-chat-state-menu .emailbot-state-option)[data-chat-state="unread"] { --tnx-chat-state-bg: #2563eb; --tnx-chat-state-fg: #fff; }
:is(.tnx-entry-chat-count, .tnx-entry-chat-state, .tnx-entry-chat-state-menu .emailbot-state-option)[data-chat-state="todo"] { --tnx-chat-state-bg: #dc2626; --tnx-chat-state-fg: #fff; }
:is(.tnx-entry-chat-count, .tnx-entry-chat-state, .tnx-entry-chat-state-menu .emailbot-state-option)[data-chat-state="work_in_progress"] { --tnx-chat-state-bg: #f97316; --tnx-chat-state-fg: #fff; }
:is(.tnx-entry-chat-count, .tnx-entry-chat-state, .tnx-entry-chat-state-menu .emailbot-state-option)[data-chat-state="waiting"] { --tnx-chat-state-bg: #eab308; --tnx-chat-state-fg: #3f3200; }
:is(.tnx-entry-chat-count, .tnx-entry-chat-state, .tnx-entry-chat-state-menu .emailbot-state-option)[data-chat-state="finished"] { --tnx-chat-state-bg: #16a34a; --tnx-chat-state-fg: #fff; }
:is(.tnx-entry-chat-count, .tnx-entry-chat-state, .tnx-entry-chat-state-menu .emailbot-state-option)[data-chat-state="follow_up"] { --tnx-chat-state-bg: #0891b2; --tnx-chat-state-fg: #fff; }
:is(.tnx-entry-chat-count, .tnx-entry-chat-state, .tnx-entry-chat-state-menu .emailbot-state-option)[data-chat-state="read"] { --tnx-chat-state-bg: #9333ea; --tnx-chat-state-fg: #fff; }
:is(.tnx-entry-chat-count, .tnx-entry-chat-state)[data-chat-state] { background: var(--tnx-chat-state-bg); color: var(--tnx-chat-state-fg); }
.tnx-entry-chat-state-menu .emailbot-state-option[data-chat-state] { color: var(--tnx-chat-state-bg); background: color-mix(in srgb, var(--tnx-chat-state-bg) 15%, transparent); font-weight: 600; }
/* Anchor the chronological history at the bottom before the first paint, including server markup. */
.tnx-entry-chat-messages.form-control { display: flex; flex-direction: column-reverse; gap: 3px; min-height: 80px; height: 126px; max-height: 126px; overflow: auto; overflow-anchor: none; resize: none; width: 100%; box-sizing: border-box; cursor: pointer; }
.tnx-entry-chat-history { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; min-width: 0; width: 100%; }
.tnx-entry-chat-placeholder { display: flex; flex: 1; align-items: center; justify-content: center; text-align: center; opacity: .5; white-space: normal; }
/* A message link is only as wide as its text, so the free space beside it opens the chat itself. */
.tnx-entry-chat-message { display: block; flex: 0 0 auto; align-self: flex-start; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; text-align: left; line-height: 1.4; }
.tnx-entry-chat-message.is-own { align-self: flex-end; text-align: right; }
.tnx-entry-chat-messages:not([data-chat-url]) { cursor: default; }
/* Static examples keep the count hover bars without suggesting message actions. */
.tnx-entry-chat-preview--static :is(.tnx-entry-chat-count, .tnx-entry-chat-message) { cursor: default; }
.tnx-entry-chat-preview--static .tnx-entry-chat-message { color: var(--text-color); }
.tnx-entry-chat-preview--static .tnx-entry-chat-message:hover { opacity: 1; }
.tnx-entry-chat-attachments { flex: 0 0 auto; width: 80%; }
.tnx-entry-chat-attachments.is-own { margin-left: 20%; text-align: right; }
.tnx-entry-chat-attachments a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.tnx-entry-chat-body { font-weight: 400; text-transform: none; }
.tnx-entry-chat-separator { opacity: .5; }
/* The state box is exactly one line high; one plain space separates it from the subject. */
/* A done message fades only its box fill to 20%. The emoji keeps the ink and opacity of every other line. */
.tnx-entry-chat-message .tnx-entry-chat-state[data-chat-state="read"] { background: color-mix(in srgb, var(--tnx-chat-state-bg) 20%, transparent); color: inherit; }
/* A message card keeps its full opacity when hovered; its mention pills dim on their own. */
.tnx-entry-chat-hover-preview { max-width: 420px; min-width: min(250px, 80vw); --emailbot-chat-preview-lines: 8; }
.emailbot-chat-item.tnx-entry-chat-hover-preview:not(.active):hover { opacity: 1; }
.tnx-entry-chat-hover-preview .emailbot-chat-state-pill[role="button"] { cursor: pointer; }
.tnx-entry-chat-hover-preview .emailbot-chat-state-pill[hidden] { display: none; }
.tnx-entry-chat-hover-mentions { line-height: 1.8; }
.tnx-entry-chat-hover-more { opacity: .5; cursor: default; }
/* The bars replace the chat in its own frame. Copied border, radius and background come from it. */
.tnx-entry-chat-bars { position: absolute; display: flex; align-items: flex-end; justify-content: center; gap: clamp(3px, 4%, 14px); box-sizing: border-box; padding: 2px 8px; overflow: hidden; pointer-events: none; }
.tnx-entry-chat-bars[hidden] { display: none; }
.tnx-entry-chat-bar-slot { display: flex; align-items: flex-end; flex: 0 1 36px; min-width: 2px; height: 100%; }
.tnx-entry-chat-bar { display: block; width: 100%; border-radius: 3px; opacity: .8; }
.tnx-entry-chat-bar.is-active { opacity: 1; }
@container (max-width: 220px) {
    .tnx-entry-chat-count .emailbot-state-filter-label, .tnx-entry-chat-count .emailbot-state-filter-separator { display: none; }
    .tnx-entry-chat-count:not(.has-count) .emailbot-state-filter-count { display: inline; }
    .tnx-entry-chat-counts .tnx-entry-chat-count { flex: 1 1 auto; min-width: calc(var(--tnx-chat-this-digits, 1) * .7em + 4px); max-width: none; font-size: min(.65rem, calc((100cqw - 40px) / var(--tnx-chat-count-digits, 6) * 1.3)); padding-inline: 1px; }
}