@pindai-ai/chat-widget 3.0.1 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/pindai-chat-widget.css +1 -1
  2. package/dist/pindai-chat-widget.js +161 -139
  3. package/dist/pindai-chat-widget.js.map +1 -1
  4. package/dist/pindai-chat-widget.umd.js +8 -6
  5. package/dist/pindai-chat-widget.umd.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/main.js +84 -4
  8. package/src/style.css +61 -1
package/dist/pindai-chat-widget.css CHANGED
@@ -1 +1 @@
1
- :root{--pindai-primary: #0066FF;--pindai-primary-dark: #0052CC;--pindai-primary-light: #E6F0FF;--pindai-accent: #00C896;--pindai-accent-light: #E6FAF5;--pindai-gray-900: #1A1A1A;--pindai-gray-700: #4A4A4A;--pindai-gray-500: #9E9E9E;--pindai-gray-300: #E0E0E0;--pindai-gray-100: #F5F5F5;--pindai-gray-50: #FAFAFA;--pindai-error: #F44336;--pindai-success: #00C896;--pindai-warning: #FF9800;--pindai-info: #0066FF;--text-on-primary: #FFFFFF;--text-on-light: #1A1A1A;--text-on-dark: #FFFFFF;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;--font-size-xs: .6875rem;--font-size-sm: .875rem;--font-size-base: .9375rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--transition-fast: .15s ease-in-out;--transition-base: .3s ease-in-out;--transition-slow: .5s ease-in-out;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .2);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 50%}*{box-sizing:border-box}.n8n-chat-launcher-wrapper{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:9998}.n8n-chat-launcher-wrapper--left{right:auto;left:16px;align-items:flex-start}.n8n-chat-launcher{width:56px;height:56px;background-color:var(--pindai-primary);border-radius:var(--radius-full);display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow-lg);cursor:pointer;transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base);border:none;outline:none;position:relative}.n8n-chat-launcher:hover{transform:scale(1.05);box-shadow:0 8px 28px #06f6}.n8n-chat-launcher:focus-visible{outline:3px solid var(--pindai-primary);outline-offset:4px}.n8n-chat-launcher img{width:28px;height:28px;filter:invert(1)}.n8n-chat-launcher--hidden{transform:scale(0);opacity:0;pointer-events:none}.n8n-chat-unread-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;background-color:var(--pindai-error);color:var(--text-on-dark);font-size:12px;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 2px 6px #0000004d;z-index:1}.n8n-chat-widget{position:fixed;bottom:0;right:0;width:100vw;height:100vh;max-height:100vh;border-radius:0;box-shadow:var(--shadow-lg);background-color:#fff;display:flex;flex-direction:column;overflow:hidden;font-family:var(--font-family);font-size:var(--font-size-base);transform:translateY(20px) scale(.95);opacity:0;visibility:hidden;transition:all var(--transition-base);z-index:9999}.n8n-chat-widget--open{transform:translateY(0) scale(1);opacity:1;visibility:visible}.n8n-chat-widget--fullscreen{width:100%;height:100%;bottom:0;right:0;border-radius:0;max-height:100vh;transform:none;opacity:1;visibility:visible}.n8n-chat-header{padding:var(--space-md);background-color:var(--pindai-gray-900);color:var(--text-on-dark);font-weight:700;font-size:var(--font-size-xl);letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.1)}.n8n-chat-header-content{display:flex;align-items:center;gap:12px;flex:1}.n8n-chat-logo{width:32px;height:32px;object-fit:contain;flex-shrink:0}.n8n-chat-title{font-size:var(--font-size-lg);flex:1}.n8n-chat-close-btn{background:none;border:none;color:var(--text-on-dark);font-size:32px;cursor:pointer;line-height:1;padding:0 8px;transition:opacity var(--transition-fast);flex-shrink:0}.n8n-chat-close-btn:hover{opacity:.8}.n8n-chat-close-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px;border-radius:4px}.n8n-chat-messages{flex-grow:1;padding:var(--space-lg);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-md);background-color:var(--pindai-gray-50);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.n8n-chat-messages::-webkit-scrollbar{width:6px}.n8n-chat-messages::-webkit-scrollbar-track{background:transparent}.n8n-chat-messages::-webkit-scrollbar-thumb{background:var(--pindai-gray-300);border-radius:3px}.n8n-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--pindai-gray-500)}.n8n-chat-bubble{padding:12px 16px;border-radius:var(--radius-xl);max-width:75%;line-height:1.5;font-size:var(--font-size-base);word-wrap:break-word;animation:fadeInSlide .3s ease-out}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-user-message{background-color:var(--pindai-primary);color:var(--text-on-primary);align-self:flex-end;border-bottom-right-radius:4px}.n8n-chat-ai-message{background-color:var(--pindai-gray-100);color:var(--text-on-light);align-self:flex-start;border-bottom-left-radius:4px}.n8n-chat-message-text{margin-bottom:4px}.n8n-chat-message-timestamp{font-size:var(--font-size-xs);opacity:.6;margin-top:4px;display:block}.n8n-chat-user-message .n8n-chat-message-timestamp{text-align:right;color:#fffc}.n8n-chat-ai-message .n8n-chat-message-timestamp{color:#00000080}.n8n-chat-quick-replies{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-md) 0;align-self:flex-start;max-width:90%;animation:fadeInSlide .4s ease-out}.n8n-chat-quick-reply-btn{padding:10px 16px;background:#fff;border:1.5px solid var(--pindai-primary);border-radius:var(--radius-xl);color:var(--pindai-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;min-height:44px}.n8n-chat-quick-reply-btn:hover{background:var(--pindai-primary);color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #0066ff4d}.n8n-chat-quick-reply-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-typing-indicator{display:flex;align-items:center;gap:4px;padding:12px 16px}.n8n-chat-typing-indicator span{height:8px;width:8px;background-color:var(--pindai-gray-500);border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.n8n-chat-typing-indicator span:nth-child(1){animation-delay:-.32s}.n8n-chat-typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.n8n-chat-file-preview{padding:var(--space-sm) var(--space-md);display:flex;flex-wrap:wrap;gap:var(--space-sm);border-top:1px solid var(--pindai-gray-300);background:var(--pindai-gray-50)}.n8n-chat-file-item{display:flex;align-items:center;gap:var(--space-sm);padding:6px 12px;background:#fff;border:1px solid var(--pindai-gray-300);border-radius:var(--radius-lg);font-size:var(--font-size-sm);max-width:200px}.n8n-chat-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pindai-gray-700)}.n8n-chat-file-remove{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:var(--pindai-gray-500);padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast)}.n8n-chat-file-remove:hover{color:var(--pindai-error)}.n8n-chat-watermark{padding:8px 16px;text-align:center;font-size:12px;color:var(--pindai-gray-500);background-color:var(--pindai-gray-100);border-top:1px solid var(--pindai-gray-300);flex-shrink:0}.n8n-chat-watermark span{margin-right:4px}.n8n-chat-watermark a{color:var(--pindai-primary);text-decoration:none;font-weight:600;transition:color .2s ease}.n8n-chat-watermark a:hover{color:var(--pindai-primary-dark);text-decoration:underline}.n8n-chat-watermark a:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px;border-radius:2px}.n8n-chat-input-area{display:flex;align-items:center;padding:var(--space-md);border-top:1px solid var(--pindai-gray-300);background-color:#fff;flex-shrink:0;gap:var(--space-sm)}.n8n-chat-file-upload-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-full);transition:background-color var(--transition-fast);flex-shrink:0;border:none;background:none;color:var(--pindai-gray-700)}.n8n-chat-file-upload-btn:hover{background-color:var(--pindai-gray-100)}.n8n-chat-file-upload-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-input-area input{flex-grow:1;padding:12px 16px;border:1px solid var(--pindai-gray-300);border-radius:var(--radius-xl);font-size:16px;font-family:var(--font-family);outline:none;transition:border-color var(--transition-fast);min-height:44px}.n8n-chat-input-area input:focus{border-color:var(--pindai-primary);box-shadow:0 0 0 3px #0066ff1a}.n8n-chat-input-area input::placeholder{color:#757575}.n8n-chat-input-area button.n8n-chat-send-btn{width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);background-color:var(--send-button-color, var(--pindai-primary));color:#fff;flex-shrink:0}.n8n-chat-input-area button.n8n-chat-send-btn:hover:not(:disabled){transform:scale(1.05);filter:brightness(1.1);box-shadow:0 2px 8px #06f6}.n8n-chat-input-area button.n8n-chat-send-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-input-area button svg{width:18px;height:18px;color:#fff}.n8n-chat-input-area button:disabled{background-color:var(--pindai-gray-300);cursor:not-allowed;transform:none;opacity:.6}.n8n-chat-offline-indicator{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background-color:#fff3cd;color:#856404;font-size:var(--font-size-sm);border-bottom:1px solid #FFE69C;flex-shrink:0}.n8n-chat-offline-indicator svg{flex-shrink:0}.n8n-chat-loading-message{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;font-size:var(--font-size-sm);color:var(--pindai-gray-700)}.n8n-chat-spinner{width:16px;height:16px;border:2px solid var(--pindai-gray-300);border-top-color:var(--pindai-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--pindai-primary);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (min-width: 640px){.n8n-chat-widget{width:400px;height:85vh;max-height:700px;bottom:20px;right:20px;border-radius:var(--radius-lg)}.n8n-chat-launcher-wrapper{bottom:20px;right:20px}.n8n-chat-launcher-wrapper--left{right:auto;left:20px}.n8n-chat-launcher{width:60px;height:60px}.n8n-chat-launcher img{width:32px;height:32px}}@media (min-width: 1024px){.n8n-chat-widget{width:420px;height:80vh}.n8n-chat-messages{padding:var(--space-xl)}}@supports (padding: env(safe-area-inset-bottom)){.n8n-chat-widget{padding-bottom:env(safe-area-inset-bottom)}.n8n-chat-launcher-wrapper{bottom:calc(16px + env(safe-area-inset-bottom))}@media (min-width: 640px){.n8n-chat-launcher-wrapper{bottom:calc(20px + env(safe-area-inset-bottom))}}}.n8n-chat-header-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.25)}.n8n-chat-bubble-popup{background:#fff;color:var(--pindai-gray-900);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:10px 14px;font-size:var(--font-size-sm);max-width:220px;position:relative;display:flex;align-items:center;gap:8px;animation:pindai-bubble-in .3s ease-out}@keyframes pindai-bubble-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-bubble-popup-text{flex:1;line-height:1.4;transition:opacity .25s ease,transform .25s ease}.n8n-chat-bubble-popup-text--exit{opacity:0;transform:translateY(-4px)}.n8n-chat-bubble-popup-text--enter{animation:pindai-bubble-text-in .3s ease-out forwards}@keyframes pindai-bubble-text-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-bubble-popup-dismiss{background:none;border:none;cursor:pointer;color:var(--pindai-gray-500);font-size:16px;padding:0;line-height:1;flex-shrink:0;transition:color var(--transition-fast)}.n8n-chat-bubble-popup-dismiss:hover{color:var(--pindai-gray-900)}.n8n-chat-bubble-popup-arrow{position:absolute;bottom:-7px;right:20px;width:14px;height:8px;overflow:hidden}.n8n-chat-bubble-popup-arrow:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%) rotate(45deg);width:10px;height:10px;background:#fff;box-shadow:var(--shadow-sm)}.n8n-chat-launcher-wrapper--left .n8n-chat-bubble-popup-arrow{right:auto;left:20px}.n8n-chat-footer-sep{color:var(--pindai-gray-300);margin:0 2px}.n8n-chat-bubble--streaming .n8n-chat-message-text{white-space:pre-wrap}.n8n-chat-stream-cursor{display:inline-block;width:2px;height:1em;background-color:var(--pindai-gray-700);margin-left:2px;vertical-align:text-bottom;animation:pindai-cursor-blink .8s step-end infinite}@keyframes pindai-cursor-blink{0%,to{opacity:1}50%{opacity:0}}.n8n-chat-typing-indicator{flex-direction:column;gap:4px}.n8n-chat-typing-dots{display:flex;gap:4px}.n8n-chat-typing-label{font-size:var(--font-size-xs);color:var(--pindai-gray-500);font-style:italic}[data-pindai-theme=dark] .n8n-chat-widget{background-color:#1e1e1e;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-messages{background-color:#1e1e1e}[data-pindai-theme=dark] .n8n-chat-ai-message{background-color:#2d2d2d;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-message-timestamp{color:#888}[data-pindai-theme=dark] .n8n-chat-input-area{background-color:#262626;border-top-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-input-area input{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-input-area input::placeholder{color:#777}[data-pindai-theme=dark] .n8n-chat-input-area input:focus{border-color:#4a9eff;box-shadow:0 0 0 3px #4a9eff26}[data-pindai-theme=dark] .n8n-chat-watermark{background-color:#262626;border-top-color:#3a3a3a;color:#888}[data-pindai-theme=dark] .n8n-chat-watermark a{color:#4a9eff}[data-pindai-theme=dark] .n8n-chat-quick-reply-btn{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-quick-reply-btn:hover{background-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-file-preview{background-color:#262626;border-top-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-file-item{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-bubble-popup{background:#2d2d2d;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-bubble-popup-arrow:before{background:#2d2d2d}[data-pindai-theme=dark] .n8n-chat-stream-cursor{background-color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-typing-label{color:#888}.pindai-chat-handoff-banner{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#f59e0b14;border-bottom:1px solid rgba(245,158,11,.25);font-size:12px;color:#92400e;flex-shrink:0}[data-pindai-theme=dark] .pindai-chat-handoff-banner{background:#f59e0b1f;border-bottom-color:#f59e0b4d;color:#fbbf24}.pindai-chat-handoff-pulse{width:8px;height:8px;border-radius:50%;background:#f59e0b;flex-shrink:0;animation:pindai-handoff-pulse 1.5s ease-in-out infinite}@keyframes pindai-handoff-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
1
+ :root{--pindai-primary: #0066FF;--pindai-primary-dark: #0052CC;--pindai-primary-light: #E6F0FF;--pindai-accent: #00C896;--pindai-accent-light: #E6FAF5;--pindai-gray-900: #1A1A1A;--pindai-gray-700: #4A4A4A;--pindai-gray-500: #9E9E9E;--pindai-gray-300: #E0E0E0;--pindai-gray-100: #F5F5F5;--pindai-gray-50: #FAFAFA;--pindai-error: #F44336;--pindai-success: #00C896;--pindai-warning: #FF9800;--pindai-info: #0066FF;--text-on-primary: #FFFFFF;--text-on-light: #1A1A1A;--text-on-dark: #FFFFFF;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;--font-size-xs: .6875rem;--font-size-sm: .875rem;--font-size-base: .9375rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--transition-fast: .15s ease-in-out;--transition-base: .3s ease-in-out;--transition-slow: .5s ease-in-out;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .2);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 50%}*{box-sizing:border-box}.n8n-chat-launcher-wrapper{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:9998}.n8n-chat-launcher-wrapper--left{right:auto;left:16px;align-items:flex-start}.n8n-chat-launcher{width:56px;height:56px;background-color:var(--pindai-primary);border-radius:var(--radius-full);display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow-lg);cursor:pointer;transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base);border:none;outline:none;position:relative}.n8n-chat-launcher:hover{transform:scale(1.05);box-shadow:0 8px 28px #06f6}.n8n-chat-launcher:focus-visible{outline:3px solid var(--pindai-primary);outline-offset:4px}.n8n-chat-launcher img{width:28px;height:28px;filter:invert(1)}.n8n-chat-launcher--hidden{transform:scale(0);opacity:0;pointer-events:none}.n8n-chat-unread-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;background-color:var(--pindai-error);color:var(--text-on-dark);font-size:12px;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 2px 6px #0000004d;z-index:1}.n8n-chat-widget{position:fixed;bottom:0;right:0;width:100vw;height:100vh;max-height:100vh;border-radius:0;box-shadow:var(--shadow-lg);background-color:#fff;display:flex;flex-direction:column;overflow:hidden;font-family:var(--font-family);font-size:var(--font-size-base);transform:translateY(20px) scale(.95);opacity:0;visibility:hidden;transition:all var(--transition-base);z-index:9999}.n8n-chat-widget--open{transform:translateY(0) scale(1);opacity:1;visibility:visible}.n8n-chat-widget--fullscreen{width:100%;height:100%;bottom:0;right:0;border-radius:0;max-height:100vh;transform:none;opacity:1;visibility:visible}.n8n-chat-header{padding:var(--space-md);background-color:var(--pindai-primary);color:var(--text-on-dark);font-weight:700;font-size:var(--font-size-xl);letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.1)}.n8n-chat-header-content{display:flex;align-items:center;gap:12px;flex:1}.n8n-chat-logo{width:32px;height:32px;object-fit:contain;flex-shrink:0}.n8n-chat-title{font-size:var(--font-size-lg);flex:1}.n8n-chat-close-btn{background:none;border:none;color:var(--text-on-dark);font-size:32px;cursor:pointer;line-height:1;padding:0 8px;transition:opacity var(--transition-fast);flex-shrink:0}.n8n-chat-close-btn:hover{opacity:.8}.n8n-chat-close-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px;border-radius:4px}.n8n-chat-messages{flex-grow:1;padding:var(--space-lg);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-md);background-color:var(--pindai-gray-50);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.n8n-chat-messages::-webkit-scrollbar{width:6px}.n8n-chat-messages::-webkit-scrollbar-track{background:transparent}.n8n-chat-messages::-webkit-scrollbar-thumb{background:var(--pindai-gray-300);border-radius:3px}.n8n-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--pindai-gray-500)}.n8n-chat-bubble{padding:12px 16px;border-radius:var(--radius-xl);max-width:75%;line-height:1.5;font-size:var(--font-size-base);word-wrap:break-word;animation:fadeInSlide .3s ease-out}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-user-message{background-color:var(--pindai-primary);color:var(--text-on-primary);align-self:flex-end;border-bottom-right-radius:4px}.n8n-chat-ai-message{background-color:var(--pindai-gray-100);color:var(--text-on-light);align-self:flex-start;border-bottom-left-radius:4px}.n8n-chat-message-text{margin-bottom:4px}.n8n-chat-message-text strong{font-weight:600}.n8n-chat-message-text em{font-style:italic}.n8n-chat-message-text code{background:#00000014;padding:.1em .35em;border-radius:3px;font-size:.875em;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.n8n-chat-message-text pre{background:#0000000f;padding:10px 12px;border-radius:6px;overflow-x:auto;margin:6px 0;font-size:.875em}.n8n-chat-message-text pre code{background:none;padding:0;font-size:inherit}.n8n-chat-message-text ul,.n8n-chat-message-text ol{padding-left:1.4em;margin:4px 0}.n8n-chat-message-text li{margin-bottom:2px}.n8n-chat-message-text a{color:var(--pindai-primary);text-decoration:underline;word-break:break-all}.n8n-chat-message-text h3,.n8n-chat-message-text h4,.n8n-chat-message-text h5{font-weight:600;margin:8px 0 3px;line-height:1.3}.n8n-chat-message-text h3{font-size:1em}.n8n-chat-message-text h4{font-size:.95em}.n8n-chat-message-text h5{font-size:.9em}.n8n-chat-message-timestamp{font-size:var(--font-size-xs);opacity:.6;margin-top:4px;display:block}.n8n-chat-user-message .n8n-chat-message-timestamp{text-align:right;color:#fffc}.n8n-chat-ai-message .n8n-chat-message-timestamp{color:#00000080}.n8n-chat-quick-replies{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-md) 0;align-self:flex-start;max-width:90%;animation:fadeInSlide .4s ease-out}.n8n-chat-quick-reply-btn{padding:10px 16px;background:#fff;border:1.5px solid var(--pindai-primary);border-radius:var(--radius-xl);color:var(--pindai-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;min-height:44px}.n8n-chat-quick-reply-btn:hover{background:var(--pindai-primary);color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #0066ff4d}.n8n-chat-quick-reply-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-typing-indicator{display:flex;align-items:center;gap:4px;padding:12px 16px}.n8n-chat-typing-indicator span{height:8px;width:8px;background-color:var(--pindai-gray-500);border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.n8n-chat-typing-indicator span:nth-child(1){animation-delay:-.32s}.n8n-chat-typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.n8n-chat-file-preview{padding:var(--space-sm) var(--space-md);display:flex;flex-wrap:wrap;gap:var(--space-sm);border-top:1px solid var(--pindai-gray-300);background:var(--pindai-gray-50)}.n8n-chat-file-item{display:flex;align-items:center;gap:var(--space-sm);padding:6px 12px;background:#fff;border:1px solid var(--pindai-gray-300);border-radius:var(--radius-lg);font-size:var(--font-size-sm);max-width:200px}.n8n-chat-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pindai-gray-700)}.n8n-chat-file-remove{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:var(--pindai-gray-500);padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast)}.n8n-chat-file-remove:hover{color:var(--pindai-error)}.n8n-chat-watermark{padding:8px 16px;text-align:center;font-size:12px;color:var(--pindai-gray-500);background-color:var(--pindai-gray-100);border-top:1px solid var(--pindai-gray-300);flex-shrink:0}.n8n-chat-watermark span{margin-right:4px}.n8n-chat-watermark a{color:var(--pindai-primary);text-decoration:none;font-weight:600;transition:color .2s ease}.n8n-chat-watermark a:hover{color:var(--pindai-primary-dark);text-decoration:underline}.n8n-chat-watermark a:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px;border-radius:2px}.n8n-chat-input-area{display:flex;align-items:center;padding:var(--space-md);border-top:1px solid var(--pindai-gray-300);background-color:#fff;flex-shrink:0;gap:var(--space-sm)}.n8n-chat-file-upload-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-full);transition:background-color var(--transition-fast);flex-shrink:0;border:none;background:none;color:var(--pindai-gray-700)}.n8n-chat-file-upload-btn:hover{background-color:var(--pindai-gray-100)}.n8n-chat-file-upload-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-input-area input{flex-grow:1;padding:12px 16px;border:1px solid var(--pindai-gray-300);border-radius:var(--radius-xl);font-size:16px;font-family:var(--font-family);outline:none;transition:border-color var(--transition-fast);min-height:44px}.n8n-chat-input-area input:focus{border-color:var(--pindai-primary);box-shadow:0 0 0 3px #0066ff1a}.n8n-chat-input-area input::placeholder{color:#757575}.n8n-chat-input-area button.n8n-chat-send-btn{width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);background-color:var(--send-button-color, var(--pindai-primary));color:#fff;flex-shrink:0}.n8n-chat-input-area button.n8n-chat-send-btn:hover:not(:disabled){transform:scale(1.05);filter:brightness(1.1);box-shadow:0 2px 8px #06f6}.n8n-chat-input-area button.n8n-chat-send-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-input-area button svg{width:18px;height:18px;color:#fff}.n8n-chat-input-area button:disabled{background-color:var(--pindai-gray-300);cursor:not-allowed;transform:none;opacity:.6}.n8n-chat-offline-indicator{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background-color:#fff3cd;color:#856404;font-size:var(--font-size-sm);border-bottom:1px solid #FFE69C;flex-shrink:0}.n8n-chat-offline-indicator svg{flex-shrink:0}.n8n-chat-loading-message{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;font-size:var(--font-size-sm);color:var(--pindai-gray-700)}.n8n-chat-spinner{width:16px;height:16px;border:2px solid var(--pindai-gray-300);border-top-color:var(--pindai-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--pindai-primary);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (min-width: 640px){.n8n-chat-widget{width:400px;height:85vh;max-height:700px;bottom:20px;right:20px;border-radius:var(--radius-lg)}.n8n-chat-launcher-wrapper{bottom:20px;right:20px}.n8n-chat-launcher-wrapper--left{right:auto;left:20px}.n8n-chat-launcher{width:60px;height:60px}.n8n-chat-launcher img{width:32px;height:32px}}@media (min-width: 1024px){.n8n-chat-widget{width:420px;height:80vh}.n8n-chat-messages{padding:var(--space-xl)}}@supports (padding: env(safe-area-inset-bottom)){.n8n-chat-widget{padding-bottom:env(safe-area-inset-bottom)}.n8n-chat-launcher-wrapper{bottom:calc(16px + env(safe-area-inset-bottom))}@media (min-width: 640px){.n8n-chat-launcher-wrapper{bottom:calc(20px + env(safe-area-inset-bottom))}}}.n8n-chat-header-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.25)}.n8n-chat-bubble-popup{background:#fff;color:var(--pindai-gray-900);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:10px 14px;font-size:var(--font-size-sm);max-width:220px;position:relative;display:flex;align-items:center;gap:8px;animation:pindai-bubble-in .3s ease-out}@keyframes pindai-bubble-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-bubble-popup-text{flex:1;line-height:1.4;transition:opacity .25s ease,transform .25s ease}.n8n-chat-bubble-popup-text--exit{opacity:0;transform:translateY(-4px)}.n8n-chat-bubble-popup-text--enter{animation:pindai-bubble-text-in .3s ease-out forwards}@keyframes pindai-bubble-text-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-bubble-popup-dismiss{background:none;border:none;cursor:pointer;color:var(--pindai-gray-500);font-size:16px;padding:0;line-height:1;flex-shrink:0;transition:color var(--transition-fast)}.n8n-chat-bubble-popup-dismiss:hover{color:var(--pindai-gray-900)}.n8n-chat-bubble-popup-arrow{position:absolute;bottom:-7px;right:20px;width:14px;height:8px;overflow:hidden}.n8n-chat-bubble-popup-arrow:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%) rotate(45deg);width:10px;height:10px;background:#fff;box-shadow:var(--shadow-sm)}.n8n-chat-launcher-wrapper--left .n8n-chat-bubble-popup-arrow{right:auto;left:20px}.n8n-chat-footer-sep{color:var(--pindai-gray-300);margin:0 2px}.n8n-chat-bubble--streaming .n8n-chat-message-text{white-space:pre-wrap}.n8n-chat-stream-cursor{display:inline-block;width:2px;height:1em;background-color:var(--pindai-gray-700);margin-left:2px;vertical-align:text-bottom;animation:pindai-cursor-blink .8s step-end infinite}@keyframes pindai-cursor-blink{0%,to{opacity:1}50%{opacity:0}}.n8n-chat-typing-indicator{flex-direction:column;gap:4px}.n8n-chat-typing-dots{display:flex;gap:4px}.n8n-chat-typing-label{font-size:var(--font-size-xs);color:var(--pindai-gray-500);font-style:italic}[data-pindai-theme=dark] .n8n-chat-widget{background-color:#1e1e1e;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-messages{background-color:#1e1e1e}[data-pindai-theme=dark] .n8n-chat-ai-message{background-color:#2d2d2d;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-message-timestamp{color:#888}[data-pindai-theme=dark] .n8n-chat-input-area{background-color:#262626;border-top-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-input-area input{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-input-area input::placeholder{color:#777}[data-pindai-theme=dark] .n8n-chat-input-area input:focus{border-color:#4a9eff;box-shadow:0 0 0 3px #4a9eff26}[data-pindai-theme=dark] .n8n-chat-watermark{background-color:#262626;border-top-color:#3a3a3a;color:#888}[data-pindai-theme=dark] .n8n-chat-watermark a{color:#4a9eff}[data-pindai-theme=dark] .n8n-chat-quick-reply-btn{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-quick-reply-btn:hover{background-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-file-preview{background-color:#262626;border-top-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-file-item{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-bubble-popup{background:#2d2d2d;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-bubble-popup-arrow:before{background:#2d2d2d}[data-pindai-theme=dark] .n8n-chat-stream-cursor{background-color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-typing-label{color:#888}.pindai-chat-handoff-banner{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#f59e0b14;border-bottom:1px solid rgba(245,158,11,.25);font-size:12px;color:#92400e;flex-shrink:0}[data-pindai-theme=dark] .pindai-chat-handoff-banner{background:#f59e0b1f;border-bottom-color:#f59e0b4d;color:#fbbf24}.pindai-chat-handoff-pulse{width:8px;height:8px;border-radius:50%;background:#f59e0b;flex-shrink:0;animation:pindai-handoff-pulse 1.5s ease-in-out infinite}@keyframes pindai-handoff-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}