.aikit-chat-container {
box-sizing: border-box;
}
.aikit-chat-widget *, ::before, ::after {
box-sizing: border-box;
}
.aikit-chat-widget {
border: none;
position: fixed;
inset: auto 0px 0px auto;
width: 450px;
opacity: 1;
color-scheme: none;
background: none transparent !important;
margin: 0px;
max-width: 100vw;
transform: translateY(0px);
transition: none 0s ease 0s !important;
visibility: visible;
z-index: 99998 !important;
}
.aikit-chat-widget.inline {
position: static;
width: 100% !important;
padding-top: 25px;
padding-bottom: 25px;
}
.aikit-chat {
font-family: Mulish, sans-serif;
letter-spacing: -0.24px;
-webkit-font-smoothing: antialiased;
color: rgb(6, 19, 43);
box-sizing: inherit;
width: 372px;
position: absolute;
bottom: 26px;
border-radius: 16px;
pointer-events: auto;
overflow: hidden;
z-index: 1;
right: 48px;
left: auto;
display: flex;
flex-direction: column;
box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 36px 0px;
}
.aikit-chat-widget.inline .aikit-chat {
position: static;
width: 100% !important;
border-radius: 16px !important;
}
.aikit-chat-header {
font-family: Mulish, sans-serif;
letter-spacing: -0.24px;
-webkit-font-smoothing: antialiased;
pointer-events: auto;
box-sizing: inherit;
padding: 11px 28px 7px;
position: relative;
z-index: 4;
flex: 0 0 auto;
color: rgb(255, 255, 255);
background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
}
.aikit-chat-header::after {
content: "";
position: absolute;
width: calc(100% + 10px);
bottom: -8px;
left: -5px;
border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzIgMTUiPgogIDxwYXRoIGQ9Ik0zNDkuOCAxLjRDMzM0LjUuNCAzMTguNSAwIDMwMiAwaC0yLjVjLTkuMSAwLTE4LjQuMS0yNy44LjQtMzQuNSAxLTY4LjMgMy0xMDIuMyA0LjctMTQgLjUtMjggMS4yLTQxLjUgMS42Qzg0IDcuNyA0MS42IDUuMyAwIDIuMnY4LjRjNDEuNiAzIDg0IDUuMyAxMjguMiA0LjEgMTMuNS0uNCAyNy41LTEuMSA0MS41LTEuNiAzMy45LTEuNyA2Ny44LTMuNiAxMDIuMy00LjcgOS40LS4zIDE4LjctLjQgMjcuOC0uNGgyLjVjMTYuNSAwIDMyLjQuNCA0Ny44IDEuNCA4LjQuMyAxNS42LjcgMjIgMS4yVjIuMmMtNi41LS41LTEzLjgtLjUtMjIuMy0uOHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==);
border-image-slice: 0 0 100%;
border-image-width: 0 0 15px;
border-image-repeat: stretch;
border-width: 0px 0px 15px;
border-bottom-style: solid;
border-color: initial;
border-top-style: initial;
border-left-style: initial;
border-right-style: initial;
}
.aikit-chat-welcome {
font-family: Mulish, sans-serif;
letter-spacing: -0.24px;
-webkit-font-smoothing: antialiased;
pointer-events: auto;
box-sizing: inherit;
font-size: 22px;
font-weight: 600;
color: currentcolor;
margin: 4px 0px 0px;
padding: 0px;
display: inline-block;
position: relative;
max-width: calc(100% - 145px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: bottom;
margin-top: 0px;
line-height: 52px;
min-height: 52px;
}
.aikit-emoji{
font-family: Mulish, sans-serif;
letter-spacing: -0.24px;
-webkit-font-smoothing: antialiased;
pointer-events: auto;
font-size: 22px;
font-weight: 600;
color: currentcolor;
white-space: nowrap;
line-height: 52px;
box-sizing: inherit;
margin: 0px 2px -5px;
user-select: none;
width: 31px;
height: 31px;
}
.aikit-down-arrow {
pointer-events: auto;
letter-spacing: -0.24px;
-webkit-font-smoothing: antialiased;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
font-size: inherit;
font-family: inherit;
font-optical-sizing: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
line-height: normal;
user-select: none;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: rgb(255, 255, 255);
box-sizing: inherit;
transition: all 0.2s ease-in-out 0s;
width: 26px;
height: 26px;
padding: 3px 0px;
transform: rotate(270deg) translate(3px, 0px);
fill: currentcolor;
}
.aikit-exit-chat{
pointer-events: auto;
box-sizing: inherit;
letter-spacing: -0.24px;
-webkit-font-smoothing: antialiased;
background: none;
border: 0px;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
font-size: inherit;
font-family: inherit;
font-optical-sizing: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
line-height: normal;
overflow: visible;
padding: 0px;
user-select: none;
outline: none;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
margin: 10px 0px 8px 11px;
float: right;
z-index: unset;
margin-right: -3px;
color: rgb(255, 255, 255);
border: none;
}
.aikit-exit-chat:focus {
outline: none;
}
.aikit-exit-chat:hover {
transform: scale(1.15);
transition: 100ms linear all;
}
.aikit-exit-chat span {
background: rgb(255, 255, 255);
padding: 6px 8px;
border-radius: 2px;
box-shadow: rgba(0, 18, 46, 0.32) 0px 2px 8px 0px;
font-size: 13px;
position: absolute;
opacity: 0;
pointer-events: none;
white-space: nowrap;
transition: all 0.16s ease-in-out 0s;
z-index: 1;
right: calc(100% + 10px);
top: 50%;
transform: translate(5px, -50%);
color: rgb(6, 19, 43);
}
#aikit-conversation {
padding: 0px 20px;
width: 100%;
height: 457px;
overflow: hidden auto;
background: rgb(255, 255, 255);
transition: all 0.3s ease 0s;
max-height: 457px;
min-height: 160px;
flex: 0 1 auto;
}
#aikit-messages {
position: relative;
margin-top: 10px;
width: 100%;
padding-bottom: 24px;
float: left;
}
.aikit-message-bot {
color: rgb(6, 19, 43);
background: rgb(240, 242, 247);
float: left;
}
.aikit-message {
padding: 10px 16px;
border-radius: 20px;
margin: 5px 0px;
font-size: 15px;
line-height: 20px;
overflow-wrap: break-word;
display: inline-block;
max-width: 85%;
clear: both;
position: relative;
transition: margin 0.28s ease-in-out 0s;
}
.aikit-message-user {
background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255));
color: rgb(255, 255, 255);
transition: transform 0.2s ease 0s, margin 0.2s ease 0s;
float: right;
}
.aikit-message-error {
background: rgb(255, 255, 255);
color: rgb(6, 19, 43);
border: 1px solid rgb(255, 0, 0);
float: left;
}
.aikit-typing {
align-items: center;
display: flex;
height: 15px;
}
.aikit-typing .aikit-dot {
animation: mercuryTypingAnimation 1.8s infinite ease-in-out;
background-color: rgb(43, 40, 215);
border-radius: 50%;
height: 7px;
margin-right: 4px;
vertical-align: middle;
width: 7px;
display: inline-block;
}
.aikit-typing .aikit-dot:nth-child(1) {
animation-delay: 200ms;
}
.aikit-typing .aikit-dot:nth-child(2) {
animation-delay: 300ms;
}
.aikit-typing .aikit-dot:nth-child(3) {
animation-delay: 400ms;
}
.aikit-typing .aikit-dot:last-child {
margin-right: 0;
}
@keyframes mercuryTypingAnimation {
0% {
transform: translateY(0px);
background-color: rgba(43, 40, 215, 0.7);
}
28% {
transform: translateY(-7px);
background-color: rgba(43, 40, 215,.4);
}
44% {
transform: translateY(0px);
background-color: rgba(43, 40, 215,.2);
}
}
.aikit-input-group {
padding: 0px 28px 6px 20px;
width: 100%;
position: relative;
background: rgb(255, 255, 255);
z-index: 3;
flex: 0 0 auto;
}
.aikit-input-group .aikit-footer-input-wrapper {
transition: all 0.5s ease-in-out 0s;
opacity: 1;
transform: translateY(0px);
}
.aikit-chat-widget hr {
margin: 0px;
border-width: 0px 0px 1px;
border-top-style: initial;
border-right-style: initial;
border-left-style: initial;
border-top-color: initial;
border-right-color: initial;
border-left-color: initial;
border-image: initial;
border-bottom-style: solid;
border-bottom-color: rgb(219, 223, 230);
}
.aikit-chat-widget input,
.aikit-chat-widget textarea,
.aikit-chat-widget select,
.aikit-chat-widget button {
font-family: Mulish, sans-serif;
letter-spacing: -0.24px;
-webkit-font-smoothing: antialiased;
color: rgb(6, 19, 43);
}
textarea#aikit-new-message-textarea {
border: 0 !important;
outline: none !important;
width: 100%;
font-size: 17px;
padding: 20px 0px 14px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
resize: none;
line-height: 24px;
overflow: hidden;
}
textarea#aikit-new-message-textarea::placeholder {
color: #93959BFF;
font-size: 16px;
}
.aikit-button {
position: absolute;
width: 112px;
height: 140px;
bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 9999999999 !important;
right: 0px;
}
.aikit-button-body {
width: 60px;
height: 60px;
border-radius: 50%;
display: inherit;
align-items: center;
justify-content: center;
pointer-events: initial;
background-size: 130% 130%;
transition: all 0.2s ease-in-out 0s;
position: relative;
border: none;
outline: none;
background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255));
box-shadow: rgba(0, 77, 255, 0.5) 0px 4px 24px;
}
.aikit-button-body:hover {
cursor: pointer;
transform: scale(1.08);
}
.aikit-button i svg {
width: 25px;
height: 25px;
color: whitesmoke;
}
.aikit-button i svg:hover {
transform: rotate(10deg);
transition: 300ms linear all;
}
.aikit-voice-button {
position: relative;
text-align: center;
width: 2rem;
height: 2rem;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
border-radius: 10000px;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
font-size: 1rem;
cursor: pointer;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
filter: grayscale(100%);
}
.aikit-input-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.aikit-voice-button[data-recording="1"] {
color: #ff7676;
fill: #ff7676;
stroke: #ff7676;
filter: grayscale(0%);
}
.aikit-voice-button[data-recording="1"] .aikit-pulse-ring {
content: '';
width: 2rem;
height: 2rem;
background: #888888;
border: 5px solid #888888;
border-radius: 50%;
position: absolute;
top: -3px;
left: -2px;
animation: aikit-pulsate infinite 1.5s;
}
@-webkit-keyframes aikit-pulsate {
0% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.3, 1.3);
opacity: 0;
}
}
.aikit-voice-button:hover {
color: #212529;
background-color: #e2e6ea;
border-color: #dae0e5;
scale: 1.1;
transition: 100ms linear all;
} .aikit-loading {
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: #000000;
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
.aikit-loading[data-visible="1"] {
display: inline-block;
}
.aikit-loading[data-visible="0"] {
display: none;
}
@keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
.d-none {
display: none;
}
@media only screen and (max-width: 768px) { .aikit-chat-widget {
border: none;
position: fixed;
top: auto;
bottom: 0px !important;
left: auto;
right: 0px;
opacity: 1;
color-scheme: none;
background: none transparent !important;
margin: 0px;
transform: translateY(0px);
transition: none 0s ease 0s !important;
visibility: visible;
z-index: 999999999 !important;
}
.aikit-chat-widget.aikit-open {
width: 100%;
height: 100%;
max-height: 100vh;
max-width: 100vw;
}
.aikit-input-group textarea {
padding-right: 50px;
}
.aikit-chat-widget.aikit-open .aikit-chat {
width: 100%;
height: 100%;
}
.aikit-chat {
bottom: 0px;
background: rgb(255, 255, 255);
display: flex;
flex-direction: column;
border-radius: 0px;
right: 0px;
left: auto;
max-height: none;
}
.aikit-chat-header {
padding: 8px 22px 0px;
}
#aikit-conversation {
max-height: none;
flex: 1 1 auto;
overflow-y: scroll;
}
.aikit-input-group {
align-self: flex-end;
}
.aikit-button {
width: 80px;
height: 100px;
bottom: 0px;
transition: transform 0.2s ease 0s;
transform: translateY(-12px);
right: 0px;
left: auto;
}
}