discord.js-html-transcript 4.0.0

package/dist/generator/renderers/components/Container.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare function DiscordContainer({ children, accentColor }: {
+    children: React.ReactNode;
+    accentColor?: string;
+}): React.JSX.Element;
+export default DiscordContainer;

package/dist/generator/renderers/components/Container.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function DiscordContainer({ children, accentColor }) {
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            width: '100%',
+            maxWidth: '628px',
+            flexDirection: 'column',
+            backgroundColor: '#111214',
+            padding: '16px',
+            border: '1px solid rgba(255, 255, 255, 0.08)',
+            borderLeft: `4px solid ${accentColor !== null && accentColor !== void 0 ? accentColor : '#4f545c'}`,
+            marginTop: '2px',
+            marginBottom: '2px',
+            borderRadius: '8px',
+            gap: '8px',
+            boxSizing: 'border-box',
+            minWidth: 0,
+        } }, children));
+}
+exports.default = DiscordContainer;
+//# sourceMappingURL=Container.js.map

package/dist/generator/renderers/components/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../../src/generator/renderers/components/Container.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAuD;IACtG,OAAO,CACL,uCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,OAAO;YACjB,aAAa,EAAE,QAAQ;YACvB,eAAe,EAAE,SAAS;YAC1B,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,qCAAqC;YAC7C,UAAU,EAAE,aAAa,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,SAAS,EAAE;YACnD,SAAS,EAAE,KAAK;YAChB,YAAY,EAAE,KAAK;YACnB,YAAY,EAAE,KAAK;YACnB,GAAG,EAAE,KAAK;YACV,SAAS,EAAE,YAAY;YACvB,QAAQ,EAAE,CAAC;SACZ,IAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,gBAAgB,CAAC"}

package/dist/generator/renderers/components/Media Gallery.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { MediaGalleryComponent } from 'discord.js';
+import type { RenderMessageContext } from '../..';
+declare function DiscordMediaGallery({ component, context, }: {
+    component: MediaGalleryComponent;
+    context: RenderMessageContext;
+}): Promise<React.JSX.Element | null>;
+export default DiscordMediaGallery;

package/dist/generator/renderers/components/Media Gallery.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("./utils");
+async function DiscordMediaGallery({ component, context, }) {
+    if (!component.items || component.items.length === 0) {
+        return null;
+    }
+    const count = component.items.length;
+    const imagesToShow = await Promise.all(component.items.slice(0, 10).map(async (item) => {
+        var _a;
+        return (Object.assign(Object.assign({}, item), { media: Object.assign(Object.assign({}, item.media), { url: (_a = (await context.callbacks.resolveTranscriptAssetUrl({
+                    kind: 'component-image',
+                    url: item.media.url,
+                }))) !== null && _a !== void 0 ? _a : item.media.url }) }));
+    }));
+    const hasMore = component.items.length > 10;
+    return (react_1.default.createElement("div", { style: (0, utils_1.getGalleryLayout)(count) }, imagesToShow.map((media, idx) => (react_1.default.createElement("div", { key: idx, style: (0, utils_1.getImageStyle)(idx, count) },
+        react_1.default.createElement("img", { src: media.media.url, alt: media.data.description || 'Media content', style: {
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+            } }),
+        hasMore && idx === imagesToShow.length - 1 && (react_1.default.createElement("div", { style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                color: 'white',
+                fontSize: '20px',
+                fontWeight: 'bold',
+            } },
+            "+",
+            component.items.length - 10)))))));
+}
+exports.default = DiscordMediaGallery;
+//# sourceMappingURL=Media%20Gallery.js.map

package/dist/generator/renderers/components/Media Gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media Gallery.js","sourceRoot":"","sources":["../../../../src/generator/renderers/components/Media Gallery.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAG1B,mCAA0D;AAE1D,KAAK,UAAU,mBAAmB,CAAC,EACjC,SAAS,EACT,OAAO,GAIR;IACC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;IACrC,MAAM,YAAY,GAAG,MAAM,OAAO,CAAC,GAAG,CACpC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;;QAAC,OAAA,iCAC5C,IAAI,KACP,KAAK,kCACA,IAAI,CAAC,KAAK,KACb,GAAG,EACD,MAAA,CAAC,MAAM,OAAO,CAAC,SAAS,CAAC,yBAAyB,CAAC;oBACjD,IAAI,EAAE,iBAAiB;oBACvB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG;iBACpB,CAAC,CAAC,mCAAI,IAAI,CAAC,KAAK,CAAC,GAAG,OAEzB,CAAA;KAAA,CAAC,CACJ,CAAC;IACF,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;IAE5C,OAAO,CACL,uCAAK,KAAK,EAAE,IAAA,wBAAgB,EAAC,KAAK,CAAC,IAChC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,uCAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAA,qBAAa,EAAC,GAAG,EAAE,KAAK,CAAC;QAC7C,uCACE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,EACpB,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW,IAAI,eAAe,EAC9C,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,OAAO;aACnB,GACD;QACD,OAAO,IAAI,GAAG,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC7C,uCACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,eAAe,EAAE,oBAAoB;gBACrC,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,MAAM;aACnB;;YAEC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CACzB,CACP,CACG,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,mBAAmB,CAAC"}

package/dist/generator/renderers/components/Select Menu.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type MessageActionRowComponent, ComponentType } from 'discord.js';
+import type { RenderMessageContext } from '../..';
+declare function DiscordSelectMenu({ component, context, }: {
+    component: Exclude<MessageActionRowComponent, {
+        type: ComponentType.Button;
+    }>;
+    context: RenderMessageContext;
+}): Promise<React.JSX.Element>;
+export default DiscordSelectMenu;

package/dist/generator/renderers/components/Select Menu.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const discord_js_1 = require("discord.js");
+const utils_1 = require("../../../utils/utils");
+const utils_2 = require("./utils");
+async function DiscordSelectMenu({ component, context, }) {
+    const isStringSelect = component.type === discord_js_1.ComponentType.StringSelect;
+    const placeholder = component.placeholder || (0, utils_2.getSelectTypeLabel)(component.type);
+    const options = isStringSelect && component.options
+        ? await Promise.all(component.options.map(async (option) => {
+            var _a;
+            return (Object.assign(Object.assign({}, option), { emojiUrl: option.emoji
+                    ? ((_a = (await context.callbacks.resolveTranscriptAssetUrl({
+                        kind: 'emoji',
+                        url: (0, utils_1.parseDiscordEmoji)(option.emoji),
+                    }))) !== null && _a !== void 0 ? _a : (0, utils_1.parseDiscordEmoji)(option.emoji))
+                    : undefined }));
+        }))
+        : [];
+    return (react_1.default.createElement("div", { className: "discord-select-menu" },
+        react_1.default.createElement("div", { className: "discord-select-menu-label" }, placeholder),
+        react_1.default.createElement("div", { className: "discord-select-menu-chevron", "aria-hidden": "true" },
+            react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24" },
+                react_1.default.createElement("path", { fill: "currentColor", d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }))),
+        isStringSelect && options.length > 0 && (react_1.default.createElement("div", { className: "discord-select-menu-options" }, options.map((option, idx) => (react_1.default.createElement("div", { key: idx, className: "discord-select-menu-option" },
+            option.emojiUrl && react_1.default.createElement("img", { src: option.emojiUrl, alt: "", className: "discord-select-menu-option-emoji" }),
+            react_1.default.createElement("span", null, option.label))))))));
+}
+exports.default = DiscordSelectMenu;
+//# sourceMappingURL=Select%20Menu.js.map

