@polymorfa/ui 0.1.0-dev.20260922094209

package/dist/redaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"redaction.js","sourceRoot":"","sources":["../src/redaction.ts"],"names":[],"mappings":"AAAA,MAAM,QAAQ,GAAG,YAAY,CAAC;AAC9B,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC;IAC7B,eAAe;IACf,aAAa;IACb,aAAa;IACb,cAAc;IACd,OAAO;IACP,QAAQ;IACR,eAAe;IACf,UAAU;IACV,aAAa;IACb,SAAS;IACT,MAAM;CACP,CAAC,CAAC;AAEH,MAAM,UAAU,gBAAgB,CAAC,KAAc;IAC7C,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC7D,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,KAAK,CAAC;IAC9D,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QAC1C,GAAG;QACH,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;YACnC,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,GAAW;IAC/B,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AACrD,CAAC"}

package/dist/slots.d.ts

@@ -0,0 +1,24 @@
+import type { Appearance, ElementAppearance } from "./appearance.js";
+/**
+ * Stable names for every structural node the chat and template components
+ * render. React applies `appearance.elements[slot]` and `classNames[slot]` to
+ * the node and sets `data-slot`; Web Components add the kebab-case name to the
+ * node's `part` attribute.
+ */
+export declare const COMPONENT_SLOTS: readonly ["messageList", "message", "bubble", "messageMeta", "messageActions", "replyButton", "retryButton", "attachment", "replyQuote", "dateSeparator", "loadMore", "empty", "composer", "composerInput", "composerSend", "composerAttach", "composerToolbar", "emojiButton", "emojiPicker", "voiceButton", "recordingBar", "quickReplyMenu", "attachmentChip", "replyBanner", "drawer", "drawerHeader", "drawerTitle", "drawerClose", "templateBuilder", "field", "label", "input", "actions", "primaryButton", "button", "preview", "error", "inbox", "conversationList", "conversationSearch", "conversationItem", "avatar", "unreadBadge", "thread", "threadHeader", "backButton", "contactPanel", "connectButton", "sessionStatus", "callButton", "templateManager", "templateList", "templateItem"];
+export type ComponentSlot = (typeof COMPONENT_SLOTS)[number];
+/** Per-slot class names a component adds on top of the appearance. */
+export type SlotClassNames = Partial<Record<ComponentSlot, string>>;
+/**
+ * The CSS `part` name for a slot: `messageMeta` becomes `message-meta`. The
+ * `preview` slot uses `preview-panel`, since `preview` names the button.
+ */
+export declare function slotPartName(slot: ComponentSlot): string;
+/**
+ * Normalise `ElementAppearance.styles` to CSS property names. Keys may be
+ * camelCase (`backgroundColor`), kebab-case, or custom properties.
+ */
+export declare function slotStyleEntries(styles: ElementAppearance["styles"]): readonly (readonly [string, string])[];
+/** Class names for a slot: the base class, the appearance, then the prop. */
+export declare function slotClassName(appearance: Appearance, slot: ComponentSlot, base: string, classNames?: SlotClassNames): string;
+//# sourceMappingURL=slots.d.ts.map

package/dist/slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../src/slots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAErE;;;;;GAKG;AACH,eAAO,MAAM,eAAe,6wBAsDlB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,sEAAsE;AACtE,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;AAOpE;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,MAAM,CAIxD;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,iBAAiB,CAAC,QAAQ,CAAC,GAClC,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAWxC;AAED,6EAA6E;AAC7E,wBAAgB,aAAa,CAC3B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,aAAa,EACnB,IAAI,EAAE,MAAM,EACZ,UAAU,CAAC,EAAE,cAAc,GAC1B,MAAM,CAIR"}

package/dist/slots.js

