.typewriter {
display: inline-flex;
}
.typewriter span {
word-break: break-all;
height: 1.5rem;
width: 0%;
overflow: hidden;
animation: t 2s linear infinite alternate;
font-style: italic;
}
.typewriter span:before {
content: " ";
display: inline-block;
}
@keyframes t {
90%,
100% {
width: 100%
}
}
.aichat-input {
min-width: 75%;
}
.aichat-input.thinking {
animation: fadeInOut 2s infinite;
}
@keyframes fadeInOut {
0% {
opacity: 0.25;
}
50% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
.aichat-container {
border: 3px solid #ccc;
padding: 0.5rem;
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
row-gap: 0.5rem; column-gap: 0.5rem; box-sizing: border-box;
background-color: white;
}
.aichat-container>.w-tabs {
flex: 1 1 100%;
}
.aichat-container .w-tabs.accordion>div>.w-tabs-section {
border-width: 0 !important;
}
.aichat-disclaimer,
.small-info {
flex-basis: 100%;
font-weight: 300;
opacity: 0.75;
font-size: smaller;
text-align: right;
margin-bottom: 3px;
padding: 0 0.5rem;
}
.aichat-messages {
height: 50vh;
max-height: calc(100% - 140px);
overflow-y: auto;
flex-basis: 100%;
} .aichat-messages a {
color: var(--color-content-link);
text-decoration: underline;
}
.aichat-controls {
flex: 1 1 140px;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
row-gap: 0.5rem; column-gap: 0.5rem; box-sizing: border-box;
max-height: 180px; overflow-y: auto;
align-self: flex-end;
}
.welcome-message {
font-weight: 500;
font-size: 1.1rem;
}
.voice-status>* {
padding: 1rem;
}
.aichat-inputs { flex-basis: 100%;
height: 44.8px;
min-height: auto !important;
}
.aichat-container .w-btn-wrapper {
flex-basis: 100%;
max-height: 44.8px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.aichat-container .w-btn-wrapper>* {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
max-height: 100%;
}
@media screen and (min-width:720px) {
.aichat-inputs {
flex: 1 1 calc(100% - 1rem - 300px);
}
.aichat-container .w-btn-wrapper {
flex: 1 1 auto;
}
.aichat-container .w-btn-wrapper>* {
width: 100%;
max-width: 300px;
height: 100%; }
}
.user-message-container {
text-align: right;
padding-right: 1rem;
}
.user-message-container p {
max-width: 400px;
background-color: white;
border-radius: 6px;
padding: 1.5rem;
margin: 1.5rem 0 1.5rem auto;
border: 0.5px solid #999;
filter: drop-shadow(-2px -2px 8px rgba(0, 0, 0, 0.2));
color: #999;
font-size: 0.9rem;
display: inline-block;
text-align: left;
position: relative;
}
.user-message-container p:before,
.user-message-container p:after {
content: '';
position: absolute;
border-style: solid;
border-width: 16px 0px 0px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 2;
bottom: -15px;
right: 8px;
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
.user-message-container p:after {
border-color: #999 transparent;
bottom: -16.5px;
right: 7.5px;
z-index: 1;
}
.user-message {
color: black;
font-weight: 500;
display: block;
margin-top: 0.5rem;
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
word-break: break-word;
}
.bot-message {
text-align: left;
color: inherit;
word-break: break-word;
}
.bot-message h2,
.bot-message h3,
.bot-message h4,
.bot-message h5,
.bot-message h6 {
margin-top: 1rem;
margin-bottom: 0.25rem;
}
.bot-message p {
margin-top: 0.25rem;
margin-bottom: 0.5rem;
}
.bot-message ul,
.bot-message ol {
margin-bottom: 0.5rem;
}
.bot-message li {
margin-bottom: 0.05rem;
}
.bot-message h2 {
font-size: 1.5rem;
}
.bot-message h3 {
font-size: 1.25rem;
}
.bot-message h4 {
font-size: 1.175rem;
}
.bot-message h5 {
font-size: 1.1rem;
}
.bot-message h6 {
font-size: 1rem;
font-weight: 500;
}
.aichat-transcript {
flex: 1 1 100%;
}
.aichat-transcript>p {
margin-bottom: 0.5rem;
text-align: right;
}
.aichat-transcript-fields {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 0.5rem;
column-gap: 0.5rem;
}
.aichat-transcript-fields>p {
flex-basis: 100%;
font-weight: 500;
text-align: right;
}
.sideways_right_side_button:not(.w-popup-wrap) {
position: fixed;
transition: .5s all ease-in-out;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
transform: rotate(270deg);
top: calc(50% - 20px);
right: -140px;
height: 40px;
width: 320px;
z-index: 100;
}
.sideways_right_side_button:not(.w-popup-wrap) .w-btn {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
.w-popup-box-content .l-section.height_medium {
padding: 0 !important;
}
@media (max-width: 430px) {
.w-popup-wrap[style*="--popup-padding"] .w-popup-box-content {
padding: 10px 0.5rem;
}
} footer .message-bot-button:not(.sideways_right_side_button) {
display: none;
}
@media screen and (max-width:430px) {
header .message-bot-button {
display: none !important;
}
footer .message-bot-button:not(.sideways_right_side_button) {
display: block;
position: fixed;
bottom: 1px;
left: 5px;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, .2));
z-index: 100;
}
} .message-bot-button i.fa-info-circle::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M160 0C124.7 0 96 28.7 96 64V176H59.7c-5.5-9.6-15.9-16-27.7-16c-17.7 0-32 14.3-32 32s14.3 32 32 32c11.8 0 22.2-6.4 27.7-16H96V352c0 35.3 28.7 64 64 64h64v80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L373.3 416H480c35.3 0 64-28.7 64-64V208h36.3c5.5 9.6 15.9 16 27.7 16c17.7 0 32-14.3 32-32s-14.3-32-32-32c-11.8 0-22.2 6.4-27.7 16H544V64c0-35.3-28.7-64-64-64H160zm0 128c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V128zm64 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm192 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M160 0C124.7 0 96 28.7 96 64V176H59.7c-5.5-9.6-15.9-16-27.7-16c-17.7 0-32 14.3-32 32s14.3 32 32 32c11.8 0 22.2-6.4 27.7-16H96V352c0 35.3 28.7 64 64 64h64v80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L373.3 416H480c35.3 0 64-28.7 64-64V208h36.3c5.5 9.6 15.9 16 27.7 16c17.7 0 32-14.3 32-32s-14.3-32-32-32c-11.8 0-22.2 6.4-27.7 16H544V64c0-35.3-28.7-64-64-64H160zm0 128c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V128zm64 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm192 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E");
width: 1.5rem;
line-height: 0;
display: block;
height: 1.5rem;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
margin-bottom: -0.5rem;
content: '█';
font-size: 3rem;
} .hyperai-modal-container {
max-width: 100%;
background: white;
overflow: hidden;
padding: 0px;
}
.hyperai-modal-container .aichat-container {
height: 100%;
}
@media screen and (min-width: 431px) {
.hyperai-modal-container {
position: fixed;
bottom: 22px;
right: 65px;
width: 324px;
height: 500px;
max-height: 90%;
z-index: 5;
transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
overflow: visible;
}
.hyperai-modal-container.is-minimised {
width: 110px;
height: 53px;
background-color: transparent;
transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
right: 75px;
bottom: 30px;
}
.hyperai-modal-container.is-minimised>* {
display: none;
}
.hyperai-modal-container>.hyperai-toggle-modal {
position: absolute;
top: -12.5px;
right: -5px;
z-index: 6;
}
.hyperai-modal-container .modal-button {
width: 25px;
height: 25px;
display: block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="%23000" stroke-width="2" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0Z"/><path stroke="%23000" stroke-linecap="round" stroke-width="2" d="m9 9 6 6m0-6-6 6"/></svg>');
background-position: center;
background-color: white;
background-size: 25px 25px;
border-radius: 12.5px;
background-repeat: no-repeat;
}
.hyperai-modal-container.is-minimised .hyperai-toggle-modal {
animation: jiggle 7s infinite;
animation-delay: 3s;
}
@keyframes jiggle {
0% {
transform: translateX(0);
}
1% {
transform: translateX(-2px);
}
2% {
transform: translateX(2px);
}
3% {
transform: translateX(-2px);
}
4% {
transform: translateX(2px);
}
5% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
.hyperai-modal-container.is-minimised>.hyperai-toggle-modal {
display: block;
top: 0;
right: 0;
width: 100%;
height: 100%;
filter: drop-shadow(-3px 3px 10px rgba(0, 0, 0, .5));
}
.hyperai-modal-container.is-minimised .modal-button {
width: 100%;
height: 100%;
background-image: none;
background-color: var(--color-alt-content-bg);
color: var(--color-alt-content-text);
border-radius: 6px;
border-color: var(--color-alt-content-primary);
border-width: 2px;
border-style: solid;
padding: 5px;
transition: all 0.2s ease-in-out;
}
.hyperai-modal-container.is-minimised .modal-button:hover {
background-color: var(--color-content-primary);
color: white;
border-color: white;
transition: all 0.2s ease-in-out;
}
.hyperai-modal-container.is-minimised .modal-button::before {
position: absolute;
left: 7px;
width: 40px;
height: 40px;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M160 0C124.7 0 96 28.7 96 64V176H59.7c-5.5-9.6-15.9-16-27.7-16c-17.7 0-32 14.3-32 32s14.3 32 32 32c11.8 0 22.2-6.4 27.7-16H96V352c0 35.3 28.7 64 64 64h64v80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L373.3 416H480c35.3 0 64-28.7 64-64V208h36.3c5.5 9.6 15.9 16 27.7 16c17.7 0 32-14.3 32-32s-14.3-32-32-32c-11.8 0-22.2 6.4-27.7 16H544V64c0-35.3-28.7-64-64-64H160zm0 128c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V128zm64 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm192 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: 100%;
mask-position: left;
background-color: var(--color-alt-content-text);
display: block;
content: '';
}
.hyperai-modal-container.is-minimised .modal-button:hover::before {
background-color: white;
}
.hyperai-modal-container.is-minimised .modal-button::after {
content: 'need help?';
display: flex;
align-items: center;
position: absolute;
line-height: 20px; font-size: 16px;
width: 66px;
right: 0;
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
.aichat-container.has-speech-input .aichat-messages {
flex: 1 1 100%;
}
}  .overflow-hidden {
overflow: hidden;
} .aichat-messages .bot-message.aichat-training-warning {
background: #fff4e5;
border: 1px solid #ffb74d;
color: #663c00;
}
.aichat-messages .bot-message.aichat-training-warning a {
text-decoration: underline;
}
.aichat-messages .bot-message.aichat-training-warning em {
display: block;
margin-top: .35em;
font-size: .85em;
opacity: .75;
} .aichat-messages .bot-message.aichat-rate-limited {
background: #fff4e5;
border: 1px solid #ffb74d;
color: #663c00;
}