package/dist/generator/renderers/components/Select Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select Menu.js","sourceRoot":"","sources":["../../../../src/generator/renderers/components/Select Menu.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,2CAA2E;AAE3E,gDAAyD;AACzD,mCAA6C;AAE7C,KAAK,UAAU,iBAAiB,CAAC,EAC/B,SAAS,EACT,OAAO,GAIR;IACC,MAAM,cAAc,GAAG,SAAS,CAAC,IAAI,KAAK,0BAAa,CAAC,YAAY,CAAC;IACrE,MAAM,WAAW,GAAG,SAAS,CAAC,WAAW,IAAI,IAAA,0BAAkB,EAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAChF,MAAM,OAAO,GACX,cAAc,IAAI,SAAS,CAAC,OAAO;QACjC,CAAC,CAAC,MAAM,OAAO,CAAC,GAAG,CACf,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE;;YAAC,OAAA,iCACnC,MAAM,KACT,QAAQ,EAAE,MAAM,CAAC,KAAK;oBACpB,CAAC,CAAC,CAAC,MAAA,CAAC,MAAM,OAAO,CAAC,SAAS,CAAC,yBAAyB,CAAC;wBAClD,IAAI,EAAE,OAAO;wBACb,GAAG,EAAE,IAAA,yBAAiB,EAAC,MAAM,CAAC,KAAK,CAAC;qBACrC,CAAC,CAAC,mCAAI,IAAA,yBAAiB,EAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBACzC,CAAC,CAAC,SAAS,IACb,CAAA;SAAA,CAAC,CACJ;QACH,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACL,uCAAK,SAAS,EAAC,qBAAqB;QAClC,uCAAK,SAAS,EAAC,2BAA2B,IAAE,WAAW,CAAO;QAC9D,uCAAK,SAAS,EAAC,6BAA6B,iBAAa,MAAM;YAC7D,uCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;gBAC7C,wCAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,8CAA8C,GAAG,CACzE,CACF;QACL,cAAc,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACvC,uCAAK,SAAS,EAAC,6BAA6B,IACzC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5B,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,4BAA4B;YAClD,MAAM,CAAC,QAAQ,IAAI,uCAAK,GAAG,EAAE,MAAM,CAAC,QAAQ,EAAE,GAAG,EAAC,EAAE,EAAC,SAAS,EAAC,kCAAkC,GAAG;YACrG,4CAAO,MAAM,CAAC,KAAK,CAAQ,CACvB,CACP,CAAC,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,iBAAiB,CAAC"}

package/dist/generator/renderers/components/Spacing.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SeparatorSpacingSize } from 'discord.js';
+declare function DiscordSeparator({ divider, spacing }: {
+    divider: boolean;
+    spacing: SeparatorSpacingSize;
+}): React.JSX.Element;
+export default DiscordSeparator;

package/dist/generator/renderers/components/Spacing.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const discord_js_1 = require("discord.js");
+function DiscordSeparator({ divider, spacing }) {
+    return (react_1.default.createElement("div", { style: {
+            width: '100%',
+            height: divider ? '1px' : '0px',
+            backgroundColor: '#4f5359',
+            margin: spacing === discord_js_1.SeparatorSpacingSize.Large ? '8px 0' : '0',
+        } }));
+}
+exports.default = DiscordSeparator;
+//# sourceMappingURL=Spacing.js.map

package/dist/generator/renderers/components/Spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.js","sourceRoot":"","sources":["../../../../src/generator/renderers/components/Spacing.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,2CAAkD;AAElD,SAAS,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAuD;IACjG,OAAO,CACL,uCACE,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YAC/B,eAAe,EAAE,SAAS;YAC1B,MAAM,EAAE,OAAO,KAAK,iCAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;SAC/D,GACD,CACH,CAAC;AACJ,CAAC;AAED,kBAAe,gBAAgB,CAAC"}

package/dist/generator/renderers/components/Thumbnail.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { RenderMessageContext } from '../..';
+declare function DiscordThumbnail({ url, context }: {
+    url: string;
+    context: RenderMessageContext;
+}): Promise<React.JSX.Element>;
+export default DiscordThumbnail;

package/dist/generator/renderers/components/Thumbnail.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+async function DiscordThumbnail({ url, context }) {
+    var _a;
+    const resolvedUrl = (_a = (await context.callbacks.resolveTranscriptAssetUrl({
+        kind: 'component-thumbnail',
+        url,
+    }))) !== null && _a !== void 0 ? _a : url;
+    return (react_1.default.createElement("img", { src: resolvedUrl, alt: "Thumbnail", style: {
+            width: '85px',
+            height: '85px',
+            objectFit: 'cover',
+            borderRadius: '8px',
+        } }));
+}
+exports.default = DiscordThumbnail;
+//# sourceMappingURL=Thumbnail.js.map

package/dist/generator/renderers/components/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../../src/generator/renderers/components/Thumbnail.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAG1B,KAAK,UAAU,gBAAgB,CAAC,EAAE,GAAG,EAAE,OAAO,EAAkD;;IAC9F,MAAM,WAAW,GACf,MAAA,CAAC,MAAM,OAAO,CAAC,SAAS,CAAC,yBAAyB,CAAC;QACjD,IAAI,EAAE,qBAAqB;QAC3B,GAAG;KACJ,CAAC,CAAC,mCAAI,GAAG,CAAC;IAEb,OAAO,CACL,uCACE,GAAG,EAAE,WAAW,EAChB,GAAG,EAAC,WAAW,EACf,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,OAAO;YAClB,YAAY,EAAE,KAAK;SACpB,GACD,CACH,CAAC;AACJ,CAAC;AAED,kBAAe,gBAAgB,CAAC"}

package/dist/generator/renderers/components/poll.d.ts

@@ -0,0 +1,7 @@
+import type { Poll } from 'discord.js';
+import React from 'react';
+import type { RenderMessageContext } from '../..';
+export default function DiscordPoll({ poll, context }: {
+    poll: Poll;
+    context: RenderMessageContext;
+}): Promise<React.JSX.Element | null>;

