@botfabrik/engine-webclient 4.77.4-alpha.8 → 4.78.0

package/README.md

@@ -292,7 +292,6 @@ Beispiel (de.json)
 ```json
 {
   "webclient": {
-    "page.title": "Apptiva Chatbot",
     "message-input-label": "Nachricht eingeben ...",
     "export-transcript": {
       "email": {
@@ -327,19 +326,6 @@ Das Aussehen des Webclients kann pro Projekt angepasst werden. Dazu kann eine ei
 Verzeichnis `public/\${name-meines-webclients}/` abgelegt werden. Auf gleiche Art und Weise können auch der FAB (fab.svg), der Bot-Avatar
 (bot.svg) sowie das Logo (logo.svg) angepasst werden.
 
-### Favicon
-
-Um ein eigenes Favicon zu haben, müssen folgende Dateien im Chatbot Projekt hinterlegt werden:
-
-- apple-touch-icon.png
-- favicon-96x96.png
-- favicon.ico
-- favicon.svg
-- web-app-manifest-192x192.png
-- web-app-manifest-512x512.png
-
-Favicons können z.B. mittels https://realfavicongenerator.net/ generiert werden.
-
 ### Standard CSS Variabeln
 
 ```css
@@ -361,23 +347,15 @@ Favicons können z.B. mittels https://realfavicongenerator.net/ generiert werden
   --fab-left: auto;
   --fab-left-mobile: var(--fab-left, auto);
 
-  /* Text */
-  --text-primary-color: var(--color-gray-800);
-  --text-secondary-color: var(--color-gray-500);
-  --text-link-color: var(--text-primary-color);
-  --text-link-color-hover: var(--brand-primary-color);
-
   /* chat window */
-  --window-height: 43em;
-  --window-width: 25em;
+  --window-height: 40em;
+  --window-width: 23em;
   --window-border-radius: 8px;
   --header-height: 4em;
   --header-background-color: var(--brand-primary-color);
-  --header-logo-url: url('./logo.svg');
   --header-logo-padding: 1em;
-  --header-icons-padding: 1rem 0.75rem;
-  --header-icon-size: 1.5rem;
-  --header-icon-color: white;
+  --header-icons-padding: 0.9em;
+  --header-icons-color: white;
 
   /* chat body */
   --body-background-color: white;
@@ -427,25 +405,6 @@ Favicons können z.B. mittels https://realfavicongenerator.net/ generiert werden
 
 Mithilfe des Query-Parameters `cssClassName` kann dem Chatclient ein CSS Klassenname mitgebeben werden. Damit lässt sich das Aussehen des Chatclients via URL beeinflussen.
 
-### Kleiner / grosser Chat-Client
-
-Ab einer Fensterbreite von 1024 Pixel wechselt das Design in einen "Grosser Chat-Client" Modues. Hier können u.A. Informationen zu den verwendeten Quellen angezeigt werden.
-
-Um das Aussehen abhäng der Grösse beeinflussen zu können, werden folgende beide CSS Klassen gesetzt:
-
-- `chat__small` bei einer Fensterbreite unter 1024 Pixel
-- `chat__larg` ab einer Fensterbreite von 1024 Pixel
-
-Möchte man also z.B. beim grossen Client ein anderes Logo verwenden, kann man dies wie folgt machen:
-
-```
-.chat__large {
-  --header-logo-url: url('/chatbot/logo-blue.svg');
-  --header-logo-padding: 1rem 0rem;
-  --header-height: 6em;
-}
-```
-
 ## Einbinden auf einer Webseite
 
 Unter der Chatbot-Route unter "/embed/ des Servers (z.B. `http://localhost:3000/chatbot/embed`) läuft einen Beispielseite wie der Chatbot eingebetet werden kann. Dort gibt es ebenfalls einen Button, mit welchem das benötigte Snippet angezeigt werden kann. Das Aussehen kann im File `/public/webclient/embed/custom.css` jegliches CSS überschreiben (siehe [Beispiel](src/embed/custom.css)).
@@ -516,7 +475,7 @@ Beispiel:
 
 ### toggleChatWindow
 
-Öffnet das Chatfenster wenn es geschlossen ist und schliesst es, wenn es offen ist.
+Öffne das Chatfenster wenn es geschlossen ist und schliesst es, wenn es offen ist.
 
 Beispiel:
 

package/dist/client/assets/index-BiNNifhB.css