@@ -0,0 +1,96 @@
+/**
+ * Stable names for every structural node the chat and template components
+ * render. React applies `appearance.elements[slot]` and `classNames[slot]` to
+ * the node and sets `data-slot`; Web Components add the kebab-case name to the
+ * node's `part` attribute.
+ */
+export const COMPONENT_SLOTS = [
+    "messageList",
+    "message",
+    "bubble",
+    "messageMeta",
+    "messageActions",
+    "replyButton",
+    "retryButton",
+    "attachment",
+    "replyQuote",
+    "dateSeparator",
+    "loadMore",
+    "empty",
+    "composer",
+    "composerInput",
+    "composerSend",
+    "composerAttach",
+    "composerToolbar",
+    "emojiButton",
+    "emojiPicker",
+    "voiceButton",
+    "recordingBar",
+    "quickReplyMenu",
+    "attachmentChip",
+    "replyBanner",
+    "drawer",
+    "drawerHeader",
+    "drawerTitle",
+    "drawerClose",
+    "templateBuilder",
+    "field",
+    "label",
+    "input",
+    "actions",
+    "primaryButton",
+    "button",
+    "preview",
+    "error",
+    "inbox",
+    "conversationList",
+    "conversationSearch",
+    "conversationItem",
+    "avatar",
+    "unreadBadge",
+    "thread",
+    "threadHeader",
+    "backButton",
+    "contactPanel",
+    "connectButton",
+    "sessionStatus",
+    "callButton",
+    "templateManager",
+    "templateList",
+    "templateItem",
+];
+const PART_NAME_OVERRIDES = {
+    // `preview` already names the template builder's Preview button.
+    preview: "preview-panel",
+};
+/**
+ * The CSS `part` name for a slot: `messageMeta` becomes `message-meta`. The
+ * `preview` slot uses `preview-panel`, since `preview` names the button.
+ */
+export function slotPartName(slot) {
+    const override = PART_NAME_OVERRIDES[slot];
+    if (override !== undefined)
+        return override;
+    return slot.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+/**
+ * Normalise `ElementAppearance.styles` to CSS property names. Keys may be
+ * camelCase (`backgroundColor`), kebab-case, or custom properties.
+ */
+export function slotStyleEntries(styles) {
+    if (styles === undefined)
+        return [];
+    return Object.entries(styles).map(([name, value]) => [
+        name.startsWith("--")
+            ? name
+            : name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`),
+        value,
+    ]);
+}
+/** Class names for a slot: the base class, the appearance, then the prop. */
+export function slotClassName(appearance, slot, base, classNames) {
+    return [base, appearance.elements[slot]?.className, classNames?.[slot]]
+        .filter((value) => value !== undefined && value !== "")
+        .join(" ");
+}
+//# sourceMappingURL=slots.js.map

package/dist/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../src/slots.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,aAAa;IACb,SAAS;IACT,QAAQ;IACR,aAAa;IACb,gBAAgB;IAChB,aAAa;IACb,aAAa;IACb,YAAY;IACZ,YAAY;IACZ,eAAe;IACf,UAAU;IACV,OAAO;IACP,UAAU;IACV,eAAe;IACf,cAAc;IACd,gBAAgB;IAChB,iBAAiB;IACjB,aAAa;IACb,aAAa;IACb,aAAa;IACb,cAAc;IACd,gBAAgB;IAChB,gBAAgB;IAChB,aAAa;IACb,QAAQ;IACR,cAAc;IACd,aAAa;IACb,aAAa;IACb,iBAAiB;IACjB,OAAO;IACP,OAAO;IACP,OAAO;IACP,SAAS;IACT,eAAe;IACf,QAAQ;IACR,SAAS;IACT,OAAO;IACP,OAAO;IACP,kBAAkB;IAClB,oBAAoB;IACpB,kBAAkB;IAClB,QAAQ;IACR,aAAa;IACb,QAAQ;IACR,cAAc;IACd,YAAY;IACZ,cAAc;IACd,eAAe;IACf,eAAe;IACf,YAAY;IACZ,iBAAiB;IACjB,cAAc;IACd,cAAc;CACN,CAAC;AAOX,MAAM,mBAAmB,GAA2C;IAClE,iEAAiE;IACjE,OAAO,EAAE,eAAe;CACzB,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,IAAmB;IAC9C,MAAM,QAAQ,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,QAAQ,CAAC;IAC5C,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,MAAM,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACxE,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAC9B,MAAmC;IAEnC,IAAI,MAAM,KAAK,SAAS;QAAE,OAAO,EAAE,CAAC;IACpC,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAC/B,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAChB;QACE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,MAAM,CAAC,WAAW,EAAE,EAAE,CAAC;QAClE,KAAK;KACG,CACb,CAAC;AACJ,CAAC;AAED,6EAA6E;AAC7E,MAAM,UAAU,aAAa,CAC3B,UAAsB,EACtB,IAAmB,EACnB,IAAY,EACZ,UAA2B;IAE3B,OAAO,CAAC,IAAI,EAAE,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC;SACpE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,CAAC;SACtD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Stylesheet shared by the chat and template surfaces of `@polymorfa/react`
+ * and `@polymorfa/elements`. Both render the same `pmfa-*` class names, so a
+ * host restyling one package gets the same result in the other.
+ *
+ * Colors come from the appearance variables. The dark palette applies to
+ * `.pmfa-dark` roots, and to `.pmfa-auto` roots when the system prefers dark;
+ * it reads `--pmfa-dark-color-*` first. Every rule sits in the `polymorfa`
+ * cascade layer, so unlayered host CSS wins without extra specificity.
+ */
+export declare const COMPONENT_STYLES = "\n@layer polymorfa {\n.pmfa {\n  --pmfa-c-bg: var(--pmfa-color-background, #ffffff);\n  --pmfa-c-fg: var(--pmfa-color-foreground, #17151f);\n  --pmfa-c-muted: var(--pmfa-color-muted, #6d6878);\n  --pmfa-c-border: var(--pmfa-color-border, #dedbe5);\n  --pmfa-c-primary: var(--pmfa-color-primary, #5b4bf7);\n  --pmfa-c-danger: var(--pmfa-color-danger, #c62828);\n  --pmfa-c-success: var(--pmfa-color-success, #18794e);\n  --pmfa-c-link: color-mix(in srgb, var(--pmfa-c-primary) 82%, var(--pmfa-c-fg));\n  --pmfa-c-surface: color-mix(in srgb, var(--pmfa-c-fg) 5%, var(--pmfa-c-bg));\n  --pmfa-c-in: var(--pmfa-c-bg);\n  --pmfa-c-out: var(--pmfa-c-primary);\n  --pmfa-c-on-out: #ffffff;\n  --pmfa-c-on-danger: #ffffff;\n  --pmfa-c-chat: color-mix(in srgb, var(--pmfa-c-fg) 4%, var(--pmfa-c-bg));\n  --pmfa-c-bubble-shadow: 0 1px 1px rgb(0 0 0 / 0.07), 0 0 0 1px color-mix(in srgb, var(--pmfa-c-fg) 5%, transparent);\n  --pmfa-r-s: var(--pmfa-radius-small, 6px);\n  --pmfa-r-m: var(--pmfa-radius-medium, 10px);\n  --pmfa-r-l: var(--pmfa-radius-large, 16px);\n  --pmfa-r-bubble: 18px;\n  --pmfa-s-s: var(--pmfa-spacing-small, 8px);\n  --pmfa-s-m: var(--pmfa-spacing-medium, 12px);\n  --pmfa-s-l: var(--pmfa-spacing-large, 20px);\n  box-sizing: border-box;\n  color: var(--pmfa-c-fg);\n  font-family: var(--pmfa-font-family, system-ui, sans-serif);\n  font-size: var(--pmfa-font-size-base, 16px);\n  line-height: 1.45;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: transparent;\n}\n.pmfa *, .pmfa *::before, .pmfa *::after { box-sizing: border-box; }\n.pmfa-dark {\n  --pmfa-c-bg: var(--pmfa-dark-color-background, #17161c);\n  --pmfa-c-fg: var(--pmfa-dark-color-foreground, #f1eff6);\n  --pmfa-c-muted: var(--pmfa-dark-color-muted, #aaa6b5);\n  --pmfa-c-border: var(--pmfa-dark-color-border, #363340);\n  --pmfa-c-primary: var(--pmfa-dark-color-primary, var(--pmfa-color-primary, #5b4bf7));\n  --pmfa-c-danger: var(--pmfa-dark-color-danger, #ff8a80);\n  --pmfa-c-success: var(--pmfa-dark-color-success, #4cc38a);\n  --pmfa-c-link: color-mix(in srgb, var(--pmfa-c-primary) 45%, #ffffff);\n  --pmfa-c-in: color-mix(in srgb, var(--pmfa-c-fg) 9%, var(--pmfa-c-bg));\n  --pmfa-c-chat: color-mix(in srgb, #000000 28%, var(--pmfa-c-bg));\n  --pmfa-c-bubble-shadow: none;\n  --pmfa-c-on-danger: #1a0b0b;\n  color-scheme: dark;\n}\n@media (prefers-color-scheme: dark) {\n  .pmfa-auto {\n    --pmfa-c-bg: var(--pmfa-dark-color-background, #17161c);\n    --pmfa-c-fg: var(--pmfa-dark-color-foreground, #f1eff6);\n    --pmfa-c-muted: var(--pmfa-dark-color-muted, #aaa6b5);\n    --pmfa-c-border: var(--pmfa-dark-color-border, #363340);\n    --pmfa-c-primary: var(--pmfa-dark-color-primary, var(--pmfa-color-primary, #5b4bf7));\n    --pmfa-c-danger: var(--pmfa-dark-color-danger, #ff8a80);\n    --pmfa-c-success: var(--pmfa-dark-color-success, #4cc38a);\n    --pmfa-c-link: color-mix(in srgb, var(--pmfa-c-primary) 45%, #ffffff);\n    --pmfa-c-in: color-mix(in srgb, var(--pmfa-c-fg) 9%, var(--pmfa-c-bg));\n    --pmfa-c-chat: color-mix(in srgb, #000000 28%, var(--pmfa-c-bg));\n    --pmfa-c-bubble-shadow: none;\n    --pmfa-c-on-danger: #1a0b0b;\n    color-scheme: dark;\n  }\n}\n.pmfa-sr {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n.pmfa-icon { flex: none; width: 20px; height: 20px; }\n\n/* Controls */\n.pmfa-btn {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-height: 40px;\n  padding: 0 16px;\n  border: 1px solid var(--pmfa-c-border);\n  border-radius: var(--pmfa-r-m);\n  background: var(--pmfa-c-bg);\n  color: var(--pmfa-c-fg);\n  font: inherit;\n  font-size: 0.875em;\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  touch-action: manipulation;\n  transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease, transform 120ms ease;\n}\n.pmfa-btn:hover:not(:disabled) { background: var(--pmfa-c-surface); }\n.pmfa-btn:active:not(:disabled) { transform: scale(0.96); }\n.pmfa-btn:focus-visible, .pmfa-input:focus-visible, .pmfa-quote:focus-visible,\n.pmfa-att:focus-visible, .pmfa-msg:focus-visible {\n  outline: 2px solid var(--pmfa-c-primary);\n  outline-offset: 2px;\n}\n.pmfa-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n.pmfa-btn-primary {\n  border-color: transparent;\n  background: var(--pmfa-c-primary);\n  color: #ffffff;\n}\n.pmfa-btn-primary:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--pmfa-c-primary) 86%, #000000);\n}\n.pmfa-btn-danger { border-color: transparent; background: var(--pmfa-c-danger); color: var(--pmfa-c-on-danger); }\n.pmfa-btn-danger:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--pmfa-c-danger) 88%, #000000);\n}\n.pmfa-btn-ghost { border-color: transparent; background: transparent; color: var(--pmfa-c-muted); }\n.pmfa-btn-ghost:hover:not(:disabled) { color: var(--pmfa-c-fg); }\n.pmfa-btn-icon { width: 40px; padding: 0; border-radius: 999px; }\n.pmfa-input {\n  display: block;\n  width: 100%;\n  min-height: 40px;\n  padding: 9px 12px;\n  border: 1px solid var(--pmfa-c-border);\n  border-radius: var(--pmfa-r-m);\n  background: var(--pmfa-c-bg);\n  color: var(--pmfa-c-fg);\n  font: inherit;\n  font-size: max(16px, 0.9375em);\n}\ntextarea.pmfa-input { min-height: 72px; resize: vertical; }\n.pmfa-input::placeholder { color: var(--pmfa-c-muted); opacity: 1; }\n.pmfa-error { margin: 0; color: var(--pmfa-c-danger); font-size: 0.875em; }\n\n/* Message list */\n.pmfa-list {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: var(--pmfa-s-m) var(--pmfa-s-m) var(--pmfa-s-l);\n  background: var(--pmfa-c-chat);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scroll-padding-block: var(--pmfa-s-l);\n}\n.pmfa-items {\n  display: flex;\n  flex: 1 0 auto;\n  flex-direction: column;\n  gap: 2px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.pmfa-items > li { display: flex; flex-direction: column; min-width: 0; }\n.pmfa-loadmore { align-self: center; margin-bottom: var(--pmfa-s-s); }\n.pmfa-loadmore .pmfa-btn { border-radius: 999px; font-size: 0.8125em; }\n.pmfa-empty {\n  align-self: center;\n  margin: auto;\n  padding: var(--pmfa-s-l);\n  color: var(--pmfa-c-muted);\n  font-size: 0.875em;\n}\n.pmfa-items > .pmfa-date {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  align-self: center;\n  margin: var(--pmfa-s-m) 0 var(--pmfa-s-s);\n  padding: 3px 12px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--pmfa-c-bg) 92%, transparent);\n  box-shadow: var(--pmfa-c-bubble-shadow);\n  color: var(--pmfa-c-muted);\n  font-size: 0.75em;\n  font-weight: 600;\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n}\n.pmfa-items > .pmfa-date:first-child { margin-top: 0; }\n.pmfa-items > .pmfa-msg { max-width: min(82%, 36em); outline: none; border-radius: var(--pmfa-r-bubble); }\n.pmfa-items > .pmfa-msg-in { align-self: flex-start; align-items: flex-start; }\n.pmfa-items > .pmfa-msg-out { align-self: flex-end; align-items: flex-end; }\n.pmfa-items > .pmfa-msg-start { margin-top: 10px; }\n.pmfa-items > .pmfa-date + .pmfa-msg-start { margin-top: 0; }\n.pmfa-row {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  max-width: 100%;\n  min-width: 0;\n}\n.pmfa-msg-out .pmfa-row { flex-direction: row-reverse; }\n.pmfa-bubble {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 0;\n  padding: 7px 12px 8px;\n  border-radius: var(--pmfa-r-bubble);\n  background: var(--pmfa-c-in);\n  box-shadow: var(--pmfa-c-bubble-shadow);\n  color: var(--pmfa-c-fg);\n  overflow-wrap: anywhere;\n}\n.pmfa-bubble:has(> .pmfa-atts:first-child) { padding-top: 4px; }\n.pmfa-bubble:has(.pmfa-att-media) { max-width: 268px; padding-inline: 4px; }\n.pmfa-bubble:has(.pmfa-att-media) > .pmfa-text { padding-inline: 8px; }\n.pmfa-bubble:has(> .pmfa-atts:only-child) { padding: 4px; }\n.pmfa-text { white-space: pre-wrap; }\n.pmfa-msg-in:not(.pmfa-msg-start) .pmfa-bubble { border-start-start-radius: 6px; }\n.pmfa-msg-in:not(.pmfa-msg-end) .pmfa-bubble { border-end-start-radius: 6px; }\n.pmfa-msg-in.pmfa-msg-end .pmfa-bubble { border-end-start-radius: 4px; }\n.pmfa-msg-out:not(.pmfa-msg-start) .pmfa-bubble { border-start-end-radius: 6px; }\n.pmfa-msg-out:not(.pmfa-msg-end) .pmfa-bubble { border-end-end-radius: 6px; }\n.pmfa-msg-out.pmfa-msg-end .pmfa-bubble { border-end-end-radius: 4px; }\n.pmfa-msg-out .pmfa-bubble {\n  background: var(--pmfa-c-out);\n  box-shadow: none;\n  color: var(--pmfa-c-on-out);\n}\n.pmfa-msg-out .pmfa-bubble a { color: inherit; }\n.pmfa-msg-failed .pmfa-bubble {\n  background: color-mix(in srgb, var(--pmfa-c-danger) 12%, var(--pmfa-c-bg));\n  color: var(--pmfa-c-fg);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pmfa-c-danger) 50%, transparent);\n}\n.pmfa-msg-flash .pmfa-bubble { animation: pmfa-flash 1.2s ease-out; }\n@keyframes pmfa-flash {\n  0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pmfa-c-primary) 55%, transparent); }\n}\n.pmfa-meta {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 16px;\n  margin: 3px 8px 0;\n  color: var(--pmfa-c-muted);\n  font-size: 0.6875em;\n  font-variant-numeric: tabular-nums;\n}\n.pmfa-msg:not(.pmfa-msg-end):not(.pmfa-msg-failed):not(.pmfa-msg-pending) > .pmfa-meta {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  min-height: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n}\n.pmfa-meta .pmfa-status { width: 14px; height: 14px; }\n.pmfa-msg-sent .pmfa-status { color: var(--pmfa-c-link); }\n.pmfa-msg-failed .pmfa-meta { color: var(--pmfa-c-danger); font-weight: 600; }\n.pmfa-msg-error { margin: 2px 8px 0; color: var(--pmfa-c-danger); font-size: 0.75em; }\n\n/* Reply quote */\n.pmfa-quote {\n  appearance: none;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 1px;\n  max-width: 100%;\n  min-width: 0;\n  min-height: 40px;\n  margin: 0 0 -10px;\n  padding: 5px 12px 14px;\n  border: 0;\n  border-inline-start: 3px solid var(--pmfa-c-primary);\n  border-radius: 12px 12px 0 0;\n  background: color-mix(in srgb, var(--pmfa-c-fg) 7%, var(--pmfa-c-chat));\n  color: var(--pmfa-c-fg);\n  font: inherit;\n  font-size: 0.8125em;\n  text-align: start;\n  cursor: pointer;\n}\n.pmfa-quote:hover { background: color-mix(in srgb, var(--pmfa-c-fg) 11%, var(--pmfa-c-chat)); }\n.pmfa-quote-name { color: var(--pmfa-c-link); font-weight: 650; font-size: 0.9375em; }\n.pmfa-quote-text {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  color: color-mix(in srgb, var(--pmfa-c-fg) 80%, var(--pmfa-c-bg));\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.pmfa-quote + .pmfa-row .pmfa-bubble { position: relative; }\n\n/* Message actions */\n.pmfa-actions-msg {\n  display: flex;\n  flex: none;\n  opacity: 0;\n  transition: opacity 120ms ease;\n}\n.pmfa-msg:hover .pmfa-actions-msg,\n.pmfa-msg:focus-within .pmfa-actions-msg,\n.pmfa-msg-failed .pmfa-actions-msg { opacity: 1; }\n@media (hover: none), (pointer: coarse) {\n  .pmfa-actions-msg { opacity: 1; }\n}\n.pmfa-actions-msg .pmfa-btn-icon .pmfa-icon { width: 18px; height: 18px; }\n.pmfa-action-retry { color: var(--pmfa-c-danger); }\n\n/* Attachments */\n.pmfa-atts { display: flex; flex-direction: column; gap: 4px; min-width: 0; }\n.pmfa-att {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  min-height: 44px;\n  color: inherit;\n  text-decoration: none;\n  border-radius: 12px;\n}\n.pmfa-att-media {\n  display: block;\n  overflow: hidden;\n  background: color-mix(in srgb, var(--pmfa-c-fg) 8%, transparent);\n}\n.pmfa-att-media { border-radius: 14px; }\n.pmfa-att-media img {\n  display: block;\n  width: 260px;\n  max-width: 100%;\n  height: auto;\n  max-height: 320px;\n  aspect-ratio: 4 / 3;\n  object-fit: cover;\n}\n.pmfa-att-file {\n  padding-block: 8px;\n  padding-inline: 8px 12px;\n  background: color-mix(in srgb, currentColor 9%, transparent);\n}\na.pmfa-att-file:hover { background: color-mix(in srgb, currentColor 15%, transparent); }\n.pmfa-att-icon {\n  display: grid;\n  place-items: center;\n  flex: none;\n  width: 36px;\n  height: 36px;\n  border-radius: 10px;\n  background: color-mix(in srgb, currentColor 14%, transparent);\n}\n.pmfa-att-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }\n.pmfa-att-name {\n  overflow: hidden;\n  font-size: 0.875em;\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pmfa-att-size { font-size: 0.75em; opacity: 0.85; font-variant-numeric: tabular-nums; }\n\n/* Composer */\n.pmfa-composer {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pmfa-s-s);\n  margin: 0;\n  padding: var(--pmfa-s-s);\n  border-top: 1px solid var(--pmfa-c-border);\n  background: var(--pmfa-c-bg);\n}\n.pmfa-composer-row { display: flex; align-items: flex-end; gap: 6px; }\n.pmfa-composer .pmfa-input {\n  flex: 1;\n  min-width: 0;\n  min-height: 40px;\n  border-radius: 20px;\n  padding: 8px 16px;\n  background: var(--pmfa-c-surface);\n  border-color: transparent;\n  line-height: 1.45;\n  resize: none;\n  field-sizing: content;\n}\n.pmfa-composer .pmfa-input:hover { border-color: var(--pmfa-c-border); }\n.pmfa-composer .pmfa-input:focus-visible { outline-offset: 0; background: var(--pmfa-c-bg); border-color: var(--pmfa-c-border); }\n.pmfa-composer .pmfa-btn { flex: none; }\n.pmfa-send .pmfa-icon { width: 20px; height: 20px; stroke-width: 2.4; }\n.pmfa-composer-standalone {\n  border: 1px solid var(--pmfa-c-border);\n  border-radius: var(--pmfa-r-l);\n}\n.pmfa-composer[data-dragging] {\n  outline: 2px dashed var(--pmfa-c-primary);\n  outline-offset: -4px;\n  background: color-mix(in srgb, var(--pmfa-c-primary) 8%, var(--pmfa-c-bg));\n}\n.pmfa-drop-hint {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  display: none;\n  place-items: center;\n  border-radius: inherit;\n  background: color-mix(in srgb, var(--pmfa-c-bg) 80%, transparent);\n  color: var(--pmfa-c-link);\n  font-size: 0.875em;\n  font-weight: 650;\n  pointer-events: none;\n}\n.pmfa-composer[data-dragging] .pmfa-drop-hint { display: grid; }\n.pmfa-reply-banner {\n  display: flex;\n  align-items: center;\n  gap: var(--pmfa-s-s);\n  min-width: 0;\n  padding-block: 4px;\n  padding-inline: 12px 4px;\n  border-inline-start: 3px solid var(--pmfa-c-primary);\n  border-radius: 10px;\n  background: var(--pmfa-c-surface);\n}\n.pmfa-reply-body { display: flex; flex: 1; flex-direction: column; min-width: 0; font-size: 0.8125em; line-height: 1.3; }\n.pmfa-reply-name { color: var(--pmfa-c-link); font-weight: 650; }\n.pmfa-reply-text { overflow: hidden; color: var(--pmfa-c-muted); text-overflow: ellipsis; white-space: nowrap; }\n.pmfa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }\n.pmfa-chip {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  max-width: 100%;\n  min-width: 0;\n  padding-block: 4px;\n  padding-inline: 10px 2px;\n  border: 1px solid var(--pmfa-c-border);\n  border-radius: 12px;\n  background: var(--pmfa-c-bg);\n  font-size: 0.8125em;\n}\n.pmfa-chip .pmfa-icon { width: 18px; height: 18px; color: var(--pmfa-c-muted); }\n.pmfa-chip-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }\n.pmfa-chip-name { overflow: hidden; max-width: 18ch; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }\n.pmfa-chip-status { color: var(--pmfa-c-muted); font-size: 0.875em; }\n.pmfa-chip-failed { border-color: color-mix(in srgb, var(--pmfa-c-danger) 55%, transparent); }\n.pmfa-chip-failed .pmfa-chip-status, .pmfa-chip-failed .pmfa-icon { color: var(--pmfa-c-danger); }\n.pmfa-progress {\n  position: relative;\n  width: 100%;\n  min-width: 72px;\n  height: 4px;\n  overflow: hidden;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--pmfa-c-fg) 12%, transparent);\n}\n.pmfa-progress > span {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--pmfa-c-primary);\n  transition: width 160ms ease;\n}\n.pmfa-composer > .pmfa-error { padding-inline: 8px; }\n.pmfa-composer-row { align-items: flex-end; gap: 2px; }\n.pmfa-composer-actions { display: flex; flex: none; align-items: center; gap: 2px; min-height: 40px; }\n.pmfa-composer-actions:empty { display: none; }\n.pmfa-composer-actions > * { flex: none; }\n.pmfa-composer .pmfa-input {\n  margin-inline: 4px;\n  max-height: calc(var(--pmfa-composer-max-rows, 8) * 1.45em + 18px);\n  overflow-y: auto;\n}\n.pmfa-composer .pmfa-btn-ghost[aria-expanded=\"true\"] { color: var(--pmfa-c-primary); background: var(--pmfa-c-surface); }\n.pmfa-send, .pmfa-voice { transition: transform 140ms ease, background-color 120ms ease; }\n.pmfa-voice { color: var(--pmfa-c-muted); }\n.pmfa-composer-row[hidden], .pmfa-recording[hidden] { display: none; }\n@media (max-width: 360px) {\n  .pmfa-composer { padding-inline: 4px; }\n  .pmfa-composer .pmfa-input { margin-inline: 2px; padding-inline: 12px; }\n}\n\n/* Recording bar */\n.pmfa-recording {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 40px;\n  min-width: 0;\n}\n.pmfa-recording-status {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  min-height: 40px;\n  padding-inline: 14px;\n  border-radius: 20px;\n  background: var(--pmfa-c-surface);\n}\n.pmfa-rec-dot {\n  flex: none;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--pmfa-c-danger);\n  animation: pmfa-rec-pulse 1.2s ease-in-out infinite;\n}\n@keyframes pmfa-rec-pulse { 50% { opacity: 0.25; } }\n.pmfa-rec-time { flex: none; min-width: 4ch; font-size: 0.9375em; font-variant-numeric: tabular-nums; }\n.pmfa-rec-level {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: 3px;\n  min-width: 0;\n  height: 24px;\n  overflow: hidden;\n}\n.pmfa-rec-level > span {\n  flex: 0 0 3px;\n  height: 100%;\n  border-radius: 2px;\n  background: color-mix(in srgb, var(--pmfa-c-muted) 70%, transparent);\n  transform: scaleY(var(--pmfa-level, 0.12));\n  transition: transform 80ms linear;\n}\n.pmfa-recording .pmfa-rec-cancel { color: var(--pmfa-c-danger); }\n\n/* Popovers */\n.pmfa-popover {\n  position: fixed;\n  z-index: 2147483600;\n  display: flex;\n  flex-direction: column;\n  top: var(--pmfa-pop-top, auto);\n  left: var(--pmfa-pop-left, auto);\n  max-height: var(--pmfa-pop-max, 420px);\n  border: 1px solid var(--pmfa-c-border);\n  border-radius: 14px;\n  background: var(--pmfa-c-bg);\n  color: var(--pmfa-c-fg);\n  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.08);\n  overflow: hidden;\n  animation: pmfa-pop 140ms ease-out;\n}\n.pmfa-popover:focus { outline: none; }\n.pmfa-popover[data-measuring] { visibility: hidden; animation: none; }\n.pmfa-popover[data-placement=\"bottom\"] { animation-name: pmfa-pop-down; }\n@keyframes pmfa-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }\n@keyframes pmfa-pop-down { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }\n.pmfa-emoji {\n  width: 360px;\n  height: 400px;\n}\n.pmfa-emoji-search {\n  position: relative;\n  flex: none;\n  padding: 10px 10px 6px;\n}\n.pmfa-emoji-search .pmfa-icon {\n  position: absolute;\n  inset-inline-start: 22px;\n  top: 50%;\n  width: 16px;\n  height: 16px;\n  margin-top: 2px;\n  transform: translateY(-50%);\n  color: var(--pmfa-c-muted);\n  pointer-events: none;\n}\n.pmfa-emoji-search .pmfa-input {\n  min-height: 36px;\n  padding-block: 6px;\n  padding-inline: 36px 12px;\n  border-color: transparent;\n  border-radius: 10px;\n  background: var(--pmfa-c-surface);\n  font-size: max(16px, 0.875em);\n}\n.pmfa-emoji-search .pmfa-input:focus-visible { outline-offset: 0; background: var(--pmfa-c-bg); }\n.pmfa-emoji-tabs {\n  display: flex;\n  flex: none;\n  gap: 2px;\n  padding: 0 6px;\n  border-bottom: 1px solid var(--pmfa-c-border);\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.pmfa-emoji-tab {\n  appearance: none;\n  position: relative;\n  display: grid;\n  flex: 1 0 34px;\n  place-items: center;\n  min-width: 34px;\n  height: 40px;\n  padding: 0;\n  border: 0;\n  background: none;\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  filter: grayscale(1);\n  opacity: 0.6;\n  transition: opacity 120ms ease, filter 120ms ease;\n}\n.pmfa-emoji-tab:hover { opacity: 0.9; }\n.pmfa-emoji-tab[aria-selected=\"true\"] { filter: none; opacity: 1; }\n.pmfa-emoji-tab[aria-selected=\"true\"]::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 6px;\n  bottom: 0;\n  height: 3px;\n  border-radius: 3px 3px 0 0;\n  background: var(--pmfa-c-primary);\n}\n.pmfa-emoji-tab:focus-visible, .pmfa-emoji-cell:focus-visible, .pmfa-qr-option:focus-visible {\n  outline: 2px solid var(--pmfa-c-primary);\n  outline-offset: -2px;\n}\n.pmfa-emoji-body { flex: 1; min-height: 0; padding: 6px 8px 8px; overflow-y: auto; overscroll-behavior: contain; }\n.pmfa-emoji-heading {\n  margin: 4px 4px 6px;\n  color: var(--pmfa-c-muted);\n  font-size: 0.75em;\n  font-weight: 650;\n}\n.pmfa-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }\n.pmfa-emoji-cell {\n  appearance: none;\n  display: grid;\n  place-items: center;\n  aspect-ratio: 1;\n  min-width: 36px;\n  min-height: 36px;\n  padding: 0;\n  border: 0;\n  border-radius: 10px;\n  background: none;\n  font-family: \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\", sans-serif;\n  font-size: 24px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 80ms ease, transform 80ms ease;\n}\n.pmfa-emoji-cell:hover, .pmfa-emoji-cell:focus-visible { background: var(--pmfa-c-surface); }\n.pmfa-emoji-cell:active { transform: scale(0.9); }\n.pmfa-emoji-empty { margin: 32px 12px; color: var(--pmfa-c-muted); font-size: 0.875em; text-align: center; }\n@media (max-width: 600px) {\n  .pmfa-popover.pmfa-emoji {\n    top: auto;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: min(360px, 60vh);\n    max-height: 60vh;\n    padding-bottom: env(safe-area-inset-bottom);\n    border-width: 1px 0 0;\n    border-radius: 16px 16px 0 0;\n    animation-name: pmfa-sheet;\n  }\n  .pmfa-emoji::before {\n    content: \"\";\n    flex: none;\n    align-self: center;\n    width: 36px;\n    height: 4px;\n    margin-top: 8px;\n    border-radius: 2px;\n    background: var(--pmfa-c-border);\n  }\n  .pmfa-emoji-grid { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }\n}\n@media (max-width: 360px) {\n  .pmfa-emoji-tab { flex-basis: 28px; min-width: 28px; font-size: 16px; }\n}\n@keyframes pmfa-sheet { from { transform: translateY(100%); } }\n\n/* Quick replies */\n.pmfa-qr {\n  position: absolute;\n  inset-inline: 8px;\n  bottom: calc(100% + 4px);\n  z-index: 3;\n  max-height: min(280px, 50vh);\n  margin: 0;\n  padding: 6px;\n  list-style: none;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  border: 1px solid var(--pmfa-c-border);\n  border-radius: 12px;\n  background: var(--pmfa-c-bg);\n  box-shadow: 0 10px 28px rgb(0 0 0 / 0.16);\n  animation: pmfa-pop 120ms ease-out;\n}\n.pmfa-qr ul { margin: 0; padding: 0; list-style: none; }\n.pmfa-qr-title { padding: 4px 10px 6px; color: var(--pmfa-c-muted); font-size: 0.75em; font-weight: 650; }\n.pmfa-qr-option {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-height: 44px;\n  justify-content: center;\n  padding: 6px 10px;\n  border-radius: 8px;\n  cursor: pointer;\n}\n.pmfa-qr-option[aria-selected=\"true\"] { background: color-mix(in srgb, var(--pmfa-c-primary) 12%, var(--pmfa-c-bg)); }\n.pmfa-qr-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }\n.pmfa-qr-shortcut { flex: none; color: var(--pmfa-c-link); font-weight: 650; font-size: 0.875em; }\n.pmfa-qr-description { overflow: hidden; color: var(--pmfa-c-muted); font-size: 0.75em; text-overflow: ellipsis; white-space: nowrap; }\n.pmfa-qr-text {\n  overflow: hidden;\n  color: color-mix(in srgb, var(--pmfa-c-fg) 85%, var(--pmfa-c-bg));\n  font-size: 0.8125em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Drawer */\n.pmfa-drawer {\n  position: fixed;\n  inset-block: 0;\n  inset-inline-end: 0;\n  z-index: 2147483000;\n  display: flex;\n  flex-direction: column;\n  width: min(var(--pmfa-drawer-width, 400px), 100%);\n  margin: 0;\n  padding: 0;\n  border-radius: 0;\n  background: var(--pmfa-c-bg);\n  border-inline-start: 1px solid var(--pmfa-c-border);\n  box-shadow: var(--pmfa-shadow-panel, 0 18px 50px rgb(23 21 31 / 0.16));\n  animation: pmfa-slide 180ms ease-out;\n}\n.pmfa-drawer:focus { outline: none; }\n.pmfa-drawer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--pmfa-s-s);\n  min-height: 56px;\n  padding-block: max(8px, env(safe-area-inset-top)) 8px;\n  padding-inline: var(--pmfa-s-l) 8px;\n  border-bottom: 1px solid var(--pmfa-c-border);\n  background: var(--pmfa-c-bg);\n}\n.pmfa-drawer-title { margin: 0; font-size: 1.0625em; font-weight: 650; }\n.pmfa-drawer .pmfa-list { flex: 1; min-height: 0; }\n.pmfa-drawer-footer { padding-bottom: env(safe-area-inset-bottom); background: var(--pmfa-c-bg); }\n.pmfa-drawer-footer:empty { display: none; }\n.pmfa-drawer-footer .pmfa-composer { border-top: 1px solid var(--pmfa-c-border); }\n.pmfa-drawer > .pmfa-error { padding: var(--pmfa-s-s) var(--pmfa-s-l); }\n@keyframes pmfa-slide { from { transform: translateX(24px); opacity: 0; } }\n[dir=\"rtl\"] .pmfa-drawer, .pmfa-drawer:dir(rtl) { animation-name: pmfa-slide-rtl; }\n@keyframes pmfa-slide-rtl { from { transform: translateX(-24px); opacity: 0; } }\n@media (max-width: 600px) {\n  .pmfa-drawer { width: 100%; border-inline-start: 0; }\n}\n\n/* Template builder */\n.pmfa-tb {\n  container-type: inline-size;\n  padding: var(--pmfa-s-l);\n  border: 1px solid var(--pmfa-c-border);\n  border-radius: var(--pmfa-r-l);\n  background: var(--pmfa-c-bg);\n}\n.pmfa-tb-title { margin: 0 0 var(--pmfa-s-m); font-size: 1.125em; font-weight: 650; }\n.pmfa-tb-grid { display: grid; gap: var(--pmfa-s-l); grid-template-columns: minmax(0, 1fr); }\n@container (min-width: 680px) {\n  .pmfa-tb-grid { grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); }\n  .pmfa-tb-aside { position: sticky; top: var(--pmfa-s-m); align-self: start; }\n}\n.pmfa-tb-form { display: flex; flex-direction: column; gap: var(--pmfa-s-m); min-width: 0; }\n.pmfa-field { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }\n.pmfa-label, .pmfa-field > legend {\n  padding: 0;\n  color: var(--pmfa-c-muted);\n  font-size: 0.8125em;\n  font-weight: 600;\n}\n.pmfa-field > legend { margin-bottom: 4px; }\n.pmfa-pairs { display: grid; gap: var(--pmfa-s-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }\n.pmfa-pair { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.pmfa-pair > span { font-size: 0.75em; color: var(--pmfa-c-muted); font-family: ui-monospace, monospace; }\n.pmfa-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pmfa-s-s);\n  padding-top: var(--pmfa-s-s);\n}\n.pmfa-actions .pmfa-btn-primary { margin-inline-end: auto; }\n@container (max-width: 420px) {\n  .pmfa-actions .pmfa-btn { flex: 1 1 100%; }\n}\n.pmfa-tb-aside {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pmfa-s-s);\n  padding: var(--pmfa-s-m);\n  border-radius: var(--pmfa-r-m);\n  background: var(--pmfa-c-chat);\n  min-width: 0;\n}\n.pmfa-hint { margin: auto 0; padding: var(--pmfa-s-l) var(--pmfa-s-s); color: var(--pmfa-c-muted); font-size: 0.875em; text-align: center; }\n.pmfa-preview {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-width: 320px;\n  width: 100%;\n  align-self: flex-start;\n}\n.pmfa-preview-bubble, .pmfa-preview-card {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 8px 10px;\n  border-radius: 12px;\n  border-start-start-radius: 4px;\n  background: var(--pmfa-c-in);\n  box-shadow: var(--pmfa-c-bubble-shadow);\n  overflow-wrap: anywhere;\n}\n.pmfa-preview-header { font-weight: 700; }\n.pmfa-preview-body { margin: 0; white-space: pre-wrap; font-size: 0.9375em; }\n.pmfa-preview-footer { color: var(--pmfa-c-muted); font-size: 0.8125em; }\n.pmfa-preview-button {\n  display: block;\n  padding: 8px;\n  border-radius: 10px;\n  background: var(--pmfa-c-in);\n  box-shadow: var(--pmfa-c-bubble-shadow);\n  color: var(--pmfa-c-link);\n  font-size: 0.875em;\n  font-weight: 600;\n  text-align: center;\n}\n.pmfa-preview-cards { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; }\n.pmfa-preview-card { flex: 0 0 80%; scroll-snap-align: start; }\n\n/* Inbox */\n.pmfa-inbox {\n  container-type: inline-size;\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr);\n  height: 100%;\n  min-height: 420px;\n  overflow: hidden;\n  border: 1px solid var(--pmfa-c-border);\n  border-radius: var(--pmfa-r-l);\n  background: var(--pmfa-c-bg);\n}\n.pmfa-inbox[data-contact-open] { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) minmax(240px, 300px); }\n.pmfa-inbox-list {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  border-inline-end: 1px solid var(--pmfa-c-border);\n  background: var(--pmfa-c-bg);\n}\n.pmfa-inbox-head {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pmfa-s-s);\n  padding: var(--pmfa-s-m) var(--pmfa-s-m) var(--pmfa-s-s);\n}\n.pmfa-inbox-title { margin: 0; padding-inline: 4px; font-size: 1.25em; font-weight: 700; letter-spacing: -0.01em; }\n.pmfa-search { position: relative; display: flex; align-items: center; }\n.pmfa-search .pmfa-icon {\n  position: absolute;\n  inset-inline-start: 11px;\n  width: 16px;\n  height: 16px;\n  color: var(--pmfa-c-muted);\n  pointer-events: none;\n}\n.pmfa-search .pmfa-input {\n  min-height: 38px;\n  padding-inline-start: 34px;\n  border-color: transparent;\n  border-radius: 999px;\n  background: var(--pmfa-c-surface);\n  font-size: 0.9375em;\n}\n.pmfa-search .pmfa-input:focus-visible { outline-offset: 0; background: var(--pmfa-c-bg); border-color: var(--pmfa-c-border); }\n.pmfa-convs {\n  flex: 1;\n  min-height: 0;\n  margin: 0;\n  padding: 0 6px 6px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  list-style: none;\n}\n.pmfa-conv {\n  appearance: none;\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  grid-template-areas: \"avatar name time\" \"avatar preview badge\";\n  column-gap: 12px;\n  row-gap: 2px;\n  align-items: center;\n  width: 100%;\n  min-height: 68px;\n  padding: 10px;\n  border: 0;\n  border-radius: var(--pmfa-r-m);\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n  touch-action: manipulation;\n  transition: background-color 120ms ease;\n}\n.pmfa-conv:hover { background: var(--pmfa-c-surface); }\n.pmfa-conv:focus-visible { outline: 2px solid var(--pmfa-c-primary); outline-offset: -2px; }\n.pmfa-conv[aria-current=\"true\"] { background: color-mix(in srgb, var(--pmfa-c-primary) 11%, var(--pmfa-c-bg)); }\n.pmfa-conv > .pmfa-avatar { grid-area: avatar; }\n.pmfa-conv-name {\n  grid-area: name;\n  overflow: hidden;\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pmfa-conv-time {\n  grid-area: time;\n  color: var(--pmfa-c-muted);\n  font-size: 0.75em;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.pmfa-conv-preview {\n  grid-area: preview;\n  overflow: hidden;\n  color: var(--pmfa-c-muted);\n  font-size: 0.875em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pmfa-conv[data-unread] .pmfa-conv-name { font-weight: 700; }\n.pmfa-conv[data-unread] .pmfa-conv-time { color: var(--pmfa-c-primary); font-weight: 600; }\n.pmfa-conv[data-unread] .pmfa-conv-preview { color: var(--pmfa-c-fg); }\n.pmfa-badge {\n  grid-area: badge;\n  justify-self: end;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: 999px;\n  background: var(--pmfa-c-primary);\n  color: var(--pmfa-c-on-out);\n  font-size: 0.6875em;\n  font-weight: 700;\n  line-height: 20px;\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.pmfa-avatar {\n  display: grid;\n  flex: none;\n  place-items: center;\n  width: 44px;\n  height: 44px;\n  overflow: hidden;\n  border-radius: 999px;\n  background: color-mix(in srgb, hsl(var(--pmfa-avatar-hue, 250) 70% 55%) 22%, var(--pmfa-c-bg));\n  color: color-mix(in srgb, hsl(var(--pmfa-avatar-hue, 250) 70% 40%) 85%, var(--pmfa-c-fg));\n  font-size: 0.9375em;\n  font-weight: 650;\n  letter-spacing: 0.02em;\n  user-select: none;\n}\n.pmfa-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.pmfa-avatar-s { width: 36px; height: 36px; font-size: 0.8125em; }\n.pmfa-avatar-l { width: 72px; height: 72px; font-size: 1.375em; }\n.pmfa-inbox-state {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pmfa-s-s);\n  padding: var(--pmfa-s-l);\n  color: var(--pmfa-c-muted);\n  font-size: 0.9375em;\n  text-align: center;\n}\n.pmfa-inbox-state > .pmfa-icon { width: 32px; height: 32px; opacity: 0.6; }\n.pmfa-skeleton { display: flex; flex-direction: column; gap: 4px; padding: 0 6px; }\n.pmfa-skeleton > span {\n  display: block;\n  height: 68px;\n  border-radius: var(--pmfa-r-m);\n  background: linear-gradient(90deg, var(--pmfa-c-surface), color-mix(in srgb, var(--pmfa-c-fg) 9%, var(--pmfa-c-bg)), var(--pmfa-c-surface));\n  background-size: 200% 100%;\n  animation: pmfa-shimmer 1.4s ease-in-out infinite;\n}\n@keyframes pmfa-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }\n.pmfa-thread {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  background: var(--pmfa-c-chat);\n}\n.pmfa-thread > .pmfa-list { flex: 1; min-height: 0; }\n.pmfa-thread-head {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 60px;\n  padding: 8px 8px 8px var(--pmfa-s-m);\n  border-bottom: 1px solid var(--pmfa-c-border);\n  background: var(--pmfa-c-bg);\n}\n.pmfa-thread-who { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }\n.pmfa-thread-name { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }\n.pmfa-thread-sub { overflow: hidden; color: var(--pmfa-c-muted); font-size: 0.8125em; text-overflow: ellipsis; white-space: nowrap; }\n.pmfa-thread-actions { display: flex; flex: none; align-items: center; gap: 2px; }\n.pmfa-thread-actions .pmfa-btn-ghost[aria-expanded=\"true\"] { color: var(--pmfa-c-primary); background: var(--pmfa-c-surface); }\n.pmfa-back { display: none; }\n.pmfa-back .pmfa-icon { width: 22px; height: 22px; }\n[dir=\"rtl\"] .pmfa-back .pmfa-icon, .pmfa-back:dir(rtl) .pmfa-icon { transform: scaleX(-1); }\n.pmfa-thread-foot { border-top: 1px solid var(--pmfa-c-border); background: var(--pmfa-c-bg); }\n.pmfa-readonly { margin: 0; padding: 14px var(--pmfa-s-l); color: var(--pmfa-c-muted); font-size: 0.875em; text-align: center; }\n.pmfa-contact {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  overflow-y: auto;\n  border-inline-start: 1px solid var(--pmfa-c-border);\n  background: var(--pmfa-c-bg);\n}\n.pmfa-contact-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 60px;\n  padding: 8px 8px 8px var(--pmfa-s-l);\n  border-bottom: 1px solid var(--pmfa-c-border);\n}\n.pmfa-contact-head h3 { margin: 0; font-size: 1em; font-weight: 650; }\n.pmfa-contact-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: var(--pmfa-s-l) var(--pmfa-s-m);\n  text-align: center;\n}\n.pmfa-contact-name { margin: 6px 0 0; font-size: 1.0625em; font-weight: 650; overflow-wrap: anywhere; }\n.pmfa-contact-phone { color: var(--pmfa-c-muted); font-size: 0.875em; font-variant-numeric: tabular-nums; }\n.pmfa-contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }\n.pmfa-contact-fields { display: flex; flex-direction: column; margin: 0; padding: 0 var(--pmfa-s-l) var(--pmfa-s-l); }\n.pmfa-contact-fields > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--pmfa-c-border); }\n.pmfa-contact-fields dt { color: var(--pmfa-c-muted); font-size: 0.75em; font-weight: 600; }\n.pmfa-contact-fields dd { margin: 0; font-size: 0.9375em; overflow-wrap: anywhere; }\n/* Container queries match the inbox's children; the inbox is the container. */\n@container (max-width: 1023px) {\n  .pmfa-inbox > .pmfa-thread { grid-column: 2 / -1; }\n  .pmfa-inbox .pmfa-contact {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-end: 0;\n    z-index: 2;\n    width: min(320px, 100%);\n    box-shadow: var(--pmfa-shadow-panel, 0 18px 50px rgb(23 21 31 / 0.16));\n    animation: pmfa-slide 180ms ease-out;\n  }\n}\n@container (max-width: 699px) {\n  .pmfa-inbox > .pmfa-inbox-list, .pmfa-inbox > .pmfa-thread { grid-column: 1 / -1; grid-row: 1; border-inline-end: 0; }\n  .pmfa-inbox[data-view=\"thread\"] .pmfa-inbox-list { display: none; }\n  .pmfa-inbox[data-view=\"list\"] .pmfa-thread { display: none; }\n  .pmfa-inbox .pmfa-back { display: inline-flex; }\n  .pmfa-inbox .pmfa-contact { width: 100%; border-inline-start: 0; }\n  .pmfa-thread-head { padding-inline-start: 4px; }\n}\n\n/* Connect, status, call */\n.pmfa-connect .pmfa-icon { width: 18px; height: 18px; }\n.pmfa-connect[aria-busy=\"true\"] { cursor: progress; }\n.pmfa-session {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 28px;\n  padding: 0 12px 0 10px;\n  border: 1px solid var(--pmfa-c-border);\n  border-radius: 999px;\n  background: var(--pmfa-c-bg);\n  color: var(--pmfa-c-fg);\n  font-size: 0.8125em;\n  font-weight: 600;\n  white-space: nowrap;\n}\n.pmfa-session-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--pmfa-c-muted); }\n.pmfa-session[data-status=\"ready\"] .pmfa-session-dot, .pmfa-session[data-status=\"refreshing\"] .pmfa-session-dot { background: var(--pmfa-c-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pmfa-c-success) 22%, transparent); }\n.pmfa-session[data-status=\"loading\"] .pmfa-session-dot, .pmfa-session[data-status=\"retrying\"] .pmfa-session-dot { background: #d9a400; animation: pmfa-pulse 1.2s ease-in-out infinite; }\n.pmfa-session[data-status=\"error\"] .pmfa-session-dot, .pmfa-session[data-status=\"unauthenticated\"] .pmfa-session-dot { background: var(--pmfa-c-danger); }\n.pmfa-session .pmfa-btn { min-height: 22px; margin-inline-end: -8px; padding: 0 8px; border-radius: 999px; font-size: 0.9em; }\n@keyframes pmfa-pulse { 50% { opacity: 0.35; } }\n\n/* Template manager */\n.pmfa-tm {\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pmfa-s-m);\n}\n.pmfa-tm-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pmfa-s-s); }\n.pmfa-tm-head h2 { margin: 0; font-size: 1.25em; font-weight: 700; }\n.pmfa-tm-list {\n  display: grid;\n  gap: var(--pmfa-s-s);\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.pmfa-tm-item {\n  appearance: none;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 6px;\n  width: 100%;\n  height: 100%;\n  padding: var(--pmfa-s-m);\n  border: 1px solid var(--pmfa-c-border);\n  border-radius: var(--pmfa-r-m);\n  background: var(--pmfa-c-bg);\n  color: inherit;\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n  transition: border-color 120ms ease, box-shadow 120ms ease;\n}\n.pmfa-tm-item:hover { border-color: color-mix(in srgb, var(--pmfa-c-primary) 45%, var(--pmfa-c-border)); }\n.pmfa-tm-item:focus-visible { outline: 2px solid var(--pmfa-c-primary); outline-offset: 2px; }\n.pmfa-tm-name { font-weight: 650; overflow-wrap: anywhere; }\n.pmfa-tm-body {\n  display: -webkit-box;\n  overflow: hidden;\n  color: var(--pmfa-c-muted);\n  font-size: 0.875em;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n}\n.pmfa-tm-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }\n.pmfa-tag {\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--pmfa-c-surface);\n  color: var(--pmfa-c-muted);\n  font-size: 0.6875em;\n  font-weight: 650;\n  letter-spacing: 0.03em;\n  text-transform: uppercase;\n}\n.pmfa-tag[data-status=\"APPROVED\"], .pmfa-tag[data-status=\"approved\"] { background: color-mix(in srgb, var(--pmfa-c-success) 15%, var(--pmfa-c-bg)); color: var(--pmfa-c-success); }\n.pmfa-tag[data-status=\"REJECTED\"], .pmfa-tag[data-status=\"rejected\"] { background: color-mix(in srgb, var(--pmfa-c-danger) 13%, var(--pmfa-c-bg)); color: var(--pmfa-c-danger); }\n\n@media (prefers-reduced-motion: reduce) {\n  .pmfa *, .pmfa *::before, .pmfa *::after, .pmfa-drawer, .pmfa-popover {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n}\n";
+/**
+ * Add the shared component stylesheet to a document once. Does nothing
+ * without a document, so server rendering is unaffected.
+ */
+export declare function injectComponentStyles(target?: Document | undefined): void;
+/** Root class names for a component: base class plus the theme modifier. */
+export declare function themeClassName(theme: "light" | "dark" | "system"): string;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,k3wCAoqC5B,CAAC;AAIF;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,GAAE,QAAQ,GAAG,SAA+B,GACjD,IAAI,CAON;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAMzE"}