package/dist/generator/renderers/components/poll.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DiscordPoll;
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../../utils/utils");
+async function DiscordPoll({ poll, context }) {
+    if (!poll)
+        return null;
+    const totalVotes = poll.answers.reduce((acc, answer) => acc + (answer.voteCount || 0), 0);
+    const isFinalized = poll.resultsFinalized;
+    const answers = await Promise.all(Array.from(poll.answers.values()).map(async (answer) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (Object.assign(Object.assign({}, answer), { emoji: answer.emoji, emojiUrl: ((_a = answer.emoji) === null || _a === void 0 ? void 0 : _a.id)
+                ? ((_d = (await context.callbacks.resolveTranscriptAssetUrl({
+                    kind: 'emoji',
+                    url: (0, utils_1.parseDiscordEmoji)({
+                        id: answer.emoji.id,
+                        name: (_b = answer.emoji.name) !== null && _b !== void 0 ? _b : '',
+                        animated: (_c = answer.emoji.animated) !== null && _c !== void 0 ? _c : false,
+                    }),
+                }))) !== null && _d !== void 0 ? _d : (0, utils_1.parseDiscordEmoji)({
+                    id: answer.emoji.id,
+                    name: (_e = answer.emoji.name) !== null && _e !== void 0 ? _e : '',
+                    animated: (_f = answer.emoji.animated) !== null && _f !== void 0 ? _f : false,
+                }))
+                : undefined }));
+    }));
+    // Calculate time remaining
+    const getTimeLeft = () => {
+        if (!poll.expiresAt)
+            return null;
+        const now = new Date();
+        const diff = poll.expiresAt.getTime() - now.getTime();
+        if (diff <= 0)
+            return 'Poll ended';
+        const hours = Math.floor(diff / (1000 * 60 * 60));
+        const days = Math.floor(hours / 24);
+        if (days > 0)
+            return `${days}d left`;
+        return `${hours}h left`;
+    };
+    const timeLeft = getTimeLeft();
+    return (react_1.default.createElement("div", { className: "discord-poll", slot: "attachments" },
+        react_1.default.createElement("div", { className: "discord-poll-header" },
+            react_1.default.createElement("div", { className: "discord-poll-question" },
+                react_1.default.createElement("strong", null, poll.question.text)),
+            react_1.default.createElement("div", { className: "discord-poll-subtitle" }, poll.allowMultiselect ? 'Select one or more answers' : 'Select one answer')),
+        react_1.default.createElement("div", { className: "discord-poll-answers" }, answers.map((answer, i) => {
+            var _a;
+            const voteCount = answer.voteCount || 0;
+            const percentage = totalVotes > 0 ? Math.round((voteCount / totalVotes) * 100) : 0;
+            return (react_1.default.createElement("div", { className: `discord-poll-answer ${isFinalized ? 'finalized' : ''}`, key: i },
+                isFinalized && react_1.default.createElement("div", { className: "discord-poll-bar", style: { width: `${percentage}%` } }),
+                react_1.default.createElement("div", { className: "discord-poll-content" },
+                    answer.emoji ? (react_1.default.createElement("span", { className: "discord-poll-emoji" }, answer.emojiUrl ? react_1.default.createElement("img", { src: answer.emojiUrl, alt: (_a = answer.emoji.name) !== null && _a !== void 0 ? _a : '' }) : answer.emoji.name)) : null,
+                    react_1.default.createElement("span", { className: "discord-poll-text" }, answer.text),
+                    isFinalized ? (react_1.default.createElement("span", { className: "discord-poll-votes" },
+                        percentage,
+                        "% (",
+                        voteCount,
+                        ")")) : (react_1.default.createElement("span", { className: "discord-poll-radio" },
+                        react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" },
+                            react_1.default.createElement("circle", { cx: "10", cy: "10", r: "8.5", fill: "none", stroke: "#4f545c", strokeWidth: "2" })))))));
+        })),
+        react_1.default.createElement("div", { className: "discord-poll-footer" },
+            react_1.default.createElement("span", { className: "discord-poll-footer-left" },
+                totalVotes,
+                " vote",
+                totalVotes !== 1 ? 's' : '',
+                timeLeft ? ` • ${timeLeft}` : ''),
+            react_1.default.createElement("span", { className: "discord-poll-footer-right" }, !isFinalized && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "discord-poll-show-results" }, "Show results"),
+                react_1.default.createElement("span", { className: "discord-poll-vote-btn" }, "Vote")))))));
+}
+//# sourceMappingURL=poll.js.map

package/dist/generator/renderers/components/poll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"poll.js","sourceRoot":"","sources":["../../../../src/generator/renderers/components/poll.tsx"],"names":[],"mappings":"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"}

package/dist/generator/renderers/components/section/Section.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ButtonComponent, ThumbnailComponent } from 'discord.js';
+import type { RenderMessageContext } from '../../..';
+interface DiscordSectionProps {
+    children: React.ReactNode;
+    accessory?: ButtonComponent | ThumbnailComponent;
+    context: RenderMessageContext;
+    id: number;
+}
+declare function DiscordSection({ children, accessory, context, id }: DiscordSectionProps): React.JSX.Element;
+export default DiscordSection;

package/dist/generator/renderers/components/section/Section.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const components_1 = require("../../components");
+const SectionContent_1 = __importDefault(require("./SectionContent"));
+const SectionAccessory_1 = __importDefault(require("./SectionAccessory"));
+function DiscordSection({ children, accessory, context, id }) {
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            width: '100%',
+            maxWidth: '500px',
+        } },
+        react_1.default.createElement(SectionContent_1.default, null, children),
+        react_1.default.createElement(SectionAccessory_1.default, null, accessory && react_1.default.createElement(components_1.Component, { component: accessory, id: id, context: context }))));
+}
+exports.default = DiscordSection;
+//# sourceMappingURL=Section.js.map

package/dist/generator/renderers/components/section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../../src/generator/renderers/components/section/Section.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAG1B,iDAA6C;AAC7C,sEAA8C;AAC9C,0EAAkD;AASlD,SAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAuB;IAC/E,OAAO,CACL,uCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK;YACpB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,OAAO;SAClB;QAED,8BAAC,wBAAc,QAAE,QAAQ,CAAkB;QAC3C,8BAAC,0BAAgB,QAAE,SAAS,IAAI,8BAAC,sBAAS,IAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,GAAI,CAAoB,CAC7G,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,cAAc,CAAC"}

package/dist/generator/renderers/components/section/SectionAccessory.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SectionAccessoryProps {
+    children?: React.ReactNode;
+}
+declare function SectionAccessory({ children }: SectionAccessoryProps): React.JSX.Element | null;
+export default SectionAccessory;

package/dist/generator/renderers/components/section/SectionAccessory.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function SectionAccessory({ children }) {
+    if (!children)
+        return null;
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            width: 'fit-content',
+            flex: '0 0 auto',
+            marginLeft: '16px',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+        } }, children));
+}
+exports.default = SectionAccessory;
+//# sourceMappingURL=SectionAccessory.js.map

package/dist/generator/renderers/components/section/SectionAccessory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionAccessory.js","sourceRoot":"","sources":["../../../../../src/generator/renderers/components/section/SectionAccessory.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAM1B,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAyB;IAC3D,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,OAAO,CACL,uCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,aAAa;YACpB,IAAI,EAAE,UAAU;YAChB,UAAU,EAAE,MAAM;YAClB,cAAc,EAAE,UAAU;YAC1B,UAAU,EAAE,QAAQ;SACrB,IAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,gBAAgB,CAAC"}

package/dist/generator/renderers/components/section/SectionContent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SectionContentProps {
+    children: React.ReactNode;
+}
+declare function SectionContent({ children }: SectionContentProps): React.JSX.Element;
+export default SectionContent;

package/dist/generator/renderers/components/section/SectionContent.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function SectionContent({ children }) {
+    const items = react_1.default.Children.toArray(children);
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            minWidth: 0,
+            flex: '1 1 auto',
+        } }, items.map((child, index) => (react_1.default.createElement("div", { key: index, style: {
+            width: '100%',
+            minWidth: 0,
+        } }, child)))));
+}
+exports.default = SectionContent;
+//# sourceMappingURL=SectionContent.js.map

