deepnova-help-widget 0.0.0-stage → 1.1.0

package/dist/index.mjs

@@ -0,0 +1,1279 @@
+var B=Object.defineProperty;var E=(b,m)=>()=>(b&&(m=b(b=0)),m);var z=(b,m)=>{for(var e in m)B(b,e,{get:m[e],enumerable:!0})};var L,_=E(()=>{L=`:host {\r
+  --hw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\r
+  font-family: var(--hw-font);\r
+  display: inline-block;\r
+\r
+  /* Theme Tokens - Dark (Default) */\r
+  --hw-bg-sidebar: #0e1320;\r
+  --hw-bg-glass: rgba(14, 19, 32, 0.85);\r
+  --hw-border-glass: rgba(255, 255, 255, 0.08);\r
+  --hw-text-primary: #f8fafc;\r
+  --hw-text-secondary: #94a3b8;\r
+  --hw-text-muted: #64748b;\r
+  --hw-accent: #5d4fff;\r
+  --hw-accent-glow: rgba(93, 79, 255, 0.45);\r
+  --hw-accent-hover: #4c3fe0;\r
+  --hw-surface: #1e293b;\r
+  --hw-surface-hover: #334155;\r
+  --hw-input-bg: rgba(255, 255, 255, 0.04);\r
+  --hw-input-border: rgba(255, 255, 255, 0.1);\r
+  --hw-input-focus: #5d4fff;\r
+  --hw-bg-tabs: rgba(0, 0, 0, 0.15);\r
+  --hw-bg-faq-content: rgba(0, 0, 0, 0.1);\r
+\r
+  /* Status Colors */\r
+  --hw-color-open: #38bdf8;\r
+  --hw-color-progress: #fbbf24;\r
+  --hw-color-pending: #c084fc;\r
+  --hw-color-resolved: #34d399;\r
+  --hw-color-closed: #94a3b8;\r
+\r
+  --hw-bg-open: rgba(56, 189, 248, 0.1);\r
+  --hw-bg-progress: rgba(251, 191, 36, 0.1);\r
+  --hw-bg-pending: rgba(192, 132, 252, 0.1);\r
+  --hw-bg-resolved: rgba(52, 211, 153, 0.1);\r
+  --hw-bg-closed: rgba(148, 163, 184, 0.1);\r
+}\r
+\r
+:host([theme="light"]) {\r
+  --hw-bg-sidebar: #ffffff;\r
+  --hw-bg-glass: rgba(255, 255, 255, 0.9);\r
+  --hw-border-glass: rgba(0, 0, 0, 0.08);\r
+  --hw-text-primary: #0f172a;\r
+  --hw-text-secondary: #475569;\r
+  --hw-text-muted: #94a3b8;\r
+  --hw-accent: #5d4fff;\r
+  --hw-accent-glow: rgba(93, 79, 255, 0.2);\r
+  --hw-accent-hover: #4c3fe0;\r
+  --hw-surface: #f1f5f9;\r
+  --hw-surface-hover: #e2e8f0;\r
+  --hw-input-bg: #ffffff;\r
+  --hw-input-border: #cbd5e1;\r
+  --hw-input-focus: #5d4fff;\r
+  --hw-bg-tabs: #f1f5f9;\r
+  --hw-bg-faq-content: #f8fafc;\r
+}\r
+\r
+@media (prefers-color-scheme: light) {\r
+  :host(:not([theme="dark"])) {\r
+    --hw-bg-sidebar: #ffffff;\r
+    --hw-bg-glass: rgba(255, 255, 255, 0.9);\r
+    --hw-border-glass: rgba(0, 0, 0, 0.08);\r
+    --hw-text-primary: #0f172a;\r
+    --hw-text-secondary: #475569;\r
+    --hw-text-muted: #94a3b8;\r
+    --hw-accent: #5d4fff;\r
+    --hw-accent-glow: rgba(93, 79, 255, 0.2);\r
+    --hw-accent-hover: #4c3fe0;\r
+    --hw-surface: #f1f5f9;\r
+    --hw-surface-hover: #e2e8f0;\r
+    --hw-input-bg: #ffffff;\r
+    --hw-input-border: #cbd5e1;\r
+    --hw-input-focus: #5d4fff;\r
+    --hw-bg-tabs: #f1f5f9;\r
+    --hw-bg-faq-content: #f8fafc;\r
+  }\r
+}\r
+\r
+/* Trigger Button Styling */\r
+.hw-trigger-btn {\r
+  display: flex;\r
+  align-items: center;\r
+  justify-content: center;\r
+  width: 36px;\r
+  height: 36px;\r
+  border-radius: 10px;\r
+  border: 1px solid var(--hw-border-glass);\r
+  background: var(--hw-input-bg);\r
+  color: var(--hw-text-secondary);\r
+  font-size: 16px;\r
+  cursor: pointer;\r
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r
+  box-sizing: border-box;\r
+  outline: none;\r
+}\r
+\r
+.hw-trigger-btn:hover {\r
+  background: var(--hw-surface);\r
+  color: var(--hw-accent);\r
+  border-color: var(--hw-accent);\r
+  box-shadow: 0 0 10px var(--hw-accent-glow);\r
+  transform: scale(1.03);\r
+}\r
+\r
+.hw-trigger-btn.minimal {\r
+  border: none;\r
+  background: transparent;\r
+  width: auto;\r
+  height: auto;\r
+  padding: 6px;\r
+}\r
+\r
+.hw-trigger-btn.hidden {\r
+  display: none;\r
+}\r
+\r
+/* Backdrop Overlay */\r
+.hw-backdrop {\r
+  position: fixed;\r
+  top: 0;\r
+  left: 0;\r
+  width: 100vw;\r
+  height: 100vh;\r
+  background: rgba(4, 7, 13, 0.4);\r
+  backdrop-filter: blur(8px);\r
+  -webkit-backdrop-filter: blur(8px);\r
+  z-index: 99998;\r
+  opacity: 0;\r
+  pointer-events: none;\r
+  transition: opacity 0.3s ease;\r
+}\r
+\r
+.hw-backdrop.open {\r
+  opacity: 1;\r
+  pointer-events: auto;\r
+}\r
+\r
+/* Sidebar Panel Drawer */\r
+.hw-sidebar {\r
+  position: fixed;\r
+  top: 0;\r
+  right: -420px;\r
+  width: 100%;\r
+  max-width: 400px;\r
+  height: 100vh;\r
+  background: var(--hw-bg-sidebar);\r
+  border-left: 1px solid var(--hw-border-glass);\r
+  z-index: 99999;\r
+  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);\r
+  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);\r
+  display: flex;\r
+  flex-direction: column;\r
+  box-sizing: border-box;\r
+}\r
+\r
+.hw-sidebar.open {\r
+  right: 0;\r
+}\r
+\r
+/* Sidebar Header */\r
+.hw-header {\r
+  display: flex;\r
+  align-items: center;\r
+  justify-content: space-between;\r
+  padding: 20px;\r
+  border-bottom: 1px solid var(--hw-border-glass);\r
+}\r
+\r
+.hw-header-title {\r
+  font-size: 18px;\r
+  font-weight: 700;\r
+  color: var(--hw-text-primary);\r
+  margin: 0;\r
+  display: flex;\r
+  align-items: center;\r
+  gap: 8px;\r
+}\r
+\r
+.hw-close-btn {\r
+  background: transparent;\r
+  border: none;\r
+  color: var(--hw-text-secondary);\r
+  font-size: 18px;\r
+  cursor: pointer;\r
+  width: 32px;\r
+  height: 32px;\r
+  display: flex;\r
+  align-items: center;\r
+  justify-content: center;\r
+  border-radius: 8px;\r
+  transition: all 0.15s;\r
+}\r
+\r
+.hw-close-btn:hover {\r
+  background: var(--hw-surface);\r
+  color: #ef4444;\r
+}\r
+\r
+/* Tabs Navigation */\r
+.hw-tabs {\r
+  display: flex;\r
+  padding: 12px 16px;\r
+  gap: 4px;\r
+  background: var(--hw-bg-tabs);\r
+  border-bottom: 1px solid var(--hw-border-glass);\r
+}\r
+\r
+.hw-tab-btn {\r
+  flex: 1;\r
+  padding: 8px 4px;\r
+  background: transparent;\r
+  border: none;\r
+  color: var(--hw-text-secondary);\r
+  font-size: 12px;\r
+  font-weight: 600;\r
+  cursor: pointer;\r
+  border-radius: 8px;\r
+  transition: all 0.2s;\r
+  text-align: center;\r
+  white-space: nowrap;\r
+}\r
+\r
+.hw-tab-btn:hover {\r
+  background: var(--hw-surface);\r
+  color: var(--hw-text-primary);\r
+}\r
+\r
+.hw-tab-btn.active {\r
+  background: var(--hw-accent);\r
+  color: #ffffff;\r
+  box-shadow: 0 2px 8px var(--hw-accent-glow);\r
+}\r
+\r
+/* Sidebar Body Viewport */\r
+.hw-body {\r
+  flex: 1;\r
+  overflow-y: auto;\r
+  padding: 20px;\r
+  box-sizing: border-box;\r
+  display: flex;\r
+  flex-direction: column;\r
+}\r
+\r
+.hw-tab-panel {\r
+  display: none;\r
+  flex-direction: column;\r
+  height: 100%;\r
+}\r
+\r
+.hw-tab-panel.active {\r
+  display: flex;\r
+  animation: fadeIn 0.25s ease-out;\r
+}\r
+\r
+@keyframes fadeIn {\r
+  from {\r
+    opacity: 0;\r
+    transform: translateY(6px);\r
+  }\r
+\r
+  to {\r
+    opacity: 1;\r
+    transform: translateY(0);\r
+  }\r
+}\r
+\r
+/* Help Guide Accordion */\r
+.hw-faq-item {\r
+  border: 1px solid var(--hw-border-glass);\r
+  border-radius: 12px;\r
+  margin-bottom: 12px;\r
+  background: rgba(255, 255, 255, 0.01);\r
+  overflow: hidden;\r
+  transition: border-color 0.2s;\r
+}\r
+\r
+.hw-faq-item:hover {\r
+  border-color: var(--hw-accent-glow);\r
+}\r
+\r
+.hw-faq-header {\r
+  display: flex;\r
+  justify-content: space-between;\r
+  align-items: center;\r
+  padding: 12px 14px;\r
+  cursor: pointer;\r
+  user-select: none;\r
+}\r
+\r
+.hw-faq-icon {\r
+  font-size: 11px;\r
+  color: var(--hw-text-muted);\r
+  transition: transform 0.2s;\r
+}\r
+\r
+.hw-faq-item.open .hw-faq-icon {\r
+  transform: rotate(180deg);\r
+}\r
+\r
+.hw-faq-content {\r
+  max-height: 0;\r
+  overflow: hidden;\r
+  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);\r
+  background: var(--hw-bg-faq-content);\r
+}\r
+\r
+.hw-faq-inner {\r
+  padding: 14px 16px;\r
+  border-top: 1px solid var(--hw-border-glass);\r
+}\r
+\r
+/* Dynamic Step & Image Framework Styling */\r
+.hw-guide-main-title {\r
+  font-size: 13px;\r
+  font-weight: 500;\r
+  color: var(--hw-text-secondary);\r
+  margin: 0 0 16px 0;\r
+  line-height: 1.5;\r
+}\r
+\r
+.hw-process-title {\r
+  font-size: 12px;\r
+  font-weight: 700;\r
+  text-transform: uppercase;\r
+  letter-spacing: 0.05em;\r
+  color: var(--hw-text-primary);\r
+  margin: 24px 0 12px 0;\r
+  padding-bottom: 6px;\r
+  border-bottom: 1px solid var(--hw-border-glass);\r
+  line-height: 1.4;\r
+  display: flex;\r
+  align-items: center;\r
+  gap: 8px;\r
+}\r
+\r
+.hw-process-title:first-of-type {\r
+  margin-top: 0;\r
+}\r
+\r
+.hw-process-title::before {\r
+  content: "";\r
+  display: inline-block;\r
+  width: 4px;\r
+  height: 12px;\r
+  background: var(--hw-accent);\r
+  border-radius: 2px;\r
+}\r
+\r
+.hw-step-header-left {\r
+  display: flex;\r
+  align-items: center;\r
+  gap: 10px;\r
+}\r
+\r
+.hw-step-number {\r
+  display: flex;\r
+  align-items: center;\r
+  justify-content: center;\r
+  width: 24px;\r
+  height: 24px;\r
+  border-radius: 50%;\r
+  background: var(--hw-accent);\r
+  color: #ffffff;\r
+  font-size: 11px;\r
+  font-weight: 700;\r
+  box-shadow: 0 0 8px var(--hw-accent-glow);\r
+  flex-shrink: 0;\r
+}\r
+\r
+.hw-step-title {\r
+  font-size: 13px;\r
+  font-weight: 600;\r
+  color: var(--hw-text-primary);\r
+  line-height: 1.4;\r
+}\r
+\r
+.hw-step-desc {\r
+  margin: 0 0 12px 0;\r
+  font-size: 12px;\r
+  line-height: 1.6;\r
+  color: var(--hw-text-secondary);\r
+}\r
+\r
+.hw-step-images-list {\r
+  display: flex;\r
+  flex-direction: column;\r
+  gap: 12px;\r
+  margin-top: 12px;\r
+}\r
+\r
+.hw-step-image-wrap {\r
+  border: 2px solid #0ea5e9;\r
+  border-radius: 12px;\r
+  padding: 4px;\r
+  background: rgba(14, 165, 233, 0.04);\r
+  box-shadow: 0 0 12px rgba(14, 165, 233, 0.2);\r
+  overflow: hidden;\r
+  transition: transform 0.2s, box-shadow 0.2s;\r
+}\r
+\r
+.hw-step-image-wrap:hover {\r
+  transform: scale(1.01);\r
+  box-shadow: 0 0 16px rgba(14, 165, 233, 0.35);\r
+}\r
+\r
+.hw-step-img {\r
+  width: 100%;\r
+  height: auto;\r
+  display: block;\r
+  border-radius: 8px;\r
+  object-fit: contain;\r
+  cursor: zoom-in;\r
+}\r
+\r
+.hw-step-note {\r
+  display: flex;\r
+  gap: 8px;\r
+  background: rgba(59, 130, 246, 0.08);\r
+  border: 1px solid rgba(59, 130, 246, 0.2);\r
+  border-radius: 8px;\r
+  padding: 10px 12px;\r
+  margin-top: 12px;\r
+  align-items: flex-start;\r
+  box-sizing: border-box;\r
+}\r
+\r
+.hw-note-icon {\r
+  color: #3b82f6;\r
+  flex-shrink: 0;\r
+  margin-top: 2px;\r
+}\r
+\r
+.hw-note-desc {\r
+  margin: 0;\r
+  font-size: 11px;\r
+  line-height: 1.5;\r
+  color: var(--hw-text-secondary);\r
+  text-align: left;\r
+}\r
+\r
+.hw-step-important {\r
+  display: flex;\r
+  gap: 8px;\r
+  background: rgba(245, 158, 11, 0.08);\r
+  border: 1px solid rgba(245, 158, 11, 0.2);\r
+  border-radius: 8px;\r
+  padding: 10px 12px;\r
+  margin-top: 12px;\r
+  align-items: flex-start;\r
+  box-sizing: border-box;\r
+  text-align: left;\r
+}\r
+\r
+.hw-important-icon {\r
+  color: #f59e0b;\r
+  flex-shrink: 0;\r
+  margin-top: 2px;\r
+}\r
+\r
+.hw-important-title {\r
+  margin: 0 0 2px 0;\r
+  font-size: 11px;\r
+  font-weight: 700;\r
+  color: #f59e0b;\r
+}\r
+\r
+.hw-important-desc {\r
+  margin: 0;\r
+  font-size: 11px;\r
+  line-height: 1.5;\r
+  color: var(--hw-text-secondary);\r
+}\r
+\r
+/* Support & Feedback Form */\r
+.hw-field {\r
+  margin-bottom: 16px;\r
+}\r
+\r
+.hw-label {\r
+  display: block;\r
+  font-size: 11px;\r
+  font-weight: 600;\r
+  color: var(--hw-text-secondary);\r
+  text-transform: uppercase;\r
+  letter-spacing: 0.05em;\r
+  margin-bottom: 6px;\r
+}\r
+\r
+.hw-input,\r
+.hw-textarea,\r
+.hw-select {\r
+  width: 100%;\r
+  padding: 10px 12px;\r
+  border-radius: 8px;\r
+  font-size: 13px;\r
+  background: var(--hw-input-bg);\r
+  border: 1px solid var(--hw-input-border);\r
+  color: var(--hw-text-primary);\r
+  outline: none;\r
+  box-sizing: border-box;\r
+  transition: all 0.2s;\r
+}\r
+\r
+.hw-input:focus,\r
+.hw-textarea:focus,\r
+.hw-select:focus {\r
+  border-color: var(--hw-input-focus);\r
+  box-shadow: 0 0 0 2px var(--hw-accent-glow);\r
+}\r
+\r
+.hw-textarea {\r
+  resize: vertical;\r
+  min-height: 90px;\r
+}\r
+\r
+.hw-select option {\r
+  background: var(--hw-bg-sidebar);\r
+  color: var(--hw-text-primary);\r
+}\r
+\r
+/* Upload Zone */\r
+.hw-upload-zone {\r
+  width: 100%;\r
+  border-radius: 8px;\r
+  box-sizing: border-box;\r
+  border: 1px dashed var(--hw-input-border);\r
+  display: flex;\r
+  flex-direction: column;\r
+  align-items: center;\r
+  gap: 6px;\r
+  padding: 16px 12px;\r
+  transition: all 0.2s;\r
+  cursor: pointer;\r
+}\r
+\r
+.hw-upload-zone.dragover {\r
+  border-color: var(--hw-accent);\r
+  background: var(--hw-accent-glow);\r
+}\r
+\r
+.hw-upload-zone svg {\r
+  color: var(--hw-text-muted);\r
+}\r
+\r
+.hw-upload-hint {\r
+  font-size: 12px;\r
+  color: var(--hw-text-secondary);\r
+  margin: 0;\r
+  text-align: center;\r
+}\r
+\r
+.hw-upload-sub {\r
+  font-size: 10px;\r
+  color: var(--hw-text-muted);\r
+  margin: 0;\r
+}\r
+\r
+.hw-upload-actions {\r
+  display: flex;\r
+  gap: 6px;\r
+  margin-top: 4px;\r
+}\r
+\r
+.hw-btn-paste,\r
+.hw-btn-browse {\r
+  display: flex;\r
+  align-items: center;\r
+  gap: 5px;\r
+  padding: 4px 10px;\r
+  border-radius: 6px;\r
+  font-size: 11px;\r
+  font-weight: 600;\r
+  cursor: pointer;\r
+  border: 1px solid var(--hw-input-border);\r
+  background: var(--hw-surface);\r
+  color: var(--hw-text-secondary);\r
+  transition: all 0.15s;\r
+}\r
+\r
+.hw-btn-paste:hover,\r
+.hw-btn-browse:hover {\r
+  background: var(--hw-surface-hover);\r
+  color: var(--hw-text-primary);\r
+}\r
+\r
+.hw-file-input {\r
+  display: none;\r
+}\r
+\r
+.hw-preview-wrap {\r
+  position: relative;\r
+}\r
+\r
+.hw-preview-img {\r
+  width: 100%;\r
+  max-height: 120px;\r
+  object-fit: cover;\r
+  border-radius: 8px;\r
+  border: 1px solid var(--hw-input-border);\r
+  display: block;\r
+  cursor: zoom-in;\r
+}\r
+\r
+.hw-preview-remove {\r
+  position: absolute;\r
+  top: 6px;\r
+  right: 6px;\r
+  background: rgba(0, 0, 0, 0.7);\r
+  border: none;\r
+  border-radius: 6px;\r
+  color: #ef4444;\r
+  cursor: pointer;\r
+  padding: 3px 6px;\r
+  font-size: 10px;\r
+  font-weight: 700;\r
+  transition: background 0.15s;\r
+}\r
+\r
+.hw-preview-remove:hover {\r
+  background: rgba(0, 0, 0, 0.9);\r
+}\r
+\r
+.hw-preview-name {\r
+  font-size: 11px;\r
+  color: var(--hw-text-muted);\r
+  margin-top: 4px;\r
+  text-align: center;\r
+  text-overflow: ellipsis;\r
+  overflow: hidden;\r
+  white-space: nowrap;\r
+}\r
+\r
+/* Submit button */\r
+.hw-btn-submit {\r
+  width: 100%;\r
+  padding: 11px;\r
+  border-radius: 8px;\r
+  font-size: 13px;\r
+  font-weight: 700;\r
+  background: var(--hw-accent);\r
+  border: none;\r
+  color: #ffffff;\r
+  cursor: pointer;\r
+  transition: all 0.2s;\r
+  box-shadow: 0 4px 12px var(--hw-accent-glow);\r
+}\r
+\r
+.hw-btn-submit:hover {\r
+  background: var(--hw-accent-hover);\r
+  box-shadow: 0 4px 18px var(--hw-accent-glow);\r
+  transform: translateY(-1px);\r
+}\r
+\r
+.hw-btn-submit:disabled {\r
+  opacity: 0.5;\r
+  cursor: not-allowed;\r
+  transform: none;\r
+  box-shadow: none;\r
+}\r
+\r
+/* Status Notifications */\r
+.hw-status-msg {\r
+  padding: 10px;\r
+  border-radius: 8px;\r
+  font-size: 12px;\r
+  font-weight: 500;\r
+  text-align: center;\r
+  margin-bottom: 12px;\r
+  animation: slideDown 0.2s ease;\r
+}\r
+\r
+@keyframes slideDown {\r
+  from {\r
+    transform: translateY(-8px);\r
+    opacity: 0;\r
+  }\r
+\r
+  to {\r
+    transform: translateY(0);\r
+    opacity: 1;\r
+  }\r
+}\r
+\r
+.hw-status-msg.success {\r
+  background: rgba(52, 211, 153, 0.15);\r
+  color: #34d399;\r
+  border: 1px solid rgba(52, 211, 153, 0.25);\r
+}\r
+\r
+.hw-status-msg.error {\r
+  background: rgba(239, 68, 68, 0.15);\r
+  color: #f87171;\r
+  border: 1px solid rgba(239, 68, 68, 0.25);\r
+}\r
+\r
+/* Ticket Status Listing */\r
+.hw-ticket-list {\r
+  display: flex;\r
+  flex-direction: column;\r
+  gap: 10px;\r
+  flex: 1;\r
+}\r
+\r
+.hw-ticket-card {\r
+  background: rgba(255, 255, 255, 0.02);\r
+  border: 1px solid var(--hw-border-glass);\r
+  border-radius: 12px;\r
+  padding: 14px;\r
+  transition: all 0.2s;\r
+}\r
+\r
+.hw-ticket-card:hover {\r
+  border-color: var(--hw-border-glass);\r
+  background: rgba(255, 255, 255, 0.04);\r
+  transform: translateY(-1px);\r
+}\r
+\r
+.hw-ticket-card-header {\r
+  display: flex;\r
+  justify-content: space-between;\r
+  align-items: flex-start;\r
+  gap: 8px;\r
+  margin-bottom: 6px;\r
+}\r
+\r
+.hw-ticket-card-number {\r
+  font-size: 11px;\r
+  font-family: monospace;\r
+  color: var(--hw-text-muted);\r
+  font-weight: 600;\r
+}\r
+\r
+.hw-ticket-card-badge {\r
+  font-size: 10px;\r
+  font-weight: 700;\r
+  text-transform: uppercase;\r
+  padding: 2px 8px;\r
+  border-radius: 9999px;\r
+  letter-spacing: 0.05em;\r
+}\r
+\r
+.hw-badge-open {\r
+  color: var(--hw-color-open);\r
+  background: var(--hw-bg-open);\r
+}\r
+\r
+.hw-badge-progress {\r
+  color: var(--hw-color-progress);\r
+  background: var(--hw-bg-progress);\r
+}\r
+\r
+.hw-badge-pending {\r
+  color: var(--hw-color-pending);\r
+  background: var(--hw-bg-pending);\r
+}\r
+\r
+.hw-badge-resolved {\r
+  color: var(--hw-color-resolved);\r
+  background: var(--hw-bg-resolved);\r
+}\r
+\r
+.hw-badge-closed {\r
+  color: var(--hw-color-closed);\r
+  background: var(--hw-bg-closed);\r
+}\r
+\r
+.hw-ticket-card-subject {\r
+  font-size: 13px;\r
+  font-weight: 600;\r
+  color: var(--hw-text-primary);\r
+  margin: 0 0 6px 0;\r
+  line-height: 1.4;\r
+}\r
+\r
+.hw-ticket-card-footer {\r
+  display: flex;\r
+  justify-content: space-between;\r
+  font-size: 10px;\r
+  color: var(--hw-text-muted);\r
+}\r
+\r
+/* Utility Empty & Loader States */\r
+.hw-empty-state {\r
+  display: flex;\r
+  flex-direction: column;\r
+  align-items: center;\r
+  justify-content: center;\r
+  gap: 8px;\r
+  color: var(--hw-text-muted);\r
+  font-size: 12px;\r
+  text-align: center;\r
+  padding: 40px 20px;\r
+  flex: 1;\r
+}\r
+\r
+.hw-empty-state svg {\r
+  color: var(--hw-text-muted);\r
+  opacity: 0.5;\r
+}\r
+\r
+.hw-loader {\r
+  width: 24px;\r
+  height: 24px;\r
+  border: 2px solid var(--hw-border-glass);\r
+  border-top-color: var(--hw-accent);\r
+  border-radius: 50%;\r
+  animation: hw-spin 0.6s linear infinite;\r
+  margin: 40px auto;\r
+}\r
+\r
+@keyframes hw-spin {\r
+  to {\r
+    transform: rotate(360deg);\r
+  }\r
+}\r
+\r
+.hw-list-header {\r
+  display: flex;\r
+  justify-content: space-between;\r
+  align-items: center;\r
+  margin-bottom: 12px;\r
+}\r
+\r
+.hw-list-title {\r
+  font-size: 12px;\r
+  font-weight: 700;\r
+  text-transform: uppercase;\r
+  color: var(--hw-text-secondary);\r
+  letter-spacing: 0.05em;\r
+  margin: 0;\r
+}\r
+\r
+.hw-btn-refresh {\r
+  background: transparent;\r
+  border: none;\r
+  color: var(--hw-accent);\r
+  font-size: 11px;\r
+  font-weight: 600;\r
+  cursor: pointer;\r
+  display: flex;\r
+  align-items: center;\r
+  gap: 3px;\r
+  padding: 2px 6px;\r
+  border-radius: 4px;\r
+  transition: all 0.15s;\r
+}\r
+\r
+.hw-btn-refresh:hover {\r
+  background: var(--hw-surface);\r
+  color: var(--hw-accent-hover);\r
+}\r
+\r
+/* Lightbox Fullscreen Modal Overlay */\r
+.hw-lightbox {\r
+  position: fixed;\r
+  top: 0;\r
+  left: 0;\r
+  width: 100vw;\r
+  height: 100vh;\r
+  background: rgba(4, 7, 13, 0.88);\r
+  backdrop-filter: blur(8px);\r
+  -webkit-backdrop-filter: blur(8px);\r
+  z-index: 1000000;\r
+  display: flex;\r
+  align-items: center;\r
+  justify-content: center;\r
+  opacity: 0;\r
+  pointer-events: none;\r
+  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r
+}\r
+\r
+.hw-lightbox.open {\r
+  opacity: 1;\r
+  pointer-events: auto;\r
+}\r
+\r
+.hw-lightbox-img {\r
+  max-width: 90%;\r
+  max-height: 85%;\r
+  object-fit: contain;\r
+  border-radius: 12px;\r
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);\r
+  border: 1px solid rgba(255, 255, 255, 0.1);\r
+  transform: scale(0.95);\r
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r
+  background: #000;\r
+}\r
+\r
+.hw-lightbox.open .hw-lightbox-img {\r
+  transform: scale(1);\r
+}\r
+\r
+.hw-lightbox-close {\r
+  position: absolute;\r
+  top: 24px;\r
+  right: 24px;\r
+  background: rgba(255, 255, 255, 0.08);\r
+  border: 1px solid rgba(255, 255, 255, 0.1);\r
+  border-radius: 50%;\r
+  width: 44px;\r
+  height: 44px;\r
+  color: #ffffff;\r
+  font-size: 22px;\r
+  cursor: pointer;\r
+  display: flex;\r
+  align-items: center;\r
+  justify-content: center;\r
+  transition: all 0.2s;\r
+  outline: none;\r
+}\r
+\r
+.hw-lightbox-close:hover {\r
+  background: rgba(255, 255, 255, 0.18);\r
+  transform: scale(1.05);\r
+  color: #f43f5e;\r
+}\r
+\r
+/* Ticket Comments Section styling */\r
+.hw-ticket-comments-section {\r
+  margin-top: 10px;\r
+  border-top: 1px solid var(--hw-border-glass);\r
+  padding-top: 10px;\r
+  width: 100%;\r
+}\r
+\r
+.hw-comments-toggle-btn {\r
+  display: flex;\r
+  align-items: center;\r
+  gap: 6px;\r
+  background: transparent;\r
+  border: none;\r
+  color: var(--hw-text-secondary);\r
+  font-size: 11px;\r
+  font-weight: 600;\r
+  cursor: pointer;\r
+  padding: 4px 8px;\r
+  border-radius: 6px;\r
+  transition: all 0.2s ease;\r
+  width: fit-content;\r
+}\r
+\r
+.hw-comments-toggle-btn:hover {\r
+  background: var(--hw-surface);\r
+  color: var(--hw-text-primary);\r
+}\r
+\r
+.hw-comments-toggle-chevron {\r
+  font-size: 9px;\r
+  color: var(--hw-text-muted);\r
+  transition: transform 0.25s ease;\r
+  margin-left: 2px;\r
+}\r
+\r
+.hw-comments-toggle-btn.open .hw-comments-toggle-chevron {\r
+  transform: rotate(180deg);\r
+}\r
+\r
+.hw-comments-list-wrapper {\r
+  max-height: 0;\r
+  overflow: hidden;\r
+  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);\r
+}\r
+\r
+.hw-comments-list {\r
+  display: flex;\r
+  flex-direction: column;\r
+  gap: 8px;\r
+  padding: 8px 4px 4px 4px;\r
+}\r
+\r
+.hw-comment-item {\r
+  background: rgba(255, 255, 255, 0.015);\r
+  border: 1px solid var(--hw-border-glass);\r
+  border-radius: 8px;\r
+  padding: 10px;\r
+  box-sizing: border-box;\r
+}\r
+\r
+/* Highlights the staff's response with accent color */\r
+.hw-comment-item.staff {\r
+  background: rgba(93, 79, 255, 0.04);\r
+  border-left: 3px solid var(--hw-accent);\r
+}\r
+\r
+.hw-comment-meta {\r
+  display: flex;\r
+  justify-content: space-between;\r
+  align-items: center;\r
+  margin-bottom: 6px;\r
+  font-size: 10px;\r
+}\r
+\r
+.hw-comment-author {\r
+  font-weight: 700;\r
+  color: var(--hw-text-primary);\r
+  display: flex;\r
+  align-items: center;\r
+  gap: 6px;\r
+}\r
+\r
+.hw-comment-staff-badge {\r
+  background: var(--hw-accent);\r
+  color: #ffffff;\r
+  font-size: 8px;\r
+  padding: 1px 5px;\r
+  border-radius: 4px;\r
+  text-transform: uppercase;\r
+  font-weight: 800;\r
+  letter-spacing: 0.03em;\r
+}\r
+\r
+.hw-comment-date {\r
+  color: var(--hw-text-muted);\r
+}\r
+\r
+.hw-comment-text {\r
+  margin: 0;\r
+  font-size: 11px;\r
+  line-height: 1.5;\r
+  color: var(--hw-text-secondary);\r
+  word-break: break-word;\r
+}`});var S={};z(S,{HelpSidebarWidgetElement:()=>x});var M,x,y=E(()=>{"use strict";_();M=`
+  <button class="hw-trigger-btn" id="hw-trigger-btn" title="Open Help & Support" aria-label="Help and Support">
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10"/>
+      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+      <line x1="12" y1="17" x2="12.01" y2="17"/>
+    </svg>
+  </button>
+
+  <div class="hw-backdrop" id="hw-backdrop"></div>
+
+  <div class="hw-lightbox" id="hw-lightbox">
+    <button class="hw-lightbox-close" id="hw-lightbox-close" aria-label="Close image preview">\u2715</button>
+    <img class="hw-lightbox-img" id="hw-lightbox-img" src="" alt="Enlarged screenshot" />
+  </div>
+
+  <div class="hw-sidebar" id="hw-sidebar">
+    <div class="hw-header">
+      <h2 class="hw-header-title">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <circle cx="12" cy="12" r="10"/>
+          <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+          <line x1="12" y1="17" x2="12.01" y2="17"/>
+        </svg>
+        Help & Support
+      </h2>
+      <button class="hw-close-btn" id="hw-close-btn" aria-label="Close sidebar">\u2715</button>
+    </div>
+
+    <div class="hw-tabs">
+      <button class="hw-tab-btn active" data-tab="guide">Help Guide</button>
+      <button class="hw-tab-btn" data-tab="feedback">Support & Feedback</button>
+      <button class="hw-tab-btn" data-tab="status">Ticket Status</button>
+    </div>
+
+    <div class="hw-body">
+      <!-- 1. HELP GUIDE PANEL -->
+      <div class="hw-tab-panel active" id="hw-panel-guide">
+        <div id="hw-guide-loading" class="hw-loader"></div>
+        <div id="hw-guide-container"></div>
+      </div>
+
+      <!-- 2. SUPPORT & FEEDBACK PANEL -->
+      <div class="hw-tab-panel" id="hw-panel-feedback">
+        <div id="hw-form-status" style="display:none"></div>
+
+        <div class="hw-field">
+          <label class="hw-label" for="hw-name">Full Name *</label>
+          <input class="hw-input" id="hw-name" type="text" placeholder="Your name" required />
+        </div>
+
+        <div class="hw-field">
+          <label class="hw-label" for="hw-email">Email Address *</label>
+          <input class="hw-input" id="hw-email" type="email" placeholder="your.email@domain.com" required />
+        </div>
+
+        <div id="hw-custom-fields-container"></div>
+
+        <div class="hw-field">
+          <label class="hw-label" for="hw-subject">Subject *</label>
+          <input class="hw-input" id="hw-subject" type="text" placeholder="Brief summary of your request" required />
+        </div>
+
+        <div class="hw-field">
+          <label class="hw-label" for="hw-category">Category *</label>
+          <select class="hw-select" id="hw-category">
+            <option value="bug">Bug Report \u{1F41B}</option>
+            <option value="feature">Feature Request \u{1F4A1}</option>
+            <option value="support">General Support \u2754</option>
+            <option value="other">Other \u{1F4DD}</option>
+          </select>
+        </div>
+
+        <div class="hw-field">
+          <label class="hw-label" for="hw-description">Description *</label>
+          <textarea class="hw-textarea" id="hw-description" placeholder="Describe your request in detail..." required></textarea>
+        </div>
+
+        <div class="hw-field">
+          <label class="hw-label">Screenshot (optional)</label>
+          <input class="hw-file-input" id="hw-file" type="file" accept="image/*" />
+          <div class="hw-upload-zone" id="hw-upload-zone" tabindex="0">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <rect x="3" y="3" width="18" height="18" rx="2"/>
+              <circle cx="8.5" cy="8.5" r="1.5"/>
+              <polyline points="21 15 16 10 5 21"/>
+            </svg>
+            <p class="hw-upload-hint">Drag & drop image here, or paste</p>
+            <p class="hw-upload-sub">PNG, JPG, GIF up to 10MB</p>
+            <div class="hw-upload-actions">
+              <button class="hw-btn-paste" id="hw-paste-btn" type="button">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                  <rect x="8" y="2" width="8" height="4" rx="1"/>
+                  <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
+                </svg>
+                Paste (Ctrl+V)
+              </button>
+              <button class="hw-btn-browse" id="hw-browse-btn" type="button">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                  <polyline points="17 8 12 3 7 8"/>
+                  <line x1="12" y1="3" x2="12" y2="15"/>
+                </svg>
+                Browse
+              </button>
+            </div>
+          </div>
+          <div id="hw-preview" style="display:none"></div>
+        </div>
+
+        <div style="margin-top:auto; padding-top:16px;">
+          <button class="hw-btn-submit" id="hw-submit-btn">Submit Request</button>
+        </div>
+      </div>
+
+      <!-- 3. TICKET STATUS PANEL -->
+      <div class="hw-tab-panel" id="hw-panel-status">
+        <div class="hw-list-header">
+          <h3 class="hw-list-title">Your Submitted Tickets</h3>
+          <button class="hw-btn-refresh" id="hw-refresh-btn" type="button">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/>
+            </svg>
+            Refresh Status
+          </button>
+        </div>
+        
+        <div id="hw-tickets-loading" class="hw-loader" style="display:none"></div>
+        <div class="hw-ticket-list" id="hw-ticket-list"></div>
+      </div>
+    </div>
+  </div>
+`,x=class extends HTMLElement{constructor(){super();this._screenshotFile=null;this._guideData=null;this._customFields=[];this._shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["user-name","user-email","button-style","theme","user-role","custom-fields"]}get userRole(){return this.getAttribute("user-role")||""}set userRole(e){this.setAttribute("user-role",e)}get customFields(){return this._customFields}set customFields(e){typeof e=="string"?this._parseCustomFieldsAttribute(e):Array.isArray(e)?this._customFields=e:this._customFields=[],this._renderCustomFields()}_parseCustomFieldsAttribute(e){if(e)try{let i=JSON.parse(e);Array.isArray(i)&&(this._customFields=i)}catch(i){console.warn("Failed to parse custom-fields attribute JSON:",i)}}_getCustomFieldsList(){if(this._customFields&&this._customFields.length>0)return this._customFields;let e=this.getAttribute("custom-fields");if(e)try{let i=JSON.parse(e);if(Array.isArray(i))return i}catch{}return[]}_renderCustomFields(){let e=this._shadow?.getElementById("hw-custom-fields-container");if(!e)return;let i={};e.querySelectorAll(".hw-custom-input").forEach(c=>{let o=c.dataset.customId;o&&c.value&&(i[o]=c.value)});let a=this._getCustomFieldsList();if(!a||a.length===0){e.innerHTML="";return}let n="";a.forEach(c=>{let o=`hw-custom-${c.id}`,r=c.required?" *":"",p=c.required?"required":"",s=c.type||"text",h=c.placeholder||"",l=i[c.id]!==void 0?i[c.id]:c.defaultValue||"";s==="textarea"?n+=`
+          <div class="hw-field">
+            <label class="hw-label" for="${o}">${c.label}${r}</label>
+            <textarea
+              class="hw-textarea hw-custom-input"
+              data-custom-id="${c.id}"
+              id="${o}"
+              placeholder="${h}"
+              ${p}
+            >${l}</textarea>
+          </div>
+        `:n+=`
+          <div class="hw-field">
+            <label class="hw-label" for="${o}">${c.label}${r}</label>
+            <input
+              class="hw-input hw-custom-input"
+              data-custom-id="${c.id}"
+              id="${o}"
+              type="${s}"
+              placeholder="${h}"
+              value="${l}"
+              ${p}
+            />
+          </div>
+        `}),e.innerHTML=n}attributeChangedCallback(e,i,t){if(this._shadow){if(e==="user-name"){let a=this._shadow.getElementById("hw-name");a&&(a.value=t||"")}if(e==="user-email"){let a=this._shadow.getElementById("hw-email");a&&(a.value=t||"")}e==="user-role"&&this._guideData&&this._renderHelpGuide(this._guideData),e==="custom-fields"&&(this._parseCustomFieldsAttribute(t),this._renderCustomFields())}}connectedCallback(){if(this._shadow.innerHTML=`<style>${L}</style>${M}`,!document.getElementById("hw-font-link")){let t=document.createElement("link");t.id="hw-font-link",t.rel="stylesheet",t.href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",document.head.appendChild(t)}this._applyAttributes(),this._bindEvents(),this._parseCustomFieldsAttribute(this.getAttribute("custom-fields")),this._renderCustomFields();let e=this.getAttribute("user-name");if(e){let t=this._shadow.getElementById("hw-name");t&&(t.value=e)}let i=this.getAttribute("user-email");if(i){let t=this._shadow.getElementById("hw-email");t&&(t.value=i)}this._loadLocalHelpGuide()}_applyAttributes(){let e=this._shadow.getElementById("hw-trigger-btn");if(!e)return;let i=this.getAttribute("button-style");i==="minimal"?e.classList.add("minimal"):i==="hidden"&&e.classList.add("hidden")}_bindEvents(){let e=this._shadow;e.getElementById("hw-trigger-btn")?.addEventListener("click",()=>this.openSidebar()),e.getElementById("hw-close-btn")?.addEventListener("click",()=>this.closeSidebar()),e.getElementById("hw-backdrop")?.addEventListener("click",()=>this.closeSidebar());let i=e.querySelectorAll(".hw-tab-btn");i.forEach(r=>{r.addEventListener("click",()=>{i.forEach(h=>h.classList.remove("active")),e.querySelectorAll(".hw-tab-panel").forEach(h=>h.classList.remove("active")),r.classList.add("active");let p=r,s=`hw-panel-${p.dataset.tab}`;e.getElementById(s)?.classList.add("active"),p.dataset.tab==="status"&&this._loadTicketsStatus()})});let t=e.getElementById("hw-guide-container");t&&t.addEventListener("click",r=>{let s=r.target.closest(".hw-faq-header");if(!s)return;let h=s.parentElement;if(!h)return;let l=h.querySelector(".hw-faq-content");if(!l)return;let u=h.classList.contains("open");t.querySelectorAll(".hw-faq-item").forEach(d=>{d.classList.remove("open");let g=d.querySelector(".hw-faq-content");g&&(g.style.maxHeight="0px")}),u||(h.classList.add("open"),l.style.maxHeight=l.scrollHeight+"px")});let a=e.getElementById("hw-file");e.getElementById("hw-browse-btn")?.addEventListener("click",r=>{r.stopPropagation(),a?.click()}),a?.addEventListener("change",()=>{a.files&&a.files[0]&&this._handleFile(a.files[0])}),e.getElementById("hw-paste-btn")?.addEventListener("click",r=>{r.stopPropagation(),this._pasteFromClipboard()}),e.getElementById("hw-sidebar")?.addEventListener("paste",r=>{let p=r.clipboardData?.items||[];for(let s of p)if(s.type.startsWith("image/")){let h=s.getAsFile();if(h){this._handleFile(h);break}}});let n=e.getElementById("hw-upload-zone");n?.addEventListener("dragover",r=>{r.preventDefault(),n.classList.add("dragover")}),n?.addEventListener("dragleave",()=>n.classList.remove("dragover")),n?.addEventListener("drop",r=>{r.preventDefault(),n.classList.remove("dragover");let p=r.dataTransfer.files[0];p&&p.type.startsWith("image/")&&this._handleFile(p)}),e.getElementById("hw-submit-btn")?.addEventListener("click",()=>this._submitTicket()),e.getElementById("hw-refresh-btn")?.addEventListener("click",()=>this._loadTicketsStatus());let c=e.getElementById("hw-ticket-list");c&&c.addEventListener("click",r=>{let s=r.target.closest(".hw-comments-toggle-btn");if(!s)return;let h=s.dataset.ticket,l=c.querySelector(`#comments-list-${h}`);if(!l)return;s.classList.contains("open")?(s.classList.remove("open"),l.style.maxHeight="0px"):(s.classList.add("open"),l.style.maxHeight=l.scrollHeight+"px")}),t&&t.addEventListener("click",r=>{let p=r.target;if(p.classList.contains("hw-step-img")){let s=p.src;this._openLightbox(s)}});let o=e.getElementById("hw-preview");o&&o.addEventListener("click",r=>{let p=r.target;if(p.classList.contains("hw-preview-img")){let s=p.src;this._openLightbox(s)}}),e.getElementById("hw-lightbox-close")?.addEventListener("click",()=>this._closeLightbox()),e.getElementById("hw-lightbox")?.addEventListener("click",r=>{r.target===e.getElementById("hw-lightbox")&&this._closeLightbox()})}openSidebar(){this._shadow.getElementById("hw-sidebar")?.classList.add("open"),this._shadow.getElementById("hw-backdrop")?.classList.add("open")}closeSidebar(){this._shadow.getElementById("hw-sidebar")?.classList.remove("open"),this._shadow.getElementById("hw-backdrop")?.classList.remove("open"),this._hideStatus()}_openLightbox(e){let i=this._shadow.getElementById("hw-lightbox"),t=this._shadow.getElementById("hw-lightbox-img");i&&t&&(t.src=e,i.classList.add("open"))}_closeLightbox(){let e=this._shadow.getElementById("hw-lightbox");e&&e.classList.remove("open")}async _pasteFromClipboard(){try{let e=await navigator.clipboard.read();for(let i of e){let t=i.types.find(a=>a.startsWith("image/"));if(t){let a=await i.getType(t);this._handleFile(new File([a],"screenshot.png",{type:t}));return}}this._showStatus("No image found in clipboard. Copy a screenshot first, then paste.","error")}catch{this._showStatus("Press Ctrl+V inside this sidebar to paste a screenshot.","error")}}_handleFile(e){if(!e.type.startsWith("image/")){this._showStatus("Please upload an image file (PNG, JPG, GIF).","error");return}if(e.size>10*1024*1024){this._showStatus("Screenshot must be smaller than 10MB.","error");return}this._screenshotFile=e,this._hideStatus();let i=URL.createObjectURL(e),t=this._shadow.getElementById("hw-upload-zone"),a=this._shadow.getElementById("hw-preview");t&&(t.style.display="none"),a&&(a.style.display="block",a.innerHTML=`
+        <div class="hw-preview-wrap">
+          <img class="hw-preview-img" src="${i}" alt="Screenshot preview" />
+          <button class="hw-preview-remove" id="hw-remove-ss-btn" type="button">\u2715 Remove</button>
+        </div>
+        <p class="hw-preview-name">${e.name}</p>
+      `,a.querySelector("#hw-remove-ss-btn")?.addEventListener("click",()=>this._removeFile()))}_removeFile(){this._screenshotFile=null;let e=this._shadow.getElementById("hw-file");e&&(e.value="");let i=this._shadow.getElementById("hw-upload-zone");i&&(i.style.display="flex");let t=this._shadow.getElementById("hw-preview");t&&(t.style.display="none",t.innerHTML="")}_resetForm(){let e=this._shadow.getElementById("hw-name"),i=this._shadow.getElementById("hw-email"),t=this._shadow.getElementById("hw-subject"),a=this._shadow.getElementById("hw-description"),n=this._shadow.getElementById("hw-category");e&&(e.value=""),i&&(i.value=""),t&&(t.value=""),a&&(a.value=""),n&&(n.value="bug"),this._shadow.querySelectorAll(".hw-custom-input").forEach(r=>{r.value=""}),this._removeFile(),this._hideStatus();let o=this._shadow.getElementById("hw-submit-btn");o&&(o.disabled=!1,o.textContent="Submit Request")}async _submitTicket(){let e=this._shadow.getElementById("hw-name")?.value.trim()||"",i=this._shadow.getElementById("hw-email")?.value.trim()||"",t=this._shadow.getElementById("hw-subject")?.value.trim()||"",a=this._shadow.getElementById("hw-description")?.value.trim()||"",n=this._shadow.getElementById("hw-category")?.value||"bug";if(!e||!i||!t||!a){this._showStatus("Please fill in all required fields.","error");return}let c=this._getCustomFieldsList(),o={};for(let u of c){let d=this._shadow.querySelector(`[data-custom-id="${u.id}"]`),g=d?d.value.trim():"";if(u.required&&!g){this._showStatus(`Please fill in required field: ${u.label}`,"error");return}g&&(o[u.id]=g)}let r=(this.getAttribute("base-url")||"").replace(/\/$/,""),p=this.getAttribute("embed-key")||"";if(!r||!p){this._showStatus("Widget is misconfigured. Missing base-url or embed-key.","error");return}let s=this._shadow.getElementById("hw-submit-btn");s&&(s.disabled=!0,s.textContent="Submitting Request...");let h=a;if(Object.keys(o).length>0){let u=c.filter(d=>o[d.id]).map(d=>`${d.label}: ${o[d.id]}`);u.length>0&&(h+=`
+
+--- Additional Information ---
+`+u.join(`
+`))}let l=new FormData;if(l.append("submitter_name",e),l.append("submitter_email",i),l.append("subject",t),l.append("description",h),l.append("category",n),l.append("embed_key",p),l.append("source_url",window.location.href),l.append("browser_metadata",JSON.stringify({userAgent:navigator.userAgent,resolution:`${screen.width}x${screen.height}`,viewport:`${window.innerWidth}x${window.innerHeight}`,language:navigator.language})),Object.keys(o).length>0){l.append("custom_fields",JSON.stringify(o));for(let[u,d]of Object.entries(o))l.append(u,d)}this._screenshotFile&&l.append("screenshot",this._screenshotFile,this._screenshotFile.name);try{let u=await fetch(`${r}/api/tickets/widget-submit/`,{method:"POST",body:l});if(u.ok)this._showStatus("Support request submitted successfully!","success"),setTimeout(()=>{this._resetForm();let d=this._shadow.querySelector('.hw-tab-btn[data-tab="status"]');d&&d.click()},1800);else{let d=await u.json().catch(()=>({}));this._showStatus(d.detail||d.error||"Failed to submit request. Please try again.","error"),s&&(s.disabled=!1,s.textContent="Submit Request")}}catch(u){console.error("Error submitting support request:",u),this._showStatus("Network error. Please check your internet connection.","error"),s&&(s.disabled=!1,s.textContent="Submit Request")}}async _loadTicketsStatus(){let e=(this.getAttribute("base-url")||"").replace(/\/$/,""),i=this.getAttribute("embed-key")||"",t=this._shadow.getElementById("hw-ticket-list"),a=this._shadow.getElementById("hw-tickets-loading");if(t){if(!e||!i){t.innerHTML='<div class="hw-empty-state">Widget configuration error (missing URL or key)</div>';return}a&&(a.style.display="block"),t.style.opacity="0.5";try{let n=await fetch(`${e}/api/tickets/widget-status/`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({embed_key:i})});if(n.ok){let c=await n.json(),r=(c.data||c).tickets||[];if(r.length===0){t.innerHTML=`
+            <div class="hw-empty-state">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                <path d="M12 8v4"/>
+                <path d="M12 16h.01"/>
+              </svg>
+              <p style="margin: 0; font-weight:600;">No support tickets yet</p>
+              <p style="margin: 0; font-size:11px;">Any bug reports or tickets you or your teammates submit will appear here to let everyone track their real-time progress.</p>
+            </div>
+          `;return}let p="";r.forEach(s=>{let h=s.status||"open",l=s.ticket_number||"TKT-PENDING",u=new Date(s.created_at).toLocaleDateString(void 0,{month:"short",day:"numeric",year:"numeric"}),d="hw-badge-open";h==="in_progress"?d="hw-badge-progress":h==="pending"?d="hw-badge-pending":h==="resolved"?d="hw-badge-resolved":h==="closed"&&(d="hw-badge-closed");let g="",w=s.comments||[];w.length>0&&(g+=`
+              <div class="hw-ticket-comments-section">
+                <button class="hw-comments-toggle-btn" data-ticket="${l}">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="margin-right: 4px;">
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                  </svg>
+                  <span>Replies (${w.length})</span>
+                  <span class="hw-comments-toggle-chevron">\u25BC</span>
+                </button>
+                <div class="hw-comments-list-wrapper" id="comments-list-${l}" style="max-height: 0px;">
+                  <div class="hw-comments-list">
+            `,w.forEach(f=>{let v=new Date(f.created_at).toLocaleDateString(void 0,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"}),k=f.is_staff||!1,T=k?"hw-comment-item staff":"hw-comment-item",H=k?'<span class="hw-comment-staff-badge">Staff</span>':"";g+=`
+                    <div class="${T}">
+                      <div class="hw-comment-meta">
+                        <span class="hw-comment-author">${f.author_name||"Anonymous"} ${H}</span>
+                        <span class="hw-comment-date">${v}</span>
+                      </div>
+                      <p class="hw-comment-text">${f.content}</p>
+                    </div>
+              `}),g+=`
+                  </div>
+                </div>
+              </div>
+            `),p+=`
+            <div class="hw-ticket-card">
+              <div class="hw-ticket-card-header">
+                <span class="hw-ticket-card-number">${l}</span>
+                <span class="hw-ticket-card-badge ${d}">${h.replace("_"," ")}</span>
+              </div>
+              <h4 class="hw-ticket-card-subject">${s.subject||"No Subject"}</h4>
+              <div class="hw-ticket-card-footer" style="flex-direction: column; align-items: flex-start; gap: 4px;">
+                <div style="display: flex; justify-content: space-between; width: 100%;">
+                  <span>Category: ${s.category.toUpperCase()}</span>
+                  <span>${u}</span>
+                </div>
+                <div style="font-size: 11px; color: #888; display: flex; align-items: center; gap: 4px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 4px; width: 100%;">
+                  <span>\u{1F464} By: <strong>${s.submitter_name||"Anonymous"}</strong> (${s.submitter_email||"no-email"})</span>
+                </div>
+              </div>
+              ${g}
+            </div>
+          `}),t.innerHTML=p}else throw new Error("Server status fetch failed")}catch(n){console.error("Failed to pull live ticket status:",n),t.innerHTML=`
+        <div class="hw-empty-state">
+          <p style="margin: 0; font-weight:600; color: #f43f5e;">Failed to load tickets</p>
+          <p style="margin: 0; font-size:11px;">A connection error occurred. Click "Refresh Status" to retry.</p>
+        </div>
+      `}finally{a&&(a.style.display="none"),t.style.opacity="1"}}}_showStatus(e,i){let t=this._shadow.getElementById("hw-form-status");t&&(t.textContent=e,t.className=`hw-status-msg ${i}`,t.style.display="block")}_hideStatus(){let e=this._shadow.getElementById("hw-form-status");e&&(e.style.display="none")}async _loadLocalHelpGuide(){let e=this._shadow.getElementById("hw-guide-container"),i=this._shadow.getElementById("hw-guide-loading"),t=this.getAttribute("guide-url")||"/help-guide.json";try{let a=await fetch(t);if(a.ok){let n=await a.json();this._guideData=n,this._renderHelpGuide(n)}else throw new Error("Guide file not found")}catch{console.warn(`Dynamic help guide not found at ${t}. Falling back to default FAQs.`);let n=this._getDefaultHelpGuide();this._guideData=n,this._renderHelpGuide(n)}finally{i&&(i.style.display="none")}}_getDefaultHelpGuide(){return{processes:[{title:"Help Guide & FAQs",steps:[{step_number:1,title:"What is ThriveX AI Dashboard?",description:"ThriveX AI is an intelligent project workspace and agile issue tracking platform. You can manage tasks in Kanban boards, set priorities, assign developers, and aggregate support requests in one beautiful console."},{step_number:2,title:"How do I submit feedback / bugs?",description:"Click on the <strong>Support & Feedback</strong> tab in this sidebar, select your category, enter your subject and description, paste or attach an optional screenshot, and click submit."},{step_number:3,title:"How do I track my ticket status?",description:"Any ticket you submit from this browser will be listed under the <strong>Ticket Status</strong> tab. We use secure, unguessable ticket UUIDs saved locally to fetch live real-time statuses directly from the project server."},{step_number:4,title:"How do I invite members to my project?",description:"Go to the Workspace page inside the dashboard, select your project, click on <strong>Manage Members</strong> on the top-right, search for your team members by their username or email, and add them."}]}]}}_renderHelpGuide(e){let i=this._shadow.getElementById("hw-guide-container");if(!i)return;let t="",a=e.processes;if(!a&&e.steps&&(a=[{title:e.title||"Help Guide",steps:e.steps}]),!a||a.length===0){i.innerHTML='<div class="hw-empty-state">No guides available</div>';return}let n=(this.getAttribute("user-role")||"").trim().toLowerCase(),c=a.map(r=>{if(!(!(Array.isArray(r.roles)&&r.roles.length>0)||n&&r.roles.some(d=>typeof d=="string"&&d.trim().toLowerCase()===n)))return null;let h=r.steps||[],l=h.length,u=h.filter(d=>!(Array.isArray(d.roles)&&d.roles.length>0)||n&&d.roles.some(w=>typeof w=="string"&&w.trim().toLowerCase()===n));return l>0&&u.length===0?null:{...r,steps:u}}).filter(r=>r!==null);if(c.length===0){i.innerHTML='<div class="hw-empty-state">No guides available for your role</div>';return}let o=0;c.forEach(r=>{r.title&&(t+=`<h3 class="hw-process-title">${r.title}</h3>`),(r.steps||[]).forEach((s,h)=>{let l=s.step_number||s.number||h+1,u=o===0?"open":"",d=o===0?'style="max-height: 1000px;"':'style="max-height: 0px;"';o++;let g="";Array.isArray(s.images)&&s.images.length>0&&(g='<div class="hw-step-images-list">',s.images.forEach(v=>{g+=`
+              <div class="hw-step-image-wrap">
+                <img class="hw-step-img" src="${v}" alt="Step ${l} screenshot" />
+              </div>
+            `}),g+="</div>");let w="";s.note&&(w=`
+            <div class="hw-step-note flex gap-2">
+              <svg class="hw-note-icon text-blue-500" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #3b82f6;"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+              <p class="hw-note-desc">${s.note}</p>
+            </div>
+          `);let f="";s.importantNote&&(f=`
+            <div class="hw-step-important flex gap-2">
+              <svg class="hw-important-icon text-amber-500" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #f59e0b;"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+              <div>
+                <p class="hw-important-title">Important Note</p>
+                <p class="hw-important-desc">${s.importantNote}</p>
+              </div>
+            </div>
+          `),t+=`
+          <div class="hw-faq-item ${u}">
+            <div class="hw-faq-header">
+              <div class="hw-step-header-left">
+                <span class="hw-step-number">${l}</span>
+                <span class="hw-step-title">${s.title}</span>
+              </div>
+              <span class="hw-faq-icon">\u25BC</span>
+            </div>
+            <div class="hw-faq-content" ${d}>
+              <div class="hw-faq-inner">
+                <p class="hw-step-desc">${s.description}</p>
+                ${g}
+                ${w}
+                ${f}
+              </div>
+            </div>
+          </div>
+        `})}),i.innerHTML=t}};typeof window<"u"&&!customElements.get("help-sidebar-widget")&&customElements.define("help-sidebar-widget",x)});import{useEffect as I,useRef as $,useState as A}from"react";import{jsx as C}from"react/jsx-runtime";function P({baseUrl:b,embedKey:m,theme:e="auto",buttonStyle:i="navbar",userName:t="",userEmail:a="",guideUrl:n="",userRole:c="",customFields:o}){let[r,p]=A(!1),s=$(null);return I(()=>{Promise.resolve().then(()=>(y(),S)).then(()=>{p(!0)})},[]),I(()=>{s.current&&o&&(s.current.customFields=o)},[r,o]),r?C("help-sidebar-widget",{ref:s,"base-url":b,"embed-key":m,theme:e,"button-style":i,"user-name":t,"user-email":a,"guide-url":n,"user-role":c,"custom-fields":o&&o.length>0?JSON.stringify(o):void 0}):null}y();export{P as HelpSidebarWidget,x as HelpSidebarWidgetElement};
+//# sourceMappingURL=index.mjs.map