@traiyani/chatsdk-react 1.0.5 → 1.0.6
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.
- package/dist/chatsdk-react.cjs +15 -15
- package/dist/chatsdk-react.cjs.map +1 -1
- package/dist/chatsdk-react.mjs +96 -100
- package/dist/chatsdk-react.mjs.map +1 -1
- package/dist/chatsdk.css +1 -1
- package/package.json +1 -1
package/dist/chatsdk.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.chatsdk-root{--color-primary: #2196F3;--color-on-primary: #FFFFFF;--color-primary-container: #BBDEFB;--color-on-primary-container: #0D47A1;--color-primary-dark: #1976D2;--color-secondary: #FF4081;--color-on-secondary: #FFFFFF;--color-secondary-container: #FCE4EC;--color-on-secondary-container: #880E4F;--color-accent: #FF4081;--color-surface: #FFFFFF;--color-on-surface: #212121;--color-surface-variant: #F5F5F5;--color-on-surface-variant: #757575;--color-surface-dark: #121212;--color-on-surface-dark: #FFFFFF;--color-surface-variant-dark: #1E1E1E;--color-on-surface-variant-dark: #BDBDBD;--color-background: #FFFFFF;--color-on-background: #212121;--color-background-dark: #121212;--color-on-background-dark: #FFFFFF;--color-error: #F44336;--color-on-error: #FFFFFF;--color-error-container: #FFEBEE;--color-on-error-container: #B71C1C;--message-sent-background: #2196F3;--message-received-background: #F5F5F5;--avatar-background: #E0E0E0;--avatar-border: #BDBDBD;--input-background: #FAFAFA;--input-border: #E0E0E0;--unread-badge-background: #F44336;--white: #FFFFFF;--black: #000000;--transparent: transparent;--success: #4CAF50;--warning: #FF9800;--error: #F44336;--info: #2196F3;--figma-background: #F0F0F0;--figma-text-primary: #1E1E1E;--figma-text-product: #95265B;--figma-text-timestamp: #878787;--figma-separator: #C4C4C4;--figma-online-indicator: #4CAF50;--chat-background: #F4F4F4;--chat-product-text: #923060;--chat-message-received: #FFFFFF;--chat-message-sent: #C4C4C4;--chat-input-background: #FBFBFB;--chat-input-placeholder: #C4C4C4;--chat-timestamp: #878787;--chat-primary-text: #1E1E1E;--mzad-brand: #932c5d;--mzad-brand-dark: #7c1445;--mzad-brand-light: #a46281;--mzad-brand-bg: #f9ebf1;--mzad-text-primary: #280f1c;--mzad-text-secondary: #696366;--mzad-text-time: #a4a4a4;--mzad-text-message-time: #adb5bd;--mzad-text-received: #0f1828;--mzad-bg-item: #f5f5fa;--mzad-bg-input: #f0f0f0;--mzad-border: #e5e5ef;--mzad-border-light: #ededed;--mzad-reply-bg: #e7e7ed;--mzad-divider-text: #bdadb7;--mzad-placeholder: #999;--primary-color: var(--color-primary);--primary-dark-color: var(--color-primary-dark);--accent-color: var(--success);--background-color: var(--figma-background);--text-color: var(--figma-text-primary);--border-color: var(--figma-separator)}.chatsdk-root .figma-conversation-list{background-color:var(--figma-background);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chatsdk-root .figma-conversation-item{background-color:var(--figma-background);border-bottom:none;padding:12px 16px;cursor:pointer;transition:background-color .2s ease}.chatsdk-root .figma-conversation-item:hover{background-color:#0000000d}.chatsdk-root .figma-conversation-item.selected{background-color:var(--figma-text-primary);color:#fff}.chatsdk-root .figma-conversation-avatar{width:50px;height:50px;border-radius:50%;margin-right:16px;position:relative;flex-shrink:0}.chatsdk-root .figma-online-indicator{position:absolute;bottom:2px;right:2px;width:12px;height:12px;background-color:var(--figma-online-indicator);border:2px solid white;border-radius:50%}.chatsdk-root .figma-conversation-name{font-size:16px;font-weight:600;color:var(--figma-text-primary);margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .figma-product-context{font-size:14px;color:var(--figma-text-product);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .figma-last-message{font-size:14px;color:var(--figma-text-timestamp);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .figma-timestamp{font-size:12px;color:var(--figma-text-timestamp);text-align:right;margin-left:8px;flex-shrink:0}.chatsdk-root .figma-separator{height:1px;background-color:var(--figma-separator);opacity:.5;margin-left:82px;margin-right:16px}.chatsdk-root .figma-chat-window{background-color:var(--chat-background);display:flex;flex-direction:column;height:100%}.chatsdk-root .figma-chat-header{background-color:var(--chat-background);border-bottom:1px solid var(--figma-separator);padding:12px 16px;display:flex;align-items:center;gap:12px}.chatsdk-root .figma-chat-back-button{background:none;border:none;color:var(--chat-primary-text);cursor:pointer;padding:8px;border-radius:50%}.chatsdk-root .figma-chat-back-button:hover{background-color:#0000001a}.chatsdk-root .figma-chat-user-avatar{width:40px;height:40px;border-radius:50%}.chatsdk-root .figma-chat-user-name{font-size:18px;font-weight:600;color:var(--chat-primary-text);flex:1}.chatsdk-root .figma-chat-call-button{background:none;border:none;color:var(--chat-primary-text);cursor:pointer;padding:8px;border-radius:50%}.chatsdk-root .figma-chat-call-button:hover{background-color:#0000001a}.chatsdk-root .figma-product-context-card{background-color:#fff;margin:12px 16px;padding:12px;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;gap:12px}.chatsdk-root .figma-product-image{width:56px;height:56px;border-radius:8px;object-fit:cover}.chatsdk-root .figma-product-info{flex:1}.chatsdk-root .figma-product-name{font-size:16px;font-weight:600;color:var(--chat-product-text);margin:0 0 4px;line-height:1.3}.chatsdk-root .figma-product-price{font-size:14px;color:var(--chat-timestamp);margin:0}.chatsdk-root .figma-messages-container{flex:1;overflow-y:auto;padding:16px}.chatsdk-root .figma-message-bubble{max-width:264px;margin-bottom:8px;padding:15px;border-radius:8px;word-wrap:break-word}.chatsdk-root .figma-message-received{background-color:var(--chat-message-received);color:var(--chat-primary-text);margin-right:90px;box-shadow:0 2px 4px #0000001a}.chatsdk-root .figma-message-sent{background-color:var(--chat-message-sent);color:var(--chat-primary-text);margin-left:auto}.chatsdk-root .figma-message-timestamp{font-size:14px;color:var(--chat-timestamp);margin-top:5px}.chatsdk-root .figma-input-container{background-color:var(--chat-input-background);border-top:1px solid var(--figma-separator);padding:12px 16px;display:flex;align-items:center;gap:12px}.chatsdk-root .figma-input-field{flex:1;border:none;background:transparent;outline:none;font-size:16px;color:var(--chat-primary-text);padding:8px 0}.chatsdk-root .figma-input-field::placeholder{color:var(--chat-input-placeholder)}.chatsdk-root .figma-input-button{background:none;border:none;color:var(--chat-primary-text);cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center}.chatsdk-root .figma-input-button:hover{background-color:#0000001a}.chatsdk-root[data-theme=dark]{--color-primary: #90CAF9;--color-on-primary: #0D47A1;--color-primary-container: #1565C0;--color-on-primary-container: #E3F2FD;--color-primary-dark: #42A5F5;--color-secondary: #F8BBD9;--color-on-secondary: #4A148C;--color-secondary-container: #7B1FA2;--color-on-secondary-container: #FCE4EC;--color-accent: #F8BBD9;--color-surface: var(--color-surface-dark);--color-on-surface: var(--color-on-surface-dark);--color-surface-variant: var(--color-surface-variant-dark);--color-on-surface-variant: var(--color-on-surface-variant-dark);--color-background: var(--color-background-dark);--color-on-background: var(--color-on-background-dark);--color-error: #CF6679;--color-on-error: #000000;--color-error-container: #B00020;--color-on-error-container: #FECDD3;--message-sent-background: var(--color-primary);--message-received-background: #2C2C2C;--avatar-background: #424242;--avatar-border: #616161;--input-background: #1E1E1E;--input-border: #424242;--unread-badge-background: var(--color-error);--figma-background: #1E1E1E;--figma-text-primary: #FFFFFF;--figma-text-product: #F8BBD9;--figma-text-timestamp: #BDBDBD;--figma-separator: #424242;--figma-online-indicator: #4CAF50;--chat-background: #121212;--chat-product-text: #F8BBD9;--chat-message-received: #2C2C2C;--chat-message-sent: #424242;--chat-input-background: #1E1E1E;--chat-input-placeholder: #757575;--chat-timestamp: #BDBDBD;--chat-primary-text: #FFFFFF;--background-color: var(--figma-background);--text-color: var(--figma-text-primary);--border-color: var(--figma-separator)}.chatsdk-root[data-theme=dark] .figma-conversation-item:hover{background-color:#ffffff14}.chatsdk-root[data-theme=dark] .figma-conversation-item.selected{background-color:var(--color-primary);color:var(--color-on-primary)}.chatsdk-root[data-theme=dark] .figma-chat-back-button:hover,.chatsdk-root[data-theme=dark] .figma-chat-call-button:hover,.chatsdk-root[data-theme=dark] .figma-input-button:hover{background-color:#ffffff1a}.chatsdk-root[data-theme=dark] .figma-product-context-card{background-color:var(--color-surface);box-shadow:0 2px 4px #0000004d}.chatsdk-root[data-theme=dark] .figma-message-received{box-shadow:0 2px 4px #0000004d}.chatsdk-root .text-primary{color:var(--color-primary)}.chatsdk-root .bg-primary{background-color:var(--color-primary)}.chatsdk-root .border-primary{border-color:var(--color-primary)}.chatsdk-root .text-on-primary{color:var(--color-on-primary)}.chatsdk-root .bg-on-primary{background-color:var(--color-on-primary)}.chatsdk-root .text-primary-container{color:var(--color-primary-container)}.chatsdk-root .bg-primary-container{background-color:var(--color-primary-container)}.chatsdk-root .text-secondary{color:var(--color-secondary)}.chatsdk-root .bg-secondary{background-color:var(--color-secondary)}.chatsdk-root .border-secondary{border-color:var(--color-secondary)}.chatsdk-root .text-on-secondary{color:var(--color-on-secondary)}.chatsdk-root .bg-on-secondary{background-color:var(--color-on-secondary)}.chatsdk-root .text-surface{color:var(--color-surface)}.chatsdk-root .bg-surface{background-color:var(--color-surface)}.chatsdk-root .border-surface{border-color:var(--color-surface)}.chatsdk-root .text-on-surface{color:var(--color-on-surface)}.chatsdk-root .bg-on-surface{background-color:var(--color-on-surface)}.chatsdk-root .text-surface-variant{color:var(--color-surface-variant)}.chatsdk-root .bg-surface-variant{background-color:var(--color-surface-variant)}.chatsdk-root .text-background{color:var(--color-background)}.chatsdk-root .bg-background{background-color:var(--color-background)}.chatsdk-root .text-on-background{color:var(--color-on-background)}.chatsdk-root .bg-on-background{background-color:var(--color-on-background)}.chatsdk-root .text-error{color:var(--color-error)}.chatsdk-root .bg-error{background-color:var(--color-error)}.chatsdk-root .border-error{border-color:var(--color-error)}.chatsdk-root .text-on-error{color:var(--color-on-error)}.chatsdk-root .bg-on-error{background-color:var(--color-on-error)}.chatsdk-root .text-success{color:var(--success)}.chatsdk-root .bg-success{background-color:var(--success)}.chatsdk-root .border-success{border-color:var(--success)}.chatsdk-root .text-warning{color:var(--warning)}.chatsdk-root .bg-warning{background-color:var(--warning)}.chatsdk-root .border-warning{border-color:var(--warning)}.chatsdk-root .text-info{color:var(--info)}.chatsdk-root .bg-info{background-color:var(--info)}.chatsdk-root .border-info{border-color:var(--info)}.chatsdk-root .text-figma-primary{color:var(--figma-text-primary)}.chatsdk-root .bg-figma-background{background-color:var(--figma-background)}.chatsdk-root .text-figma-product{color:var(--figma-text-product)}.chatsdk-root .text-figma-timestamp{color:var(--figma-text-timestamp)}.chatsdk-root .border-figma-separator{border-color:var(--figma-separator)}.chatsdk-root .bg-chat-background{background-color:var(--chat-background)}.chatsdk-root .text-chat-primary{color:var(--chat-primary-text)}.chatsdk-root .text-chat-product{color:var(--chat-product-text)}.chatsdk-root .bg-message-sent{background-color:var(--chat-message-sent)}.chatsdk-root .bg-message-received{background-color:var(--chat-message-received)}.chatsdk-root .bg-chat-input{background-color:var(--chat-input-background)}.chatsdk-root .text-chat-placeholder{color:var(--chat-input-placeholder)}.chatsdk-root .bg-avatar{background-color:var(--avatar-background)}.chatsdk-root .border-avatar{border-color:var(--avatar-border)}.chatsdk-root .bg-unread-badge{background-color:var(--unread-badge-background)}.chatsdk-root .text-white{color:var(--white)}.chatsdk-root .bg-white{background-color:var(--white)}.chatsdk-root .text-black{color:var(--black)}.chatsdk-root .bg-black{background-color:var(--black)}.chatsdk-root .bg-transparent{background-color:var(--transparent)}.chatsdk-root .theme-light{color-scheme:light}.chatsdk-root .theme-dark{color-scheme:dark}.chatsdk-root .elevation-1{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.chatsdk-root .elevation-2{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.chatsdk-root .elevation-3{box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b}.chatsdk-root .elevation-4{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.chatsdk-root .elevation-5{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038}.chatsdk-root[data-theme=dark] .elevation-1{box-shadow:0 1px 3px #0000004d,0 1px 2px #00000080}.chatsdk-root[data-theme=dark] .elevation-2{box-shadow:0 3px 6px #0006,0 3px 6px #00000080}.chatsdk-root[data-theme=dark] .elevation-3{box-shadow:0 10px 20px #00000080,0 6px 6px #00000080}.chatsdk-root[data-theme=dark] .elevation-4{box-shadow:0 14px 28px #0009,0 10px 10px #00000080}.chatsdk-root[data-theme=dark] .elevation-5{box-shadow:0 19px 38px #000000b3,0 15px 12px #00000080}.chatsdk-root .conversations-section{height:calc(100vh - 200px)}.chatsdk-root .conversations-layout{display:flex;height:100%;background-color:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000000f}.chatsdk-root .conversations-sidebar{width:375px;min-width:375px;border-right:1px solid var(--mzad-border, #e5e5ef);background-color:#fff;display:flex;flex-direction:column}.chatsdk-root .conversations-main{flex:1;display:flex;flex-direction:column;background-color:#fff;min-width:0}.chatsdk-root .conversation-list{display:flex;flex-direction:column;height:100%;font-family:Mulish,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chatsdk-root .conversation-list-header{padding:8px 32px;height:75px;display:flex;align-items:center;background-color:#fff;border-bottom:1px solid var(--mzad-border, #e5e5ef);box-sizing:border-box}.chatsdk-root .conversation-list-header h3{margin:0;font-family:Mulish,sans-serif;font-size:22px;font-weight:600;color:var(--mzad-text-primary, #280f1c)}.chatsdk-root .conversation-search{padding:16px 16px 0}.chatsdk-root .conversation-search-input{display:flex;align-items:center;gap:10px;background-color:var(--mzad-bg-input, #f0f0f0);border-radius:8px;padding:6px 15px;height:44px;box-sizing:border-box}.chatsdk-root .conversation-search-input .search-icon{width:24px;height:24px;flex-shrink:0;color:#999;display:flex;align-items:center;justify-content:center}.chatsdk-root .conversation-search-input .search-icon svg{width:18px;height:18px}.chatsdk-root .conversation-search-input input{border:none;background:transparent;outline:none;font-family:Mulish,sans-serif;font-size:15px;font-weight:400;color:var(--mzad-text-primary, #280f1c);width:100%;line-height:24px}.chatsdk-root .conversation-search-input input::placeholder{color:var(--mzad-placeholder, #999)}.chatsdk-root .conversations{overflow-y:auto;flex:1;padding:16px;display:flex;flex-direction:column;gap:8px}.chatsdk-root .conversation-item{display:flex;align-items:flex-start;padding:8px;border-radius:15px;cursor:pointer;transition:background-color .2s ease;background-color:var(--mzad-bg-item, #f5f5fa);gap:12px;border:none}.chatsdk-root .conversation-item:hover{background-color:#eeeef5}.chatsdk-root .conversation-item.selected{background-color:#e8dce3}.chatsdk-root .conversation-item.has-unread{background-color:var(--mzad-bg-item, #f5f5fa)}.chatsdk-root .conversation-item.has-unread.selected{background-color:#e8dce3}.chatsdk-root .conversation-avatar{position:relative;flex-shrink:0;width:56px;height:56px}.chatsdk-root .conversation-avatar img{width:48px;height:48px;border-radius:16px;object-fit:cover;margin:4px}.chatsdk-root .conversation-avatar .product-image{width:48px;height:48px;border-radius:16px;object-fit:cover;margin:4px;border:none}.chatsdk-root .avatar-placeholder{width:48px;height:48px;border-radius:16px;background-color:var(--mzad-brand-dark, #7c1445);display:flex;align-items:center;justify-content:center;font-family:Lato,sans-serif;font-weight:700;font-size:14px;color:#fff;margin:4px}.chatsdk-root .avatar-online-status{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background-color:#4caf50;border:2px solid #ffffff}.chatsdk-root .conversation-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-self:stretch}.chatsdk-root .conversation-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2px}.chatsdk-root .conversation-title-wrapper{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.chatsdk-root .conversation-participant-name{margin:0;font-family:Mulish,sans-serif;font-size:16px;font-weight:600;color:var(--mzad-text-primary, #280f1c);line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .conversation-product-name{margin:0;font-family:Mulish,sans-serif;font-size:12px;font-weight:400;color:var(--mzad-brand, #932c5d);line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .conversation-time{font-family:Mulish,sans-serif;font-size:10px;font-weight:400;color:var(--mzad-text-time, #a4a4a4);flex-shrink:0;line-height:16px;text-align:right}.chatsdk-root .conversation-details{display:flex;align-items:center;justify-content:space-between;gap:2px}.chatsdk-root .conversation-last-message{margin:0;font-family:Mulish,sans-serif;font-size:12px;font-weight:400;color:var(--mzad-text-secondary, #696366);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;line-height:normal}.chatsdk-root .unread-badge{background-color:var(--mzad-brand, #932c5d);color:#fff;font-family:Mulish,sans-serif;font-size:10px;font-weight:600;padding:2px 6px;border-radius:40px;min-width:16px;text-align:center;line-height:16px;flex-shrink:0}.chatsdk-root .empty-conversations{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;color:var(--mzad-text-secondary, #696366)}.chatsdk-root .empty-conversations p{margin:.25rem 0}.chatsdk-root .loading-spinner{text-align:center;padding:2rem;opacity:.7;font-size:1rem;color:var(--mzad-text-secondary, #696366)}.chatsdk-root .conversation-list.loading{display:flex;justify-content:center;align-items:center;height:100%}.chatsdk-root .chat-window{display:flex;flex-direction:column;height:100%;background-color:#fff;font-family:Mulish,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chatsdk-root .chat-window.empty{justify-content:center;align-items:center;text-align:center;background-color:#fafafa}.chatsdk-root .empty-state{text-align:center;padding:2rem;max-width:400px}.chatsdk-root .empty-state h3{margin-bottom:.5rem;font-size:1.25rem;color:var(--mzad-text-primary, #280f1c);font-weight:600}.chatsdk-root .empty-state p{opacity:.7;font-size:.95rem;color:var(--mzad-text-secondary, #696366)}.chatsdk-root .chat-header{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;height:75px;border-bottom:1px solid var(--mzad-border, #e5e5ef);background-color:#fff;box-sizing:border-box}.chatsdk-root .chat-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.chatsdk-root .chat-back-btn{display:none;background:none;border:none;cursor:pointer;padding:4px;color:var(--mzad-text-primary, #280f1c);flex-shrink:0}.chatsdk-root .chat-back-btn svg{width:24px;height:24px}.chatsdk-root .chat-header-avatar{width:56px;height:56px;flex-shrink:0;position:relative}.chatsdk-root .chat-header-avatar .avatar-placeholder{width:48px;height:48px;border-radius:16px;background-color:var(--mzad-brand-dark, #7c1445);display:flex;align-items:center;justify-content:center;font-family:Lato,sans-serif;font-weight:700;font-size:14px;color:#fff;margin:4px}.chatsdk-root .chat-header-avatar img{width:48px;height:48px;border-radius:16px;object-fit:cover;margin:4px}.chatsdk-root .chat-header-info{display:flex;flex-direction:column;gap:2px;min-width:0}.chatsdk-root .chat-participant-name{margin:0;font-family:Mulish,sans-serif;font-size:20px;font-weight:600;color:var(--mzad-text-primary, #280f1c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:normal}.chatsdk-root .chat-header-actions{display:flex;gap:12px;align-items:center;flex-shrink:0}.chatsdk-root .chat-action-btn{background:none;border:none;cursor:pointer;padding:4px;color:#222;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.chatsdk-root .chat-action-btn:hover{background-color:#0000000d}.chatsdk-root .chat-action-btn svg{width:24px;height:24px}.chatsdk-root .chat-options-wrapper{position:relative}.chatsdk-root .chat-options-menu{position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border-radius:8px;box-shadow:0 4px 16px #0000001f;min-width:180px;z-index:100;overflow:hidden}.chatsdk-root .chat-options-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;border:none;background:none;cursor:pointer;font-family:Mulish,sans-serif;font-size:14px;color:#333;transition:background-color .15s}.chatsdk-root .chat-options-menu button:hover{background-color:#f5f5f5}.chatsdk-root .chat-options-menu button.danger{color:#dc3545}.chatsdk-root .chat-options-menu button.danger:hover{background-color:#fff5f5}.chatsdk-root .chat-product-bar{display:flex;align-items:center;gap:10px;padding:10px 20px;background-color:#fff;border-bottom:1px solid var(--mzad-border-light, #ededed)}.chatsdk-root .chat-product-bar img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0}.chatsdk-root .chat-product-bar-info{display:flex;flex-direction:column;gap:3px;font-family:Mulish,sans-serif;font-size:14px;min-width:0}.chatsdk-root .chat-product-bar-name{margin:0;color:var(--mzad-brand, #932c5d);font-weight:400;line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .chat-product-bar-price{margin:0;color:#878787;font-weight:400;line-height:normal}.chatsdk-root .chat-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;background-color:#fff;position:relative;overscroll-behavior:contain}.chatsdk-root .loading-messages{text-align:center;padding:2rem;opacity:.7;color:var(--mzad-text-secondary, #696366)}.chatsdk-root .sticky-date-header{position:sticky;top:0;z-index:10;display:flex;justify-content:center;align-items:center;pointer-events:none;padding:4px 0 8px;opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease}.chatsdk-root .sticky-date-header.sticky-date-visible{opacity:1;transform:translateY(0)}.chatsdk-root .sticky-date-pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 12px;background-color:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:.5px solid rgba(237,237,237,.7);border-radius:15px;font-family:Mulish,sans-serif;font-size:12px;font-weight:600;color:var(--mzad-text-primary, #280f1c);box-shadow:0 1px 4px #0000000f;white-space:nowrap;line-height:normal}.chatsdk-root .date-divider{display:flex;align-items:center;gap:16px;padding:12px 0;width:100%}.chatsdk-root .date-divider-line{flex:1;height:1px;background-color:#e5e5ef}.chatsdk-root .date-divider-text{font-family:Mulish,sans-serif;font-size:13px;font-weight:400;color:var(--mzad-divider-text, #bdadb7);white-space:nowrap;line-height:20px;padding:0 4px}.chatsdk-root .date-divider-pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;background-color:#d3d3d333;border:.5px solid rgba(237,237,237,.5);border-radius:15px;font-family:Mulish,sans-serif;font-size:12px;font-weight:600;color:var(--mzad-text-primary, #280f1c);margin:8px auto}.chatsdk-root .message{display:flex;flex-direction:column;max-width:70%;margin-bottom:4px;width:fit-content}.chatsdk-root .message.sent{align-self:flex-end;align-items:flex-end;margin-left:auto;margin-right:0}.chatsdk-root .message.received{align-self:flex-start;align-items:flex-start;margin-right:auto;margin-left:0}.chatsdk-root .message-content{padding:8px;word-wrap:break-word;font-family:Mulish,sans-serif;font-size:14px;font-weight:400;line-height:normal;position:relative}.chatsdk-root .message.sent .message-content{background-color:var(--mzad-brand-dark, #7c1445);color:#fff;border-radius:16px 16px 0}.chatsdk-root .message.received .message-content{background-color:var(--mzad-bg-item, #f5f5fa);color:var(--mzad-text-received, #0f1828);border-radius:16px 16px 16px 0}.chatsdk-root .message-footer{display:flex;align-items:center;gap:10px;margin-top:5px}.chatsdk-root .message.sent .message-footer{justify-content:flex-end}.chatsdk-root .message.received .message-footer{justify-content:flex-start}.chatsdk-root .message-time{font-family:Lato,sans-serif;font-size:10px;font-weight:400;line-height:16px}.chatsdk-root .message.sent .message-time{color:#fffc}.chatsdk-root .message.received .message-time{color:var(--mzad-text-message-time, #adb5bd)}.chatsdk-root .message-status,.chatsdk-root .message-status .read-status{display:flex;align-items:center}.chatsdk-root .message-status .read-status svg{width:20px;height:20px}.chatsdk-root .message.sent .message-status .read-check{color:#ffffffb3}.chatsdk-root .message.sent .message-status .read-check.is-read{color:#fff}.chatsdk-root .message-attachment{margin:0;border-radius:8px;overflow:hidden}.chatsdk-root .image-attachment{display:flex;flex-direction:column;gap:4px}.chatsdk-root .image-attachment img{max-width:250px;max-height:250px;border-radius:8px;cursor:pointer;transition:opacity .2s ease}.chatsdk-root .image-attachment img:hover:not(.uploading-image){opacity:.9}.chatsdk-root .image-attachment img.uploading-image{cursor:default;opacity:.7}.chatsdk-root .attachment-info{font-size:11px;margin-top:2px;opacity:.8}.chatsdk-root .message.sent .attachment-info{color:#fffc}.chatsdk-root .message.received .attachment-info{color:var(--mzad-text-secondary, #696366)}.chatsdk-root .file-attachment{display:flex;align-items:center;padding:8px;border-radius:4px;gap:12px;max-width:280px}.chatsdk-root .message.sent .file-attachment{background-color:var(--mzad-brand-light, #a46281)}.chatsdk-root .message.received .file-attachment{background-color:#e7e7ed}.chatsdk-root .file-info{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.chatsdk-root .file-icon{font-size:20px;flex-shrink:0}.chatsdk-root .file-details{flex:1;min-width:0}.chatsdk-root .file-name{font-weight:500;font-size:13px;word-break:break-word}.chatsdk-root .message.sent .file-name{color:#fff}.chatsdk-root .message.received .file-name{color:var(--mzad-text-primary, #280f1c)}.chatsdk-root .file-size{font-size:11px;opacity:.7}.chatsdk-root .message.sent .file-size{color:#ffffffb3}.chatsdk-root .message.received .file-size{color:var(--mzad-text-secondary, #696366)}.chatsdk-root .download-btn{padding:6px 10px;background-color:#fff3;color:#fff;text-decoration:none;border-radius:4px;font-size:11px;font-weight:500;transition:background-color .2s;white-space:nowrap}.chatsdk-root .message.received .download-btn{background-color:var(--mzad-brand, #932c5d);color:#fff}.chatsdk-root .download-btn:hover{opacity:.85}.chatsdk-root .upload-progress-bar{width:100%;background-color:#ffffff4d;border-radius:4px;height:3px;margin-bottom:8px;overflow:hidden}.chatsdk-root .upload-progress-fill{height:100%;background-color:#fff;transition:width .3s ease}.chatsdk-root .message.received .upload-progress-fill{background-color:var(--mzad-brand, #932c5d)}.chatsdk-root .call-log-bubble{display:flex;align-items:center;gap:12px;padding:8px}.chatsdk-root .call-log-bubble .call-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.chatsdk-root .call-log-bubble .call-info{display:flex;flex-direction:column;gap:5px}.chatsdk-root .call-log-bubble .call-label{font-family:Mulish,sans-serif;font-size:14px;font-weight:600;line-height:16px}.chatsdk-root .call-log-bubble .call-time{font-family:Lato,sans-serif;font-size:14px;font-weight:400;line-height:16px}.chatsdk-root .message.sent .call-label{color:#fff}.chatsdk-root .message.sent .call-time{color:#ffffffb3}.chatsdk-root .message.received .call-label{color:var(--mzad-brand, #932c5d)}.chatsdk-root .message.received .call-time{color:var(--mzad-text-message-time, #adb5bd)}.chatsdk-root .chat-input{display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--mzad-border, #e5e5ef);background:#fff;align-items:center;min-height:83px;box-sizing:border-box}.chatsdk-root .attachment-btn{background:none;border:none;cursor:pointer;padding:4px;font-size:20px;color:#666;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:opacity .2s}.chatsdk-root .attachment-btn:hover:not(:disabled){opacity:.7}.chatsdk-root .attachment-btn:disabled{opacity:.4;cursor:not-allowed}.chatsdk-root .chat-input input{flex:1;padding:12px 15px;border:none;border-radius:8px;background:var(--mzad-bg-input, #f0f0f0);color:var(--mzad-text-primary, #280f1c);font-family:Mulish,sans-serif;font-size:16px;font-weight:400;line-height:24px;outline:none}.chatsdk-root .chat-input input::placeholder{color:var(--mzad-text-message-time, #adb5bd)}.chatsdk-root .chat-input input:focus{box-shadow:0 0 0 2px #932c5d1a}.chatsdk-root .chat-input button[type=submit],.chatsdk-root .chat-input .send-btn{padding:10px 29px;background-color:var(--mzad-brand, #932c5d);border:none;border-radius:10px;color:#fff;font-family:Mulish,sans-serif;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .2s;white-space:nowrap;min-width:100px;height:51px;line-height:24px}.chatsdk-root .chat-input button[type=submit]:hover:not(:disabled),.chatsdk-root .chat-input .send-btn:hover:not(:disabled){opacity:.85}.chatsdk-root .chat-input button[type=submit]:disabled,.chatsdk-root .chat-input .send-btn:disabled{opacity:.5;cursor:not-allowed}.chatsdk-root .blocked-ui{padding:20px;background-color:#fafafa;text-align:center;border-top:1px solid var(--mzad-border, #e5e5ef)}.chatsdk-root .blocked-title{margin-bottom:12px;font-family:Mulish,sans-serif;font-size:16px;font-weight:500;color:var(--mzad-text-primary, #280f1c)}.chatsdk-root .blocked-message{margin-bottom:20px;font-family:Mulish,sans-serif;font-size:14px;color:var(--mzad-text-secondary, #696366);line-height:1.5}.chatsdk-root .blocked-by-other .blocked-message{margin-bottom:0}.chatsdk-root .unblock-btn{width:100%;padding:12px 24px;background-color:var(--mzad-brand, #932c5d);color:#fff;border:none;border-radius:8px;font-family:Mulish,sans-serif;font-size:16px;font-weight:500;cursor:pointer;transition:opacity .2s}.chatsdk-root .unblock-btn:hover{opacity:.85}.chatsdk-root .block-user-btn{font-family:Mulish,sans-serif;font-size:12px;padding:6px 12px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;white-space:nowrap;transition:background-color .2s}.chatsdk-root .block-user-btn:hover{background-color:#c82333}.chatsdk-root .close-button{background:none;border:none;color:#666;font-size:1.5rem;cursor:pointer;padding:4px;border-radius:50%;transition:background-color .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.chatsdk-root .close-button:hover{background-color:#0000000d}@media(max-width:768px){.chatsdk-root .conversations-layout{flex-direction:column;position:relative}.chatsdk-root .conversations-sidebar{width:100%;min-width:100%;border-right:none;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:transform .3s ease}.chatsdk-root .conversations-sidebar.hidden-mobile{transform:translate(-100%);pointer-events:none}.chatsdk-root .conversations-main{width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}.chatsdk-root .conversations-main.active-mobile{z-index:3}.chatsdk-root .chat-back-btn{display:flex!important}.chatsdk-root .message{max-width:85%}.chatsdk-root .chat-participant-name{font-size:18px}.chatsdk-root .chat-header-avatar{width:48px;height:48px}.chatsdk-root .chat-header-avatar .avatar-placeholder{width:40px;height:40px;margin:4px}}
|
|
1
|
+
.chatsdk-root{--color-primary: #2196F3;--color-on-primary: #FFFFFF;--color-primary-container: #BBDEFB;--color-on-primary-container: #0D47A1;--color-primary-dark: #1976D2;--color-secondary: #FF4081;--color-on-secondary: #FFFFFF;--color-secondary-container: #FCE4EC;--color-on-secondary-container: #880E4F;--color-accent: #FF4081;--color-surface: #FFFFFF;--color-on-surface: #212121;--color-surface-variant: #F5F5F5;--color-on-surface-variant: #757575;--color-surface-dark: #121212;--color-on-surface-dark: #FFFFFF;--color-surface-variant-dark: #1E1E1E;--color-on-surface-variant-dark: #BDBDBD;--color-background: #FFFFFF;--color-on-background: #212121;--color-background-dark: #121212;--color-on-background-dark: #FFFFFF;--color-error: #F44336;--color-on-error: #FFFFFF;--color-error-container: #FFEBEE;--color-on-error-container: #B71C1C;--message-sent-background: #2196F3;--message-received-background: #F5F5F5;--avatar-background: #E0E0E0;--avatar-border: #BDBDBD;--input-background: #FAFAFA;--input-border: #E0E0E0;--unread-badge-background: #F44336;--white: #FFFFFF;--black: #000000;--transparent: transparent;--success: #4CAF50;--warning: #FF9800;--error: #F44336;--info: #2196F3;--figma-background: #F0F0F0;--figma-text-primary: #1E1E1E;--figma-text-product: #95265B;--figma-text-timestamp: #878787;--figma-separator: #C4C4C4;--figma-online-indicator: #4CAF50;--chat-background: #F4F4F4;--chat-product-text: #923060;--chat-message-received: #FFFFFF;--chat-message-sent: #C4C4C4;--chat-input-background: #FBFBFB;--chat-input-placeholder: #C4C4C4;--chat-timestamp: #878787;--chat-primary-text: #1E1E1E;--mzad-brand: #932c5d;--mzad-brand-dark: #7c1445;--mzad-brand-light: #a46281;--mzad-brand-bg: #f9ebf1;--mzad-text-primary: #280f1c;--mzad-text-secondary: #696366;--mzad-text-time: #a4a4a4;--mzad-text-message-time: #adb5bd;--mzad-text-received: #0f1828;--mzad-bg-item: #f5f5fa;--mzad-bg-input: #f0f0f0;--mzad-border: #e5e5ef;--mzad-border-light: #ededed;--mzad-reply-bg: #e7e7ed;--mzad-divider-text: #bdadb7;--mzad-placeholder: #999;--primary-color: var(--color-primary);--primary-dark-color: var(--color-primary-dark);--accent-color: var(--success);--background-color: var(--figma-background);--text-color: var(--figma-text-primary);--border-color: var(--figma-separator)}.chatsdk-root .figma-conversation-list{background-color:var(--figma-background);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chatsdk-root .figma-conversation-item{background-color:var(--figma-background);border-bottom:none;padding:12px 16px;cursor:pointer;transition:background-color .2s ease}.chatsdk-root .figma-conversation-item:hover{background-color:#0000000d}.chatsdk-root .figma-conversation-item.selected{background-color:var(--figma-text-primary);color:#fff}.chatsdk-root .figma-conversation-avatar{width:50px;height:50px;border-radius:50%;margin-right:16px;position:relative;flex-shrink:0}.chatsdk-root .figma-online-indicator{position:absolute;bottom:2px;right:2px;width:12px;height:12px;background-color:var(--figma-online-indicator);border:2px solid white;border-radius:50%}.chatsdk-root .figma-conversation-name{font-size:16px;font-weight:600;color:var(--figma-text-primary);margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .figma-product-context{font-size:14px;color:var(--figma-text-product);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .figma-last-message{font-size:14px;color:var(--figma-text-timestamp);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .figma-timestamp{font-size:12px;color:var(--figma-text-timestamp);text-align:right;margin-left:8px;flex-shrink:0}.chatsdk-root .figma-separator{height:1px;background-color:var(--figma-separator);opacity:.5;margin-left:82px;margin-right:16px}.chatsdk-root .figma-chat-window{background-color:var(--chat-background);display:flex;flex-direction:column;height:100%}.chatsdk-root .figma-chat-header{background-color:var(--chat-background);border-bottom:1px solid var(--figma-separator);padding:12px 16px;display:flex;align-items:center;gap:12px}.chatsdk-root .figma-chat-back-button{background:none;border:none;color:var(--chat-primary-text);cursor:pointer;padding:8px;border-radius:50%}.chatsdk-root .figma-chat-back-button:hover{background-color:#0000001a}.chatsdk-root .figma-chat-user-avatar{width:40px;height:40px;border-radius:50%}.chatsdk-root .figma-chat-user-name{font-size:18px;font-weight:600;color:var(--chat-primary-text);flex:1}.chatsdk-root .figma-chat-call-button{background:none;border:none;color:var(--chat-primary-text);cursor:pointer;padding:8px;border-radius:50%}.chatsdk-root .figma-chat-call-button:hover{background-color:#0000001a}.chatsdk-root .figma-product-context-card{background-color:#fff;margin:12px 16px;padding:12px;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;gap:12px}.chatsdk-root .figma-product-image{width:56px;height:56px;border-radius:8px;object-fit:cover}.chatsdk-root .figma-product-info{flex:1}.chatsdk-root .figma-product-name{font-size:16px;font-weight:600;color:var(--chat-product-text);margin:0 0 4px;line-height:1.3}.chatsdk-root .figma-product-price{font-size:14px;color:var(--chat-timestamp);margin:0}.chatsdk-root .figma-messages-container{flex:1;overflow-y:auto;padding:16px}.chatsdk-root .figma-message-bubble{max-width:264px;margin-bottom:8px;padding:15px;border-radius:8px;word-wrap:break-word}.chatsdk-root .figma-message-received{background-color:var(--chat-message-received);color:var(--chat-primary-text);margin-right:90px;box-shadow:0 2px 4px #0000001a}.chatsdk-root .figma-message-sent{background-color:var(--chat-message-sent);color:var(--chat-primary-text);margin-left:auto}.chatsdk-root .figma-message-timestamp{font-size:14px;color:var(--chat-timestamp);margin-top:5px}.chatsdk-root .figma-input-container{background-color:var(--chat-input-background);border-top:1px solid var(--figma-separator);padding:12px 16px;display:flex;align-items:center;gap:12px}.chatsdk-root .figma-input-field{flex:1;border:none;background:transparent;outline:none;font-size:16px;color:var(--chat-primary-text);padding:8px 0}.chatsdk-root .figma-input-field::placeholder{color:var(--chat-input-placeholder)}.chatsdk-root .figma-input-button{background:none;border:none;color:var(--chat-primary-text);cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center}.chatsdk-root .figma-input-button:hover{background-color:#0000001a}.chatsdk-root[data-theme=dark]{--color-primary: #90CAF9;--color-on-primary: #0D47A1;--color-primary-container: #1565C0;--color-on-primary-container: #E3F2FD;--color-primary-dark: #42A5F5;--color-secondary: #F8BBD9;--color-on-secondary: #4A148C;--color-secondary-container: #7B1FA2;--color-on-secondary-container: #FCE4EC;--color-accent: #F8BBD9;--color-surface: var(--color-surface-dark);--color-on-surface: var(--color-on-surface-dark);--color-surface-variant: var(--color-surface-variant-dark);--color-on-surface-variant: var(--color-on-surface-variant-dark);--color-background: var(--color-background-dark);--color-on-background: var(--color-on-background-dark);--color-error: #CF6679;--color-on-error: #000000;--color-error-container: #B00020;--color-on-error-container: #FECDD3;--message-sent-background: var(--color-primary);--message-received-background: #2C2C2C;--avatar-background: #424242;--avatar-border: #616161;--input-background: #1E1E1E;--input-border: #424242;--unread-badge-background: var(--color-error);--figma-background: #1E1E1E;--figma-text-primary: #FFFFFF;--figma-text-product: #F8BBD9;--figma-text-timestamp: #BDBDBD;--figma-separator: #424242;--figma-online-indicator: #4CAF50;--chat-background: #121212;--chat-product-text: #F8BBD9;--chat-message-received: #2C2C2C;--chat-message-sent: #424242;--chat-input-background: #1E1E1E;--chat-input-placeholder: #757575;--chat-timestamp: #BDBDBD;--chat-primary-text: #FFFFFF;--background-color: var(--figma-background);--text-color: var(--figma-text-primary);--border-color: var(--figma-separator)}.chatsdk-root[data-theme=dark] .figma-conversation-item:hover{background-color:#ffffff14}.chatsdk-root[data-theme=dark] .figma-conversation-item.selected{background-color:var(--color-primary);color:var(--color-on-primary)}.chatsdk-root[data-theme=dark] .figma-chat-back-button:hover,.chatsdk-root[data-theme=dark] .figma-chat-call-button:hover,.chatsdk-root[data-theme=dark] .figma-input-button:hover{background-color:#ffffff1a}.chatsdk-root[data-theme=dark] .figma-product-context-card{background-color:var(--color-surface);box-shadow:0 2px 4px #0000004d}.chatsdk-root[data-theme=dark] .figma-message-received{box-shadow:0 2px 4px #0000004d}.chatsdk-root .text-primary{color:var(--color-primary)}.chatsdk-root .bg-primary{background-color:var(--color-primary)}.chatsdk-root .border-primary{border-color:var(--color-primary)}.chatsdk-root .text-on-primary{color:var(--color-on-primary)}.chatsdk-root .bg-on-primary{background-color:var(--color-on-primary)}.chatsdk-root .text-primary-container{color:var(--color-primary-container)}.chatsdk-root .bg-primary-container{background-color:var(--color-primary-container)}.chatsdk-root .text-secondary{color:var(--color-secondary)}.chatsdk-root .bg-secondary{background-color:var(--color-secondary)}.chatsdk-root .border-secondary{border-color:var(--color-secondary)}.chatsdk-root .text-on-secondary{color:var(--color-on-secondary)}.chatsdk-root .bg-on-secondary{background-color:var(--color-on-secondary)}.chatsdk-root .text-surface{color:var(--color-surface)}.chatsdk-root .bg-surface{background-color:var(--color-surface)}.chatsdk-root .border-surface{border-color:var(--color-surface)}.chatsdk-root .text-on-surface{color:var(--color-on-surface)}.chatsdk-root .bg-on-surface{background-color:var(--color-on-surface)}.chatsdk-root .text-surface-variant{color:var(--color-surface-variant)}.chatsdk-root .bg-surface-variant{background-color:var(--color-surface-variant)}.chatsdk-root .text-background{color:var(--color-background)}.chatsdk-root .bg-background{background-color:var(--color-background)}.chatsdk-root .text-on-background{color:var(--color-on-background)}.chatsdk-root .bg-on-background{background-color:var(--color-on-background)}.chatsdk-root .text-error{color:var(--color-error)}.chatsdk-root .bg-error{background-color:var(--color-error)}.chatsdk-root .border-error{border-color:var(--color-error)}.chatsdk-root .text-on-error{color:var(--color-on-error)}.chatsdk-root .bg-on-error{background-color:var(--color-on-error)}.chatsdk-root .text-success{color:var(--success)}.chatsdk-root .bg-success{background-color:var(--success)}.chatsdk-root .border-success{border-color:var(--success)}.chatsdk-root .text-warning{color:var(--warning)}.chatsdk-root .bg-warning{background-color:var(--warning)}.chatsdk-root .border-warning{border-color:var(--warning)}.chatsdk-root .text-info{color:var(--info)}.chatsdk-root .bg-info{background-color:var(--info)}.chatsdk-root .border-info{border-color:var(--info)}.chatsdk-root .text-figma-primary{color:var(--figma-text-primary)}.chatsdk-root .bg-figma-background{background-color:var(--figma-background)}.chatsdk-root .text-figma-product{color:var(--figma-text-product)}.chatsdk-root .text-figma-timestamp{color:var(--figma-text-timestamp)}.chatsdk-root .border-figma-separator{border-color:var(--figma-separator)}.chatsdk-root .bg-chat-background{background-color:var(--chat-background)}.chatsdk-root .text-chat-primary{color:var(--chat-primary-text)}.chatsdk-root .text-chat-product{color:var(--chat-product-text)}.chatsdk-root .bg-message-sent{background-color:var(--chat-message-sent)}.chatsdk-root .bg-message-received{background-color:var(--chat-message-received)}.chatsdk-root .bg-chat-input{background-color:var(--chat-input-background)}.chatsdk-root .text-chat-placeholder{color:var(--chat-input-placeholder)}.chatsdk-root .bg-avatar{background-color:var(--avatar-background)}.chatsdk-root .border-avatar{border-color:var(--avatar-border)}.chatsdk-root .bg-unread-badge{background-color:var(--unread-badge-background)}.chatsdk-root .text-white{color:var(--white)}.chatsdk-root .bg-white{background-color:var(--white)}.chatsdk-root .text-black{color:var(--black)}.chatsdk-root .bg-black{background-color:var(--black)}.chatsdk-root .bg-transparent{background-color:var(--transparent)}.chatsdk-root .theme-light{color-scheme:light}.chatsdk-root .theme-dark{color-scheme:dark}.chatsdk-root .elevation-1{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.chatsdk-root .elevation-2{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.chatsdk-root .elevation-3{box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b}.chatsdk-root .elevation-4{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.chatsdk-root .elevation-5{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038}.chatsdk-root[data-theme=dark] .elevation-1{box-shadow:0 1px 3px #0000004d,0 1px 2px #00000080}.chatsdk-root[data-theme=dark] .elevation-2{box-shadow:0 3px 6px #0006,0 3px 6px #00000080}.chatsdk-root[data-theme=dark] .elevation-3{box-shadow:0 10px 20px #00000080,0 6px 6px #00000080}.chatsdk-root[data-theme=dark] .elevation-4{box-shadow:0 14px 28px #0009,0 10px 10px #00000080}.chatsdk-root[data-theme=dark] .elevation-5{box-shadow:0 19px 38px #000000b3,0 15px 12px #00000080}.chatsdk-root .conversations-section{height:calc(100vh - 200px)}.chatsdk-root .conversations-layout{display:flex;height:100%;background-color:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000000f}.chatsdk-root .conversations-sidebar{width:375px;min-width:375px;border-right:1px solid var(--mzad-border, #e5e5ef);background-color:#fff;display:flex;flex-direction:column}.chatsdk-root .conversations-main{flex:1;display:flex;flex-direction:column;background-color:#fff;min-width:0}.chatsdk-root .conversation-list{display:flex;flex-direction:column;height:100%;font-family:Mulish,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chatsdk-root .conversation-list-header{padding:8px 32px;height:75px;display:flex;align-items:center;background-color:#fff;border-bottom:1px solid var(--mzad-border, #e5e5ef);box-sizing:border-box}.chatsdk-root .conversation-list-header h3{margin:0;font-family:Mulish,sans-serif;font-size:22px;font-weight:600;color:var(--mzad-text-primary, #280f1c)}.chatsdk-root .conversation-search{padding:16px 16px 0}.chatsdk-root .conversation-search-input{display:flex;align-items:center;gap:10px;background-color:var(--mzad-bg-input, #f0f0f0);border-radius:8px;padding:6px 15px;height:44px;box-sizing:border-box}.chatsdk-root .conversation-search-input .search-icon{width:24px;height:24px;flex-shrink:0;color:#999;display:flex;align-items:center;justify-content:center}.chatsdk-root .conversation-search-input .search-icon svg{width:18px;height:18px}.chatsdk-root .conversation-search-input input{border:none;background:transparent;outline:none;font-family:Mulish,sans-serif;font-size:15px;font-weight:400;color:var(--mzad-text-primary, #280f1c);width:100%;line-height:24px}.chatsdk-root .conversation-search-input input::placeholder{color:var(--mzad-placeholder, #999)}.chatsdk-root .conversations{overflow-y:auto;flex:1;padding:16px;display:flex;flex-direction:column;gap:8px}.chatsdk-root .conversation-item{display:flex;align-items:flex-start;padding:8px;border-radius:15px;cursor:pointer;transition:background-color .2s ease;background-color:var(--mzad-bg-item, #f5f5fa);gap:12px;border:none}.chatsdk-root .conversation-item:hover{background-color:#eeeef5}.chatsdk-root .conversation-item.selected{background-color:#e8dce3}.chatsdk-root .conversation-item.has-unread{background-color:var(--mzad-bg-item, #f5f5fa)}.chatsdk-root .conversation-item.has-unread.selected{background-color:#e8dce3}.chatsdk-root .conversation-avatar{position:relative;flex-shrink:0;width:56px;height:56px}.chatsdk-root .conversation-avatar img{width:48px;height:48px;border-radius:16px;object-fit:cover;margin:4px}.chatsdk-root .conversation-avatar .product-image{width:48px;height:48px;border-radius:16px;object-fit:cover;margin:4px;border:none}.chatsdk-root .avatar-placeholder{width:48px;height:48px;border-radius:16px;background-color:var(--mzad-brand-dark, #7c1445);display:flex;align-items:center;justify-content:center;font-family:Lato,sans-serif;font-weight:700;font-size:14px;color:#fff;margin:4px}.chatsdk-root .avatar-online-status{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background-color:#4caf50;border:2px solid #ffffff}.chatsdk-root .conversation-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-self:stretch}.chatsdk-root .conversation-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2px}.chatsdk-root .conversation-title-wrapper{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.chatsdk-root .conversation-participant-name{margin:0;font-family:Mulish,sans-serif;font-size:16px;font-weight:600;color:var(--mzad-text-primary, #280f1c);line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .conversation-product-name{margin:0;font-family:Mulish,sans-serif;font-size:12px;font-weight:400;color:var(--mzad-brand, #932c5d);line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .conversation-time{font-family:Mulish,sans-serif;font-size:10px;font-weight:400;color:var(--mzad-text-time, #a4a4a4);flex-shrink:0;line-height:16px;text-align:right}.chatsdk-root .conversation-details{display:flex;align-items:center;justify-content:space-between;gap:2px}.chatsdk-root .conversation-last-message{margin:0;font-family:Mulish,sans-serif;font-size:12px;font-weight:400;color:var(--mzad-text-secondary, #696366);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;line-height:normal}.chatsdk-root .unread-badge{background-color:var(--mzad-brand, #932c5d);color:#fff;font-family:Mulish,sans-serif;font-size:10px;font-weight:600;padding:2px 6px;border-radius:40px;min-width:16px;text-align:center;line-height:16px;flex-shrink:0}.chatsdk-root .empty-conversations{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;color:var(--mzad-text-secondary, #696366)}.chatsdk-root .empty-conversations p{margin:.25rem 0}.chatsdk-root .loading-spinner{text-align:center;padding:2rem;opacity:.7;font-size:1rem;color:var(--mzad-text-secondary, #696366)}.chatsdk-root .conversation-list.loading{display:flex;justify-content:center;align-items:center;height:100%}.chatsdk-root{height:100%;display:flex;flex-direction:column}.chatsdk-root .chat-window{display:flex;flex-direction:column;height:100%;flex:1;min-height:0;background-color:#fff;font-family:Mulish,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chatsdk-root .chat-window.empty{justify-content:center;align-items:center;text-align:center;background-color:#fafafa}.chatsdk-root .empty-state{text-align:center;padding:2rem;max-width:400px}.chatsdk-root .empty-state h3{margin-bottom:.5rem;font-size:1.25rem;color:var(--mzad-text-primary, #280f1c);font-weight:600}.chatsdk-root .empty-state p{opacity:.7;font-size:.95rem;color:var(--mzad-text-secondary, #696366)}.chatsdk-root .chat-header{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;height:75px;border-bottom:1px solid var(--mzad-border, #e5e5ef);background-color:#fff;box-sizing:border-box}.chatsdk-root .chat-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.chatsdk-root .chat-back-btn{display:none;background:none;border:none;cursor:pointer;padding:4px;color:var(--mzad-text-primary, #280f1c);flex-shrink:0}.chatsdk-root .chat-back-btn svg{width:24px;height:24px}.chatsdk-root .chat-header-avatar{width:56px;height:56px;flex-shrink:0;position:relative}.chatsdk-root .chat-header-avatar .avatar-placeholder{width:48px;height:48px;border-radius:16px;background-color:var(--mzad-brand-dark, #7c1445);display:flex;align-items:center;justify-content:center;font-family:Lato,sans-serif;font-weight:700;font-size:14px;color:#fff;margin:4px}.chatsdk-root .chat-header-avatar img{width:48px;height:48px;border-radius:16px;object-fit:cover;margin:4px}.chatsdk-root .chat-header-info{display:flex;flex-direction:column;gap:2px;min-width:0}.chatsdk-root .chat-participant-name{margin:0;font-family:Mulish,sans-serif;font-size:20px;font-weight:600;color:var(--mzad-text-primary, #280f1c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:normal}.chatsdk-root .chat-header-actions{display:flex;gap:12px;align-items:center;flex-shrink:0}.chatsdk-root .chat-action-btn{background:none;border:none;cursor:pointer;padding:4px;color:#222;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.chatsdk-root .chat-action-btn:hover{background-color:#0000000d}.chatsdk-root .chat-action-btn svg{width:24px;height:24px}.chatsdk-root .chat-options-wrapper{position:relative}.chatsdk-root .chat-options-menu{position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border-radius:8px;box-shadow:0 4px 16px #0000001f;min-width:180px;z-index:100;overflow:hidden}.chatsdk-root .chat-options-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;border:none;background:none;cursor:pointer;font-family:Mulish,sans-serif;font-size:14px;color:#333;transition:background-color .15s}.chatsdk-root .chat-options-menu button:hover{background-color:#f5f5f5}.chatsdk-root .chat-options-menu button.danger{color:#dc3545}.chatsdk-root .chat-options-menu button.danger:hover{background-color:#fff5f5}.chatsdk-root .chat-product-bar{display:flex;align-items:center;gap:10px;padding:10px 20px;background-color:#fff;border-bottom:1px solid var(--mzad-border-light, #ededed)}.chatsdk-root .chat-product-bar img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0}.chatsdk-root .chat-product-bar-info{display:flex;flex-direction:column;gap:3px;font-family:Mulish,sans-serif;font-size:14px;min-width:0}.chatsdk-root .chat-product-bar-name{margin:0;color:var(--mzad-brand, #932c5d);font-weight:400;line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatsdk-root .chat-product-bar-price{margin:0;color:#878787;font-weight:400;line-height:normal}.chatsdk-root .chat-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;background-color:#fff;position:relative;overscroll-behavior:contain}.chatsdk-root .loading-messages{text-align:center;padding:2rem;opacity:.7;color:var(--mzad-text-secondary, #696366)}.chatsdk-root .sticky-date-header{position:sticky;top:0;z-index:10;display:flex;justify-content:center;align-items:center;pointer-events:none;padding:4px 0 8px;opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease}.chatsdk-root .sticky-date-header.sticky-date-visible{opacity:1;transform:translateY(0)}.chatsdk-root .sticky-date-pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 12px;background-color:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:.5px solid rgba(237,237,237,.7);border-radius:15px;font-family:Mulish,sans-serif;font-size:12px;font-weight:600;color:var(--mzad-text-primary, #280f1c);box-shadow:0 1px 4px #0000000f;white-space:nowrap;line-height:normal}.chatsdk-root .date-divider{display:flex;align-items:center;gap:16px;padding:12px 0;width:100%}.chatsdk-root .date-divider-line{flex:1;height:1px;background-color:#e5e5ef}.chatsdk-root .date-divider-text{font-family:Mulish,sans-serif;font-size:13px;font-weight:400;color:var(--mzad-divider-text, #bdadb7);white-space:nowrap;line-height:20px;padding:0 4px}.chatsdk-root .date-divider-pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;background-color:#d3d3d333;border:.5px solid rgba(237,237,237,.5);border-radius:15px;font-family:Mulish,sans-serif;font-size:12px;font-weight:600;color:var(--mzad-text-primary, #280f1c);margin:8px auto}.chatsdk-root .message{display:flex;flex-direction:column;max-width:70%;margin-bottom:4px;width:fit-content}.chatsdk-root .message.sent{align-self:flex-end;align-items:flex-end;margin-left:auto;margin-right:0}.chatsdk-root .message.received{align-self:flex-start;align-items:flex-start;margin-right:auto;margin-left:0}.chatsdk-root .message-content{padding:8px;word-wrap:break-word;font-family:Mulish,sans-serif;font-size:14px;font-weight:400;line-height:normal;position:relative}.chatsdk-root .message.sent .message-content{background-color:var(--mzad-brand-dark, #7c1445);color:#fff;border-radius:16px 16px 0}.chatsdk-root .message.received .message-content{background-color:var(--mzad-bg-item, #f5f5fa);color:var(--mzad-text-received, #0f1828);border-radius:16px 16px 16px 0}.chatsdk-root .message-footer{display:flex;align-items:center;gap:10px;margin-top:5px}.chatsdk-root .message.sent .message-footer{justify-content:flex-end}.chatsdk-root .message.received .message-footer{justify-content:flex-start}.chatsdk-root .message-time{font-family:Lato,sans-serif;font-size:10px;font-weight:400;line-height:16px}.chatsdk-root .message.sent .message-time{color:#fffc}.chatsdk-root .message.received .message-time{color:var(--mzad-text-message-time, #adb5bd)}.chatsdk-root .message-status,.chatsdk-root .message-status .read-status{display:flex;align-items:center}.chatsdk-root .message-status .read-status svg{width:20px;height:20px}.chatsdk-root .message.sent .message-status .read-check{color:#ffffffb3}.chatsdk-root .message.sent .message-status .read-check.is-read{color:#fff}.chatsdk-root .message-attachment{margin:0;border-radius:8px;overflow:hidden}.chatsdk-root .image-attachment{display:flex;flex-direction:column;gap:4px}.chatsdk-root .image-attachment img{max-width:250px;max-height:250px;border-radius:8px;cursor:pointer;transition:opacity .2s ease}.chatsdk-root .image-attachment img:hover:not(.uploading-image){opacity:.9}.chatsdk-root .image-attachment img.uploading-image{cursor:default;opacity:.7}.chatsdk-root .attachment-info{font-size:11px;margin-top:2px;opacity:.8}.chatsdk-root .message.sent .attachment-info{color:#fffc}.chatsdk-root .message.received .attachment-info{color:var(--mzad-text-secondary, #696366)}.chatsdk-root .file-attachment{display:flex;align-items:center;padding:8px;border-radius:4px;gap:12px;max-width:280px}.chatsdk-root .message.sent .file-attachment{background-color:var(--mzad-brand-light, #a46281)}.chatsdk-root .message.received .file-attachment{background-color:#e7e7ed}.chatsdk-root .file-info{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.chatsdk-root .file-icon{font-size:20px;flex-shrink:0}.chatsdk-root .file-details{flex:1;min-width:0}.chatsdk-root .file-name{font-weight:500;font-size:13px;word-break:break-word}.chatsdk-root .message.sent .file-name{color:#fff}.chatsdk-root .message.received .file-name{color:var(--mzad-text-primary, #280f1c)}.chatsdk-root .file-size{font-size:11px;opacity:.7}.chatsdk-root .message.sent .file-size{color:#ffffffb3}.chatsdk-root .message.received .file-size{color:var(--mzad-text-secondary, #696366)}.chatsdk-root .download-btn{padding:6px 10px;background-color:#fff3;color:#fff;text-decoration:none;border-radius:4px;font-size:11px;font-weight:500;transition:background-color .2s;white-space:nowrap}.chatsdk-root .message.received .download-btn{background-color:var(--mzad-brand, #932c5d);color:#fff}.chatsdk-root .download-btn:hover{opacity:.85}.chatsdk-root .upload-progress-bar{width:100%;background-color:#ffffff4d;border-radius:4px;height:3px;margin-bottom:8px;overflow:hidden}.chatsdk-root .upload-progress-fill{height:100%;background-color:#fff;transition:width .3s ease}.chatsdk-root .message.received .upload-progress-fill{background-color:var(--mzad-brand, #932c5d)}.chatsdk-root .call-log-bubble{display:flex;align-items:center;gap:12px;padding:8px}.chatsdk-root .call-log-bubble .call-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.chatsdk-root .call-log-bubble .call-info{display:flex;flex-direction:column;gap:5px}.chatsdk-root .call-log-bubble .call-label{font-family:Mulish,sans-serif;font-size:14px;font-weight:600;line-height:16px}.chatsdk-root .call-log-bubble .call-time{font-family:Lato,sans-serif;font-size:14px;font-weight:400;line-height:16px}.chatsdk-root .message.sent .call-label{color:#fff}.chatsdk-root .message.sent .call-time{color:#ffffffb3}.chatsdk-root .message.received .call-label{color:var(--mzad-brand, #932c5d)}.chatsdk-root .message.received .call-time{color:var(--mzad-text-message-time, #adb5bd)}.chatsdk-root .chat-input{display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--mzad-border, #e5e5ef);background:#fff;align-items:center;min-height:83px;box-sizing:border-box}.chatsdk-root .attachment-btn{background:none;border:none;cursor:pointer;padding:4px;font-size:20px;color:#666;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:opacity .2s}.chatsdk-root .attachment-btn:hover:not(:disabled){opacity:.7}.chatsdk-root .attachment-btn:disabled{opacity:.4;cursor:not-allowed}.chatsdk-root .chat-input input{flex:1;padding:12px 15px;border:none;border-radius:8px;background:var(--mzad-bg-input, #f0f0f0);color:var(--mzad-text-primary, #280f1c);font-family:Mulish,sans-serif;font-size:16px;font-weight:400;line-height:24px;outline:none}.chatsdk-root .chat-input input::placeholder{color:var(--mzad-text-message-time, #adb5bd)}.chatsdk-root .chat-input input:focus{box-shadow:0 0 0 2px #932c5d1a}.chatsdk-root .chat-input button[type=submit],.chatsdk-root .chat-input .send-btn{padding:10px 29px;background-color:var(--mzad-brand, #932c5d);border:none;border-radius:10px;color:#fff;font-family:Mulish,sans-serif;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .2s;white-space:nowrap;min-width:100px;height:51px;line-height:24px}.chatsdk-root .chat-input button[type=submit]:hover:not(:disabled),.chatsdk-root .chat-input .send-btn:hover:not(:disabled){opacity:.85}.chatsdk-root .chat-input button[type=submit]:disabled,.chatsdk-root .chat-input .send-btn:disabled{opacity:.5;cursor:not-allowed}.chatsdk-root .blocked-ui{padding:20px;background-color:#fafafa;text-align:center;border-top:1px solid var(--mzad-border, #e5e5ef)}.chatsdk-root .blocked-title{margin-bottom:12px;font-family:Mulish,sans-serif;font-size:16px;font-weight:500;color:var(--mzad-text-primary, #280f1c)}.chatsdk-root .blocked-message{margin-bottom:20px;font-family:Mulish,sans-serif;font-size:14px;color:var(--mzad-text-secondary, #696366);line-height:1.5}.chatsdk-root .blocked-by-other .blocked-message{margin-bottom:0}.chatsdk-root .unblock-btn{width:100%;padding:12px 24px;background-color:var(--mzad-brand, #932c5d);color:#fff;border:none;border-radius:8px;font-family:Mulish,sans-serif;font-size:16px;font-weight:500;cursor:pointer;transition:opacity .2s}.chatsdk-root .unblock-btn:hover{opacity:.85}.chatsdk-root .block-user-btn{font-family:Mulish,sans-serif;font-size:12px;padding:6px 12px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;white-space:nowrap;transition:background-color .2s}.chatsdk-root .block-user-btn:hover{background-color:#c82333}.chatsdk-root .close-button{background:none;border:none;color:#666;font-size:1.5rem;cursor:pointer;padding:4px;border-radius:50%;transition:background-color .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.chatsdk-root .close-button:hover{background-color:#0000000d}@media(max-width:768px){.chatsdk-root .conversations-layout{flex-direction:column;position:relative}.chatsdk-root .conversations-sidebar{width:100%;min-width:100%;border-right:none;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:transform .3s ease}.chatsdk-root .conversations-sidebar.hidden-mobile{transform:translate(-100%);pointer-events:none}.chatsdk-root .conversations-main{width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}.chatsdk-root .conversations-main.active-mobile{z-index:3}.chatsdk-root .chat-back-btn{display:flex!important}.chatsdk-root .message{max-width:85%}.chatsdk-root .chat-participant-name{font-size:18px}.chatsdk-root .chat-header-avatar{width:48px;height:48px}.chatsdk-root .chat-header-avatar .avatar-placeholder{width:40px;height:40px;margin:4px}}
|
package/package.json
CHANGED