package/dist/generator/renderers/components/section/SectionContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContent.js","sourceRoot":"","sources":["../../../../../src/generator/renderers/components/section/SectionContent.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAM1B,SAAS,cAAc,CAAC,EAAE,QAAQ,EAAuB;IACvD,MAAM,KAAK,GAAG,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE/C,OAAO,CACL,uCACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE,UAAU;SACjB,IAEA,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,uCACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,CAAC;SACZ,IAEA,KAAK,CACF,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,cAAc,CAAC"}

package/dist/generator/renderers/components/styles.d.ts

@@ -0,0 +1,21 @@
+export declare const containerStyle: {
+    display: "grid";
+    gap: string;
+    width: string;
+    maxWidth: string;
+    borderRadius: string;
+    overflow: "hidden";
+};
+export declare const baseImageStyle: {
+    overflow: "hidden";
+    position: "relative";
+    background: string;
+};
+export declare const ButtonStyleMapping: {
+    readonly 1: "primary";
+    readonly 2: "secondary";
+    readonly 3: "success";
+    readonly 4: "destructive";
+    readonly 5: "link";
+};
+export declare const globalStyles = "\n  .discord-container {\n    display: grid;\n    gap: 4px;\n    width: 100%;\n    max-width: 500px;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n\n  .discord-base-image {\n    overflow: hidden;\n    position: relative;\n    background: #2b2d31;\n  }\n\n  .discord-action-row {\n    display: flex !important;\n    flex-wrap: wrap !important;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    max-width: 500px;\n  }\n\n  [slot=\"components\"] {\n    width: 100%;\n  }\n\n  .discord-button {\n    color: #ffffff !important;\n    padding: 0 14px;\n    border-radius: 8px;\n    text-decoration: none !important;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 14px;\n    font-weight: 500;\n    height: 34px;\n    min-height: 34px;\n    min-width: 78px;\n    cursor: pointer;\n    font-family: 'gg sans', 'Noto Sans', Whitney, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    text-align: center;\n    box-sizing: border-box;\n    border: 1px solid transparent;\n    outline: none;\n    transition: background-color 0.17s ease, border-color 0.17s ease, color 0.17s ease;\n    white-space: nowrap;\n    flex: 0 0 auto;\n    gap: 8px;\n    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);\n  }\n\n  .discord-button:hover {\n    text-decoration: none !important;\n  }\n\n  .discord-button-content,\n  .discord-button-launch {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .discord-button-content {\n    gap: 8px;\n  }\n\n  .discord-button-emoji {\n    width: 16px;\n    height: 16px;\n    flex-shrink: 0;\n  }\n\n  .discord-button-label {\n    line-height: 1;\n  }\n\n  .discord-button-launch {\n    color: inherit;\n    opacity: 0.9;\n  }\n\n  .discord-button:active {\n    transform: translateY(1px);\n  }\n\n  .discord-button-primary {\n    background-color: #5865f2;\n  }\n  .discord-button-primary:hover {\n    background-color: #4752c4;\n  }\n\n  .discord-button-secondary {\n    background-color: #4e5058;\n  }\n  .discord-button-secondary:hover {\n    background-color: #6d6f78;\n  }\n\n  .discord-button-success {\n    background-color: #248046;\n  }\n  .discord-button-success:hover {\n    background-color: #1a6334;\n  }\n\n  .discord-button-destructive {\n    background-color: #da373c;\n  }\n  .discord-button-destructive:hover {\n    background-color: #a12828;\n  }\n\n  .discord-button-link {\n    background-color: #2b2d31;\n    border-color: #3f4147;\n    color: #dbdee1 !important;\n    min-width: 0;\n  }\n  .discord-button-link:hover {\n    background-color: #35373c;\n    border-color: #4f545c;\n  }\n\n  .discord-select-menu {\n    position: relative;\n    width: 100%;\n    max-width: 500px;\n    min-width: 0;\n    height: 40px;\n    background-color: #1e1f22;\n    border-radius: 8px;\n    color: #dbdee1;\n    cursor: pointer;\n    font-family: 'gg sans', 'Noto Sans', Whitney, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    padding: 0 14px;\n    justify-content: space-between;\n    box-sizing: border-box;\n    border: 1px solid #3f4147;\n    transition: border-color 0.2s, background-color 0.2s;\n    flex: 1 1 auto;\n  }\n\n  .discord-select-menu:hover {\n    background-color: #232428;\n    border-color: #4f545c;\n  }\n\n  .discord-select-menu-label {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: #dbdee1;\n    font-weight: 500;\n  }\n\n  .discord-select-menu-chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    margin-left: 12px;\n    color: #b5bac1;\n  }\n\n  .discord-select-menu-options {\n    display: none;\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    width: 100%;\n    background-color: #2b2d31;\n    border-radius: 8px;\n    z-index: 10;\n    border: 1px solid #1e1f22;\n    max-height: 320px;\n    overflow-y: auto;\n    box-shadow: 0 8px 16px rgba(0,0,0,0.24);\n  }\n\n  .discord-select-menu-options.open {\n    display: block;\n  }\n\n  .discord-select-menu-option {\n    padding: 8px 12px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background-color 0.1s;\n    color: #dbdee1;\n  }\n\n  .discord-select-menu-option-emoji {\n    width: 18px;\n    height: 18px;\n    flex-shrink: 0;\n  }\n\n  .discord-select-menu-option:hover {\n    background-color: #3f4147;\n    color: #ffffff;\n  }\n\n  .discord-attachment-gallery {\n    width: 100%;\n    max-width: 610px;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n\n  .discord-attachment-gallery-item {\n    position: relative;\n    overflow: hidden;\n    background: #2b2d31;\n  }\n\n  .discord-attachment-gallery-image {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    cursor: zoom-in;\n  }\n\n  .discord-attachment-gallery-more {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(0, 0, 0, 0.7);\n    color: #ffffff;\n    font-size: 20px;\n    font-weight: 700;\n  }\n\n  .discord-message .discord-attachments > discord-attachment[type=\"file\"] {\n    display: block;\n    width: auto;\n    max-width: min(520px, 100%);\n  }\n\n  .discord-custom-file-base {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    max-width: min(520px, 100%);\n    min-width: 0;\n    justify-self: stretch; /* fixes the derockdev discord-attachments grid expanding */\n    padding: 16px;\n    background-color: #2b2d31;\n    border: 1px solid #1e1f22;\n    border-radius: 8px;\n    box-sizing: border-box;\n    gap: 16px;\n    margin-top: 4px;\n    margin-bottom: 4px;\n  }\n\n  .discord-custom-file-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .discord-custom-file-inner {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    min-width: 0;\n    gap: 2px;\n  }\n\n  .discord-custom-file-name {\n    color: #00a8fc;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.25;\n    text-decoration: none;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    display: block;\n  }\n\n  .discord-custom-file-name:hover {\n    text-decoration: underline;\n  }\n\n  .discord-custom-file-size {\n    color: #8da3b9;\n    font-size: 14px;\n    line-height: 1.25;\n  }\n\n  .discord-custom-file-download {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-left: 8px;\n    cursor: pointer;\n    color: #b5bac1;\n    transition: color 0.15s ease;\n  }\n\n  .discord-custom-file-download:hover {\n    color: #dbdee1;\n  }\n\n  .discord-custom-file-download svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  .discord-image-preview-overlay {\n    position: fixed;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    background: rgba(5, 5, 7, 0.88);\n    backdrop-filter: blur(8px);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.16s ease;\n    z-index: 9999;\n  }\n\n  .discord-image-preview-overlay.is-open {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .discord-image-preview-stage {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    max-width: min(100vw - 48px, 1440px);\n    max-height: min(100vh - 48px, 1100px);\n  }\n\n  .discord-image-preview-image {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    border-radius: 12px;\n    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);\n    background: #111214;\n  }\n\n  .discord-image-preview-close {\n    position: absolute;\n    top: 20px;\n    right: 20px;\n    width: 40px;\n    height: 40px;\n    border: 0;\n    border-radius: 999px;\n    background: rgba(32, 34, 37, 0.9);\n    color: #f2f3f5;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: background-color 0.16s ease, transform 0.16s ease;\n  }\n\n  .discord-image-preview-close:hover {\n    background: rgba(49, 51, 56, 0.96);\n  }\n\n  .discord-image-preview-close:active {\n    transform: scale(0.97);\n  }\n\n  .discord-transcript-header-bar {\n    position: sticky;\n    top: 0;\n    z-index: 9200;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    min-height: 48px;\n    padding: 8px 16px;\n    background: rgba(7, 7, 9, 0.96);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n    backdrop-filter: blur(16px);\n    box-sizing: border-box;\n  }\n\n  .discord-transcript-header-main {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n    flex: 1 1 auto;\n  }\n\n  .discord-transcript-header-server-icon {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    object-fit: cover;\n    flex: 0 0 auto;\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .discord-transcript-header-glyph,\n  .discord-transcript-header-avatar {\n    width: 24px;\n    height: 24px;\n    flex: 0 0 auto;\n  }\n\n  .discord-transcript-header-glyph {\n    color: #b5bac1;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .discord-transcript-header-glyph--hash {\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 1;\n    transform: translateY(-1px);\n  }\n\n  .discord-transcript-header-avatar {\n    border-radius: 50%;\n    object-fit: cover;\n    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .discord-transcript-header-copy {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    flex: 1 1 auto;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  .discord-transcript-header-title {\n    color: #f2f3f5;\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 1.2;\n    flex: 0 0 auto;\n  }\n\n  .discord-transcript-header-separator {\n    color: #4e5058;\n    flex: 0 0 auto;\n  }\n\n  .discord-transcript-header-topic {\n    color: #949ba4;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.2;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .discord-transcript-header-topic > * {\n    display: inline;\n  }\n\n  .discord-transcript-header-tools {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 12px;\n    flex: 0 1 auto;\n    min-width: 0;\n  }\n\n  .discord-transcript-header-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex: 0 0 auto;\n  }\n\n  .discord-transcript-header-tool {\n    width: 32px;\n    height: 32px;\n    border: 0;\n    border-radius: 8px;\n    background: transparent;\n    color: #b5bac1;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n    transition: background-color 0.16s ease, color 0.16s ease;\n  }\n\n  .discord-transcript-header-tool:hover {\n    background: rgba(255, 255, 255, 0.05);\n    color: #f2f3f5;\n  }\n\n  .discord-transcript-header-search-slot {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    min-width: 0;\n    flex: 0 1 auto;\n  }\n\n  .discord-transcript-header-search-slot .discord-transcript-search-shell {\n    position: static;\n    top: auto;\n    right: auto;\n    max-width: none;\n    align-items: center;\n  }\n\n  .discord-transcript-header-search-slot .discord-transcript-search {\n    position: relative;\n    overflow: visible;\n    transform-origin: center right;\n  }\n\n  .discord-transcript-header-search-slot .discord-transcript-search-bar {\n    box-shadow: none;\n  }\n\n  .discord-transcript-header-search-slot .discord-transcript-search-meta {\n    position: absolute;\n    top: calc(100% + 8px);\n    right: 0;\n    min-width: max-content;\n    padding: 8px 10px;\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 10px;\n    background: rgba(17, 18, 20, 0.98);\n    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);\n    backdrop-filter: blur(16px);\n  }\n\n  .discord-transcript-search-shell {\n    position: fixed;\n    top: calc(env(safe-area-inset-top) + 16px);\n    right: calc(env(safe-area-inset-right) + 16px);\n    z-index: 9500;\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-end;\n    gap: 0;\n    max-width: calc(100vw - 24px);\n  }\n\n  .discord-transcript-search-shell.is-open {\n    gap: 8px;\n  }\n\n  .discord-transcript-search-toggle {\n    width: 42px;\n    height: 42px;\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 12px;\n    background: rgba(17, 18, 20, 0.92);\n    color: #dbdee1;\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.3);\n    backdrop-filter: blur(14px);\n    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;\n  }\n\n  .discord-transcript-search-toggle:hover {\n    background: rgba(27, 28, 32, 0.96);\n    border-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .discord-transcript-search-toggle:active {\n    transform: translateY(1px);\n  }\n\n  .discord-transcript-search-shell.is-open .discord-transcript-search-toggle {\n    color: #ffffff;\n    border-color: rgba(88, 101, 242, 0.35);\n    background: rgba(36, 38, 43, 0.96);\n  }\n\n  .discord-transcript-search {\n    width: 0;\n    max-width: 0;\n    display: grid;\n    gap: 6px;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    box-shadow: none;\n    backdrop-filter: none;\n    box-sizing: border-box;\n    overflow: hidden;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-4px) scale(0.98);\n    transform-origin: top right;\n    pointer-events: none;\n    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease, width 0.16s ease, max-width 0.16s ease;\n  }\n\n  .discord-transcript-search-shell.is-open .discord-transcript-search {\n    width: min(248px, calc(100vw - 84px));\n    max-width: min(248px, calc(100vw - 84px));\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0) scale(1);\n    pointer-events: auto;\n  }\n\n  .discord-transcript-search-bar {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    min-width: 0;\n    height: 36px;\n    padding: 0 8px 0 12px;\n    border-radius: 8px;\n    border: 1px solid #2b2d31;\n    background: rgba(10, 11, 13, 0.98);\n    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);\n    box-sizing: border-box;\n    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;\n  }\n\n  .discord-transcript-search-bar:focus-within {\n    border-color: #3f4147;\n    box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.18), 0 12px 28px rgba(0, 0, 0, 0.24);\n    background: #070709;\n  }\n\n  .discord-transcript-search-input {\n    min-width: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    border-radius: 0;\n    border: 0;\n    background: transparent;\n    color: #f2f3f5;\n    font: inherit;\n    font-size: 14px;\n    outline: none;\n    box-sizing: border-box;\n  }\n\n  .discord-transcript-search-input::placeholder {\n    color: #949ba4;\n  }\n\n  .discord-transcript-search-submit {\n    width: 28px;\n    height: 28px;\n    border: 0;\n    border-radius: 999px;\n    background: transparent;\n    color: #aeb4bb;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    flex: 0 0 auto;\n    transition: background-color 0.16s ease, color 0.16s ease;\n  }\n\n  .discord-transcript-search-submit:hover {\n    background: rgba(255, 255, 255, 0.06);\n    color: #f2f3f5;\n  }\n\n  .discord-transcript-search-meta {\n    display: none;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n    min-width: 0;\n    padding: 0 2px;\n  }\n\n  .discord-transcript-search.has-query .discord-transcript-search-meta {\n    display: flex;\n  }\n\n  .discord-transcript-search-actions {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    flex: 0 0 auto;\n  }\n\n  .discord-transcript-search-count {\n    min-width: 0;\n    display: inline-flex;\n    align-items: center;\n    color: #b5bac1;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.2;\n    flex: 1 1 auto;\n  }\n\n  .discord-transcript-search-button {\n    height: 30px;\n    min-width: 30px;\n    padding: 0 8px;\n    border-radius: 8px;\n    border: 1px solid #2b2d31;\n    background: rgba(30, 31, 34, 0.92);\n    color: #c9ced6;\n    font: inherit;\n    font-size: 12px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;\n  }\n\n  .discord-transcript-search-button:hover:not(:disabled) {\n    background: #2b2d31;\n    border-color: #3f4147;\n  }\n\n  .discord-transcript-search-button:disabled {\n    cursor: default;\n    opacity: 0.45;\n  }\n\n  .discord-transcript-search-button--ghost {\n    color: #b5bac1;\n  }\n\n  .discord-transcript-search-hint {\n    display: none;\n  }\n\n  discord-message.discord-search-match {\n    background: rgba(88, 101, 242, 0.08);\n    border-radius: 8px;\n    transition: background-color 0.16s ease, box-shadow 0.16s ease;\n  }\n\n  discord-message.discord-search-match--active {\n    background: rgba(88, 101, 242, 0.14);\n    box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.55), 0 0 0 6px rgba(88, 101, 242, 0.12);\n  }\n\n  body[data-transcript-image-preview=\"true\"] discord-attachment[type=\"image\"] {\n    cursor: zoom-in;\n  }\n\n  body[data-transcript-image-preview=\"true\"] .discord-embed-image img,\n  body[data-transcript-image-preview=\"true\"] [slot=\"components\"] img:not(.discord-button-emoji):not(.discord-select-menu-option-emoji):not(.discord-server-tag-badge),\n  body[data-transcript-image-preview=\"true\"] .discord-container img:not(.discord-button-emoji):not(.discord-select-menu-option-emoji):not(.discord-server-tag-badge) {\n    cursor: zoom-in;\n  }\n\n  /* Background colors */\n  body,\n  .discord-dark-theme,\n  .discord-light-theme,\n  discord-messages,\n  .discord-messages {\n    background-color: #070709 !important;\n  }\n  .discord-message {\n    background-color: transparent !important;\n  }\n  .discord-message:hover {\n    background-color: #242428 !important;\n  }\n  .discord-message::selection,\n  .discord-message *::selection {\n    background-color: #242428;\n    color: inherit;\n  }\n  \n  /* Embed borders */\n  .discord-embed .discord-embed-wrapper,\n  [class*=\"discord-embed\"] [class*=\"discord-embed-wrapper\"],\n  discord-embed .discord-embed-wrapper,\n  discord-embed > .discord-embed > .discord-embed-wrapper {\n    border: 1px solid rgba(255, 255, 255, 0.06) !important;\n    border-radius: 4px !important;\n  }\n\n  /* APP badge */\n  .discord-application-tag[data-transcript-app-tag-kind=\"bot\"] {\n    font-size: 0px !important;\n    letter-spacing: 0 !important;\n  }\n  .discord-application-tag[data-transcript-app-tag-kind=\"bot\"]::after {\n    content: \"APP\";\n    font-size: 10px;\n    font-weight: 700;\n    line-height: 1;\n    vertical-align: middle;\n  }\n\n  /* Discord Server Tags */\n  .discord-server-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    margin-left: 6px;\n    padding: 2px 6px 2px 4px;\n    border-radius: 999px;\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    background: rgba(17, 18, 20, 0.55);\n    color: #dbdee1;\n    font-size: 10px;\n    font-weight: 700;\n    line-height: 1;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n  .discord-server-tag-badge {\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    object-fit: cover;\n    flex-shrink: 0;\n  }\n  .discord-server-tag-text {\n    letter-spacing: 0.02em;\n  }\n  .discord-message .discord-author-info .discord-author-role-icon {\n    border-radius: 4px;\n    object-fit: cover;\n  }\n  .discord-author-info .discord-server-tag + .discord-author-role-icon {\n    margin-left: 0.375rem;\n  }\n  .discord-replied-message .discord-author-role-icon {\n    width: 16px;\n    height: 16px;\n    margin-left: 4px;\n    border-radius: 4px;\n    object-fit: cover;\n    flex: 0 0 auto;\n  }\n  .discord-replied-message .discord-server-tag {\n    margin-left: 4px;\n    padding: 1px 5px 1px 3px;\n    font-size: 9px;\n  }\n  .discord-replied-message .discord-server-tag-badge {\n    width: 12px;\n    height: 12px;\n  }\n  .discord-light-theme .discord-server-tag {\n    border-color: rgba(116, 127, 141, 0.18);\n    background: rgba(116, 127, 141, 0.12);\n    color: #4f5660;\n  }\n\n  @media (min-width: 901px) {\n    .discord-transcript-search-toggle {\n      display: none;\n    }\n\n    .discord-transcript-search {\n      opacity: 1;\n      visibility: visible;\n      transform: none;\n      pointer-events: auto;\n      width: 240px;\n    }\n  }\n\n  /* Mention Highlight Colors */\n  .discord-message.discord-highlight-mention,\n  .discord-message.discord-highlight {\n    background-color: rgba(250, 166, 26, 0.1) !important;\n  }\n  .discord-message.discord-highlight::before,\n  .discord-message.discord-highlight-mention::before {\n    background-color: #faa61a !important;\n  }\n\n  /* Heading line-height fix */\n  .discord-message h1, .discord-message h2, .discord-message h3 {\n    line-height: normal !important;\n    margin-top: 16px !important;\n    margin-bottom: 8px !important;\n  }\n\n  /* Mobile responsive */\n  @media (max-width: 768px) {\n    html, body, .discord-messages {\n      max-width: 100vw;\n      overflow-x: clip;\n    }\n    \n    .discord-embed .discord-embed-wrapper,\n    [class*=\"discord-embed\"] [class*=\"discord-embed-wrapper\"],\n    discord-embed .discord-embed-wrapper {\n      max-width: calc(100vw - 32px) !important;\n    }\n\n    .discord-embed .discord-embed-media .discord-embed-video,\n    .discord-embed .discord-embed-image img,\n    .discord-embed .discord-embed-thumbnail img,\n    .discord-attachment,\n    discord-attachment,\n    .discord-attachment-generic,\n    .discord-attachment-generic-inner {\n      max-width: 100% !important;\n      height: auto !important;\n      min-width: 0 !important;\n    }\n\n    .discord-embed .discord-embed-wrapper .discord-embed-grid {\n      grid-template-columns: 1fr !important;\n      padding: 0.5rem !important;\n    }\n    \n    .discord-message {\n      padding-right: 12px !important;\n    }\n\n    .discord-action-row {\n      width: 100%;\n    }\n\n    .discord-select-menu {\n      width: 100%;\n      max-width: 100%;\n      flex-basis: 100%;\n    }\n\n    .discord-image-preview-overlay {\n      padding: 16px;\n    }\n\n    .discord-image-preview-close {\n      top: calc(env(safe-area-inset-top) + 14px);\n      right: calc(env(safe-area-inset-right) + 14px);\n    }\n\n    .discord-message .discord-author-info {\n      flex-wrap: wrap;\n      row-gap: 4px;\n    }\n\n    .discord-server-tag {\n      margin-left: 4px;\n      padding: 1px 5px 1px 3px;\n      font-size: 9px;\n    }\n\n    .discord-server-tag-badge {\n      width: 12px;\n      height: 12px;\n    }\n\n    .discord-message .discord-author-info .discord-author-role-icon {\n      width: 16px;\n      height: 16px;\n    }\n\n    .discord-transcript-header-bar {\n      gap: 10px;\n      padding: 8px 12px;\n    }\n\n    .discord-transcript-header-server-icon {\n      width: 23px;\n      height: 23px;\n    }\n\n    .discord-transcript-header-copy {\n      gap: 6px;\n    }\n\n    .discord-transcript-header-title {\n      font-size: 15px;\n    }\n\n    .discord-transcript-header-topic {\n      font-size: 13px;\n    }\n\n    .discord-transcript-header-actions {\n      gap: 2px;\n    }\n\n    .discord-transcript-header-tool {\n      width: 30px;\n      height: 30px;\n    }\n\n    .discord-transcript-header-tool--hide-mobile {\n      display: none;\n    }\n\n    .discord-transcript-search-shell {\n      top: calc(env(safe-area-inset-top) + 12px);\n      right: calc(env(safe-area-inset-right) + 12px);\n      align-items: flex-end;\n      gap: 8px;\n    }\n\n    .discord-transcript-header-search-slot .discord-transcript-search-shell {\n      top: auto;\n      right: auto;\n      align-items: center;\n      max-width: 100%;\n    }\n\n    .discord-transcript-search {\n      width: min(calc(100vw - 76px), 248px);\n    }\n\n    .discord-transcript-search-meta {\n      gap: 8px;\n      align-items: center;\n      flex-direction: row;\n    }\n\n    .discord-transcript-search-actions {\n      justify-content: flex-end;\n    }\n\n    .discord-transcript-search-count {\n      min-width: 0;\n    }\n\n    .discord-attachment-gallery {\n      max-width: calc(100vw - 32px);\n    }\n\n    .discord-message .discord-attachments > discord-attachment[type=\"file\"] {\n      width: min(100%, calc(100vw - 92px));\n      max-width: min(520px, calc(100vw - 92px));\n    }\n\n    .discord-attachment-generic {\n      width: min(100%, calc(100vw - 92px)) !important;\n      max-width: min(520px, calc(100vw - 92px)) !important;\n      padding: 10px 12px !important;\n    }\n\n    .discord-invite {\n      width: min(100%, calc(100vw - 92px));\n      max-width: min(432px, calc(100vw - 92px));\n      padding: 14px !important;\n    }\n\n    .discord-invite .discord-invite-root {\n      grid-template-columns: 50px minmax(0, 1fr);\n    }\n\n    .discord-invite .discord-invite-join {\n      grid-column: 1 / -1;\n      justify-self: stretch;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      max-width: 100%;\n      min-width: 0;\n      box-sizing: border-box !important;\n      margin-top: 10px;\n    }\n\n    .discord-invite .discord-invite-counts {\n      flex-wrap: wrap;\n      row-gap: 6px;\n    }\n\n    .discord-invite .discord-invite-header {\n      white-space: normal;\n      overflow: visible;\n      text-overflow: initial;\n    }\n\n    .discord-image-preview-stage {\n      max-width: calc(100vw - 32px);\n      max-height: calc(100vh - 32px);\n    }\n\n    .discord-voice-message {\n      width: min(100%, calc(100vw - 92px));\n      max-width: min(400px, calc(100vw - 92px));\n      padding: 8px 12px 8px 8px;\n      gap: 6px;\n    }\n\n    .discord-voice-waveform {\n      gap: 1px;\n    }\n\n    .discord-voice-waveform-bar {\n      width: 2px;\n      flex-basis: 2px;\n    }\n\n    .discord-voice-duration {\n      min-width: 28px;\n      font-size: 11px;\n    }\n\n    .discord-voice-speed {\n      padding: 2px 5px;\n      font-size: 11px;\n    }\n\n    .discord-voice-volume svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .discord-transcript-header-bar {\n      padding: 8px 10px;\n    }\n\n    .discord-transcript-header-server-icon,\n    .discord-transcript-header-glyph,\n    .discord-transcript-header-avatar {\n      width: 22px;\n      height: 22px;\n    }\n\n    .discord-transcript-header-topic,\n    .discord-transcript-header-separator {\n      display: none;\n    }\n\n    .discord-transcript-header-tools {\n      gap: 8px;\n    }\n\n    .discord-transcript-search-shell {\n      top: calc(env(safe-area-inset-top) + 10px);\n      right: calc(env(safe-area-inset-right) + 10px);\n      max-width: calc(100vw - 20px);\n    }\n\n    .discord-transcript-search-toggle {\n      width: 40px;\n      height: 40px;\n      border-radius: 11px;\n    }\n\n    .discord-transcript-search {\n      width: min(calc(100vw - 72px), 228px);\n    }\n\n    .discord-transcript-search-bar {\n      height: 38px;\n    }\n\n    .discord-invite {\n      width: min(100%, calc(100vw - 84px));\n      max-width: min(432px, calc(100vw - 84px));\n      padding: 12px !important;\n    }\n\n    .discord-message .discord-attachments > discord-attachment[type=\"file\"] {\n      width: min(100%, calc(100vw - 84px));\n      max-width: min(520px, calc(100vw - 84px));\n    }\n\n    .discord-attachment-generic {\n      width: min(100%, calc(100vw - 84px)) !important;\n      max-width: min(520px, calc(100vw - 84px)) !important;\n      gap: 8px;\n      padding: 10px !important;\n    }\n\n    .discord-attachment-generic-icon > svg {\n      width: 26px;\n    }\n\n    .discord-invite .discord-invite-icon {\n      width: 44px !important;\n      height: 44px !important;\n      margin-right: 0 !important;\n      border-radius: 14px !important;\n    }\n\n    .discord-invite .discord-invite-title {\n      font-size: 15px !important;\n    }\n\n    .discord-invite .discord-invite-counts {\n      font-size: 13px !important;\n    }\n\n    .discord-button {\n      max-width: 100%;\n    }\n\n    .discord-voice-message {\n      width: min(100%, calc(100vw - 84px));\n      max-width: min(400px, calc(100vw - 84px));\n      border-radius: 20px;\n    }\n\n    .discord-voice-play-button {\n      width: 30px;\n      height: 30px;\n      min-width: 30px;\n    }\n  }\n\n  /* Code blocks */\n  .discord-message .discord-message-body code {\n    background-color: #1e1f22 !important;\n    padding: 0.2em 0.4em !important;\n    border-radius: 4px !important;\n    font-size: 85% !important;\n  }\n  .discord-message .discord-message-body pre {\n    border: 1px solid #1e1f22 !important;\n    border-radius: 4px !important;\n  }\n  .discord-code-block-pre,\n  .discord-code-block-pre--multiline,\n  .discord-code-block-pre--multiline.hljs {\n    background-color: #1e1f22 !important;\n    border-color: #1a1b1e !important;\n  }\n  .discord-ansi-code-block {\n    margin: 0;\n  }\n  .discord-ansi-code-block .discord-ansi-code {\n    background: transparent !important;\n    color: #dcddde;\n    display: block;\n    font-size: inherit !important;\n    padding: 0 !important;\n    white-space: break-spaces;\n  }\n\n  /* Invite cards */\n  .discord-invite {\n    background-color: #2b2d31 !important;\n    border: 1px solid rgba(255, 255, 255, 0.06) !important;\n    border-radius: 8px !important;\n    width: min(432px, 100%);\n    max-width: min(432px, calc(100vw - 104px));\n    min-width: 0;\n    box-sizing: border-box;\n  }\n  .discord-invite .discord-invite-root {\n    display: grid !important;\n    grid-template-columns: 50px minmax(0, 1fr) auto;\n    gap: 12px;\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    box-sizing: border-box;\n  }\n  .discord-invite .discord-invite-info {\n    min-width: 0;\n  }\n  .discord-invite .discord-invite-title {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .discord-invite .discord-invite-counts {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    min-width: 0;\n  }\n  .discord-invite .discord-invite-count {\n    min-width: 0;\n  }\n  .discord-invite .discord-invite-header {\n    color: #b5bac1 !important;\n    text-transform: uppercase !important;\n    font-size: 12px !important;\n  }\n  .discord-invite .discord-invite-icon {\n    background-color: #1e1f22 !important;\n    border-radius: 16px !important;\n  }\n  .discord-invite .discord-invite-join {\n    background-color: #248046 !important;\n    border-radius: 4px !important;\n    font-size: 14px !important;\n    padding: 0 16px !important;\n    margin-left: 0 !important;\n    max-width: 100%;\n    box-sizing: border-box !important;\n  }\n  .discord-invite .discord-invite-join:hover {\n    background-color: #1a6334 !important;\n  }\n\n  /* Custom styling for Forwards */\n  .discord-forwarding-pill {\n    display: flex;\n    align-items: center;\n    color: #8b8e95;\n    margin-bottom: 4px;\n    font-size: 13px;\n    font-weight: 500;\n  }\n  .discord-forwarding-pill svg {\n    margin-right: 4px;\n  }\n\n  /* Custom styling for System Message Thread Previews */\n  .discord-thread-preview-container {\n    position: relative;\n    margin-left: 16px;\n    margin-top: 4px;\n    margin-bottom: 4px;\n  }\n  .discord-thread-preview-container::before {\n    content: '';\n    position: absolute;\n    top: -15px;\n    bottom: 50%;\n    left: -24px;\n    width: 24px;\n    border-left: 2px solid #4f545c;\n    border-bottom: 2px solid #4f545c;\n    border-bottom-left-radius: 6px;\n  }\n  .discord-thread-preview-box {\n    background-color: #2b2d31;\n    border: 1px solid #1e1f22;\n    border-radius: 8px;\n    padding: 12px;\n    max-width: 400px;\n  }\n  .discord-thread-preview-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 700;\n    color: #dbdee1;\n    margin-bottom: 4px;\n  }\n  .discord-thread-preview-header span {\n    font-size: 12px;\n    font-weight: 600;\n    color: #00a8fc;\n  }\n  .discord-thread-preview-message {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .discord-thread-preview-message img {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n  }\n  .discord-thread-preview-message span {\n    font-size: 13px;\n    color: #B5BAC1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .discord-thread-preview-message strong {\n    color: #dbdee1;\n    font-weight: 500;\n  }\n\n  /* Custom styling for Discord Polls */\n  .discord-poll {\n    border: 1px solid #3f4147;\n    border-radius: 8px;\n    padding: 16px;\n    margin-top: 8px;\n    max-width: 500px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  .discord-poll-header {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n  .discord-poll-question {\n    font-size: 16px;\n    font-weight: 700;\n    color: #f2f3f5;\n  }\n  .discord-poll-subtitle {\n    font-size: 12px;\n    color: #949ba4;\n    font-weight: 400;\n  }\n  .discord-poll-answers {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .discord-poll-answer {\n    position: relative;\n    background-color: #2b2d31;\n    border: 1px solid #3f4147;\n    border-radius: 8px;\n    overflow: hidden;\n    min-height: 44px;\n    cursor: pointer;\n    transition: border-color 0.15s ease;\n  }\n  .discord-poll-answer:hover {\n    border-color: #5865f2;\n  }\n  .discord-poll-answer.finalized {\n    cursor: default;\n    border-color: #3f4147;\n  }\n  .discord-poll-bar {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n    background-color: #5865f2;\n    opacity: 0.2;\n    border-radius: 7px;\n    transition: width 0.3s ease;\n  }\n  .discord-poll-content {\n    display: flex;\n    align-items: center;\n    padding: 0 16px;\n    width: 100%;\n    height: 44px;\n    z-index: 1;\n    position: relative;\n    gap: 8px;\n    box-sizing: border-box;\n  }\n  .discord-poll-emoji {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 22px;\n    height: 22px;\n    flex-shrink: 0;\n  }\n  .discord-poll-emoji img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n  .discord-poll-text {\n    flex-grow: 1;\n    font-size: 16px;\n    color: #dbdee1;\n    font-weight: 500;\n  }\n  .discord-poll-votes {\n    font-size: 13px;\n    color: #949ba4;\n    font-weight: 600;\n    flex-shrink: 0;\n  }\n  .discord-poll-radio {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0.6;\n  }\n  .discord-poll-footer {\n    font-size: 14px;\n    color: #949ba4;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  .discord-poll-footer-left {\n    font-size: 14px;\n    font-weight: 700;\n    color: #b5bac1;\n  }\n  .discord-poll-footer-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  .discord-poll-show-results {\n    color: #dbdee1;\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n  }\n  .discord-poll-show-results:hover {\n    text-decoration: underline;\n  }\n  .discord-poll-vote-btn {\n    background-color: #5865f2;\n    color: #ffffff;\n    font-size: 14px;\n    font-weight: 600;\n    padding: 6px 20px;\n    border-radius: 4px;\n    cursor: pointer;\n    user-select: none;\n  }\n  .discord-poll-vote-btn:hover {\n    background-color: #4752c4;\n  }\n\n  /* Custom styling for Voice Messages */\n  .discord-voice-message {\n    display: flex;\n    align-items: center;\n    background-color: #2b2d31;\n    border-radius: 22px;\n    padding: 8px 16px 8px 8px;\n    margin-top: 4px;\n    width: min(100%, 400px);\n    max-width: min(400px, 100%);\n    min-width: 0;\n    box-sizing: border-box;\n    overflow: hidden;\n    gap: 8px;\n  }\n  .discord-voice-play-button {\n    width: 32px;\n    height: 32px;\n    min-width: 32px;\n    border-radius: 50%;\n    background-color: #5865f2;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    flex-shrink: 0;\n  }\n  .discord-voice-waveform {\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    height: 24px;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n  }\n  .discord-voice-waveform-bar {\n    width: 3px;\n    flex: 0 0 3px;\n    min-height: 4px;\n    border-radius: 2px;\n    background-color: #5d5f6b;\n    transition: background-color 0.15s;\n  }\n  .discord-voice-duration {\n    font-size: 12px;\n    font-weight: 500;\n    color: #949ba4;\n    font-family: 'gg sans', 'Noto Sans', Whitney, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    white-space: nowrap;\n    min-width: 30px;\n  }\n  .discord-voice-speed {\n    background-color: #3f4147;\n    border-radius: 4px;\n    padding: 2px 6px;\n    font-size: 12px;\n    font-weight: 700;\n    color: #dbdee1;\n    cursor: pointer;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n  .discord-voice-volume {\n    color: #b5bac1;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    flex-shrink: 0;\n  }\n";