:root {
--bubble-agent-color: #FCE5BE;
}
.mistral-form {
input, button {
font-size: 1.125rem;
border: none;
outline: none;
}
input {
background-color: transparent;
width: 100%;
height: 100%;
font-weight: 500;
}
button {
display: flex;
align-content: center;
padding: 16px 24px;
font-weight: 800;
background-color: transparent;
color: var(--wp--preset--color--white);
border-radius: 28px;
cursor: pointer;
transition: background-color .3s ease;
@media screen and (min-width: 768px) {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--white);
}
&:hover {
@media screen and (min-width: 768px) {
background-color: #000000;
}
}
span {
@media screen and (max-width: 767px) {
display: none;
}
}
svg {
height: 22px;
width: 22px;
@media screen and (min-width: 768px) {
display: none;
}
}
@media screen and (min-width: 1024px) {
padding: 16px 32px;
}
}
input {
&:not(:placeholder-shown) {
+ button {
@media screen and (min-width: 768px) {
background-color: var(--wp--preset--color--primary);
}
}
}
}
}
mistral-input-hero {
display: block;
.mistral-form__wrapper {
position: relative;
display: flex;
align-items: center;
@media screen and (min-width: 768px) {
padding-right: 0;
}
input {
border: 2px solid #E7E7E7;
background-color: #F6F6F6;
padding-left: 24px;
padding-right: var(--btn-width);
height: 96px;
border-radius: 48px;
transition: background-color .3s ease, width .3s ease;
@media screen and (min-width: 768px) {
padding-left: 96px;
padding-right: 16px;
width: calc(100% - var(--btn-width));
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 24px 24px;
background-position: 48px center;
}
}
&.active {
input {
background-color: var(--wp--preset--color--white);
width: 100%;
@media screen and (min-width: 768px) {
padding-right: calc(var(--btn-width) - 32px);
}
}
button {
@media screen and (min-width: 768px) {
margin-right: 24px;
height: 56px;
padding: 0 32px;
}
}
}
button {
position: absolute;
right: 0;
display: flex;
align-items: center;
justify-content: center;
height: 56px;
padding: 0 24px;
margin-right: 16px;
background-color: var(--wp--preset--color--black);
border-radius: 48px;
transition: height .3s ease, padding .3s ease, margin-right .3s ease;
@media screen and (min-width: 768px) {
padding: 0 64px;
height: 96px;
margin-right: 0;
}
&:hover {
background-color: var(--wp--preset--color--primary);
}
}
}
}
mistral-chat {
display: block;
background-color: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--border-color);
border-radius: 0 0 32px 32px;
box-shadow: -9px 11px 38px rgba(0, 0, 0, 0.05);
@media screen and (min-width: 768px) {
border-radius: 50px;
}
ul, ol {
padding-left: 16px;
@media screen and (min-width: 768px) {
padding-left: 32px;
}
}
.chat {
display: flex;
flex-direction: column;
align-items: flex-start;
overflow: hidden scroll;
padding: 24px;
.page-template-page-ai & {
max-height: 70vh;
-ms-overflow-style: none;
scrollbar-width: none;
}
&::-webkit-scrollbar {
display: none;
}
@media screen and (min-width: 768px) {
padding: 40px;
}
@media screen and (min-width: 1280px) {
padding: 80px;
}
.bubble {
position: relative;
padding: 16px;
margin-top: 40px;
font-size: 1rem;
line-height: 1.6;
color: #2D2D2D;
font-weight: 500;
border-radius: 12px;
max-width: 90%;
transition: color .3s ease, background-color .3s ease;
&::after {
content: "";
height: 48px;
width: 48px;
position: absolute;
top: 8px;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
padding: 24px;
max-width: 85%;
}
@media screen and (min-width: 1280px) {
max-width: 75%;
}
&.agent {
background-color: var(--bubble-agent-color);
margin-left: 40px;
@media screen and (min-width: 1280px) {
margin-left: 24px;
}
&::after {
left: -56px;
background-image: url('data:image/svg+xml,');
@media screen and (min-width: 1280px) {
left: -72px;
}
}
&.choice {
width: 100%;
margin-top: 8px;
&::after {
content: none;
}
}
p, li {
color: #2D2D2D;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
a {
text-decoration: underline;
color: #2D2D2D;
}
}
p {
margin-bottom: 0;
text-align: left;
}
ul, ol {
margin: 16px 0;
li {
margin-bottom: 8px
}
}
p, a {
transition: color .3s ease
}
}
&.user {
align-self: flex-end;
word-wrap: break-word;
text-wrap: pretty;
margin-right: 32px;
background-color: #F6F6F6;
@media screen and (min-width: 1280px) {
margin-right: 24px;
}
&::after {
right: -56px;
background-image: url('data:image/svg+xml,');
@media screen and (min-width: 1280px) {
right: -72px;
}
}
}
&.choice {
position: relative;
padding: 8px 24px;
display: flex;
align-items: center;
gap: 8px;
@media screen and (min-width: 768px) {
gap: 16px;
}
&:not(.disabled) {
cursor: pointer;
&:hover {
p, a {
color: #FFFFFF;
}
}
}
&:before {
content: '';
width: 16px;
height: 16px;
flex: 0 0 16px;
background-color: var(--wp--preset--color--white);
border-radius: 50%;
@media screen and (min-width: 768px) {
width: 24px;
height: 24px;
flex: 0 0 24px;
}
}
&:not(.active, .disabled) {
&:hover {
background-color: #000000;
color: var(--wp--preset--color--white);
}
}
&.active {
background-color: #000000;
color: var(--wp--preset--color--white);
p {
color: var(--wp--preset--color--white);
a {
color: var(--wp--preset--color--paragraph-color);
}
}
}
}
&:first-child {
margin-top: 0;
}
}
.suggestions {
margin-top: 40px;
width: 100%;
h2 {
display: flex;
align-items: center;
gap: 16px;
font-size: var(--wp--preset--font-size--large);
font-weight: 900;
margin-bottom: 24px;
@media screen and (min-width: 768px) {
gap: 32px;
}
&:before {
display: block;
content: '';
width: 35px;
height: 40px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
@media screen and (min-width: 768px) {
width: 75px;
height: 80px;
}
}
}
.discussion-ended & {
.card {
box-shadow: none;
cursor: default;
h3 {
background: none;
}
}
}
}
}
.actions {
position: relative;
display: flex;
flex-direction: column;
padding: 24px;
border-radius: 0 0 32px 32px;
@media screen and (min-width: 768px) {
padding: 40px;
border-radius: 0 0 50px 50px;
border-top: 1px solid var(--wp--preset--color--border-color);
background-color: var(--wp--preset--color--base);
}
.input-container {
padding-right: 0;
transition: background-color .3s ease;
@media screen and (max-width: 767px) {
height: 60px;
}
@media screen and (min-width: 768px) {
padding-right: 24px;
}
&.disabled {
cursor: not-allowed;
background-color: #F6F6F6
}
button {
svg {
color: var(--wp--preset--color--black);
}
}
}
}
+ .reset {
display: inline-block;
margin-top: 16px;
cursor: pointer;
text-decoration: underline;
transition: color .3s ease;
&:hover {
color: var(--wp--preset--color--primary);
}
}
}
.alert {
padding: 1rem;
color: var(--wp--preset--color--paragraph-color-secondary);
background-color: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--border-color);
}
mistral-input-widget {
&.is-visible {
#open {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
}
&.chat-dialog {
#open, #close {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
&.open {
.chat-dialog__wrapper {
visibility: visible;
opacity: 1;
z-index: 1000;
}
}
.chat-dialog__wrapper {
display: flex;
flex-direction: column;
position: fixed;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
visibility: hidden;
box-shadow: rgba(0, 0, 0, 0.2) -9px 11px 38px 0;
transition: opacity .3s ease, visibility .3s ease;
@media screen and (max-width: 767px) {
left: 0;
top: 0;
}
@media screen and (min-width: 768px) {
right: 16px;
bottom: 16px;
top: 20vh;
max-width: 65vw;
border-radius: 20px;
border: 1px solid var(--wp--preset--color--border-color);
}
@media screen and (min-width: 1024px) {
max-width: 55vw;
}
@media screen and (min-width: 1280px) {
max-width: 35vw;
}
}
.chat-dialog__wrapper--header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--wp--preset--color--primary);
padding: 16px 24px;
@media screen and (min-width: 768px) {
border-radius: 20px 20px 0 0;
}
.title-header {
display: flex;
gap: 8px;
.sesame {
font-size: 22px;
font-weight: 600;
line-height: 38px;
@media screen and (min-width: 768px) {
font-size: 28px;
}
}
.status {
display: flex;
gap: 4px;
align-items: center;
font-size: 14px;
font-weight: 500;
line-height: 19px;
&::before {
display: block;
content: '';
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #32F567;
border: 1px solid #FFFFFF;
}
}
svg {
width: 48px;
@media screen and (min-width: 768px) {
width: 60px;
}
}
}
#close {
color: #000000;
padding: 0;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
background-color: transparent;
transition: background-color .3s ease;
svg {
height: 24px;
width: 24px;
}
&:hover {
background-color: var(--wp--preset--color--primary);
}
}
}
mistral-chat {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
background-color: #FFFFFF;
border-radius: 0;
@media screen and (min-width: 768px) {
border-radius: 0 0 20px 20px;
}
.chat {
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
padding: 24px;
height: 100%;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
@media screen and (min-width: 768px) {
padding: 32px;
}
.bubble {
@media screen and (min-width: 1280px) {
max-width: 80%;
}
&::after {
height: 40px;
width: 40px;
background-size: 40px 40px;
@media screen and (max-width: 767px) {
display: none;
}
}
&.agent {
margin-left: 0;
@media screen and (min-width: 768px) {
margin-left: 56px;
&::after {
left: -56px;
}
}
}
&.user {
margin-right: 0;
@media screen and (min-width: 768px) {
margin-right: 56px;
&::after {
right: -56px;
}
}
}
}
.suggestions {
h2 {
font-size: 24px;
@media screen and (min-width: 768px) {
gap: 24px;
}
&::before {
@media screen and (min-width: 768px) {
width: 55px;
height: 60px;
}
}
}
.card {
@media screen and (min-width: 768px) {
--card-padding: 48px;
}
h3 {
font-size: 24px;
}
}
}
}
.actions {
padding-bottom: 24px;
background-color: #FFFFFF;
border-top: none;
@media screen and (min-width: 768px) {
padding-bottom: 32px;
border-radius: 0 0 20px 20px;
}
.input-container {
height: 60px;
padding-right: 0;
@media screen and (min-width: 768px) {
padding: 0 8px 0 32px;
}
button {
background-color: transparent;
&:hover {
background-color: transparent;
svg {
color: var(--wp--preset--color--primary);
}
}
svg {
display: block;
color: var(--wp--preset--color--black);
height: 20px;
width: 20px;
transition: color .3s ease;
}
}
}
}
}
}
#open {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 97;
padding: 0;
background-color: var(--wp--preset--color--primary);
height: 80px;
width: 80px;
opacity: 0;
visibility: hidden;
transform: translateY(64px);
border: 3px solid #FFFFFF;
border-radius: 60px;
box-shadow: rgba(0, 0, 0, 0.2) -9px 11px 38px 0px;
transition: background-color .3s ease, opacity .3s ease, visibility .3s ease, transform .3s ease;
cursor: pointer;
@media screen and (min-width: 768px) {
height: 96px;
width: 96px;
}
@media screen and (min-width: 1280px) {
height: 120px;
width: 120px;
}
&:hover {
background-color: var(--wp--preset--color--black);
}
svg {
max-width: 48px;
@media screen and (min-width: 768px) {
max-width: 56px;
}
@media screen and (min-width: 1280px) {
max-width: 68px;
}
}
}
}