@uplifted/react 0.22.6

package/dist/styles.js

@@ -0,0 +1,545 @@
+/**
+ * Panel styles, injected once into the document by <UpliftPanel>. Scoped under `.uplift`.
+ * D15: every colour, font and radius is a `--u-*` custom property. Defaults below sit at
+ * zero specificity (`:where`) so a host overrides them with any ordinary rule, e.g.
+ * `.uplift { --u-bg: var(--card); --u-text: var(--foreground); }`.
+ * `--u-accent`/`--u-accent-ink` paint primary buttons (Send, Add client); `--u-highlight`/`--u-highlight-soft`
+ * paint emphasis (sparkle, draft labels, selected ring, focus, purpose icons) and default to the accent, so a
+ * host whose buttons are neutral and whose brand is a colour (PulseKit) can split them.
+ * D16: layout answers to the panel's own width through a container query, never the viewport.
+ */
+export const STYLE_ELEMENT_ID = "uplifted-react-styles";
+export const upliftStyles = `
+:where(.uplift){
+  --u-bg:#ffffff;--u-surface:#ffffff;--u-surface-2:#fafafa;--u-surface-3:#f4f4f5;
+  --u-text:#262626;--u-muted:#666666;--u-border:rgba(0,0,0,.08);
+  --u-accent:#0f8a63;--u-accent-soft:#e3f5ee;--u-accent-ink:#ffffff;--u-link:#0b6b4c;
+  --u-highlight:var(--u-accent);--u-highlight-soft:var(--u-accent-soft);
+  --u-gold:#c9971c;--u-gold-hi:#f7e2a0;--u-gold-ink:#8a6410;--u-gold-ink-hi:#c9971c;
+  --u-seg-l:88%;
+  --u-danger:#c10007;--u-warn:#bb4d00;--u-out:#eaf1ff;--u-out-ink:#12244d;
+  --u-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;--u-radius:10px;
+}
+:where(.uplift[data-theme="dark"],[data-theme="dark"] .uplift){
+  --u-bg:#111111;--u-surface:#111111;--u-surface-2:#0a0a0a;--u-surface-3:#1a1a1a;
+  --u-text:#f5f5f5;--u-muted:#9a9a9a;--u-border:rgba(255,255,255,.08);
+  --u-accent:#70d7b0;--u-accent-soft:#17342a;--u-accent-ink:#062a1e;--u-link:#70d7b0;
+  --u-gold:#d9a830;--u-gold-hi:#fff1b8;--u-gold-ink:#d9a830;--u-gold-ink-hi:#f3d47a;
+  --u-seg-l:26%;
+  --u-danger:#ff6467;--u-warn:#ffb900;--u-out:#1d2b4a;--u-out-ink:#e3ebff;
+}
+.uplift,.uplift *,.uplift *::before,.uplift *::after{box-sizing:border-box}
+.uplift{font:15px/1.45 var(--u-font);color:var(--u-text);background:var(--u-bg);border:1px solid var(--u-border);border-radius:14px;overflow:hidden;container-type:inline-size;container-name:panel;position:relative;-webkit-font-smoothing:antialiased}
+:where(.uplift) button{font:inherit;color:inherit;cursor:pointer}
+:where(.uplift) button:disabled{cursor:not-allowed}
+.uplift :focus-visible{outline:2px solid var(--u-highlight);outline-offset:2px;border-radius:6px}
+.uplift h2,.uplift h3,.uplift h4,.uplift p{margin:0}
+.u-sp{flex:1}
+.u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+.u-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--u-border);background:var(--u-surface-2);border-radius:999px;padding:4px 10px;font-size:13px;color:var(--u-muted)}
+.u-pill b{color:var(--u-text);font-weight:600}
+.u-linkbtn{background:none;border:0;padding:4px 2px;color:var(--u-link);font-weight:600;text-decoration:underline;text-underline-offset:3px}
+.u-split{display:grid;grid-template-columns:320px minmax(0,1fr);height:min(max(520px,62.5cqw),86vh)}
+.u-split>*{min-height:0}
+.u-list{overflow:hidden}
+.u-pane{overflow:hidden}
+.u-iconbtn{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--u-border);background:var(--u-bg);border-radius:8px;color:var(--u-muted);padding:0}
+.u-iconbtn:hover{color:var(--u-text)}
+.u-iconbtn-pair{width:auto;padding:0 9px;display:inline-flex;align-items:center;gap:4px}
+.u-ai-spark{display:inline-flex;color:var(--u-highlight)}
+.u-iconbtn .u-ai-spark svg{width:14px;height:14px}
+.u-iconbtn svg{width:16px;height:16px}
+.u-iconbtn[aria-pressed="true"]{color:var(--u-text);background:var(--u-surface-2)}
+.u-bulkbtn svg{width:14px;height:14px}
+.uplift.u-full{position:fixed;inset:0;z-index:2147483000;border-radius:0;border:0;display:flex;flex-direction:column}
+.uplift.u-full .u-split{flex:1;height:auto;min-height:0}
+.u-back{display:none;border:1px solid var(--u-border);background:var(--u-bg);border-radius:8px;padding:6px 10px;font-size:16px;min-height:36px;align-items:center;flex:none}
+.u-list{border-right:1px solid var(--u-border);display:flex;flex-direction:column;min-width:0}
+/* inbox toolbar: native Uplift's collapsed search + segmented sort + Bulk generate */
+.u-toolbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--u-border)}
+.u-search{position:relative;flex:0 1 32px;min-width:32px;display:flex;align-items:center;cursor:pointer;transition:flex-basis .2s ease,flex-grow .2s ease}
+.u-search-open{flex:1 1 140px;cursor:auto}
+.u-search svg{position:absolute;left:9px;width:14px;height:14px;color:var(--u-muted);pointer-events:none}
+.u-search input{width:100%;min-height:32px;padding:6px 10px 6px 30px;border-radius:999px;border:1px solid var(--u-border);background:var(--u-surface-2);font:inherit;font-size:13px;color:var(--u-text)}
+.u-search:not(.u-search-open) input{cursor:pointer;padding-right:0}
+.u-search:not(.u-search-open) input::placeholder{opacity:0}
+.u-search input:focus{outline:none;border-color:var(--u-accent);background:var(--u-bg)}
+.u-search input::-webkit-search-cancel-button{cursor:pointer}
+.u-sortgroup{display:inline-flex;align-items:center;padding:2px;border-radius:999px;background:var(--u-surface-2);flex:none}
+.u-sortgroup button{border:0;background:none;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:600;color:var(--u-muted);min-height:28px;white-space:nowrap}
+.u-sortgroup button:hover{color:var(--u-text)}
+.u-sortgroup button[aria-pressed="true"]{background:var(--u-bg);color:var(--u-text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--u-border)}
+.u-toolbar button.u-bulkbtn{margin-left:auto;display:inline-flex;align-items:center;gap:1px;border:0;border-radius:999px;background:none;color:var(--u-muted);padding:0 6px;min-height:32px;flex:none}
+.u-toolbar button.u-bulkbtn:hover:not(:disabled){color:var(--u-accent);background:var(--u-surface-2)}
+.u-toolbar button.u-bulkbtn:disabled{opacity:.45}
+.u-rows{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:0}
+.u-rows li{display:flex;flex-wrap:wrap;align-items:stretch;border-bottom:1px solid var(--u-border)}
+.u-row-open{flex:1;min-width:0;text-align:left;border:0;background:transparent;padding:11px 12px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 10px;min-height:64px}
+.u-av{grid-row:span 3;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}
+.u-av.u-av-sm{grid-row:auto;width:32px;height:32px}
+.u-r-top{display:flex;gap:6px;align-items:baseline;min-width:0}
+.u-r-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.u-r-time{margin-left:auto;font-size:12.5px;color:var(--u-muted);flex:none}
+.u-r-line{font-size:13.5px;color:var(--u-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.u-r-tags{display:flex;flex-wrap:wrap;gap:4px}
+.u-tag{font-size:12px;font-weight:600;border-radius:999px;padding:1px 8px;border:1px solid var(--u-border);color:var(--u-muted);background:var(--u-surface-2)}
+.u-tag.u-need{color:var(--u-danger);border-color:color-mix(in srgb,var(--u-danger) 35%,transparent)}
+.u-tag.u-ok{color:var(--u-link);border-color:color-mix(in srgb,var(--u-highlight) 35%,transparent)}
+.u-tag.u-warn{color:var(--u-warn);border-color:color-mix(in srgb,var(--u-warn) 35%,transparent)}
+.u-list-foot{padding:10px 12px;font-size:13px;color:var(--u-muted)}
+.u-skel{height:12px;border-radius:6px;background:var(--u-surface-3);margin:6px 0}
+.u-skel-row{padding:14px 12px;border-bottom:1px solid var(--u-border)}
+.u-state{padding:22px 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:14.5px;color:var(--u-muted)}
+.u-state h3{font-size:16px;color:var(--u-text)}
+.u-state p{max-width:52ch}
+.u-pane{display:flex;flex-direction:column;min-width:0}
+.u-pane-head{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--u-border)}
+.u-who{display:flex;flex-direction:column;min-width:0}
+.u-who strong{font-size:15px}
+.u-who small{font-size:13px;color:var(--u-muted)}
+.u-chan{margin-left:auto;font-size:13px;color:var(--u-muted)}
+.u-feed{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:var(--u-surface-2);min-height:200px}
+.u-tpl-chip{display:inline-flex;align-items:center;gap:4px;margin-left:6px;border:1px solid var(--u-border);border-radius:999px;padding:0 7px;font-size:11px;color:var(--u-muted);background:var(--u-bg);min-height:18px}
+.u-bub.u-tpl-shown{opacity:.85;border:1px dashed color-mix(in srgb,var(--u-out-ink) 50%,transparent)}
+.u-day{align-self:center;font-size:12px;color:var(--u-muted);background:var(--u-bg);border:1px solid var(--u-border);padding:2px 10px;border-radius:999px}
+.u-older{align-self:center;border:1px solid var(--u-border);background:var(--u-bg);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--u-muted);min-height:32px}
+.u-ev{align-self:center;max-width:92%;display:flex;gap:8px;align-items:flex-start;font-size:13.5px;background:var(--u-bg);border:1px solid var(--u-border);border-radius:10px;padding:8px 11px}
+.u-ev svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--u-muted)}
+.u-ev b{font-weight:600}
+.u-ev .u-meta{color:var(--u-muted);font-size:12.5px}
+.u-bub{max-width:78%;padding:8px 12px;border-radius:14px;font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere}
+.u-bub.u-in{align-self:flex-start;background:var(--u-bg);border:1px solid var(--u-border);border-bottom-left-radius:4px}
+.u-bub.u-out{align-self:flex-end;background:var(--u-out);color:var(--u-out-ink);border-bottom-right-radius:4px}
+.u-bmeta{font-size:12px;color:var(--u-muted)}
+.u-bmeta.u-r{align-self:flex-end}
+/* ---- Composer footer (port of native ChatPage footer) ---- */
+.u-composer{display:flex;flex-direction:column;gap:8px;padding:10px 16px 12px;background:var(--u-surface-2);border-top:1px solid var(--u-border)}
+.u-composer>*:empty{display:none}
+.u-rail{align-self:center;display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--u-muted);font-size:12px;padding:2px 10px;border-radius:999px;min-height:24px}
+.u-rail:hover{color:var(--u-text);background:var(--u-surface-3)}
+.u-rail svg{width:14px;height:14px}
+.u-extras-wrap{position:relative;display:flex;flex-direction:column}
+.u-extras-wrap>.u-rail{align-self:flex-end}
+.u-extras-wrap>.u-rail[aria-expanded="true"]{position:absolute;top:0;right:0;z-index:1}
+.u-extras-wrap:has(>.u-rail[aria-expanded="true"]) .u-ag-h{padding-right:34px}
+.u-extras{display:contents}
+.u-extras-off{display:none}
+/* draft grid (ComposerAssistant) */
+.u-ag{display:flex;flex-direction:column;gap:6px}
+.u-ag-h{display:flex;align-items:center;gap:2px}
+.u-ag-toggle{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border:0;background:transparent;color:var(--u-muted);font-size:12px;font-weight:600;border-radius:6px;min-height:28px}
+.u-ag-toggle:hover{background:var(--u-surface-3);color:var(--u-text)}
+.u-ag-spark{display:inline-flex;color:var(--u-highlight)}.u-ag-spark svg{width:12px;height:12px}
+.u-ag-label{letter-spacing:.02em}
+.u-ag-chev{display:inline-flex;color:var(--u-muted);transition:transform .15s}.u-ag-chev svg{width:14px;height:14px}
+.u-ag-chev-open{transform:rotate(180deg)}
+.u-ag-by{font-size:12px;color:var(--u-muted);margin-left:6px}
+.u-ag-regen{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:0;background:transparent;color:var(--u-muted);border-radius:6px;min-width:24px;min-height:24px}
+.u-ag-regen svg{width:11px;height:11px}
+.u-ag-regen:hover:not(:disabled){color:var(--u-highlight);background:var(--u-surface-3)}
+.u-ag-regen:disabled{opacity:.5}
+.u-ag-spinning svg{animation:u-spin 1s linear infinite}
+@keyframes u-spin{to{transform:rotate(360deg)}}
+.u-ag-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
+.u-ag-cell{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:56px;padding:10px 12px;background:var(--u-surface-2);border:1px solid transparent;border-radius:var(--u-radius);color:var(--u-text);text-align:left;transition:background .15s,transform .15s}
+.u-ag-cell:hover:not(:disabled){background:var(--u-bg)}
+/* Gold shimmer ring on finished drafts (Ian, 2026-10-11): a gradient pseudo-element masked to the edge. Reduced motion leaves a still ring. */
+.u-ag-cell:not(.u-ag-loading)::before{content:"";position:absolute;inset:-1px;border-radius:calc(var(--u-radius) + 1px);padding:1.5px;pointer-events:none;background:linear-gradient(110deg,var(--u-gold) 0%,var(--u-gold-hi) 25%,var(--u-gold) 50%,var(--u-gold-hi) 75%,var(--u-gold) 100%);background-size:250% 100%;animation:u-shimmer 3.2s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
+@keyframes u-shimmer{from{background-position:0% 50%}to{background-position:250% 50%}}
+.u-ag-cell[aria-checked="true"]{box-shadow:0 0 0 2px var(--u-highlight)}
+.u-ag-cell[aria-checked="true"]::before{display:none}
+.u-ag-lab{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--u-highlight);text-transform:uppercase;letter-spacing:.04em}
+.u-ag-pencil{display:inline-flex;opacity:.6}.u-ag-pencil svg{width:10px;height:10px}
+.u-ag-txt{font-size:14px;line-height:1.35;color:var(--u-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}
+.u-ag-loading{overflow:hidden;cursor:default;pointer-events:none;justify-content:center;align-items:center;border-color:var(--u-border)}
+.u-ag-loading-txt{position:relative;z-index:1;font-size:12px;color:var(--u-muted)}
+.u-ag-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);animation:u-ag-sheen 1.4s infinite;transform:translateX(-100%)}
+@keyframes u-ag-sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
+.u-ag-empty{font-size:12.5px;color:var(--u-muted);padding:6px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
+.u-ag-foot{font-size:12.5px;color:var(--u-muted);margin:0}
+/* attachments */
+.u-attach-row{align-items:center;gap:8px;flex-wrap:wrap}
+.u-limits{font-size:12px;color:var(--u-muted)}
+.u-limits-warn{color:var(--u-warn)}
+.u-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0}
+.u-chip{display:inline-flex;align-items:center;gap:6px;max-width:240px;padding:4px 8px;border-radius:999px;background:var(--u-bg);border:1px solid var(--u-border);font-size:12px;color:var(--u-muted)}
+.u-chip svg{width:13px;height:13px;flex:none}
+.u-chip-err{border-color:var(--u-danger);color:var(--u-danger)}
+.u-chip-errtxt{font-size:10px}
+.u-chip-thumb{width:22px;height:22px;object-fit:cover;border-radius:5px}
+.u-chip-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.u-chip-x{display:inline-flex;align-items:center;border:0;background:none;color:inherit;padding:2px;min-height:0}
+.u-chip-x svg{width:12px;height:12px}
+.u-spin{animation:u-spin 1s linear infinite}
+.u-rec{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:9px;background:var(--u-bg);font-size:12px;color:var(--u-muted)}
+.u-rec-dot{width:8px;height:8px;border-radius:50%;background:#ff3b30;animation:u-rec-pulse 1.2s ease-in-out infinite}
+@keyframes u-rec-pulse{0%,100%{opacity:1}50%{opacity:.35}}
+.u-rec-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--u-border);background:var(--u-bg);color:var(--u-text);border-radius:999px;width:28px;height:28px;min-height:0;padding:0}
+.u-rec-btn svg{width:14px;height:14px}
+.u-rec-done{background:var(--u-accent);color:var(--u-accent-ink);border-color:var(--u-accent)}
+.u-sms-note{font-size:12px;color:var(--u-warn)}
+/* editor row: + button, pill with the editor and the inline send/✨ */
+.u-c-row{display:flex;align-items:flex-end;gap:8px;width:100%}
+.u-attach-wrap{position:relative;flex:none}
+.u-attach-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-height:0;padding:0;margin-bottom:3px;border:1px solid var(--u-border);border-radius:999px;background:var(--u-bg);color:var(--u-muted);transition:color .15s,background .15s}
+.u-attach-btn svg{width:18px;height:18px}
+.u-attach-btn:hover:not(:disabled){color:var(--u-highlight);background:var(--u-highlight-soft)}
+.u-attach-btn:disabled{opacity:.45}
+.u-pill{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;gap:6px;background:var(--u-bg);border:1px solid var(--u-border);border-radius:14px;padding:4px 4px 4px 8px}
+.u-pill-grow{flex:1;min-width:0}
+.u-pill .u-editor{border:0;background:transparent;border-radius:0;padding:6px 4px;min-height:38px;max-height:220px;resize:none}
+.u-pill .u-editor:focus{outline:none}
+.u-pill:focus-within{border-color:var(--u-highlight)}
+/* Locked pill (stock intro, nothing to edit): gold shimmer ring like the draft cells. Reduced motion leaves a still ring. */
+.u-pill-locked{border-color:transparent}
+.u-pill-locked::before{content:"";position:absolute;inset:-1px;border-radius:15px;padding:1.5px;pointer-events:none;background:linear-gradient(110deg,var(--u-gold) 0%,var(--u-gold-hi) 25%,var(--u-gold) 50%,var(--u-gold-hi) 75%,var(--u-gold) 100%);background-size:250% 100%;animation:u-shimmer 3.2s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
+.u-pill-locked:focus-within{border-color:transparent}
+.u-editor-locked{cursor:default;caret-color:transparent}
+.u-send-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:0;padding:0;flex:none;border-radius:999px;border:0;background:var(--u-accent);color:var(--u-accent-ink);transition:transform .15s,opacity .15s}
+.u-send-btn svg{width:15px;height:15px;stroke:var(--u-accent-ink)}
+.u-send-btn:hover:not(:disabled){transform:translateY(-1px)}
+.u-send-btn:disabled{opacity:.4;cursor:not-allowed}
+.u-gen-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:0;padding:0;flex:none;border:0;border-radius:999px;background:transparent;color:var(--u-highlight);transition:background .15s}
+.u-gen-btn svg{width:16px;height:16px}
+.u-gen-btn:hover:not(:disabled){background:var(--u-highlight-soft)}
+.u-gen-btn:disabled{opacity:.4}
+.u-menu-backdrop{position:fixed;inset:0;z-index:40}
+.u-menu{position:absolute;bottom:calc(100% + 6px);z-index:41;display:flex;flex-direction:column;min-width:150px;padding:4px;border-radius:12px;background:var(--u-bg);border:1px solid var(--u-border);box-shadow:0 10px 30px rgba(0,0,0,.18)}
+.u-menu-left{left:0}.u-menu-right{right:0}
+.u-menu-title{padding:6px 12px 4px;font-size:11.5px;font-weight:600;color:var(--u-muted)}
+.u-menu-titlerow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 2px 0}
+.u-menu-titlerow .u-menu-title{padding:2px 12px 2px}
+.u-menu-cfg{display:inline-flex;align-items:center;justify-content:center;padding:4px;min-width:24px;min-height:24px;border:0;background:none;color:var(--u-muted);border-radius:6px}
+.u-menu-cfg svg{width:13px;height:13px}
+.u-menu-cfg:hover{color:var(--u-text);background:var(--u-surface-3)}
+/* proactive options editor */
+.u-po-help{font-size:13.5px;color:var(--u-muted);margin:0 0 10px}
+.u-po-list{display:flex;flex-direction:column;gap:10px}
+.u-po-row{border:1px solid var(--u-border);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--u-surface-2)}
+.u-po-top{display:flex;align-items:center;gap:6px}
+.u-po-label{flex:1;min-width:0;border:1px solid var(--u-border);border-radius:8px;padding:7px 10px;font:inherit;font-size:14px;background:var(--u-bg);color:var(--u-text)}
+.u-po-text{width:100%;border:1px solid var(--u-border);border-radius:8px;padding:7px 10px;font:inherit;font-size:13.5px;background:var(--u-bg);color:var(--u-text);resize:vertical}
+.u-po-iconwrap{position:relative;flex:none}
+.u-po-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:0;padding:0;border:1px solid var(--u-border);border-radius:8px;background:var(--u-bg);color:var(--u-text)}
+.u-po-iconbtn svg{width:15px;height:15px}
+.u-po-iconbtn:disabled{opacity:.4}
+.u-po-iconbtn-on{border-color:var(--u-highlight);box-shadow:0 0 0 1px var(--u-highlight);color:var(--u-highlight)}
+.u-po-remove:hover{color:var(--u-danger);border-color:var(--u-danger)}
+.u-po-iconpick{position:absolute;top:calc(100% + 4px);left:0;z-index:5;display:grid;grid-template-columns:repeat(6,32px);gap:4px;padding:6px;background:var(--u-bg);border:1px solid var(--u-border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
+.u-po-add{margin-top:10px;border:1px dashed var(--u-border);background:transparent;border-radius:9px;padding:8px 12px;font-weight:600;color:var(--u-link);min-height:38px;width:100%}
+.u-po-actions{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
+.u-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:0;border-radius:8px;background:none;text-align:left;font-size:14px;color:var(--u-text);min-height:36px}
+.u-menu-item:hover{background:var(--u-surface-3)}
+.u-menu-purpose svg{width:14px;height:14px;color:var(--u-highlight);flex:none}
+/* inbox rows (native ClientRow) */
+.u-row-open{position:relative}
+.u-r-ind{position:absolute;left:3px;top:50%;transform:translateY(-50%);width:20px;display:grid;place-items:center}
+.u-rows .u-row-open{padding-left:26px}
+.u-r-dot{width:8px;height:8px;border-radius:50%;background:var(--u-highlight)}
+.u-r-badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--u-highlight);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
+/* The open conversation is the only row with a colour: a clear shade and an accent bar on the left
+   edge, like WhatsApp's selected chat. Unread shows by the dot and bold name, never a tint. Built
+   from the text colour so it reads on any host theme, light or dark. */
+.u-rows li:has(.u-row-open[aria-current="true"]){background:color-mix(in srgb,var(--u-text) 8%,var(--u-bg));box-shadow:inset 3px 0 0 var(--u-accent)}
+.u-rows li:has(.u-row-open[aria-current="true"]) .u-row-open{background:transparent}
+.u-r-name-unread{font-weight:700}
+.u-r-follow,.u-r-fail{display:inline-flex;align-items:center;flex:none}
+.u-r-follow svg,.u-r-fail svg{width:13px;height:13px}
+.u-r-follow{color:var(--u-warn)}
+.u-r-fail{color:var(--u-danger)}
+.u-r-prev{display:inline-flex;align-items:center;gap:5px;max-width:100%}
+.u-r-pico{display:inline-flex;flex:none}.u-r-pico svg{width:11px;height:11px}
+.u-r-prev-in .u-r-ptxt{color:var(--u-text)}
+.u-r-prev-in .u-r-pico{color:var(--u-highlight)}
+.u-r-prev-out .u-r-ptxt,.u-r-prev-out .u-r-pico{color:var(--u-muted)}
+.u-r-prev-ev .u-r-ptxt,.u-r-prev-ev .u-r-pico{color:var(--u-muted);font-style:italic}
+.u-r-ptxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
+.u-r-hosttags{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 10px 72px;margin-top:-6px}
+.u-tag-connect{cursor:pointer;font:inherit;font-size:12px;font-weight:600;line-height:inherit}
+.u-tag-connect:hover{border-color:var(--u-highlight);color:var(--u-highlight);background:var(--u-highlight-soft)}
+.u-r-quick{flex:1 0 100%;display:flex;justify-content:flex-end;align-items:center;min-width:0;padding:0 12px 10px 72px}
+.u-qsend{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid var(--u-highlight);background:var(--u-highlight);color:#fff;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;min-height:26px}
+.u-qsend:hover:not(:disabled){filter:brightness(1.08)}
+/* Bulk generate states in the quick-send slot (native: Generating… / Generation failed) */
+.u-qsend.u-qsend-bulk{background:var(--u-surface-2);border-color:var(--u-border);color:var(--u-muted);cursor:default}
+.u-qsend-busy svg{width:12px;height:12px}
+/* Bulk generate sheet (native BulkGenerateModal) */
+.u-bulk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
+.u-bulk-spark{color:var(--u-highlight);display:grid;place-items:center;padding-top:9px}
+.u-bulk-spark svg{width:18px;height:18px}
+.u-bulk-titles{flex:1;min-width:0}
+.u-bulk-titles h3{margin:4px 0 2px;font-size:18px}
+.u-bulk-sub{margin:0;font-size:13.5px;color:var(--u-muted)}
+.u-bulk-sub .u-linkbtn{font-size:13px}
+.u-bulk-sec{margin-top:14px}
+.u-bulk-sechead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
+.u-bulk-sechead .u-linkbtn{font-size:13px}
+.u-bulk-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--u-muted)}
+.u-bulk-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:180px;overflow:auto;padding:2px}
+.u-bulk-empty{font-size:13px;color:var(--u-muted)}
+.u-bulk-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--u-border);background:var(--u-bg);border-radius:999px;padding:3px 10px 3px 3px;font-size:13px;color:var(--u-muted);min-height:30px;max-width:100%}
+.u-bulk-chip-on{border-color:var(--u-highlight);background:var(--u-highlight-soft);color:var(--u-text)}
+.u-bulk-av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700;flex:none}
+.u-bulk-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.u-bulk-meta{font-size:11px;color:var(--u-muted)}
+.u-bulk-prompt{width:100%;box-sizing:border-box;border:1px solid var(--u-border);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;color:var(--u-text);background:var(--u-bg);resize:vertical}
+.u-bulk-prompt:focus{outline:none;border-color:var(--u-accent)}
+.u-bulk-hist{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
+.u-bulk-histlabel{font-size:12px;color:var(--u-muted)}
+.u-bulk-histbtn{border:1px solid var(--u-border);background:var(--u-surface-2);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--u-text);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.u-bulk-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
+.u-bulk-go{display:inline-flex;align-items:center;gap:6px}
+.u-bulk-go svg{width:14px;height:14px}
+/* Gold shimmer ring on a ready quick reply, same as the draft cells. Countdown, sending, sent and error states drop it. */
+.u-qsend{position:relative}
+.u-qsend:not(.u-qsend-count):not(.u-qsend-sending):not(.u-qsend-sent):not(.u-qsend-err):not(:disabled)::before{content:"";position:absolute;inset:-2px;border-radius:999px;padding:2px;pointer-events:none;background:linear-gradient(110deg,var(--u-gold) 0%,var(--u-gold-hi) 25%,var(--u-gold) 50%,var(--u-gold-hi) 75%,var(--u-gold) 100%);background-size:250% 100%;animation:u-shimmer 3.2s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
+.u-qsend svg{width:12px;height:12px;flex:none}
+.u-qsend-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.u-qsend-count{border-color:var(--u-warn);background:color-mix(in srgb,var(--u-warn) 12%,transparent);color:var(--u-warn)}
+.u-qsend-sent{border-color:var(--u-accent);background:var(--u-accent);color:var(--u-accent-ink)}
+.u-qsend-err{border-color:var(--u-danger);color:var(--u-danger);background:transparent}
+.u-qsend:disabled{opacity:.9}
+/* delivery receipts */
+.u-rcpt{display:inline-flex;align-items:center;margin-left:4px;color:var(--u-muted)}
+.u-rcpt svg{width:13px;height:13px}
+.u-rcpt-ok{color:var(--u-highlight)}
+.u-rcpt-bad{color:var(--u-danger)}
+/* inline reply drafts under the latest client message */
+.u-inl{align-self:flex-start;max-width:78%;display:flex;flex-direction:column;gap:6px;margin-top:2px}
+.u-inl-h{display:flex;align-items:center;gap:4px}
+.u-inl-toggle{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--u-muted);font-size:12px;font-weight:600;padding:2px 6px;border-radius:6px;min-height:24px}
+.u-inl-toggle:hover{background:var(--u-surface-3);color:var(--u-text)}
+.u-inl-notnow{border:0;background:transparent;color:var(--u-muted);font-size:12px;padding:2px 6px;min-height:24px;border-radius:6px}
+.u-inl-notnow:hover{color:var(--u-text);background:var(--u-surface-3)}
+.u-inl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}
+.u-inl-cell{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;border:1px solid var(--u-border);background:var(--u-bg);border-radius:12px;padding:7px 10px;text-align:left;color:var(--u-text)}
+/* Gold shimmer ring, same as the composer's draft cells. Reduced motion leaves a still ring. */
+.u-inl-cell::before{content:"";position:absolute;inset:-1px;border-radius:13px;padding:1.5px;pointer-events:none;background:linear-gradient(110deg,var(--u-gold) 0%,var(--u-gold-hi) 25%,var(--u-gold) 50%,var(--u-gold-hi) 75%,var(--u-gold) 100%);background-size:250% 100%;animation:u-shimmer 3.2s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
+.u-inl-cell:hover{border-color:var(--u-highlight)}
+.u-inl-txt{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+/* Item action row (native InlineDrafts): under client messages, and inside activity cards. */
+.u-ia{align-self:flex-start;width:78%;display:flex;flex-direction:column;gap:6px;margin-top:2px}
+.u-ev .u-ia{width:100%;margin-top:6px}
+.u-ev>div{flex:1}
+.u-ev>div{min-width:0}
+.u-ev .u-ia svg{width:13px;height:13px;margin-top:0}
+.u-ia-h{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-left:-6px}
+.u-ia-h .u-inl-toggle svg{width:13px;height:13px}
+.u-ia-ai{display:flex;flex-direction:column;gap:6px;border:1px solid var(--u-border);background:var(--u-bg);border-radius:12px;padding:10px;min-width:min(420px,100%)}
+.u-ia-ai-label{font-size:12.5px;font-weight:700}
+.u-ia-ai-hint{font-size:12px;color:var(--u-muted)}
+.u-ia-ai-note{font-size:12px;color:var(--u-warn);background:color-mix(in srgb,var(--u-warn) 10%,transparent);border-radius:8px;padding:6px 8px}
+.u-ia-ai textarea{font:inherit;font-size:13.5px;color:var(--u-text);background:var(--u-surface-2);border:1px solid var(--u-border);border-radius:8px;padding:8px 10px;resize:vertical;min-height:64px}
+.u-ia-ai-row{display:flex;align-items:center;gap:10px;font-size:12px}
+.u-ia-ai-count{color:var(--u-muted);font-variant-numeric:tabular-nums}
+.u-ia-ai-err{color:var(--u-danger)}
+.u-cx-h4{display:flex;align-items:center;gap:6px}
+.u-cx-info{display:inline-grid;place-items:center;width:22px;height:22px;border:0;border-radius:999px;background:transparent;color:var(--u-muted);padding:0;cursor:pointer}
+.u-cx-info:hover{color:var(--u-highlight);background:var(--u-highlight-soft)}
+.u-cx-info svg{width:15px;height:15px}
+.u-cx-head{display:flex;align-items:center;gap:10px}
+.u-cx-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:999px;color:#fff;flex:none}
+.u-cx-rule{margin:10px 0}
+.u-cx-rule h4{margin:0 0 3px;font-size:14px}
+.u-cx-rule p{margin:0;font-size:13.5px;line-height:1.5;color:var(--u-muted)}
+.u-cx-sec{display:block;margin-top:14px;font-size:13px;font-weight:600}
+.u-cx-mocks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 10px}
+.u-cx-col{display:flex;flex-direction:column;gap:4px;min-width:0}
+.u-cx-label{font-size:11.5px;font-weight:500;color:var(--u-muted)}
+.u-cx-phone{border:1px solid var(--u-border);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:120px}
+.u-cx-coach{background:var(--u-surface-2)}
+.u-cx-coach-bub{align-self:flex-end;max-width:95%;background:var(--u-highlight);color:#fff;border-radius:12px;border-bottom-right-radius:4px;padding:8px 10px;font-size:12px;line-height:1.45}
+.u-cx-tpl{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.22);font-size:10px;font-weight:500}
+.u-cx-client{background:#e5ddd5;border-color:#d5cdc4}
+.u-cx-client-bub{align-self:flex-start;max-width:95%;background:#fff;color:#1c1c1e;border-radius:12px;border-top-left-radius:4px;padding:8px 10px;font-size:12px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08)}
+.u-cx-link{display:block;margin-top:6px;color:#027eb5;font-weight:500}
+.u-cx-meta{font-size:10px;color:var(--u-muted);text-align:center;margin-top:auto}
+.u-cx-client .u-cx-meta{color:#7a7269}
+.u-cx-foot{font-size:12px;line-height:1.5;color:var(--u-muted)}
+.u-offer-who{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--u-muted);margin:2px 0 8px}
+.u-offer-avs{display:inline-flex}
+.u-offer-avs .u-av{border:2px solid var(--u-bg);margin-left:-6px}
+.u-offer-avs .u-av:first-child{margin-left:0}
+.u-offer-list{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px}
+.u-offer-list li{display:flex;gap:8px;align-items:flex-start}
+.u-offer-tick{display:inline-flex;color:var(--u-accent);flex:none;margin-top:2px}
+.u-offer-tick svg{width:15px;height:15px}
+.u-ai-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
+.u-ai-plan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--u-border);border-radius:10px;padding:8px 11px;font-size:13px;margin:0 0 10px}
+.u-ai-plan .u-linkbtn{font-size:13px}
+.u-ai-err{color:var(--u-danger,#b42318);font-size:12.5px;width:100%}
+.u-ai-disclaimer{display:flex;gap:8px;align-items:flex-start;background:var(--u-highlight-soft);border-radius:10px;padding:9px 11px;font-size:12.5px;line-height:1.45;margin:6px 0 10px}
+.u-ai-disclaimer svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--u-highlight)}
+.u-ai-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--u-border);margin-bottom:10px}
+.u-ai-tab{border:0;background:transparent;padding:7px 10px;font-size:13px;font-weight:600;color:var(--u-muted);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:0}
+.u-ai-tab-on{color:var(--u-text);border-bottom-color:var(--u-highlight)}
+.u-ai-body{display:flex;flex-direction:column;gap:14px}
+.u-ai-sec{display:flex;flex-direction:column;gap:6px}
+.u-ai-sec h4{margin:0;font-size:14px}
+.u-ai-area,.u-ai-input{font:inherit;font-size:13.5px;color:var(--u-text);background:var(--u-surface-2);border:1px solid var(--u-border);border-radius:8px;padding:8px 10px;width:100%;box-sizing:border-box}
+.u-ai-area{resize:vertical}
+.u-ai-hr{border:0;border-top:1px solid var(--u-border);margin:8px 0}
+.u-ai-form{display:flex;flex-direction:column;gap:6px;border:1px solid var(--u-border);border-radius:10px;padding:10px}
+.u-ai-form label{font-size:12.5px;font-weight:700}
+.u-ai-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
+.u-ai-list li{border:1px solid var(--u-border);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
+.u-ai-item-head{display:flex;align-items:center;gap:6px;font-size:13px}
+.u-ai-check{color:var(--u-accent);display:inline-flex}
+.u-ai-check svg{width:14px;height:14px}
+.u-ai-tags{display:flex;flex-wrap:wrap;gap:4px}
+.u-ai-k{font-size:11.5px;font-weight:700;color:var(--u-muted);text-transform:uppercase;letter-spacing:.04em}
+.u-ai-v{font-size:13.5px;white-space:pre-wrap}
+.u-ai-voice{display:flex;flex-direction:column;gap:6px}
+.u-ai-locked{border:1px dashed var(--u-border);border-radius:10px;padding:12px;font-size:13px;color:var(--u-muted)}
+.u-ai-locked strong{color:var(--u-text)}
+.u-ai-field{display:flex;flex-direction:column;gap:3px;margin-top:10px}
+.u-ai-field textarea{font:inherit;font-size:13.5px;color:var(--u-text);background:var(--u-surface-2);border:1px solid var(--u-border);border-radius:8px;padding:8px 10px;resize:vertical}
+.u-ai-labelrow{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:700}
+.u-ai-sub{margin-top:16px!important;font-size:12.5px;font-weight:700;color:var(--u-muted)}
+.u-ai-ok{color:var(--u-accent);font-size:13px;font-weight:600}
+.u-ai-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--u-border);font-size:13px;color:var(--u-muted)}
+.u-ia-save{border:1px solid var(--u-accent);background:var(--u-accent);color:var(--u-accent-ink);border-radius:8px;padding:5px 12px;font-weight:600;font-size:13px;min-height:30px}
+.u-ia-save:disabled{opacity:.5}
+/* WhatsApp closed window */
+.u-wa{display:flex;gap:8px;align-items:flex-start;padding:8px 12px;border-radius:9px;background:color-mix(in srgb,var(--u-warn) 10%,var(--u-bg));border:1px solid color-mix(in srgb,var(--u-warn) 35%,transparent);font-size:13px;line-height:1.4}
+.u-wa-ico{display:inline-flex;color:var(--u-warn);flex:none;margin-top:2px}.u-wa-ico svg{width:14px;height:14px}
+.u-wa-body{min-width:0}
+.u-wa-more{display:inline-flex;align-items:center;gap:2px;border:0;background:transparent;color:var(--u-link);font-weight:600;font-size:12.5px;padding:0 4px;min-height:0;margin-left:4px}
+.u-wa-more svg{width:12px;height:12px}
+.u-wa-why{margin:6px 0 0;color:var(--u-muted);font-size:12.5px}
+.u-ghost{display:flex;flex-direction:column;align-items:flex-end;gap:2px;opacity:.7}
+.u-ghost-bub{border:1px dashed color-mix(in srgb,var(--u-out-ink) 50%,transparent);background:color-mix(in srgb,var(--u-out) 60%,transparent)}
+.u-ghost-cut{font-weight:700}
+/* beginning of history */
+.u-hist-start{align-self:center;font-size:12px;color:var(--u-muted);padding:4px 0}
+/* header badges */
+.u-chan-badge{display:inline-flex;align-items:center;justify-content:center;position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;color:#fff;border:2px solid var(--u-bg);box-sizing:content-box}
+.u-chan-wa{background:#25d366}
+.u-chan-sms{background:var(--u-highlight)}
+.u-r-av{grid-row:span 3;align-self:start}
+.u-r-av .u-av{grid-row:auto}
+.u-av-wrap{position:relative;display:inline-flex;flex:none}
+.u-head-status{margin-left:4px}
+/* attachments on thread messages */
+.u-att{display:flex;flex-wrap:wrap;gap:6px;max-width:78%}
+.u-att-out{align-self:flex-end;justify-content:flex-end}.u-att-in{align-self:flex-start}
+.u-att-img{border:0;background:none;padding:0;min-height:0;cursor:zoom-in}
+.u-att-img img{display:block;max-width:220px;max-height:220px;border-radius:12px;border:1px solid var(--u-border)}
+.u-att-desc{display:block;font-size:12px;color:var(--u-muted);max-width:220px}
+.u-att-video{display:block;max-width:280px;max-height:320px;border-radius:12px;background:#000;object-fit:contain}
+.u-att-audio{display:flex;flex-direction:column;gap:4px;max-width:300px}
+.u-att-player{width:100%;max-width:300px}
+.u-att-trans{font-size:13px;color:var(--u-muted);font-style:italic}
+.u-lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.85);display:grid;place-items:center;padding:24px}
+.u-lightbox img{max-width:100%;max-height:100%;border-radius:8px}
+.u-lightbox-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:999px;border:0;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center}
+.u-lightbox-x svg{width:18px;height:18px}
+.u-att-file{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--u-bg);border:1px solid var(--u-border);font-size:13px;color:var(--u-link);text-decoration:none}
+.u-att-file svg{width:14px;height:14px}
+.u-editor{width:100%;border:1px solid var(--u-border);border-radius:var(--u-radius);padding:10px 12px;min-height:64px;font:inherit;font-size:14.5px;background:var(--u-bg);color:var(--u-text);resize:vertical}
+.u-editor::placeholder{color:var(--u-muted)}
+.u-editor-rich{min-height:64px;max-height:220px;overflow-y:auto;white-space:normal;word-break:break-word;line-height:1.5}
+.u-editor-rich:empty::before{content:attr(data-placeholder);color:var(--u-muted);pointer-events:none}
+.u-editor-rich[aria-disabled="true"]{opacity:.6}
+/* Draft pills, ported from native: one per clause, hue hashed from the text, × drops it. */
+.u-seg{display:inline;padding:1px 2px;margin:0 2px;border-radius:3px;background:hsl(var(--u-seg-h) 55% var(--u-seg-l));color:var(--u-text);font-weight:500;user-select:none;transition:opacity .15s ease}
+.u-seg:hover{opacity:.85}
+/* Stock intro: no pill highlight, the text itself shimmers gold (gradient clipped to the glyphs). Reduced motion leaves a still gold gradient. */
+.u-seg-lock{cursor:default;user-select:text;padding:0;margin:0;border-radius:0;font-weight:600;background:linear-gradient(110deg,var(--u-gold-ink) 0%,var(--u-gold-ink-hi) 30%,var(--u-gold-ink) 50%,var(--u-gold-ink-hi) 70%,var(--u-gold-ink) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:u-shimmer 4s linear infinite}
+.u-seg-lock:hover{opacity:1}
+.u-seg-x{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;padding:0 8px;min-width:24px;min-height:22px;cursor:pointer;font-size:15px;font-weight:700;color:#111;background:rgba(255,200,0,.8);border-radius:999px;line-height:1;vertical-align:middle;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
+.u-seg-x:hover,.u-seg-x:active,.u-seg-x:focus-visible{color:#fff;background:#c00;outline:none}
+.u-editor:disabled{opacity:.6}
+.u-send{border:0;background:var(--u-accent);color:var(--u-accent-ink);font-weight:700;border-radius:9px;padding:8px 16px;min-height:40px}
+.u-send:disabled{opacity:.45}
+.u-gen{border:1px solid var(--u-border);background:var(--u-bg);border-radius:9px;padding:8px 14px;font-weight:600;min-height:40px}
+.u-gen:disabled{opacity:.5}
+.u-note{margin-top:8px;border-radius:9px;padding:9px 12px;font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
+.u-note-err{background:color-mix(in srgb,var(--u-danger) 9%,var(--u-bg));border:1px solid color-mix(in srgb,var(--u-danger) 35%,transparent)}
+.u-note-warn{background:color-mix(in srgb,var(--u-warn) 10%,var(--u-bg));border:1px solid color-mix(in srgb,var(--u-warn) 35%,transparent)}
+.u-note-ok{background:var(--u-highlight-soft)}
+.u-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;font-size:14px;border-bottom:1px solid var(--u-border);background:var(--u-accent-soft)}
+.u-headbtn{border:1px solid var(--u-border);background:var(--u-bg);border-radius:8px;padding:6px 11px;font-size:14px;font-weight:600;min-height:34px}
+.u-headbtn:disabled{opacity:.5}
+.u-connect{margin-left:4px;display:inline-flex;align-items:center;gap:7px;flex:none}
+/* AI settings + full screen: the right end of the conversation header (no panel header row). */
+.u-head-acts{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:none}
+.u-chan ~ .u-head-acts{margin-left:6px}
+.u-pane-head-empty{justify-content:flex-end;min-height:62px;box-sizing:border-box}
+/* On wide panels the toolbar leaves them to the conversation header. */
+.u-toolbar-acts{display:none}
+.u-toolbar .u-addbtn{flex:none}
+.u-connect svg{flex:none}
+.u-example{width:100%;border:1px dashed var(--u-border);border-radius:12px;padding:12px;background:var(--u-surface-2);display:flex;flex-direction:column}
+.u-ex-lab{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--u-muted);margin-bottom:6px}
+.u-sheet-wrap{position:absolute;inset:0;background:rgba(10,10,10,.45);display:grid;place-items:center;padding:16px;z-index:5}
+.u-sheet{width:min(560px,100%);max-height:100%;overflow:auto;background:var(--u-bg);color:var(--u-text);border:1px solid var(--u-border);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.25);padding:20px;outline:none}
+.u-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--u-muted)}
+.u-sheet h3{font-size:21px;margin:6px 0 8px}
+.u-lede{font-size:14.5px;color:var(--u-muted)}
+.u-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;align-items:center}
+.u-secondary{border:1px solid var(--u-border);background:var(--u-bg);border-radius:9px;padding:8px 14px;font-weight:600;min-height:40px}
+.u-steps{display:flex;gap:6px;margin-bottom:12px}
+.u-steps span{flex:1;height:4px;border-radius:999px;background:var(--u-surface-3)}
+.u-steps span.u-on{background:var(--u-highlight)}
+.u-plan{margin-top:14px;border:1px solid var(--u-highlight);border-radius:12px;padding:14px;background:var(--u-highlight-soft)}
+.u-plan-name{font-weight:700;font-size:15px}
+.u-plan-price{font-size:30px;font-weight:700;margin-top:2px}
+.u-plan-price small{font-size:15px;font-weight:500;color:var(--u-muted)}
+.u-plan-vs{font-size:13.5px;color:var(--u-muted)}
+.u-feats{margin:12px 0 0;padding-left:18px;font-size:14px}
+.u-feats li{margin:3px 0}
+.u-chanbox{margin-top:12px;border:1px solid var(--u-border);border-radius:12px;padding:11px 13px}
+.u-chanbox h4{font-size:15px}
+.u-chanbox p{font-size:14px;margin-top:4px;color:var(--u-text)}
+.u-tick{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:14.5px}
+.u-tick input{width:20px;height:20px;margin-top:1px;accent-color:var(--u-highlight)}
+.u-field{margin-top:12px;display:flex;flex-direction:column;gap:5px}
+.u-field>label,.u-field>span:first-child{font-size:13.5px;font-weight:600}
+.u-field select{border:1px solid var(--u-border);background:var(--u-bg);color:var(--u-text);border-radius:9px;padding:9px 11px;font:inherit;min-height:42px}
+.u-field input{border:1px solid var(--u-border);background:var(--u-bg);color:var(--u-text);border-radius:9px;padding:9px 11px;font:inherit;min-height:42px}
+.u-field input[aria-invalid="true"]{border-color:var(--u-danger)}
+.u-hint{font-size:13px;color:var(--u-muted)}
+.u-err{font-size:13px;color:var(--u-danger)}
+.u-chanpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
+.u-chanpick button{border:1px solid var(--u-border);background:var(--u-bg);border-radius:10px;padding:9px;text-align:left;min-height:56px}
+.u-chanpick button[aria-checked="true"]{border-color:var(--u-highlight);box-shadow:0 0 0 1px var(--u-highlight)}
+.u-chanpick b{display:block;font-size:14.5px}
+.u-chanpick small{font-size:12.5px;color:var(--u-muted)}
+@media (prefers-reduced-motion:reduce){.uplift *{transition:none!important;animation:none!important}}
+@container panel (max-width:759px){
+  .u-cx-mocks{grid-template-columns:1fr}
+  .u-inl-grid{grid-template-columns:1fr}
+  .u-ia{width:100%}
+  .u-split{grid-template-columns:1fr;height:min(80vh,720px)}
+  .u-split.u-show-thread .u-list{display:none}
+  .u-split:not(.u-show-thread) .u-pane{display:none}
+  .u-back{display:inline-flex}
+  .u-toolbar-acts{display:inline-flex;flex:none;margin-left:auto}
+  .u-toolbar-acts .u-head-acts{margin-left:0}
+  /* Phone widths: the toolbar wraps its buttons rather than cutting them off; the conversation header
+     keeps name, Connect and the buttons on one line by dropping the phone number and Connect's label. */
+  .u-toolbar{flex-wrap:wrap;row-gap:6px}
+  .u-sortgroup button{padding:4px 7px}
+  .u-pane-head{gap:8px;padding:10px 12px}
+  .u-pane-head .u-chan{display:none}
+  .u-who{flex:0 1 auto}
+  .u-who strong,.u-who small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .u-connect{padding:6px 9px}
+  .u-connect span{display:none}
+  .u-ag-grid{grid-template-columns:1fr}
+  .u-c-actions .u-meta{flex-basis:100%}
+  .u-sheet-wrap{padding:0}
+  .u-sheet{width:100%;height:100%;border-radius:0}
+}
+`;
+/** Add the panel stylesheet to `doc` once. Safe to call on every render. */
+export function injectStyles(doc = typeof document === "undefined" ? undefined : document) {
+    if (!doc || doc.getElementById(STYLE_ELEMENT_ID))
+        return;
+    const el = doc.createElement("style");
+    el.id = STYLE_ELEMENT_ID;
+    el.textContent = upliftStyles;
+    doc.head.appendChild(el);
+}
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2gB3B,CAAC;AAEF,4EAA4E;AAC5E,MAAM,UAAU,YAAY,CAAC,MAA4B,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;IAC7G,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,cAAc,CAAC,gBAAgB,CAAC;QAAE,OAAO;IACzD,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACtC,EAAE,CAAC,EAAE,GAAG,gBAAgB,CAAC;IACzB,EAAE,CAAC,WAAW,GAAG,YAAY,CAAC;IAC9B,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AAC3B,CAAC"}

