@botpress/webchat 4.0.1 → 4.0.3

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 (10) hide show
  1. package/.storybook/preview.tsx +2 -2
  2. package/.turbo/turbo-build.log +10 -10
  3. package/dist/index.d.ts +5 -3
  4. package/dist/index.js +6271 -5959
  5. package/dist/index.umd.cjs +95 -94
  6. package/dist/style.css +1 -1
  7. package/eslint.config.mjs +15 -0
  8. package/package.json +3 -2
  9. package/readme.md +194 -35
  10. package/.eslintrc.cjs +0 -12
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .bpSkeleton{background-color:var(--bpGray-200);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));animation:skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}:where(.bpReset) *,:where(.bpReset) :after,:where(.bpReset) :before,:where(.bpReset) ::backdrop,:where(.bpReset) ::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}:where(.bpReset) html,:where(.bpReset) :host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}:where(.bpReset) body{line-height:inherit}:where(.bpReset) hr{height:0;color:inherit;border-top-width:1px}:where(.bpReset) abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(.bpReset) h1,:where(.bpReset) h2,:where(.bpReset) h3,:where(.bpReset) h4,:where(.bpReset) h5,:where(.bpReset) h6{font-size:inherit;font-weight:inherit}:where(.bpReset) a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}:where(.bpReset) b,:where(.bpReset) strong{font-weight:bolder}:where(.bpReset) code,:where(.bpReset) kbd,:where(.bpReset) samp,:where(.bpReset) pre{font-family:var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}:where(.bpReset) small{font-size:80%}:where(.bpReset) sub,:where(.bpReset) sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}:where(.bpReset) sub{bottom:-.25em}:where(.bpReset) sup{top:-.5em}:where(.bpReset) table{text-indent:0;border-color:inherit;border-collapse:collapse}:where(.bpReset) button,:where(.bpReset) input,:where(.bpReset) optgroup,:where(.bpReset) select,:where(.bpReset) textarea,:where(.bpReset) ::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}:where(.bpReset) input:where(:not([type=button],[type=reset],[type=submit])),:where(.bpReset) select,:where(.bpReset) textarea{border:0px solid}:where(.bpReset) button,:where(.bpReset) input:where([type=button],[type=reset],[type=submit]),:where(.bpReset) ::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}:where(.bpReset) :-moz-focusring{outline:auto}:where(.bpReset) :-moz-ui-invalid{box-shadow:none}:where(.bpReset) progress{vertical-align:baseline}:where(.bpReset) ::-webkit-inner-spin-button,:where(.bpReset) ::-webkit-outer-spin-button{height:auto}:where(.bpReset) ::-webkit-search-decoration{-webkit-appearance:none}:where(.bpReset) summary{display:list-item}:where(.bpReset) ol,:where(.bpReset) ul,:where(.bpReset) menu{list-style:none}:where(.bpReset) textarea{resize:vertical}:where(.bpReset) ::placeholder{opacity:1;color:color-mix(in srgb,currentColor 50%,transparent)}:where(.bpReset) img,:where(.bpReset) svg,:where(.bpReset) video,:where(.bpReset) canvas,:where(.bpReset) audio,:where(.bpReset) iframe,:where(.bpReset) embed,:where(.bpReset) object{display:block;vertical-align:middle}:where(.bpReset) img,:where(.bpReset) video{max-width:100%;height:auto}:where(.bpReset) [hidden]{display:none!important}:where(.bpReset) :focus:not(:focus-visible){outline:0;box-shadow:none}:where(.bpReset) *::-webkit-scrollbar{width:6px;height:6px}:where(.bpReset) *::-webkit-scrollbar-track{background-color:transparent}:where(.bpReset) *::-webkit-scrollbar-thumb{background-color:var(--scrollbar);border-radius:6px}:where(.bpReset) *::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-hover)}@supports not selector(::-webkit-scrollbar){:where(.bpReset) *{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}}html{font-size:16px}:root,:host{--transparent-light: #fcfcfdd9;--transparent-light-hover: #b9bbc620;--transparent-dark: #101010d9;--transparent-dark-hover: #80828d14;--bpPrimary-1: #fdfdfd;--bpPrimary-50: #f5f8fe;--bpPrimary-100: #ebf1fd;--bpPrimary-200: #ccddfa;--bpPrimary-300: #adc8f7;--bpPrimary-400: #709ff0;--bpPrimary-500: #3276ea;--bpPrimary-600: #2d6ad3;--bpPrimary-700: #1e478c;--bpPrimary-800: #173569;--bpPrimary-900: #0f2346;--bpPrimary-950: #0a182f;--bpGray-1: #fdfdfd;--bpGray-50: #f8f8f9;--bpGray-100: #f0f0f3;--bpGray-200: #dadbe0;--bpGray-300: #c3c5cd;--bpGray-400: #9699a8;--bpGray-500: #696d83;--bpGray-600: #5f6276;--bpGray-700: #3f414f;--bpGray-800: #2f313b;--bpGray-900: #202127;--bpGray-950: #15161a;--bpError: #f05656;--bpRadius-scale: 1;--bpRadius-sm: .125rem;--bpRadius-md: .375rem;--bpRadius-lg: .5rem;--bpRadius-xl: .75rem;--bpRadius-2xl: 1rem;--bpRadius-3xl: 1.5rem;--bpRadius-full: 9999px;--bpSpacing-0: 0px;--bpSpacing-px: 1px;--bpSpacing-0_5: .125rem;--bpSpacing-1: .25rem;--bpSpacing-1_5: .375rem;--bpSpacing-2: .5rem;--bpSpacing-2_5: .625rem;--bpSpacing-3: .75rem;--bpSpacing-3_5: .875rem;--bpSpacing-4: 1rem;--bpSpacing-4_5: 1.125rem;--bpSpacing-5: 1.25rem;--bpSpacing-6: 1.5rem;--bpSpacing-7: 1.75rem;--bpSpacing-8: 2rem;--bpSpacing-9: 2.25rem;--bpSpacing-10: 2.5rem;--bpSpacing-11: 2.75rem;--bpSpacing-12: 3rem;--bpSpacing-14: 3.5rem;--bpSpacing-16: 4rem;--bpSpacing-20: 5rem;--bpSpacing-24: 6rem;--bpSpacing-28: 7rem;--bpSpacing-32: 8rem;--bpSpacing-36: 9rem;--bpSpacing-40: 10rem;--bpSpacing-44: 11rem;--bpSpacing-48: 12rem;--bpSpacing-52: 13rem;--bpSpacing-56: 14rem;--bpSpacing-60: 15rem;--bpSpacing-64: 16rem;--bpSpacing-72: 18rem;--bpSpacing-80: 20rem;--bpSpacing-96: 24rem;--header-bg: var(--transparent-light);--header-bg-hover: var(--transparent-light-hover);--header-hover-dark: var(--bpGray-200);--header-title: var(--bpGray-900);--header-description: var(--bpGray-800);--header-description-icon: var(--bpPrimary-800);--header-description-link: var(--bpPrimary-900);--header-avatar-bg: var(--bpPrimary-600);--header-avatar-text: var(--bpPrimary-50);--message-bg: var(--bpPrimary-100);--message-bg-hover: var(--bpPrimary-200);--message-text: var(--bpPrimary-900);--send-button-bg: var(--bpPrimary-600);--send-button-bg-hover: var(--bpPrimary-700);--send-button-text: var(--bpPrimary-50);--button-bg: var(--bpPrimary-500);--button-bg-hover: var(--bpPrimary-600);--button-text: var(--bpPrimary-50);--fab-bg: var(--bpPrimary-100);--fab-bg-hover: var(--bpPrimary-200);--fab-icon: var(--bpPrimary-700);--scrollbar: var(--bpGray-200);--scrollbar-hover: var(--bpGray-400);--modal-submit-bg: var(--bpPrimary-200);--modal-submit-bg-hover: var(--bpPrimary-300);--error-header-bg: #3d63dd;--error-header-text: white;--error-content-icon: var(--bpGray-400);--error-content-title: var(--bpGray-700);--error-content-message: var(--bpGray-600)}.bpContainer :focus-visible,.bpMessageBlocksDropdownContentContainer :focus-visible{outline:2px solid var(--bpPrimary-700)}.bpMessageBlocksDropdownContentContainer:focus-visible{outline:none}.bpMessageBlocksDropdownContentContainer{font-family:var(--inter-font)}.bpHidden{display:none}.bpHeightFull{height:100%}.bpFont{font-family:var(--inter-font)}.bpNotificationContainer{display:grid;padding:var(--bpSpacing-4);background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);gap:var(--bpSpacing-2);grid-template-columns:auto 1fr auto;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));box-shadow:0 4px 6px #0000001a}.bpNotificationTitle{color:var(--bpGray-900);font-size:.875rem;line-height:1.25rem;font-weight:500;grid-column-start:2}.bpNotificationDescription{margin-top:var(--bpSpacing-1);color:var(--bpGray-800);font-size:.875rem;line-height:1.25rem;grid-column-start:2}.bpNotificationIcon{height:var(--bpSpacing-5);aspect-ratio:1/1}.bpNotificationIcon[data-type=success]{color:var(--green-500)}.bpNotificationIcon[data-type=error]{color:var(--red-500)}.bpNotificationCloseIcon{height:var(--bpSpacing-5);aspect-ratio:1/1;cursor:pointer}.bpNotificationCloseIcon:hover{color:var(--bpGray-700)}.bpComposerFileAttachement{background-color:var(--bpGray-1);position:relative;width:fit-content;display:flex;border:1px solid var(--bpGray-200);padding:.5rem;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));gap:8px;transition:border-color .15s ease-out;animation:fadeInScaleUp .2s ease-out}.bpComposerFileAttachement:hover{border-color:var(--bpGray-300)}.bpComposerFileAttachement:hover .bpComposerFileRemoveIcon{opacity:1}.bpComposerFileIconWrapper{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bpPrimary-200);background:var(--bpPrimary-100);width:2.5rem;height:2.5rem;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));position:relative}.bpComposerFileIcon{color:var(--bpPrimary-600);width:1.5rem;height:1.5rem;transition:opacity .3s ease,filter .3s ease}.bpComposerFileMetadata{display:flex;flex-direction:column;gap:2px}.bpComposerFileName{min-width:6rem;max-width:6rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:normal;font-size:.875rem;line-height:1.25rem;color:var(--bpGray-900)}.bpComposerFileExtension{font-size:.75rem;line-height:1rem;font-weight:300;color:var(--bpGray-600)}.bpComposerFilePreviewImage{width:100%;height:100%;object-fit:contain;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpComposerFileRemoveIcon{position:absolute;top:-.25rem;right:-.25rem;border-radius:50%;width:1.25rem;height:1.25rem;cursor:pointer;stroke-width:1.5;color:var(--bpGray-600);background:var(--bpGray-100);line-height:1;opacity:0;transition:opacity .2s ease}.bpComposerFileLoader{position:absolute;top:-.25rem;right:-.25rem;width:1rem;height:1rem;border:2px solid var(--bpGray-200);border-top:2px solid var(--bpPrimary-500);border-radius:50%;animation:spin .6s linear infinite;visibility:visible;opacity:1;transition:opacity .2s ease}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bpComposerFileErrorIcon{position:absolute;top:-.4rem;right:-.4rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--bpGray-1);color:var(--bpError)}.bpComposerFileAttachement[data-status=loading] .bpComposerFileIcon,.bpComposerFileAttachement[data-status=loading] .bpComposerFileMetadata,.bpComposerFileAttachement[data-status=error] .bpComposerFileIcon,.bpComposerFileAttachement[data-status=error] .bpComposerFileName{opacity:.5;filter:grayscale(100%)}.bpComposerFileAttachement[data-status=error] .bpComposerFileExtension{color:var(--bpError)}.bpComposerUploadButton{cursor:pointer;border-radius:var(--bpRadius-full);padding:var(--bpSpacing-2);height:var(--bpSpacing-8);width:var(--bpSpacing-8);color:var(--bpGray-600);transition:background .15s ease-out}.bpComposerUploadButton[data-disabled=true]{opacity:.5;filter:grayscale(100%);pointer-events:none}.bpComposerContainer[data-disabled=false] .bpComposerUploadButton:hover{color:var(--bpGray-700);background:var(--bpGray-100);cursor:pointer}.bpComposerVoiceButton{cursor:pointer;border-radius:var(--bpRadius-full);padding:var(--bpSpacing-2);height:var(--bpSpacing-8);width:var(--bpSpacing-8);color:var(--bpGray-600)}.bpComposerVoiceButton:hover{background-color:var(--bpGray-100)}.bpComposerVoiceButton[data-show=true]{animation:fadeIn .1s ease-out forwards}.bpComposerVoiceButton[data-show=false]{animation:fadeOut .1s ease-out forwards;pointer-events:none}.bpComposerVoiceButton[data-listens=true]{animation:pulsate-background 1.5s ease-in-out infinite}.bpComposerInput{margin:auto var(--bpSpacing-8) auto var(--bpSpacing-2);flex-grow:1;outline-style:none;font-size:.875rem;line-height:1.25rem;resize:none;color:var(--bpGray-900);height:1.5em}.bpComposerInput:focus{outline:none!important}.bpComposerInput::-webkit-scrollbar{width:4px}.bpComposerInput::placeholder{color:var(--bpGray-500);font-size:.875rem}@media (max-device-width: 1024px){.bpComposerInput{font-size:16px}}.bpComposerContainer{position:relative;display:flex;flex-direction:column;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));border-width:var(--bpSpacing-px);background:var(--bpGray-50);border-color:var(--bpGray-200);outline-color:transparent;transition-property:color,background-color,outline-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;margin:0 var(--bpSpacing-4);box-sizing:border-box;z-index:1}.bpComposerContainer:hover{border-color:var(--bpGray-300)}.bpComposerContainer:focus-within{outline:2px solid var(--bpPrimary-600);outline-offset:-1px}.bpComposerContainer[data-disabled=true]{background-color:var(--bpGray-100);border-color:var(--bpGray-200);color:var(--bpGray-500)}.bpComposerContainer[data-disabled=true] *{cursor:not-allowed}.bpComposerInputContainer{min-height:var(--bpSpacing-12);display:flex;align-items:end;padding:var(--bpSpacing-2)}.bpComposerInputContainer:has(.bpComposerUploadButton) .bpComposerInput{margin:auto var(--bpSpacing-8) auto var(--bpSpacing-1)}.bpComposerFileContainer{display:flex;overflow-x:scroll;gap:.5rem;padding:var(--bpSpacing-2) var(--bpSpacing-2) 0 var(--bpSpacing-2);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--bpGray-200) transparent}.bpComposerSendButton{position:absolute;right:var(--bpSpacing-2);cursor:pointer;border-radius:var(--bpRadius-full);padding:var(--bpSpacing-2);background-color:var(--send-button-bg);color:var(--send-button-text);height:var(--bpSpacing-8);width:var(--bpSpacing-8);stroke-width:2px;opacity:0}.bpComposerSendButton[data-show=true]{opacity:1;transition:opacity .15s ease-out,transform .15s ease-out;transform:translateY(0)}.bpComposerSendButton[data-show=false]{opacity:0;transition:opacity .15s ease-out,transform .15s ease-out;transform:translateY(20%);pointer-events:none}.bpComposerContainer[data-disabled=false] .bpComposerSendButton:hover{background-color:var(--send-button-bg-hover)}.bpComposerContainer:has(+.bpComposerFooter:empty){margin-bottom:var(--bpSpacing-3)}.bpComposerFooter{align-self:center;text-align:center;margin:var(--bpSpacing-1) var(--bpSpacing-5);font-size:.75rem;color:var(--bpGray-400);cursor:default;overflow:visible}.bpComposerFooter>*{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bpComposerFooter:empty{display:none}.bpComposerFooter:hover a{cursor:pointer;color:var(--bpGray-500)}.bpComposerButtonContainer{display:flex;padding:var(--bpSpacing-2);justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));height:var(--bpSpacing-10);cursor:pointer}.bpComposerButtonContainer:disabled{display:none}.bpComposerButtonIcon{border-radius:var(--bpRadius-full);padding:var(--bpSpacing-1);background-color:var(--send-button-bg);color:var(--send-button-text);height:var(--bpSpacing-7);width:var(--bpSpacing-7);stroke:currentColor}.bpComposerContainer[data-disabled=false] .bpComposerButtonIcon:hover{background-color:color-mix(in srgb,var(--send-button-bg-hover),black 15%)}.bpComposerUploadButtonContainer{padding:var(--bpSpacing-1);margin:var(--bpSpacing-1);margin-right:calc(var(--bpSpacing-2) * -1);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpComposerUploadButtonIcon{color:var(--bpGray-800);display:block;padding:var(--bpSpacing-1);background:var(--bpGray-100);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));height:var(--bpSpacing-6);width:var(--bpSpacing-6)}.bpComposerUploadButtonIcon[data-disabled=true]{opacity:.5;filter:grayscale(100%);pointer-events:none}.bpComposerContainer[data-disabled=false] .bpComposerUploadButtonIcon:hover{color:var(--bpGray-700);background:var(--bpGray-200);cursor:pointer}.bpComposerVoiceButtonContainer{display:flex;padding:var(--bpSpacing-1);margin:var(--bpSpacing-1);justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));cursor:pointer}.bpComposerVoiceButtonIcon{border-radius:var(--bpRadius-full);padding:var(--bpSpacing-1);color:var(--bpGray-600);height:var(--bpSpacing-7);width:var(--bpSpacing-7)}.bpComposerVoiceButtonIcon:hover{background-color:var(--bpGray-200)}.bpComposerVoiceButtonIcon[data-listens=true]{animation:pulsate-background 1.5s ease-in-out infinite}.bpContainer{display:flex;justify-content:space-between;height:100%;overflow:hidden;position:relative;background:var(--bpGray-1);border-color:var(--bpGray-200);border-style:solid;border-width:1px;flex-direction:column;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));container-type:inline-size}.bpDropzoneOverlay{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:absolute;width:100%;height:100%;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-size:1rem;font-weight:500;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));z-index:3;pointer-events:none;opacity:0;transition:opacity .3s ease-in-out}.bpDropzoneOverlay[data-hover=true]{opacity:1}.bpFabContainer{width:100%;height:100%;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));cursor:pointer;background:var(--fab-bg)}.bpFabContainer:hover{background:var(--fab-bg-hover)}.bpFabIcon{height:100%;width:100%;background-position:center;background-repeat:no-repeat;background-color:var(--fab-icon);background-size:cover;-webkit-mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.583 14.894l-3.256 3.78c-.7.813-1.26.598-1.25-.46a10689.413 10689.413 0 0 1 .035-4.775V4.816a3.89 3.89 0 0 1 3.88-3.89h12.064a3.885 3.885 0 0 1 3.882 3.89v6.185a3.89 3.89 0 0 1-3.882 3.89H4.583z' fill='%23FFFFFF' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") no-repeat center;mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.583 14.894l-3.256 3.78c-.7.813-1.26.598-1.25-.46a10689.413 10689.413 0 0 1 .035-4.775V4.816a3.89 3.89 0 0 1 3.88-3.89h12.064a3.885 3.885 0 0 1 3.882 3.89v6.185a3.89 3.89 0 0 1-3.882 3.89H4.583z' fill='%23FFFFFF' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") no-repeat center}.bpFabImage{height:100%;width:100%;aspect-ratio:1 / 1;border-radius:50%;object-fit:cover}.bpFabImage:hover{opacity:.8;cursor:pointer}.bpHeaderContainer{position:absolute;display:flex;padding:var(--bpSpacing-1);flex-direction:column;width:100%;border-top-left-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));border-top-right-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));background-color:var(--header-bg);-webkit-backdrop-filter:blur(45px);backdrop-filter:blur(45px);transition:background-color .2s ease-out;z-index:2}.bpHeaderContentContainer{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr;padding:var(--bpSpacing-1) var(--bpSpacing-3);column-gap:var(--bpSpacing-2);align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));text-align:left;cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.bpHeaderContainer[data-state=open] .bpHeaderContentAvatarImage,.bpHeaderContainer[data-state=open] .bpHeaderContentAvatarFallback{height:var(--bpSpacing-16);font-size:1.75rem;font-weight:500;margin-top:var(--bpSpacing-6);margin-bottom:var(--bpSpacing-6)}.bpHeaderContainer:not([data-disabled]) .bpHeaderContentContainer:hover{background-color:var(--header-bg-hover)}.bpHeaderContainer[data-disabled] .bpHeaderContentContainer:hover{cursor:default}.bpHeaderContentContainer[data-state=open]{justify-items:center;grid-template-columns:1fr}.bpHeaderContentContainer[data-state=open] .bpHeaderContentActionsContainer{display:none}.bpHeaderContentContainer[data-state=open] .bpHeaderContentAvatarImage{margin-top:var(--bpSpacing-6);width:var(--bpSpacing-16);height:var(--bpSpacing-16)}.bpHeaderContentContainer[data-state=closed]{justify-items:start;grid-template-columns:auto 1fr auto}.bpHeaderContentAvatarContainer{overflow:hidden;padding:var(--bpSpacing-px);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));grid-row:span 2 / span 2}.bpHeaderContentAvatarImage{aspect-ratio:1/1;object-fit:cover;height:var(--bpSpacing-8);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full))}.bpHeaderContentAvatarFallback{aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));height:var(--bpSpacing-8);line-height:var(--bpSpacing-12);background-color:var(--header-avatar-bg);color:var(--header-avatar-text)}.bpHeaderContentTitle{display:flex;padding-top:var(--bpSpacing-0_5);font-size:1rem;line-height:1.5rem;font-weight:500;color:var(--header-title);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}.bpHeaderContentDescription{font-size:.875rem;line-height:1.25rem;font-weight:300;color:var(--header-description);width:100%}.bpHeaderContentContainer[data-state=closed] .bpHeaderContentDescription{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bpHeaderContentContainer[data-state=open] .bpHeaderContentDescription,.bpHeaderContentContainer[data-state=open] .bpHeaderContentTitle{justify-content:center;text-align:center}.bpHeaderContentContainer[data-state=closed] .bpHeaderContentDescription{grid-column-start:2}.bpHeaderContentActionsContainer{display:flex;grid-column-start:3;grid-row:span 2 / span 2;grid-row-start:1!important}.bpHeaderContentActionsIcons{padding:var(--bpSpacing-2);height:34px;width:34px;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));cursor:pointer;color:var(--header-description);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.bpHeaderContentActionsIcons:hover{background-color:var(--header-hover-dark)}.bpHeaderExpandedContentContainer{display:grid;padding:var(--bpSpacing-2);gap:var(--bpSpacing-4);row-gap:var(--bpSpacing-4);justify-items:center;align-items:center;font-size:.875rem;line-height:1.25rem}.bpHeaderExpandedContentDescriptionItemsContainer{display:flex;gap:var(--bpSpacing-1);align-items:center;font-size:.75rem;line-height:1rem;color:var(--header-description);position:relative;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-sm))}.bpHeaderExpandedContentDescriptionItemsContainer:hover{color:var(--header-title);cursor:pointer}.bpHeaderExpandedContentDescriptionItemsContainer[data-terms]+.bpHeaderExpandedContentDescriptionItemsContainer[data-privacy]{margin-left:calc(var(--bpSpacing-4) + 1px)}.bpHeaderExpandedContentDescriptionItemsContainer[data-terms]+.bpHeaderExpandedContentDescriptionItemsContainer[data-privacy]:before{content:"";position:absolute;left:calc(var(--bpSpacing-4) / -2);top:auto;bottom:auto;height:10px;width:1px;background-color:var(--bpGray-500)}.bpHeaderExpandedContentDescriptionItemsIcon{padding:var(--bpSpacing-1);height:var(--bpSpacing-6);color:var(--header-description)}.bpHeaderExpandedContentDescriptionItemsContainer[data-email] .bpHeaderExpandedContentDescriptionItemsIcon,.bpHeaderExpandedContentDescriptionItemsContainer[data-phone] .bpHeaderExpandedContentDescriptionItemsIcon,.bpHeaderExpandedContentDescriptionItemsContainer[data-website] .bpHeaderExpandedContentDescriptionItemsIcon{color:var(--header-description-icon)}.bpHeaderExpandedContentDescriptionItemsText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;color:var(--header-description-link)}.bpHeaderExpandedContentDescriptionItemsLink{overflow:hidden;text-overflow:ellipsis;color:var(--header-description-link);white-space:nowrap;font-size:.75rem}.bpHeaderExpandedContentDescriptionItemsLink:hover{text-decoration:underline;text-decoration-color:var(--header-description-link)}.bpHeaderExpandedContentGroup{display:flex;flex-direction:column}.bpHeaderExpandedContentGroup[data-legal]{flex-direction:row}.bpHeaderExpandedContentGroup[data-legal] .bpHeaderExpandedContentDescriptionItemsIcon{display:none}.bpHeaderExpandedContentGroup[data-links]{gap:var(--bpSpacing-2);flex-direction:column}.bpMessageListMarqueeContainer{margin-top:auto;display:flex;gap:var(--bpSpacing-2);flex-direction:column;align-items:center;justify-content:center;padding:5rem 0 var(--bpSpacing-12) 0}.bpMessageListMarqueeContent{display:flex;flex-direction:column;max-width:60ch}.bpMessageListMarqueeTitle{color:var(--bpGray-800);font-size:1.125rem;line-height:1.75rem;font-weight:500;text-align:center}.bpMessageListMarqueeDescription{color:var(--bpGray-500);font-size:.875rem;line-height:1.25rem;text-align:center;margin-top:var(--bpSpacing-1)}.bpMessageListMarqueeAvatarContainer{overflow:hidden;padding:var(--bpSpacing-px);margin-bottom:var(--bpSpacing-3);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full))}.bpMessageListMarqueeAvatarImage{height:var(--bpSpacing-20);aspect-ratio:1/1;object-fit:cover;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full))}.bpMessageListMarqueeAvatarFallback{display:flex;align-items:center;justify-content:center;height:var(--bpSpacing-20);width:var(--bpSpacing-20);background-color:var(--bpPrimary-600);color:var(--bpPrimary-50);font-size:1.875rem;line-height:2.25rem;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full))}.bpMessageContainer{display:flex;width:100%;gap:var(--bpSpacing-2);font-size:.875rem;line-height:1.25rem;color:var(--bpGray-900);word-break:break-word;position:relative;animation:fadeInSlideUp .4s ease-out;transition:margin-bottom .3s ease-out}.bpMessageContainer[data-direction=incoming]{justify-content:flex-start}.bpMessageContainer[data-direction=outgoing]{justify-content:flex-end}.bpMessageContainer[data-direction=system]{justify-content:center;font-size:.75rem;line-height:1rem;margin-top:var(--bpSpacing-4);color:var(--bpGray-800)}.bpMessageContainer:has(.bpMessageBlocksBubbleFeedbackIcon[data-selected=true]):not(:last-child){margin-bottom:var(--bpSpacing-3)}.bpMessageContainer:after{content:"Delivered";color:var(--bpGray-600);font-size:.75rem;position:absolute;bottom:-20px;right:0;opacity:0;overflow:hidden;animation:none;transition:opacity .3s ease-out}.bpMessageDeliveryStatus{margin-bottom:var(--bpSpacing-3)}.bpMessageDeliveryStatus:after{opacity:1}.bpMessageAvatarContainer{display:none;overflow:hidden;position:relative;flex-shrink:0;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));height:var(--bpSpacing-7);align-self:flex-end}.bpMessageAvatarContainer[data-loading-status=loading] .bpMessageAvatarFallback{opacity:0}.bpMessageContainer[data-direction=incoming] .bpMessageAvatarContainer,.bpMessageContainer[data-direction=outgoing] .bpMessageAvatarContainer{display:flex}.bpMessageAvatarImage{aspect-ratio:1/1;object-fit:cover;height:100%}.bpMessageAvatarFallback{display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));background-color:var(--bpPrimary-600);color:var(--bpPrimary-50);height:100%;aspect-ratio:1/1}.bpMessageListContainer{display:flex;overflow-y:auto;overflow-x:hidden;width:100%;box-sizing:border-box;scrollbar-width:none;flex-grow:1;padding:var(--bpSpacing-1);margin-bottom:-25px;position:relative}.bpMessageListContainer>div{display:flex;flex-direction:column;overflow:auto;scrollbar-width:none}.bpMessageListViewport{display:flex;gap:var(--bpSpacing-2);flex-direction:column;padding:var(--bpSpacing-3);padding-bottom:var(--bpSpacing-12);scrollbar-width:none;margin-top:auto}.bpMessageListHeaderMessage{position:sticky;top:0;margin-left:auto;margin-right:auto;color:var(--bpGray-600);font-size:.9rem}.bpMessageListContainer .bpMessageListScrollDownButton{background-color:var(--bpGray-100);height:32px;width:32px;padding:6px;z-index:10;border-radius:50%;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;position:absolute;left:0;right:0;cursor:pointer;bottom:var(--bpSpacing-9);margin:auto;animation:fadeInSlideUp .2s ease-out}.bpMessageListScrollDownButton:after{display:block;content:"";-webkit-mask:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>') no-repeat center;mask:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>') no-repeat center;background-position:center;background-repeat:no-repeat;background-color:var(--bpGray-500);background-size:cover;width:20px;height:20px}.bpMessageListContainer .bpMessageListScrollDownButton:hover{background-color:var(--bpGray-200)}.bpModalOverlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;background-color:#0000004d}.bpModalOverlay[data-state=open]{animation:fadeIn .2s ease-out}.bpModalOverlay[data-state=closed]{animation:fadeOut .1s ease-in}.bpModalContainer{color:var(--bpGray-900);border:1px solid var(--bpGray-100);background:var(--bpGray-50);position:absolute;bottom:0;z-index:30;padding:var(--bpSpacing-3);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));width:100%;pointer-events:auto}.bpModalContainer[data-state=open]{animation:slideUp .2s ease-out}.bpModalContainer[data-state=closed]{animation:slideDown .1s ease-out}.bpModalTitle{display:flex;justify-content:center;font-size:1rem;line-height:1.5rem;color:var(--bpGray-900);margin-bottom:var(--bpSpacing-4)}.bpModalDescription{display:none}.bpModalContentContainer{display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem;color:var(--bpGray-900)}.bpModalButtonContainer{display:flex;flex-direction:column;gap:var(--bpSpacing-2)}.bpModalButtonConfirm{width:100%;padding:var(--bpSpacing-3);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));color:var(--message-text);font-size:.875rem;line-height:1.25rem;background:var(--modal-submit-bg);transition:background .1s ease-out}.bpModalButtonConfirm:hover{background:var(--modal-submit-bg-hover)}.bpModalButtonCancel{width:100%;padding:var(--bpSpacing-3);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));color:var(--bpGray-900);font-size:.875rem;line-height:1.25rem;background:var(--bpGray-100);transition:background .1s ease-out}.bpModalButtonCancel:hover{background:var(--bpGray-200)}.bpModalContentTextArea{margin:0 var(--bpSpacing-2) var(--bpSpacing-4) var(--bpSpacing-2);padding:var(--bpSpacing-2);border:1px solid var(--bpGray-300);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-sm));resize:none}.bpModalContentTextArea:focus{outline:none}@container (min-width: 28rem){.bpModalContainer{max-width:600px;width:60%;bottom:50%;left:50%;transform:translate(-50%);padding:var(--bpSpacing-6)}.bpModalContainer[data-state=open]{animation:fadeIn .2s ease-out}.bpModalContainer[data-state=closed]{animation:fadeOut .1s ease-out}.bpModalTitle{justify-content:start;font-size:1rem;line-height:1.5rem;color:var(--bpGray-900);margin-top:var(--bpSpacing-2);margin-bottom:var(--bpSpacing-2)}.bpModalDescription{display:flex;justify-content:start;font-size:.875rem;line-height:1.25rem;color:var(--bpGray-600);margin-bottom:var(--bpSpacing-3)}.bpModalContentContainer{flex-direction:row;justify-content:center}.bpModalContentTextArea{width:100%;margin:0 0 var(--bpSpacing-4) 0}.bpModalButtonContainer{width:100%;display:flex;flex-direction:row-reverse;justify-content:end;white-space:nowrap;gap:var(--bpSpacing-2);margin-top:var(--bpSpacing-8)}.bpModalButtonConfirm,.bpModalButtonCancel{width:auto;padding:var(--bpSpacing-2) var(--bpSpacing-4)}}.bpMessageBlocksAudio{max-width:85%}.bpMessageBlocksBubble{position:relative;padding:var(--bpSpacing-2) var(--bpSpacing-4);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));max-width:85%}.bpMessageBlocksBubble[data-direction=outgoing]{background-color:var(--message-bg);color:var(--message-text);border-bottom-right-radius:var(--bpRadius-sm)}.bpMessageBlocksBubble[data-direction=incoming]{background-color:var(--bpGray-100);color:var(--bpGray-900);border-bottom-left-radius:var(--bpRadius-sm)}.bpMessageBlocksBubbleFeedbackContainer{display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));background-color:var(--bpGray-1);gap:var(--bpSpacing-1);height:24px;width:52px;position:absolute;left:85%;opacity:0;transition:opacity .2s ease-in-out;box-shadow:0 1px 4px #0000000d;z-index:1;transform:translate(-50%)}.bpMessageBlocksBubble[data-feedback=true] .bpMessageBlocksBubbleFeedbackContainer{opacity:1}.bpMessageContainer[data-direction=incoming]:last-child .bpMessageBlocksBubble .bpMessageBlocksBubbleFeedbackContainer{opacity:1}.bpMessageBlocksBubble:hover .bpMessageBlocksBubbleFeedbackContainer{opacity:1}.bpMessageBlocksBubbleFeedbackIcon{color:var(--bpGray-500);height:16px;width:16px;stroke-width:1.5;cursor:pointer}.bpMessageBlocksBubbleFeedbackIcon[data-selected=true]{color:var(--bpPrimary-600);stroke-width:2;pointer-events:none;cursor:default}.bpMessageBlocksBubbleFeedbackIcon:hover{stroke-width:2}.bpNegativeReactionFeedbackForm{display:flex;flex-direction:column}.bpMessageBlocksBubbleFeedbackFormSubmitButton{background-color:var(--bpPrimary-600);color:var(--bpGray-1);border-radius:var(--bpRadius-md);padding:var(--bpSpacing-1_5) var(--bpSpacing-3);border:none;cursor:pointer}.bpMessageBlocksButton{padding:.25rem .75rem;background-color:var(--button-bg);color:var(--button-text);font-size:.875rem;line-height:1.25rem;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));cursor:pointer;transition:background-color .15s ease-out}.bpMessageBlocksButton:hover{background-color:var(--button-bg-hover)}.bpMessageBlocksButton[data-activated]:disabled{background-color:var(--button-bg);color:var(--button-text)}.bpMessageBlocksButton[data-group-activated]{background-color:var(--bpGray-100);color:var(--bpGray-600)}.bpMessageBlocksButton[data-group-activated]:hover{cursor:default}.bpMessageBlocksCarouselContainer{overflow:hidden;position:relative}.bpMessageBlocksCarouselSlidesContainer{display:grid;padding-left:var(--bpSpacing-2);padding-right:var(--bpSpacing-2);gap:var(--bpSpacing-2);grid-auto-flow:column;grid-auto-columns:100%}.bpMessageBlocksCarouselBackButton,.bpMessageBlocksCarouselNextButton{position:absolute;top:50%;transform:translateY(-50%);background-color:var(--bpGray-300);color:var(--bpGray-100);height:var(--bpSpacing-7);width:var(--bpSpacing-7);padding:var(--bpSpacing-0_5);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;box-shadow:0 2px 4px #0000001a}.bpMessageBlocksCarouselBackButton:hover,.bpMessageBlocksCarouselNextButton:hover{background-color:var(--bpGray-400);color:var(--bpGray-1);transform:translateY(-50%) scale(1.1)}.bpMessageBlocksCarouselBackButton{left:var(--bpSpacing-1)}.bpMessageBlocksCarouselNextButton{right:var(--bpSpacing-1)}.bpMessageBlocksCarouselNextButton[data-disabled],.bpMessageBlocksCarouselBackButton[data-disabled]{display:none}.bpMessageBlocksColumn{display:flex;flex-direction:column;gap:var(--bpSpacing-2);width:100%}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksColumn{align-items:flex-end}.bpMessageContainer[data-direction=incoming] .bpMessageBlocksColumn{align-items:flex-start}.bpMessageBlocksColumn[data-horizontal=center]{align-items:center!important;text-align:center!important}.bpMessageBlocksColumn[data-horizontal=right]{align-items:flex-end!important}.bpMessageBlocksColumn[data-horizontal=left]{align-items:flex-start!important}.bpMessageBlocksColumn[data-vertical=stretch]{justify-content:space-between!important}.bpMessageBlocksDropdownButtonContainer{display:flex;padding:var(--bpSpacing-2);background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);border-radius:var(--bpRadius-md);align-items:center;justify-content:space-between;min-width:min(150px,100%);max-width:min(250px,100%);cursor:pointer;color:var(--bpGray-900)}.bpMessageBlocksDropdownButtonContainer[data-disabled=true]{color:var(--bpGray-700);cursor:not-allowed;border-color:var(--bpGray-200)}.bpMessageBlocksDropdownButtonText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpMessageBlocksDropdownButtonIcon{height:var(--bpSpacing-4);width:var(--bpSpacing-4);margin-left:var(--bpSpacing-2)}.bpMessageBlocksDropdownContentContainer{background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);border-radius:var(--bpRadius-md);min-width:100px;max-height:200px;overflow-y:auto;padding:var(--bpSpacing-1);z-index:1}.bpMessageBlocksDropdownContentItem{color:var(--bpGray-800);padding:var(--bpSpacing-1);cursor:pointer;border-radius:var(--bpRadius-sm)}.bpMessageBlocksDropdownContentItem:hover{background-color:var(--bpGray-100);color:var(--bpGray-900)}.bpMessageBlocksFileContainer{display:flex;padding-top:var(--bpSpacing-2);padding-bottom:var(--bpSpacing-2);padding-left:var(--bpSpacing-4);padding-right:var(--bpSpacing-4);gap:var(--bpSpacing-2);align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:var(--bpGray-100);color:var(--bpGray-900)}.bpMessageBlocksFileContainer:hover{color:var(--bpGray-950);background-color:var(--bpGray-200)}.bpMessageBlocksFileTitle{text-decoration:underline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpMessageBlocksFileIcon{flex:none;width:1.25rem;height:1.25rem;color:var(--bpPrimary-800)}.bpMessageBlocksImageImage{min-width:0px;max-width:95%;border:1px solid var(--bpGray-200);object-fit:cover;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpMessageBlocksImageImage[data-loaded=false]{display:none}.bpMessageBlocksImageImage[data-orientation=landscape]{aspect-ratio:4 / 3}.bpMessageBlocksImageImage[data-orientation=portrait]{aspect-ratio:3 / 4}.bpMessageBlocksImageImage[data-orientation=square]{aspect-ratio:1 / 1}.bpMessageBlocksImageImage[data-error=true]{display:flex;justify-content:center;align-items:center;color:var(--bpGray-200)}@media (min-width: 640px){.bpMessageBlocksImageImage{width:var(--bpSpacing-56)}}.bpMessageBlocksImagePlaceholder{min-width:0px;max-width:95%;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpMessageBlocksImagePlaceholder[data-orientation=landscape]{aspect-ratio:4 / 3}.bpMessageBlocksImagePlaceholder[data-orientation=portrait]{aspect-ratio:3 / 4}.bpMessageBlocksImagePlaceholder[data-orientation=square]{aspect-ratio:1 / 1}@media (min-width: 640px){.bpMessageBlocksImagePlaceholder{width:var(--bpSpacing-56)}}.bpMessageBlocksLocationContainer{display:flex;gap:var(--bpSpacing-1);padding:var(--bpSpacing-2) var(--bpSpacing-4);background-color:var(--bpGray-100);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));align-items:center}.bpMessageBlocksLocationContainer:hover{color:var(--bpGray-950);background-color:var(--bpGray-200)}.bpMessageBlocksLocationTitle{color:var(--bpGray-900);font-size:.875rem;line-height:1.25rem;cursor:pointer}.bpMessageBlocksLocationIcon{height:var(--bpSpacing-5);width:var(--bpSpacing-5);fill:var(--bpPrimary-600);color:var(--bpPrimary-200)}.bpMessageContainer[data-direction=incoming] .bpMessageBlocksRow{justify-content:flex-start}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksRow{justify-content:flex-end}.bpMessageBlocksRow{display:flex;gap:var(--bpSpacing-2);flex-wrap:wrap}.bpMessageBlocksTextHeading1{font-size:1.5rem;font-weight:600;line-height:2rem;margin-top:var(--bpSpacing-7);margin-bottom:var(--bpSpacing-6)}.bpMessageBlocksTextHeading2{font-size:1.25rem;font-weight:600;line-height:1.75rem;margin-top:var(--bpSpacing-6);margin-bottom:var(--bpSpacing-5)}.bpMessageBlocksTextHeading3{font-size:1.125rem;line-height:1.75rem;font-weight:500;margin-top:var(--bpSpacing-5);margin-bottom:var(--bpSpacing-4)}.bpMessageBlocksTextHeading4{margin-top:var(--bpSpacing-1);font-weight:500;font-size:1rem;line-height:1.5rem}.bpMessageBlocksTextOrderedList{list-style-type:decimal}.bpMessageBlocksTextUnorderedList{list-style-type:disc}.bpMessageBlocksTextUnorderedList,.bpMessageBlocksTextOrderedList{padding-left:var(--bpSpacing-2);margin:var(--bpSpacing-3) 0;list-style-position:inside}.bpMessageBlocksTextUnorderedList::marker,.bpMessageBlocksTextOrderedList::marker{color:var(--bpGray-800)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextUnorderedList::marker,.bpMessageBlocksTextOrderedList::marker{color:var(--bpPrimary-950)}.bpMessageBlocksTextListItem{line-height:1.25rem;margin:var(--bpSpacing-2) 0}.bpMessageBlocksTextLink{text-decoration:underline;cursor:pointer}.bpMessageBlocksTextLink:hover{text-decoration:none;opacity:.7}li>.bpMessageBlocksTextText{display:inline}.bpMessageBlocksTextImage{margin:var(--bpSpacing-3) 0;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpMessageBlocksTextImage[data-error=true]{display:flex;justify-content:center;align-items:center}.bpMessageBlocksTextHorizontalRule{color:var(--bpGray-300);margin:var(--bpSpacing-4) 0}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextHorizontalRule{color:var(--bpPrimary-300)}.bpMessageBlocksTextCodeBlockContainer{margin:1rem 0;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpMessageBlocksTextCodeBlockTitle{display:flex;justify-content:space-between;align-items:center;background:var(--bpGray-200);color:var(--bpGray-900);padding:.25em .75em;font-size:.75rem;border:1px solid var(--bpGray-200);border-top-left-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));border-top-right-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));border-bottom:none}.bpMessageBlocksTextCodeBlockCopyIcon{width:1.5rem;padding:.25rem;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));color:var(--bpGray-800)}.bpMessageBlocksTextCodeBlockCopyIcon:hover{cursor:pointer;background:var(--bpGray-300)}.bpMessageBlocksTextCodeBlock{background:var(--bpGray-50);padding:.75rem;overflow-x:auto;line-height:1.6;border:1px solid var(--bpGray-200);border-top:none;border-bottom-left-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));border-bottom-right-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextCodeBlock{background:var(--bpPrimary-50);color:var(--bpGray-950)}.bpMessageBlocksTextCode{background:var(--bpGray-300);border-radius:.25rem;font-weight:500;padding:.1rem .2rem}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextCode{background:var(--bpPrimary-400)}.bpMessageBlocksTextCodeBlock .bpMessageBlocksTextCode,.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextCodeBlock .bpMessageBlocksTextCode{background:transparent;border-radius:0;font-weight:inherit;padding:0}.bpMessageBlocksTextTableContainer{overflow-x:auto;margin:var(--bpSpacing-6) 0;width:100%;display:block;-webkit-overflow-scrolling:touch}.bpMessageBlocksTextTable{border-collapse:collapse;color:inherit;width:100%;min-width:100%;table-layout:auto;white-space:nowrap;font-size:.875rem;line-height:1.25rem}.bpMessageBlocksTextTableHeader{border-bottom:2px solid var(--bpGray-300);padding:var(--bpSpacing-1);text-align:left;font-weight:600}.bpMessageBlocksTextTableHeader:first-child{padding-left:0}.bpMessageBlocksTextTableHeader:last-child{padding-right:0}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextTableHeader{border-bottom:2px solid var(--bpPrimary-300)}.bpMessageBlocksTextTableData{padding:var(--bpSpacing-3) var(--bpSpacing-1)}.bpMessageBlocksTextTableData:first-child{padding-left:0}.bpMessageBlocksTextTableData:last-child{padding-right:0}.bpMessageBlocksTextTableRow{border-bottom:1px solid var(--bpGray-200)}.bpMessageBlocksTextTableRow:last-child{border-bottom:none}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextTableRow{border-bottom:1px solid var(--bpPrimary-200)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextTableRow:last-child{border-bottom:none}.bpMessageBlocksTextInput[type=checkbox]{pointer-events:none}.bpMessageBlocksTextText+.bpMessageBlocksTextText{margin-top:var(--bpSpacing-4)}.bpMessageBlocksVideo{border:1px solid var(--bpGray-200);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md))}.bpTypingIndicatorContainer{display:flex;gap:var(--bpSpacing-1_5);padding:var(--bpSpacing-3);background-color:var(--bpGray-100);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-lg));align-items:end}.bpTypingIndicatorContainer:before,.bpTypingIndicatorContainer:after{content:"";display:block;width:var(--bpSpacing-1_5);height:var(--bpSpacing-1_5);background-color:var(--bpGray-800);border-radius:50%;animation:jump 1s infinite}.bpTypingIndicatorContainer:after{animation-delay:.2s}.bpTypingIndicatorLoader{width:var(--bpSpacing-1_5);height:var(--bpSpacing-1_5);background-color:var(--bpGray-800);border-radius:50%;animation:jump 1s infinite .1s}@keyframes jump{0%,50%,to{transform:translateY(0)}25%{background-color:var(--bpGray-400);transform:translateY(-75%)}}.bpLoader{width:8px;height:8px;border-radius:50%;display:block;margin:auto;position:relative;background:transparent;box-shadow:-16px 0 transparent,16px 0 transparent;box-sizing:border-box;animation:shadowPulse 2s linear infinite}@keyframes shadowPulse{33%{background:transparent;box-shadow:-16px 0 var(--bpPrimary-600),16px 0 transparent}66%{background:var(--bpPrimary-600);box-shadow:-16px 0 transparent,16px 0 transparent}to{background:transparent;box-shadow:-16px 0 transparent,16px 0 var(--bpPrimary-600)}}.bpErrorContainer{display:flex;flex-direction:column;height:100%;font-family:var(--font-family);background-color:var(--bpGray-1)}.bpErrorHeader{display:flex;align-items:center;font-size:1rem;height:3rem;color:var(--error-header-text);background-color:var(--error-header-bg);padding:var(--bpSpacing-2) var(--bpSpacing-4);justify-content:space-between}.bpErrorHeaderActions{display:flex;align-items:center;color:var(--error-header-text);background-color:var(--error-header-bg)}.bpErrorContent{padding:var(--bpSpacing-6);text-align:center;display:flex;flex-direction:column;flex:1;justify-content:center;align-items:center}.bpErrorIcon{color:var(--error-content-icon);stroke-width:1.25;width:5rem;height:5rem}.bpErrorTitle{color:var(--error-content-title);padding:var(--bpSpacing-2);font-weight:600;font-size:1.25rem}.bpErrorMessage{line-height:1.5;color:var(--error-content-message);margin-bottom:var(--bpSpacing-2);white-space:pre-line}.bpErrorId{color:var(--bpGray-200);font-size:.75rem}.bpMessagePreviewContainer{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;row-gap:var(--bpSpacing-1);column-gap:var(--bpSpacing-2);border:var(--bpGray-300) 1px solid;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-sm));padding:var(--bpSpacing-3);height:100%;background-color:var(--bpGray-1);align-items:center;cursor:pointer}.bpMessagePreviewMessage{flex:1;font-size:14px;line-height:1.25rem;color:var(--bpGray-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2/3}.bpMessagePreviewDescription{font-size:13px;line-height:1rem;color:var(--bpGray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2/3}.bpMessagePreviewCloseButton{display:none;color:var(--bpGray-400);cursor:pointer;padding:var(--bpSpacing-1);transition:color .2s ease,color .2s ease;grid-column:3/4;grid-row:1/3;margin-left:calc(var(--bpSpacing-2) * -1);align-self:self-start}@media (max-device-width: 1024px){.bpMessagePreviewCloseButton{display:block}}.bpMessagePreviewContainer:hover .bpMessagePreviewCloseButton{display:block}.bpMessagePreviewCloseButton:hover{color:var(--bpGray-600)}.bpMessagePreviewAvatarContainer{overflow:hidden;padding:var(--bpSpacing-0_5);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));flex:none;grid-row:span 2 / span 2}.bpMessagePreviewAvatarImage{aspect-ratio:1/1;object-fit:cover;height:var(--bpSpacing-9);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full))}.bpMessagePreviewAvatarFallback{aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));height:var(--bpSpacing-9);line-height:var(--bpSpacing-12);background-color:var(--header-avatar-bg);color:var(--header-avatar-text)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeInScaleUp{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes fadeInSlideUp{0%{transform:translateY(20%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInFromRight{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@keyframes pulsate-background{0%,to{background-color:var(--bpPrimary-100);color:var(--bpGray-600)}50%{background-color:var(--bpPrimary-400);color:var(--bpGray-800)}}
1
+ .bpSkeleton{background-color:var(--bpGray-200);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));animation:skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}:where(.bpReset) *,:where(.bpReset) :after,:where(.bpReset) :before,:where(.bpReset) ::backdrop,:where(.bpReset) ::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}:where(.bpReset),:where(.bpReset) :host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}:where(.bpReset) hr{height:0;color:inherit;border-top-width:1px}:where(.bpReset) abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(.bpReset) h1,:where(.bpReset) h2,:where(.bpReset) h3,:where(.bpReset) h4,:where(.bpReset) h5,:where(.bpReset) h6{font-size:inherit;font-weight:inherit}:where(.bpReset) a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}:where(.bpReset) b,:where(.bpReset) strong{font-weight:bolder}:where(.bpReset) code,:where(.bpReset) kbd,:where(.bpReset) samp,:where(.bpReset) pre{font-family:var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base))}:where(.bpReset) small{font-size:80%}:where(.bpReset) sub,:where(.bpReset) sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}:where(.bpReset) sub{bottom:-.25em}:where(.bpReset) sup{top:-.5em}:where(.bpReset) table{text-indent:0;border-color:inherit;border-collapse:collapse}:where(.bpReset) button,:where(.bpReset) input,:where(.bpReset) optgroup,:where(.bpReset) select,:where(.bpReset) textarea,:where(.bpReset) ::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}:where(.bpReset) input:where(:not([type=button],[type=reset],[type=submit])),:where(.bpReset) select,:where(.bpReset) textarea{border:0px solid}:where(.bpReset) button,:where(.bpReset) input:where([type=button],[type=reset],[type=submit]),:where(.bpReset) ::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}:where(.bpReset) :-moz-focusring{outline:auto}:where(.bpReset) :-moz-ui-invalid{box-shadow:none}:where(.bpReset) progress{vertical-align:baseline}:where(.bpReset) ::-webkit-inner-spin-button,:where(.bpReset) ::-webkit-outer-spin-button{height:auto}:where(.bpReset) ::-webkit-search-decoration{-webkit-appearance:none}:where(.bpReset) summary{display:list-item}:where(.bpReset) ol,:where(.bpReset) ul,:where(.bpReset) menu{list-style:none}:where(.bpReset) textarea{resize:vertical}:where(.bpReset) ::placeholder{opacity:1;color:color-mix(in srgb,currentColor 50%,transparent)}:where(.bpReset) img,:where(.bpReset) svg,:where(.bpReset) video,:where(.bpReset) canvas,:where(.bpReset) audio,:where(.bpReset) iframe,:where(.bpReset) embed,:where(.bpReset) object{display:block;vertical-align:middle}:where(.bpReset) img,:where(.bpReset) video{max-width:100%;height:auto}:where(.bpReset) [hidden]{display:none!important}:where(.bpReset) :focus:not(:focus-visible){outline:0;box-shadow:none}:where(.bpReset) *::-webkit-scrollbar{width:6px;height:6px}:where(.bpReset) *::-webkit-scrollbar-track{background-color:transparent}:where(.bpReset) *::-webkit-scrollbar-thumb{background-color:var(--scrollbar);border-radius:6px}:where(.bpReset) *::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-hover)}@supports not selector(::-webkit-scrollbar){:where(.bpReset) *{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}}.bpReset,:host{--bpFontSize-scale: 1;--bpFontSize-xs: 12px;--bpFontSize-sm: 14px;--bpFontSize-base: 16px;--bpFontSize-md: 18px;--bpFontSize-lg: 20px;--bpFontSize-xl: 22px;--bpFontSize-2xl: 24px;--bpFontSize-3xl: 30px;--bpFontSize-4xl: 36px;--transparent-light: #fcfcfdd9;--transparent-light-hover: #b9bbc620;--transparent-dark: #101010d9;--transparent-dark-hover: #80828d14;--bpPrimary-1: #fdfdfd;--bpPrimary-50: #f5f8fe;--bpPrimary-100: #ebf1fd;--bpPrimary-200: #ccddfa;--bpPrimary-300: #adc8f7;--bpPrimary-400: #709ff0;--bpPrimary-500: #3276ea;--bpPrimary-600: #2d6ad3;--bpPrimary-700: #1e478c;--bpPrimary-800: #173569;--bpPrimary-900: #0f2346;--bpPrimary-950: #0a182f;--bpGray-1: #fdfdfd;--bpGray-50: #f8f8f9;--bpGray-100: #f0f0f3;--bpGray-200: #dadbe0;--bpGray-300: #c3c5cd;--bpGray-400: #9699a8;--bpGray-500: #696d83;--bpGray-600: #5f6276;--bpGray-700: #3f414f;--bpGray-800: #2f313b;--bpGray-900: #202127;--bpGray-950: #15161a;--bpError: #f05656;--bpRadius-scale: 1;--bpRadius-sm: 2px;--bpRadius-md: 6px;--bpRadius-lg: 8px;--bpRadius-xl: 12px;--bpRadius-2xl: 16px;--bpRadius-3xl: 24px;--bpRadius-full: 9999px;--bpSpacing-0: 0px;--bpSpacing-px: 1px;--bpSpacing-0_5: 2px;--bpSpacing-1: 4px;--bpSpacing-1_5: 6px;--bpSpacing-2: 8px;--bpSpacing-2_5: 10px;--bpSpacing-3: 12px;--bpSpacing-3_5: 14px;--bpSpacing-4: 16px;--bpSpacing-4_5: 18px;--bpSpacing-5: 20px;--bpSpacing-6: 24px;--bpSpacing-7: 28px;--bpSpacing-8: 32px;--bpSpacing-9: 36px;--bpSpacing-10: 40px;--bpSpacing-11: 44px;--bpSpacing-12: 48px;--bpSpacing-14: 56px;--bpSpacing-16: 64px;--bpSpacing-20: 80px;--bpSpacing-24: 96px;--bpSpacing-28: 112px;--bpSpacing-32: 128px;--bpSpacing-36: 144px;--bpSpacing-40: 160px;--bpSpacing-44: 176px;--bpSpacing-48: 192px;--bpSpacing-52: 208px;--bpSpacing-56: 224px;--bpSpacing-60: 240px;--bpSpacing-64: 256px;--bpSpacing-72: 288px;--bpSpacing-80: 320px;--bpSpacing-96: 384px;--header-bg: var(--transparent-light);--header-bg-hover: var(--transparent-light-hover);--header-hover-dark: var(--bpGray-200);--header-title: var(--bpGray-900);--header-description: var(--bpGray-800);--header-description-icon: var(--bpPrimary-800);--header-description-link: var(--bpPrimary-900);--header-avatar-bg: var(--bpPrimary-600);--header-avatar-text: var(--bpPrimary-50);--message-bg: var(--bpPrimary-100);--message-bg-hover: var(--bpPrimary-200);--message-text: var(--bpPrimary-900);--send-button-bg: var(--bpPrimary-600);--send-button-bg-hover: var(--bpPrimary-700);--send-button-text: var(--bpPrimary-50);--button-bg: var(--bpPrimary-500);--button-bg-hover: var(--bpPrimary-600);--button-text: var(--bpPrimary-50);--fab-bg: var(--bpPrimary-100);--fab-bg-hover: var(--bpPrimary-200);--fab-icon: var(--bpPrimary-700);--scrollbar: var(--bpGray-200);--scrollbar-hover: var(--bpGray-400);--modal-submit-bg: var(--bpPrimary-200);--modal-submit-bg-hover: var(--bpPrimary-300);--error-header-bg: #3d63dd;--error-header-text: white;--error-content-icon: var(--bpGray-400);--error-content-title: var(--bpGray-700);--error-content-message: var(--bpGray-600)}.bpContainer :focus-visible,.bpMessageBlocksDropdownContentContainer :focus-visible{outline:2px solid var(--bpPrimary-700)}.bpMessageBlocksDropdownContentContainer:focus-visible{outline:none}.bpMessageBlocksDropdownContentContainer{font-family:var(--inter-font)}.bpHidden{display:none}.bpHeightFull{height:100%}.bpFont{font-family:var(--inter-font)}.bpNotificationContainer{display:grid;padding:var(--bpSpacing-4);background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);gap:var(--bpSpacing-2);grid-template-columns:auto 1fr auto;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));box-shadow:0 4px 6px #0000001a}.bpNotificationTitle{color:var(--bpGray-900);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));font-weight:500;grid-column-start:2}.bpNotificationDescription{margin-top:var(--bpSpacing-1);color:var(--bpGray-800);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));grid-column-start:2}.bpNotificationIcon{height:var(--bpSpacing-5);aspect-ratio:1/1}.bpNotificationIcon[data-type=success]{color:var(--green-500)}.bpNotificationIcon[data-type=error]{color:var(--red-500)}.bpNotificationCloseIcon{height:var(--bpSpacing-5);aspect-ratio:1/1;cursor:pointer}.bpNotificationCloseIcon:hover{color:var(--bpGray-700)}.bpComposerFileAttachement{background-color:var(--bpGray-1);position:relative;width:fit-content;display:flex;border:1px solid var(--bpGray-200);padding:var(--bpSpacing-2);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));gap:var(--bpSpacing-2);transition:border-color .15s ease-out;animation:fadeInScaleUp .2s ease-out}.bpComposerFileAttachement:hover{border-color:var(--bpGray-300)}.bpComposerFileAttachement:hover .bpComposerFileRemoveIcon{opacity:1}.bpComposerFileIconWrapper{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bpPrimary-200);background:var(--bpPrimary-100);width:40px;height:40px;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));position:relative}.bpComposerFileIcon{color:var(--bpPrimary-600);width:24px;height:24px;transition:opacity .3s ease,filter .3s ease}.bpComposerFileMetadata{display:flex;flex-direction:column;gap:2px}.bpComposerFileName{min-width:96px;max-width:96px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));color:var(--bpGray-900)}.bpComposerFileExtension{font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-xs));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));font-weight:300;color:var(--bpGray-600)}.bpComposerFilePreviewImage{width:100%;height:100%;object-fit:contain;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpComposerFileRemoveIcon{position:absolute;top:-4px;right:-4px;border-radius:50%;width:20px;height:20px;cursor:pointer;stroke-width:1.5;color:var(--bpGray-600);background:var(--bpGray-100);line-height:1;opacity:0;transition:opacity .2s ease}.bpComposerFileLoader{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border:2px solid var(--bpGray-200);border-top:2px solid var(--bpPrimary-500);border-radius:50%;animation:spin .6s linear infinite;visibility:visible;opacity:1;transition:opacity .2s ease}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bpComposerFileErrorIcon{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--bpGray-1);color:var(--bpError)}.bpComposerFileAttachement[data-status=loading] .bpComposerFileIcon,.bpComposerFileAttachement[data-status=loading] .bpComposerFileMetadata,.bpComposerFileAttachement[data-status=error] .bpComposerFileIcon,.bpComposerFileAttachement[data-status=error] .bpComposerFileName{opacity:.5;filter:grayscale(100%)}.bpComposerFileAttachement[data-status=error] .bpComposerFileExtension{color:var(--bpError)}.bpComposerUploadButton{cursor:pointer;border-radius:var(--bpRadius-full);padding:var(--bpSpacing-2);height:var(--bpSpacing-8);width:var(--bpSpacing-8);color:var(--bpGray-600);transition:background .15s ease-out}.bpComposerUploadButton[data-disabled=true]{opacity:.5;filter:grayscale(100%);pointer-events:none}.bpComposerContainer[data-disabled=false] .bpComposerUploadButton:hover{color:var(--bpGray-700);background:var(--bpGray-100);cursor:pointer}.bpComposerVoiceButton{cursor:pointer;border-radius:var(--bpRadius-full);padding:var(--bpSpacing-2);height:var(--bpSpacing-8);width:var(--bpSpacing-8);color:var(--bpGray-600)}.bpComposerVoiceButton:hover{background-color:var(--bpGray-100)}.bpComposerVoiceButton[data-show=true]{animation:fadeIn .1s ease-out forwards}.bpComposerVoiceButton[data-show=false]{animation:fadeOut .1s ease-out forwards;pointer-events:none}.bpComposerVoiceButton[data-listens=true]{animation:pulsate-background 1.5s ease-in-out infinite}.bpComposerInput{margin:auto var(--bpSpacing-8) auto var(--bpSpacing-2);flex-grow:1;outline-style:none;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));resize:none;color:var(--bpGray-900);height:24px}.bpComposerInput:focus{outline:none!important}.bpComposerInput::-webkit-scrollbar{width:4px}.bpComposerInput::placeholder{color:var(--bpGray-500);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm))}@media (max-device-width: 1024px){.bpComposerInput{font-size:16px}}.bpComposerContainer{position:relative;display:flex;flex-direction:column;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));border-width:var(--bpSpacing-px);background:var(--bpGray-50);border-color:var(--bpGray-200);outline-color:transparent;transition-property:color,background-color,outline-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;margin:0 var(--bpSpacing-4);box-sizing:border-box;z-index:1}.bpComposerContainer:hover{border-color:var(--bpGray-300)}.bpComposerContainer:focus-within{outline:2px solid var(--bpPrimary-600);outline-offset:-1px}.bpComposerContainer[data-disabled=true]{background-color:var(--bpGray-100);border-color:var(--bpGray-200);color:var(--bpGray-500)}.bpComposerContainer[data-disabled=true] *{cursor:not-allowed}.bpComposerInputContainer{min-height:var(--bpSpacing-12);display:flex;align-items:end;padding:var(--bpSpacing-2)}.bpComposerInputContainer:has(.bpComposerUploadButton) .bpComposerInput{margin:auto var(--bpSpacing-8) auto var(--bpSpacing-1)}.bpComposerFileContainer{display:flex;overflow-x:scroll;gap:var(--bpSpacing-2);padding:var(--bpSpacing-2) var(--bpSpacing-2) 0 var(--bpSpacing-2);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--bpGray-200) transparent}.bpComposerSendButton{position:absolute;right:var(--bpSpacing-2);cursor:pointer;border-radius:var(--bpRadius-full);padding:var(--bpSpacing-2);background-color:var(--send-button-bg);color:var(--send-button-text);height:var(--bpSpacing-8);width:var(--bpSpacing-8);stroke-width:2px;opacity:0}.bpComposerSendButton[data-show=true]{opacity:1;transition:opacity .15s ease-out,transform .15s ease-out;transform:translateY(0)}.bpComposerSendButton[data-show=false]{opacity:0;transition:opacity .15s ease-out,transform .15s ease-out;transform:translateY(20%);pointer-events:none}.bpComposerContainer[data-disabled=false] .bpComposerSendButton:hover{background-color:var(--send-button-bg-hover)}.bpComposerContainer:has(+.bpComposerFooter:empty){margin-bottom:var(--bpSpacing-3)}.bpComposerFooter{align-self:center;text-align:center;margin:var(--bpSpacing-1) var(--bpSpacing-5);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-xs));color:var(--bpGray-400);cursor:default;overflow:visible}.bpComposerFooter>*{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bpComposerFooter:empty{display:none}.bpComposerFooter:hover a{cursor:pointer;color:var(--bpGray-500)}.bpComposerButtonContainer{display:flex;padding:var(--bpSpacing-2);justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));height:var(--bpSpacing-10);cursor:pointer}.bpComposerButtonContainer:disabled{display:none}.bpComposerButtonIcon{border-radius:var(--bpRadius-full);padding:var(--bpSpacing-1);background-color:var(--send-button-bg);color:var(--send-button-text);height:var(--bpSpacing-7);width:var(--bpSpacing-7);stroke:currentColor}.bpComposerContainer[data-disabled=false] .bpComposerButtonIcon:hover{background-color:color-mix(in srgb,var(--send-button-bg-hover),black 15%)}.bpComposerUploadButtonContainer{padding:var(--bpSpacing-1);margin:var(--bpSpacing-1);margin-right:calc(var(--bpSpacing-2) * -1);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpComposerUploadButtonIcon{color:var(--bpGray-800);display:block;padding:var(--bpSpacing-1);background:var(--bpGray-100);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));height:var(--bpSpacing-6);width:var(--bpSpacing-6)}.bpComposerUploadButtonIcon[data-disabled=true]{opacity:.5;filter:grayscale(100%);pointer-events:none}.bpComposerContainer[data-disabled=false] .bpComposerUploadButtonIcon:hover{color:var(--bpGray-700);background:var(--bpGray-200);cursor:pointer}.bpComposerVoiceButtonContainer{display:flex;padding:var(--bpSpacing-1);margin:var(--bpSpacing-1);justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));cursor:pointer}.bpComposerVoiceButtonIcon{border-radius:var(--bpRadius-full);padding:var(--bpSpacing-1);color:var(--bpGray-600);height:var(--bpSpacing-7);width:var(--bpSpacing-7)}.bpComposerVoiceButtonIcon:hover{background-color:var(--bpGray-200)}.bpComposerVoiceButtonIcon[data-listens=true]{animation:pulsate-background 1.5s ease-in-out infinite}.bpContainer{display:flex;justify-content:space-between;height:100%;overflow:hidden;position:relative;background:var(--bpGray-1);border-color:var(--bpGray-200);border-style:solid;border-width:1px;flex-direction:column;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));container-type:inline-size}.bpDropzoneOverlay{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:absolute;width:100%;height:100%;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));font-weight:500;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));z-index:3;pointer-events:none;opacity:0;transition:opacity .3s ease-in-out}.bpDropzoneOverlay[data-hover=true]{opacity:1}.bpFabContainer{width:100%;height:100%;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));cursor:pointer;background:var(--fab-bg)}.bpFabContainer:hover{background:var(--fab-bg-hover)}.bpFabIcon{height:100%;width:100%;background-position:center;background-repeat:no-repeat;background-color:var(--fab-icon);background-size:cover;-webkit-mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.583 14.894l-3.256 3.78c-.7.813-1.26.598-1.25-.46a10689.413 10689.413 0 0 1 .035-4.775V4.816a3.89 3.89 0 0 1 3.88-3.89h12.064a3.885 3.885 0 0 1 3.882 3.89v6.185a3.89 3.89 0 0 1-3.882 3.89H4.583z' fill='%23FFFFFF' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") no-repeat center;mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.583 14.894l-3.256 3.78c-.7.813-1.26.598-1.25-.46a10689.413 10689.413 0 0 1 .035-4.775V4.816a3.89 3.89 0 0 1 3.88-3.89h12.064a3.885 3.885 0 0 1 3.882 3.89v6.185a3.89 3.89 0 0 1-3.882 3.89H4.583z' fill='%23FFFFFF' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") no-repeat center}.bpFabImage{height:100%;width:100%;aspect-ratio:1 / 1;border-radius:50%;object-fit:cover}.bpFabImage:hover{opacity:.8;cursor:pointer}.bpHeaderContainer{position:absolute;display:flex;padding:var(--bpSpacing-1);flex-direction:column;width:100%;border-top-left-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));border-top-right-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));background-color:var(--header-bg);-webkit-backdrop-filter:blur(45px);backdrop-filter:blur(45px);transition:background-color .2s ease-out;z-index:2}.bpHeaderContentContainer{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr;padding:var(--bpSpacing-1) var(--bpSpacing-3);column-gap:var(--bpSpacing-2);align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));text-align:left;cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.bpHeaderContainer[data-state=open] .bpHeaderContentAvatarImage,.bpHeaderContainer[data-state=open] .bpHeaderContentAvatarFallback{height:var(--bpSpacing-16);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-3xl));font-weight:500;margin-top:var(--bpSpacing-6);margin-bottom:var(--bpSpacing-6)}.bpHeaderContainer:not([data-disabled]) .bpHeaderContentContainer:hover{background-color:var(--header-bg-hover)}.bpHeaderContainer[data-disabled] .bpHeaderContentContainer:hover{cursor:default}.bpHeaderContentContainer[data-state=open]{justify-items:center;grid-template-columns:1fr}.bpHeaderContentContainer[data-state=open] .bpHeaderContentActionsContainer{display:none}.bpHeaderContentContainer[data-state=open] .bpHeaderContentAvatarImage{margin-top:var(--bpSpacing-6);width:var(--bpSpacing-16);height:var(--bpSpacing-16)}.bpHeaderContentContainer[data-state=closed]{justify-items:start;grid-template-columns:auto 1fr auto}.bpHeaderContentAvatarContainer{overflow:hidden;padding:var(--bpSpacing-px);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));grid-row:span 2 / span 2}.bpHeaderContentAvatarImage{aspect-ratio:1/1;object-fit:cover;height:var(--bpSpacing-8);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full))}.bpHeaderContentAvatarFallback{aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));height:var(--bpSpacing-8);line-height:var(--bpSpacing-12);background-color:var(--header-avatar-bg);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));color:var(--header-avatar-text)}.bpHeaderContentTitle{display:flex;padding-top:var(--bpSpacing-0_5);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-2xl));font-weight:500;color:var(--header-title);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}.bpHeaderContentDescription{font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));font-weight:300;color:var(--header-description);width:100%}.bpHeaderContentContainer[data-state=closed] .bpHeaderContentDescription{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bpHeaderContentContainer[data-state=open] .bpHeaderContentDescription,.bpHeaderContentContainer[data-state=open] .bpHeaderContentTitle{justify-content:center;text-align:center}.bpHeaderContentContainer[data-state=closed] .bpHeaderContentDescription{grid-column-start:2}.bpHeaderContentActionsContainer{display:flex;grid-column-start:3;grid-row:span 2 / span 2;grid-row-start:1!important}.bpHeaderContentActionsIcons{padding:var(--bpSpacing-2);height:34px;width:34px;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));cursor:pointer;color:var(--header-description);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.bpHeaderContentActionsIcons:hover{background-color:var(--header-hover-dark)}.bpHeaderExpandedContentContainer{display:grid;padding:var(--bpSpacing-2);gap:var(--bpSpacing-4);row-gap:var(--bpSpacing-4);justify-items:center;align-items:center;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg))}.bpHeaderExpandedContentDescriptionItemsContainer{display:flex;gap:var(--bpSpacing-1);align-items:center;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-xs));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));color:var(--header-description);position:relative;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-sm))}.bpHeaderExpandedContentDescriptionItemsContainer:hover{color:var(--header-title);cursor:pointer}.bpHeaderExpandedContentDescriptionItemsContainer[data-terms]+.bpHeaderExpandedContentDescriptionItemsContainer[data-privacy]{margin-left:calc(var(--bpSpacing-4) + 1px)}.bpHeaderExpandedContentDescriptionItemsContainer[data-terms]+.bpHeaderExpandedContentDescriptionItemsContainer[data-privacy]:before{content:"";position:absolute;left:calc(var(--bpSpacing-4) / -2);top:auto;bottom:auto;height:10px;width:1px;background-color:var(--bpGray-500)}.bpHeaderExpandedContentDescriptionItemsIcon{padding:var(--bpSpacing-1);height:var(--bpSpacing-6);color:var(--header-description)}.bpHeaderExpandedContentDescriptionItemsContainer[data-email] .bpHeaderExpandedContentDescriptionItemsIcon,.bpHeaderExpandedContentDescriptionItemsContainer[data-phone] .bpHeaderExpandedContentDescriptionItemsIcon,.bpHeaderExpandedContentDescriptionItemsContainer[data-website] .bpHeaderExpandedContentDescriptionItemsIcon{color:var(--header-description-icon)}.bpHeaderExpandedContentDescriptionItemsText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;color:var(--header-description-link)}.bpHeaderExpandedContentDescriptionItemsLink{overflow:hidden;text-overflow:ellipsis;color:var(--header-description-link);white-space:nowrap;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-xs))}.bpHeaderExpandedContentDescriptionItemsLink:hover{text-decoration:underline;text-decoration-color:var(--header-description-link)}.bpHeaderExpandedContentGroup{display:flex;flex-direction:column}.bpHeaderExpandedContentGroup[data-legal]{flex-direction:row}.bpHeaderExpandedContentGroup[data-legal] .bpHeaderExpandedContentDescriptionItemsIcon{display:none}.bpHeaderExpandedContentGroup[data-links]{gap:var(--bpSpacing-2);flex-direction:column}.bpMessageListMarqueeContainer{margin-top:auto;display:flex;gap:var(--bpSpacing-2);flex-direction:column;align-items:center;justify-content:center;padding:var(--bpSpacing-20) 0 var(--bpSpacing-12) 0}.bpMessageListMarqueeContent{display:flex;flex-direction:column;max-width:60ch}.bpMessageListMarqueeTitle{color:var(--bpGray-800);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-md));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-2xl));font-weight:500;text-align:center}.bpMessageListMarqueeDescription{color:var(--bpGray-500);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));text-align:center;margin-top:var(--bpSpacing-1)}.bpMessageListMarqueeAvatarContainer{overflow:hidden;padding:var(--bpSpacing-px);margin-bottom:var(--bpSpacing-3);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full))}.bpMessageListMarqueeAvatarImage{height:var(--bpSpacing-20);aspect-ratio:1/1;object-fit:cover;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full))}.bpMessageListMarqueeAvatarFallback{display:flex;align-items:center;justify-content:center;height:var(--bpSpacing-20);width:var(--bpSpacing-20);background-color:var(--bpPrimary-600);color:var(--bpPrimary-50);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-3xl));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-4xl));border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full))}.bpMessageContainer{display:flex;width:100%;gap:var(--bpSpacing-2);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));color:var(--bpGray-900);word-break:break-word;position:relative;animation:fadeInSlideUp .4s ease-out;transition:margin-bottom .3s ease-out}.bpMessageContainer[data-direction=incoming]{justify-content:flex-start}.bpMessageContainer[data-direction=outgoing]{justify-content:flex-end}.bpMessageContainer[data-direction=system]{justify-content:center;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-xs));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));margin-top:var(--bpSpacing-4);color:var(--bpGray-800)}.bpMessageContainer:has(.bpMessageBlocksBubbleFeedbackIcon[data-selected=true]):not(:last-child){margin-bottom:var(--bpSpacing-3)}.bpMessageContainer:after{content:"Delivered";color:var(--bpGray-600);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-xs));position:absolute;bottom:-20px;right:0;opacity:0;overflow:hidden;animation:none;transition:opacity .3s ease-out}.bpMessageDeliveryStatus{margin-bottom:var(--bpSpacing-3)}.bpMessageDeliveryStatus:after{opacity:1}.bpMessageAvatarContainer{display:none;overflow:hidden;position:relative;flex-shrink:0;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));height:var(--bpSpacing-7);align-self:flex-end}.bpMessageAvatarContainer[data-loading-status=loading] .bpMessageAvatarFallback{opacity:0}.bpMessageContainer[data-direction=incoming] .bpMessageAvatarContainer,.bpMessageContainer[data-direction=outgoing] .bpMessageAvatarContainer{display:flex}.bpMessageAvatarImage{aspect-ratio:1/1;object-fit:cover;height:100%}.bpMessageAvatarFallback{display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));background-color:var(--bpPrimary-600);color:var(--bpPrimary-50);height:100%;aspect-ratio:1/1}.bpMessageListContainer{display:flex;overflow-y:auto;overflow-x:hidden;width:100%;box-sizing:border-box;scrollbar-width:none;flex-grow:1;padding:var(--bpSpacing-1);margin-bottom:-25px;position:relative}.bpMessageListContainer>div{display:flex;flex-direction:column;overflow:auto;scrollbar-width:none}.bpMessageListViewport{display:flex;gap:var(--bpSpacing-2);flex-direction:column;padding:var(--bpSpacing-3);padding-bottom:var(--bpSpacing-12);scrollbar-width:none;margin-top:auto}.bpMessageListHeaderMessage{position:sticky;top:0;margin-left:auto;margin-right:auto;color:var(--bpGray-600);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base))}.bpMessageListContainer .bpMessageListScrollDownButton{background-color:var(--bpGray-100);height:32px;width:32px;padding:6px;z-index:10;border-radius:50%;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;position:absolute;left:0;right:0;cursor:pointer;bottom:var(--bpSpacing-9);margin:auto;animation:fadeInSlideUp .2s ease-out}.bpMessageListScrollDownButton:after{display:block;content:"";-webkit-mask:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>') no-repeat center;mask:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>') no-repeat center;background-position:center;background-repeat:no-repeat;background-color:var(--bpGray-500);background-size:cover;width:20px;height:20px}.bpMessageListContainer .bpMessageListScrollDownButton:hover{background-color:var(--bpGray-200)}.bpModalOverlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;background-color:#0000004d}.bpModalOverlay[data-state=open]{animation:fadeIn .2s ease-out}.bpModalOverlay[data-state=closed]{animation:fadeOut .1s ease-in}.bpModalContainer{color:var(--bpGray-900);border:1px solid var(--bpGray-100);background:var(--bpGray-50);position:absolute;bottom:0;z-index:30;padding:var(--bpSpacing-3);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));width:100%;pointer-events:auto}.bpModalContainer[data-state=open]{animation:slideUp .2s ease-out}.bpModalContainer[data-state=closed]{animation:slideDown .1s ease-out}.bpModalTitle{display:flex;justify-content:center;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-2xl));color:var(--bpGray-900);margin-bottom:var(--bpSpacing-4)}.bpModalDescription{display:none}.bpModalContentContainer{display:flex;flex-direction:column;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));color:var(--bpGray-900)}.bpModalButtonContainer{display:flex;flex-direction:column;gap:var(--bpSpacing-2)}.bpModalButtonConfirm{width:100%;padding:var(--bpSpacing-3);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));color:var(--message-text);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));background:var(--modal-submit-bg);transition:background .1s ease-out}.bpModalButtonConfirm:hover{background:var(--modal-submit-bg-hover)}.bpModalButtonCancel{width:100%;padding:var(--bpSpacing-3);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));color:var(--bpGray-900);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-xl));background:var(--bpGray-100);transition:background .1s ease-out}.bpModalButtonCancel:hover{background:var(--bpGray-200)}.bpModalContentTextArea{margin:0 var(--bpSpacing-2) var(--bpSpacing-4) var(--bpSpacing-2);padding:var(--bpSpacing-2);border:1px solid var(--bpGray-300);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-sm));resize:none}.bpModalContentTextArea:focus{outline:none}@container (min-width: 448px){.bpModalContainer{max-width:600px;width:60%;bottom:50%;left:50%;transform:translate(-50%);padding:var(--bpSpacing-6)}.bpModalContainer[data-state=open]{animation:fadeIn .2s ease-out}.bpModalContainer[data-state=closed]{animation:fadeOut .1s ease-out}.bpModalTitle{justify-content:start;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-2xl));color:var(--bpGray-900);margin-top:var(--bpSpacing-2);margin-bottom:var(--bpSpacing-2)}.bpModalDescription{display:flex;justify-content:start;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));color:var(--bpGray-600);margin-bottom:var(--bpSpacing-3)}.bpModalContentContainer{flex-direction:row;justify-content:center}.bpModalContentTextArea{width:100%;margin:0 0 var(--bpSpacing-4) 0}.bpModalButtonContainer{width:100%;display:flex;flex-direction:row-reverse;justify-content:end;white-space:nowrap;gap:var(--bpSpacing-2);margin-top:var(--bpSpacing-8)}.bpModalButtonConfirm,.bpModalButtonCancel{width:auto;padding:var(--bpSpacing-2) var(--bpSpacing-4)}}.bpMessageBlocksAudio{max-width:85%}.bpMessageBlocksBubble{position:relative;padding:var(--bpSpacing-2) var(--bpSpacing-4);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));max-width:85%}.bpMessageBlocksBubble[data-direction=outgoing]{background-color:var(--message-bg);color:var(--message-text);border-bottom-right-radius:var(--bpRadius-sm)}.bpMessageBlocksBubble[data-direction=incoming]{background-color:var(--bpGray-100);color:var(--bpGray-900);border-bottom-left-radius:var(--bpRadius-sm)}.bpMessageBlocksBubbleFeedbackContainer{display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));background-color:var(--bpGray-1);gap:var(--bpSpacing-1);height:24px;width:52px;position:absolute;left:85%;opacity:0;transition:opacity .2s ease-in-out;box-shadow:0 1px 4px #0000000d;z-index:1;transform:translate(-50%)}.bpMessageBlocksBubble[data-feedback=true] .bpMessageBlocksBubbleFeedbackContainer{opacity:1}.bpMessageContainer[data-direction=incoming]:last-child .bpMessageBlocksBubble .bpMessageBlocksBubbleFeedbackContainer{opacity:1}.bpMessageBlocksBubble:hover .bpMessageBlocksBubbleFeedbackContainer{opacity:1}.bpMessageBlocksBubbleFeedbackIcon{color:var(--bpGray-500);height:16px;width:16px;stroke-width:1.5;cursor:pointer}.bpMessageBlocksBubbleFeedbackIcon[data-selected=true]{color:var(--bpPrimary-600);stroke-width:2;pointer-events:none;cursor:default}.bpMessageBlocksBubbleFeedbackIcon:hover{stroke-width:2}.bpNegativeReactionFeedbackForm{display:flex;flex-direction:column}.bpMessageBlocksBubbleFeedbackFormSubmitButton{background-color:var(--bpPrimary-600);color:var(--bpGray-1);border-radius:var(--bpRadius-md);padding:var(--bpSpacing-1_5) var(--bpSpacing-3);border:none;cursor:pointer}.bpMessageBlocksButton{padding:var(--bpSpacing-1) var(--bpSpacing-3);background-color:var(--button-bg);color:var(--button-text);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));cursor:pointer;transition:background-color .15s ease-out}.bpMessageBlocksButton:hover{background-color:var(--button-bg-hover)}.bpMessageBlocksButton[data-activated]:disabled{background-color:var(--button-bg);color:var(--button-text)}.bpMessageBlocksButton[data-group-activated]{background-color:var(--bpGray-100);color:var(--bpGray-600)}.bpMessageBlocksButton[data-group-activated]:hover{cursor:default}.bpMessageBlocksCarouselContainer{overflow:hidden;position:relative}.bpMessageBlocksCarouselSlidesContainer{display:grid;padding-left:var(--bpSpacing-2);padding-right:var(--bpSpacing-2);gap:var(--bpSpacing-2);grid-auto-flow:column;grid-auto-columns:100%}.bpMessageBlocksCarouselBackButton,.bpMessageBlocksCarouselNextButton{position:absolute;top:50%;transform:translateY(-50%);background-color:var(--bpGray-300);color:var(--bpGray-100);height:var(--bpSpacing-7);width:var(--bpSpacing-7);padding:var(--bpSpacing-0_5);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;box-shadow:0 2px 4px #0000001a}.bpMessageBlocksCarouselBackButton:hover,.bpMessageBlocksCarouselNextButton:hover{background-color:var(--bpGray-400);color:var(--bpGray-1);transform:translateY(-50%) scale(1.1)}.bpMessageBlocksCarouselBackButton{left:var(--bpSpacing-1)}.bpMessageBlocksCarouselNextButton{right:var(--bpSpacing-1)}.bpMessageBlocksCarouselNextButton[data-disabled],.bpMessageBlocksCarouselBackButton[data-disabled]{display:none}.bpMessageBlocksColumn{display:flex;flex-direction:column;gap:var(--bpSpacing-2);width:100%}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksColumn{align-items:flex-end}.bpMessageContainer[data-direction=incoming] .bpMessageBlocksColumn{align-items:flex-start}.bpMessageBlocksColumn[data-horizontal=center]{align-items:center!important;text-align:center!important}.bpMessageBlocksColumn[data-horizontal=right]{align-items:flex-end!important}.bpMessageBlocksColumn[data-horizontal=left]{align-items:flex-start!important}.bpMessageBlocksColumn[data-vertical=stretch]{justify-content:space-between!important}.bpMessageBlocksDropdownButtonContainer{display:flex;padding:var(--bpSpacing-2);background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);border-radius:var(--bpRadius-md);align-items:center;justify-content:space-between;min-width:min(150px,100%);max-width:min(250px,100%);cursor:pointer;color:var(--bpGray-900)}.bpMessageBlocksDropdownButtonContainer[data-disabled=true]{color:var(--bpGray-700);cursor:not-allowed;border-color:var(--bpGray-200)}.bpMessageBlocksDropdownButtonText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base))}.bpMessageBlocksDropdownButtonIcon{height:var(--bpSpacing-4);width:var(--bpSpacing-4);margin-left:var(--bpSpacing-2)}.bpMessageBlocksDropdownContentContainer{background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);border-radius:var(--bpRadius-md);min-width:100px;max-height:200px;overflow-y:auto;padding:var(--bpSpacing-1);z-index:1}.bpMessageBlocksDropdownContentItem{color:var(--bpGray-800);line-height:1.5;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));padding:var(--bpSpacing-1);cursor:pointer;border-radius:var(--bpRadius-sm)}.bpMessageBlocksDropdownContentItem:hover{background-color:var(--bpGray-100);color:var(--bpGray-900)}.bpMessageBlocksFileContainer{display:flex;padding-top:var(--bpSpacing-2);padding-bottom:var(--bpSpacing-2);padding-left:var(--bpSpacing-4);padding-right:var(--bpSpacing-4);gap:var(--bpSpacing-2);align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:var(--bpGray-100);color:var(--bpGray-900)}.bpMessageBlocksFileContainer:hover{color:var(--bpGray-950);background-color:var(--bpGray-200)}.bpMessageBlocksFileTitle{text-decoration:underline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpMessageBlocksFileIcon{flex:none;width:20px;height:20px;color:var(--bpPrimary-800)}.bpMessageBlocksImageImage{min-width:0px;max-width:95%;border:1px solid var(--bpGray-200);object-fit:cover;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpMessageBlocksImageImage[data-loaded=false]{display:none}.bpMessageBlocksImageImage[data-orientation=landscape]{aspect-ratio:4 / 3}.bpMessageBlocksImageImage[data-orientation=portrait]{aspect-ratio:3 / 4}.bpMessageBlocksImageImage[data-orientation=square]{aspect-ratio:1 / 1}.bpMessageBlocksImageImage[data-error=true]{display:flex;justify-content:center;align-items:center;color:var(--bpGray-200)}@media (min-width: 640px){.bpMessageBlocksImageImage{width:var(--bpSpacing-56)}}.bpMessageBlocksImagePlaceholder{min-width:0px;max-width:95%;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpMessageBlocksImagePlaceholder[data-orientation=landscape]{aspect-ratio:4 / 3}.bpMessageBlocksImagePlaceholder[data-orientation=portrait]{aspect-ratio:3 / 4}.bpMessageBlocksImagePlaceholder[data-orientation=square]{aspect-ratio:1 / 1}@media (min-width: 640px){.bpMessageBlocksImagePlaceholder{width:var(--bpSpacing-56)}}.bpMessageBlocksLocationContainer{display:flex;gap:var(--bpSpacing-1);padding:var(--bpSpacing-2) var(--bpSpacing-4);background-color:var(--bpGray-100);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));align-items:center}.bpMessageBlocksLocationContainer:hover{color:var(--bpGray-950);background-color:var(--bpGray-200)}.bpMessageBlocksLocationTitle{color:var(--bpGray-900);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));cursor:pointer}.bpMessageBlocksLocationIcon{height:var(--bpSpacing-5);width:var(--bpSpacing-5);fill:var(--bpPrimary-600);color:var(--bpPrimary-200)}.bpMessageContainer[data-direction=incoming] .bpMessageBlocksRow{justify-content:flex-start}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksRow{justify-content:flex-end}.bpMessageBlocksRow{display:flex;gap:var(--bpSpacing-2);flex-wrap:wrap}.bpMessageBlocksTextHeading1{font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-2xl));font-weight:600;line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-3xl));margin-top:var(--bpSpacing-7);margin-bottom:var(--bpSpacing-6)}.bpMessageBlocksTextHeading2{font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));font-weight:600;line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-2xl));margin-top:var(--bpSpacing-6);margin-bottom:var(--bpSpacing-5)}.bpMessageBlocksTextHeading3{font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-md));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-xl));font-weight:500;margin-top:var(--bpSpacing-5);margin-bottom:var(--bpSpacing-4)}.bpMessageBlocksTextHeading4{margin-top:var(--bpSpacing-1);font-weight:500;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-xl))}.bpMessageBlocksTextOrderedList{list-style-type:decimal}.bpMessageBlocksTextUnorderedList{list-style-type:disc}.bpMessageBlocksTextUnorderedList,.bpMessageBlocksTextOrderedList{padding-left:var(--bpSpacing-2);margin:var(--bpSpacing-3) 0;list-style-position:inside}.bpMessageBlocksTextUnorderedList::marker,.bpMessageBlocksTextOrderedList::marker{color:var(--bpGray-800)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextUnorderedList::marker,.bpMessageBlocksTextOrderedList::marker{color:var(--bpPrimary-950)}.bpMessageBlocksTextListItem{line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));margin:var(--bpSpacing-2) 0}.bpMessageBlocksTextLink{text-decoration:underline;cursor:pointer}.bpMessageBlocksTextLink:hover{text-decoration:none;opacity:.7}li>.bpMessageBlocksTextText{display:inline}.bpMessageBlocksTextImage{margin:var(--bpSpacing-3) 0;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpMessageBlocksTextImage[data-error=true]{display:flex;justify-content:center;align-items:center}.bpMessageBlocksTextHorizontalRule{color:var(--bpGray-300);margin:var(--bpSpacing-4) 0}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextHorizontalRule{color:var(--bpPrimary-300)}.bpMessageBlocksTextCodeBlockContainer{margin:16px 0;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpMessageBlocksTextCodeBlockTitle{display:flex;justify-content:space-between;align-items:center;background:var(--bpGray-200);color:var(--bpGray-900);padding:var(--bpSpacing-1) var(--bpSpacing-3);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-xs));border:1px solid var(--bpGray-200);border-top-left-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));border-top-right-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));border-bottom:none}.bpMessageBlocksTextCodeBlockCopyIcon{width:24px;padding:var(--bpSpacing-1);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));color:var(--bpGray-800)}.bpMessageBlocksTextCodeBlockCopyIcon:hover{cursor:pointer;background:var(--bpGray-300)}.bpMessageBlocksTextCodeBlock{background:var(--bpGray-50);padding:var(--bpSpacing-3);overflow-x:auto;line-height:1.6;border:1px solid var(--bpGray-200);border-top:none;border-bottom-left-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));border-bottom-right-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextCodeBlock{background:var(--bpPrimary-50);color:var(--bpGray-950)}.bpMessageBlocksTextCode{background:var(--bpGray-300);border-radius:4px;font-weight:500;padding:var(--bpSpacing-0_5) var(--bpSpacing-1)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextCode{background:var(--bpPrimary-400)}.bpMessageBlocksTextCodeBlock .bpMessageBlocksTextCode,.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextCodeBlock .bpMessageBlocksTextCode{background:transparent;border-radius:0;font-weight:inherit;padding:0}.bpMessageBlocksTextTableContainer{overflow-x:auto;margin:var(--bpSpacing-6) 0;width:100%;display:block;-webkit-overflow-scrolling:touch}.bpMessageBlocksTextTable{border-collapse:collapse;color:inherit;width:100%;min-width:100%;table-layout:auto;white-space:nowrap;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg))}.bpMessageBlocksTextTableHeader{border-bottom:2px solid var(--bpGray-300);padding:var(--bpSpacing-1);text-align:left;font-weight:600}.bpMessageBlocksTextTableHeader:first-child{padding-left:0}.bpMessageBlocksTextTableHeader:last-child{padding-right:0}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextTableHeader{border-bottom:2px solid var(--bpPrimary-300)}.bpMessageBlocksTextTableData{padding:var(--bpSpacing-3) var(--bpSpacing-1)}.bpMessageBlocksTextTableData:first-child{padding-left:0}.bpMessageBlocksTextTableData:last-child{padding-right:0}.bpMessageBlocksTextTableRow{border-bottom:1px solid var(--bpGray-200)}.bpMessageBlocksTextTableRow:last-child{border-bottom:none}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextTableRow{border-bottom:1px solid var(--bpPrimary-200)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextTableRow:last-child{border-bottom:none}.bpMessageBlocksTextInput[type=checkbox]{pointer-events:none}.bpMessageBlocksTextText+.bpMessageBlocksTextText{margin-top:var(--bpSpacing-4)}.bpMessageBlocksVideo{border:1px solid var(--bpGray-200);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md))}.bpTypingIndicatorContainer{display:flex;gap:var(--bpSpacing-1_5);padding:var(--bpSpacing-3);background-color:var(--bpGray-100);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-lg));align-items:end}.bpTypingIndicatorContainer:before,.bpTypingIndicatorContainer:after{content:"";display:block;width:var(--bpSpacing-1_5);height:var(--bpSpacing-1_5);background-color:var(--bpGray-800);border-radius:50%;animation:jump 1s infinite}.bpTypingIndicatorContainer:after{animation-delay:.2s}.bpTypingIndicatorLoader{width:var(--bpSpacing-1_5);height:var(--bpSpacing-1_5);background-color:var(--bpGray-800);border-radius:50%;animation:jump 1s infinite .1s}@keyframes jump{0%,50%,to{transform:translateY(0)}25%{background-color:var(--bpGray-400);transform:translateY(-75%)}}.bpLoader{width:8px;height:8px;border-radius:50%;display:block;margin:auto;position:relative;background:transparent;box-shadow:-16px 0 transparent,16px 0 transparent;box-sizing:border-box;animation:shadowPulse 2s linear infinite}@keyframes shadowPulse{33%{background:transparent;box-shadow:-16px 0 var(--bpPrimary-600),16px 0 transparent}66%{background:var(--bpPrimary-600);box-shadow:-16px 0 transparent,16px 0 transparent}to{background:transparent;box-shadow:-16px 0 transparent,16px 0 var(--bpPrimary-600)}}.bpErrorContainer{display:flex;flex-direction:column;height:100%;font-family:var(--font-family);background-color:var(--bpGray-1)}.bpErrorHeader{display:flex;align-items:center;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));height:48px;color:var(--error-header-text);background-color:var(--error-header-bg);padding:var(--bpSpacing-2) var(--bpSpacing-4);justify-content:space-between}.bpErrorHeaderActions{display:flex;align-items:center;color:var(--error-header-text);background-color:var(--error-header-bg)}.bpErrorContent{padding:var(--bpSpacing-6);text-align:center;display:flex;flex-direction:column;flex:1;justify-content:center;align-items:center}.bpErrorIcon{color:var(--error-content-icon);stroke-width:1.25;width:80px;height:80px}.bpErrorTitle{color:var(--error-content-title);padding:var(--bpSpacing-2);font-weight:600;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg))}.bpErrorMessage{line-height:1.5;color:var(--error-content-message);margin-bottom:var(--bpSpacing-2);white-space:pre-line}.bpErrorId{color:var(--bpGray-200);font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-xs))}.bpMessagePreviewContainer{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;row-gap:var(--bpSpacing-1);column-gap:var(--bpSpacing-2);border:var(--bpGray-300) 1px solid;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-sm));padding:var(--bpSpacing-3);height:100%;background-color:var(--bpGray-1);align-items:center;cursor:pointer}.bpMessagePreviewMessage{flex:1;font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-sm));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-lg));color:var(--bpGray-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2/3}.bpMessagePreviewDescription{font-size:calc(var(--bpFontSize-scale) * var(--bpFontSize-xs));line-height:calc(var(--bpFontSize-scale) * var(--bpFontSize-base));color:var(--bpGray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2/3}.bpMessagePreviewCloseButton{display:none;color:var(--bpGray-400);cursor:pointer;padding:var(--bpSpacing-1);transition:color .2s ease,color .2s ease;grid-column:3/4;grid-row:1/3;margin-left:calc(var(--bpSpacing-2) * -1);align-self:self-start}@media (max-device-width: 1024px){.bpMessagePreviewCloseButton{display:block}}.bpMessagePreviewContainer:hover .bpMessagePreviewCloseButton{display:block}.bpMessagePreviewCloseButton:hover{color:var(--bpGray-600)}.bpMessagePreviewAvatarContainer{overflow:hidden;padding:var(--bpSpacing-0_5);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));flex:none;grid-row:span 2 / span 2}.bpMessagePreviewAvatarImage{aspect-ratio:1/1;object-fit:cover;height:var(--bpSpacing-9);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full))}.bpMessagePreviewAvatarFallback{aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-full));height:var(--bpSpacing-9);line-height:var(--bpSpacing-12);background-color:var(--header-avatar-bg);color:var(--header-avatar-text)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeInScaleUp{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes fadeInSlideUp{0%{transform:translateY(20%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInFromRight{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@keyframes pulsate-background{0%,to{background-color:var(--bpPrimary-100);color:var(--bpGray-600)}50%{background-color:var(--bpPrimary-400);color:var(--bpGray-800)}}
package/eslint.config.mjs ADDED
@@ -0,0 +1,15 @@
1
+ import { reactInternalConfig } from '@repo/eslint-config/react-internal'
2
+ import storybook from 'eslint-plugin-storybook'
3
+ import { defineConfig } from 'eslint/config'
4
+
5
+ export default defineConfig([reactInternalConfig, storybook.configs['flat/recommended']], {
6
+ ignores: ['!.storybook/**'],
7
+ languageOptions: {
8
+ parserOptions: {
9
+ projectService: {
10
+ allowDefaultProject: ['check-bundle-size.js', '.storybook/*'],
11
+ },
12
+ tsconfigRootDir: import.meta.dirname,
13
+ },
14
+ },
15
+ })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@botpress/webchat",
3
- "version": "4.0.1",
3
+ "version": "4.0.3",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "main": "./dist/index.umd.cjs",
@@ -73,6 +73,7 @@
73
73
  "@storybook/addon-interactions": "^8.4.7",
74
74
  "@storybook/addon-onboarding": "^8.4.7",
75
75
  "@storybook/blocks": "^8.4.7",
76
+ "@storybook/builder-vite": "8.4.7",
76
77
  "@storybook/react": "^8.4.7",
77
78
  "@storybook/react-vite": "^8.4.7",
78
79
  "@storybook/test": "^8.4.7",
@@ -88,7 +89,7 @@
88
89
  "@vitejs/plugin-react-swc": "^3.8.0",
89
90
  "chromatic": "^11.20.0",
90
91
  "cross-env": "^7.0.3",
91
- "eslint-plugin-storybook": "^0.9.0",
92
+ "eslint-plugin-storybook": "^0.10.2",
92
93
  "jsdom": "^26.1.0",
93
94
  "prop-types": "^15.8.1",
94
95
  "storybook": "^8.4.7",
package/readme.md CHANGED
@@ -1,56 +1,215 @@
1
- # Webchat
1
+ # @botpress/webchat
2
+
3
+ A fully customizable React library that lets you seamlessly integrate Botpress Webchat into your React applications.
4
+
5
+ ## Features
6
+
7
+ - 🎨 **Fully Customizable** - Style and configure every aspect of the webchat experience
8
+ - 🔌 **Easy Integration** - Simple installation and setup process
9
+ - 🛠️ **Flexible Architecture** - Use pre-built components or build custom implementations
10
+ - 📱 **Responsive** - Works seamlessly across desktop and mobile devices
2
11
 
3
12
  ## Installation
4
13
 
5
14
  ```bash
6
- npm install @botpress/webchat # for npm
7
- yarn add @botpress/webchat # for yarn
8
- pnpm add @botpress/webchat # for pnpm
15
+ # npm
16
+ npm install @botpress/webchat
17
+
18
+ # yarn
19
+ yarn add @botpress/webchat
20
+
21
+ # pnpm
22
+ pnpm install @botpress/webchat
9
23
  ```
10
24
 
11
- ## Usage
25
+ ## Requirements
12
26
 
13
- ```tsx
14
- import { useEffect, useState } from 'react'
15
- import { getClient, Webchat, WebchatProvider, WebchatClient, Configuration } from '@botpress/webchat'
27
+ - React 18 or higher
28
+ - A published Botpress bot
29
+ - Your bot's Client ID
16
30
 
17
- // also known as the webhookId; You can copy it from the Botpress Dashboard
18
- const clientId = '$CLIENT_ID'
31
+ ## Quick Start
19
32
 
20
- const userData = { foo: 'bar' }
21
- const configuration: Configuration = {
22
- botAvatar: 'https://upload.wikimedia.org/wikipedia/commons/9/91/T-bone-raw-MCB.jpg',
23
- botDescription: 'Hello, world!',
24
- botName: 'Hello Bot',
25
- }
33
+ ### Get Your Client ID
34
+
35
+ 1. Open your bot in the [Botpress Dashboard](https://app.botpress.cloud)
36
+ 2. Navigate to **Webchat** in the left sidebar
37
+ 3. Open the **Features** sub menu
38
+ 4. Go to the **Advanced Settings** tab
39
+ 5. Copy your **Client ID**
40
+
41
+ ### Basic Implementation
42
+
43
+ ```jsx
44
+ import { Fab, Webchat } from '@botpress/webchat'
45
+ import { useState } from 'react'
26
46
 
27
47
  function App() {
28
- const [client, setClient] = useState<WebchatClient | null>(null)
48
+ const [isWebchatOpen, setIsWebchatOpen] = useState(false)
29
49
 
30
- useEffect(() => {
31
- const client = getClient({ clientId })
32
- setClient(client)
50
+ return (
51
+ <>
52
+ <Webchat
53
+ clientId="YOUR_CLIENT_ID"
54
+ style={{
55
+ width: '400px',
56
+ height: '600px',
57
+ display: isWebchatOpen ? 'flex' : 'none',
58
+ position: 'fixed',
59
+ bottom: '90px',
60
+ right: '20px',
61
+ }}
62
+ />
63
+ <Fab
64
+ onClick={() => setIsWebchatOpen(!isWebchatOpen)}
65
+ style={{
66
+ position: 'fixed',
67
+ bottom: '20px',
68
+ right: '20px',
69
+ width: '64px',
70
+ height: '64px',
71
+ }}
72
+ />
73
+ </>
74
+ )
75
+ }
76
+ ```
77
+
78
+ ## Advanced Usage
79
+
80
+ ### Custom Webchat Implementation
33
81
 
34
- // You can listen on events sent by the Webchat backend like this:
35
- client.on('*', (ev) => {
36
- console.log('Event:', ev)
82
+ For more control over the webchat experience, build it manually using individual components:
37
83
 
38
- // You can also call the Webchat backend API like this:
39
- client.getUser().then((user) => {
40
- console.log('User:', user)
41
- })
42
- })
43
- }, [])
84
+ ```jsx
85
+ import { Container, Header, MessageList, Composer, useWebchat, Fab } from '@botpress/webchat'
86
+ import { useState, useMemo } from 'react'
44
87
 
45
- if (!client) {
46
- return <div>Loading...</div>
88
+ function App() {
89
+ const [isWebchatOpen, setIsWebchatOpen] = useState(false)
90
+ const { client, messages, isTyping, user, clientState, newConversation } = useWebchat({
91
+ clientId: 'YOUR_CLIENT_ID',
92
+ })
93
+
94
+ const config = {
95
+ botName: 'SupportBot',
96
+ botAvatar: 'https://example.com/avatar.png',
97
+ botDescription: 'Your virtual assistant',
47
98
  }
99
+
100
+ const enrichedMessages = useMemo(
101
+ () =>
102
+ messages.map((message) => {
103
+ const direction = message.authorId === user?.userId ? 'outgoing' : 'incoming'
104
+ return {
105
+ ...message,
106
+ direction,
107
+ sender:
108
+ direction === 'outgoing'
109
+ ? { name: user?.name ?? 'You', avatar: user?.pictureUrl }
110
+ : { name: config.botName, avatar: config.botAvatar },
111
+ }
112
+ }),
113
+ [messages, user, config]
114
+ )
115
+
48
116
  return (
49
- <WebchatProvider client={client} configuration={configuration} userData={userData}>
50
- <Webchat />
51
- </WebchatProvider>
117
+ <>
118
+ <Container
119
+ connected={clientState !== 'disconnected'}
120
+ style={{
121
+ width: '500px',
122
+ height: '800px',
123
+ display: isWebchatOpen ? 'flex' : 'none',
124
+ position: 'fixed',
125
+ bottom: '90px',
126
+ right: '20px',
127
+ }}
128
+ >
129
+ <Header
130
+ closeWindow={() => setIsWebchatOpen(false)}
131
+ restartConversation={newConversation}
132
+ configuration={{
133
+ botName: config.botName,
134
+ botAvatar: config.botAvatar,
135
+ botDescription: config.botDescription,
136
+ }}
137
+ />
138
+ <MessageList
139
+ botName={config.botName}
140
+ botDescription={config.botDescription}
141
+ isTyping={isTyping}
142
+ messages={enrichedMessages}
143
+ sendMessage={client?.sendMessage}
144
+ />
145
+ <Composer
146
+ connected={clientState !== 'disconnected'}
147
+ sendMessage={client?.sendMessage}
148
+ uploadFile={client?.uploadFile}
149
+ composerPlaceholder="Type a message..."
150
+ />
151
+ </Container>
152
+ <Fab
153
+ onClick={() => setIsWebchatOpen(!isWebchatOpen)}
154
+ style={{
155
+ position: 'fixed',
156
+ bottom: '20px',
157
+ right: '20px',
158
+ }}
159
+ />
160
+ </>
52
161
  )
53
162
  }
163
+ ```
164
+
165
+ ## Configuration
166
+
167
+ ### Using the Webchat Component
168
+
169
+ Pass configuration through the `configuration` prop:
170
+
171
+ ```jsx
172
+ <Webchat
173
+ clientId="YOUR_CLIENT_ID"
174
+ configuration={{
175
+ botName: 'My Bot',
176
+ botAvatar: 'https://example.com/avatar.png',
177
+ botDescription: 'Here to help!',
178
+ }}
179
+ />
180
+ ```
181
+
182
+ ### Custom Styling
183
+
184
+ Use the `StylesheetProvider` component for custom themes:
54
185
 
55
- export default App
186
+ ```jsx
187
+ import { StylesheetProvider } from '@botpress/webchat'
188
+ ;<StylesheetProvider>{/* Your webchat components */}</StylesheetProvider>
56
189
  ```
190
+
191
+ ## Components
192
+
193
+ - **Webchat** - All-in-one webchat component
194
+ - **Container** - Webchat container wrapper
195
+ - **Header** - Customizable header with bot info
196
+ - **MessageList** - Message display area
197
+ - **Composer** - Message input and file upload
198
+ - **Fab** - Floating action button
199
+ - **StylesheetProvider** - Custom styling provider
200
+ - **useWebchat** - Hook for webchat state and methods
201
+
202
+ ## Documentation
203
+
204
+ For detailed documentation, examples, and API reference, visit:
205
+
206
+ **[Botpress Webchat React Library Documentation](https://www.botpress.com/docs/webchat/react-library/get-started)**
207
+
208
+ ## Support
209
+
210
+ - 📖 [Documentation](https://www.botpress.com/docs)
211
+ - 💬 [Discord Community](https://discord.com/invite/botpress)
212
+
213
+ ## License
214
+
215
+ This library is part of the Botpress ecosystem. See the [Botpress repository](https://github.com/botpress/botpress) for license information.
package/.eslintrc.cjs DELETED
@@ -1,12 +0,0 @@
1
- /** @type {import("eslint").Linter.Config} */
2
- module.exports = {
3
- root: true,
4
- extends: ["@repo/eslint-config/react-internal.js", "plugin:storybook/recommended"],
5
- parser: "@typescript-eslint/parser",
6
- ignorePatterns: ["dist", "node_modules", "storybook-static", ".turbo", "turbo/*"],
7
- parserOptions: {
8
- project: "./tsconfig.json",
9
- tsconfigRootDir: __dirname,
10
- },
11
-
12
- };