hypercrm 1.0.1

package/assets/widget.js

@@ -0,0 +1,2958 @@
+(function(global) {
+  'use strict';
+
+  const getFromStorage = (key, fallback) => {
+    try {
+      const value = localStorage.getItem(key);
+      return value == null ? fallback : value;
+    } catch (_) {
+      return fallback;
+    }
+  };
+
+  const WIDGET_API_URL = global.HYPERCRM_API_URL || getFromStorage('hypercrm_api_url', 'http://localhost:3000/api');
+  const WIDGET_API_KEY = global.HYPERCRM_API_KEY || getFromStorage('hypercrm_api_key', 'hypercrm_demo_key');
+
+  const DEFAULT_THEME = {
+    primary: '#137fec',
+    primaryContrast: '#ffffff',
+    canvasLight: '#f5f7fb',
+    canvasDark: '#101922',
+    surfaceLight: '#ffffff',
+    surfaceDark: '#1b2b3a',
+    textPrimaryLight: '#111827',
+    textSecondaryLight: '#6b7280',
+    textPrimaryDark: '#f8fafc',
+    textSecondaryDark: 'rgba(226, 232, 240, 0.7)',
+    borderLight: 'rgba(15, 23, 42, 0.08)',
+    borderDark: 'rgba(255, 255, 255, 0.12)',
+    shadowPanel: '0 24px 60px rgba(15, 23, 42, 0.2)',
+    shadowPanelDark: '0 24px 60px rgba(0, 0, 0, 0.45)',
+    statusOnline: '#10b981',
+    statusOnlineBg: 'rgba(16, 185, 129, 0.16)',
+    statusOffline: '#94a3b8',
+    statusOfflineBg: 'rgba(148, 163, 184, 0.22)'
+  };
+
+  const camelToKebab = (value) => value.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase());
+
+  const hexToRgba = (hex, alpha) => {
+    if (!hex) return '';
+    let normalized = hex.replace('#', '').trim();
+    if (normalized.length === 3) {
+      normalized = normalized.split('').map((c) => c + c).join('');
+    }
+    if (normalized.length !== 6) return hex;
+    const bigint = parseInt(normalized, 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  };
+
+  const styles = `
+    .hypercrm-widget-container {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      z-index: 2147483000;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      color: var(--hypercrm-text-primary, #111827);
+      --hypercrm-primary: #137fec;
+      --hypercrm-primary-contrast: #ffffff;
+      --hypercrm-primary-soft: rgba(19, 127, 236, 0.14);
+      --hypercrm-primary-soft-strong: rgba(19, 127, 236, 0.24);
+      --hypercrm-canvas: #f5f7fb;
+      --hypercrm-surface: #ffffff;
+      --hypercrm-surface-muted: #f9fbff;
+      --hypercrm-border: rgba(15, 23, 42, 0.08);
+      --hypercrm-border-subtle: rgba(15, 23, 42, 0.06);
+      --hypercrm-text-primary: #111827;
+      --hypercrm-text-secondary: #6b7280;
+      --hypercrm-text-tertiary: rgba(17, 24, 39, 0.5);
+      --hypercrm-status-online: #10b981;
+      --hypercrm-status-online-bg: rgba(16, 185, 129, 0.16);
+      --hypercrm-status-offline: #94a3b8;
+      --hypercrm-status-offline-bg: rgba(148, 163, 184, 0.24);
+      --hypercrm-shadow-panel: 0 24px 60px rgba(15, 23, 42, 0.2);
+      --hypercrm-radius-lg: 20px;
+      --hypercrm-radius-md: 16px;
+      --hypercrm-radius-sm: 12px;
+      color-scheme: light;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .hypercrm-widget-container.hypercrm-position-left {
+      right: auto;
+      left: 24px;
+    }
+
+    .hypercrm-widget-container.hypercrm-position-left .hypercrm-widget-panel {
+      right: auto;
+      left: 0;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark {
+      color: var(--hypercrm-text-primary-dark, #f8fafc);
+      color-scheme: dark;
+    }
+
+    .hypercrm-widget-container *,
+    .hypercrm-widget-container *::before,
+    .hypercrm-widget-container *::after {
+      box-sizing: border-box;
+    }
+
+    .hypercrm-toggle-btn {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      background: var(--hypercrm-primary, #137fec);
+      color: var(--hypercrm-primary-contrast, #ffffff);
+      box-shadow: 0 18px 44px rgba(19, 127, 236, 0.35);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      overflow: hidden;
+    }
+
+    #hypercrm-toggle-inner {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    #hypercrm-toggle-inner img.hypercrm-toggle-avatar {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 50%;
+      display: block;
+    }
+
+    .hypercrm-icon-img {
+      width: 18px;
+      height: 18px;
+      display: block;
+    }
+
+    .hypercrm-icon-img.small {
+      width: 14px;
+      height: 14px;
+    }
+
+    .hypercrm-icon-img.tiny {
+      width: 12px;
+      height: 12px;
+    }
+
+    .hypercrm-icon-img.large {
+      width: 24px;
+      height: 24px;
+    }
+
+    .hypercrm-icon-img.xl {
+      width: 28px;
+      height: 28px;
+    }
+
+    .hypercrm-toggle-btn:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 22px 60px rgba(19, 127, 236, 0.42);
+    }
+
+    .hypercrm-widget-panel {
+      position: absolute;
+      bottom: 84px;
+      right: 0;
+      width: min(504px, calc(100vw - 32px));
+      max-height: min(80vh, 792px);
+      height: min(80vh, 792px);
+      background: var(--hypercrm-surface, #ffffff);
+      border-radius: 24px;
+      border: 1px solid var(--hypercrm-border, rgba(15, 23, 42, 0.08));
+      box-shadow: var(--hypercrm-shadow-panel, 0 24px 60px rgba(15, 23, 42, 0.2));
+      overflow: hidden;
+      display: none;
+      flex-direction: column;
+    }
+
+    .hypercrm-widget-panel.open {
+      display: flex;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-widget-panel {
+      background: var(--hypercrm-surface-dark, #1b2b3a);
+      border-color: var(--hypercrm-border-dark, rgba(255, 255, 255, 0.12));
+      box-shadow: var(--hypercrm-shadow-panel-dark, 0 24px 60px rgba(0, 0, 0, 0.45));
+    }
+
+    .hypercrm-panel-inner {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      min-height: 0;
+    }
+
+    .hypercrm-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 14px;
+      border-bottom: 1px solid var(--hypercrm-border-subtle, rgba(15, 23, 42, 0.06));
+      gap: 10px;
+      min-height: 48px;
+      flex-shrink: 0;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-header {
+      border-bottom-color: var(--hypercrm-border-dark, rgba(255, 255, 255, 0.12));
+    }
+
+    .hypercrm-header-main {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .hypercrm-header-wallet {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .hypercrm-wallet-chip,
+    .hypercrm-wallet-connect {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      border-radius: 999px;
+      font-size: 12px;
+      font-weight: 600;
+      padding: 4px 11px;
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: background 0.2s ease, color 0.2s ease, border 0.2s ease, transform 0.2s ease;
+    }
+
+    .hypercrm-wallet-chip {
+      background: var(--hypercrm-primary-soft, rgba(19, 127, 236, 0.14));
+      color: var(--hypercrm-primary, #137fec);
+    }
+
+    .hypercrm-wallet-chip:hover {
+      transform: translateY(-1px);
+      background: var(--hypercrm-primary-soft-strong, rgba(19, 127, 236, 0.22));
+    }
+
+    .hypercrm-wallet-connect {
+      background: transparent;
+      border-color: var(--hypercrm-border, rgba(15, 23, 42, 0.08));
+      color: var(--hypercrm-text-primary, #111827);
+    }
+
+    .hypercrm-wallet-connect:hover {
+      border-color: var(--hypercrm-primary, #137fec);
+      color: var(--hypercrm-primary, #137fec);
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-wallet-chip {
+      background: rgba(19, 127, 236, 0.28);
+      color: var(--hypercrm-primary-contrast, #ffffff);
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-wallet-connect {
+      border-color: rgba(255, 255, 255, 0.16);
+      color: var(--hypercrm-text-primary-dark, #f8fafc);
+    }
+
+    .hypercrm-header-actions {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .hypercrm-icon-btn {
+      width: 32px;
+      height: 32px;
+      border-radius: 12px;
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--hypercrm-text-secondary, #6b7280);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
+    }
+
+    .hypercrm-icon-btn:hover {
+      background: var(--hypercrm-primary-soft, rgba(19, 127, 236, 0.14));
+      border-color: var(--hypercrm-primary, #137fec);
+      color: var(--hypercrm-primary, #137fec);
+    }
+
+    .hypercrm-icon-btn.disabled {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+
+    .hypercrm-close-btn {
+      width: 32px;
+      height: 32px;
+      border-radius: 12px;
+      border: 1px solid transparent;
+      background: transparent;
+      color: inherit;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      cursor: pointer;
+      transition: background 0.2s ease, border 0.2s ease;
+    }
+
+    .hypercrm-close-btn:hover {
+      background: rgba(148, 163, 184, 0.18);
+      border-color: rgba(148, 163, 184, 0.38);
+    }
+
+    .hypercrm-tabs {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 0 14px;
+      border-bottom: 1px solid var(--hypercrm-border-subtle, rgba(15, 23, 42, 0.06));
+      flex-shrink: 0;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-tabs {
+      border-bottom-color: var(--hypercrm-border-dark, rgba(255, 255, 255, 0.12));
+    }
+
+    .hypercrm-tabs-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .hypercrm-tab {
+      position: relative;
+      padding: 12px 0;
+      background: none;
+      border: none;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--hypercrm-text-secondary, #6b7280);
+      cursor: pointer;
+      transition: color 0.2s ease;
+    }
+
+    .hypercrm-tab::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -1px;
+      width: 100%;
+      height: 2px;
+      border-radius: 999px;
+      background: var(--hypercrm-primary, #137fec);
+      transform: scaleX(0);
+      transform-origin: center;
+      transition: transform 0.25s ease;
+    }
+
+    .hypercrm-tab:hover {
+      color: var(--hypercrm-text-primary, #111827);
+    }
+
+    .hypercrm-tab.active {
+      color: var(--hypercrm-primary, #137fec);
+    }
+
+    .hypercrm-tab.active::after {
+      transform: scaleX(1);
+    }
+
+    .hypercrm-main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      background: var(--hypercrm-canvas, #f5f7fb);
+      padding: 16px;
+      gap: 16px;
+      overflow: hidden;
+      min-height: 0;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-main {
+      background: var(--hypercrm-canvas-dark, #101922);
+    }
+
+    .hypercrm-toast {
+      display: none;
+      padding: 10px 14px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 500;
+      background: rgba(17, 24, 39, 0.08);
+      color: var(--hypercrm-text-primary, #111827);
+    }
+
+    .hypercrm-toast.show {
+      display: block;
+    }
+
+    .hypercrm-toast.success {
+      background: rgba(16, 185, 129, 0.18);
+      color: #047857;
+    }
+
+    .hypercrm-toast.error {
+      background: rgba(239, 68, 68, 0.16);
+      color: #b91c1c;
+    }
+
+    .hypercrm-toast.info {
+      background: rgba(59, 130, 246, 0.16);
+      color: #1d4ed8;
+    }
+
+    .hypercrm-pane {
+      display: none;
+      flex-direction: column;
+      gap: 16px;
+      min-height: 0;
+      flex: 1;
+    }
+
+    .hypercrm-pane.active {
+      display: flex;
+    }
+
+    #hypercrm-ticket-pane,
+    #hypercrm-events-pane {
+      flex: 1;
+      min-height: 0;
+      flex-direction: column;
+    }
+
+    #hypercrm-ticket-pane {
+      overflow: hidden;
+    }
+
+    #hypercrm-events-pane {
+      overflow: hidden;
+    }
+
+    .hypercrm-tabs-close {
+      border: none;
+      background: none;
+      color: var(--hypercrm-text-secondary, #6b7280);
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      padding: 0;
+      display: none;
+    }
+
+    .hypercrm-tabs-close:hover {
+      color: var(--hypercrm-primary, #137fec);
+    }
+
+    .hypercrm-ticket-surface {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    .hypercrm-ticket-card {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      border-radius: var(--hypercrm-radius-lg, 20px);
+      background: var(--hypercrm-surface, #ffffff);
+      border: 1px solid var(--hypercrm-border, rgba(15, 23, 42, 0.08));
+      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+      padding: 16px;
+      gap: 14px;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-ticket-card {
+      background: rgba(27, 43, 58, 0.92);
+      border-color: var(--hypercrm-border-dark, rgba(255, 255, 255, 0.12));
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+    }
+
+    .hypercrm-empty-state {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: 14px;
+      padding: 24px;
+    }
+
+    .hypercrm-empty-icon {
+      width: 64px;
+      height: 64px;
+      border-radius: 18px;
+      background: var(--hypercrm-primary-soft, rgba(19, 127, 236, 0.14));
+      color: var(--hypercrm-primary, #137fec);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+    }
+
+    .hypercrm-empty-icon img {
+      width: 28px;
+      height: 28px;
+    }
+
+    .hypercrm-empty-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--hypercrm-text-primary, #111827);
+    }
+
+    .hypercrm-empty-desc {
+      margin: 0;
+      font-size: 14px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+      max-width: 260px;
+    }
+
+    .hypercrm-empty-warning {
+      margin: 0;
+      font-size: 12px;
+      line-height: 1.4;
+      color: var(--hypercrm-warning, #b45309);
+      max-width: 260px;
+    }
+
+    .hypercrm-primary-btn,
+    .hypercrm-secondary-btn {
+      border-radius: 999px;
+      padding: 10px 20px;
+      font-size: 14px;
+      font-weight: 600;
+      border: none;
+      cursor: pointer;
+      transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
+    }
+
+    .hypercrm-primary-btn {
+      background: var(--hypercrm-primary, #137fec);
+      color: var(--hypercrm-primary-contrast, #ffffff);
+      box-shadow: 0 14px 30px rgba(19, 127, 236, 0.24);
+    }
+
+    .hypercrm-primary-btn:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 18px 36px rgba(19, 127, 236, 0.28);
+    }
+
+    .hypercrm-secondary-btn {
+      background: transparent;
+      border: 1px solid var(--hypercrm-border, rgba(15, 23, 42, 0.08));
+      color: var(--hypercrm-text-primary, #111827);
+    }
+
+    .hypercrm-secondary-btn.hypercrm-with-icon {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .hypercrm-secondary-btn:hover {
+      border-color: var(--hypercrm-primary, #137fec);
+      color: var(--hypercrm-primary, #137fec);
+      background: var(--hypercrm-primary-soft, rgba(19, 127, 236, 0.14));
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-secondary-btn {
+      border-color: rgba(255, 255, 255, 0.16);
+      color: var(--hypercrm-text-primary-dark, #f8fafc);
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-secondary-btn:hover {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.26);
+    }
+
+    .hypercrm-resume-card {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      padding: 18px;
+      border-radius: 16px;
+      background: rgba(19, 127, 236, 0.08);
+      border: 1px solid rgba(19, 127, 236, 0.14);
+    }
+
+    .hypercrm-resume-meta {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+    }
+
+    .hypercrm-resume-title {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--hypercrm-text-primary, #111827);
+    }
+
+    .hypercrm-resume-desc {
+      margin: 0;
+      font-size: 13px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+    }
+
+    .hypercrm-resume-actions {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    .hypercrm-conversation-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 12px;
+    }
+
+    .hypercrm-ticket-heading {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .hypercrm-ticket-number {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--hypercrm-primary, #137fec);
+    }
+
+    .hypercrm-ticket-title {
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--hypercrm-text-primary, #111827);
+      margin: 0;
+    }
+
+    .hypercrm-ticket-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 12px;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      background: rgba(19, 127, 236, 0.14);
+      color: var(--hypercrm-primary, #137fec);
+    }
+
+    .hypercrm-ticket-status.pending {
+      background: rgba(234, 179, 8, 0.18);
+      color: #b45309;
+    }
+
+    .hypercrm-ticket-status.resolved,
+    .hypercrm-ticket-status.closed {
+      background: rgba(148, 163, 184, 0.2);
+      color: #475569;
+    }
+
+    .hypercrm-message-list {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding-right: 6px;
+      min-height: 0;
+    }
+
+    .hypercrm-message-list::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .hypercrm-message-list::-webkit-scrollbar-thumb {
+      background: rgba(148, 163, 184, 0.35);
+      border-radius: 999px;
+    }
+
+    .hypercrm-message-group {
+      display: flex;
+      gap: 10px;
+      align-items: flex-start;
+    }
+
+    .hypercrm-message-group.me {
+      flex-direction: row-reverse;
+    }
+
+    .hypercrm-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: rgba(148, 163, 184, 0.2);
+      color: var(--hypercrm-text-primary, #111827);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-avatar {
+      background: rgba(255, 255, 255, 0.14);
+      color: var(--hypercrm-text-primary-dark, #f8fafc);
+    }
+
+    .hypercrm-avatar.me {
+      background: var(--hypercrm-primary, #137fec);
+      color: var(--hypercrm-primary-contrast, #ffffff);
+    }
+
+    .hypercrm-avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 50%;
+      display: block;
+    }
+
+    .hypercrm-bubble {
+      max-width: 78%;
+      border-radius: 18px;
+      padding: 12px 16px;
+      font-size: 14px;
+      line-height: 1.5;
+      background: rgba(15, 23, 42, 0.08);
+      color: var(--hypercrm-text-primary, #111827);
+      position: relative;
+    }
+
+    .hypercrm-bubble.agent {
+      border-top-left-radius: 6px;
+    }
+
+    .hypercrm-bubble.me {
+      background: var(--hypercrm-primary, #137fec);
+      color: var(--hypercrm-primary-contrast, #ffffff);
+      border-top-right-radius: 6px;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-bubble.agent {
+      background: rgba(255, 255, 255, 0.08);
+      color: var(--hypercrm-text-primary-dark, #f8fafc);
+    }
+
+    .hypercrm-bubble.system {
+      background: rgba(148, 163, 184, 0.24);
+      color: var(--hypercrm-text-primary, #111827);
+      text-align: center;
+      width: auto;
+      margin: 0 auto;
+    }
+
+    .hypercrm-bubble-content {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .hypercrm-bubble-meta {
+      margin-top: 6px;
+      font-size: 11px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+    }
+
+    .hypercrm-message-group.me .hypercrm-bubble-meta {
+      color: rgba(255, 255, 255, 0.8);
+      text-align: right;
+    }
+
+    .hypercrm-bubble-status {
+      margin-top: 6px;
+      font-size: 11px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .hypercrm-message-group.me .hypercrm-bubble-status {
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    .hypercrm-bubble-spinner {
+      width: 12px;
+      height: 12px;
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: hypercrm-spin 0.8s linear infinite;
+    }
+
+    @keyframes hypercrm-spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    .hypercrm-bubble-error {
+      color: #ef4444;
+    }
+
+    .hypercrm-bubble-error-actions {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-left: auto;
+    }
+
+    .hypercrm-bubble-error-btn {
+      border: none;
+      background: none;
+      color: #ef4444;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .hypercrm-bubble-error-btn img {
+      width: 14px;
+      height: 14px;
+      display: block;
+    }
+
+    .hypercrm-bubble-error-btn:hover {
+      color: #dc2626;
+    }
+
+    .hypercrm-conversation-shell {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      min-height: 0;
+    }
+
+    .hypercrm-conversation-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      font-size: 12px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+    }
+
+    .hypercrm-ticket-title-block {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .hypercrm-ticket-title-text {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--hypercrm-text-primary, #111827);
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-ticket-title-text {
+      color: var(--hypercrm-text-primary-dark, #f8fafc);
+    }
+
+    .hypercrm-ticket-meta-line {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      font-size: 12px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-ticket-meta-line {
+      color: var(--hypercrm-text-secondary-dark, rgba(226, 232, 240, 0.7));
+    }
+
+    .hypercrm-inline-btn {
+      border: none;
+      background: none;
+      color: var(--hypercrm-primary, #137fec);
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      padding: 0;
+    }
+
+    .hypercrm-inline-btn:hover {
+      text-decoration: underline;
+    }
+
+    .hypercrm-closed-banner {
+      margin-top: 4px;
+      padding: 14px;
+      border-radius: 16px;
+      background: rgba(148, 163, 184, 0.12);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      text-align: left;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-closed-banner {
+      background: rgba(148, 163, 184, 0.18);
+    }
+
+    .hypercrm-closed-banner h4 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--hypercrm-text-primary, #111827);
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-closed-banner h4 {
+      color: var(--hypercrm-text-primary-dark, #f8fafc);
+    }
+
+    .hypercrm-closed-banner p {
+      margin: 0;
+      font-size: 13px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-closed-banner p {
+      color: var(--hypercrm-text-secondary-dark, rgba(226, 232, 240, 0.7));
+    }
+
+    .hypercrm-loading-state {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      font-size: 13px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+    }
+
+    .hypercrm-attachment-chip {
+      margin-top: 10px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 12px;
+      background: rgba(19, 127, 236, 0.12);
+      color: var(--hypercrm-primary, #137fec);
+      font-size: 12px;
+    }
+
+    .hypercrm-attachment-chip img[data-hypercrm-img],
+    .hypercrm-attachment-thumb {
+      max-width: 160px;
+      border-radius: 12px;
+      cursor: pointer;
+      border: 1px solid rgba(148, 163, 184, 0.28);
+      display: block;
+    }
+
+    .hypercrm-attachment-chip .hypercrm-icon-img {
+      width: 14px;
+      height: 14px;
+    }
+
+    .hypercrm-composer {
+      padding: 12px 16px 16px;
+      border-top: 1px solid var(--hypercrm-border-subtle, rgba(15, 23, 42, 0.06));
+      background: var(--hypercrm-surface, #ffffff);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-composer {
+      background: rgba(18, 30, 42, 0.92);
+      border-top-color: var(--hypercrm-border-dark, rgba(255, 255, 255, 0.12));
+    }
+
+    .hypercrm-composer.disabled .hypercrm-compose-inner {
+      opacity: 0.6;
+    }
+
+    .hypercrm-compose-inner {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      border: 1px solid var(--hypercrm-border, rgba(15, 23, 42, 0.08));
+      border-radius: 16px;
+      background: var(--hypercrm-surface-muted, #f9fbff);
+      padding: 10px 12px;
+      transition: border 0.2s ease, background 0.2s ease;
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-compose-inner {
+      background: rgba(27, 43, 58, 0.8);
+      border-color: rgba(255, 255, 255, 0.12);
+    }
+
+    .hypercrm-compose-inner.focused {
+      border-color: var(--hypercrm-primary, #137fec);
+      box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.12);
+    }
+
+    .hypercrm-composer-textarea {
+      flex: 1;
+      min-height: 52px;
+      max-height: 140px;
+      resize: none;
+      border: none;
+      background: transparent;
+      color: inherit;
+      font-family: inherit;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .hypercrm-composer-textarea:focus {
+      outline: none;
+    }
+
+    .hypercrm-composer-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .hypercrm-circle-btn {
+      width: 32px;
+      height: 32px;
+      border-radius: 12px;
+      border: 1px solid transparent;
+      background: transparent;
+      color: var(--hypercrm-text-secondary, #6b7280);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
+    }
+
+    .hypercrm-circle-btn:hover {
+      background: var(--hypercrm-primary-soft, rgba(19, 127, 236, 0.14));
+      border-color: var(--hypercrm-primary, #137fec);
+      color: var(--hypercrm-primary, #137fec);
+    }
+
+    .hypercrm-primary-pill {
+      border-radius: 50%;
+      width: 36px;
+      height: 36px;
+      border: none;
+      cursor: pointer;
+      background: var(--hypercrm-primary, #137fec);
+      color: var(--hypercrm-primary-contrast, #ffffff);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+    }
+
+    .hypercrm-primary-pill:hover:not(:disabled) {
+      transform: translateY(-1px);
+      box-shadow: 0 16px 32px rgba(19, 127, 236, 0.24);
+    }
+
+    .hypercrm-primary-pill:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+
+    .hypercrm-attachment-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .hypercrm-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      border-radius: 12px;
+      background: rgba(19, 127, 236, 0.08);
+      color: var(--hypercrm-primary, #137fec);
+      font-size: 12px;
+    }
+
+    .hypercrm-chip img {
+      width: 14px;
+      height: 14px;
+      display: block;
+    }
+
+    .hypercrm-chip button {
+      border: none;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 1;
+      opacity: 0.7;
+    }
+
+    .hypercrm-chip button img {
+      width: 12px;
+      height: 12px;
+    }
+
+    .hypercrm-chip button:hover {
+      opacity: 1;
+    }
+
+    .hypercrm-composer-note {
+      font-size: 12px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+    }
+
+    .hypercrm-powered {
+      text-align: center;
+      font-size: 11px;
+      color: var(--hypercrm-text-tertiary, rgba(17, 24, 39, 0.5));
+      text-transform: none;
+      letter-spacing: 0;
+    }
+
+    .hypercrm-events-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+    }
+
+    .hypercrm-event-card {
+      border-radius: 18px;
+      border: 1px solid var(--hypercrm-border, rgba(15, 23, 42, 0.08));
+      overflow: hidden;
+      background: var(--hypercrm-surface, #ffffff);
+      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+      cursor: pointer;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .hypercrm-event-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
+    }
+
+    .hypercrm-widget-container.hypercrm-dark .hypercrm-event-card {
+      background: rgba(27, 43, 58, 0.92);
+      border-color: var(--hypercrm-border-dark, rgba(255, 255, 255, 0.12));
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+    }
+
+    .hypercrm-event-banner {
+      position: relative;
+      padding-top: 56%;
+      overflow: hidden;
+    }
+
+    .hypercrm-event-banner img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .hypercrm-event-badge {
+      position: absolute;
+      top: 14px;
+      left: 14px;
+      padding: 6px 12px;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 600;
+      color: #ffffff;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .hypercrm-event-badge.ongoing { background: #10b981; }
+    .hypercrm-event-badge.upcoming { background: #2563eb; }
+    .hypercrm-event-badge.ended { background: rgba(15, 23, 42, 0.65); }
+
+    .hypercrm-event-content {
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .hypercrm-event-title {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--hypercrm-text-primary, #111827);
+    }
+
+    .hypercrm-event-meta {
+      font-size: 12px;
+      color: var(--hypercrm-text-secondary, #6b7280);
+    }
+
+    .hypercrm-event-text {
+      font-size: 13px;
+      color: var(--hypercrm-text-primary, #111827);
+      margin: 0;
+    }
+
+    .hypercrm-event-actions {
+      margin-top: 10px;
+      display: inline-flex;
+    }
+
+    .hypercrm-event-detail {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+    }
+
+    .hypercrm-lightbox {
+      position: fixed;
+      inset: 0;
+      background: rgba(15, 23, 42, 0.78);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483600;
+      backdrop-filter: blur(6px);
+    }
+
+    .hypercrm-lightbox.open {
+      display: flex;
+    }
+
+    .hypercrm-lightbox img {
+      max-width: 90vw;
+      max-height: 90vh;
+      border-radius: 18px;
+      box-shadow: 0 24px 80px rgba(15, 23, 42, 0.38);
+    }
+
+    @media (max-width: 640px) {
+      .hypercrm-widget-container {
+        bottom: 16px;
+        right: 16px;
+      }
+
+      .hypercrm-widget-container.hypercrm-position-left {
+        left: 16px;
+        right: auto;
+      }
+
+      .hypercrm-toggle-btn {
+        width: 56px;
+        height: 56px;
+      }
+
+      .hypercrm-widget-panel {
+        width: min(456px, calc(100vw - 20px));
+        bottom: 76px;
+      }
+
+      .hypercrm-widget-container.hypercrm-position-left .hypercrm-widget-panel {
+        left: 0;
+        right: auto;
+      }
+
+      .hypercrm-main {
+        padding: 14px;
+      }
+
+      .hypercrm-composer {
+        padding: 14px;
+      }
+    }
+  `;
+
+  class HyperCRMWidget {
+    constructor(options) {
+      this.options = options || {};
+      this.theme = { ...DEFAULT_THEME, ...(this.options.theme || {}) };
+      this.colorModePreference = this.options.colorMode || 'light';
+      this.position = this.normalizePosition(this.options.position);
+      this.mediaColorQuery = null;
+      this.systemColorListener = null;
+      this.systemColorListenerAttached = false;
+      this.isOpen = false;
+
+      this.apiUrl = this.options.apiUrl || WIDGET_API_URL;
+      this.apiKey = this.options.apiKey || WIDGET_API_KEY;
+      this.apiOrigin = this.resolveApiOrigin(this.apiUrl);
+
+      this.iconUrls = {
+        chat: this.absUrl('/widget/assets/icon-chat.svg'),
+        close: this.absUrl('/widget/assets/icon-close.svg'),
+        attach: this.absUrl('/widget/assets/icon-attach.svg'),
+        send: this.absUrl('/widget/assets/icon-send.svg'),
+        file: this.absUrl('/widget/assets/icon-file.svg'),
+        retry: this.absUrl('/widget/assets/icon-retry.svg'),
+        lock: this.absUrl('/widget/assets/icon-lock.svg'),
+        announcement: this.absUrl('/widget/assets/icon-announcement.svg'),
+        back: this.absUrl('/widget/assets/icon-back.svg'),
+        telegram: this.absUrl('/widget/assets/telegram-logo.svg'),
+        discord: this.absUrl('/widget/assets/discord-logo.png'),
+      };
+
+      this.walletAddress = null;
+      this.tickets = [];
+      this.currentTicket = null;
+      this.showTicketOverview = false;
+      this.events = [];
+      this.orgInfo = null;
+      this.orgIconUrl = null;
+
+      this.socket = null;
+      this.socketConnected = false;
+      this.socketRetryTimer = null;
+      this.refreshInterval = null;
+
+      this.state = {
+        composerMode: 'disabled',
+        composerLoading: false,
+      };
+
+      this.composerFiles = [];
+      this.container = null;
+      this.elements = {};
+      this.pendingTicketId = null;
+      this.optimisticMessages = new Map();
+
+      this.handlePasteBound = (event) => this.handlePaste(event);
+      this.handleSystemColorScheme = (event) => {
+        if (this.colorModePreference === 'auto') {
+          this.applyColorMode(event.matches ? 'dark' : 'light');
+        }
+      };
+
+      this.init();
+    }
+
+    resolveApiOrigin(url) {
+      try {
+        const parsed = new URL(url);
+        return `${parsed.protocol}//${parsed.host}`;
+      } catch (_) {
+        return global.location ? global.location.origin : '';
+      }
+    }
+
+    normalizePosition(value) {
+      return value === 'left' ? 'left' : 'right';
+    }
+
+    applyPosition() {
+      if (!this.container) return;
+      const position = this.normalizePosition(this.position || this.options.position);
+      this.position = position;
+      this.options.position = position;
+      this.container.classList.toggle('hypercrm-position-left', position === 'left');
+    }
+
+    setPosition(position) {
+      this.position = this.normalizePosition(position);
+      this.applyPosition();
+    }
+
+    absUrl(url) {
+      if (!url) return url;
+      if (/^https?:/i.test(url)) return url;
+      if (url.startsWith('/')) return `${this.apiOrigin}${url}`;
+      return `${this.apiOrigin}/${url}`;
+    }
+
+    async init() {
+      this.injectStyles();
+      this.createWidget();
+      this.cacheElements();
+      this.applyTheme();
+      this.ensureSystemColorListener();
+      this.applyColorMode();
+      this.attachEventListeners();
+      await this.loadOrgInfo();
+      await this.checkWalletConnection();
+      this.renderTicketState();
+      if (this.options.autoOpen) {
+        this.openWidget();
+      }
+    }
+
+    injectStyles() {
+      const styleSheet = document.createElement('style');
+      styleSheet.textContent = styles;
+      document.head.appendChild(styleSheet);
+    }
+
+    applyTheme(themeOverride) {
+      if (themeOverride && typeof themeOverride === 'object') {
+        this.options.theme = { ...(this.options.theme || {}), ...themeOverride };
+      }
+      this.theme = { ...DEFAULT_THEME, ...(this.options.theme || {}) };
+      if (!this.container) return;
+      const target = this.container;
+      Object.entries(this.theme).forEach(([key, value]) => {
+        const cssName = `--hypercrm-${camelToKebab(key)}`;
+        target.style.setProperty(cssName, value);
+      });
+      const primary = this.theme.primary || DEFAULT_THEME.primary;
+      target.style.setProperty('--hypercrm-primary', primary);
+      target.style.setProperty('--hypercrm-primary-contrast', this.theme.primaryContrast || DEFAULT_THEME.primaryContrast);
+      target.style.setProperty('--hypercrm-primary-soft', hexToRgba(primary, 0.14));
+      target.style.setProperty('--hypercrm-primary-soft-strong', hexToRgba(primary, 0.24));
+      target.style.setProperty('--hypercrm-canvas', this.theme.canvasLight || DEFAULT_THEME.canvasLight);
+      target.style.setProperty('--hypercrm-canvas-dark', this.theme.canvasDark || DEFAULT_THEME.canvasDark);
+      target.style.setProperty('--hypercrm-surface', this.theme.surfaceLight || DEFAULT_THEME.surfaceLight);
+      target.style.setProperty('--hypercrm-surface-dark', this.theme.surfaceDark || DEFAULT_THEME.surfaceDark);
+      target.style.setProperty('--hypercrm-text-primary', this.theme.textPrimaryLight || DEFAULT_THEME.textPrimaryLight);
+      target.style.setProperty('--hypercrm-text-secondary', this.theme.textSecondaryLight || DEFAULT_THEME.textSecondaryLight);
+      target.style.setProperty('--hypercrm-text-primary-dark', this.theme.textPrimaryDark || DEFAULT_THEME.textPrimaryDark);
+      target.style.setProperty('--hypercrm-text-secondary-dark', this.theme.textSecondaryDark || DEFAULT_THEME.textSecondaryDark);
+      target.style.setProperty('--hypercrm-border', this.theme.borderLight || DEFAULT_THEME.borderLight);
+      target.style.setProperty('--hypercrm-border-dark', this.theme.borderDark || DEFAULT_THEME.borderDark);
+      target.style.setProperty('--hypercrm-status-online', this.theme.statusOnline || DEFAULT_THEME.statusOnline);
+      target.style.setProperty('--hypercrm-status-online-bg', this.theme.statusOnlineBg || DEFAULT_THEME.statusOnlineBg);
+      target.style.setProperty('--hypercrm-status-offline', this.theme.statusOffline || DEFAULT_THEME.statusOffline);
+      target.style.setProperty('--hypercrm-status-offline-bg', this.theme.statusOfflineBg || DEFAULT_THEME.statusOfflineBg);
+      target.style.setProperty('--hypercrm-shadow-panel', this.theme.shadowPanel || DEFAULT_THEME.shadowPanel);
+      target.style.setProperty('--hypercrm-shadow-panel-dark', this.theme.shadowPanelDark || DEFAULT_THEME.shadowPanelDark);
+    }
+
+    ensureSystemColorListener() {
+      if (typeof window === 'undefined') return;
+      if (this.colorModePreference !== 'auto') {
+        this.removeSystemColorListener();
+        return;
+      }
+      if (!window.matchMedia) return;
+      if (!this.mediaColorQuery) {
+        this.mediaColorQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      }
+      if (!this.systemColorListenerAttached && this.mediaColorQuery) {
+        const mq = this.mediaColorQuery;
+        if (mq.addEventListener) {
+          mq.addEventListener('change', this.handleSystemColorScheme);
+        } else if (mq.addListener) {
+          mq.addListener(this.handleSystemColorScheme);
+        }
+        this.systemColorListenerAttached = true;
+      }
+    }
+
+    removeSystemColorListener() {
+      if (!this.mediaColorQuery || !this.systemColorListenerAttached) return;
+      const mq = this.mediaColorQuery;
+      if (mq.removeEventListener) {
+        mq.removeEventListener('change', this.handleSystemColorScheme);
+      } else if (mq.removeListener) {
+        mq.removeListener(this.handleSystemColorScheme);
+      }
+      this.systemColorListenerAttached = false;
+    }
+
+    getSystemColorMode() {
+      if (typeof window === 'undefined' || !window.matchMedia) return 'light';
+      if (!this.mediaColorQuery) {
+        this.mediaColorQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      }
+      return this.mediaColorQuery && this.mediaColorQuery.matches ? 'dark' : 'light';
+    }
+
+    applyColorMode(modeOverride) {
+      if (modeOverride) {
+        this.colorModePreference = modeOverride;
+      }
+      const mode = this.colorModePreference === 'auto' ? this.getSystemColorMode() : this.colorModePreference;
+      if (!this.container) return mode;
+      if (mode === 'dark') {
+        this.container.classList.add('hypercrm-dark');
+        this.container.style.setProperty('color-scheme', 'dark');
+      } else {
+        this.container.classList.remove('hypercrm-dark');
+        this.container.style.setProperty('color-scheme', 'light');
+      }
+      return mode;
+    }
+
+    setTheme(theme) {
+      this.applyTheme(theme || {});
+      this.applyColorMode();
+    }
+
+    setColorMode(mode) {
+      if (!mode) return;
+      this.colorModePreference = mode;
+      if (mode === 'auto') {
+        this.ensureSystemColorListener();
+      } else {
+        this.removeSystemColorListener();
+      }
+      this.applyColorMode();
+    }
+
+    createWidget() {
+      const iconUrls = this.iconUrls || {};
+      const discordIconUrl = iconUrls.discord || this.absUrl('/widget/assets/discord-logo.png');
+      const telegramIconUrl = iconUrls.telegram || this.absUrl('/widget/assets/telegram-logo.svg');
+      const chatIcon = this.renderIcon(iconUrls.chat, '', 'hypercrm-icon-img large');
+      const closeIcon = this.renderIcon(iconUrls.close, '', 'hypercrm-icon-img');
+      const attachIcon = this.renderIcon(iconUrls.attach, '', 'hypercrm-icon-img');
+      const sendIcon = this.renderIcon(iconUrls.send, '', 'hypercrm-icon-img');
+      const telegramIcon = this.renderIcon(telegramIconUrl, 'Telegram', 'hypercrm-icon-img');
+      const discordIcon = this.renderIcon(discordIconUrl, 'Discord', 'hypercrm-icon-img');
+      const container = document.createElement('div');
+      container.className = 'hypercrm-widget-container';
+      container.innerHTML = `
+        <button class="hypercrm-toggle-btn" id="hypercrm-toggle" aria-label="Open support widget"><span id="hypercrm-toggle-inner">${chatIcon}</span></button>
+        <div class="hypercrm-widget-panel" id="hypercrm-panel">
+          <div class="hypercrm-panel-inner">
+            <header class="hypercrm-header">
+              <div class="hypercrm-header-main">
+                <div id="hypercrm-wallet-slot" class="hypercrm-header-wallet"></div>
+              </div>
+              <div class="hypercrm-header-actions">
+                <a id="hypercrm-tg-link" class="hypercrm-icon-btn disabled" title="Telegram" target="_blank" rel="noopener">
+                  ${telegramIcon}
+                </a>
+                <a id="hypercrm-dc-link" class="hypercrm-icon-btn disabled" title="Discord" target="_blank" rel="noopener">
+                  ${discordIcon}
+                </a>
+                <button class="hypercrm-close-btn" id="hypercrm-close" aria-label="Close widget">${closeIcon}</button>
+              </div>
+            </header>
+            <nav class="hypercrm-tabs">
+              <div class="hypercrm-tabs-left">
+                <button class="hypercrm-tab active" data-tab="ticket">Ticket</button>
+                <button class="hypercrm-tab" data-tab="events">Announcements</button>
+              </div>
+              <button type="button" class="hypercrm-tabs-close" id="hypercrm-close-inline">Close ticket</button>
+            </nav>
+            <div class="hypercrm-main">
+              <div id="hypercrm-toast" class="hypercrm-toast" role="status"></div>
+              <section id="hypercrm-ticket-pane" class="hypercrm-pane active">
+                <div class="hypercrm-ticket-surface">
+                  <div id="hypercrm-ticket-content" class="hypercrm-ticket-card"></div>
+                </div>
+              </section>
+              <section id="hypercrm-events-pane" class="hypercrm-pane">
+                <div id="hypercrm-events-list" class="hypercrm-events-grid"></div>
+                <div id="hypercrm-event-detail" class="hypercrm-event-detail" style="display:none;"></div>
+              </section>
+            </div>
+            <div class="hypercrm-composer" id="hypercrm-composer">
+              <div class="hypercrm-compose-inner" id="hypercrm-composer-dropzone">
+                <textarea id="hypercrm-composer-input" class="hypercrm-composer-textarea" placeholder="Type your message..." rows="1"></textarea>
+                <div class="hypercrm-composer-toolbar">
+                  <input type="file" id="hypercrm-composer-file-input" class="hypercrm-hidden" multiple accept="image/*,.pdf,.doc,.docx" style="display:none;" />
+                  <button type="button" id="hypercrm-attach-btn" class="hypercrm-circle-btn" aria-label="Attach files">${attachIcon}</button>
+                  <button type="button" id="hypercrm-composer-send" class="hypercrm-primary-pill" aria-label="Send message">${sendIcon}</button>
+                </div>
+              </div>
+              <div id="hypercrm-attachment-chips" class="hypercrm-attachment-chips"></div>
+              <div id="hypercrm-composer-note" class="hypercrm-composer-note"></div>
+              <div class="hypercrm-powered">Powered by HyperCRM</div>
+            </div>
+          </div>
+        </div>
+      `;
+
+      document.body.appendChild(container);
+      this.container = container;
+      this.applyPosition();
+
+      // Lightbox overlay
+      const lightbox = document.createElement('div');
+      lightbox.id = 'hypercrm-lightbox';
+      lightbox.className = 'hypercrm-lightbox';
+      lightbox.innerHTML = '<img id="hypercrm-lightbox-img" alt="Preview" />';
+      lightbox.addEventListener('click', () => this.closeLightbox());
+      document.body.appendChild(lightbox);
+    }
+
+    cacheElements() {
+      const qs = (selector) => this.container ? this.container.querySelector(selector) : null;
+      this.elements = {
+        toggle: qs('#hypercrm-toggle'),
+        toggleInner: qs('#hypercrm-toggle-inner'),
+        panel: qs('#hypercrm-panel'),
+        tabs: this.container ? Array.from(this.container.querySelectorAll('.hypercrm-tab')) : [],
+        ticketPane: qs('#hypercrm-ticket-pane'),
+        ticketContent: qs('#hypercrm-ticket-content'),
+        eventsPane: qs('#hypercrm-events-pane'),
+        eventsList: qs('#hypercrm-events-list'),
+        eventDetail: qs('#hypercrm-event-detail'),
+        toast: qs('#hypercrm-toast'),
+        walletSlot: qs('#hypercrm-wallet-slot'),
+        telegramBtn: qs('#hypercrm-tg-link'),
+        discordBtn: qs('#hypercrm-dc-link'),
+        closeBtn: qs('#hypercrm-close'),
+        closeInline: qs('#hypercrm-close-inline'),
+        composer: qs('#hypercrm-composer'),
+        composerInner: qs('#hypercrm-composer-dropzone'),
+        composerInput: qs('#hypercrm-composer-input'),
+        composerSend: qs('#hypercrm-composer-send'),
+        composerAttach: qs('#hypercrm-attach-btn'),
+        composerFileInput: qs('#hypercrm-composer-file-input'),
+        composerChips: qs('#hypercrm-attachment-chips'),
+        composerNote: qs('#hypercrm-composer-note'),
+      };
+    }
+
+    attachEventListeners() {
+      const { toggle, panel, closeBtn, closeInline, tabs, composerInput, composerInner, composerSend, composerAttach, composerFileInput } = this.elements;
+
+      if (toggle) toggle.addEventListener('click', () => this.toggleWidget());
+      if (closeBtn) closeBtn.addEventListener('click', () => this.closeWidget());
+      if (panel) panel.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') this.closeWidget();
+      });
+
+      tabs.forEach((tab) => {
+        tab.addEventListener('click', () => {
+          const target = tab.getAttribute('data-tab');
+          if (!target) return;
+          this.showTab(target);
+        });
+      });
+
+      if (closeInline) {
+        closeInline.addEventListener('click', (event) => {
+          event.preventDefault();
+          this.closeTicketFromWidget();
+        });
+      }
+
+      if (composerInput) {
+        composerInput.addEventListener('focus', () => composerInner && composerInner.classList.add('focused'));
+        composerInput.addEventListener('blur', () => composerInner && composerInner.classList.remove('focused'));
+        composerInput.addEventListener('keydown', (event) => {
+          if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.handleComposerSend();
+          }
+        });
+      }
+
+      if (composerSend) composerSend.addEventListener('click', () => this.handleComposerSend());
+      if (composerAttach) composerAttach.addEventListener('click', () => composerFileInput && composerFileInput.click());
+      if (composerFileInput) composerFileInput.addEventListener('change', (event) => this.handleFileSelect(event));
+
+      if (composerInner) {
+        ['dragenter', 'dragover'].forEach((type) => {
+          composerInner.addEventListener(type, (event) => {
+            event.preventDefault();
+            composerInner.classList.add('focused');
+          });
+        });
+        ['dragleave', 'dragend'].forEach((type) => {
+          composerInner.addEventListener(type, () => composerInner.classList.remove('focused'));
+        });
+        composerInner.addEventListener('drop', (event) => {
+          event.preventDefault();
+          composerInner.classList.remove('focused');
+          const files = Array.from(event.dataTransfer?.files || []);
+          if (files.length) this.addComposerFiles(files);
+        });
+      }
+
+      document.addEventListener('paste', this.handlePasteBound);
+
+      if (typeof window !== 'undefined' && window.ethereum) {
+        try {
+          window.ethereum.on('accountsChanged', (accounts) => {
+            if (accounts.length > 0) {
+              this.walletAddress = accounts[0];
+              this.updateWalletUI();
+              this.loadMyTickets();
+            } else {
+              this.disconnectWallet();
+            }
+          });
+        } catch (_) {}
+      }
+    }
+
+    setComposerMode(mode, options = {}) {
+      this.state.composerMode = mode;
+      const { composer, composerInput, composerSend, composerNote } = this.elements;
+      if (!composer || !composerInput || !composerSend) return;
+
+      const defaults = {
+        placeholder: 'Type your message...',
+        note: '',
+        sendLabel: this.getSendIcon(),
+        disabled: false,
+      };
+      const config = { ...defaults, ...options };
+
+      composer.classList.toggle('disabled', Boolean(config.disabled));
+      composerInput.disabled = Boolean(config.disabled);
+      composerSend.disabled = Boolean(config.disabled);
+      composerInput.placeholder = config.placeholder;
+      composerSend.innerHTML = config.sendLabel;
+      if (composerNote) {
+        composerNote.textContent = config.note || '';
+        composerNote.style.display = config.note ? 'block' : 'none';
+      }
+
+      if (mode === 'new') {
+        composerInput.value = '';
+      }
+
+      if (mode === 'disabled' || mode === 'closed') {
+        this.clearComposer();
+      }
+    }
+
+    setComposerLoading(isLoading) {
+      this.state.composerLoading = isLoading;
+      const { composerSend } = this.elements;
+      if (composerSend) {
+        composerSend.disabled = isLoading || this.state.composerMode === 'disabled' || this.state.composerMode === 'closed';
+        if (isLoading) {
+          composerSend.textContent = '…';
+        } else {
+          composerSend.innerHTML = this.getSendIcon();
+        }
+      }
+    }
+
+    clearComposer() {
+      const { composerInput, composerFileInput } = this.elements;
+      if (composerInput) composerInput.value = '';
+      if (composerFileInput) composerFileInput.value = '';
+      this.composerFiles = [];
+      this.renderComposerAttachments();
+    }
+
+    addComposerFiles(files) {
+      if (!Array.isArray(files)) files = Array.from(files || []);
+      if (files.length === 0) return;
+      const maxFiles = 5;
+      const maxSize = 5 * 1024 * 1024; // 5MB
+      const accepted = [];
+      for (const file of files) {
+        if (this.composerFiles.length + accepted.length >= maxFiles) {
+          this.showMessage(`Up to ${maxFiles} files allowed`, 'error');
+          break;
+        }
+        if (file.size > maxSize) {
+          this.showMessage(`File ${file.name} exceeds 5MB.`, 'error');
+          continue;
+        }
+        accepted.push(file);
+      }
+      if (accepted.length) {
+        this.composerFiles = [...this.composerFiles, ...accepted];
+        this.renderComposerAttachments();
+      }
+    }
+
+    removeComposerFile(index) {
+      if (index < 0 || index >= this.composerFiles.length) return;
+      this.composerFiles.splice(index, 1);
+      this.renderComposerAttachments();
+    }
+
+    renderComposerAttachments() {
+      const { composerChips } = this.elements;
+      if (!composerChips) return;
+      if (!this.composerFiles.length) {
+        composerChips.innerHTML = '';
+        return;
+      }
+      composerChips.innerHTML = this.composerFiles.map((file, index) => `
+        <div class="hypercrm-chip">
+          ${this.renderIcon(this.iconUrls?.file, '', 'hypercrm-icon-img small')}
+          <span>${this.escapeHtml(file.name)}</span>
+          <button type="button" data-index="${index}" aria-label="Remove">${this.renderIcon(this.iconUrls?.close, '', 'hypercrm-icon-img tiny')}</button>
+        </div>
+      `).join('');
+      composerChips.querySelectorAll('button[data-index]').forEach((btn) => {
+        btn.addEventListener('click', (event) => {
+          event.preventDefault();
+          const idx = parseInt(btn.getAttribute('data-index'), 10);
+          this.removeComposerFile(idx);
+        });
+      });
+    }
+
+    handleFileSelect(event) {
+      const files = Array.from(event.target?.files || []);
+      if (files.length) this.addComposerFiles(files);
+    }
+
+    handlePaste(event) {
+      if (!event || !event.clipboardData) return;
+      const items = event.clipboardData.items || [];
+      const files = [];
+      for (const item of items) {
+        if (item.kind === 'file') {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+      }
+      if (files.length) {
+        event.preventDefault();
+        this.addComposerFiles(files);
+      }
+    }
+    async handleComposerSend() {
+      const mode = this.state.composerMode;
+      if (mode === 'disabled' || mode === 'closed' || !this.elements.composerInput) return;
+      const message = this.elements.composerInput.value.trim();
+      const attachments = [...this.composerFiles];
+      if (!message && attachments.length === 0) return;
+
+      const optimisticId = `tmp-${Date.now()}`;
+      if (mode === 'new') {
+        if (!this.walletAddress) {
+          this.showMessage('Connect your wallet to create a ticket.', 'error');
+          return;
+        }
+        const payload = { message, attachments };
+        this.prepareConversationForNewTicket();
+        this.addOptimisticBubble({ id: optimisticId, mode: 'new', payload });
+        this.setComposerMode('disabled', { note: 'Creating ticket…', disabled: true, sendLabel: this.getSendIcon() });
+        this.clearComposer();
+        this.sendNewTicket(optimisticId, payload);
+      } else if (mode === 'reply') {
+        if (!this.currentTicket || !this.currentTicket.id) {
+          this.showMessage('No active ticket selected.', 'error');
+          return;
+        }
+        const payload = { message, attachments, ticketId: this.currentTicket.id };
+        this.addOptimisticBubble({ id: optimisticId, mode: 'reply', payload });
+        this.clearComposer();
+        this.sendReply(optimisticId, payload);
+      }
+    }
+
+    prepareConversationForNewTicket() {
+      if (this.currentTicket && this.currentTicket.id) return;
+      this.currentTicket = { id: null, status: 'open', Messages: [] };
+      this.showTicketOverview = false;
+      this.renderTicketDetail(this.currentTicket);
+    }
+
+    async sendNewTicket(optimisticId, payload) {
+      try {
+        const data = await this.createTicketRequest(payload);
+        this.resolveOptimisticBubble(optimisticId);
+        await this.loadMyTickets();
+        if (data?.ticket?.id) {
+          await this.showTicketDetail(data.ticket.id);
+          this.showMessage(`Ticket created! (#${data.ticket.ticketNumber || ''})`, 'success');
+        } else {
+          this.renderTicketState();
+        }
+      } catch (error) {
+        console.error('Failed to create ticket:', error);
+        this.markOptimisticBubbleFailed(optimisticId, () => this.sendNewTicket(optimisticId, payload), error.message || 'Failed to create ticket.');
+        this.showMessage(error.message || 'Failed to create ticket.', 'error');
+      }
+    }
+
+    async sendReply(optimisticId, payload) {
+      try {
+        await this.submitReplyRequest(payload);
+        this.resolveOptimisticBubble(optimisticId);
+        await this.refreshTicketDetail();
+      } catch (error) {
+        console.error('Failed to send reply:', error);
+        this.markOptimisticBubbleFailed(optimisticId, () => this.sendReply(optimisticId, payload), error.message || 'Failed to send reply.');
+        this.showMessage(error.message || 'Failed to send reply.', 'error');
+      }
+    }
+
+    async createTicketRequest({ message, attachments }) {
+      const formData = new FormData();
+      formData.append('message', message);
+      formData.append('source', 'widget');
+      const subject = message ? message.slice(0, 60) : 'New ticket via widget';
+      formData.append('subject', subject);
+      formData.append('customerWalletAddress', this.walletAddress);
+      formData.append('customerName', `User ${this.shortenAddress(this.walletAddress)}`);
+      attachments.forEach((file) => formData.append('attachments', file));
+
+      const response = await fetch(`${this.apiUrl}/tickets`, {
+        method: 'POST',
+        headers: { 'X-API-Key': this.apiKey },
+        body: formData,
+      });
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        const error = new Error(data?.error || 'Failed to create ticket.');
+        throw error;
+      }
+      return data;
+    }
+
+    async submitReplyRequest({ message, attachments, ticketId }) {
+      let response;
+      if (attachments && attachments.length > 0) {
+        const form = new FormData();
+        if (message) form.append('content', message);
+        attachments.forEach((file) => form.append('attachments', file));
+        response = await fetch(`${this.apiUrl}/tickets/public/${ticketId}/messages`, {
+          method: 'POST',
+          headers: { 'X-API-Key': this.apiKey },
+          body: form,
+        });
+      } else {
+        response = await fetch(`${this.apiUrl}/tickets/public/${ticketId}/messages`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-API-Key': this.apiKey,
+          },
+          body: JSON.stringify({ content: message }),
+        });
+      }
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        const error = new Error(data?.error || 'Failed to send reply.');
+        throw error;
+      }
+      return data;
+    }
+
+    addOptimisticBubble({ id, mode, payload }) {
+      const list = document.getElementById('hypercrm-message-list');
+      if (!list) return;
+      const group = document.createElement('div');
+      group.className = 'hypercrm-message-group me hypercrm-optimistic';
+      group.dataset.optimisticId = id;
+
+      const avatarHtml = '<div class="hypercrm-avatar me">Me</div>';
+      const bubble = document.createElement('div');
+      bubble.className = 'hypercrm-bubble me';
+
+      const contentEl = document.createElement('div');
+      contentEl.className = 'hypercrm-bubble-content';
+      contentEl.textContent = payload.message || (payload.attachments && payload.attachments.length ? '[Attachment]' : '');
+      bubble.appendChild(contentEl);
+
+      const previewUrls = [];
+      if (payload.attachments && payload.attachments.length) {
+        payload.attachments.forEach((file) => {
+          const item = document.createElement('div');
+          item.className = 'hypercrm-attachment-chip';
+          if (file.type && file.type.startsWith('image/')) {
+            const url = URL.createObjectURL(file);
+            previewUrls.push(url);
+            const img = document.createElement('img');
+            img.src = url;
+            img.alt = file.name;
+            item.appendChild(img);
+          } else {
+            item.textContent = file.name || 'Attachment';
+          }
+          bubble.appendChild(item);
+        });
+      }
+
+      const status = document.createElement('div');
+      status.className = 'hypercrm-bubble-status';
+      status.innerHTML = `<span class="hypercrm-bubble-spinner"></span>Sending…`;
+      bubble.appendChild(status);
+
+      group.innerHTML = `${avatarHtml}`;
+      group.appendChild(bubble);
+      list.appendChild(group);
+      list.scrollTop = list.scrollHeight;
+
+      this.optimisticMessages.set(id, {
+        mode,
+        payload,
+        group,
+        status,
+        previewUrls,
+      });
+    }
+
+    resolveOptimisticBubble(id) {
+      const entry = this.optimisticMessages.get(id);
+      if (!entry) return;
+      try { entry.previewUrls?.forEach((url) => URL.revokeObjectURL(url)); } catch (_) {}
+      entry.group?.remove();
+      this.optimisticMessages.delete(id);
+    }
+
+    markOptimisticBubbleFailed(id, retryFn, message) {
+      const entry = this.optimisticMessages.get(id);
+      if (!entry || !entry.status) return;
+      entry.status.innerHTML = '';
+      entry.status.classList.add('hypercrm-bubble-error');
+      const text = document.createElement('span');
+      text.className = 'hypercrm-bubble-error';
+      text.textContent = message || 'Failed to send.';
+      entry.status.appendChild(text);
+
+      if (entry.mode === 'new') {
+        this.setComposerMode('new', { placeholder: 'Type your message…', sendLabel: this.getSendIcon() });
+        if (this.elements.composer) this.elements.composer.style.display = 'flex';
+        if (this.elements.composerInput) {
+          this.elements.composerInput.value = entry.payload?.message || '';
+        }
+        this.composerFiles = [];
+        this.updateFileList();
+        if (entry.payload?.attachments?.length) {
+          this.addComposerFiles(entry.payload.attachments);
+        }
+      } else if (entry.mode === 'reply') {
+        if (this.elements.composer) this.elements.composer.style.display = 'flex';
+        this.setComposerMode('reply', { placeholder: 'Type your message…', sendLabel: this.getSendIcon() });
+        if (this.elements.composerInput) {
+          this.elements.composerInput.value = entry.payload?.message || '';
+        }
+        this.composerFiles = [];
+        this.updateFileList();
+        if (entry.payload?.attachments?.length) {
+          this.addComposerFiles(entry.payload.attachments);
+        }
+      }
+
+      const actions = document.createElement('div');
+      actions.className = 'hypercrm-bubble-error-actions';
+      const retryBtn = document.createElement('button');
+      retryBtn.className = 'hypercrm-bubble-error-btn';
+      retryBtn.title = 'Retry';
+      retryBtn.innerHTML = this.renderIcon(this.iconUrls?.retry, '', 'hypercrm-icon-img small');
+      const cancelBtn = document.createElement('button');
+      cancelBtn.className = 'hypercrm-bubble-error-btn';
+      cancelBtn.title = 'Cancel';
+      cancelBtn.innerHTML = this.renderIcon(this.iconUrls?.close, '', 'hypercrm-icon-img small');
+      actions.appendChild(retryBtn);
+      actions.appendChild(cancelBtn);
+      entry.status.appendChild(actions);
+
+      retryBtn.addEventListener('click', () => {
+        entry.status.classList.remove('hypercrm-bubble-error');
+        entry.status.innerHTML = `<span class="hypercrm-bubble-spinner"></span>Sending…`;
+        retryFn();
+      });
+
+      cancelBtn.addEventListener('click', () => {
+        this.resolveOptimisticBubble(id);
+        if (entry.mode === 'new') {
+          this.currentTicket = null;
+          this.renderTicketState();
+        }
+      });
+    }
+
+    showMessage(message, type = 'info') {
+      const { toast } = this.elements;
+      if (!toast) return;
+      toast.textContent = message;
+      toast.classList.remove('success', 'error', 'info');
+      toast.classList.add(type, 'show');
+      clearTimeout(this.toastTimer);
+      this.toastTimer = setTimeout(() => {
+        toast.classList.remove('show');
+      }, 4000);
+    }
+
+    showTab(tab) {
+      const { tabs, ticketPane, eventsPane, composer } = this.elements;
+      this.currentTab = tab;
+      tabs.forEach((button) => {
+        const target = button.getAttribute('data-tab');
+        button.classList.toggle('active', target === tab);
+      });
+      if (ticketPane) ticketPane.classList.toggle('active', tab === 'ticket');
+      if (eventsPane) eventsPane.classList.toggle('active', tab === 'events');
+      if (tab === 'ticket') {
+        if (composer) composer.style.display = 'flex';
+        this.renderTicketState();
+      } else if (tab === 'events') {
+        if (composer) composer.style.display = 'none';
+        this.loadEvents();
+        this.updateCloseInline(false);
+      }
+    }
+
+    renderTicketState() {
+      const { ticketContent, composer } = this.elements;
+      if (!ticketContent) return;
+      this.updateCloseInline(false);
+      if (!this.walletAddress) {
+        this.pendingTicketId = null;
+        this.clearComposer();
+        ticketContent.innerHTML = `
+          <div class="hypercrm-empty-state">
+            <div class="hypercrm-empty-icon">${this.renderIcon(this.iconUrls?.lock, '', 'hypercrm-icon-img xl')}</div>
+            <h3 class="hypercrm-empty-title">Connect your wallet</h3>
+            <p class="hypercrm-empty-desc">Connect your wallet to resume past conversations or start a new one.</p>
+            <button type="button" class="hypercrm-primary-btn" id="hypercrm-connect-inline">Connect wallet</button>
+          </div>`;
+        this.setComposerMode('disabled', { note: 'Connect your wallet to start a conversation.', disabled: true, sendLabel: this.getSendIcon() });
+        if (composer) composer.style.display = 'flex';
+        const btn = document.getElementById('hypercrm-connect-inline');
+        if (btn) btn.addEventListener('click', () => this.connectWallet());
+        return;
+      }
+
+      const openTicket = (this.tickets || []).find((ticket) => (ticket.status || '').toLowerCase() !== 'closed');
+
+      if (openTicket) {
+        if (this.currentTicket && this.currentTicket.id && String(this.currentTicket.id) === String(openTicket.id) && Array.isArray(this.currentTicket.Messages)) {
+          this.renderTicketDetail(this.currentTicket);
+          return;
+        }
+        if (this.pendingTicketId && String(this.pendingTicketId) === String(openTicket.id)) {
+          return;
+        }
+        this.pendingTicketId = openTicket.id;
+        this.renderTicketLoading('Loading your conversation…');
+        this.setComposerMode('disabled', { note: 'Loading ticket…', disabled: true, sendLabel: this.getSendIcon() });
+        this.showTicketDetail(openTicket.id);
+        return;
+      }
+
+      this.currentTicket = null;
+      this.pendingTicketId = null;
+      this.renderEmptyTicket();
+      if (composer) composer.style.display = 'flex';
+    }
+
+    renderEmptyTicket() {
+      const { ticketContent, composer } = this.elements;
+      if (!ticketContent) return;
+      ticketContent.innerHTML = `
+        <div class="hypercrm-empty-state">
+          <div class="hypercrm-empty-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 14a4 4 0 0 1-4 4H8l-4 3V8a4 4 0 0 1 4-4h9a4 4 0 0 1 4 4z"/>
+              <path d="M8.5 9.5h7"/>
+              <path d="M8.5 12.5h5"/>
+            </svg>
+          </div>
+          <h3 class="hypercrm-empty-title">Start a new conversation</h3>
+          <p class="hypercrm-empty-desc">Click the button below to start a conversation with our support team.</p>
+          <p class="hypercrm-empty-warning">Never share private keys, passwords, or seed phrases.</p>
+          <button type="button" class="hypercrm-primary-btn" id="hypercrm-start-ticket">Create new ticket</button>
+        </div>`;
+      if (this.state.composerMode !== 'new') {
+        this.setComposerMode('new', { placeholder: 'Type your message…', sendLabel: this.getSendIcon() });
+      }
+      if (composer) composer.style.display = 'flex';
+      const btn = document.getElementById('hypercrm-start-ticket');
+      if (btn) btn.addEventListener('click', () => {
+        const { composerInput } = this.elements;
+        if (composerInput) composerInput.focus();
+      });
+    }
+
+    renderTicketLoading(message) {
+      const { ticketContent, composer } = this.elements;
+      if (!ticketContent) return;
+      ticketContent.innerHTML = `<div class="hypercrm-loading-state">${this.escapeHtml(message || 'Loading…')}</div>`;
+      this.updateCloseInline(false);
+      if (composer) composer.style.display = 'none';
+    }
+
+    updateCloseInline(visible) {
+      const { closeInline } = this.elements;
+      if (!closeInline) return;
+      if (visible) {
+        closeInline.style.display = 'inline-flex';
+        closeInline.disabled = false;
+      } else {
+        closeInline.style.display = 'none';
+        closeInline.disabled = true;
+      }
+    }
+    renderTicketDetail(ticket) {
+      const { ticketContent, composer } = this.elements;
+      if (!ticket || !ticketContent) return;
+      this.currentTicket = ticket;
+      this.pendingTicketId = null;
+      this.showTicketOverview = false;
+
+      const statusRaw = (ticket.status || 'open').toLowerCase();
+      const isClosed = statusRaw === 'closed';
+      const messages = Array.isArray(ticket.Messages) ? ticket.Messages : [];
+      const messagesHtml = messages.map((message) => this.renderMessageBubble(message)).join('');
+      const systemNotes = messages
+        .filter((message) => (message.senderType || '').toLowerCase() === 'system')
+        .map((message) => String(message.content || '').toLowerCase());
+      const closedByAdmin = systemNotes.some((text) => text.includes('closed by admin'));
+      const closedTitle = ticket.__closedReason === 'missing'
+        ? 'This ticket is no longer available'
+        : (ticket.__closedReason === 'admin' || closedByAdmin)
+          ? 'This ticket was closed by an admin'
+          : 'This ticket is closed';
+      const closedDesc = 'Start a new ticket if you need more help.';
+      const closedBannerHtml = isClosed
+        ? `<div class="hypercrm-closed-banner"><h4>${closedTitle}</h4><p>${closedDesc}</p><button type="button" class="hypercrm-primary-btn" id="hypercrm-new-ticket">Create new ticket</button></div>`
+        : '';
+
+      this.updateCloseInline(Boolean(ticket.id && !isClosed));
+
+      ticketContent.innerHTML = `
+        <div class="hypercrm-conversation-shell">
+          <div class="hypercrm-message-list" id="hypercrm-message-list">${messagesHtml}</div>
+          ${closedBannerHtml}
+        </div>
+      `;
+
+      if (isClosed) {
+        this.setComposerMode('closed', {
+          note: 'This ticket is closed. Start a new ticket to continue.',
+          placeholder: 'Ticket closed',
+          sendLabel: this.getSendIcon(),
+          disabled: true,
+        });
+        if (composer) composer.style.display = 'flex';
+      } else {
+        if (composer) composer.style.display = 'flex';
+        this.setComposerMode('reply', { placeholder: 'Type your message…', sendLabel: this.getSendIcon() });
+      }
+
+      const newTicketBtn = document.getElementById('hypercrm-new-ticket');
+      if (newTicketBtn) {
+        newTicketBtn.addEventListener('click', () => {
+          const closedId = this.currentTicket?.id;
+          this.currentTicket = null;
+          this.pendingTicketId = null;
+          this.clearComposer();
+          if (closedId && Array.isArray(this.tickets)) {
+            this.tickets = this.tickets.filter((ticket) => String(ticket.id) !== String(closedId));
+          }
+          this.renderTicketState();
+          const { composerInput } = this.elements;
+          if (composerInput) composerInput.focus();
+        });
+      }
+
+      const messageList = document.getElementById('hypercrm-message-list');
+      if (messageList) {
+        messageList.querySelectorAll('[data-hypercrm-img]').forEach((img) => {
+          img.addEventListener('click', () => {
+            const url = img.getAttribute('data-hypercrm-img');
+            if (url) this.openLightbox(url);
+          });
+        });
+        messageList.scrollTop = messageList.scrollHeight;
+      }
+
+      this.startAutoRefresh();
+    }
+
+    markTicketClosed(reason = 'closed') {
+      if (!this.currentTicket) return;
+      const closedId = this.currentTicket.id;
+      this.currentTicket = {
+        ...this.currentTicket,
+        status: 'closed',
+        __closedReason: reason,
+      };
+      this.pendingTicketId = null;
+      if (!Array.isArray(this.currentTicket.Messages)) {
+        this.currentTicket.Messages = [];
+      }
+      if (closedId && Array.isArray(this.tickets)) {
+        this.tickets = this.tickets.filter((ticket) => String(ticket.id) !== String(closedId));
+      }
+      this.renderTicketDetail(this.currentTicket);
+    }
+
+    renderMessageBubble(message) {
+      const senderType = (message.senderType || 'agent').toLowerCase();
+      const bubbleClass = senderType === 'customer' ? 'hypercrm-bubble me' : senderType === 'system' ? 'hypercrm-bubble system' : 'hypercrm-bubble agent';
+      const groupClass = senderType === 'customer' ? 'hypercrm-message-group me' : 'hypercrm-message-group';
+      const timestamp = message.createdAt ? new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
+      const attachments = (message.Attachments || []).map((attachment) => this.renderMessageAttachment(attachment)).join('');
+      const body = this.escapeHtml(message.content || '');
+      if (senderType === 'system') {
+        return `
+          <div class="hypercrm-message-group">
+            <div class="hypercrm-bubble system">
+              <div class="hypercrm-bubble-content">${body}</div>
+              <div class="hypercrm-bubble-meta">${timestamp}</div>
+            </div>
+          </div>`;
+      }
+      const avatarHtml = senderType === 'customer' ? '<div class="hypercrm-avatar me">Me</div>' : this.renderAgentAvatar();
+      return `
+        <div class="${groupClass}">
+          ${avatarHtml}
+          <div class="${bubbleClass}">
+            <div class="hypercrm-bubble-content">${body}</div>
+            ${attachments}
+            ${timestamp ? `<div class="hypercrm-bubble-meta">${timestamp}</div>` : ''}
+          </div>
+        </div>`;
+    }
+
+    renderMessageAttachment(attachment) {
+      if (!attachment || !attachment.url) return '';
+      const url = this.absUrl(attachment.url);
+      const fileName = this.escapeHtml(attachment.fileName || 'Attachment');
+      const isImage = (attachment.fileType && attachment.fileType.startsWith('image/')) || /\.(png|jpe?g|gif|webp|svg)$/i.test(attachment.fileName || '');
+      if (isImage) {
+        return `<div class="hypercrm-attachment-chip"><img src="${url}" alt="${fileName}" data-hypercrm-img="${url}" /></div>`;
+      }
+      return `<div class="hypercrm-attachment-chip">${this.renderIcon(this.iconUrls?.file, '', 'hypercrm-icon-img small')}<a href="${url}" target="_blank" rel="noopener">${fileName}</a></div>`;
+    }
+
+    getStatusText(status) {
+      const map = { open: 'Open', pending: 'Pending', resolved: 'Resolved', closed: 'Closed' };
+      return map[(status || '').toLowerCase()] || status || 'Open';
+    }
+    async loadOrgInfo() {
+      try {
+        const response = await fetch(`${this.apiUrl}/organizations/public/info`, {
+          headers: { 'X-API-Key': this.apiKey },
+        });
+        if (!response.ok) return;
+        this.orgInfo = await response.json();
+        if (!this.options.position && this.orgInfo?.widget?.position) {
+          this.setPosition(this.orgInfo.widget.position);
+        }
+        const iconUrl = this.orgInfo?.widget?.iconUrl;
+        this.orgIconUrl = iconUrl ? this.absUrl(iconUrl) : null;
+        this.updateHeaderIcons();
+        this.updateToggleIcon();
+      } catch (error) {
+        console.warn('Failed to load organization info', error);
+      }
+    }
+    updateHeaderIcons() {
+      const { telegramBtn, discordBtn } = this.elements;
+      const telegramUsername = this.orgInfo?.telegram?.userBotUsername;
+      const discordInvite = this.orgInfo?.discord?.inviteUrl;
+      if (telegramBtn) {
+        if (telegramUsername) {
+          const username = String(telegramUsername).replace(/^@/, '');
+          telegramBtn.classList.remove('disabled');
+          telegramBtn.href = `https://t.me/${username}`;
+          telegramBtn.title = `Telegram @${username}`;
+        } else {
+          telegramBtn.classList.add('disabled');
+          telegramBtn.removeAttribute('href');
+        }
+      }
+      if (discordBtn) {
+        if (discordInvite) {
+          discordBtn.classList.remove('disabled');
+          discordBtn.href = discordInvite;
+          discordBtn.title = 'Discord channel';
+        } else {
+          discordBtn.classList.add('disabled');
+          discordBtn.removeAttribute('href');
+        }
+      }
+    }
+
+    updateToggleIcon() {
+      const iconUrl = this.orgIconUrl;
+      const { toggleInner } = this.elements;
+      if (!toggleInner) return;
+      if (iconUrl) {
+        toggleInner.innerHTML = `<img src="${iconUrl}" alt="Chat" class="hypercrm-toggle-avatar" />`;
+      } else {
+        toggleInner.innerHTML = this.renderIcon(this.iconUrls?.chat, '', 'hypercrm-icon-img large');
+      }
+    }
+
+    async checkWalletConnection() {
+      if (typeof window.ethereum !== 'undefined') {
+        try {
+          const accounts = await window.ethereum.request({ method: 'eth_accounts' });
+          if (accounts.length > 0) {
+            this.walletAddress = accounts[0];
+            this.updateWalletUI();
+            await this.loadMyTickets();
+            this.showTicketOverview = false;
+          }
+        } catch (error) {
+          console.error('Failed to check wallet:', error);
+          if (error?.code === 4900) {
+            this.handleWalletDisconnected();
+          }
+        }
+      }
+      this.updateWalletUI();
+    }
+
+    async connectWallet() {
+      if (typeof window.ethereum === 'undefined') {
+        this.showMessage('MetaMask is not installed.', 'error');
+        return;
+      }
+      try {
+        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
+        this.walletAddress = accounts[0];
+        this.updateWalletUI();
+        await this.loadMyTickets();
+        this.showTicketOverview = false;
+        this.showMessage('Wallet connected', 'success');
+      } catch (error) {
+        console.error('Failed to connect wallet:', error);
+        this.showMessage('Failed to connect wallet.', 'error');
+      }
+    }
+
+    updateWalletUI() {
+      const { walletSlot } = this.elements;
+      if (!walletSlot) return;
+      walletSlot.innerHTML = '';
+      if (this.walletAddress) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'hypercrm-wallet-chip';
+        button.title = this.walletAddress;
+        button.textContent = this.shortenAddress(this.walletAddress);
+        button.addEventListener('click', () => this.disconnectWallet());
+        walletSlot.appendChild(button);
+      } else {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'hypercrm-wallet-connect';
+        button.textContent = 'Connect wallet';
+        button.addEventListener('click', () => this.connectWallet());
+        walletSlot.appendChild(button);
+      }
+    }
+
+    disconnectWallet() {
+      this.walletAddress = null;
+      this.tickets = [];
+      this.currentTicket = null;
+      this.showTicketOverview = false;
+      this.pendingTicketId = null;
+      this.clearComposer();
+      this.updateWalletUI();
+      this.renderTicketState();
+    }
+
+    handleWalletDisconnected() {
+      this.disconnectWallet();
+    }
+    async loadMyTickets() {
+      if (!this.walletAddress) return;
+      try {
+        const response = await fetch(`${this.apiUrl}/tickets/my?wallet=${encodeURIComponent(this.walletAddress)}`, {
+          headers: { 'X-API-Key': this.apiKey },
+        });
+        if (!response.ok) return;
+        const data = await response.json();
+        this.tickets = Array.isArray(data.tickets) ? data.tickets : [];
+        const openTicket = this.tickets.find((ticket) => (ticket.status || '').toLowerCase() !== 'closed');
+        if (this.currentTicket && openTicket && String(this.currentTicket.id) === String(openTicket.id)) {
+          this.currentTicket.status = openTicket.status;
+          this.currentTicket.ticketNumber = openTicket.ticketNumber;
+          this.currentTicket.subject = openTicket.subject;
+        }
+        if (!openTicket && this.currentTicket && (this.currentTicket.status || '').toLowerCase() !== 'closed') {
+          this.currentTicket.status = 'closed';
+        }
+        this.renderTicketState();
+      } catch (error) {
+        console.error('Failed to load tickets:', error);
+      }
+    }
+
+    async showTicketDetail(ticketId) {
+      try {
+        const expectedId = String(ticketId);
+        this.pendingTicketId = ticketId;
+        const response = await fetch(`${this.apiUrl}/tickets/public/${ticketId}`, {
+          headers: { 'X-API-Key': this.apiKey },
+        });
+        if (!response.ok) {
+          if (response.status === 404) {
+            const stillActive = (this.pendingTicketId && String(this.pendingTicketId) === expectedId)
+              || (this.currentTicket && String(this.currentTicket.id) === expectedId);
+            if (stillActive) this.markTicketClosed('missing');
+          }
+          if (this.pendingTicketId && String(this.pendingTicketId) === expectedId) {
+            this.pendingTicketId = null;
+          }
+          return;
+        }
+        const ticket = await response.json();
+        const stillActive = (this.pendingTicketId && String(this.pendingTicketId) === expectedId)
+          || (this.currentTicket && String(this.currentTicket.id) === expectedId);
+        if (!stillActive) return;
+        this.pendingTicketId = null;
+        this.renderTicketDetail(ticket);
+      } catch (error) {
+        this.pendingTicketId = null;
+        console.error('Failed to load ticket detail:', error);
+      }
+    }
+
+    async closeTicketFromWidget() {
+      if (!this.currentTicket) return;
+      try {
+        const closeToken = this.currentTicket?.metadata?.closeToken || null;
+        const headers = { 'X-API-Key': this.apiKey };
+        let body = null;
+        if (closeToken) {
+          headers['X-Close-Token'] = closeToken;
+          body = JSON.stringify({ token: closeToken });
+          headers['Content-Type'] = 'application/json';
+        }
+        const response = await fetch(`${this.apiUrl}/tickets/public/${this.currentTicket.id}/close`, {
+          method: 'POST',
+          headers,
+          body,
+        });
+        if (response.ok) {
+          const closedId = this.currentTicket?.id;
+          this.currentTicket = null;
+          this.pendingTicketId = null;
+          this.clearComposer();
+          try {
+            if (closedId) {
+              this.tickets = (this.tickets || []).filter((t) => String(t.id) !== String(closedId));
+            }
+          } catch (_) {}
+          this.updateCloseInline(false);
+          this.renderEmptyTicket();
+          await this.loadMyTickets();
+          this.renderTicketState();
+        }
+      } catch (error) {
+        console.error('Failed to close ticket:', error);
+      }
+    }
+
+    async loadEvents() {
+      try {
+        const response = await fetch(`${this.apiUrl}/events/public`, {
+          headers: { 'X-API-Key': this.apiKey },
+        });
+        if (!response.ok) return;
+        const events = await response.json();
+        this.events = Array.isArray(events) ? events : [];
+        this.renderEvents();
+      } catch (error) {
+        console.error('Failed to load announcements:', error);
+      }
+    }
+
+    renderEvents() {
+      const { eventsList, eventDetail } = this.elements;
+      if (!eventsList) return;
+      if (eventDetail) eventDetail.style.display = 'none';
+      eventsList.style.display = 'block';
+      if (!this.events.length) {
+        eventsList.innerHTML = `<div class="hypercrm-empty-state"><div class="hypercrm-empty-icon">${this.renderIcon(this.iconUrls?.announcement, '', 'hypercrm-icon-img xl')}</div><h3 class="hypercrm-empty-title">No announcements yet</h3><p class="hypercrm-empty-desc">Announcements you publish will show up here for your users.</p></div>`;
+        return;
+      }
+      const sorted = [...this.events].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+      eventsList.innerHTML = sorted.map((event) => {
+        const banner = event.bannerUrl ? `<img src="${this.absUrl(event.bannerUrl)}" alt="${this.escapeHtml(event.title || 'Announcement banner')}" />` : '';
+        const createdAt = event.createdAt ? new Date(event.createdAt).toLocaleString() : '';
+        const rawText = event.content || '';
+        const summary = rawText.length > 140 ? `${rawText.slice(0, 140)}…` : rawText;
+        return `
+          <article class="hypercrm-event-card" data-id="${event.id}">
+            <div class="hypercrm-event-banner">
+              ${banner || '<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.08);color:#64748b;font-size:13px;">No banner</div>'}
+            </div>
+            <div class="hypercrm-event-content">
+              <h3 class="hypercrm-event-title">${this.escapeHtml(event.title || 'Announcement')}</h3>
+              <span class="hypercrm-event-meta">${this.escapeHtml(createdAt)}</span>
+              ${summary ? `<p class="hypercrm-event-text">${this.escapeHtml(summary)}</p>` : ''}
+            </div>
+          </article>`;
+      }).join('');
+      eventsList.querySelectorAll('.hypercrm-event-card').forEach((card) => {
+        card.addEventListener('click', () => {
+          const id = card.getAttribute('data-id');
+          const event = this.events.find((item) => String(item.id) === String(id));
+          if (event) this.renderEventDetail(event);
+        });
+      });
+    }
+
+    renderEventDetail(event) {
+      const { eventsList, eventDetail } = this.elements;
+      if (!eventDetail || !eventsList) return;
+      eventsList.style.display = 'none';
+      eventDetail.style.display = 'block';
+      const banner = event.bannerUrl ? `<img src="${this.absUrl(event.bannerUrl)}" alt="${this.escapeHtml(event.title || 'Announcement banner')}" />` : '';
+      const createdAt = event.createdAt ? new Date(event.createdAt).toLocaleString() : '';
+      eventDetail.innerHTML = `
+        <button type="button" class="hypercrm-secondary-btn hypercrm-with-icon" id="hypercrm-back-events">${this.renderIcon(this.iconUrls?.back, '', 'hypercrm-icon-img small')}Back to announcements</button>
+        <article class="hypercrm-event-card" style="cursor:auto;">
+          <div class="hypercrm-event-banner">
+            ${banner || '<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.08);color:#64748b;font-size:13px;">No banner</div>'}
+          </div>
+          <div class="hypercrm-event-content">
+            <h3 class="hypercrm-event-title">${this.escapeHtml(event.title || 'Announcement')}</h3>
+            <span class="hypercrm-event-meta">${this.escapeHtml(createdAt)}</span>
+            <p class="hypercrm-event-text">${this.escapeHtml(event.content || '')}</p>
+            ${event.ctaUrl ? `<div class="hypercrm-event-actions"><a class="hypercrm-primary-btn" href="${event.ctaUrl}" target="_blank" rel="noopener">${this.escapeHtml(event.ctaLabel || 'Open link')}</a></div>` : ''}
+          </div>
+        </article>`;
+      const backBtn = document.getElementById('hypercrm-back-events');
+      if (backBtn) backBtn.addEventListener('click', () => this.renderEvents());
+    }
+    startAutoRefresh() {
+      this.stopAutoRefresh();
+      if (this.isOpen && this.currentTicket && !this.socketConnected) {
+        this.refreshInterval = setInterval(() => {
+          if (this.isOpen && this.currentTicket) this.refreshTicketDetail();
+        }, 3000);
+      }
+    }
+
+    stopAutoRefresh() {
+      if (this.refreshInterval) {
+        clearInterval(this.refreshInterval);
+        this.refreshInterval = null;
+      }
+    }
+
+    async refreshTicketDetail() {
+      if (!this.currentTicket) return;
+      try {
+        const activeId = String(this.currentTicket.id);
+        const response = await fetch(`${this.apiUrl}/tickets/public/${this.currentTicket.id}`, {
+          headers: { 'X-API-Key': this.apiKey },
+        });
+        if (!response.ok) {
+          if (response.status === 404) {
+            if (this.currentTicket && String(this.currentTicket.id) === activeId) {
+              this.markTicketClosed('missing');
+            }
+          }
+          return;
+        }
+        const updated = await response.json();
+        if (!this.currentTicket || String(this.currentTicket.id) !== activeId) return;
+        const previousMessages = this.currentTicket?.Messages?.length || 0;
+        const previousStatus = this.currentTicket?.status;
+        const newMessages = updated?.Messages?.length || 0;
+        this.currentTicket = updated;
+        if (Array.isArray(this.tickets)) {
+          const idx = this.tickets.findIndex((ticket) => String(ticket.id) === String(updated.id));
+          if (idx !== -1) {
+            this.tickets[idx] = {
+              ...this.tickets[idx],
+              status: updated.status,
+              subject: updated.subject,
+              ticketNumber: updated.ticketNumber,
+            };
+          }
+        }
+        if (newMessages !== previousMessages || updated.status !== previousStatus) {
+          this.renderTicketDetail(updated);
+        }
+      } catch (error) {
+        console.error('Failed to refresh ticket:', error);
+      }
+    }
+
+    async loadSocketIoScript() {
+      if (global.io && typeof global.io === 'function') return;
+      await new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = `${this.apiOrigin}/socket.io/socket.io.js`;
+        script.async = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error('Failed to load socket.io client'));
+        document.head.appendChild(script);
+      });
+    }
+
+    async connectRealtime() {
+      try {
+        if (!this.orgInfo) await this.loadOrgInfo();
+        if (!this.orgInfo?.id) return;
+        await this.loadSocketIoScript();
+        if (this.socket) {
+          try { this.socket.disconnect(); } catch (_) {}
+          this.socket = null;
+        }
+        if (!global.io) return;
+        this.socket = global.io(this.apiOrigin, { transports: ['websocket'], forceNew: true });
+        this.socket.on('connect', () => {
+          this.socketConnected = true;
+          try { this.socket.emit('join-organization', this.orgInfo.id); } catch (_) {}
+          this.stopAutoRefresh();
+        });
+        this.socket.on('disconnect', () => {
+          this.socketConnected = false;
+          if (this.isOpen && this.currentTicket) this.startAutoRefresh();
+        });
+        this.socket.on('new-message', (payload) => {
+          try {
+            if (this.currentTicket && String(payload.ticketId) === String(this.currentTicket.id)) {
+              this.refreshTicketDetail();
+            }
+          } catch (_) {}
+        });
+        this.socket.on('ticket-status-changed', (payload) => {
+          try {
+            if (!this.currentTicket || !payload) return;
+            if (String(payload.ticketId) !== String(this.currentTicket.id)) return;
+            const newStatus = String(payload.newStatus || '').toLowerCase();
+            if (payload.deleted || newStatus === 'deleted') {
+              this.markTicketClosed('admin');
+              return;
+            }
+            this.refreshTicketDetail();
+          } catch (_) {}
+        });
+      } catch (error) {
+        console.warn('Realtime connection failed; falling back to polling.', error);
+        if (!this.refreshInterval && this.isOpen && this.currentTicket) this.startAutoRefresh();
+      }
+    }
+
+    disconnectRealtime() {
+      try {
+        if (this.socket) this.socket.disconnect();
+      } catch (_) {}
+      this.socket = null;
+      this.socketConnected = false;
+      if (this.socketRetryTimer) {
+        clearTimeout(this.socketRetryTimer);
+        this.socketRetryTimer = null;
+      }
+    }
+
+    openWidget() {
+      if (this.isOpen) return;
+      const { panel } = this.elements;
+      this.isOpen = true;
+      if (panel) panel.classList.add('open');
+      this.ensureSystemColorListener();
+      this.applyColorMode();
+      this.renderTicketState();
+      if (this.walletAddress) this.loadMyTickets();
+      this.loadOrgInfo();
+      this.connectRealtime();
+      this.startAutoRefresh();
+    }
+
+    closeWidget() {
+      if (!this.isOpen) return;
+      const { panel } = this.elements;
+      this.isOpen = false;
+      if (panel) panel.classList.remove('open');
+      this.stopAutoRefresh();
+      this.disconnectRealtime();
+    }
+
+    toggleWidget() {
+      if (this.isOpen) this.closeWidget(); else this.openWidget();
+    }
+
+    openLightbox(url) {
+      const lb = document.getElementById('hypercrm-lightbox');
+      const img = document.getElementById('hypercrm-lightbox-img');
+      if (!lb || !img) return;
+      img.src = url;
+      lb.classList.add('open');
+      this.bindLightboxEscape();
+    }
+
+    closeLightbox() {
+      const lb = document.getElementById('hypercrm-lightbox');
+      if (!lb) return;
+      lb.classList.remove('open');
+      this.unbindLightboxEscape();
+    }
+
+    bindLightboxEscape() {
+      if (!this._handleEsc) {
+        this._handleEsc = (event) => {
+          if (event.key === 'Escape') this.closeLightbox();
+        };
+      }
+      document.addEventListener('keydown', this._handleEsc);
+    }
+
+    unbindLightboxEscape() {
+      if (this._handleEsc) {
+        document.removeEventListener('keydown', this._handleEsc);
+      }
+    }
+    escapeHtml(value) {
+      if (value == null) return '';
+      return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+
+    renderIcon(src, alt, className) {
+      if (!src) return '';
+      const safeAlt = alt ? this.escapeHtml(alt) : '';
+      const classAttr = className ? ` class="${className}"` : '';
+      if (safeAlt) {
+        return `<img src="${src}" alt="${safeAlt}"${classAttr} />`;
+      }
+      return `<img src="${src}" alt="" aria-hidden="true"${classAttr} />`;
+    }
+
+    getSendIcon() {
+      return this.renderIcon(this.iconUrls?.send, '', 'hypercrm-icon-img');
+    }
+
+    shortenAddress(address) {
+      if (!address || address.length < 10) return address || '';
+      return `${address.slice(0, 6)}…${address.slice(-4)}`;
+    }
+
+    getSenderDisplayName(message) {
+      if (!message) return 'Support';
+      if (message.senderType === 'customer') return 'You';
+      if (message.senderType === 'system') return 'System';
+      return this.orgInfo?.name || 'Support';
+    }
+
+    getAvatarLabel(senderType) {
+      if (senderType === 'customer') {
+        if (this.walletAddress) return (this.walletAddress.slice(2, 4) || 'YOU').toUpperCase();
+        return 'YOU';
+      }
+      if (senderType === 'system') return 'SYS';
+      const name = (this.orgInfo?.name || 'HC').replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
+      return name.slice(0, 2) || 'HC';
+    }
+
+    renderAgentAvatar() {
+      if (this.orgIconUrl) {
+        return `<div class="hypercrm-avatar"><img src="${this.orgIconUrl}" alt="Agent" /></div>`;
+      }
+      const initials = this.getAvatarLabel('agent');
+      return `<div class="hypercrm-avatar">${initials}</div>`;
+    }
+
+    destroy() {
+      try { this.disconnectRealtime(); } catch (_) {}
+      this.stopAutoRefresh();
+      this.removeSystemColorListener();
+      document.removeEventListener('paste', this.handlePasteBound);
+      try {
+        this.optimisticMessages?.forEach((entry) => {
+          entry?.previewUrls?.forEach((url) => URL.revokeObjectURL(url));
+        });
+      } catch (_) {}
+      this.optimisticMessages = new Map();
+      if (this.container && this.container.parentNode) {
+        this.container.parentNode.removeChild(this.container);
+      }
+      const lb = document.getElementById('hypercrm-lightbox');
+      if (lb && lb.parentNode === document.body) {
+        document.body.removeChild(lb);
+      }
+    }
+  }
+
+  let activeWidget = null;
+  const defaultOptions = global.HyperCRM_WIDGET_OPTIONS || {};
+  const shouldAutoInit = defaultOptions.autoInit !== false;
+
+  const api = {
+    init(options) {
+      const configuration = options || defaultOptions;
+      if (activeWidget) {
+        try { activeWidget.destroy(); } catch (_) {}
+      }
+      activeWidget = new HyperCRMWidget(configuration);
+      return activeWidget;
+    },
+    destroy() {
+      if (!activeWidget) return;
+      try { activeWidget.destroy(); } catch (_) {}
+      activeWidget = null;
+    },
+    setTheme(theme) {
+      if (activeWidget) activeWidget.setTheme(theme);
+    },
+    setColorMode(mode) {
+      if (activeWidget) activeWidget.setColorMode(mode);
+    },
+    setPosition(position) {
+      if (activeWidget) activeWidget.setPosition(position);
+    },
+    open() {
+      if (activeWidget) activeWidget.openWidget();
+    },
+    close() {
+      if (activeWidget) activeWidget.closeWidget();
+    },
+    toggle() {
+      if (activeWidget) activeWidget.toggleWidget();
+    },
+    openLightbox(url) {
+      if (activeWidget) activeWidget.openLightbox(url);
+    },
+    closeLightbox() {
+      if (activeWidget) activeWidget.closeLightbox();
+    },
+  };
+
+  global.HyperCRMWidget = api;
+
+  const boot = () => { api.init(defaultOptions); };
+  if (shouldAutoInit) {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', boot);
+    } else {
+      boot();
+    }
+  }
+})(typeof window !== 'undefined' ? window : this);