package/dist/time.d.ts

@@ -0,0 +1,14 @@
+export declare function isSameDay(a: Date, b: Date): boolean;
+/** "5 Oct", or "5 Oct 2025" when the year differs from `now`. */
+export declare function shortDate(d: Date, now?: Date): string;
+/** Compact age for list rows: "now", "35m", "2h", "4d", "3w", then a short date. Empty for null. */
+export declare function relativeShort(iso: string | null | undefined, now?: Date): string;
+/** Sentence-ready age: "just now", "35m ago", "4d ago", "3w ago", then "on 5 Oct". Empty for null. */
+export declare function relativeAgo(iso: string | null | undefined, now?: Date): string;
+/** Day separator text: "Today", "Yesterday", a weekday inside the last week, else a short date. */
+export declare function dayLabel(iso: string, now?: Date): string;
+/** Local 24-hour clock, "07:02". */
+export declare function clockLabel(iso: string | null | undefined): string;
+/** Local calendar-day key for grouping, "2026-10-05". */
+export declare function dayKey(iso: string | null | undefined): string;
+//# sourceMappingURL=time.d.ts.map

package/dist/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../src/time.ts"],"names":[],"mappings":"AAeA,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO,CAEnD;AAED,iEAAiE;AACjE,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,GAAE,IAAiB,GAAG,MAAM,CAGjE;AAED,oGAAoG;AACpG,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,GAAE,IAAiB,GAAG,MAAM,CAa5F;AAED,sGAAsG;AACtG,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,GAAE,IAAiB,GAAG,MAAM,CAK1F;AAED,mGAAmG;AACnG,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,GAAE,IAAiB,GAAG,MAAM,CAQpE;AAED,oCAAoC;AACpC,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAIjE;AAED,yDAAyD;AACzD,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAI7D"}