@singlebase/elements 0.3.0 → 0.5.0

package/dist/chat-bXaRWel7.js

@@ -0,0 +1,4926 @@
+var gt = Object.defineProperty;
+var qe = (n) => {
+  throw TypeError(n);
+};
+var mt = (n, e, t) => e in n ? gt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var T = (n, e, t) => mt(n, typeof e != "symbol" ? e + "" : e, t), Ge = (n, e, t) => e.has(n) || qe("Cannot " + t);
+var p = (n, e, t) => (Ge(n, e, "read from private field"), t ? t.call(n) : e.get(n)), h = (n, e, t) => e.has(n) ? qe("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t), u = (n, e, t, i) => (Ge(n, e, "write to private field"), i ? i.call(n, t) : e.set(n, t), t);
+import { css as bt, LitElement as ft, html as r, nothing as m, svg as $ } from "lit";
+import { property as w, state as v, customElement as xt } from "lit/decorators.js";
+import { repeat as vt } from "lit/directives/repeat.js";
+import { getDefaultClient as yt } from "@singlebase/core";
+import { f as z, a as Ve, t as kt } from "./files-BOwtpYyQ.js";
+if (typeof CSS < "u" && "registerProperty" in CSS)
+  try {
+    CSS.registerProperty({
+      name: "--sb-ai-angle",
+      syntax: "<angle>",
+      inherits: !1,
+      initialValue: "0deg"
+    });
+  } catch {
+  }
+const wt = bt`
+  :host {
+    --c-ink: var(--sb-ink, #16181a);
+    --c-ink2: var(--sb-ink-2, #41464b);
+    --c-muted: var(--sb-muted-ink, #61666c);
+    --c-faint: #8a8f95;
+    --c-bg: var(--sb-surface, #ffffff);
+    --c-bg2: var(--sb-surface-alt, #fafafa);
+    --c-hover: var(--sb-hover, #f2f3f4);
+    --c-line: var(--sb-border, #e4e6e9);
+    --c-line2: var(--sb-divider, #ecedee);
+    --c-strong: var(--sb-border-strong, #cdd1d6);
+    --c-brand: var(--sb-accent, #16181a);
+    --c-on-brand: var(--sb-on-accent, #ffffff);
+    --c-danger: var(--sb-danger, #b4231a);
+    --c-ok: var(--sb-ok, #0f6b4a);
+    --c-mono: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    --c-r: var(--sb-radius, 4px);
+    --c-r2: calc(var(--c-r) * 1.5);
+    --c-r3: calc(var(--c-r) * 2);
+    --c-r4: calc(var(--c-r) * 3);
+    --c-glow: 0.6;
+    --c-conic: conic-gradient(
+      from var(--sb-ai-angle, 0deg),
+      oklch(0.72 0.15 295),
+      oklch(0.74 0.13 245),
+      oklch(0.8 0.11 190),
+      oklch(0.84 0.12 85),
+      oklch(0.78 0.12 350),
+      oklch(0.72 0.15 295)
+    );
+    --c-z: var(--sb-chat-z, 1000);
+    display: block;
+    height: 100%;
+    min-height: 0;
+    color-scheme: light;
+  }
+
+  :host([theme="dark"]) {
+    --sb-hover: #24272b;
+    --sb-ink-2: #c9ccd0;
+    --sb-divider: #26292d;
+    --c-faint: #7c8187;
+    color-scheme: dark;
+  }
+
+  :host([glow="vivid"]) {
+    --c-glow: 1;
+  }
+
+  :host([embed="inline"]) {
+    height: auto;
+  }
+
+  :host([embed="launcher"]) {
+    height: 0;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  button {
+    font: inherit;
+    color: inherit;
+  }
+
+  button:focus-visible,
+  input:focus-visible,
+  textarea:focus-visible,
+  [role="button"]:focus-visible {
+    outline: 2px solid var(--c-ink);
+    outline-offset: 1px;
+  }
+
+  .mono {
+    font-family: var(--c-mono);
+  }
+
+  .label {
+    font-family: var(--c-mono);
+    font-size: 11px;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--c-muted);
+  }
+
+  /* ── frames ───────────────────────────────────────────── */
+
+  .frame {
+    position: relative;
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    background: var(--c-bg);
+    color: var(--c-ink);
+    overflow: hidden;
+  }
+
+  .frame.boxed {
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r4);
+  }
+
+  .frame.inline {
+    width: 440px;
+    height: 660px;
+    min-width: 340px;
+    min-height: 480px;
+    max-width: 100%;
+    resize: both;
+    box-shadow: 0 1px 2px rgba(22, 24, 26, 0.06);
+  }
+
+  @media (max-width: 559px) {
+    .frame.inline {
+      width: 100%;
+      min-width: 0;
+      resize: none;
+    }
+  }
+
+  .frame.launcher {
+    position: fixed;
+    bottom: 96px;
+    right: 24px;
+    z-index: var(--c-z);
+    width: 420px;
+    height: min(680px, calc(100vh - 120px));
+    max-width: calc(100vw - 48px);
+    box-shadow: 0 24px 60px -24px rgba(22, 24, 26, 0.35);
+    transform-origin: bottom right;
+    animation: scaleIn 0.2s ease-out;
+  }
+
+  :host([position="left"]) .frame.launcher {
+    right: auto;
+    left: 24px;
+    transform-origin: bottom left;
+  }
+
+  .frame.expanded {
+    position: fixed;
+    inset: 24px;
+    width: auto;
+    height: auto;
+    max-width: none;
+    z-index: var(--c-z);
+    resize: none;
+    box-shadow: 0 24px 60px -24px rgba(22, 24, 26, 0.35);
+    animation: scaleIn 0.2s ease-out;
+  }
+
+  .frame.full {
+    position: fixed;
+    inset: 0;
+    width: auto;
+    height: auto;
+    max-width: none;
+    border-radius: 0;
+    border: none;
+    z-index: var(--c-z);
+    resize: none;
+  }
+
+  .root {
+    position: relative;
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    font-family: var(--sb-font, "Geist", -apple-system, "Segoe UI", Helvetica, sans-serif);
+    background: var(--c-bg);
+    color: var(--c-ink);
+  }
+
+  /* ── launcher ─────────────────────────────────────────── */
+
+  .launcher-btn {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: calc(var(--c-z) + 1);
+    width: 56px;
+    height: 56px;
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    background: var(--c-brand);
+    color: var(--c-on-brand);
+    box-shadow: 0 12px 28px -10px rgba(22, 24, 26, 0.45);
+  }
+
+  :host([position="left"]) .launcher-btn,
+  :host([position="left"]) .bubble {
+    right: auto;
+    left: 24px;
+  }
+
+  .badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 12px;
+    height: 12px;
+    border-radius: 999px;
+    background: var(--c-danger);
+    border: 2px solid var(--c-bg);
+  }
+
+  .bubble {
+    position: fixed;
+    bottom: 96px;
+    right: 24px;
+    z-index: var(--c-z);
+    width: 260px;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px 10px 12px 14px;
+    background: var(--c-bg);
+    color: var(--c-ink);
+    border: 1px solid var(--c-line);
+    border-radius: calc(var(--c-r) * 2.5);
+    box-shadow: 0 12px 32px -12px rgba(22, 24, 26, 0.25);
+    font-family: var(--sb-font, "Geist", -apple-system, "Segoe UI", Helvetica, sans-serif);
+    animation: aiIn 0.25s ease-out;
+  }
+
+  .bubble-text {
+    flex: 1;
+    min-width: 0;
+    text-align: left;
+    font-size: 13.5px;
+    line-height: 1.45;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  /* ── icon buttons ─────────────────────────────────────── */
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: var(--c-r);
+    background: transparent;
+    color: var(--c-muted);
+    cursor: pointer;
+  }
+
+  .icon:hover:not(:disabled),
+  .icon.on {
+    color: var(--c-ink);
+  }
+
+  .icon:hover:not(:disabled) {
+    background: var(--c-hover);
+  }
+
+  .icon.danger:hover:not(:disabled) {
+    color: var(--c-danger);
+  }
+
+  .icon:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  .icon.sm {
+    width: 24px;
+    height: 24px;
+  }
+
+  svg.i {
+    width: 16px;
+    height: 16px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  svg.i.filled path {
+    fill: currentColor;
+  }
+
+  @media (pointer: coarse) {
+    .icon {
+      width: 44px;
+      height: 44px;
+    }
+  }
+
+  /* ── sidebar ──────────────────────────────────────────── */
+
+  .scrim {
+    position: absolute;
+    inset: 0;
+    z-index: 29;
+    background: rgba(22, 24, 26, 0.18);
+  }
+
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+    background: var(--c-bg2);
+    border-right: 1px solid var(--c-line);
+  }
+
+  .sidebar.docked {
+    position: relative;
+    flex: 0 0 272px;
+    width: 272px;
+  }
+
+  .sidebar.overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 30;
+    width: min(280px, 86%);
+    box-shadow: 12px 0 32px -16px rgba(22, 24, 26, 0.25);
+    animation: slideIn 0.15s ease-out;
+  }
+
+  .side-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 14px 12px 10px 16px;
+  }
+
+  .side-tools {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0 12px 8px;
+  }
+
+  .new-chat {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-height: 34px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--c-on-brand);
+    background: var(--c-brand);
+    border: 1px solid var(--c-brand);
+    border-radius: var(--c-r2);
+    padding: 8px 12px;
+    cursor: pointer;
+  }
+
+  .new-chat:hover {
+    filter: brightness(1.2);
+  }
+
+  .search {
+    width: 100%;
+    font: inherit;
+    font-size: 13px;
+    color: var(--c-ink);
+    background: var(--c-bg);
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+    padding: 8px 10px;
+    outline: none;
+  }
+
+  .search:focus {
+    border-color: var(--c-ink);
+  }
+
+  .threads {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 4px 12px 12px;
+  }
+
+  .group {
+    font-family: var(--c-mono);
+    font-size: 11px;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--c-muted);
+    padding: 10px 8px 6px;
+  }
+
+  .thread {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 34px;
+    width: 100%;
+    font-size: 13px;
+    color: var(--c-ink);
+    border-radius: var(--c-r2);
+    padding: 3px 4px 3px 10px;
+    cursor: pointer;
+  }
+
+  .thread:hover {
+    background: var(--c-hover);
+  }
+
+  .thread.active {
+    background: var(--c-line2);
+    font-weight: 500;
+  }
+
+  .thread-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .thread-actions {
+    display: none;
+    gap: 0;
+  }
+
+  .thread:hover .thread-actions,
+  .thread:focus-within .thread-actions {
+    display: flex;
+  }
+
+  .thread-rename {
+    flex: 1;
+    min-width: 0;
+    font: inherit;
+    color: var(--c-ink);
+    background: var(--c-bg);
+    border: 1px solid var(--c-ink);
+    border-radius: var(--c-r);
+    padding: 3px 6px;
+    outline: none;
+  }
+
+  .side-note {
+    font-size: 12.5px;
+    color: var(--c-muted);
+    padding: 6px 10px;
+  }
+
+  .skeleton {
+    height: 28px;
+    margin: 3px 0;
+    border-radius: var(--c-r2);
+    background: linear-gradient(90deg, var(--c-hover) 0%, var(--c-line2) 50%, var(--c-hover) 100%);
+    background-size: 200% 100%;
+    animation: aiShimmer 1.6s linear infinite;
+  }
+
+  /* ── main column ──────────────────────────────────────── */
+
+  .main {
+    container: chat / inline-size;
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-height: 52px;
+    padding: 10px 8px 10px 12px;
+    border-bottom: 1px solid var(--c-line);
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  .header-right {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .title {
+    min-width: 0;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: none;
+    border: none;
+    padding: 2px 4px;
+    border-radius: var(--c-r);
+    cursor: text;
+    animation: aiIn 0.25s ease-out;
+  }
+
+  .title:hover:not(:disabled) {
+    background: var(--c-hover);
+  }
+
+  .title:disabled {
+    cursor: default;
+  }
+
+  .title-input {
+    min-width: 0;
+    width: 320px;
+    max-width: 100%;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--c-ink);
+    background: var(--c-bg);
+    border: 1px solid var(--c-ink);
+    border-radius: var(--c-r);
+    padding: 2px 6px;
+    outline: none;
+  }
+
+  .divider {
+    width: 1px;
+    height: 18px;
+    background: var(--c-line);
+    margin: 0 4px;
+  }
+
+  .menu-wrap {
+    position: relative;
+  }
+
+  .menu-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+  }
+
+  .menu {
+    position: absolute;
+    right: 0;
+    top: 34px;
+    z-index: 41;
+    width: 220px;
+    display: flex;
+    flex-direction: column;
+    padding: 4px;
+    background: var(--c-bg);
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+    box-shadow: 0 12px 32px -12px rgba(22, 24, 26, 0.22);
+    animation: aiIn 0.15s ease-out;
+  }
+
+  .menu .label {
+    font-size: 10.5px;
+    padding: 8px 10px 6px;
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 10px;
+    width: 100%;
+    text-align: left;
+    font-size: 13px;
+    background: none;
+    border: none;
+    border-radius: var(--c-r);
+    padding: 8px 10px;
+    cursor: pointer;
+  }
+
+  .menu-item:hover {
+    background: var(--c-hover);
+  }
+
+  .menu-item .ext {
+    font-family: var(--c-mono);
+    font-size: 11px;
+    color: var(--c-muted);
+  }
+
+  .scroller {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .banner {
+    margin: 10px 16px 0;
+    padding: 8px 12px;
+    font-size: 12.5px;
+    color: var(--c-ink2);
+    background: var(--c-bg2);
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+  }
+
+  /* ── welcome ──────────────────────────────────────────── */
+
+  .welcome {
+    max-width: 640px;
+    min-height: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20px;
+    padding: 28px 18px;
+  }
+
+  .welcome-head {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .welcome-logo {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+    border-radius: var(--c-r2);
+  }
+
+  .welcome h2 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+
+  .welcome p {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.55;
+    color: var(--c-muted);
+    text-wrap: pretty;
+  }
+
+  .prompts {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .prompt {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    text-align: left;
+    background: var(--c-bg);
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+    padding: 12px 14px;
+    cursor: pointer;
+    transition:
+      border-color 0.15s,
+      box-shadow 0.15s;
+  }
+
+  .prompt:hover {
+    border-color: var(--c-ink);
+    box-shadow: 0 6px 18px -10px rgba(22, 24, 26, 0.25);
+  }
+
+  .prompt .label {
+    font-size: 10.5px;
+    letter-spacing: 0.06em;
+  }
+
+  .prompt-text {
+    font-size: 13.5px;
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  @container chat (max-width: 480px) {
+    .prompts {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  /* ── messages ─────────────────────────────────────────── */
+
+  .thread-view {
+    max-width: 760px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    padding: 20px 16px 28px;
+  }
+
+  .msg {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--c-r3);
+  }
+
+  .msg.user {
+    align-self: flex-end;
+    max-width: 80%;
+    align-items: flex-end;
+    gap: 6px;
+    margin-bottom: -22px;
+    animation: aiIn 0.25s ease-out;
+  }
+
+  .bubble-user {
+    padding: 10px 14px;
+    font-size: 14.5px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    background: var(--c-hover);
+    border-radius: calc(var(--c-r) * 2.5) calc(var(--c-r) * 2.5) 2px calc(var(--c-r) * 2.5);
+  }
+
+  .attachments {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 6px;
+  }
+
+  .doc-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    font-size: 12.5px;
+    border-radius: var(--c-r2);
+    border: 1px solid var(--c-line);
+    background: var(--c-bg);
+  }
+
+  .doc-chip .ext {
+    font-family: var(--c-mono);
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: var(--c-muted);
+  }
+
+  .doc-chip .name {
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  .msg:hover .toolbar,
+  .msg:focus-within .toolbar,
+  .toolbar.pinned {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .toolbar {
+      opacity: 1;
+    }
+  }
+
+  .msg.bot .toolbar {
+    margin-left: -6px;
+  }
+
+  .time {
+    font-family: var(--c-mono);
+    font-size: 11px;
+    color: var(--c-faint);
+    padding: 0 6px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .note {
+    font-size: 12px;
+    color: var(--c-muted);
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  .saved {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-family: var(--c-mono);
+    font-size: 10.5px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--c-ink);
+  }
+
+  .saved svg {
+    width: 12px;
+    height: 12px;
+    fill: currentColor;
+    stroke: currentColor;
+    stroke-width: 1.5;
+  }
+
+  .bot-body {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .edit-box {
+    width: 440px;
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    border: 1px solid var(--c-ink);
+    border-radius: var(--c-r3);
+    background: var(--c-bg);
+  }
+
+  .edit-box textarea {
+    width: 100%;
+    resize: vertical;
+    font: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--c-ink);
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 4px;
+  }
+
+  .row-end {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .btn {
+    font-size: 12.5px;
+    font-weight: 500;
+    border-radius: var(--c-r);
+    padding: 6px 12px;
+    cursor: pointer;
+    background: transparent;
+    color: var(--c-muted);
+    border: 1px solid var(--c-line);
+  }
+
+  .btn:hover {
+    color: var(--c-ink);
+    background: var(--c-bg2);
+  }
+
+  .btn.primary {
+    background: var(--c-brand);
+    color: var(--c-on-brand);
+    border-color: var(--c-brand);
+  }
+
+  .btn.primary:hover {
+    filter: brightness(1.2);
+  }
+
+  .error-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 12px;
+    font-size: 13px;
+    color: var(--c-danger);
+    border: 1px solid var(--sb-danger-border, #f3d6d3);
+    background: var(--sb-danger-bg, #fdf1f0);
+    border-radius: var(--c-r2);
+  }
+
+  .followups {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .followup {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 8px;
+    text-align: left;
+    font-size: 13px;
+    background: var(--c-bg);
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+    padding: 6px 12px;
+    cursor: pointer;
+    animation: aiIn 0.25s ease-out;
+  }
+
+  .followup:hover {
+    background: var(--c-hover);
+  }
+
+  .followup .arrow {
+    font-family: var(--c-mono);
+    color: var(--c-muted);
+  }
+
+  .jump {
+    position: absolute;
+    left: 50%;
+    bottom: 8px;
+    transform: translateX(-50%);
+    z-index: 5;
+    font-size: 12.5px;
+    font-weight: 500;
+    color: var(--c-on-brand);
+    background: var(--c-brand);
+    border: none;
+    border-radius: 999px;
+    padding: 6px 14px;
+    cursor: pointer;
+    box-shadow: 0 8px 20px -10px rgba(22, 24, 26, 0.4);
+    animation: aiIn 0.2s ease-out;
+  }
+
+  /* ── rendered answer ──────────────────────────────────── */
+
+  .answer {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    font-size: 14.5px;
+    line-height: 1.7;
+  }
+
+  .answer p {
+    margin: 0;
+    text-wrap: pretty;
+    overflow-wrap: anywhere;
+  }
+
+  .answer .raw {
+    white-space: pre-wrap;
+  }
+
+  .answer h3 {
+    margin: 6px 0 0;
+    font-size: 15.5px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.4;
+  }
+
+  .answer ul,
+  .answer ol {
+    margin: 0;
+    padding-left: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .answer li {
+    line-height: 1.65;
+    padding-left: 2px;
+  }
+
+  .answer strong {
+    font-weight: 600;
+  }
+
+  .answer a {
+    color: var(--c-ink);
+    text-underline-offset: 3px;
+  }
+
+  .answer code.inline {
+    font-family: var(--c-mono);
+    font-size: 12.5px;
+    background: var(--c-hover);
+    border-radius: calc(var(--c-r) * 0.75);
+    padding: 1px 5px;
+  }
+
+  .quote {
+    font-size: 13.5px;
+    line-height: 1.6;
+    color: var(--c-ink2);
+    background: var(--c-bg2);
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+    padding: 10px 14px;
+  }
+
+  .code {
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+    overflow: hidden;
+    background: var(--c-bg2);
+  }
+
+  .code-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 7px 12px;
+    border-bottom: 1px solid var(--c-line);
+  }
+
+  .code-head .label {
+    font-size: 11px;
+  }
+
+  .text-btn {
+    font-size: 12px;
+    color: var(--c-muted);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .text-btn:hover {
+    color: var(--c-ink);
+  }
+
+  .text-btn.underline {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  .code pre {
+    margin: 0;
+    padding: 12px 14px;
+    overflow-x: auto;
+    font-family: var(--c-mono);
+    font-size: 13px;
+    line-height: 1.6;
+  }
+
+  .table {
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+    overflow-x: auto;
+  }
+
+  .table table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .table th {
+    text-align: left;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--c-muted);
+    background: var(--c-bg2);
+    border-bottom: 1px solid var(--c-line);
+    padding: 9px 12px;
+    white-space: nowrap;
+  }
+
+  .table td {
+    padding: 9px 12px;
+    border-top: 1px solid var(--c-line2);
+    white-space: nowrap;
+  }
+
+  .table th:first-child,
+  .table td:first-child {
+    min-width: 120px;
+  }
+
+  .cite {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 17px;
+    height: 17px;
+    padding: 0 4px;
+    margin: 0 1px 0 3px;
+    vertical-align: 2px;
+    font: 500 10px var(--c-mono);
+    border-radius: calc(var(--c-r) * 0.75);
+    cursor: pointer;
+    border: 1px solid var(--c-strong);
+    background: var(--c-hover);
+    color: var(--c-ink);
+  }
+
+  .cite:hover,
+  .cite.active {
+    background: var(--c-ink);
+    color: var(--c-bg);
+    border-color: var(--c-ink);
+  }
+
+  .chart {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+    padding: 14px 16px 12px;
+    background: var(--c-bg);
+  }
+
+  .chart-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px 16px;
+  }
+
+  .chart-title {
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  .legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 12px;
+  }
+
+  .legend span {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--c-ink2);
+  }
+
+  .swatch {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+  }
+
+  .bars {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .bar-row {
+    display: grid;
+    grid-template-columns: 92px minmax(0, 1fr) 64px;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .bar-label {
+    font-size: 12.5px;
+    color: var(--c-ink2);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .bar-track {
+    display: flex;
+    height: 12px;
+    background: var(--c-hover);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  .bar-fill {
+    display: flex;
+    height: 100%;
+    transform-origin: left;
+    animation: aiGrow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .bar-value {
+    font-family: var(--c-mono);
+    font-size: 11.5px;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .line-chart {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-left: 48px;
+  }
+
+  .plot {
+    position: relative;
+    height: 170px;
+  }
+
+  .tick {
+    position: absolute;
+    left: 0;
+    right: 0;
+    border-top: 1px dashed var(--c-line2);
+  }
+
+  .tick.base {
+    border-top: 1px solid var(--c-strong);
+  }
+
+  .tick span,
+  .x-labels span {
+    font-family: var(--c-mono);
+    font-size: 10.5px;
+    color: var(--c-faint);
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .tick span {
+    position: absolute;
+    right: calc(100% + 8px);
+    top: -7px;
+  }
+
+  .plot svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+
+  .plot polyline {
+    fill: none;
+    stroke-width: 2;
+    vector-effect: non-scaling-stroke;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    stroke-dasharray: 1;
+    animation: aiDraw 1s ease-out;
+  }
+
+  .x-labels {
+    display: flex;
+    justify-content: space-between;
+    gap: 4px;
+  }
+
+  .chart-pending {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 190px;
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+    background: linear-gradient(90deg, var(--c-bg2) 0%, var(--c-hover) 50%, var(--c-bg2) 100%);
+    background-size: 200% 100%;
+    animation: aiShimmer 1.6s linear infinite;
+  }
+
+  .gallery {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 10px;
+    max-width: 520px;
+  }
+
+  .gallery.many {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    max-width: 100%;
+  }
+
+  .gallery figure {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .gallery img {
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    max-height: 320px;
+    object-fit: contain;
+    border-radius: var(--c-r2);
+    border: 1px solid var(--c-line);
+    background: var(--c-bg2);
+  }
+
+  .img-missing {
+    aspect-ratio: 16 / 9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--c-r2);
+    border: 1px dashed var(--c-strong);
+    background: repeating-linear-gradient(135deg, var(--c-bg2) 0 10px, var(--c-hover) 10px 20px);
+  }
+
+  figcaption {
+    font-family: var(--c-mono);
+    font-size: 11px;
+    color: var(--c-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .caret {
+    display: inline-block;
+    width: 7px;
+    height: 15px;
+    margin-top: -6px;
+    background: var(--c-brand);
+    animation: rgcaret 1s steps(1) infinite;
+  }
+
+  /* ── sources ──────────────────────────────────────────── */
+
+  .retrieval {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r2);
+    background: var(--c-bg2);
+  }
+
+  .retrieval-toggle {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    text-align: left;
+    font-size: 12.5px;
+    color: var(--c-ink2);
+    background: none;
+    border: none;
+    padding: 9px 12px;
+    cursor: pointer;
+  }
+
+  .retrieval-toggle .chev,
+  .retrieval-toggle .ms {
+    font-family: var(--c-mono);
+    font-size: 11px;
+    color: var(--c-muted);
+  }
+
+  .retrieval-list {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid var(--c-line);
+    padding: 4px 12px;
+  }
+
+  .passage {
+    display: grid;
+    grid-template-columns: 22px minmax(0, 1fr) 64px;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    text-align: left;
+    background: none;
+    border: none;
+    border-bottom: 1px solid var(--c-line2);
+    padding: 8px 0;
+    cursor: pointer;
+  }
+
+  .passage:last-child {
+    border-bottom: none;
+  }
+
+  .passage .n,
+  .passage .score {
+    font-family: var(--c-mono);
+    font-size: 11px;
+    color: var(--c-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .passage .what {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  .passage .what span:first-child {
+    font-size: 12.5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .passage .what span:last-child {
+    font-size: 11.5px;
+    color: var(--c-muted);
+  }
+
+  .relevance {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    align-items: flex-end;
+  }
+
+  .relevance-track {
+    width: 64px;
+    height: 3px;
+    background: var(--c-line);
+    border-radius: 99px;
+    overflow: hidden;
+  }
+
+  .relevance-fill {
+    display: block;
+    height: 100%;
+    background: var(--c-brand);
+  }
+
+  .cards {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 8px;
+  }
+
+  .source-card {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+    text-align: left;
+    padding: 10px 12px;
+    border-radius: var(--c-r2);
+    cursor: pointer;
+    background: var(--c-bg);
+    border: 1px solid var(--c-line);
+  }
+
+  .source-card:hover,
+  .source-card.active {
+    border-color: var(--c-ink);
+  }
+
+  .source-card .top {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .num {
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: calc(var(--c-r) * 0.75);
+    border: 1px solid var(--c-strong);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--c-mono);
+    font-size: 10px;
+    background: var(--c-bg);
+  }
+
+  .source-card .t {
+    font-size: 13px;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .source-card .s {
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--c-muted);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+    background: var(--c-bg);
+    border-left: 1px solid var(--c-line);
+    animation: aiIn 0.15s ease-out;
+  }
+
+  .panel.docked {
+    position: relative;
+    flex: 0 0 400px;
+    width: 400px;
+  }
+
+  .panel.overlay {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 30;
+    width: min(420px, 100%);
+    box-shadow: -12px 0 32px -16px rgba(22, 24, 26, 0.25);
+  }
+
+  .panel-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--c-line);
+  }
+
+  .panel-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 18px;
+  }
+
+  .panel-body h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+
+  .panel-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .panel-meta .path {
+    font-family: var(--c-mono);
+    font-size: 11px;
+    color: var(--c-muted);
+    overflow-wrap: anywhere;
+  }
+
+  .panel-meta .meta {
+    font-size: 12px;
+    color: var(--c-muted);
+  }
+
+  .passage-box {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px 14px;
+    border-radius: var(--c-r2);
+    background: var(--c-hover);
+    border: 1px solid var(--c-strong);
+  }
+
+  .passage-box .text {
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--c-ink2);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .passage-foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding-top: 8px;
+    border-top: 1px solid var(--c-line);
+  }
+
+  .copy-ref {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    background: var(--c-bg);
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r);
+    padding: 4px 8px;
+    cursor: pointer;
+  }
+
+  .copy-ref:hover {
+    border-color: var(--c-strong);
+  }
+
+  .panel-foot {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 12px 18px 16px;
+    border-top: 1px solid var(--c-line);
+  }
+
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .chip {
+    font-size: 12px;
+    background: var(--c-bg);
+    border: 1px solid var(--c-line);
+    border-radius: var(--c-r);
+    padding: 4px 8px;
+    cursor: pointer;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .chip:hover {
+    border-color: var(--c-ink);
+  }
+
+  /* ── composer ─────────────────────────────────────────── */
+
+  .composer-wrap {
+    padding: 0 12px 12px;
+  }
+
+  .composer-col {
+    max-width: 760px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .composer-box {
+    position: relative;
+  }
+
+  .composer {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 8px;
+    border-radius: calc(var(--c-r) * 2.25);
+    background: var(--c-bg);
+    border: 1px solid var(--c-strong);
+    box-shadow:
+      0 1px 2px rgba(22, 24, 26, 0.04),
+      0 12px 32px -18px rgba(22, 24, 26, 0.22);
+    transition: border-color 0.15s;
+  }
+
+  .composer:focus-within {
+    border-color: var(--c-ink);
+  }
+
+  .composer.busy {
+    border-color: transparent;
+  }
+
+  :host([glow="off"]) .composer.busy {
+    border-color: var(--c-strong);
+  }
+
+  .composer textarea {
+    width: 100%;
+    resize: none;
+    font: inherit;
+    font-size: 14.5px;
+    line-height: 1.5;
+    color: var(--c-ink);
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 6px 6px 2px;
+    max-height: 176px;
+  }
+
+  .composer textarea::placeholder {
+    color: var(--c-faint);
+  }
+
+  .composer-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .attach {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12.5px;
+    color: var(--c-muted);
+    background: none;
+    border: none;
+    border-radius: var(--c-r);
+    padding: 6px 8px;
+    cursor: pointer;
+  }
+
+  .attach:hover {
+    background: var(--c-hover);
+    color: var(--c-ink);
+  }
+
+  .send {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: var(--c-r2);
+    border: 1px solid var(--c-brand);
+    cursor: pointer;
+    background: var(--c-brand);
+    color: var(--c-on-brand);
+    transition: background 0.15s;
+  }
+
+  .send:disabled {
+    cursor: default;
+    background: var(--c-line);
+    border-color: var(--c-line);
+    color: var(--c-faint);
+  }
+
+  .send.stop {
+    background: var(--c-bg);
+    color: var(--c-ink);
+    border-color: var(--c-ink);
+  }
+
+  .send.stop svg {
+    fill: currentColor;
+    stroke: none;
+  }
+
+  .pending-files {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 2px 2px 4px;
+  }
+
+  .pending-file {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 8px 4px 4px;
+    font-size: 12.5px;
+    border-radius: var(--c-r2);
+    border: 1px solid var(--c-line);
+    background: var(--c-bg2);
+    animation: aiIn 0.2s ease-out;
+  }
+
+  .pending-file .ext {
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--c-r);
+    background: var(--c-bg);
+    border: 1px solid var(--c-line);
+    font-family: var(--c-mono);
+    font-size: 9px;
+    letter-spacing: 0.03em;
+    color: var(--c-muted);
+  }
+
+  .pending-file .meta {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  .pending-file .name {
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .pending-file .size {
+    font-family: var(--c-mono);
+    font-size: 10.5px;
+    color: var(--c-muted);
+  }
+
+  .pending-file button {
+    font-size: 15px;
+    line-height: 1;
+    color: var(--c-muted);
+    background: none;
+    border: none;
+    padding: 0 0 0 2px;
+    cursor: pointer;
+  }
+
+  .pending-file button:hover {
+    color: var(--c-danger);
+  }
+
+  .footnote,
+  .branding {
+    text-align: center;
+    font-size: 11.5px;
+    color: var(--c-muted);
+  }
+
+  .branding {
+    padding: 0 12px 10px;
+    margin-top: -4px;
+  }
+
+  .branding a {
+    font-family: var(--c-mono);
+    font-size: 10.5px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--c-muted);
+    text-decoration: none;
+  }
+
+  .branding a:hover {
+    color: var(--c-ink);
+  }
+
+  .toast {
+    position: absolute;
+    left: 50%;
+    bottom: 124px;
+    transform: translateX(-50%);
+    z-index: 35;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 9px 14px;
+    background: var(--c-ink);
+    color: var(--c-bg);
+    font-size: 13px;
+    border-radius: var(--c-r2);
+    box-shadow: 0 12px 32px -12px rgba(22, 24, 26, 0.25);
+    white-space: nowrap;
+    animation: aiIn 0.2s ease-out;
+  }
+
+  .toast button {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--c-bg);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  .drop {
+    position: absolute;
+    inset: 10px;
+    z-index: 36;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    text-align: center;
+    padding: 16px;
+    border: 1.5px dashed var(--c-ink);
+    border-radius: var(--c-r3);
+    background: color-mix(in srgb, var(--c-bg) 92%, transparent);
+  }
+
+  .drop strong {
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  .drop span {
+    font-size: 12.5px;
+    color: var(--c-muted);
+  }
+
+  /* ── AI glow ──────────────────────────────────────────── */
+
+  .halo {
+    position: absolute;
+    inset: -18px -24px;
+    z-index: 0;
+    pointer-events: none;
+    opacity: var(--c-glow);
+  }
+
+  .halo::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 20px;
+    background: var(--c-conic);
+    filter: blur(32px);
+    opacity: 0.45;
+    animation:
+      aiSpin 5s linear infinite,
+      aiBreathe 2.6s ease-in-out infinite;
+  }
+
+  .arrived {
+    position: absolute;
+    inset: -12px -16px;
+    z-index: 0;
+    pointer-events: none;
+    border-radius: var(--c-r4);
+    animation: aiDone 2.6s ease-out forwards;
+  }
+
+  .arrived .wash {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--c-conic);
+    filter: blur(26px);
+    opacity: calc(0.22 * var(--c-glow) + 0.06);
+    animation: aiSpin 2.6s linear infinite;
+  }
+
+  .ring {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: var(--c-conic);
+    -webkit-mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    animation: aiSpin 2.6s linear infinite;
+    pointer-events: none;
+  }
+
+  .arrived .sweep {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    overflow: hidden;
+  }
+
+  .arrived .sweep::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      100deg,
+      transparent 25%,
+      oklch(0.88 0.07 260 / 0.5) 50%,
+      transparent 75%
+    );
+    animation: aiSweep 1.6s cubic-bezier(0.3, 0.6, 0.3, 1) forwards;
+  }
+
+  .pill {
+    position: relative;
+    display: inline-flex;
+    align-self: flex-start;
+    align-items: center;
+    gap: 9px;
+    padding: 6px 14px 6px 10px;
+    border-radius: 999px;
+    background: var(--c-bg);
+    box-shadow: 0 0 24px -6px oklch(0.7 0.15 280 / 0.5);
+    animation: aiIn 0.25s ease-out;
+  }
+
+  .pill .ring {
+    border-radius: 999px;
+    animation-duration: 2.4s;
+  }
+
+  .pill .dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--c-conic);
+    animation:
+      aiSpin 1.6s linear infinite,
+      aiPulse 1.6s ease-in-out infinite;
+  }
+
+  .pill .shimmer {
+    font-size: 12.5px;
+    font-weight: 500;
+    background: linear-gradient(90deg, var(--c-faint) 0%, var(--c-ink) 45%, var(--c-faint) 90%);
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: aiShimmer 1.8s linear infinite;
+  }
+
+  .composer-glow {
+    position: absolute;
+    inset: -4px;
+    z-index: 0;
+    border-radius: var(--c-r4);
+    background: var(--c-conic);
+    filter: blur(14px);
+    opacity: calc(0.32 + 0.23 * (var(--c-glow) - 0.6) / 0.4);
+    animation: aiSpin 4s linear infinite;
+    pointer-events: none;
+  }
+
+  .composer-ring {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    border-radius: calc(var(--c-r) * 2.25);
+    pointer-events: none;
+  }
+
+  .composer-ring .ring {
+    animation-duration: 3s;
+  }
+
+  :host([glow="off"]) .halo,
+  :host([glow="off"]) .arrived,
+  :host([glow="off"]) .composer-glow,
+  :host([glow="off"]) .composer-ring,
+  :host([glow="off"]) .pill .ring {
+    display: none;
+  }
+
+  :host([glow="off"]) .pill {
+    box-shadow: inset 0 0 0 1px var(--c-line);
+  }
+
+  :host([glow="off"]) .pill .dot {
+    background: var(--c-ink);
+  }
+
+  @keyframes aiSpin {
+    to {
+      --sb-ai-angle: 360deg;
+    }
+  }
+
+  @keyframes aiShimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes aiBreathe {
+    0%,
+    100% {
+      transform: scale(0.97);
+    }
+    50% {
+      transform: scale(1.03);
+    }
+  }
+
+  @keyframes aiPulse {
+    0%,
+    100% {
+      transform: scale(0.8);
+    }
+    50% {
+      transform: scale(1.15);
+    }
+  }
+
+  @keyframes aiDone {
+    0% {
+      opacity: 0;
+    }
+    12% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes aiSweep {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes aiIn {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: translateY(12px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes aiGrow {
+    from {
+      transform: scaleX(0);
+    }
+  }
+
+  @keyframes aiDraw {
+    from {
+      stroke-dashoffset: 1;
+    }
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes rgcaret {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+    .caret {
+      display: none;
+    }
+  }
+
+  @media print {
+    .sidebar,
+    .scrim,
+    .header-right,
+    .composer-wrap,
+    .branding,
+    .toolbar,
+    .followups,
+    .panel,
+    .toast {
+      display: none !important;
+    }
+    .frame,
+    .scroller {
+      overflow: visible;
+      height: auto;
+    }
+  }
+`, $t = {
+  eyebrowChat: "Chat",
+  eyebrowRag: "Grounded answers",
+  eyebrowRich: "Charts · tables · images",
+  headingChat: "What can I help with?",
+  headingRag: "Ask your knowledge base",
+  headingRich: "Ask for a chart or a table",
+  descriptionChat: "Ask anything. Attach text files to give it more context.",
+  descriptionRag: "Answers are grounded in your sources, with a citation for every claim. Attach text files to search them too.",
+  descriptionRich: "Answers come back with charts, tables and images when they help. Attach CSV or JSON files to use your own data.",
+  placeholderChat: "Message {name}…",
+  placeholderRag: "Ask about your sources…",
+  placeholderRich: "Ask for a chart, table or breakdown…",
+  footnote: "{name} can make mistakes. Check important details.",
+  attach: "Attach files",
+  send: "Send message",
+  stop: "Stop generating",
+  removeFile: "Remove file",
+  dropTitle: "Drop files to attach",
+  dropSub: "Text, Markdown, CSV and JSON files are added as context.",
+  thinking: "Thinking",
+  searching: "Searching sources",
+  building: "Building charts and tables",
+  chats: "Chats",
+  newChat: "New chat",
+  searchChats: "Search chats",
+  groupBookmarked: "Bookmarked",
+  groupToday: "Today",
+  groupYesterday: "Yesterday",
+  groupWeek: "Previous 7 days",
+  groupOlder: "Older",
+  noChats: "No chats yet.",
+  noMatch: "No chats match “{query}”.",
+  loadingChats: "Loading chats",
+  showChats: "Show chats",
+  hideSidebar: "Hide sidebar",
+  untitled: "New chat",
+  renameChat: "Rename chat",
+  bookmarkChat: "Bookmark chat",
+  unbookmarkChat: "Remove chat bookmark",
+  exportChat: "Export chat",
+  deleteChat: "Delete chat",
+  expand: "Expand",
+  restore: "Restore size",
+  minimize: "Minimize chat",
+  exportHeading: "Export this chat",
+  exportMarkdown: "Markdown",
+  exportJson: "JSON",
+  exportText: "Plain text",
+  exportCopy: "Copy as Markdown",
+  copy: "Copy",
+  copied: "Copied",
+  edit: "Edit and resend",
+  saveResend: "Save & resend",
+  cancel: "Cancel",
+  regenerate: "Regenerate",
+  helpful: "Helpful",
+  notHelpful: "Not helpful",
+  markedHelpful: "Marked helpful",
+  thanksFeedback: "Thanks for the feedback",
+  bookmarkMessage: "Bookmark message",
+  unbookmarkMessage: "Remove bookmark",
+  deleteMessage: "Delete message",
+  saved: "Saved",
+  stopped: "Stopped",
+  emptyReply: "(empty response)",
+  newReply: "New reply",
+  you: "You",
+  sourcesCited: "Cited sources",
+  sourcesRetrieved: "Sources",
+  searchedSources: "Searched {n} sources",
+  sourceLabel: "Source {n}",
+  openSource: "Open source {n}",
+  citedPassage: "Cited passage",
+  copyReference: "Copy passage with reference",
+  alsoCited: "Also cited",
+  close: "Close",
+  undo: "Undo",
+  chatDeleted: "Chat deleted",
+  messageDeleted: "Message deleted",
+  messageBookmarked: "Message bookmarked",
+  bookmarkRemoved: "Bookmark removed",
+  chatBookmarked: "Chat bookmarked",
+  chatUnbookmarked: "Chat removed from bookmarks",
+  exported: "Exported {name}",
+  copiedMarkdown: "Copied as Markdown",
+  fileTooLarge: "{name} is larger than {size}.",
+  fileType: "{name} isn't a text file.",
+  tooManyFiles: "Attach up to {n} files at a time.",
+  errGeneric: "Something went wrong.",
+  errNotFound: "This chat no longer exists. Retry to start a new one.",
+  errNoClient: "Chat isn't connected. Create a SinglebaseClient() on this page.",
+  errLoad: "Couldn't load this chat.",
+  retry: "Retry",
+  offline: "You're offline. Messages will send when you reconnect.",
+  bubbleText: "Hi! Questions? Ask me here.",
+  openChat: "Open chat",
+  closeChat: "Close chat",
+  dismiss: "Dismiss",
+  brandingLabel: "Chat by Singlebase"
+};
+function Tt(n) {
+  return { ...$t, ...n ?? {} };
+}
+const Ct = /^\|.*\|$/, St = /^\|[\s:|-]+\|$/, Xe = /^!\[([^\]]*)\]\(([^)]*)\)$/, Ye = /^([-*]|\d+\.)\s+/;
+function zt(n) {
+  const e = [], t = (n ?? "").replace(/\r/g, "").split("```");
+  return t.forEach((i, s) => {
+    if (s % 2 === 1) {
+      const a = i.indexOf(`
+`), o = (a > -1 ? i.slice(0, a) : i).trim().toLowerCase(), l = (a > -1 ? i.slice(a + 1) : "").replace(/\n$/, ""), c = s === t.length - 1;
+      if (o === "chart") {
+        const x = c ? null : Ot(l);
+        e.push(x ? { type: "chart", spec: x } : { type: "chartPending" });
+      } else
+        e.push({ type: "code", lang: o || "code", text: l });
+      return;
+    }
+    for (const a of i.split(/\n{2,}/)) {
+      const o = a.trim();
+      o && e.push(...pt(o));
+    }
+  }), e;
+}
+function pt(n) {
+  const e = n.split(`
+`).map((i) => i.trim()).filter(Boolean);
+  if (e.length > 1 && e.every((i) => Ct.test(i))) {
+    const i = e.filter((s) => !St.test(s)).map(
+      (s) => s.replace(/^\||\|$/g, "").split("|").map((a) => a.trim())
+    );
+    return [{ type: "table", head: i[0] ?? [], rows: i.slice(1) }];
+  }
+  if (e.every((i) => Xe.test(i)))
+    return [
+      {
+        type: "img",
+        images: e.map((i) => {
+          const s = i.match(Xe);
+          return { alt: s[1], src: s[2] };
+        })
+      }
+    ];
+  if (e.every((i) => i.startsWith(">")))
+    return [{ type: "quote", text: e.map((i) => i.replace(/^>\s?/, "")).join(" ") }];
+  if (e.every((i) => Ye.test(i)))
+    return [
+      {
+        type: "list",
+        ordered: /^\d+\./.test(e[0]),
+        items: e.map((i) => i.replace(Ye, ""))
+      }
+    ];
+  const t = e[0].match(/^(#{1,4})\s+(.*)$/);
+  if (t) {
+    const i = e.slice(1).join(`
+`);
+    return [
+      { type: "h", level: t[1].length, text: t[2] },
+      ...i ? pt(i) : []
+    ];
+  }
+  return [{ type: "p", text: e.join(" ") }];
+}
+function Ot(n) {
+  let e;
+  try {
+    e = JSON.parse(n);
+  } catch {
+    return null;
+  }
+  if (!e || typeof e != "object") return null;
+  const t = (Array.isArray(e.series) ? e.series : []).filter((s) => s && Array.isArray(s.values)).map((s, a) => ({
+    name: String(s.name ?? `Series ${a + 1}`),
+    values: s.values.map((o) => Number(o) || 0)
+  }));
+  if (!t.length) return null;
+  const i = Array.isArray(e.labels) ? e.labels.map(String) : t[0].values.map((s, a) => String(a + 1));
+  return {
+    type: e.type === "line" ? "line" : "bar",
+    title: String(e.title ?? ""),
+    unit: String(e.unit ?? ""),
+    labels: i,
+    series: t
+  };
+}
+const Qe = /\*\*([^*]+)\*\*|`([^`]+)`|\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)|\s?\[(\d+(?:\s*,\s*\d+)*)\]/g;
+function Mt(n, e = 0) {
+  const t = [];
+  let i = 0, s;
+  Qe.lastIndex = 0;
+  const a = (o) => {
+    if (!o) return;
+    const l = t[t.length - 1];
+    (l == null ? void 0 : l.type) === "text" ? l.text += o : t.push({ type: "text", text: o });
+  };
+  for (; s = Qe.exec(n); ) {
+    if (a(n.slice(i, s.index)), s[1] !== void 0) t.push({ type: "bold", text: s[1] });
+    else if (s[2] !== void 0) t.push({ type: "code", text: s[2] });
+    else if (s[3] !== void 0) t.push({ type: "link", text: s[3], href: s[4] });
+    else {
+      const l = s[5].split(",").map((c) => Number(c.trim())).filter((c) => c >= 1 && c <= e);
+      e ? l.forEach((c) => t.push({ type: "cite", n: c })) : a(s[0]);
+    }
+    i = s.index + s[0].length;
+  }
+  return a(n.slice(i)), t;
+}
+function Ze(n) {
+  const e = /* @__PURE__ */ new Set();
+  for (const t of (n ?? "").match(/\[(\d+(?:\s*,\s*\d+)*)\]/g) ?? [])
+    t.replace(/[[\]]/g, "").split(",").forEach((i) => e.add(Number(i.trim())));
+  return e;
+}
+function et(n) {
+  return {
+    head: ["", ...n.series.map((e) => e.name)],
+    rows: n.labels.map((e, t) => [
+      e,
+      ...n.series.map((i) => i.values[t] === void 0 ? "" : `${i.values[t]}${n.unit}`)
+    ])
+  };
+}
+const He = (n) => n.replace(/\*\*/g, "").replace(/`/g, "").replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, "$1");
+function _t(n, e) {
+  if (e === "markdown")
+    return n.flatMap((t) => {
+      if (t.type === "chart") {
+        const i = et(t.spec);
+        return [
+          ...t.spec.title ? [{ type: "p", text: `**${t.spec.title}**` }] : [],
+          { type: "table", ...i }
+        ];
+      }
+      return t.type === "img" ? t.images.map((i) => ({
+        type: "p",
+        text: `Image: ${i.alt || "untitled"}`
+      })) : [t];
+    });
+  if (e === "text") {
+    const t = n.map((i) => {
+      switch (i.type) {
+        case "chart": {
+          const s = et(i.spec);
+          return [i.spec.title, ...[s.head, ...s.rows].map((a) => a.join("  ·  "))].filter(Boolean).join(`
+`);
+        }
+        case "chartPending":
+          return "";
+        case "img":
+          return i.images.map((s) => `Image: ${s.alt || "untitled"}`).join(`
+`);
+        case "table":
+          return [i.head, ...i.rows].map((s) => s.map(He).join("  ·  ")).join(`
+`);
+        case "list":
+          return i.items.map((s) => `- ${He(s)}`).join(`
+`);
+        case "code":
+        case "raw":
+          return i.text;
+        default:
+          return He(i.text);
+      }
+    }).filter(Boolean).join(`
+
+`);
+    return t ? [{ type: "raw", text: t }] : [];
+  }
+  return n;
+}
+function tt(n) {
+  const e = n ?? "", t = e.search(/FOLLOWUPS:/i);
+  if (t < 0) return { text: e.trim(), followups: [] };
+  const s = e.slice(t).replace(/^FOLLOWUPS:/i, "").split(/\||\n/).map((a) => a.replace(/^\s*(?:[-*↳→]|\d+[.)])\s*/, "").trim()).filter(Boolean).slice(0, 3);
+  return { text: e.slice(0, t).trim(), followups: s };
+}
+function It(n) {
+  return (n ?? "").replace(/```(\w*)[\s\S]*?(```|$)/g, (e, t) => t === "chart" ? "[Chart] " : "[Code] ").replace(/!\[([^\]]*)\]\([^)]*\)/g, "[Image: $1]").replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, "$1").replace(/[*#>`]/g, "").replace(/\|/g, " ").replace(/\s?\[\d+(?:\s*,\s*\d+)*\]/g, "").replace(/\s+/g, " ").trim();
+}
+function Lt(n, e = 48) {
+  const t = It(n);
+  if (t.length <= e) return t;
+  const i = t.slice(0, e), s = i.lastIndexOf(" ");
+  return (s > e / 2 ? i.slice(0, s) : i).trim();
+}
+function jt(n) {
+  return String(n ?? "").split(`
+`)[0].trim().replace(/^["'“”‘’]+|["'“”‘’]+$/g, "").replace(/^title:\s*/i, "").replace(/[.!?:;,]+$/, "").trim().slice(0, 80);
+}
+function it(n, e = !1) {
+  return /^https?:\/\//i.test(n) ? !0 : e && /^(blob:|data:image\/)/i.test(n);
+}
+var ht = Object.defineProperty, At = Object.getOwnPropertyDescriptor, Et = (n, e, t) => e in n ? ht(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, g = (n, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? At(e, t) : e, a = n.length - 1, o; a >= 0; a--)
+    (o = n[a]) && (s = (i ? o(e, t, s) : o(s)) || s);
+  return i && s && ht(e, t, s), s;
+}, Nt = (n, e, t) => Et(n, e + "", t);
+const st = [
+  "embed",
+  "mode",
+  "renderAs",
+  "glow",
+  "position",
+  "sidebar",
+  "showTitle",
+  "assistantName",
+  "logoUrl",
+  "heading",
+  "description",
+  "prompts",
+  "bubbleText",
+  "greetingBubble",
+  "unreadBadge",
+  "allowUpload",
+  "allowExport",
+  "branding",
+  "followups",
+  "autoTitle",
+  "model",
+  "params",
+  "systemMessage",
+  "retrieval",
+  "metadata",
+  "messages",
+  "theme"
+], We = {
+  fromAttribute: (n) => {
+    if (n)
+      try {
+        return JSON.parse(n);
+      } catch {
+        console.warn("[singlebase-chat] an attribute holds invalid JSON; ignoring it");
+        return;
+      }
+  },
+  toAttribute: (n) => JSON.stringify(n ?? null)
+}, I = {
+  fromAttribute: (n) => n === null ? !0 : n !== "false",
+  toAttribute: (n) => n ? null : "false"
+}, Bt = {
+  fromAttribute: (n) => n === null ? void 0 : n !== "false",
+  toAttribute: (n) => n === void 0 ? null : String(n)
+}, Dt = 272, Rt = 820, Ut = 940, at = 5, rt = 512 * 1024, Ft = /\.(md|markdown|txt|csv|tsv|json|html?|ya?ml|xml|log)$/i, Kt = 5e3, Pt = 2600, _ = [
+  "var(--c-ink)",
+  "oklch(0.58 0.13 255)",
+  "oklch(0.63 0.1 175)",
+  "oklch(0.74 0.12 70)"
+], nt = {
+  chat: "Be helpful and concise. Use Markdown when it helps: headings, lists, **bold**, code blocks and tables.",
+  rag: "Answer ONLY from the sources provided with each message, numbered in the order given. Put a citation like [1] right after each claim it supports. If the sources don't cover the question, say so plainly.",
+  rich: 'Lead with one sentence stating the key finding, with key numbers in **bold**. For trends and comparisons, include a chart as a fenced code block with the language "chart" containing only JSON: {"type":"bar"|"line","title":string,"unit":string,"labels":[string],"series":[{"name":string,"values":[number]}]}. Use Markdown tables for exact values. Keep prose short.'
+}, Ht = "After the answer, on a final line write FOLLOWUPS: followed by three short follow-up questions the user might ask next, separated by |.", ot = {
+  chat: [
+    ["Write", "Draft a short welcome email for new users"],
+    ["Explain", "Explain how refresh tokens work, simply"],
+    ["Code", "Write a JavaScript debounce function"],
+    ["Plan", "Outline a one-week plan to learn TypeScript"]
+  ],
+  rag: [
+    ["Overview", "What topics do these sources cover?"],
+    ["Summarize", "Summarize the most important points"],
+    ["Find", "Where is the refund policy described?"],
+    ["Explain", "Explain the setup steps in plain language"]
+  ],
+  rich: [
+    ["Bar chart", "Compare the five most spoken languages in a bar chart"],
+    ["Line chart", "Show world population from 1950 to 2020"],
+    ["Table", "List the planets with their diameters in a table"],
+    ["Breakdown", "Break down a $4,000 monthly budget by category"]
+  ]
+}, C = (n, e = "") => r`<svg class="i ${e}" viewBox="0 0 16 16" aria-hidden="true">${n}</svg>`, y = {
+  sidebar: () => C(
+    $`<rect x="2" y="2.5" width="12" height="11" rx="1.5"></rect><path d="M6 2.5v11"></path>`
+  ),
+  plus: () => C($`<path d="M8 3v10M3 8h10"></path>`),
+  bookmark: (n = !1) => C($`<path d="M4.5 2.5h7v11L8 11l-3.5 2.5z"></path>`, n ? "filled" : ""),
+  download: () => C($`<path d="M8 2.5v8M4.5 7.5L8 11l3.5-3.5M2.5 13.5h11"></path>`),
+  trash: () => C($`<path d="M2.5 4.5h11M6.5 4.5v-2h3v2M4 4.5l.7 9h6.6l.7-9"></path>`),
+  pencil: () => C($`<path d="M10.5 2.5l3 3L6 13H3v-3z"></path>`),
+  copy: () => C(
+    $`<rect x="5.5" y="5.5" width="8" height="8" rx="1.5"></rect><path d="M10.5 5.5v-2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2"></path>`
+  ),
+  refresh: () => C($`<path d="M13.5 8A5.5 5.5 0 1 1 11.9 4.1M13.5 2v3.5H10"></path>`),
+  thumb: (n = !1) => r`<svg
+      class="i"
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      style=${n ? "transform:rotate(180deg)" : ""}
+    >
+      <path
+        d="M5 7v6.5H2.5V7zM5 7l2.5-4.5a1.3 1.3 0 0 1 1.9 1.4L9 6.5h3.6a1 1 0 0 1 1 1.2l-1 4.8a1 1 0 0 1-1 .8H5"
+      ></path>
+    </svg>`,
+  expand: () => C($`<path d="M9.5 2.5h4v4M13.5 2.5L9 7M6.5 13.5h-4v-4M2.5 13.5L7 9"></path>`),
+  restore: () => C($`<path d="M13.5 6.5h-4v-4M9.5 6.5l4-4M2.5 9.5h4v4M6.5 9.5l-4 4"></path>`),
+  minimize: () => C($`<path d="M4 8h8"></path>`),
+  close: () => C($`<path d="M4 4l8 8M12 4l-8 8"></path>`),
+  clip: () => C(
+    $`<path d="M13 7.5l-5.3 5.3a3 3 0 0 1-4.3-4.3L9 2.9a2 2 0 0 1 2.9 2.9L6.4 11.3a1 1 0 0 1-1.4-1.4L10 5"></path>`
+  ),
+  up: () => C($`<path d="M8 13V3M3.5 7.5L8 3l4.5 4.5"></path>`),
+  stop: () => C($`<rect x="4.5" y="4.5" width="7" height="7" rx="1"></rect>`),
+  chat: () => r`<svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      aria-hidden="true"
+      style="fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round"
+    >
+      <path
+        d="M4 5.5A2.5 2.5 0 0 1 6.5 3h9A2.5 2.5 0 0 1 18 5.5v7a2.5 2.5 0 0 1-2.5 2.5H9l-4 3.5V15H6.5"
+      ></path>
+    </svg>`,
+  chevronDown: () => r`<svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+      style="fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round"
+    >
+      <path d="M5 8l5 5 5-5"></path>
+    </svg>`
+};
+let Jt = 0;
+const Je = () => `m${Date.now().toString(36)}${(Jt++).toString(36)}`;
+function lt(n) {
+  var t;
+  const e = n;
+  return (e == null ? void 0 : e.message) === "NOT_FOUND" || (e == null ? void 0 : e.code) === "NOT_FOUND" || ((t = e == null ? void 0 : e.details) == null ? void 0 : t.status) === 404;
+}
+function Wt(n) {
+  const e = n;
+  return (e == null ? void 0 : e.code) || (e == null ? void 0 : e.message) || "UNKNOWN";
+}
+const qt = () => typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)").matches, Fe = (n, e) => (Number.isInteger(n) ? n.toLocaleString("en-US") : n.toFixed(1)) + e, ct = (n) => {
+  const e = n.lastIndexOf(".");
+  return e > 0 ? n.slice(e + 1, e + 5).toUpperCase() : "FILE";
+};
+function Ke(n, e) {
+  const t = n ?? {}, i = t.metadata && typeof t.metadata == "object" ? t.metadata : {}, s = (...l) => l.find((c) => typeof c == "string" && c.trim()), a = s(t.content, t.text, t.page_content, t.body, t.snippet, t.chunk, i.content) ?? JSON.stringify(t, null, 2), o = [t.score, t.relevance, t._score, i.score].find((l) => typeof l == "number");
+  return {
+    n: e,
+    title: s(t.title, t.name, t.filename, i.title, i.name) ?? `Source ${e}`,
+    path: s(t.path, t.url, t.key, t.source, i.path, i.url) ?? "",
+    collection: s(t.collection, t.namespace, t.dbname, i.collection) ?? "",
+    updated: s(t.updated, t._modified_at, i.updated) ?? "",
+    text: a,
+    score: o === void 0 ? null : Math.max(0, Math.min(1, o))
+  };
+}
+function Gt(n) {
+  const e = [], t = [];
+  for (const i of n)
+    if (/\.csv$/i.test(i.name)) e.push({ type: "csv", data: i.content });
+    else if (/\.json$/i.test(i.name))
+      try {
+        e.push({ type: "json", data: JSON.parse(i.content) });
+      } catch {
+        t.push({ title: i.name, content: i.content });
+      }
+    else t.push({ title: i.name, content: i.content });
+  return t.length && e.push({ type: "docs", payload: { documents: t } }), e;
+}
+function Pe(n) {
+  const e = n ? Date.parse(n) : NaN;
+  if (Number.isNaN(e)) return "older";
+  const t = /* @__PURE__ */ new Date();
+  t.setHours(0, 0, 0, 0);
+  const i = 864e5;
+  return e >= t.getTime() ? "today" : e >= t.getTime() - i ? "yesterday" : e >= t.getTime() - 7 * i ? "week" : "older";
+}
+var j, A, E, N, B, D, R, U, F, K, P, H, J, W, q, G, V, X, Y, Q, Z, ee, te, ie, se, ae, re, ne, oe, le, ce, de, pe, he, ue, ge, me, be, fe, xe, ve, ye, ke, we, $e, Te, Ce, Se, ze, Oe, Me, _e, Ie, Le, je, Ae, Ee, Ne, Be, De, Re, dt;
+let d = (dt = class extends ft {
+  constructor() {
+    super(...arguments);
+    h(this, j, null);
+    h(this, A, {});
+    h(this, E);
+    h(this, N, "chat");
+    h(this, B, "rich");
+    h(this, D, "subtle");
+    h(this, R, !0);
+    h(this, U, !0);
+    h(this, F, "");
+    h(this, K, {});
+    h(this, P, "");
+    h(this, H, []);
+    h(this, J, {});
+    h(this, W, "page");
+    h(this, q, "right");
+    h(this, G);
+    h(this, V, !0);
+    h(this, X, "");
+    h(this, Y, "Assistant");
+    h(this, Q, "");
+    h(this, Z, "");
+    h(this, ee, "");
+    h(this, te, "");
+    h(this, ie, "");
+    h(this, se, !1);
+    h(this, ae, !1);
+    h(this, re, !0);
+    h(this, ne, !0);
+    h(this, oe, !0);
+    h(this, le, []);
+    h(this, ce, "idle");
+    h(this, de, null);
+    h(this, pe, "");
+    h(this, he, !1);
+    h(this, ue, []);
+    h(this, ge, !1);
+    h(this, me, "");
+    h(this, be, !1);
+    h(this, fe, "");
+    h(this, xe, []);
+    h(this, ve, "");
+    h(this, ye, null);
+    h(this, ke, 0);
+    h(this, we, null);
+    h(this, $e, !1);
+    h(this, Te, "");
+    h(this, Ce, "");
+    h(this, Se, !1);
+    h(this, ze, "");
+    h(this, Oe, null);
+    h(this, Me, "");
+    h(this, _e, /* @__PURE__ */ new Set());
+    h(this, Ie, "");
+    h(this, Le, !1);
+    h(this, je, !1);
+    h(this, Ae, !1);
+    h(this, Ee, !1);
+    h(this, Ne, !1);
+    h(this, Be, !1);
+    h(this, De, !1);
+    h(this, Re, !1);
+    T(this, "run", 0);
+    T(this, "abort", null);
+    T(this, "revealTimer");
+    T(this, "timers", /* @__PURE__ */ new Set());
+    T(this, "toastTimer");
+    T(this, "stick", !0);
+    T(this, "renamed", /* @__PURE__ */ new Set());
+    T(this, "observer", null);
+    T(this, "observed", null);
+    T(this, "media", null);
+    T(this, "focusNext", "");
+    T(this, "bubbleScheduled", !1);
+    T(this, "onNetwork", () => {
+      this.offline = navigator.onLine === !1;
+    });
+    T(this, "onMedia", () => {
+      var e;
+      this.mobile = !!((e = this.media) != null && e.matches);
+    });
+  }
+  get client() {
+    return p(this, j);
+  }
+  set client(e) {
+    u(this, j, e);
+  }
+  get messages() {
+    return p(this, A);
+  }
+  set messages(e) {
+    u(this, A, e);
+  }
+  get theme() {
+    return p(this, E);
+  }
+  set theme(e) {
+    u(this, E, e);
+  }
+  get mode() {
+    return p(this, N);
+  }
+  set mode(e) {
+    u(this, N, e);
+  }
+  get renderAs() {
+    return p(this, B);
+  }
+  set renderAs(e) {
+    u(this, B, e);
+  }
+  get glow() {
+    return p(this, D);
+  }
+  set glow(e) {
+    u(this, D, e);
+  }
+  get followups() {
+    return p(this, R);
+  }
+  set followups(e) {
+    u(this, R, e);
+  }
+  get autoTitle() {
+    return p(this, U);
+  }
+  set autoTitle(e) {
+    u(this, U, e);
+  }
+  get model() {
+    return p(this, F);
+  }
+  set model(e) {
+    u(this, F, e);
+  }
+  get params() {
+    return p(this, K);
+  }
+  set params(e) {
+    u(this, K, e);
+  }
+  get systemMessage() {
+    return p(this, P);
+  }
+  set systemMessage(e) {
+    u(this, P, e);
+  }
+  get retrieval() {
+    return p(this, H);
+  }
+  set retrieval(e) {
+    u(this, H, e);
+  }
+  get metadata() {
+    return p(this, J);
+  }
+  set metadata(e) {
+    u(this, J, e);
+  }
+  get embed() {
+    return p(this, W);
+  }
+  set embed(e) {
+    u(this, W, e);
+  }
+  get position() {
+    return p(this, q);
+  }
+  set position(e) {
+    u(this, q, e);
+  }
+  get sidebar() {
+    return p(this, G);
+  }
+  set sidebar(e) {
+    u(this, G, e);
+  }
+  get showTitle() {
+    return p(this, V);
+  }
+  set showTitle(e) {
+    u(this, V, e);
+  }
+  get chatIdAttr() {
+    return p(this, X);
+  }
+  set chatIdAttr(e) {
+    u(this, X, e);
+  }
+  get assistantName() {
+    return p(this, Y);
+  }
+  set assistantName(e) {
+    u(this, Y, e);
+  }
+  get logoUrl() {
+    return p(this, Q);
+  }
+  set logoUrl(e) {
+    u(this, Q, e);
+  }
+  get heading() {
+    return p(this, Z);
+  }
+  set heading(e) {
+    u(this, Z, e);
+  }
+  get description() {
+    return p(this, ee);
+  }
+  set description(e) {
+    u(this, ee, e);
+  }
+  get prompts() {
+    return p(this, te);
+  }
+  set prompts(e) {
+    u(this, te, e);
+  }
+  get bubbleText() {
+    return p(this, ie);
+  }
+  set bubbleText(e) {
+    u(this, ie, e);
+  }
+  get greetingBubble() {
+    return p(this, se);
+  }
+  set greetingBubble(e) {
+    u(this, se, e);
+  }
+  get unreadBadge() {
+    return p(this, ae);
+  }
+  set unreadBadge(e) {
+    u(this, ae, e);
+  }
+  get allowUpload() {
+    return p(this, re);
+  }
+  set allowUpload(e) {
+    u(this, re, e);
+  }
+  get allowExport() {
+    return p(this, ne);
+  }
+  set allowExport(e) {
+    u(this, ne, e);
+  }
+  get branding() {
+    return p(this, oe);
+  }
+  set branding(e) {
+    u(this, oe, e);
+  }
+  get chatList() {
+    return p(this, le);
+  }
+  set chatList(e) {
+    u(this, le, e);
+  }
+  get listState() {
+    return p(this, ce);
+  }
+  set listState(e) {
+    u(this, ce, e);
+  }
+  get activeId() {
+    return p(this, de);
+  }
+  set activeId(e) {
+    u(this, de, e);
+  }
+  get chatTitle() {
+    return p(this, pe);
+  }
+  set chatTitle(e) {
+    u(this, pe, e);
+  }
+  get bookmarked() {
+    return p(this, he);
+  }
+  set bookmarked(e) {
+    u(this, he, e);
+  }
+  get msgs() {
+    return p(this, ue);
+  }
+  set msgs(e) {
+    u(this, ue, e);
+  }
+  get loadingThread() {
+    return p(this, ge);
+  }
+  set loadingThread(e) {
+    u(this, ge, e);
+  }
+  get threadError() {
+    return p(this, me);
+  }
+  set threadError(e) {
+    u(this, me, e);
+  }
+  get busy() {
+    return p(this, be);
+  }
+  set busy(e) {
+    u(this, be, e);
+  }
+  get draft() {
+    return p(this, fe);
+  }
+  set draft(e) {
+    u(this, fe, e);
+  }
+  get files() {
+    return p(this, xe);
+  }
+  set files(e) {
+    u(this, xe, e);
+  }
+  get search() {
+    return p(this, ve);
+  }
+  set search(e) {
+    u(this, ve, e);
+  }
+  get sidebarOpen() {
+    return p(this, ye);
+  }
+  set sidebarOpen(e) {
+    u(this, ye, e);
+  }
+  get width() {
+    return p(this, ke);
+  }
+  set width(e) {
+    u(this, ke, e);
+  }
+  get panel() {
+    return p(this, we);
+  }
+  set panel(e) {
+    u(this, we, e);
+  }
+  get menuOpen() {
+    return p(this, $e);
+  }
+  set menuOpen(e) {
+    u(this, $e, e);
+  }
+  get editingKey() {
+    return p(this, Te);
+  }
+  set editingKey(e) {
+    u(this, Te, e);
+  }
+  get editDraft() {
+    return p(this, Ce);
+  }
+  set editDraft(e) {
+    u(this, Ce, e);
+  }
+  get editingTitle() {
+    return p(this, Se);
+  }
+  set editingTitle(e) {
+    u(this, Se, e);
+  }
+  get renamingId() {
+    return p(this, ze);
+  }
+  set renamingId(e) {
+    u(this, ze, e);
+  }
+  get toast() {
+    return p(this, Oe);
+  }
+  set toast(e) {
+    u(this, Oe, e);
+  }
+  get copiedKey() {
+    return p(this, Me);
+  }
+  set copiedKey(e) {
+    u(this, Me, e);
+  }
+  get retrievalOpen() {
+    return p(this, _e);
+  }
+  set retrievalOpen(e) {
+    u(this, _e, e);
+  }
+  get arrivedKey() {
+    return p(this, Ie);
+  }
+  set arrivedKey(e) {
+    u(this, Ie, e);
+  }
+  get dragging() {
+    return p(this, Le);
+  }
+  set dragging(e) {
+    u(this, Le, e);
+  }
+  get showJump() {
+    return p(this, je);
+  }
+  set showJump(e) {
+    u(this, je, e);
+  }
+  get offline() {
+    return p(this, Ae);
+  }
+  set offline(e) {
+    u(this, Ae, e);
+  }
+  get isOpen() {
+    return p(this, Ee);
+  }
+  set isOpen(e) {
+    u(this, Ee, e);
+  }
+  get expanded() {
+    return p(this, Ne);
+  }
+  set expanded(e) {
+    u(this, Ne, e);
+  }
+  get bubble() {
+    return p(this, Be);
+  }
+  set bubble(e) {
+    u(this, Be, e);
+  }
+  get seen() {
+    return p(this, De);
+  }
+  set seen(e) {
+    u(this, De, e);
+  }
+  get mobile() {
+    return p(this, Re);
+  }
+  set mobile(e) {
+    u(this, Re, e);
+  }
+  get msg() {
+    return Tt(this.messages);
+  }
+  /** An explicit `.client`, else the page default. */
+  get resolvedClient() {
+    return this.client ?? yt() ?? null;
+  }
+  /** The open conversation's id, or null for a new chat. */
+  get chatId() {
+    return this.activeId;
+  }
+  /** The open conversation's messages. */
+  get thread() {
+    return this.msgs;
+  }
+  /** The loaded chat list. */
+  get chats() {
+    return this.chatList;
+  }
+  set config(e) {
+    const t = this;
+    for (const i of st)
+      e && i in e && (t[i] = e[i]);
+  }
+  get config() {
+    const e = this;
+    return Object.fromEntries(st.map((t) => [t, e[t]]));
+  }
+  // ── lifecycle ─────────────────────────────────────────────
+  connectedCallback() {
+    var e, t;
+    super.connectedCallback(), this.offline = typeof navigator < "u" && navigator.onLine === !1, window.addEventListener("online", this.onNetwork), window.addEventListener("offline", this.onNetwork), this.media = typeof matchMedia < "u" ? matchMedia("(max-width: 559px)") : null, this.mobile = !!((e = this.media) != null && e.matches), (t = this.media) == null || t.addEventListener("change", this.onMedia);
+  }
+  disconnectedCallback() {
+    var e, t;
+    super.disconnectedCallback(), window.removeEventListener("online", this.onNetwork), window.removeEventListener("offline", this.onNetwork), (e = this.media) == null || e.removeEventListener("change", this.onMedia), (t = this.observer) == null || t.disconnect(), this.observer = null, this.observed = null, this.flushToast(), this.halt(), this.timers.forEach(clearTimeout), this.timers.clear();
+  }
+  willUpdate(e) {
+    if (e.has("retrieval") && !Array.isArray(this.retrieval)) {
+      const t = this.retrieval;
+      this.retrieval = t && typeof t == "object" ? [t] : [];
+    }
+    e.has("params") && (!this.params || typeof this.params != "object") && (this.params = {}), e.has("metadata") && (!this.metadata || typeof this.metadata != "object") && (this.metadata = {}), e.has("sidebar") && this.sidebar !== void 0 && (this.sidebarOpen = this.sidebar), this.embed === "launcher" && this.greetingBubble && !this.bubbleScheduled && (this.bubbleScheduled = !0, this.later(() => {
+      !this.isOpen && !this.seen && (this.bubble = !0);
+    }, 1200));
+  }
+  firstUpdated() {
+    this.chatIdAttr && this.openChat(this.chatIdAttr);
+  }
+  updated() {
+    var t;
+    const e = this.renderRoot.querySelector(".root");
+    if (e !== this.observed && ((t = this.observer) == null || t.disconnect(), this.observed = e, e && typeof ResizeObserver < "u" && (this.observer ?? (this.observer = new ResizeObserver(([i]) => {
+      const s = Math.round(i.contentRect.width);
+      s !== this.width && (this.width = s, this.sidebarOpen === null && (this.sidebarOpen = this.sidebar ?? this.docked));
+    })), this.observer.observe(e))), this.sidebarOpen && this.listState === "idle" && this.resolvedClient && this.loadChats(), this.focusNext) {
+      const i = this.renderRoot.querySelector(
+        this.focusNext
+      );
+      this.focusNext = "", i && (i.focus(), "select" in i && i.tagName === "INPUT" && i.select());
+    }
+  }
+  later(e, t) {
+    const i = setTimeout(() => {
+      this.timers.delete(i), e();
+    }, t);
+    this.timers.add(i);
+  }
+  emit(e, t) {
+    this.dispatchEvent(new CustomEvent(e, { detail: t, bubbles: !0, composed: !0 }));
+  }
+  get docked() {
+    return this.embed === "page" && this.width >= Rt;
+  }
+  get panelDocked() {
+    const e = this.docked && this.sidebarOpen ? Dt : 0;
+    return this.width - e >= Ut;
+  }
+  // ── public API ────────────────────────────────────────────
+  /** Starts a new, empty conversation. */
+  newChat() {
+    this.halt(), this.activeId = null, this.chatTitle = "", this.bookmarked = !1, this.msgs = [], this.threadError = "", this.resetViewState(), this.focusNext = "textarea.input";
+  }
+  /** Opens a saved conversation. */
+  async openChat(e) {
+    const t = this.resolvedClient;
+    if (!e) return;
+    this.halt();
+    const i = this.chatList.find((a) => a._id === e);
+    if (this.activeId = e, this.chatTitle = (i == null ? void 0 : i.title) ?? "", this.bookmarked = !!(i != null && i.bookmarked), this.msgs = [], this.threadError = "", this.resetViewState(), !t) {
+      this.threadError = this.msg.errNoClient;
+      return;
+    }
+    const s = ++this.run;
+    this.loadingThread = !0;
+    try {
+      const a = await t.llm.call("get_chat", {
+        _id: e
+      });
+      if (s !== this.run) return;
+      this.chatTitle = (a == null ? void 0 : a.title) ?? "", this.bookmarked = !!(a != null && a.bookmarked), this.msgs = ((a == null ? void 0 : a.messages) ?? []).filter((o) => o && (o.role === "user" || o.role === "assistant")).map((o) => this.fromServer(o)), this.upsertChat({ ...i, ...a, _id: e }), this.stick = !0, this.scrollToBottom();
+    } catch (a) {
+      if (s !== this.run) return;
+      lt(a) ? (this.chatList = this.chatList.filter((o) => o._id !== e), this.newChat(), this.showToast(this.msg.errNotFound)) : this.threadError = this.msg.errLoad;
+    } finally {
+      s === this.run && (this.loadingThread = !1);
+    }
+  }
+  /** Sends a message; with no argument, sends the composer's text. */
+  async send(e) {
+    const t = (typeof e == "string" ? e : this.draft).trim();
+    if (!t || this.busy) return;
+    const i = this.files;
+    this.draft = "", this.files = [];
+    const s = this.renderRoot.querySelector("textarea.input");
+    s && (s.style.height = "auto"), await this.runTurn(this.userMessage(t, i));
+  }
+  /** Stops waiting for, or revealing, the current reply. */
+  stop() {
+    if (!this.busy) return;
+    const e = this.msgs[this.msgs.length - 1];
+    this.halt(), (e == null ? void 0 : e.role) === "assistant" && (e.phase === "pending" || e.phase === "streaming") && (e.phase = "done", e.stopped = !0, e.followups = [], this.msgs = [...this.msgs]);
+  }
+  /** Downloads the open conversation, or copies it as Markdown. */
+  exportChat(e = "md") {
+    var M;
+    if (!this.msgs.length) return;
+    this.menuOpen = !1;
+    const t = this.chatTitle || this.msg.untitled, i = (k) => k.role === "user" ? this.msg.you : this.assistantName, s = (k) => new Date(k || Date.now()).toLocaleString(), a = (k) => k.sources.map((L, ut) => {
+      const Ue = Ke(L, ut + 1);
+      return `[${Ue.n}] ${Ue.title}${Ue.path ? ` — ${Ue.path}` : ""}`;
+    }), o = (k) => (k.attachments ?? []).map((L) => L.name);
+    let l, c = "text/markdown", x = "md";
+    if (e === "json" ? (l = JSON.stringify(
+      {
+        exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        id: this.activeId,
+        title: t,
+        mode: this.mode,
+        bookmarked: this.bookmarked,
+        messages: this.msgs.map((k) => ({
+          role: k.role,
+          text: k.content,
+          at: new Date(k.at || Date.now()).toISOString(),
+          bookmarked: k.bookmarked,
+          attachments: o(k),
+          sources: a(k)
+        }))
+      },
+      null,
+      2
+    ), c = "application/json", x = "json") : e === "txt" ? (l = `${t}
+${"=".repeat(t.length)}
+
+` + this.msgs.map(
+      (k) => [
+        `${i(k)} · ${s(k.at)}`,
+        o(k).length ? `Attachments: ${o(k).join(", ")}` : "",
+        k.content,
+        a(k).length ? `Sources:
+${a(k).join(`
+`)}` : ""
+      ].filter(Boolean).join(`
+`)
+    ).join(`
+
+`), c = "text/plain", x = "txt") : l = `# ${t}
+
+` + this.msgs.map(
+      (k) => [
+        `### ${i(k)} · ${s(k.at)}`,
+        o(k).length ? `Attachments: ${o(k).join(", ")}` : "",
+        k.content,
+        a(k).length ? `**Sources**
+
+${a(k).map((L) => `- ${L}`).join(`
+`)}` : ""
+      ].filter(Boolean).join(`
+
+`)
+    ).join(`
+
+---
+
+`) + `
+`, this.emit("singlebase-chat-export", { chatId: this.activeId, format: e }), e === "copy") {
+      (M = navigator.clipboard) == null || M.writeText(l).catch(() => {
+      }), this.showToast(this.msg.copiedMarkdown);
+      return;
+    }
+    const O = `${t.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "chat"}-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.${x}`, S = URL.createObjectURL(new Blob([l], { type: c })), b = document.createElement("a");
+    b.href = S, b.download = O, document.body.appendChild(b), b.click(), b.remove(), setTimeout(() => URL.revokeObjectURL(S), 2e3), this.showToast(z(this.msg.exported, { name: O }));
+  }
+  /** Inline and launcher: fill the window. */
+  expand() {
+    this.expanded = !0, this.emit("singlebase-chat-expand", { expanded: !0 });
+  }
+  collapse() {
+    this.expanded = !1, this.emit("singlebase-chat-expand", { expanded: !1 });
+  }
+  /** Launcher: open the panel. */
+  open() {
+    this.isOpen = !0, this.seen = !0, this.bubble = !1, this.focusNext = "textarea.input", this.emit("singlebase-chat-open", {});
+  }
+  /** Launcher: close the panel. */
+  close() {
+    this.isOpen = !1, this.expanded = !1, this.emit("singlebase-chat-close", {});
+  }
+  // ── turns ─────────────────────────────────────────────────
+  userMessage(e, t = []) {
+    return {
+      key: Je(),
+      id: null,
+      role: "user",
+      content: e,
+      at: Date.now(),
+      bookmarked: !1,
+      sources: [],
+      followups: [],
+      phase: "done",
+      attachments: t
+    };
+  }
+  systemPrompt() {
+    return [
+      this.systemMessage,
+      nt[this.mode] ?? nt.chat,
+      this.followups ? Ht : ""
+    ].filter(Boolean).join(`
+
+`);
+  }
+  payloadFor(e) {
+    const t = { message: e.content, format: "markdown" };
+    this.activeId ? t._id = this.activeId : (t.title = Lt(e.content), t.system_message = this.systemPrompt()), this.model && (t.model = this.model), Object.keys(this.params ?? {}).length && (t.params = this.params);
+    const i = (e.attachments ?? []).map((a) => a.name);
+    (Object.keys(this.metadata ?? {}).length || i.length) && (t.metadata = { ...this.metadata, ...i.length ? { attachments: i } : {} });
+    const s = [...this.retrieval ?? [], ...Gt(e.attachments ?? [])];
+    return s.length && (t.retrieval = s), t;
+  }
+  async runTurn(e) {
+    const t = {
+      key: Je(),
+      id: null,
+      role: "assistant",
+      content: "",
+      at: Date.now(),
+      bookmarked: !1,
+      sources: [],
+      followups: [],
+      phase: "pending"
+    };
+    this.msgs = [...this.msgs, e, t], this.busy = !0, this.panel = null, this.stick = !0, this.scrollToBottom(), this.emit("singlebase-chat-send", { chatId: this.activeId, text: e.content });
+    const i = this.resolvedClient;
+    if (!i) {
+      this.failTurn(t, this.msg.errNoClient, "NO_CLIENT"), this.busy = !1;
+      return;
+    }
+    const s = ++this.run, a = new AbortController();
+    this.abort = a;
+    const o = !this.activeId, l = this.payloadFor(e);
+    try {
+      const c = await i.llm.call("chat", l, { signal: a.signal }), x = (c == null ? void 0 : c._id) || (c == null ? void 0 : c.chat_id) || this.activeId;
+      if (o && x && this.upsertChat({
+        _id: x,
+        title: (c == null ? void 0 : c.title) || l.title,
+        bookmarked: !!(c != null && c.bookmarked),
+        _modified_at: (/* @__PURE__ */ new Date()).toISOString()
+      }), s !== this.run) return;
+      x && (this.activeId = x), o ? (this.chatTitle = (c == null ? void 0 : c.title) || l.title, this.bookmarked = !!(c != null && c.bookmarked)) : x && this.touchChat(x);
+      const f = (c == null ? void 0 : c.message) ?? {}, O = typeof f.content == "string" ? f.content : (c == null ? void 0 : c.json) !== void 0 ? JSON.stringify(c.json, null, 2) : "", { text: S, followups: b } = tt(O);
+      e.id = f.reply_to ?? null, Object.assign(t, {
+        id: f._id ?? null,
+        content: S,
+        sources: Array.isArray(f.sources) ? f.sources : [],
+        followups: this.followups ? b : [],
+        execTime: typeof f.exec_time == "number" ? f.exec_time : void 0,
+        model: f.model,
+        at: Date.now()
+      }), this.emit("singlebase-chat-response", { chatId: x, message: t }), await this.reveal(t, s), o && x && this.autoTitle && this.retitle(x, e.content, t.content);
+    } catch (c) {
+      if (s !== this.run) return;
+      const x = lt(c);
+      x && (this.chatList = this.chatList.filter((f) => f._id !== this.activeId), this.activeId = null), this.failTurn(t, x ? this.msg.errNotFound : this.msg.errGeneric, Wt(c));
+    } finally {
+      s === this.run && (this.busy = !1, this.abort = null, this.stick && this.scrollToBottom());
+    }
+  }
+  failTurn(e, t, i) {
+    e.phase = "error", e.error = t, this.msgs = [...this.msgs], this.emit("singlebase-chat-error", { chatId: this.activeId, code: i, message: t });
+  }
+  /**
+   * The service answers in one piece; this reveals it progressively so it
+   * reads like a stream. Capped at about a second and a half.
+   */
+  reveal(e, t) {
+    const i = e.content.length, s = () => {
+      e.phase = "done", this.msgs = [...this.msgs], this.arrivedKey = e.key, this.later(() => {
+        this.arrivedKey === e.key && (this.arrivedKey = "");
+      }, Pt), this.stick ? this.scrollToBottom() : this.showJump = !0;
+    };
+    if (!i || qt())
+      return s(), Promise.resolve();
+    const a = e.content, o = Math.max(4, Math.ceil(i / 90));
+    let l = 0;
+    return e.phase = "streaming", e.content = "", new Promise((c) => {
+      this.revealTimer = setInterval(() => {
+        if (t !== this.run) {
+          clearInterval(this.revealTimer), c();
+          return;
+        }
+        if (l = Math.min(i, l + o), e.content = a.slice(0, l), l >= i) {
+          clearInterval(this.revealTimer), s(), c();
+          return;
+        }
+        this.msgs = [...this.msgs], this.stick && this.scrollToBottom();
+      }, 16);
+    });
+  }
+  /** Cancels any request or reveal in flight. */
+  halt() {
+    var e;
+    this.run++, (e = this.abort) == null || e.abort(), this.abort = null, clearInterval(this.revealTimer), this.busy = !1;
+  }
+  async retitle(e, t, i) {
+    const s = this.resolvedClient;
+    if (!(!s || this.renamed.has(e)))
+      try {
+        const a = await s.llm.call("generate", {
+          user_input: `user: ${t}
+assistant: ${i.slice(0, 1500)}`,
+          custom_instructions: "Write a concise title (3–6 words, sentence case, no quotes, no trailing punctuation) for this conversation.",
+          format: "text"
+        }), o = jt(a == null ? void 0 : a.result);
+        if (!o || this.renamed.has(e)) return;
+        await s.llm.call("update_chat", { _id: e, title: o }), this.applyTitle(e, o, !0);
+      } catch {
+      }
+  }
+  applyTitle(e, t, i) {
+    this.chatList = this.chatList.map((s) => s._id === e ? { ...s, title: t } : s), this.activeId === e && (this.chatTitle = t), this.emit("singlebase-chat-title", { chatId: e, title: t, auto: i });
+  }
+  /**
+   * Enter and blur both land here. Saving on Enter directly (not via blur())
+   * matters: blur never fires on an input that doesn't have focus.
+   */
+  commitTitle(e) {
+    this.editingTitle && (this.editingTitle = !1, this.activeId && this.renameChat(this.activeId, e));
+  }
+  commitRename(e, t) {
+    this.renamingId === e && (this.renamingId = "", this.renameChat(e, t));
+  }
+  async renameChat(e, t) {
+    var a, o;
+    const i = t.trim().slice(0, 80), s = ((a = this.chatList.find((l) => l._id === e)) == null ? void 0 : a.title) ?? this.chatTitle;
+    if (!(!i || i === s)) {
+      this.renamed.add(e), this.applyTitle(e, i, !1);
+      try {
+        await ((o = this.resolvedClient) == null ? void 0 : o.llm.call("update_chat", { _id: e, title: i }));
+      } catch {
+        this.applyTitle(e, s ?? "", !1), this.showToast(this.msg.errGeneric);
+      }
+    }
+  }
+  fromServer(e) {
+    const t = e.role === "assistant", { text: i, followups: s } = t ? tt(String(e.content ?? "")) : { text: String(e.content ?? ""), followups: [] };
+    return {
+      key: Je(),
+      id: e._id ?? null,
+      role: t ? "assistant" : "user",
+      content: i,
+      at: Date.parse(e._created_at ?? "") || 0,
+      bookmarked: !!e.bookmarked,
+      sources: Array.isArray(e.sources) ? e.sources : [],
+      followups: this.followups ? s : [],
+      phase: "done",
+      execTime: typeof e.exec_time == "number" ? e.exec_time : void 0,
+      model: e.model
+    };
+  }
+  // ── chat list ─────────────────────────────────────────────
+  async loadChats() {
+    const e = this.resolvedClient;
+    if (e) {
+      this.listState = "loading";
+      try {
+        const t = await e.llm.call("list_chats", { limit: 100 });
+        this.chatList = [...(t == null ? void 0 : t.items) ?? []], this.listState = "ready";
+      } catch {
+        this.listState = "error";
+      }
+    }
+  }
+  upsertChat(e) {
+    const t = this.chatList.filter((s) => s._id !== e._id), i = this.chatList.find((s) => s._id === e._id);
+    this.chatList = [{ ...i, ...e }, ...t];
+  }
+  touchChat(e) {
+    const t = this.chatList.find((i) => i._id === e);
+    t && this.upsertChat({ ...t, _modified_at: (/* @__PURE__ */ new Date()).toISOString() });
+  }
+  // ── actions ───────────────────────────────────────────────
+  resetViewState() {
+    this.panel = null, this.menuOpen = !1, this.editingKey = "", this.editingTitle = !1, this.showJump = !1, this.retrievalOpen = /* @__PURE__ */ new Set(), this.sidebarOpen && !this.docked && (this.sidebarOpen = !1);
+  }
+  async deleteOnServer(e) {
+    const t = this.resolvedClient, i = this.activeId;
+    if (!(!t || !i))
+      for (const s of e)
+        s && await t.llm.call("delete_chat_message", { _id: i, message_id: s }).catch(() => {
+        });
+  }
+  async regenerate() {
+    if (this.busy) return;
+    const e = this.msgs.map((s) => s.role).lastIndexOf("assistant"), t = this.msgs[e - 1];
+    if (e < 1 || (t == null ? void 0 : t.role) !== "user") return;
+    const i = this.msgs.slice(e - 1);
+    this.msgs = this.msgs.slice(0, e - 1), await this.deleteOnServer(i.map((s) => s.id)), await this.runTurn(this.userMessage(t.content, t.attachments));
+  }
+  async retry(e) {
+    if (this.busy) return;
+    const t = this.msgs.indexOf(e), i = this.msgs[t - 1];
+    (i == null ? void 0 : i.role) === "user" && (this.msgs = this.msgs.slice(0, t - 1), await this.runTurn(this.userMessage(i.content, i.attachments)));
+  }
+  async saveEdit(e) {
+    const t = this.editDraft.trim(), i = this.msgs.indexOf(e);
+    if (this.editingKey = "", !t || i < 0 || this.busy) return;
+    const s = this.msgs.slice(i);
+    this.msgs = this.msgs.slice(0, i), await this.deleteOnServer(s.map((a) => a.id)), await this.runTurn(this.userMessage(t, e.attachments));
+  }
+  copy(e, t) {
+    var i;
+    (i = navigator.clipboard) == null || i.writeText(t).catch(() => {
+    }), this.copiedKey = e, this.later(() => {
+      this.copiedKey === e && (this.copiedKey = "");
+    }, 1400);
+  }
+  async toggleMessageBookmark(e) {
+    var i;
+    const t = this.activeId;
+    if (!(!t || !e.id)) {
+      e.bookmarked = !e.bookmarked, this.msgs = [...this.msgs], this.showToast(e.bookmarked ? this.msg.messageBookmarked : this.msg.bookmarkRemoved), this.emit("singlebase-chat-bookmark", { chatId: t, messageId: e.id, bookmarked: e.bookmarked });
+      try {
+        await ((i = this.resolvedClient) == null ? void 0 : i.llm.call("bookmark_chat_message", {
+          _id: t,
+          message_id: e.id,
+          bookmarked: e.bookmarked
+        }));
+      } catch {
+        e.bookmarked = !e.bookmarked, this.msgs = [...this.msgs], this.showToast(this.msg.errGeneric);
+      }
+    }
+  }
+  async toggleChatBookmark(e) {
+    var a, o;
+    const t = ((a = this.chatList.find((l) => l._id === e)) == null ? void 0 : a.bookmarked) ?? (e === this.activeId ? this.bookmarked : !1), i = !t, s = (l) => {
+      this.chatList = this.chatList.map(
+        (c) => c._id === e ? { ...c, bookmarked: l } : c
+      ), e === this.activeId && (this.bookmarked = l);
+    };
+    s(i), this.showToast(i ? this.msg.chatBookmarked : this.msg.chatUnbookmarked), this.emit("singlebase-chat-bookmark", { chatId: e, bookmarked: i });
+    try {
+      await ((o = this.resolvedClient) == null ? void 0 : o.llm.call("bookmark_chat", { _id: e, bookmarked: i }));
+    } catch {
+      s(t), this.showToast(this.msg.errGeneric);
+    }
+  }
+  /** Removed at once; the server call waits out the undo window. */
+  deleteMessage(e) {
+    var s;
+    const t = this.activeId, i = this.msgs.indexOf(e);
+    i < 0 || (this.msgs = this.msgs.filter((a) => a !== e), ((s = this.panel) == null ? void 0 : s.key) === e.key && (this.panel = null), this.showToast(this.msg.messageDeleted, {
+      undo: () => {
+        if (this.activeId !== t) return;
+        const a = [...this.msgs];
+        a.splice(i, 0, e), this.msgs = a;
+      },
+      commit: () => {
+        var a;
+        this.emit("singlebase-chat-message-delete", { chatId: t, messageId: e.id }), t && e.id && ((a = this.resolvedClient) == null || a.llm.call("delete_chat_message", { _id: t, message_id: e.id }).catch(() => {
+        }));
+      }
+    }));
+  }
+  deleteChat(e) {
+    const t = this.chatList.findIndex((o) => o._id === e), i = this.chatList[t] ?? {
+      _id: e,
+      title: this.chatTitle,
+      bookmarked: this.bookmarked
+    }, s = e === this.activeId, a = s ? { title: this.chatTitle, bookmarked: this.bookmarked, msgs: this.msgs } : null;
+    this.chatList = this.chatList.filter((o) => o._id !== e), s && this.newChat(), this.showToast(this.msg.chatDeleted, {
+      undo: () => {
+        const o = [...this.chatList];
+        o.splice(Math.max(0, t), 0, i), this.chatList = o, a && !this.activeId && !this.msgs.length && (this.activeId = e, this.chatTitle = a.title, this.bookmarked = a.bookmarked, this.msgs = a.msgs);
+      },
+      commit: () => {
+        var o;
+        this.emit("singlebase-chat-delete", { chatId: e }), (o = this.resolvedClient) == null || o.llm.call("delete_chat", { _id: e }).catch(() => {
+        });
+      }
+    });
+  }
+  feedback(e, t) {
+    e.feedback = t, this.msgs = [...this.msgs], this.emit("singlebase-chat-feedback", {
+      chatId: this.activeId,
+      messageId: e.id,
+      value: t,
+      text: e.content
+    });
+  }
+  // ── toasts ────────────────────────────────────────────────
+  showToast(e, t = {}) {
+    this.flushToast();
+    const i = { key: Date.now(), text: e, ...t };
+    this.toast = i, this.toastTimer = setTimeout(() => {
+      this.toast === i && this.flushToast();
+    }, Kt);
+  }
+  /** Ends the current toast, committing whatever it was holding back. */
+  flushToast() {
+    var t;
+    const e = this.toast;
+    clearTimeout(this.toastTimer), this.toast = null, (t = e == null ? void 0 : e.commit) == null || t.call(e);
+  }
+  undo() {
+    var t;
+    const e = this.toast;
+    clearTimeout(this.toastTimer), this.toast = null, (t = e == null ? void 0 : e.undo) == null || t.call(e);
+  }
+  // ── files ─────────────────────────────────────────────────
+  async addFiles(e) {
+    const t = Array.from(e ?? []);
+    if (!t.length) return;
+    const i = [];
+    for (const s of t) {
+      if (this.files.length + i.length >= at) {
+        this.showToast(z(this.msg.tooManyFiles, { n: at }));
+        break;
+      }
+      if (!Ft.test(s.name) && !s.type.startsWith("text/")) {
+        this.showToast(z(this.msg.fileType, { name: s.name }));
+        continue;
+      }
+      if (s.size > rt) {
+        this.showToast(
+          z(this.msg.fileTooLarge, { name: s.name, size: Ve(rt) })
+        );
+        continue;
+      }
+      i.push({ name: s.name, size: s.size, content: await s.text() });
+    }
+    i.length && (this.files = [...this.files, ...i], this.emit("singlebase-chat-files", {
+      files: i.map(({ name: s, size: a }) => ({ name: s, size: a }))
+    }));
+  }
+  // ── scrolling ─────────────────────────────────────────────
+  async scrollToBottom() {
+    await this.updateComplete;
+    const e = this.renderRoot.querySelector(".scroller");
+    e && (e.scrollTop = e.scrollHeight), this.showJump = !1;
+  }
+  onScroll(e) {
+    const t = e.currentTarget;
+    this.stick = t.scrollHeight - t.scrollTop - t.clientHeight < 80, this.stick && (this.showJump = !1);
+  }
+  jumpToLatest() {
+    this.stick = !0, this.scrollToBottom();
+  }
+  // ── keyboard ──────────────────────────────────────────────
+  onKeydown(e) {
+    if (e.key === "Escape") {
+      if (this.menuOpen) this.menuOpen = !1;
+      else if (this.panel) this.panel = null;
+      else if (this.sidebarOpen && !this.docked) this.sidebarOpen = !1;
+      else if (this.expanded) this.collapse();
+      else if (this.embed === "launcher" && this.isOpen) this.close();
+      else return;
+      e.stopPropagation();
+    }
+  }
+  onComposerKey(e) {
+    e.key === "Enter" && !e.shiftKey && !e.isComposing && (e.preventDefault(), this.send());
+  }
+  onComposerInput(e) {
+    const t = e.target;
+    t.style.height = "auto", t.style.height = `${Math.min(176, t.scrollHeight)}px`, this.draft = t.value;
+  }
+  // ── drag and drop ─────────────────────────────────────────
+  onDragEnter(e) {
+    var t;
+    !this.allowUpload || !Array.from(((t = e.dataTransfer) == null ? void 0 : t.types) ?? []).includes("Files") || (e.preventDefault(), this.dragging = !0);
+  }
+  onDragLeave(e) {
+    e.currentTarget.contains(e.relatedTarget) || (this.dragging = !1);
+  }
+  onDrop(e) {
+    var t;
+    e.preventDefault(), this.dragging = !1, this.allowUpload && this.addFiles((t = e.dataTransfer) == null ? void 0 : t.files);
+  }
+  // ── render ────────────────────────────────────────────────
+  render() {
+    if (this.embed === "launcher") return this.renderLauncher();
+    const e = [
+      "frame",
+      this.embed === "inline" ? "inline boxed" : "",
+      this.expanded ? "expanded boxed" : ""
+    ].join(" ");
+    return r`<div class=${e} part="frame">${this.renderWorkspace()}</div>`;
+  }
+  renderLauncher() {
+    const e = this.msg, t = [
+      "frame launcher boxed",
+      this.expanded ? "expanded" : "",
+      this.mobile ? "full" : ""
+    ].join(" "), i = this.isOpen ? r`<div class=${t} role="dialog" aria-label=${this.assistantName} part="frame">
+          ${this.renderWorkspace()}
+        </div>` : m, s = this.bubble && !this.isOpen ? r`<div class="bubble" part="bubble">
+            <button type="button" class="bubble-text" @click=${() => this.open()}>
+              ${this.bubbleText || e.bubbleText}
+            </button>
+            <button
+              type="button"
+              class="icon sm"
+              aria-label=${e.dismiss}
+              title=${e.dismiss}
+              @click=${() => this.bubble = !1}
+            >
+              ${y.close()}
+            </button>
+          </div>` : m, o = this.isOpen && (this.expanded || this.mobile) ? m : r`<button
+          type="button"
+          class="launcher-btn"
+          part="launcher"
+          aria-label=${this.isOpen ? e.closeChat : e.openChat}
+          aria-expanded=${this.isOpen ? "true" : "false"}
+          @click=${() => this.isOpen ? this.close() : this.open()}
+        >
+          ${this.isOpen ? y.chevronDown() : y.chat()}
+          ${this.unreadBadge && !this.seen && !this.isOpen ? r`<span class="badge"></span>` : m}
+        </button>`;
+    return r`${i}${s}${o}`;
+  }
+  renderWorkspace() {
+    const e = !this.docked;
+    return r`<div class="root" @keydown=${this.onKeydown}>
+      ${this.sidebarOpen && e ? r`<div class="scrim" @click=${() => this.sidebarOpen = !1}></div>` : m}
+      ${this.sidebarOpen ? this.renderSidebar(e) : m}
+      <main
+        class="main"
+        @dragenter=${this.onDragEnter}
+        @dragover=${(t) => t.preventDefault()}
+      >
+        ${this.renderHeader()}
+        ${this.offline ? r`<div class="banner" role="status">${this.msg.offline}</div>` : m}
+        <div
+          class="scroller"
+          role="log"
+          aria-live="polite"
+          aria-busy=${this.busy ? "true" : "false"}
+          part="messages"
+          @scroll=${this.onScroll}
+        >
+          ${this.msgs.length || this.loadingThread || this.threadError ? this.renderThread() : this.renderWelcome()}
+        </div>
+        ${this.showJump ? r`<button type="button" class="jump" @click=${this.jumpToLatest}>
+                ↓ ${this.msg.newReply}
+              </button>` : m}
+        ${this.renderComposer()}
+        ${this.branding ? r`<div class="branding" part="branding">
+                <a href="https://singlebase.cloud" target="_blank" rel="noopener noreferrer"
+                  >${this.msg.brandingLabel}</a
+                >
+              </div>` : m}
+        ${this.toast ? r`<div class="toast" role="status">
+                <span>${this.toast.text}</span>
+                ${this.toast.undo ? r`<button type="button" @click=${this.undo}>${this.msg.undo}</button>` : m}
+              </div>` : m}
+        ${this.dragging ? r`<div
+                class="drop"
+                @dragover=${(t) => t.preventDefault()}
+                @dragleave=${this.onDragLeave}
+                @drop=${this.onDrop}
+              >
+                <strong>${this.msg.dropTitle}</strong><span>${this.msg.dropSub}</span>
+              </div>` : m}
+      </main>
+      ${this.renderPanel()}
+    </div>`;
+  }
+  renderSidebar(e) {
+    const t = this.msg, i = this.search.trim().toLowerCase(), s = this.chatList.filter(
+      (l) => !i || (l.title ?? "").toLowerCase().includes(i)
+    ), a = [
+      [t.groupBookmarked, s.filter((l) => l.bookmarked)],
+      [
+        t.groupToday,
+        s.filter((l) => !l.bookmarked && Pe(l._modified_at ?? l._created_at) === "today")
+      ],
+      [
+        t.groupYesterday,
+        s.filter(
+          (l) => !l.bookmarked && Pe(l._modified_at ?? l._created_at) === "yesterday"
+        )
+      ],
+      [
+        t.groupWeek,
+        s.filter((l) => !l.bookmarked && Pe(l._modified_at ?? l._created_at) === "week")
+      ],
+      [
+        t.groupOlder,
+        s.filter((l) => !l.bookmarked && Pe(l._modified_at ?? l._created_at) === "older")
+      ]
+    ];
+    let o;
+    return this.listState === "loading" && !this.chatList.length ? o = r`<div aria-label=${t.loadingChats}>
+        ${[1, 2, 3, 4].map(() => r`<div class="skeleton"></div>`)}
+      </div>` : s.length ? o = a.filter(([, l]) => l.length).map(
+      ([l, c]) => r`<div class="group">${l}</div>
+              ${c.map((x) => this.renderThreadRow(x))}`
+    ) : o = r`<span class="side-note"
+        >${i ? z(t.noMatch, { query: this.search.trim() }) : t.noChats}</span
+      >`, r`<aside
+      class="sidebar ${e ? "overlay" : "docked"}"
+      part="sidebar"
+      aria-label=${t.chats}
+    >
+      <div class="side-head">
+        <span class="label">${t.chats}</span>
+        <button
+          type="button"
+          class="icon"
+          title=${t.hideSidebar}
+          aria-label=${t.hideSidebar}
+          @click=${() => this.sidebarOpen = !1}
+        >
+          ${y.sidebar()}
+        </button>
+      </div>
+      <div class="side-tools">
+        <button type="button" class="new-chat" @click=${() => this.newChat()}>
+          ${y.plus()}<span>${t.newChat}</span>
+        </button>
+        <input
+          class="search"
+          type="search"
+          placeholder=${t.searchChats}
+          aria-label=${t.searchChats}
+          .value=${this.search}
+          @input=${(l) => this.search = l.target.value}
+        />
+      </div>
+      <div class="threads">${o}</div>
+    </aside>`;
+  }
+  renderThreadRow(e) {
+    const t = this.msg, i = e._id === this.activeId, s = e.title || t.untitled;
+    if (this.renamingId === e._id)
+      return r`<div class="thread active">
+        <input
+          class="thread-rename"
+          maxlength="80"
+          .value=${s}
+          aria-label=${t.renameChat}
+          @keydown=${(o) => {
+        o.key === "Enter" && this.commitRename(e._id, o.target.value), o.key === "Escape" && (o.stopPropagation(), this.renamingId = "");
+      }}
+          @blur=${(o) => this.commitRename(e._id, o.target.value)}
+        />
+      </div>`;
+    const a = (o) => (l) => {
+      l.stopPropagation(), o();
+    };
+    return r`<div
+      class="thread ${i ? "active" : ""}"
+      role="button"
+      tabindex="0"
+      aria-current=${i ? "true" : "false"}
+      @click=${() => this.openChat(e._id)}
+      @keydown=${(o) => o.key === "Enter" && this.openChat(e._id)}
+    >
+      <span class="thread-title">${s}</span>
+      <span class="thread-actions">
+        <button
+          type="button"
+          class="icon sm ${e.bookmarked ? "on" : ""}"
+          title=${e.bookmarked ? t.unbookmarkChat : t.bookmarkChat}
+          aria-label=${e.bookmarked ? t.unbookmarkChat : t.bookmarkChat}
+          @click=${a(() => this.toggleChatBookmark(e._id))}
+        >
+          ${y.bookmark(!!e.bookmarked)}
+        </button>
+        <button
+          type="button"
+          class="icon sm"
+          title=${t.renameChat}
+          aria-label=${t.renameChat}
+          @click=${a(() => {
+      this.renamingId = e._id, this.focusNext = "input.thread-rename";
+    })}
+        >
+          ${y.pencil()}
+        </button>
+        <button
+          type="button"
+          class="icon sm danger"
+          title=${t.deleteChat}
+          aria-label=${t.deleteChat}
+          @click=${a(() => this.deleteChat(e._id))}
+        >
+          ${y.trash()}
+        </button>
+      </span>
+    </div>`;
+  }
+  renderHeader() {
+    const e = this.msg, t = !!this.activeId, i = (this.embed === "inline" || this.embed === "launcher") && !this.mobile, s = this.embed === "launcher" ? () => this.close() : this.expanded ? () => this.collapse() : null;
+    let a = m;
+    return this.showTitle && (a = this.editingTitle ? r`<input
+            class="title-input"
+            maxlength="80"
+            .value=${this.chatTitle}
+            aria-label=${e.renameChat}
+            @keydown=${(o) => {
+      o.key === "Enter" && this.commitTitle(o.target.value), o.key === "Escape" && (o.stopPropagation(), this.editingTitle = !1);
+    }}
+            @blur=${(o) => this.commitTitle(o.target.value)}
+          />` : r`<button
+            type="button"
+            class="title"
+            part="title"
+            ?disabled=${!t}
+            title=${t ? e.renameChat : ""}
+            @click=${() => {
+      this.editingTitle = !0, this.focusNext = "input.title-input";
+    }}
+          >
+            ${this.chatTitle || e.untitled}
+          </button>`), r`<header class="header" part="header">
+      <div class="header-left">
+        ${this.sidebarOpen && this.docked ? m : r`<button
+                type="button"
+                class="icon"
+                title=${e.showChats}
+                aria-label=${e.showChats}
+                @click=${() => this.sidebarOpen = !0}
+              >
+                ${y.sidebar()}
+              </button>`}
+        ${a}
+      </div>
+      <div class="header-right">
+        <button
+          type="button"
+          class="icon ${this.bookmarked ? "on" : ""}"
+          ?disabled=${!t}
+          title=${this.bookmarked ? e.unbookmarkChat : e.bookmarkChat}
+          aria-label=${this.bookmarked ? e.unbookmarkChat : e.bookmarkChat}
+          @click=${() => this.activeId && this.toggleChatBookmark(this.activeId)}
+        >
+          ${y.bookmark(this.bookmarked)}
+        </button>
+        ${this.allowExport ? r`<div class="menu-wrap">
+                <button
+                  type="button"
+                  class="icon ${this.menuOpen ? "on" : ""}"
+                  ?disabled=${!this.msgs.length}
+                  title=${e.exportChat}
+                  aria-label=${e.exportChat}
+                  aria-haspopup="menu"
+                  aria-expanded=${this.menuOpen ? "true" : "false"}
+                  @click=${() => this.menuOpen = !this.menuOpen}
+                >
+                  ${y.download()}
+                </button>
+                ${this.menuOpen ? this.renderExportMenu() : m}
+              </div>` : m}
+        <button
+          type="button"
+          class="icon danger"
+          ?disabled=${!t}
+          title=${e.deleteChat}
+          aria-label=${e.deleteChat}
+          @click=${() => this.activeId && this.deleteChat(this.activeId)}
+        >
+          ${y.trash()}
+        </button>
+        ${i || s ? r`<span class="divider"></span> ${i ? r`<button
+                        type="button"
+                        class="icon"
+                        title=${this.expanded ? e.restore : e.expand}
+                        aria-label=${this.expanded ? e.restore : e.expand}
+                        @click=${() => this.expanded ? this.collapse() : this.expand()}
+                      >
+                        ${this.expanded ? y.restore() : y.expand()}
+                      </button>` : m}
+                ${s ? r`<button
+                        type="button"
+                        class="icon"
+                        title=${e.minimize}
+                        aria-label=${e.minimize}
+                        @click=${s}
+                      >
+                        ${y.minimize()}
+                      </button>` : m}` : m}
+      </div>
+    </header>`;
+  }
+  renderExportMenu() {
+    const e = this.msg, t = [
+      [e.exportMarkdown, ".md", "md"],
+      [e.exportJson, ".json", "json"],
+      [e.exportText, ".txt", "txt"],
+      [e.exportCopy, "", "copy"]
+    ];
+    return r`<div class="menu-scrim" @click=${() => this.menuOpen = !1}></div>
+      <div class="menu" role="menu">
+        <span class="label">${e.exportHeading}</span>
+        ${t.map(
+      ([i, s, a]) => r`<button
+              type="button"
+              role="menuitem"
+              class="menu-item"
+              @click=${() => this.exportChat(a)}
+            >
+              <span>${i}</span><span class="ext">${s}</span>
+            </button>`
+    )}
+      </div>`;
+  }
+  promptList() {
+    const e = this.prompts;
+    return Array.isArray(e) && e.length ? e.map((t) => typeof t == "string" ? { text: t } : t).filter((t) => t == null ? void 0 : t.text).slice(0, 4) : typeof e == "string" && e.trim() ? e.split("|").map((t) => t.trim()).filter(Boolean).slice(0, 4).map((t) => ({ text: t })) : (ot[this.mode] ?? ot.chat).map(([t, i]) => ({
+      label: t,
+      text: i
+    }));
+  }
+  renderWelcome() {
+    const e = this.msg, t = this.mode === "rag" ? "Rag" : this.mode === "rich" ? "Rich" : "Chat", i = (s) => e[`${s}${t}`];
+    return r`<div class="welcome" part="welcome">
+      <div class="welcome-head">
+        ${this.logoUrl && it(this.logoUrl, !0) ? r`<img class="welcome-logo" src=${this.logoUrl} alt="" />` : m}
+        <span class="label">${i("eyebrow")}</span>
+        <h2>${this.heading || i("heading")}</h2>
+        <p>${this.description || i("description")}</p>
+      </div>
+      <div class="prompts">
+        ${this.promptList().map(
+      (s) => r`<button
+              type="button"
+              class="prompt"
+              part="prompt"
+              @click=${() => this.send(s.text)}
+            >
+              <span class="label">${s.label || "Suggested"}</span>
+              <span class="prompt-text">${s.text}</span>
+            </button>`
+    )}
+      </div>
+    </div>`;
+  }
+  renderThread() {
+    const e = this.msgs.map((t) => t.role).lastIndexOf("assistant");
+    return r`<div class="thread-view">
+      ${this.threadError ? r`<div class="error-card" role="alert">
+              <span>${this.threadError}</span>
+              ${this.activeId ? r`<button
+                      type="button"
+                      class="btn"
+                      @click=${() => this.openChat(this.activeId)}
+                    >
+                      ${this.msg.retry}
+                    </button>` : m}
+            </div>` : m}
+      ${this.loadingThread ? r`${[1, 2].map(() => r`<div class="skeleton" style="height:48px"></div>`)}` : m}
+      ${vt(
+      this.msgs,
+      (t) => t.key,
+      (t, i) => t.role === "user" ? this.renderUser(t) : this.renderBot(t, i === e)
+    )}
+    </div>`;
+  }
+  renderUser(e) {
+    const t = this.msg, i = e.at ? new Date(e.at).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }) : "", s = e.attachments ?? [];
+    return r`<div class="msg user" part="message user">
+      ${s.length ? r`<div class="attachments">
+              ${s.map((a) => r`<span class="doc-chip"><span class="ext">${ct(a.name)}</span><span class="name">${a.name}</span></span>`)}
+            </div>` : m}
+      ${this.editingKey === e.key ? r`<div class="edit-box">
+              <textarea
+                rows="3"
+                class="edit-input"
+                .value=${this.editDraft}
+                @input=${(a) => this.editDraft = a.target.value}
+                @keydown=${(a) => {
+      a.key === "Escape" && (a.stopPropagation(), this.editingKey = "");
+    }}
+              ></textarea>
+              <div class="row-end">
+                <button type="button" class="btn" @click=${() => this.editingKey = ""}>
+                  ${t.cancel}
+                </button>
+                <button type="button" class="btn primary" @click=${() => this.saveEdit(e)}>
+                  ${t.saveResend}
+                </button>
+              </div>
+            </div>` : r`<div class="bubble-user">${e.content}</div>
+              <div class="toolbar">
+                ${e.bookmarked ? r`<span class="saved">${y.bookmark(!0)}${t.saved}</span>` : m}
+                <span class="time">${i}</span>
+                ${this.busy ? m : r`<button
+                        type="button"
+                        class="icon"
+                        title=${t.edit}
+                        aria-label=${t.edit}
+                        @click=${() => {
+      this.editingKey = e.key, this.editDraft = e.content, this.focusNext = "textarea.edit-input";
+    }}
+                      >
+                        ${y.pencil()}
+                      </button>`}
+                <button
+                  type="button"
+                  class="icon"
+                  title=${this.copiedKey === e.key ? t.copied : t.copy}
+                  aria-label=${t.copy}
+                  @click=${() => this.copy(e.key, e.content)}
+                >
+                  ${y.copy()}
+                </button>
+                ${e.id ? r`<button
+                        type="button"
+                        class="icon ${e.bookmarked ? "on" : ""}"
+                        title=${e.bookmarked ? t.unbookmarkMessage : t.bookmarkMessage}
+                        aria-label=${e.bookmarked ? t.unbookmarkMessage : t.bookmarkMessage}
+                        @click=${() => this.toggleMessageBookmark(e)}
+                      >
+                        ${y.bookmark(e.bookmarked)}
+                      </button>` : m}
+                <button
+                  type="button"
+                  class="icon danger"
+                  title=${t.deleteMessage}
+                  aria-label=${t.deleteMessage}
+                  @click=${() => this.deleteMessage(e)}
+                >
+                  ${y.trash()}
+                </button>
+              </div>`}
+    </div>`;
+  }
+  pillLabel() {
+    return this.mode === "rag" ? this.msg.searching : this.mode === "rich" ? this.msg.building : this.msg.thinking;
+  }
+  renderBot(e, t) {
+    const i = this.msg, s = e.phase === "pending", a = e.phase === "done", o = e.sources.length, l = Ze(e.content), c = e.sources.map((b, M) => Ke(b, M + 1)), x = l.size ? c.filter((b) => l.has(b.n)) : c, f = e.at ? new Date(e.at).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }) : "", O = e.content + (x.length ? `
+
+Sources:
+${x.map((b) => `[${b.n}] ${b.title}`).join(`
+`)}` : ""), S = this.retrievalOpen.has(e.key);
+    return r`<div class="msg bot" part="message assistant">
+      ${s ? r`<div class="halo"></div>` : m}
+      ${this.arrivedKey === e.key ? r`<div class="arrived">
+              <div class="wash"></div>
+              <div class="ring"></div>
+              <div class="sweep"></div>
+            </div>` : m}
+      <div class="bot-body">
+        ${e.bookmarked ? r`<span class="saved">${y.bookmark(!0)}${i.saved}</span>` : m}
+        ${s ? r`<div class="pill" role="status">
+                <span class="ring"></span><span class="dot"></span>
+                <span class="shimmer">${this.pillLabel()}</span>
+              </div>` : m}
+        ${o && !s ? r`<div class="retrieval">
+                <button
+                  type="button"
+                  class="retrieval-toggle"
+                  aria-expanded=${S ? "true" : "false"}
+                  @click=${() => {
+      const b = new Set(this.retrievalOpen);
+      b.has(e.key) ? b.delete(e.key) : b.add(e.key), this.retrievalOpen = b;
+    }}
+                >
+                  <span class="chev">${S ? "▾" : "▸"}</span>
+                  <span style="flex:1">${z(i.searchedSources, { n: o })}</span>
+                  ${e.execTime !== void 0 ? r`<span class="ms">${e.execTime.toFixed(1)}s</span>` : m}
+                </button>
+                ${S ? r`<div class="retrieval-list">
+                        ${c.map(
+      (b) => r`<button
+                              type="button"
+                              class="passage"
+                              @click=${() => this.panel = { key: e.key, n: b.n }}
+                            >
+                              <span class="n">${b.n}</span>
+                              <span class="what"
+                                ><span>${b.title}</span><span>${b.collection || b.path}</span></span
+                              >
+                              ${b.score !== null ? r`<span class="relevance"
+                                      ><span class="score">${b.score.toFixed(2)}</span>
+                                      <span class="relevance-track"
+                                        ><span
+                                          class="relevance-fill"
+                                          style="width:${Math.round(b.score * 100)}%"
+                                        ></span></span
+                                    ></span>` : r`<span></span>`}
+                            </button>`
+    )}
+                      </div>` : m}
+              </div>` : m}
+        ${s ? m : this.renderAnswer(e)}
+        ${e.phase === "streaming" ? r`<span class="caret"></span>` : m}
+        ${e.phase === "error" ? r`<div class="error-card" role="alert">
+                <span>${e.error}</span>
+                <button type="button" class="btn" @click=${() => this.retry(e)}>
+                  ${i.retry}
+                </button>
+              </div>` : m}
+        ${a && x.length ? r`<div class="cards">
+                <span class="label">${l.size ? i.sourcesCited : i.sourcesRetrieved}</span>
+                <div class="card-grid">
+                  ${x.map(
+      (b) => {
+        var M;
+        return r`<button
+                        type="button"
+                        class="source-card ${((M = this.panel) == null ? void 0 : M.key) === e.key && this.panel.n === b.n ? "active" : ""}"
+                        @click=${() => this.panel = { key: e.key, n: b.n }}
+                      >
+                        <span class="top"
+                          ><span class="num">${b.n}</span
+                          >${b.collection ? r`<span class="label">${b.collection}</span>` : m}</span
+                        >
+                        <span class="t">${b.title}</span>
+                        <span class="s">${b.text}</span>
+                      </button>`;
+      }
+    )}
+                </div>
+              </div>` : m}
+        ${a ? r`<div class="toolbar ${t ? "pinned" : ""}">
+                <button
+                  type="button"
+                  class="icon"
+                  title=${this.copiedKey === e.key ? i.copied : i.copy}
+                  aria-label=${i.copy}
+                  @click=${() => this.copy(e.key, O)}
+                >
+                  ${y.copy()}
+                </button>
+                ${t && !this.busy ? r`<button
+                        type="button"
+                        class="icon"
+                        title=${i.regenerate}
+                        aria-label=${i.regenerate}
+                        @click=${() => this.regenerate()}
+                      >
+                        ${y.refresh()}
+                      </button>` : m}
+                ${e.id ? r`<button
+                        type="button"
+                        class="icon ${e.bookmarked ? "on" : ""}"
+                        title=${e.bookmarked ? i.unbookmarkMessage : i.bookmarkMessage}
+                        aria-label=${e.bookmarked ? i.unbookmarkMessage : i.bookmarkMessage}
+                        @click=${() => this.toggleMessageBookmark(e)}
+                      >
+                        ${y.bookmark(e.bookmarked)}
+                      </button>` : m}
+                <button
+                  type="button"
+                  class="icon danger"
+                  title=${i.deleteMessage}
+                  aria-label=${i.deleteMessage}
+                  @click=${() => this.deleteMessage(e)}
+                >
+                  ${y.trash()}
+                </button>
+                <span class="time">${f}</span>
+                ${e.stopped ? r`<span class="note">${i.stopped}</span>` : m}
+                <span class="spacer"></span>
+                ${e.feedback ? r`<span class="note"
+                        >${e.feedback === "up" ? i.markedHelpful : i.thanksFeedback}</span
+                      >` : r`<button
+                          type="button"
+                          class="icon"
+                          title=${i.helpful}
+                          aria-label=${i.helpful}
+                          @click=${() => this.feedback(e, "up")}
+                        >
+                          ${y.thumb()}
+                        </button>
+                        <button
+                          type="button"
+                          class="icon"
+                          title=${i.notHelpful}
+                          aria-label=${i.notHelpful}
+                          @click=${() => this.feedback(e, "down")}
+                        >
+                          ${y.thumb(!0)}
+                        </button>`}
+              </div>` : m}
+        ${a && t && !this.busy && e.followups.length ? r`<div class="followups">
+                ${e.followups.map(
+      (b) => r`<button type="button" class="followup" @click=${() => this.send(b)}>
+                      <span class="arrow">↳</span><span>${b}</span>
+                    </button>`
+    )}
+              </div>` : m}
+      </div>
+    </div>`;
+  }
+  renderAnswer(e) {
+    if (e.phase === "error" && !e.content) return m;
+    if (e.phase === "done" && !e.content)
+      return e.stopped ? m : r`<div class="answer"><p class="note">${this.msg.emptyReply}</p></div>`;
+    const t = _t(zt(e.content), this.renderAs), i = this.renderAs === "text" ? 0 : e.sources.length;
+    return r`<div class="answer" part="answer">
+      ${t.map((s, a) => this.renderBlock(s, e, i, a))}
+    </div>`;
+  }
+  renderInline(e, t, i) {
+    return Mt(e, i).map((s) => {
+      var a;
+      switch (s.type) {
+        case "bold":
+          return r`<strong>${s.text}</strong>`;
+        case "code":
+          return r`<code class="inline">${s.text}</code>`;
+        case "link":
+          return r`<a href=${s.href} target="_blank" rel="noopener noreferrer nofollow"
+            >${s.text}</a
+          >`;
+        case "cite": {
+          const o = ((a = this.panel) == null ? void 0 : a.key) === t.key && this.panel.n === s.n ? "cite active" : "cite", l = z(this.msg.openSource, { n: s.n });
+          return r`<button type="button" class=${o} aria-label=${l} @click=${() => this.panel = { key: t.key, n: s.n }}>${s.n}</button>`;
+        }
+        default:
+          return s.text;
+      }
+    });
+  }
+  renderBlock(e, t, i, s) {
+    switch (e.type) {
+      case "p":
+        return r`<p>${this.renderInline(e.text, t, i)}</p>`;
+      case "raw":
+        return r`<p class="raw">${e.text}</p>`;
+      case "h":
+        return r`<h3>${this.renderInline(e.text, t, i)}</h3>`;
+      case "list": {
+        const a = e.items.map(
+          (o) => r`<li>${this.renderInline(o, t, i)}</li>`
+        );
+        return e.ordered ? r`<ol>
+              ${a}
+            </ol>` : r`<ul>
+              ${a}
+            </ul>`;
+      }
+      case "quote":
+        return r`<div class="quote">${this.renderInline(e.text, t, i)}</div>`;
+      case "code": {
+        const a = `${t.key}:${s}`;
+        return r`<div class="code">
+          <div class="code-head">
+            <span class="label">${e.lang}</span>
+            <button type="button" class="text-btn" @click=${() => this.copy(a, e.text)}>
+              ${this.copiedKey === a ? this.msg.copied : this.msg.copy}
+            </button>
+          </div>
+          <pre><code>${e.text}</code></pre>
+        </div>`;
+      }
+      case "table":
+        return r`<div class="table">
+          <table>
+            <thead>
+              <tr>
+                ${e.head.map((a) => r`<th>${this.renderInline(a, t, i)}</th>`)}
+              </tr>
+            </thead>
+            <tbody>
+              ${e.rows.map(
+          (a) => r`<tr>
+                    ${a.map((o) => r`<td>${this.renderInline(o, t, i)}</td>`)}
+                  </tr>`
+        )}
+            </tbody>
+          </table>
+        </div>`;
+      case "chart":
+        return this.renderChart(e.spec);
+      case "chartPending":
+        return r`<div class="chart-pending"><span class="label">Rendering chart</span></div>`;
+      case "img":
+        return r`<div class="gallery ${e.images.length > 1 ? "many" : ""}">
+          ${e.images.map(
+          (a) => r`<figure>
+                ${a.src && it(a.src, !0) ? r`<img
+                        src=${a.src}
+                        alt=${a.alt}
+                        loading="lazy"
+                        referrerpolicy="no-referrer"
+                      />` : r`<div class="img-missing"><span class="label">Image</span></div>`}
+                ${a.alt ? r`<figcaption>${a.alt}</figcaption>` : m}
+              </figure>`
+        )}
+        </div>`;
+      default:
+        return m;
+    }
+  }
+  renderChart(e) {
+    const t = e.series.length > 1 ? r`<span class="legend">
+            ${e.series.map(
+      (o, l) => r`<span
+                  ><span
+                    class="swatch"
+                    style="background:${_[l % _.length]}"
+                  ></span
+                  >${o.name}</span
+                >`
+    )}
+          </span>` : m, i = r`<div class="chart-head">
+      <span class="chart-title">${e.title}</span>${t}
+    </div>`;
+    if (e.type === "line") {
+      const o = Math.max(0, ...e.series.flatMap((f) => f.values)), l = Math.pow(10, Math.floor(Math.log10(o || 1))), c = Math.ceil(o / l * 2) / 2 * l || 1, x = Math.max(e.labels.length, ...e.series.map((f) => f.values.length));
+      return r`<figure class="chart" part="chart" aria-label=${e.title}>
+        ${i}
+        <div class="line-chart">
+          <div class="plot">
+            ${[1, 0.5, 0].map(
+        (f) => r`<div class="tick ${f === 0 ? "base" : ""}" style="top:${(1 - f) * 100}%">
+                  <span>${Fe(Math.round(c * f), e.unit)}</span>
+                </div>`
+      )}
+            <svg
+              viewBox="0 0 600 170"
+              preserveAspectRatio="none"
+              role="img"
+              aria-label=${e.title}
+            >
+              ${e.series.map(
+        (f, O) => $`<polyline pathLength="1" stroke=${_[O % _.length]}
+                  points=${f.values.map(
+          (S, b) => `${(x > 1 ? b / (x - 1) * 600 : 300).toFixed(1)},${(170 - S / c * 170).toFixed(1)}`
+        ).join(
+          " "
+        )}><title>${f.name}: ${f.values.map((S) => Fe(S, e.unit)).join(", ")}</title></polyline>`
+      )}
+            </svg>
+          </div>
+          <div class="x-labels">${e.labels.map((f) => r`<span>${f}</span>`)}</div>
+        </div>
+      </figure>`;
+    }
+    const s = e.labels.map(
+      (o, l) => e.series.reduce((c, x) => c + (x.values[l] || 0), 0)
+    ), a = Math.max(0, ...s) || 1;
+    return r`<figure class="chart" part="chart" aria-label=${e.title}>
+      ${i}
+      <div class="bars">
+        ${e.labels.map(
+      (o, l) => r`<div class="bar-row" title="${o}: ${Fe(s[l], e.unit)}">
+              <span class="bar-label">${o}</span>
+              <span class="bar-track"
+                ><span class="bar-fill" style="width:${Math.max(0, s[l]) / a * 100}%">
+                  ${e.series.map(
+        (c, x) => r`<span
+                        style="flex:${Math.max(0, c.values[l] || 0)};background:${e.series.length > 1 ? _[x % _.length] : "var(--c-ink)"}"
+                      ></span>`
+      )}
+                </span></span
+              >
+              <span class="bar-value">${Fe(s[l], e.unit)}</span>
+            </div>`
+    )}
+      </div>
+    </figure>`;
+  }
+  renderPanel() {
+    if (!this.panel) return m;
+    const e = this.msgs.find((f) => f.key === this.panel.key), t = e == null ? void 0 : e.sources[this.panel.n - 1];
+    if (!e || !t) return m;
+    const i = this.msg, s = Ke(t, this.panel.n), a = Ze(e.content), o = e.sources.map((f, O) => Ke(f, O + 1)).filter((f) => f.n !== s.n && (!a.size || a.has(f.n))), l = `ref:${e.key}:${s.n}`, c = `"${s.text}"
+— ${s.title} [${s.n}]${s.path ? `
+${s.path}` : ""}${s.updated ? ` · Updated ${s.updated}` : ""}`, x = [
+      s.updated ? `Updated ${s.updated}` : "",
+      s.score !== null ? `Relevance ${s.score.toFixed(2)}` : ""
+    ].filter(Boolean).join(" · ");
+    return r`<aside
+      class="panel ${this.panelDocked ? "docked" : "overlay"}"
+      part="panel"
+      role="region"
+      aria-label=${z(i.sourceLabel, { n: s.n })}
+    >
+      <div class="panel-head">
+        <span class="label"
+          >${z(i.sourceLabel, { n: s.n })}${s.collection ? ` · ${s.collection}` : ""}</span
+        >
+        <button type="button" class="text-btn underline" @click=${() => this.panel = null}>
+          ${i.close}
+        </button>
+      </div>
+      <div class="panel-body">
+        <div class="panel-meta">
+          <h3>${s.title}</h3>
+          ${s.path ? r`<span class="path">${s.path}</span>` : m}
+          ${x ? r`<span class="meta">${x}</span>` : m}
+        </div>
+        <div class="passage-box">
+          <span class="text">${s.text}</span>
+          <div class="passage-foot">
+            <span class="label">${i.citedPassage}</span>
+            <button
+              type="button"
+              class="copy-ref"
+              title=${i.copyReference}
+              aria-label=${i.copyReference}
+              @click=${() => this.copy(l, c)}
+            >
+              ${y.copy()}<span>${this.copiedKey === l ? i.copied : i.copy}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+      ${o.length ? r`<div class="panel-foot">
+              <span class="label">${i.alsoCited}</span>
+              <div class="chips">
+                ${o.map(
+      (f) => r`<button
+                      type="button"
+                      class="chip"
+                      @click=${() => this.panel = { key: e.key, n: f.n }}
+                    >
+                      ${f.n} · ${f.title}
+                    </button>`
+    )}
+              </div>
+            </div>` : m}
+    </aside>`;
+  }
+  renderComposer() {
+    const e = this.msg, t = this.mode === "rag" ? e.placeholderRag : this.mode === "rich" ? e.placeholderRich : z(e.placeholderChat, { name: this.assistantName }), i = !this.draft.trim();
+    return r`<div class="composer-wrap">
+      <div class="composer-col">
+        <input
+          type="file"
+          multiple
+          hidden
+          accept=".md,.markdown,.txt,.csv,.tsv,.json,.html,.htm,.yaml,.yml,.xml,.log,text/*"
+          @change=${(s) => {
+      const a = s.target;
+      this.addFiles(a.files).then(() => a.value = "");
+    }}
+        />
+        <div class="composer-box">
+          ${this.busy ? r`<div class="composer-glow"></div>` : m}
+          <div class="composer ${this.busy ? "busy" : ""}" part="composer">
+            ${this.files.length ? r`<div class="pending-files">
+                    ${this.files.map(
+      (s) => r`<div class="pending-file">
+                          <span class="ext">${ct(s.name)}</span>
+                          <span class="meta"
+                            ><span class="name">${s.name}</span
+                            ><span class="size">${Ve(s.size)}</span></span
+                          >
+                          <button
+                            type="button"
+                            aria-label=${e.removeFile}
+                            title=${e.removeFile}
+                            @click=${() => this.files = this.files.filter((a) => a !== s)}
+                          >
+                            ×
+                          </button>
+                        </div>`
+    )}
+                  </div>` : m}
+            <textarea
+              class="input"
+              rows="1"
+              placeholder=${t}
+              aria-label=${t}
+              .value=${this.draft}
+              @input=${this.onComposerInput}
+              @keydown=${this.onComposerKey}
+            ></textarea>
+            <div class="composer-row">
+              <div>
+                ${this.allowUpload ? r`<button
+                        type="button"
+                        class="attach"
+                        title=${e.attach}
+                        aria-label=${e.attach}
+                        @click=${() => {
+      var s;
+      return (s = this.renderRoot.querySelector("input[type=file]")) == null ? void 0 : s.click();
+    }}
+                      >
+                        ${y.clip()}
+                      </button>` : m}
+              </div>
+              ${this.busy ? r`<button
+                      type="button"
+                      class="send stop"
+                      title=${e.stop}
+                      aria-label=${e.stop}
+                      @click=${() => this.stop()}
+                    >
+                      ${y.stop()}
+                    </button>` : r`<button
+                      type="button"
+                      class="send"
+                      title=${e.send}
+                      aria-label=${e.send}
+                      ?disabled=${i}
+                      @click=${() => this.send()}
+                    >
+                      ${y.up()}
+                    </button>`}
+            </div>
+          </div>
+          ${this.busy ? r`<div class="composer-ring"><div class="ring"></div></div>` : m}
+        </div>
+        <span class="footnote">${z(e.footnote, { name: this.assistantName })}</span>
+      </div>
+    </div>`;
+  }
+}, j = new WeakMap(), A = new WeakMap(), E = new WeakMap(), N = new WeakMap(), B = new WeakMap(), D = new WeakMap(), R = new WeakMap(), U = new WeakMap(), F = new WeakMap(), K = new WeakMap(), P = new WeakMap(), H = new WeakMap(), J = new WeakMap(), W = new WeakMap(), q = new WeakMap(), G = new WeakMap(), V = new WeakMap(), X = new WeakMap(), Y = new WeakMap(), Q = new WeakMap(), Z = new WeakMap(), ee = new WeakMap(), te = new WeakMap(), ie = new WeakMap(), se = new WeakMap(), ae = new WeakMap(), re = new WeakMap(), ne = new WeakMap(), oe = new WeakMap(), le = new WeakMap(), ce = new WeakMap(), de = new WeakMap(), pe = new WeakMap(), he = new WeakMap(), ue = new WeakMap(), ge = new WeakMap(), me = new WeakMap(), be = new WeakMap(), fe = new WeakMap(), xe = new WeakMap(), ve = new WeakMap(), ye = new WeakMap(), ke = new WeakMap(), we = new WeakMap(), $e = new WeakMap(), Te = new WeakMap(), Ce = new WeakMap(), Se = new WeakMap(), ze = new WeakMap(), Oe = new WeakMap(), Me = new WeakMap(), _e = new WeakMap(), Ie = new WeakMap(), Le = new WeakMap(), je = new WeakMap(), Ae = new WeakMap(), Ee = new WeakMap(), Ne = new WeakMap(), Be = new WeakMap(), De = new WeakMap(), Re = new WeakMap(), dt);
+Nt(d, "styles", [kt, wt]);
+g([
+  w({ attribute: !1 })
+], d.prototype, "client", 1);
+g([
+  w({ attribute: !1 })
+], d.prototype, "messages", 1);
+g([
+  w({ reflect: !0 })
+], d.prototype, "theme", 1);
+g([
+  w({ reflect: !0 })
+], d.prototype, "mode", 1);
+g([
+  w({ attribute: "render-as" })
+], d.prototype, "renderAs", 1);
+g([
+  w({ reflect: !0 })
+], d.prototype, "glow", 1);
+g([
+  w({ converter: I })
+], d.prototype, "followups", 1);
+g([
+  w({ converter: I, attribute: "auto-title" })
+], d.prototype, "autoTitle", 1);
+g([
+  w()
+], d.prototype, "model", 1);
+g([
+  w({ converter: We })
+], d.prototype, "params", 1);
+g([
+  w({ attribute: "system-message" })
+], d.prototype, "systemMessage", 1);
+g([
+  w({ converter: We })
+], d.prototype, "retrieval", 1);
+g([
+  w({ converter: We })
+], d.prototype, "metadata", 1);
+g([
+  w({ reflect: !0 })
+], d.prototype, "embed", 1);
+g([
+  w({ reflect: !0 })
+], d.prototype, "position", 1);
+g([
+  w({ converter: Bt })
+], d.prototype, "sidebar", 1);
+g([
+  w({ converter: I, attribute: "show-title" })
+], d.prototype, "showTitle", 1);
+g([
+  w({ attribute: "chat-id" })
+], d.prototype, "chatIdAttr", 1);
+g([
+  w({ attribute: "assistant-name" })
+], d.prototype, "assistantName", 1);
+g([
+  w({ attribute: "logo-url" })
+], d.prototype, "logoUrl", 1);
+g([
+  w()
+], d.prototype, "heading", 1);
+g([
+  w()
+], d.prototype, "description", 1);
+g([
+  w()
+], d.prototype, "prompts", 1);
+g([
+  w({ attribute: "bubble-text" })
+], d.prototype, "bubbleText", 1);
+g([
+  w({ type: Boolean, attribute: "greeting-bubble" })
+], d.prototype, "greetingBubble", 1);
+g([
+  w({ type: Boolean, attribute: "unread-badge" })
+], d.prototype, "unreadBadge", 1);
+g([
+  w({ converter: I, attribute: "allow-upload" })
+], d.prototype, "allowUpload", 1);
+g([
+  w({ converter: I, attribute: "allow-export" })
+], d.prototype, "allowExport", 1);
+g([
+  w({ converter: I })
+], d.prototype, "branding", 1);
+g([
+  v()
+], d.prototype, "chatList", 1);
+g([
+  v()
+], d.prototype, "listState", 1);
+g([
+  v()
+], d.prototype, "activeId", 1);
+g([
+  v()
+], d.prototype, "chatTitle", 1);
+g([
+  v()
+], d.prototype, "bookmarked", 1);
+g([
+  v()
+], d.prototype, "msgs", 1);
+g([
+  v()
+], d.prototype, "loadingThread", 1);
+g([
+  v()
+], d.prototype, "threadError", 1);
+g([
+  v()
+], d.prototype, "busy", 1);
+g([
+  v()
+], d.prototype, "draft", 1);
+g([
+  v()
+], d.prototype, "files", 1);
+g([
+  v()
+], d.prototype, "search", 1);
+g([
+  v()
+], d.prototype, "sidebarOpen", 1);
+g([
+  v()
+], d.prototype, "width", 1);
+g([
+  v()
+], d.prototype, "panel", 1);
+g([
+  v()
+], d.prototype, "menuOpen", 1);
+g([
+  v()
+], d.prototype, "editingKey", 1);
+g([
+  v()
+], d.prototype, "editDraft", 1);
+g([
+  v()
+], d.prototype, "editingTitle", 1);
+g([
+  v()
+], d.prototype, "renamingId", 1);
+g([
+  v()
+], d.prototype, "toast", 1);
+g([
+  v()
+], d.prototype, "copiedKey", 1);
+g([
+  v()
+], d.prototype, "retrievalOpen", 1);
+g([
+  v()
+], d.prototype, "arrivedKey", 1);
+g([
+  v()
+], d.prototype, "dragging", 1);
+g([
+  v()
+], d.prototype, "showJump", 1);
+g([
+  v()
+], d.prototype, "offline", 1);
+g([
+  v()
+], d.prototype, "isOpen", 1);
+g([
+  v()
+], d.prototype, "expanded", 1);
+g([
+  v()
+], d.prototype, "bubble", 1);
+g([
+  v()
+], d.prototype, "seen", 1);
+g([
+  v()
+], d.prototype, "mobile", 1);
+d = g([
+  xt("singlebase-chat")
+], d);
+export {
+  d as S,
+  _t as a,
+  Ke as b,
+  Ze as c,
+  $t as d,
+  zt as e,
+  Mt as p,
+  Tt as r,
+  tt as s
+};
+//# sourceMappingURL=chat-bXaRWel7.js.map