discord-transcript-ui 1.0.0

package/dist/v1.0.0/discord-transcript.css

@@ -0,0 +1,1896 @@
+/*!
+ * discord-transcript-ui v1.0.0 — single stylesheet for Discord chat transcripts
+ * MIT licensed. Light DOM only: no Shadow DOM, no build step required to use.
+ *
+ * Recovery information for archived transcripts lives in the HTML file itself
+ * (asset URLs + sha256 + mirrors). See docs/CDN-STRATEGY.md in the source repo.
+ *
+ * Contents
+ *   1  tokens          6  inline text      11 embeds
+ *   2  base            7  code              12 attachments
+ *   3  page shell      8  system/command    13 reactions
+ *   4  messages        9  threads           14 action row
+ *   5  message        10  reply             15 a11y + print
+ *
+ * Everything is themed through --dt-* custom properties: override them on
+ * :root, on discord-messages, or per element. Markup contract: docs/SPEC.md.
+ */
+
+/* ==========================================================================
+   1. TOKENS — dark by default, light opt-in
+   ========================================================================== */
+
+/* Tokens live on :root so every component inherits them, and on
+   discord-messages so a transcript can be re-themed without touching the page. */
+:root {
+	--dt-font: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	--dt-font-mono:
+		'gg mono', 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
+		'DejaVu Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+	--dt-font-size: 1rem;
+	--dt-line-height: 1.375rem;
+	--dt-radius-sm: 4px;
+	--dt-radius-md: 8px;
+	--dt-radius-lg: 12px;
+
+	/* Discord's 2024+ "visual refresh" palette, taken from its live token sheet.
+	   See docs/DESIGN-TOKENS.md for every value, source URL and open question. */
+	--dt-bg-primary: #323339;
+	--dt-bg-secondary: #393a41;
+	--dt-bg-tertiary: #2c2d32;
+	--dt-bg-embed: #393a41;
+	--dt-bg-code: #323339;
+	--dt-bg-inline-code: rgba(88, 101, 242, 0.078);
+	--dt-bg-modifier-hover: rgba(151, 151, 159, 0.122);
+	--dt-bg-modifier-active: rgba(151, 151, 159, 0.161);
+	--dt-bg-message-hover: rgba(151, 151, 159, 0.039);
+	--dt-bg-mentioned: rgba(248, 163, 0, 0.078);
+	--dt-bg-scrollbar-thumb: #767780;
+	--dt-bg-scrollbar-track: transparent;
+
+	--dt-text-normal: #f3f3f4;
+	--dt-text-strong: #ffffff;
+	--dt-text-subtle: #c5c6ca;
+	--dt-text-muted: #9d9ea5;
+	--dt-text-link: #76aff6;
+	--dt-text-on-brand: #ffffff;
+	--dt-status-online: #3d9e60;
+	--dt-status-idle: #ffcb6e;
+	--dt-status-dnd: #dc4247;
+	--dt-status-offline: #9d9ea5;
+
+	--dt-border: rgba(151, 151, 159, 0.122);
+	--dt-border-strong: rgba(151, 151, 159, 0.2);
+	--dt-brand: #5865f2;
+	--dt-accent-bar: var(--dt-brand);
+	--dt-role-default: #f3f3f4;
+	--dt-embed-default-color: #4f545c;
+	--dt-divider: rgba(151, 151, 159, 0.122);
+	--dt-line-color: #595a63;
+
+	--dt-mention-bg: rgba(88, 101, 242, 0.239);
+	--dt-mention-text: #cdd7ff;
+	--dt-mention-role-color: var(--dt-role-default);
+	--dt-mention-channel-bg: rgba(151, 151, 159, 0.122);
+	--dt-mention-channel-text: var(--dt-text-normal);
+
+	--dt-spoiler-bg: #7d7e87;
+	--dt-spoiler-revealed-bg: rgba(151, 151, 159, 0.078);
+
+	--dt-gutter: 16px;
+	--dt-avatar-size: 40px;
+	--dt-avatar-gap: 16px;
+	--dt-msg-padding-right: 48px;
+	--dt-reply-avatar-size: 16px;
+
+	--dt-button-secondary: rgba(151, 151, 159, 0.122);
+	--dt-button-secondary-hover: rgba(151, 151, 159, 0.2);
+	--dt-button-primary: #5865f2;
+	--dt-button-primary-hover: #4654c0;
+	--dt-button-success: #248046;
+	--dt-button-danger: #da3e44;
+	--dt-button-link: rgba(151, 151, 159, 0.122);
+
+	--dt-reaction-bg: rgba(151, 151, 159, 0.122);
+	--dt-reaction-border: rgba(151, 151, 159, 0.122);
+	--dt-reaction-bg-reacted: rgba(88, 101, 242, 0.239);
+	--dt-reaction-border-reacted: #5865f2;
+	--dt-reaction-text-reacted: #dfe4ff;
+
+	--dt-focus-ring: #76aff6;
+	--dt-transition: 120ms ease;
+}
+
+/* Light theme: set light-theme on discord-messages, data-theme, or the page root. */
+discord-messages[light-theme],
+discord-messages[data-theme='light'],
+:root[data-theme='light'] {
+	--dt-bg-primary: #ffffff;
+	--dt-bg-secondary: #ffffff;
+	--dt-bg-tertiary: #f3f3f4;
+	--dt-bg-embed: #ffffff;
+	--dt-bg-code: #f3f3f4;
+	--dt-bg-inline-code: rgba(88, 101, 242, 0.078);
+	--dt-bg-modifier-hover: rgba(151, 151, 159, 0.122);
+	--dt-bg-modifier-active: rgba(151, 151, 159, 0.161);
+	--dt-bg-message-hover: rgba(151, 151, 159, 0.078);
+	--dt-bg-mentioned: rgba(248, 163, 0, 0.1);
+	--dt-bg-scrollbar-thumb: #8b8c94;
+	--dt-bg-scrollbar-track: transparent;
+
+	--dt-text-normal: #2e2e34;
+	--dt-text-strong: #28282d;
+	--dt-text-subtle: #595a63;
+	--dt-text-muted: #6c6d76;
+	--dt-text-link: #006dd4;
+	--dt-role-default: #2e2e34;
+
+	--dt-border: rgba(151, 151, 159, 0.278);
+	--dt-border-strong: rgba(151, 151, 159, 0.4);
+	--dt-divider: rgba(151, 151, 159, 0.278);
+	--dt-line-color: #c5c6ca;
+	--dt-embed-default-color: #d4d7dc;
+
+	--dt-mention-bg: rgba(88, 101, 242, 0.15);
+	--dt-mention-text: #2e3c88;
+	--dt-mention-channel-bg: rgba(151, 151, 159, 0.122);
+	--dt-mention-channel-text: #2e2e34;
+
+	--dt-spoiler-bg: #8f9097;
+	--dt-spoiler-revealed-bg: #ebeced;
+
+	--dt-reaction-border: rgba(151, 151, 159, 0.278);
+	--dt-reaction-text-reacted: #273478;
+	--dt-status-online: #01783e;
+	--dt-status-idle: #faaa00;
+	--dt-status-dnd: #d22d39;
+	--dt-status-offline: #5f606a;
+	--dt-focus-ring: #006dd4;
+}
+
+/* Explicit dark still wins inside a light scope. */
+discord-messages[data-theme='dark'] {
+	--dt-bg-primary: #323339;
+	--dt-bg-secondary: #393a41;
+	--dt-bg-tertiary: #2c2d32;
+	--dt-bg-embed: #393a41;
+	--dt-bg-code: #323339;
+	--dt-bg-inline-code: rgba(88, 101, 242, 0.078);
+	--dt-bg-modifier-hover: rgba(151, 151, 159, 0.122);
+	--dt-bg-modifier-active: rgba(151, 151, 159, 0.161);
+	--dt-bg-message-hover: rgba(151, 151, 159, 0.039);
+	--dt-bg-mentioned: rgba(248, 163, 0, 0.078);
+	--dt-bg-scrollbar-thumb: #767780;
+	--dt-bg-scrollbar-track: transparent;
+	--dt-text-normal: #f3f3f4;
+	--dt-text-strong: #ffffff;
+	--dt-text-subtle: #c5c6ca;
+	--dt-text-muted: #9d9ea5;
+	--dt-text-link: #76aff6;
+	--dt-role-default: #f3f3f4;
+	--dt-border: rgba(151, 151, 159, 0.122);
+	--dt-border-strong: rgba(151, 151, 159, 0.2);
+	--dt-divider: rgba(151, 151, 159, 0.122);
+	--dt-line-color: #595a63;
+	--dt-embed-default-color: #4f545c;
+	--dt-mention-bg: rgba(88, 101, 242, 0.239);
+	--dt-mention-text: #cdd7ff;
+	--dt-mention-channel-bg: rgba(151, 151, 159, 0.122);
+	--dt-mention-channel-text: #f3f3f4;
+	--dt-spoiler-bg: #7d7e87;
+	--dt-spoiler-revealed-bg: rgba(151, 151, 159, 0.078);
+	--dt-reaction-border: rgba(151, 151, 159, 0.122);
+	--dt-reaction-text-reacted: #dfe4ff;
+	--dt-status-online: #3d9e60;
+	--dt-status-idle: #ffcb6e;
+	--dt-status-dnd: #dc4247;
+	--dt-status-offline: #9d9ea5;
+	--dt-focus-ring: #76aff6;
+}
+
+/* ==========================================================================
+   2. BASE
+   ========================================================================== */
+
+:where(
+		discord-messages,
+		discord-message,
+		discord-author-info,
+		discord-reply,
+		discord-embed,
+		discord-embed-description,
+		discord-embed-fields,
+		discord-embed-field,
+		discord-embed-footer,
+		discord-attachments,
+		discord-image-attachment,
+		discord-file-attachment,
+		discord-audio-attachment,
+		discord-video-attachment,
+		discord-reactions,
+		discord-reaction,
+		discord-spoiler,
+		discord-time,
+		discord-mention,
+		discord-custom-emoji,
+		discord-code,
+		discord-pre,
+		discord-quote,
+		discord-list-item,
+		discord-unordered-list,
+		discord-ordered-list,
+		discord-header,
+		discord-command,
+		discord-system-message,
+		discord-thread,
+		discord-thread-message,
+		discord-action-row,
+		discord-button,
+		discord-verified-author-tag
+	) {
+	box-sizing: border-box;
+}
+
+:where(
+		discord-messages,
+		discord-message,
+		discord-embed,
+		discord-attachments,
+		discord-reactions,
+		discord-reply,
+		discord-system-message,
+		discord-command,
+		discord-thread,
+		discord-thread-message,
+		discord-action-row,
+		discord-pre,
+		discord-quote,
+		discord-unordered-list,
+		discord-ordered-list,
+		discord-header
+	) {
+	display: block;
+	font-family: var(--dt-font);
+	font-size: var(--dt-font-size);
+	line-height: var(--dt-line-height);
+	color: var(--dt-text-normal);
+	text-align: left;
+}
+
+:where(discord-message, discord-reply, discord-embed, discord-attachments, discord-reactions) {
+	-webkit-text-size-adjust: 100%;
+	word-wrap: break-word;
+	overflow-wrap: anywhere;
+}
+
+/* Inline formatting */
+:where(discord-bold) {
+	font-weight: 700;
+}
+
+:where(discord-italic) {
+	font-style: italic;
+}
+
+:where(discord-underlined) {
+	text-decoration: underline;
+}
+
+:where(discord-strikethrough) {
+	text-decoration: line-through;
+}
+
+:where(discord-subscript) {
+	font-size: 0.8125rem;
+	vertical-align: sub;
+}
+
+/* Markdown headings */
+:where(discord-header) {
+	display: block;
+	margin: 8px 0 0;
+	font-weight: 600;
+	line-height: 1.375em;
+}
+
+:where(discord-header[level='1']) {
+	font-size: 1.5rem;
+}
+
+:where(discord-header[level='2']) {
+	font-size: 1.25rem;
+}
+
+:where(discord-header[level='3']) {
+	font-size: 1rem;
+}
+
+/* Blockquote */
+:where(discord-quote) {
+	display: block;
+	margin: 4px 0;
+	padding: 0 8px 0 12px;
+	color: var(--dt-text-subtle);
+	border-left: 4px solid var(--dt-line-color);
+	border-radius: var(--dt-radius-sm);
+}
+
+/* Lists */
+:where(discord-unordered-list, discord-ordered-list) {
+	margin: 0;
+	padding-left: 1.375em;
+}
+
+:where(discord-list-item) {
+	display: list-item;
+	margin: 0 0 4px;
+	padding: 0;
+}
+
+:where(discord-unordered-list) > discord-list-item {
+	list-style: disc outside;
+}
+
+:where(discord-ordered-list) > discord-list-item {
+	list-style: decimal outside;
+}
+
+/* Links */
+:where(discord-link) {
+	color: var(--dt-text-link);
+	text-decoration: none;
+}
+
+:where(discord-link):hover {
+	text-decoration: underline;
+}
+
+:where(discord-message, discord-embed, discord-embed-description, discord-embed-field, discord-reply, discord-quote)
+	a:not([class]) {
+	color: var(--dt-text-link);
+	text-decoration: none;
+}
+
+:where(discord-message, discord-embed, discord-embed-description, discord-embed-field, discord-reply, discord-quote)
+	a:not([class]):hover {
+	text-decoration: underline;
+}
+
+/* ==========================================================================
+   3. PAGE SHELL (optional)
+   ========================================================================== */
+
+.dt-page {
+	min-height: 100vh;
+	margin: 0;
+	background: var(--dt-bg-primary);
+	color: var(--dt-text-normal);
+	font-family: var(--dt-font);
+	font-size: var(--dt-font-size);
+	line-height: var(--dt-line-height);
+	-webkit-font-smoothing: antialiased;
+}
+
+.dt-page__inner {
+	max-width: 100%;
+	margin: 0 auto;
+	padding: 1rem 0 4rem;
+}
+
+.dt-page__title {
+	margin: 0 0 1rem;
+	padding: 0 16px;
+	font-size: 1.25rem;
+	font-weight: 700;
+	color: var(--dt-text-strong);
+}
+
+.dt-page__meta {
+	margin: 0 0 1.5rem;
+	padding: 0 16px;
+	font-size: 0.875rem;
+	color: var(--dt-text-muted);
+}
+
+/* ==========================================================================
+   4. MESSAGE LIST
+   ========================================================================== */
+
+:where(discord-messages) {
+	display: block;
+	position: relative;
+	margin: 0 auto;
+	padding: 8px 0 16px;
+	background: var(--dt-bg-primary);
+	color: var(--dt-text-normal);
+	font-family: var(--dt-font);
+	line-height: var(--dt-line-height);
+	overflow-x: hidden;
+	overflow-y: auto;
+	scrollbar-color: var(--dt-bg-scrollbar-thumb) var(--dt-bg-scrollbar-track);
+}
+
+:where(discord-messages[no-background]) {
+	background: transparent;
+	padding: 0;
+}
+
+:where(discord-messages[channel-name])::before {
+	content: attr(channel-name);
+	display: block;
+	margin: 0 0 8px;
+	padding: 4px 16px 12px;
+	border-bottom: 1px solid var(--dt-divider);
+	font-size: 1.25rem;
+	font-weight: 700;
+	color: var(--dt-text-strong);
+}
+
+discord-messages[channel-type='text'][channel-name]::before,
+discord-messages[channel-type='voice'][channel-name]::before,
+discord-messages[channel-type='thread'][channel-name]::before,
+discord-messages[channel-type='forum'][channel-name]::before,
+discord-messages[channel-type='locked'][channel-name]::before {
+	content: '#\00a0' attr(channel-name);
+}
+
+discord-messages ::-webkit-scrollbar {
+	width: 16px;
+	height: 16px;
+}
+
+discord-messages ::-webkit-scrollbar-thumb {
+	background: var(--dt-bg-scrollbar-thumb);
+	border: 4px solid transparent;
+	background-clip: padding-box;
+	border-radius: 8px;
+}
+
+discord-messages ::-webkit-scrollbar-track {
+	background: var(--dt-bg-scrollbar-track);
+}
+
+/* ==========================================================================
+   5. MESSAGE
+   ========================================================================== */
+
+:where(discord-message) {
+	position: relative;
+	display: block;
+	margin: 0;
+	padding: 2px var(--dt-msg-padding-right) 2px var(--dt-gutter);
+	color: var(--dt-text-normal);
+	font-family: var(--dt-font);
+	font-size: var(--dt-font-size);
+	line-height: var(--dt-line-height);
+	-webkit-user-select: text;
+	user-select: text;
+}
+
+:where(discord-message:hover) {
+	background: var(--dt-bg-message-hover);
+}
+
+/* Pre-upgrade fallback: no avatar or header yet, but the author name and the
+   message text are both visible, so a JS-less or CSS-only view stays readable. */
+discord-message:not([data-dt-ready])::before {
+	content: attr(author) '\00a0';
+	font-weight: 600;
+	color: var(--dt-role-default);
+}
+
+discord-message:not([data-dt-ready]):not([author])::before,
+discord-message:not([data-dt-ready])[author='']::before {
+	content: '';
+}
+
+/* Structure built by discord-transcript.js */
+.dt-msg {
+	display: grid;
+	grid-template-columns: var(--dt-avatar-size) minmax(0, 1fr);
+	column-gap: var(--dt-avatar-gap);
+	align-items: start;
+}
+
+.dt-avatar {
+	grid-column: 1;
+	width: var(--dt-avatar-size);
+	height: var(--dt-avatar-size);
+	margin-top: 2px;
+	border-radius: 50%;
+	overflow: hidden;
+	background: var(--dt-bg-tertiary);
+}
+
+.dt-avatar img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.dt-content {
+	grid-column: 2;
+	min-width: 0;
+}
+
+.dt-header {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	min-height: 1.375rem;
+}
+
+.dt-author {
+	margin-right: 8px;
+	font-weight: 500;
+	color: var(--dt-role-default);
+	text-decoration: none;
+}
+
+.dt-author--interactive:hover {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.dt-badges {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	margin-right: 8px;
+}
+
+.dt-badge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: 15px;
+	padding: 0 4px;
+	border-radius: 3px;
+	background: var(--dt-brand);
+	color: var(--dt-text-on-brand);
+	font-size: 0.625rem;
+	font-weight: 600;
+	line-height: 1;
+	letter-spacing: 0.02em;
+	text-transform: uppercase;
+}
+
+.dt-badge--verified {
+	width: 15px;
+	padding: 0;
+	border-radius: 50%;
+}
+
+.dt-badge--verified::after {
+	content: '\2713';
+	font-size: 9px;
+}
+
+.dt-badge--server {
+	background: #3ba55c;
+}
+
+.dt-badge--official {
+	background: #1abc84;
+}
+
+.dt-timestamp {
+	font-size: 0.75rem;
+	line-height: 1.375rem;
+	color: var(--dt-text-muted);
+	white-space: nowrap;
+}
+
+.dt-timestamp:hover {
+	text-decoration: underline;
+}
+
+.dt-edited {
+	margin-left: 4px;
+	font-size: 0.625rem;
+	color: var(--dt-text-muted);
+}
+
+.dt-body {
+	display: block;
+	min-width: 0;
+}
+
+.dt-body > :first-child {
+	margin-top: 0;
+}
+
+/* Emoji-only messages render larger. */
+.dt-jumbo {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 2px;
+}
+
+.dt-jumbo discord-custom-emoji img,
+.dt-jumbo > img.emoji {
+	width: 48px;
+	height: 48px;
+}
+
+/* States */
+discord-message[highlight],
+discord-message[ephemeral],
+discord-message[mentioned] {
+	background: var(--dt-bg-mentioned);
+}
+
+discord-message[highlight]::after,
+discord-message[ephemeral]::after,
+discord-message[mentioned]::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 2px;
+	background: var(--dt-accent-bar);
+	pointer-events: none;
+}
+
+discord-message[ephemeral] {
+	background: rgba(88, 101, 242, 0.08);
+}
+
+discord-message[highlight]:hover,
+discord-message[mentioned]:hover {
+	background: var(--dt-bg-mentioned);
+}
+
+/* Continuation rows (same author as the previous message), detected by JS or
+   forced by the parser with message-body-only. */
+discord-message[data-dt-continuation] .dt-avatar,
+discord-message[message-body-only] .dt-avatar {
+	visibility: hidden;
+}
+
+discord-message[data-dt-continuation] .dt-header,
+discord-message[message-body-only] .dt-header {
+	display: none;
+}
+
+discord-message[data-dt-continuation]:hover::before,
+discord-message[data-dt-continuation]:focus-within::before {
+	content: attr(data-dt-short-time);
+	position: absolute;
+	top: 3px;
+	left: var(--dt-gutter);
+	width: calc(var(--dt-avatar-size) - 4px);
+	font-size: 0.6875rem;
+	line-height: 1.375rem;
+	color: var(--dt-text-muted);
+	white-space: nowrap;
+	overflow: hidden;
+	pointer-events: none;
+}
+
+discord-message[data-dt-group-start] {
+	margin-top: 1.0625rem;
+}
+
+discord-message:first-child {
+	margin-top: 0;
+}
+
+/* Compact mode */
+discord-messages[compact-mode],
+discord-message[compact-mode] {
+	--dt-avatar-size: 16px;
+	--dt-avatar-gap: 8px;
+	--dt-gutter: 16px;
+	--dt-msg-padding-right: 16px;
+}
+
+discord-messages[compact-mode] discord-message {
+	padding-top: 1px;
+	padding-bottom: 1px;
+}
+
+discord-messages[compact-mode] .dt-avatar {
+	margin-top: 0.25rem;
+}
+
+discord-messages[compact-mode] .dt-header {
+	display: inline;
+	margin-right: 8px;
+}
+
+discord-messages[compact-mode] .dt-author {
+	margin-right: 6px;
+}
+
+discord-messages[compact-mode] .dt-body {
+	display: inline;
+}
+
+discord-messages[compact-mode] .dt-timestamp {
+	margin-right: 6px;
+	font-size: 0.6875rem;
+}
+
+/* ==========================================================================
+   6. AUTHOR INFO, MENTION, EMOJI, TIME, SPOILER
+   ========================================================================== */
+
+:where(discord-author-info) {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	font-weight: 500;
+	color: var(--dt-role-default);
+}
+
+discord-author-info:not([data-dt-ready])::before {
+	content: attr(author);
+}
+
+:where(discord-author-info[bot], discord-author-info[server], discord-author-info[official-app], discord-author-info[op])
+	::after {
+	margin-left: 4px;
+	padding: 0 4px;
+	border-radius: 3px;
+	background: var(--dt-brand);
+	color: var(--dt-text-on-brand);
+	font-size: 0.625rem;
+	font-weight: 600;
+	line-height: 15px;
+}
+
+:where(discord-author-info[bot])::after {
+	content: 'BOT';
+}
+
+:where(discord-author-info[server])::after {
+	content: 'SERVER';
+	background: #3ba55c;
+}
+
+:where(discord-author-info[official-app])::after {
+	content: 'OFFICIAL';
+	background: #1abc84;
+}
+
+:where(discord-author-info[op])::after {
+	content: 'OP';
+}
+
+/* Mentions */
+:where(discord-mention) {
+	display: inline;
+	padding: 0 2px;
+	border-radius: 3px;
+	background: var(--dt-mention-bg);
+	color: var(--dt-mention-text);
+	font-weight: 500;
+	cursor: pointer;
+}
+
+:where(discord-mention):hover {
+	background: var(--dt-bg-modifier-active);
+}
+
+:where(discord-mention[type='channel']),
+:where(discord-mention[type='voice']),
+:where(discord-mention[type='thread']),
+:where(discord-mention[type='forum']),
+:where(discord-mention[type='locked']) {
+	background: var(--dt-mention-channel-bg);
+	color: var(--dt-mention-channel-text);
+}
+
+:where(discord-mention[type='role']) {
+	background: var(--dt-mention-bg);
+	color: var(--dt-mention-role-color);
+}
+
+/* Prefixes, so the parser does not have to repeat "@" and "#" per mention. */
+discord-mention:not([no-prefix])::before {
+	content: '@';
+}
+
+discord-mention:not([no-prefix])[type='channel']::before,
+discord-mention:not([no-prefix])[type='voice']::before,
+discord-mention:not([no-prefix])[type='thread']::before,
+discord-mention:not([no-prefix])[type='forum']::before,
+discord-mention:not([no-prefix])[type='locked']::before {
+	content: '#';
+}
+
+/* Custom emoji */
+:where(discord-custom-emoji) {
+	display: inline-block;
+	vertical-align: -0.25em;
+}
+
+:where(discord-custom-emoji) img {
+	display: inline-block;
+	width: 1.375em;
+	height: 1.375em;
+	object-fit: contain;
+	vertical-align: middle;
+}
+
+discord-custom-emoji:not([data-dt-ready]):not(:has(img))::before {
+	content: attr(name);
+	font-size: 0.75rem;
+	color: var(--dt-text-muted);
+}
+
+/* Inline timestamp chip */
+:where(discord-time) {
+	display: inline;
+	padding: 0 2px;
+	border-radius: 3px;
+	background: var(--dt-bg-modifier-hover);
+	font-size: 0.875rem;
+	white-space: nowrap;
+}
+
+:where(discord-time):hover {
+	background: var(--dt-bg-modifier-active);
+}
+
+/* Spoiler */
+:where(discord-spoiler) {
+	display: inline;
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-spoiler-bg);
+	color: transparent;
+	cursor: pointer;
+	transition:
+		background var(--dt-transition),
+		color var(--dt-transition);
+}
+
+:where(discord-spoiler)::selection {
+	background: transparent;
+	color: transparent;
+}
+
+:where(discord-spoiler[activated]),
+:where(discord-spoiler[revealed]),
+:where(discord-spoiler[data-dt-revealed]) {
+	background: var(--dt-spoiler-revealed-bg);
+	color: inherit;
+	cursor: auto;
+}
+
+/* No-JS safety valve: hovering peeks instead of hiding content forever. */
+discord-spoiler:not([data-dt-ready]):hover {
+	background: var(--dt-spoiler-revealed-bg);
+	color: inherit;
+}
+
+discord-spoiler[data-dt-ready] {
+	outline: none;
+}
+
+discord-spoiler[data-dt-ready]:focus-visible {
+	box-shadow: 0 0 0 2px var(--dt-focus-ring);
+}
+
+/* ==========================================================================
+   7. CODE
+   ========================================================================== */
+
+:where(discord-code) {
+	display: inline;
+	padding: 0 2px;
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-inline-code);
+	border: 1px solid var(--dt-border-strong);
+	font-family: var(--dt-font-mono);
+	font-size: 0.85em;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+:where(discord-code[multiline]) {
+	display: block;
+	margin: 6px 0 0;
+	padding: 8px 12px;
+	border: 1px solid var(--dt-border);
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-code);
+	font-size: 0.75rem;
+	line-height: 1rem;
+	white-space: pre;
+	overflow-x: auto;
+	tab-size: 4;
+}
+
+:where(discord-pre) {
+	position: relative;
+	display: block;
+	margin: 6px 0 0;
+	padding: 0;
+	border: 1px solid var(--dt-border);
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-code);
+	overflow: hidden;
+}
+
+:where(discord-pre) > :where(discord-code),
+:where(discord-pre) pre {
+	display: block;
+	margin: 0;
+	padding: 8px 12px;
+	border: 0;
+	border-radius: 0;
+	background: none;
+	font-family: var(--dt-font-mono);
+	font-size: 0.75rem;
+	line-height: 1rem;
+	white-space: pre;
+	overflow-x: auto;
+	tab-size: 4;
+}
+
+:where(discord-pre) code {
+	font-family: inherit;
+}
+
+.dt-code-lang {
+	display: block;
+	padding: 6px 12px 0;
+	font-family: var(--dt-font);
+	font-size: 0.75rem;
+	color: var(--dt-text-muted);
+}
+
+.dt-copy {
+	position: absolute;
+	top: 6px;
+	right: 8px;
+	display: none;
+	padding: 2px 8px;
+	border: 1px solid var(--dt-border-strong);
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-primary);
+	color: var(--dt-text-normal);
+	font-family: var(--dt-font);
+	font-size: 0.75rem;
+	cursor: pointer;
+}
+
+discord-pre:hover .dt-copy,
+.dt-copy:focus-visible {
+	display: block;
+}
+
+.dt-copy:hover {
+	background: var(--dt-bg-modifier-hover);
+}
+
+/* ==========================================================================
+   8. SYSTEM MESSAGE + SLASH COMMAND
+   ========================================================================== */
+
+/* System messages render entirely from markup and attributes: no JS needed. */
+:where(discord-system-message) {
+	position: relative;
+	display: block;
+	margin: 0;
+	padding: 2px var(--dt-msg-padding-right) 2px
+		calc(var(--dt-gutter) + var(--dt-avatar-size) + var(--dt-avatar-gap));
+	background: transparent;
+	color: var(--dt-text-muted);
+	font-size: 0.9375rem;
+}
+
+:where(discord-system-message)::before {
+	content: '';
+	position: absolute;
+	top: 7px;
+	left: calc(var(--dt-gutter) + (var(--dt-avatar-size) - 16px) / 2);
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background: var(--dt-bg-modifier-hover);
+}
+
+discord-system-message[type='join']::before {
+	background: var(--dt-status-online);
+}
+
+discord-system-message[type='leave']::before,
+discord-system-message[type='missed-call']::before,
+discord-system-message[type='alert']::before,
+discord-system-message[type='error']::before {
+	background: var(--dt-status-dnd);
+}
+
+discord-system-message[type='boost']::before {
+	background: #ff73fa;
+}
+
+discord-system-message[type='pin']::before {
+	background: var(--dt-status-idle);
+}
+
+discord-system-message[type='upgrade']::before,
+discord-system-message[type='thread']::before,
+discord-system-message[type='edit']::before,
+discord-system-message[type='call']::before {
+	background: var(--dt-brand);
+}
+
+discord-system-message a,
+discord-system-message :where(discord-link) {
+	color: var(--dt-text-muted);
+	font-weight: 500;
+}
+
+discord-system-message .dt-system-time {
+	margin-left: 4px;
+	font-size: 0.75rem;
+	color: var(--dt-text-muted);
+}
+
+/* Slash / context command rows */
+:where(discord-command) {
+	position: relative;
+	display: block;
+	margin: 0 0 2px;
+	padding: 0;
+	font-size: 0.9375rem;
+}
+
+discord-command:not([data-dt-ready])::before {
+	content: attr(author) ' used /' attr(command) '\00a0';
+	font-weight: 500;
+	color: var(--dt-text-normal);
+}
+
+/* Avatar placeholder used when no avatar can be resolved, so an archived
+   transcript never depends on a remote image to render its gutter. */
+.dt-avatar--initials {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #ffffff;
+	font-size: 0.875rem;
+	font-weight: 600;
+	text-transform: uppercase;
+}
+
+/* ==========================================================================
+   9. THREADS
+   ========================================================================== */
+
+:where(discord-thread) {
+	position: relative;
+	display: block;
+	margin: 4px 0 0;
+	padding: 4px 120px 4px 12px;
+	border-left: 2px solid var(--dt-line-color);
+	font-size: 0.875rem;
+	color: var(--dt-text-muted);
+}
+
+discord-thread:not([data-dt-ready])::before {
+	content: attr(name);
+	font-weight: 500;
+	color: var(--dt-text-normal);
+}
+
+discord-thread[cta]::after {
+	content: attr(cta) ' ' '\203a';
+	position: absolute;
+	top: 4px;
+	right: 8px;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--dt-text-muted);
+	pointer-events: none;
+}
+
+discord-thread-message {
+	display: block;
+	margin: 2px 0;
+	font-size: 0.875rem;
+}
+
+discord-thread-message:not([data-dt-ready])::before {
+	content: attr(author) '\00a0';
+	font-weight: 500;
+	color: var(--dt-role-default);
+}
+
+/* ==========================================================================
+   10. REPLY
+   ========================================================================== */
+
+:where(discord-reply) {
+	position: relative;
+	display: block;
+	margin: 0 0 2px;
+	color: var(--dt-text-normal);
+	font-size: 0.875rem;
+	line-height: 1.125rem;
+	min-height: 1.125rem;
+}
+
+discord-reply:not([data-dt-ready])::before {
+	content: attr(author) '\00a0';
+	font-weight: 500;
+	color: var(--dt-role-default);
+}
+
+discord-reply[mentions]:not([data-dt-ready])::before {
+	content: '@' attr(author) '\00a0';
+}
+
+discord-reply[deleted] > * {
+	display: none;
+}
+
+discord-reply[deleted]::before {
+	content: 'Original message was deleted';
+	font-style: italic;
+	font-weight: 400;
+	color: var(--dt-text-muted);
+}
+
+/* Curved connector, drawn only once the reply sits in the content column. */
+discord-message[data-dt-ready] :where(discord-reply)::after {
+	content: '';
+	position: absolute;
+	left: -36px;
+	bottom: -2px;
+	width: 36px;
+	height: 12px;
+	border-left: 2px solid var(--dt-line-color);
+	border-top: 2px solid var(--dt-line-color);
+	border-top-left-radius: 6px;
+	pointer-events: none;
+}
+
+discord-reply[data-dt-ready] .dt-reply-avatar {
+	display: inline-block;
+	width: var(--dt-reply-avatar-size);
+	height: var(--dt-reply-avatar-size);
+	margin-right: 4px;
+	border-radius: 50%;
+	overflow: hidden;
+	vertical-align: -3px;
+	background: var(--dt-bg-tertiary);
+}
+
+discord-reply[data-dt-ready] .dt-reply-avatar img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+discord-reply[data-dt-ready] .dt-reply-author {
+	margin-right: 4px;
+	font-weight: 500;
+	color: var(--dt-role-default);
+}
+
+discord-reply[data-dt-ready] .dt-reply-author:hover {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+discord-reply[data-dt-ready] .dt-reply-avatar,
+discord-reply[data-dt-ready] .dt-reply-author {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+discord-messages[compact-mode] :where(discord-reply)::after {
+	display: none;
+}
+
+/* ==========================================================================
+   11. EMBEDS
+   ========================================================================== */
+
+:where(discord-embed) {
+	position: relative;
+	display: block;
+	margin: 8px 0 0;
+	padding: 2px 16px 16px 12px;
+	border: 1px solid var(--dt-border);
+	border-left: 4px solid var(--dt-embed-color, var(--dt-embed-default-color));
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-embed);
+	max-width: 516px;
+	color: var(--dt-text-normal);
+	font-size: 0.875rem;
+	line-height: 1.125rem;
+}
+
+.dt-embed-content {
+	min-width: 0;
+}
+
+discord-embed[thumbnail] .dt-embed-content,
+discord-embed[data-dt-thumbnail] .dt-embed-content,
+discord-embed:has(.dt-embed-thumbnail) .dt-embed-content {
+	padding-right: 96px;
+}
+
+/* Without the JS-built wrapper, inset the whole embed body instead. */
+discord-embed[thumbnail]:not(:has(.dt-embed-content)),
+discord-embed[data-dt-thumbnail]:not(:has(.dt-embed-content)),
+discord-embed:has(.dt-embed-thumbnail):not(:has(.dt-embed-content)) {
+	padding-right: 104px;
+}
+
+/* Attribute-only embed header, so a title survives without JavaScript.
+   Preferred durable form: emit <span class="dt-embed-author"> and
+   <span class="dt-embed-title"> markup instead (see docs/SPEC.md). */
+discord-embed:not([data-dt-ready])[embed-title]::before {
+	content: attr(embed-title);
+	display: block;
+	margin: 0 0 8px;
+	font-size: 1rem;
+	font-weight: 600;
+	line-height: 1.375rem;
+	color: var(--dt-text-strong);
+}
+
+discord-embed:not([data-dt-ready]):not([embed-title])[author-name]::before {
+	content: attr(author-name);
+	display: block;
+	margin: 0 0 8px;
+	font-weight: 600;
+	line-height: 1.125rem;
+}
+
+.dt-embed-provider {
+	display: block;
+	margin-bottom: 8px;
+	color: var(--dt-text-normal);
+}
+
+.dt-embed-author {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 8px;
+	font-size: 0.875rem;
+	font-weight: 600;
+	line-height: 1.125rem;
+}
+
+.dt-embed-author img {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+.dt-embed-author a {
+	color: var(--dt-text-normal);
+	text-decoration: none;
+}
+
+.dt-embed-author a:hover {
+	text-decoration: underline;
+}
+
+.dt-embed-title {
+	display: block;
+	margin: 0 0 8px;
+	font-size: 1rem;
+	font-weight: 600;
+	line-height: 1.375rem;
+	color: var(--dt-text-strong);
+	text-decoration: none;
+}
+
+.dt-embed-title--link,
+a.dt-embed-title:hover,
+.dt-embed-title a:hover {
+	text-decoration: underline;
+}
+
+a.dt-embed-title {
+	color: var(--dt-text-link);
+}
+
+.dt-embed-thumbnail {
+	position: absolute;
+	top: 8px;
+	right: 16px;
+	width: 80px;
+	height: 80px;
+	border-radius: var(--dt-radius-sm);
+	overflow: hidden;
+	background: var(--dt-bg-tertiary);
+}
+
+.dt-embed-thumbnail img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+:where(discord-embed-description) {
+	display: block;
+	margin: 0;
+	font-size: 0.875rem;
+	line-height: 1.125rem;
+	white-space: pre-line;
+}
+
+:where(discord-embed-fields) {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	gap: 8px;
+	margin-top: 8px;
+}
+
+:where(discord-embed-field) {
+	grid-column: 1 / -1;
+	min-width: 0;
+	font-size: 0.875rem;
+	line-height: 1.125rem;
+}
+
+:where(discord-embed-field[inline]) {
+	grid-column: span 4;
+}
+
+discord-embed[thumbnail] :where(discord-embed-field[inline]),
+discord-embed[data-dt-thumbnail] :where(discord-embed-field[inline]) {
+	grid-column: span 6;
+}
+
+.dt-embed-field-title {
+	display: block;
+	margin: 0 0 2px;
+	font-weight: 600;
+	color: var(--dt-text-strong);
+}
+
+discord-embed-field:not([data-dt-ready]):not(:has(.dt-embed-field-title))::before {
+	content: attr(field-title);
+	display: block;
+	margin-bottom: 2px;
+	font-weight: 600;
+	color: var(--dt-text-strong);
+}
+
+.dt-embed-image {
+	display: block;
+	margin-top: 16px;
+}
+
+.dt-embed-image img,
+.dt-embed-image video {
+	display: block;
+	max-width: 100%;
+	max-height: 300px;
+	border-radius: var(--dt-radius-sm);
+	object-fit: contain;
+}
+
+:where(discord-embed-footer) {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-top: 8px;
+	font-size: 0.75rem;
+	line-height: 1rem;
+	color: var(--dt-text-muted);
+}
+
+discord-embed-footer:empty::before {
+	content: attr(footer);
+}
+
+.dt-embed-footer-icon {
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	overflow: hidden;
+	background: var(--dt-bg-tertiary);
+}
+
+.dt-embed-footer-icon img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.dt-embed-footer-sep {
+	display: inline-block;
+	width: 4px;
+	height: 4px;
+	border-radius: 50%;
+	background: var(--dt-text-muted);
+	opacity: 0.6;
+}
+
+/* ==========================================================================
+   12. ATTACHMENTS
+   ========================================================================== */
+
+:where(discord-attachments) {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 8px;
+	margin-top: 8px;
+	max-width: 550px;
+}
+
+:where(discord-attachments:empty) {
+	display: none;
+}
+
+/* --- images ------------------------------------------------------------- */
+
+:where(discord-image-attachment) {
+	position: relative;
+	display: block;
+	max-width: 100%;
+	border-radius: var(--dt-radius-md);
+	overflow: hidden;
+	line-height: 0;
+}
+
+:where(discord-image-attachment) img {
+	display: block;
+	max-width: 100%;
+	max-height: 350px;
+	border-radius: var(--dt-radius-md);
+	object-fit: contain;
+	cursor: pointer;
+}
+
+:where(discord-image-attachment) a {
+	display: block;
+}
+
+/* Attribute-only form, filled in by JS; visible placeholder if JS never runs. */
+discord-image-attachment[url]:not([data-dt-ready]):not(:has(img)) {
+	min-width: 220px;
+	min-height: 120px;
+	border: 1px dashed var(--dt-border-strong);
+}
+
+/* --- spoiler-wrapped media --------------------------------------------- */
+
+discord-image-attachment[spoiler] img,
+discord-video-attachment[spoiler] video {
+	filter: blur(44px);
+	transition: filter var(--dt-transition);
+}
+
+discord-image-attachment[spoiler][data-dt-revealed] img,
+discord-video-attachment[spoiler][data-dt-revealed] video {
+	filter: none;
+}
+
+.dt-spoiler-overlay {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 0;
+	border-radius: var(--dt-radius-md);
+	background: rgba(0, 0, 0, 0.35);
+	color: #ffffff;
+	font-family: var(--dt-font);
+	font-size: 0.75rem;
+	font-weight: 700;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	cursor: pointer;
+}
+
+.dt-spoiler-overlay:hover {
+	background: rgba(0, 0, 0, 0.45);
+}
+
+discord-image-attachment[data-dt-revealed] > .dt-spoiler-overlay,
+discord-video-attachment[data-dt-revealed] > .dt-spoiler-overlay {
+	display: none;
+}
+
+/* --- files -------------------------------------------------------------- */
+
+:where(discord-file-attachment) {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	max-width: 420px;
+	padding: 12px;
+	border: 1px solid var(--dt-border);
+	border-radius: var(--dt-radius-md);
+	background: var(--dt-bg-secondary);
+}
+
+:where(discord-file-attachment) a {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	color: inherit;
+	text-decoration: none;
+}
+
+/* Attribute-only form: renders name and size with zero JavaScript. */
+discord-file-attachment:empty {
+	display: grid;
+	grid-template-columns: 30px minmax(0, 1fr);
+	align-content: center;
+	column-gap: 12px;
+}
+
+discord-file-attachment:empty::before {
+	grid-column: 1;
+	grid-row: 1 / span 2;
+	content: 'FILE';
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-modifier-hover);
+	color: var(--dt-text-muted);
+	font-size: 0.5625rem;
+	font-weight: 700;
+}
+
+discord-file-attachment[type]:empty::before {
+	content: attr(type);
+}
+
+discord-file-attachment:empty::after {
+	grid-column: 2;
+	content: attr(name) '\A' attr(bytes) ' ' attr(bytes-unit);
+	white-space: pre-line;
+	line-height: 1.25rem;
+}
+
+discord-file-attachment[bytes='']:empty::after,
+discord-file-attachment:not([bytes]):empty::after {
+	content: attr(name);
+}
+
+.dt-file-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-bg-modifier-hover);
+	color: var(--dt-text-muted);
+	font-size: 0.5625rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	flex: none;
+}
+
+.dt-file-meta {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.dt-file-name {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--dt-text-strong);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.dt-file-size {
+	font-size: 0.75rem;
+	color: var(--dt-text-muted);
+}
+
+/* --- audio / video ------------------------------------------------------ */
+
+:where(discord-audio-attachment) {
+	display: block;
+	width: 100%;
+	max-width: 420px;
+}
+
+:where(discord-audio-attachment) audio {
+	display: block;
+	width: 100%;
+	max-width: 420px;
+	border-radius: var(--dt-radius-md);
+	outline: none;
+}
+
+:where(discord-video-attachment) {
+	position: relative;
+	display: block;
+	max-width: 100%;
+	border-radius: var(--dt-radius-md);
+	overflow: hidden;
+	background: #000000;
+	line-height: 0;
+}
+
+:where(discord-video-attachment) video {
+	display: block;
+	max-width: 100%;
+	max-height: 400px;
+	border-radius: var(--dt-radius-md);
+}
+
+:where(discord-video-attachment) video:focus-visible,
+:where(discord-audio-attachment) audio:focus-visible {
+	box-shadow: 0 0 0 2px var(--dt-focus-ring);
+}
+
+/* ==========================================================================
+   13. REACTIONS
+   ========================================================================== */
+
+:where(discord-reactions) {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 4px;
+	margin-top: 8px;
+}
+
+:where(discord-reactions:empty) {
+	display: none;
+}
+
+:where(discord-reaction) {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 36px;
+	height: 24px;
+	padding: 2px 6px;
+	border: 1px solid var(--dt-reaction-border);
+	border-radius: var(--dt-radius-md);
+	background: var(--dt-reaction-bg);
+	color: var(--dt-text-normal);
+	font-family: var(--dt-font);
+	font-size: 0.875rem;
+	line-height: 1;
+	cursor: pointer;
+	-webkit-user-select: none;
+	user-select: none;
+	transition:
+		background var(--dt-transition),
+		border-color var(--dt-transition);
+}
+
+:where(discord-reaction:hover) {
+	border-color: var(--dt-border-strong);
+}
+
+:where(discord-reaction[reacted]) {
+	background: var(--dt-reaction-bg-reacted);
+	border-color: var(--dt-reaction-border-reacted);
+	color: var(--dt-reaction-text-reacted);
+}
+
+/* Attribute-only form: emoji and count straight from attributes. */
+discord-reaction:not([data-dt-ready])::before {
+	content: attr(emoji);
+	font-size: 1rem;
+	line-height: 1;
+}
+
+discord-reaction[emoji^='http']:not([data-dt-ready])::before,
+discord-reaction[emoji^='/']:not([data-dt-ready])::before,
+discord-reaction[emoji^='./']:not([data-dt-ready])::before,
+discord-reaction:not([emoji]):not([data-dt-ready])::before {
+	content: none;
+}
+
+discord-reaction:not([data-dt-ready])::after {
+	content: attr(count);
+	font-size: 0.875rem;
+	font-weight: 500;
+	line-height: 1;
+}
+
+discord-reaction:not([count]):not([data-dt-ready])::after,
+discord-reaction[count='1']:not([data-dt-ready])::after {
+	content: none;
+}
+
+:where(discord-reaction) img,
+.dt-reaction-emoji {
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
+	object-fit: contain;
+	vertical-align: middle;
+}
+
+.dt-reaction-count {
+	font-size: 0.75rem;
+	font-weight: 600;
+	line-height: 1;
+	color: inherit;
+}
+
+/* ==========================================================================
+   14. ACTION ROW + BUTTONS
+   ========================================================================== */
+
+:where(discord-action-row) {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin-top: 8px;
+	max-width: 600px;
+}
+
+:where(discord-button) {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	min-height: 32px;
+	padding: 2px 16px;
+	border: 0;
+	border-radius: var(--dt-radius-sm);
+	background: var(--dt-button-secondary);
+	color: #ffffff;
+	font-family: var(--dt-font);
+	font-size: 0.875rem;
+	font-weight: 500;
+	line-height: 1rem;
+	white-space: nowrap;
+	cursor: pointer;
+	transition: background var(--dt-transition);
+}
+
+:where(discord-button):hover {
+	background: var(--dt-button-secondary-hover);
+}
+
+:where(discord-button[type='primary']) {
+	background: var(--dt-button-primary);
+}
+
+:where(discord-button[type='primary']):hover {
+	background: var(--dt-button-primary-hover);
+}
+
+:where(discord-button[type='success']) {
+	background: var(--dt-button-success);
+}
+
+:where(discord-button[type='destructive'], discord-button[type='danger']) {
+	background: var(--dt-button-danger);
+}
+
+:where(discord-button[type='link']) {
+	background: var(--dt-button-link);
+}
+
+:where(discord-button[disabled]) {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.dt-button-emoji {
+	width: 1rem;
+	height: 1rem;
+	object-fit: contain;
+}
+
+.dt-button-link-icon {
+	width: 12px;
+	height: 12px;
+	opacity: 0.9;
+}
+
+/* Verified author tag (used inside author info) */
+:where(discord-verified-author-tag) {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 15px;
+	height: 15px;
+	border-radius: 50%;
+	background: var(--dt-brand);
+	color: var(--dt-text-on-brand);
+	font-size: 9px;
+	vertical-align: -2px;
+}
+
+:where(discord-verified-author-tag)::after {
+	content: '\2713';
+}
+
+/* ==========================================================================
+   15. A11Y + PRINT
+   ========================================================================== */
+
+.dt-divider {
+	height: 1px;
+	margin: 8px 0;
+	border: 0;
+	background: var(--dt-divider);
+}
+
+.dt-sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+:where(discord-message, discord-embed, discord-attachments, discord-reactions) :focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 2px var(--dt-focus-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:where(discord-spoiler),
+	:where(discord-reaction),
+	:where(discord-button),
+	discord-image-attachment img {
+		transition: none;
+	}
+}
+
+@media (max-width: 480px) {
+	:where(discord-messages) {
+		--dt-msg-padding-right: 16px;
+	}
+
+	:where(discord-embed),
+	:where(discord-attachments) {
+		max-width: 100%;
+	}
+}
+
+@media print {
+	:root,
+	discord-messages,
+	discord-message {
+		--dt-bg-primary: #ffffff;
+		--dt-bg-secondary: #f2f3f5;
+		--dt-bg-embed: #f2f3f5;
+		--dt-bg-code: #f2f3f5;
+		--dt-text-normal: #000000;
+		--dt-text-strong: #000000;
+		--dt-text-muted: #444444;
+	}
+
+	:where(discord-spoiler) {
+		background: none;
+		color: inherit;
+	}
+
+	.dt-copy,
+	.dt-spoiler-overlay {
+		display: none !important;
+	}
+}