@@ -0,0 +1 @@
+@charset "UTF-8";body{margin:0}._app_wkun7_5{display:flex;flex-direction:row;height:100vh;height:100svh}:root{--aspect-ratio: calc(16 / 9);--body-background-color: white;--brand-primary-color: rgb(4, 47, 97);--brand-secondary-color: white;--danger-color: #b11106;--scrollbar-thumb-color: #adadad;--avatar-size: 2rem;--avatar-radius: 50%;--bot-avatar-background-color: rgb(233, 239, 246);--agent-avatar-background-color: rgb(233, 239, 246);--bubble-padding: .9em 1.3em;--bubble-margin-small: 3px;--bubble-margin-large: 1.2rem;--bubble-radius-large: 20px;--bubble-radius-small: 4px;--bot-bubble-background-color: white;--bot-bubble-text-color: #2e2e2e;--bot-bubble-border-color: #434343;--bot-bubble-border-width: 2px;--bot-bubble-top-left-radius: var(--bubble-radius-small);--bot-bubble-top-right-radius: var(--bubble-radius-large);--bot-bubble-bottom-right-radius: var(--bubble-radius-large);--bot-bubble-bottom-left-radius: var(--bubble-radius-small);--guest-bubble-background-color: var(--brand-primary-color);--guest-bubble-text-color: white;--guest-bubble-border-color: white;--guest-bubble-border-width: 0px;--guest-bubble-top-left-radius: var(--bubble-radius-large);--guest-bubble-top-right-radius: var(--bubble-radius-small);--guest-bubble-bottom-right-radius: var(--bubble-radius-small);--guest-bubble-bottom-left-radius: var(--bubble-radius-large)}::-webkit-scrollbar{width:8px;border:none}::-webkit-scrollbar-track{background:var(--body-background-color)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color)}input::placeholder,textarea::placeholder{color:#666;opacity:1}._button_bc9qm_54{display:inline-block;font-family:inherit;font-size:1em;padding:.5em 1em;border-radius:.2rem;background-color:#fff;cursor:pointer;transition:all .2s linear;text-align:center}._buttonDefault_bc9qm_66{color:#000000d9;background-color:#fff;border:2px solid #adadad}._buttonDefault_bc9qm_66:hover{color:var(--brand-primary-color);border:2px solid var(--brand-primary-color)}._buttonDefault_bc9qm_66:disabled{cursor:not-allowed;opacity:.3}._buttonPrimary_bc9qm_80{color:var(--brand-secondary-color);background-color:var(--brand-primary-color);border:2px solid var(--brand-primary-color)}._buttonPrimary_bc9qm_80:hover{color:var(--brand-primary-color);background-color:var(--brand-secondary-color);border:2px solid var(--brand-primary-color)}._buttonPrimary_bc9qm_80:disabled{cursor:not-allowed;opacity:.3;color:var(--brand-secondary-color);background-color:var(--brand-primary-color)}svg{fill:currentColor}._accessabilityHidden_bc9qm_132{visibility:hidden}[data-title]{--tooltip-position-left: auto;--tooltip-position-right: -.5em;position:relative;opacity:1}[data-title]:before{content:"";position:absolute;top:-10px;right:35%;border:6px solid transparent;border-top-color:#1f1f1f;z-index:999999;visibility:hidden}[data-title]:after{content:attr(data-title);position:absolute;top:-42px;right:var(--tooltip-position-right);left:var(--tooltip-position-left);font-size:14px;line-height:16px;padding:8px 10px;font-family:inherit;white-space:nowrap;border-radius:5px;background-color:#1f1f1f;color:#fafafa;box-shadow:1px 6px 16px #1f1f1f;z-index:99999;visibility:hidden}[data-title]:hover:before,[data-title]:hover:after{opacity:1;transition:all .1s ease .5s;visibility:visible}.tooltip--right[data-title]{--tooltip-position-left: -1em;--tooltip-position-right: auto}._messageContainer_1wdci_1{flex:1;overflow-y:scroll;overscroll-behavior:contain;padding-top:1rem;position:relative;-webkit-overflow-scrolling:touch}._messages_1wdci_10{position:relative;list-style:none;font-size:.9rem;line-height:1.4;padding:0 1rem;margin:0;overflow-wrap:break-word;word-wrap:break-word}@media (min-width: 36rem){._messageContainer_1wdci_1{padding-top:2rem}._messages_1wdci_10{font-size:1rem;line-height:1.8}}._generalConditionsContainer_1ijeb_1{margin-bottom:1.2rem;margin-left:1rem;margin-right:1rem}._generalConditions_1ijeb_1{transition:all .5s linear;background-color:var(--bot-bubble-background-color);color:var(--bot-bubble-text-color);padding:.9em 1.3em;font-size:.9rem}._generalConditionsHeader_1ijeb_15{display:flex;align-items:flex-end;justify-content:space-between;cursor:pointer}._generalConditionsHeader_1ijeb_15:focus{outline:none}._generalConditionsBody_1ijeb_25{display:flex;align-items:flex-end}._generalConditionsBody_1ijeb_25:focus{outline:none}._generalConditionsAccept_1ijeb_33{padding:.9em 1.3em;font-size:.9rem}._generalConditionsAccept_1ijeb_33:focus{outline:none}._message_iyv51_5{--bubble-margin: var(--bubble-margin-small);margin-bottom:var(--bubble-margin);transition:border-radius .5s;position:relative}._messageBot_iyv51_12{--bot-bubble-user-actions-display: none;display:flex;align-items:flex-end}._messageBot_iyv51_12:focus-within,._messageBot_iyv51_12:hover{--bot-bubble-user-actions-display: flex}._messageBot_iyv51_12:not(._messageBotLast_iyv51_20) ._avatar_iyv51_20{visibility:hidden}._messageBotFirst_iyv51_24{--bot-bubble-top-left-radius: var(--bubble-radius-large);--bot-bubble-top-right-radius: var(--bubble-radius-large);--bot-bubble-bottom-right-radius: var(--bubble-radius-large)}._messageBotLast_iyv51_20{--bot-bubble-top-right-radius: var(--bubble-radius-large);--bot-bubble-bottom-left-radius: var(--bubble-radius-large);--bot-bubble-bottom-right-radius: var(--bubble-radius-large);--bubble-margin: var(--bubble-margin-large)}._messageBotAnimated_iyv51_37{animation-duration:.25s;animation-timing-function:ease-in;animation-delay:0s;animation-iteration-count:1;animation-direction:normal;animation-fill-mode:forwards;animation-play-state:running;animation-name:_fadeInLeft_iyv51_1}._messageGuest_iyv51_48{display:flex;align-items:flex-end;justify-content:flex-end}._messageGuestFirst_iyv51_54{--guest-bubble-top-left-radius: var(--bubble-radius-large);--guest-bubble-top-right-radius: var(--bubble-radius-large);--guest-bubble-bottom-left-radius: var(--bubble-radius-large)}._messageGuestLast_iyv51_60{--guest-bubble-top-left-radius: var(--bubble-radius-large);--guest-bubble-bottom-left-radius: var(--bubble-radius-large);--guest-bubble-bottom-right-radius: var(--bubble-radius-large);--bubble-margin: var(--bubble-margin-large);margin-bottom:var(--bubble-margin)}._avatar_iyv51_20{width:var(--avatar-size);height:var(--avatar-size);border-radius:var(--avatar-radius, 50%)}._botAvatar_iyv51_74{background-color:var(--bot-avatar-background-color)}._agentAvatar_iyv51_78{background-color:var(--agent-avatar-background-color)}._bubble_iyv51_82{display:inline-block;max-width:calc(100% - 4.3rem);position:relative}._bubbleContent_iyv51_88{padding:var(--bubble-padding);color:inherit;font-size:inherit}._bubbleContent_iyv51_88 *>:first-child{margin-top:0}._bubbleContent_iyv51_88 *>:last-child{margin-bottom:0}._bubbleContent_iyv51_88 h1,._bubbleContent_iyv51_88 h2,._bubbleContent_iyv51_88 h3,._bubbleContent_iyv51_88 h4,._bubbleContent_iyv51_88 h5,._bubbleContent_iyv51_88 p,._bubbleContent_iyv51_88 a,._bubbleContent_iyv51_88 ul,._bubbleContent_iyv51_88 ol{color:inherit;margin-block-start:.4em;margin-block-end:.4em;margin-inline-start:0px;margin-inline-end:0px}._bubbleContent_iyv51_88 h1{font-size:1.2rem;white-space:pre-wrap}._bubbleContent_iyv51_88 h2{font-size:1.1rem;white-space:pre-wrap}._bubbleContent_iyv51_88 h3,._bubbleContent_iyv51_88 h4,._bubbleContent_iyv51_88 h5{font-size:1rem;white-space:pre-wrap}._bubbleContent_iyv51_88 a{text-decoration:underline;cursor:pointer}._bubbleContent_iyv51_88 a:hover{opacity:.8}._bubbleContent_iyv51_88 img{max-width:100%;margin-block-start:0;margin-block-end:0}._bubbleContent_iyv51_88 ul{padding:0 0 0 1.1em}._bubbleContent_iyv51_88 ul>li{list-style-type:disc}._bubbleContent_iyv51_88 ul>li ul{margin-block-start:0}._bubbleContent_iyv51_88 ul>li p{margin-bottom:0}._bubbleContent_iyv51_88 ol{padding:0 0 0 1.1em}._bubbleContent_iyv51_88 ol>li{list-style-type:decimal}._bubbleContent_iyv51_88 table,._bubbleContent_iyv51_88 td,._bubbleContent_iyv51_88 th{border:1px solid}._bubbleContent_iyv51_88 table{width:100%;border-collapse:collapse;margin-bottom:1rem;-webkit-hyphens:auto;hyphens:auto}._bubbleContent_iyv51_88 table th{text-align:left;padding:5px}._bubbleContent_iyv51_88 table td{padding:5px}._bubbleContent_iyv51_88 hr{margin-top:1rem;margin-bottom:1rem;border-top:1px solid;border-left:0;border-bottom:0;border-right:0}._bubbleLeft_iyv51_191{border-radius:var(--bot-bubble-top-left-radius) var(--bot-bubble-top-right-radius) var(--bot-bubble-bottom-right-radius) var(--bot-bubble-bottom-left-radius);border-color:var(--bot-bubble-border-color);border-width:var(--bot-bubble-border-width);border-style:solid;background-color:var(--bot-bubble-background-color);margin-left:1rem}._leftText_iyv51_200{color:var(--bot-bubble-text-color)}._leftText_iyv51_200 a{color:var(--bot-bubble-text-color)!important}._bubbleRight_iyv51_207{border-radius:var(--guest-bubble-top-left-radius) var(--guest-bubble-top-right-radius) var(--guest-bubble-bottom-right-radius) var(--guest-bubble-bottom-left-radius);border-color:var(--guest-bubble-border-color);border-width:var(--guest-bubble-border-width);border-style:solid;background-color:var(--guest-bubble-background-color)}._rightText_iyv51_215,._rightText_iyv51_215 a{color:var(--guest-bubble-text-color)}@keyframes _fadeInLeft_iyv51_1{0%{transform:translate(-100vw)}to{transform:translate(0)}}._botMessageActions_4blu2_1{--bot-bubble-user-actions-container-bg-opacity: 1;color:var(--bot-bubble-user-actions-container-color, rgba(39, 39, 42, .8));padding:.125rem .5rem;vertical-align:middle;background-color:rgb(var(--bot-bubble-user-actions-container-bg, 255 255 255)/var(--bot-bubble-user-actions-container-bg-opacity));border-color:var(--bot-bubble-user-actions-container-border-color, rgb(228, 228, 231));border-style:solid;border-width:var(--bot-bubble-user-actions-container-border-width, 1px);border-radius:var(--bot-bubble-user-actions-container-border-radius, .75rem);margin-top:-.75rem;top:100%;left:calc(var(--avatar-size, 2rem) + 1.5rem);position:absolute;z-index:10;display:var(--bot-bubble-user-actions-display);gap:.15rem}._alwaysVisible_4blu2_20{--bot-bubble-user-actions-display: flex;--bot-bubble-user-actions-container-bg-opacity: 0;border-width:0;top:calc(100% + .75rem)}._reported_4blu2_27{display:flex}._action_4blu2_31{display:var(--bot-bubble-user-actions-display);font-size:.875rem;line-height:1.25rem;padding-left:.25rem;padding-right:.25rem;border-radius:.375rem;white-space:nowrap;justify-content:center;align-items:center;height:1.5rem;text-transform:none;border:0;cursor:pointer;color:inherit;background-color:rgb(var(--bot-bubble-user-actions-container-bg, 255 255 255)/var(--bot-bubble-user-actions-container-bg-opacity))}._action_4blu2_31:hover{background-color:#e4e4e7}._action_4blu2_31._reported_4blu2_27{display:flex}._title_1mhh2_1{margin-top:0;margin-block-start:0}._subtitle_1mhh2_6{margin-top:.5rem;margin-bottom:.5rem}._buttons_1mhh2_11{margin-top:1rem;display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}._button_1mhh2_11{font-size:.9em;margin:0;background-color:var(--bot-bubble-text-color);color:var(--bot-bubble-background-color);border:2px solid var(--bot-bubble-text-color);width:100%}._button_1mhh2_11:hover{color:var(--bot-bubble-text-color);background-color:var(--bot-bubble-background-color);border:2px solid var(--bot-bubble-text-color)}._imageContainer_1mhh2_33{display:flex}._image_1mhh2_33{height:100%;width:100%;object-fit:cover;border-radius:calc(var(--bot-bubble-top-left-radius) - var(--bot-bubble-border-width)) calc(var(--bot-bubble-top-right-radius) - var(--bot-bubble-border-width)) 0 0}._video_container_1mhh2_44{display:flex}._video_1mhh2_44{width:100%;height:100%;border-radius:calc(var(--bot-bubble-top-left-radius) - var(--bot-bubble-border-width)) calc(var(--bot-bubble-top-right-radius) - var(--bot-bubble-border-width)) 0 0}._only_1mhh2_54{border-radius:calc(var(--bot-bubble-top-left-radius) - var(--bot-bubble-border-width)) calc(var(--bot-bubble-top-right-radius) - var(--bot-bubble-border-width)) calc(var(--bot-bubble-bottom-right-radius) - var(--bot-bubble-border-width)) calc(var(--bot-bubble-bottom-left-radius) - var(--bot-bubble-border-width))}._text_ola9a_1{overflow-wrap:break-word}._command_ola9a_5{padding:3px 6px;margin-right:3px;border-radius:6px;font-size:.75rem;font-family:monospace;background-color:var(--guest-bubble-command-background-color, rgba(255, 255, 255, .3))}._ticontainer_wftg7_1{padding:var(--bubble-padding)}._tiblock_wftg7_5{align-items:center;display:flex;height:1rem;margin:2.1px}._tidot_wftg7_12{background-color:var(--bot-bubble-text-color);animation:_mercuryTypingAnimation_wftg7_1 1s infinite ease-in-out;border-radius:3px;display:inline-block;height:6px;margin-right:3px;width:6px}@keyframes _mercuryTypingAnimation_wftg7_1{0%{transform:translateY(0)}28%{transform:translateY(-5px)}44%{transform:translateY(0)}}._tidot_wftg7_12:nth-child(1){animation-delay:50ms}._tidot_wftg7_12:nth-child(2){animation-delay:.15s}._tidot_wftg7_12:nth-child(3){animation-delay:.25s}._bottomSheet_8itd6_1{visibility:hidden;position:absolute;z-index:3000;height:100%;width:100%;background-color:var(--body-background-color);top:0;bottom:0;transform:translateY(100%);overflow-y:auto;overscroll-behavior:contain}._bottomSheetOpen_8itd6_15{animation:_slide-in_8itd6_1 .2s forwards;visibility:visible}._bottomSheetClose_8itd6_20{animation:_slide-out_8itd6_1 .2s forwards;visibility:hidden}@keyframes _slide-in_8itd6_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _slide-out_8itd6_1{0%{transform:translateY(0)}to{transform:translateY(100%)}}._container_ooyn8_1{overflow:hidden}._container_ooyn8_1 iframe{width:100%;height:100%;border:none}._container_t5oqt_1{padding:.5rem;display:flex;justify-content:center;align-items:center;border-top:1px solid #bfbfbf;background-color:#fff;font-size:.7rem;color:#717171}._container_t5oqt_1 a{color:var(--brand-primary-color);text-decoration:none}._container_rkqaf_1{padding:1rem}._container_rkqaf_1 h1{font-size:1.6em}._container_rkqaf_1 h2{font-size:1em}._container_rkqaf_1 p{line-height:1.5}._formContainer_rkqaf_14{display:flex;flex-direction:column}._emailInput_rkqaf_19{box-sizing:border-box;margin:1rem 0 0;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";position:relative;display:inline-block;width:100%;min-width:0;padding:4px 11px;color:#000000a6;font-size:14px;line-height:1.5715;background-color:#fff;background-image:none;border:1px solid #d9d9d9;border-radius:2px;transition:all .3s;outline:none}._emailInput_rkqaf_19:hover{border:1px solid var(--brand-primary-color)}._emailInput_rkqaf_19:focus{border:1px solid var(--brand-primary-color)}._description_rkqaf_48{font-size:.9rem;-webkit-hyphens:auto;hyphens:auto}._actions_rkqaf_53{margin-top:1rem;padding-bottom:3rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}._validationError_rkqaf_63{padding-top:.5em;color:var(--danger-color);font-size:.8em;height:1rem}._submitted_rkqaf_70{margin-top:3rem;padding:1rem;border:1px solid var(--brand-primary-color);border-radius:2px}._inputContainer_1px77_1{z-index:2000}._blockUserInput_rv0dg_1{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:left;position:relative;background-color:#fff;color:#717171;font-size:.9rem;border-top:1px solid #bfbfbf;padding:.6rem 1rem;animation:_append-animate_rv0dg_1 .2s ease-in;z-index:0}@keyframes _append-animate_rv0dg_1{0%{opacity:0;top:6rem}to{opacity:1;top:0}}._container_1613s_1{position:relative}._commands_1613s_5{position:absolute;bottom:calc(100% - 3px);left:0;right:0;padding:1rem;margin:0;width:100%;overflow-y:auto;max-height:30em;border-radius:20px 20px 0 0;box-shadow:0 -8px 24px #0006;background-color:var( --commands-background-color, var(--brand-primary-color, rgb(4, 47, 97)) );list-style-type:none}._command_1613s_5{display:flex;flex-direction:column;gap:.25rem;cursor:pointer;padding:1rem;border-radius:10px;color:var(--commands-text-color, white)}._command_1613s_5 h1{font-size:1.1rem;margin-block:0}._command_1613s_5 p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0}._commandActive_1613s_47{color:var(--commands-active-text-color, white);background-color:var( --commands-active-background-color, rgba(255, 255, 255, .3) )}._callToActionContainer_czz0p_1{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;position:relative;background-color:#fff;border-top:1px solid #bfbfbf;padding:.6rem 1rem .3rem;animation:_append-animate_czz0p_1 .2s ease-in;z-index:0}@keyframes _append-animate_czz0p_1{0%{opacity:0;top:6rem}to{opacity:1;top:0}}._callToActionTitle_czz0p_24{font-size:.9rem;color:#717171;margin-bottom:.2rem;padding-right:.5rem}._rateOverlay_czz0p_31{display:flex;flex-direction:column;justify-content:space-between}._rateOverlay_czz0p_31 h2{font-size:1em;text-align:center}._rateOverlay_czz0p_31 p{line-height:1.5}._rateOverlay_czz0p_31 form{display:flex;flex:1;flex-direction:column;justify-content:space-between}._body_czz0p_50{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:1rem}._footer_czz0p_58{border-top:1px solid #bfbfbf;background-color:#fff}._footer_czz0p_58 input{font-size:1rem;border:none;box-sizing:border-box;width:100%;outline-width:0;padding:1.3rem 1rem 1rem;text-overflow:ellipsis;color:#717171}._actions_czz0p_73{display:flex;padding:.5rem;justify-content:flex-end;align-items:center;line-height:0}._actions_czz0p_73 button{width:100%;font-size:.8rem}._bubbles_czz0p_85{display:flex;flex-direction:column}@keyframes _appear_czz0p_1{0%{opacity:0}66%{opacity:0}to{opacity:1}}@keyframes _fadeInLeft_czz0p_1{0%{transform:translate(-3rem)}80%{transform:translate(-3rem)}to{transform:translate(0)}}._rateFeedbackBotBubble_czz0p_112{display:flex;align-items:flex-end;margin:1rem 0}._rateFeedbackGuestBubble_czz0p_118{display:flex;align-items:flex-end;justify-content:flex-end}._avatar_czz0p_124{width:var(--avatar-size);height:var(--avatar-size);animation-duration:.5s;animation-timing-function:ease-in;animation-delay:0s;animation-iteration-count:1;animation-direction:normal;animation-fill-mode:forwards;animation-play-state:running;animation-name:_fadeInLeft_czz0p_1}._bubble_czz0p_85{padding:var(--bubble-padding);font-size:.9rem;animation-duration:1s;animation-delay:0s;animation-timing-function:ease;animation-iteration-count:1;animation-direction:normal;animation-fill-mode:forwards;animation-play-state:running;animation-name:_appear_czz0p_1}._botBubble_czz0p_150{border-radius:var(--bubble-radius-large);background-color:var(--bot-bubble-background-color);margin-left:1rem;color:var(--bot-bubble-text-color)}._botBubble_czz0p_150 a{color:var(--bot-bubble-text-color)!important}._guestBubble_czz0p_160{animation-duration:.25s;align-self:end;border-radius:var(--bubble-radius-large);background-color:var(--guest-bubble-background-color);color:var(--guest-bubble-text-color);margin-left:1rem;display:box;line-clamp:3;box-orient:vertical;overflow:hidden}._guestBubble_czz0p_160 a{color:var(--guest-bubble-text-color)}._rateText_czz0p_176{padding:.75rem;font-size:.9rem}._stars_czz0p_181{box-sizing:border-box;font-variant:tabular-nums;font-feature-settings:"tnum";display:inline-block;margin:0;padding:0;color:#c4c4c4;line-height:unset;list-style:none;outline:none}._starsSmall_czz0p_194{font-size:1.2rem}._starsLarge_czz0p_198{font-size:2rem}._starsLarge_czz0p_198 ._star_czz0p_181:not(:last-child){margin-right:1.5rem}._star_czz0p_181{display:inline-block;color:inherit;cursor:pointer}._star_czz0p_181:not(:last-child){margin-right:8px}._starReadonly_czz0p_215{cursor:inherit}._star_czz0p_181>div{transition:all .3s,outline 0s}._starIcon_czz0p_223{display:inline-block;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;text-rendering:optimizelegibility}._star_czz0p_181 [aria-checked=true]{color:var(--brand-primary-color, #fadb14)}._star_czz0p_181 [aria-checked=false]{color:#adadad}._starsDescriptionContainer_czz0p_241{display:flex;flex-direction:column;width:fit-content;padding-top:1rem;padding-bottom:1rem;margin:auto}._starsDescription_czz0p_241{display:flex;flex-direction:row;justify-content:space-between;font-size:.7rem;color:#000000a6}._inputWrapper_1o8hf_5{display:flex;justify-content:center;align-items:center;line-height:0;border-top:1px solid #bfbfbf;background-color:#fff}._messageInputWrapper_1o8hf_14{flex:1;margin-right:.5rem}._messageInput_1o8hf_14{resize:none;font-size:1rem;font-family:inherit;border:none;height:calc(1em + 3rem);box-sizing:border-box;width:100%;outline-width:0;padding:1.3rem 1rem;text-overflow:ellipsis}._messageInput_1o8hf_14:focus{outline:none}._buttons_1o8hf_36{padding-right:.5rem;display:flex;justify-content:center;align-items:center}._button_1o8hf_36[disabled]{opacity:.4}._button_1o8hf_36{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-family:inherit;color:var(--brand-primary-color);background-color:var(--brand-secondary-color);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:50%;border:none;text-align:center}._button_1o8hf_36 svg{margin:2px;height:2em;width:2em;fill:currentColor}._button_1o8hf_36:hover,._button_1o8hf_36:active,._button_1o8hf_36:focus{border:none;outline:none;color:var(--brand-secondary-color);background-color:var(--brand-primary-color)}._button_1o8hf_36:not(:last-child){margin-right:.5em}*{box-sizing:border-box}._audioRecorder_xps9k_5{display:flex;margin-left:-5px}._recordButton_xps9k_10{display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;width:40px;height:40px;border-radius:50%;border:none;text-align:center;color:var(--brand-primary-color);background-color:var(--brand-secondary-color)}._recordButton_xps9k_10:hover,._recordButton_xps9k_10:active,._recordButton_xps9k_10:focus{background-color:var(--brand-primary-color);color:var(--brand-secondary-color);border:none;outline:none}._recordButton_xps9k_10 svg{margin:2px;height:2em;width:2em;fill:currentColor}._submitButton_xps9k_37{display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;width:40px;height:40px;border-radius:50%;border:none;text-align:center;color:var(--brand-primary-color);background-color:var(--brand-secondary-color)}._submitButton_xps9k_37:hover,._submitButton_xps9k_37:active,._submitButton_xps9k_37:focus{background-color:var(--brand-primary-color);color:var(--brand-secondary-color);border:none;outline:none}._submitButton_xps9k_37 svg{margin:2px;height:2em;width:2em;fill:currentColor}._cancelButton_xps9k_64{display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;width:40px;height:40px;border-radius:50%;border:none;text-align:center;color:var(--brand-primary-color);background-color:var(--brand-secondary-color)}._cancelButton_xps9k_64:hover,._cancelButton_xps9k_64:active,._cancelButton_xps9k_64:focus{background-color:var(--brand-primary-color);color:var(--brand-secondary-color);border:none;outline:none}._cancelButton_xps9k_64 svg{margin:2px;height:2em;width:2em;fill:currentColor}._recorderIcon_xps9k_91{width:1.3em;height:1.3em;border-radius:50%;animation:_pulse_xps9k_1 2s infinite;margin:auto .6em}@keyframes _pulse_xps9k_1{0%{background-color:#fff}40%{background-color:var(--danger-color)}60%{background-color:var(--danger-color)}to{background-color:#fff}}._spinning_xps9k_113{width:40px;height:40px;padding:5px;display:block;margin:auto;color:var(--brand-primary-color);animation:_spin_xps9k_113 1.2s linear infinite}@keyframes _spin_xps9k_113{to{transform:rotate(360deg)}}._quickReplies_11l22_1{display:flex;flex-flow:row wrap;justify-content:flex-end;padding:.4rem 1rem;gap:.5rem}._quickReply_11l22_9{font-size:.8rem;background-color:var(--brand-secondary-color);color:var(--brand-primary-color);border:1px solid var(--brand-primary-color)}._quickReply_11l22_9:active,._quickReply_11l22_9:focus,._quickReply_11l22_9:hover{background-color:var(--brand-primary-color);color:var(--brand-secondary-color);border:1px solid var(--brand-secondary-color);outline:none}._chatwindow_phukm_1{position:relative;width:100%;height:100vh;height:100svh;max-width:48rem;margin-left:auto;margin-right:auto;overflow:hidden;background-color:var(--body-background-color)}._chatcontent_phukm_13{display:flex;flex-flow:column nowrap;width:100%;height:100vh;height:100svh}._container_ophni_2{display:grid;grid-template-rows:1fr auto;height:100%}._body_ophni_8{padding:1rem;overflow-y:auto}._intro_ophni_13{margin-bottom:1em}._intro_ophni_13 h1{font-size:1.3em}._intro_ophni_13 h2{font-size:1em}._intro_ophni_13 p{line-height:1.4}._intro_ophni_13 ul{padding-left:1em}._intro_ophni_13 li{padding-top:.3em;padding-bottom:.3em;line-height:1.4}._footer_ophni_34{padding:1rem}._startChatButton_ophni_38{width:100%}._formFields_ophni_42{display:flex;flex-direction:column;gap:.75em}._formField_ophni_42{display:flex;flex-direction:column;gap:8px}._radio_ophni_54{display:flex;align-items:flex-start;gap:6px;accent-color:var(--brand-primary-color)}._checkbox_ophni_61{display:flex;align-items:flex-start;gap:6px;padding:6px 0;accent-color:var(--brand-primary-color)}._input_ophni_69 input{border-width:1px;border-style:solid;border-color:#d9d9d9;box-sizing:border-box;margin:0;padding:4px 11px;color:#000000e0;font-size:1em;line-height:1.57;list-style:none;font-family:inherit;position:relative;display:inline-block;width:100%;min-width:0;border-radius:6px;transition:all .2s;accent-color:var(--brand-primary-color)}._input_ophni_69 input:focus,._input_ophni_69 input:focus-within{border-color:var(--brand-primary-color);box-shadow:0 0 0 2px #0591ff1a;outline:0;background-color:#fff}._input_ophni_69 input:hover{border-color:var(--brand-primary-color)}._inputLabel_ophni_99{margin-bottom:8px}._selectWrapper_ophni_103{position:relative}._selectWrapper_ophni_103:after{content:"⌄";font-size:1rem;top:2px;right:14px;position:absolute}._select_ophni_103 select{border-width:1px;border-style:solid;border-color:#d9d9d9;box-sizing:border-box;margin:0;padding:4px 11px;color:#000000e0;font-size:1em;line-height:1.57;list-style:none;font-family:inherit;position:relative;display:inline-block;width:100%;min-width:0;border-radius:6px;transition:all .2s;accent-color:var(--brand-primary-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}._select_ophni_103 select:focus,._select_ophni_103 select:focus-within{border-color:var(--brand-primary-color);box-shadow:0 0 0 2px #0591ff1a;outline:0;background-color:#fff}._select_ophni_103 select:hover{border-color:var(--brand-primary-color)}._selectLabel_ophni_145{margin-bottom:8px}