@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(//velislab.it/wp-content/plugins/velischat/assets/fonts/open-sans/open-sans-variable-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(//velislab.it/wp-content/plugins/velischat/assets/fonts/open-sans/open-sans-variable-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}.velis-ai-chatbot-container-full :where( p, h2, h3, ol, ul, li, label, em, i, form ) {
color: inherit !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-align: inherit !important;
text-decoration: none !important;
}
.velis-ai-chatbot-container-full :where( strong, b ) {
background: none !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
font-size: inherit !important;
line-height: inherit !important;
text-align: inherit !important;
text-decoration: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full :where( a ),
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full :where( a ):hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full :where( a ):focus,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full :where( a ):visited {
color: inherit !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-align: inherit !important;
text-decoration: none !important;
}
.velis-ai-chatbot-container-full :where( button, input, select, textarea ) {
width: auto !important;
height: auto !important;
font-size: inherit !important;
text-decoration: none !important;
}
.velis-ai-chatbot-container-full :where( img ) {
width: auto !important;
height: auto !important;
max-width: 100% !important;
}
.velis-ai-chatbot-container-full {
color: #1e1e1e !important;
font-size: 16px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.6 !important;
letter-spacing: normal !important;
text-align: left !important;
text-transform: none !important;
text-shadow: none !important;
word-spacing: normal !important;
}
.velis-ai-chatbot-container-full,
.velis-ai-chatbot-container-full *,
.velis-ai-chatbot-container-full *::before,
.velis-ai-chatbot-container-full *::after {
box-sizing: border-box !important;
}
.velis-ai-chatbot-container-full * {
letter-spacing: normal !important;
text-transform: none !important;
text-shadow: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full h2,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full h3,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full p,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full ol,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full ul,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full li {
color: inherit !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full strong,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full b {
font-weight: 700 !important;
color: inherit !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full img {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full button,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full input,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full select,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full textarea {
margin: 0 !important;
min-height: 0 !important;
max-width: none !important;
box-shadow: none !important;
font-weight: 400 !important;
line-height: normal !important;
color: inherit !important;
} .velis-transitions-2s {
transition: all 0.2s ease-in-out;
}
.velis-transitions-4s {
transition: all 0.4s ease-in-out;
}
.velis-floating {
animation-name: floating;
animation-duration: 2.4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.velis-word {
opacity: 0;
animation: velis-word-in 0.2s ease forwards;
display: inline !important;
} .velis-ai-font-fira_sans {
font-family: 'Fira Sans', sans-serif !important;
line-height: 27px !important;
}
.velis-ai-font-fira_sans * {
font-family: 'Fira Sans', sans-serif !important;
}
.velis-ai-font-fira_sans .velis-ai-message-bubble {
line-height: 28px !important;
font-size: 17px !important;
}
.velis-ai-font-open_sans {
font-family: 'Open Sans', sans-serif !important;
}
.velis-ai-font-open_sans * {
font-family: 'Open Sans', sans-serif !important;
}
.velis-ai-font-open_sans .velis-ai-message-bubble {
line-height: 28px !important;
font-size: 17px !important;
}
.velis-ai-font-lato,
.velis-ai-font-lato * {
font-family: 'Lato', sans-serif !important;
}
.velis-ai-font-montserrat,
.velis-ai-font-montserrat * {
font-family: 'Montserrat', sans-serif !important;
}
.velis-ai-font-nunito,
.velis-ai-font-nunito * {
font-family: 'Nunito', sans-serif !important;
}
.velis-ai-font-lora,
.velis-ai-font-lora * {
font-family: 'Lora', serif !important;
}
.velis-ai-font-lato .velis-ai-message-bubble,
.velis-ai-font-montserrat .velis-ai-message-bubble,
.velis-ai-font-nunito .velis-ai-message-bubble,
.velis-ai-font-lora .velis-ai-message-bubble {
line-height: 28px !important;
font-size: 17px !important;
}  .velis-ai-overlay {
position: fixed !important;
top: -100vh !important;
bottom: -100vh !important;
opacity: 0;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
width: 100% !important;
height: auto !important;
left: 0 !important;
background-color: #f6f7fb !important;
z-index: 99999 !important;
overflow: hidden !important;
}
.velis-ai-overlay[data-active="true"] {
opacity: 1;
visibility: visible !important;
pointer-events: auto !important;
transition: opacity 0.2s ease-out;
}
.velis-ai-chatbot-container[data-status="full"],
.velis-ai-chatbot-container[data-status="working"],
.velis-ai-action-bar[data-active="true"],
.velis-ai-dialog-panel[data-active="true"] {
animation: velis-open-fade 0.25s ease-out 0.15s both;
} .velis-ai-chatbot-container {
position: fixed !important;
bottom: 20px !important;
transform: translateX(-50%);
left: 50% !important;
z-index: 100000 !important;
width: 100% !important;
}
.velis-ai-chatbot-container[data-status="small"] .velis-hidden {
display: none !important;
opacity: 0;
} .velis-ai-chatbot-container[data-status="full"] {
top: clamp(104px, 18vh, 200px) !important;
overflow-y: auto !important;
padding-bottom: 24px !important;
}
.velis-ai-chatbot-container[data-status="full"] #velis-ai-chatbot {
animation: gradientBorder 104s linear infinite;
}
.velis-ai-chatbot-container[data-status="working"] .velis-hidden {
display: none !important;
opacity: 0;
}
.velis-ai-chatbot-container[data-status="full"] .velis-ai-go-button,
.velis-ai-chatbot-container[data-status="working"] .velis-ai-go-button {
display: flex !important;
opacity: 1;
}
.velis-user-id-4 .velis-ai-chatbot-container {
display: block !important;
}  .velis-ai-mode-compact .velis-ai-chatbot-container[data-status="small"] {
display: none !important;
}
.velis-ai-launcher {
position: fixed !important;
right: var(--velis-launcher-right, 24px) !important;
bottom: var(--velis-launcher-bottom, 24px) !important;
z-index: 100000 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
cursor: pointer !important;
font-family: inherit !important;
animation: velis-launcher-in 0.4s ease-out both;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-launcher,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-launcher:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-launcher:focus {
width: auto !important;
height: auto !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
.velis-ai-overlay[data-active="true"] + .velis-ai-chatbot-container-full .velis-ai-launcher {
display: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-launcher-icon {
width: 60px !important;
height: 60px !important;
object-fit: contain !important;
border-radius: 50% !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2) !important;
transition: transform 0.2s ease-in-out;
}
.velis-ai-launcher-label {
padding: 10px 16px !important;
border-radius: 99px 99px 4px 99px !important;
background: white !important;
color: #222 !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14) !important;
transition: transform 0.2s ease-in-out;
} .velis-ai-launcher-text {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 6px !important;
}
.velis-ai-launcher-status {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 3px 10px 4px 8px !important;
border-radius: 99px !important;
background: white !important;
color: #3a3f4b !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
white-space: nowrap !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
transition: transform 0.2s ease-in-out;
}
.velis-ai-launcher-status::before {
content: '' !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #1a9e5c !important;
box-shadow: 0 0 0 3px rgba(26, 158, 92, 0.18) !important;
}
.velis-ai-launcher:hover .velis-ai-launcher-status {
transform: translateX(-3px);
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-launcher:hover .velis-ai-launcher-icon {
transform: scale(1.07);
}
.velis-ai-launcher:hover .velis-ai-launcher-label {
transform: translateX(-3px);
}
.velis-ai-launcher:focus-visible {
outline: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-launcher:focus-visible .velis-ai-launcher-icon {
box-shadow: 0 0 0 3px white, 0 0 0 6px #1F5BFF !important;
}
@media ( max-width: 680px ) {
.velis-ai-launcher {
right: var(--velis-launcher-right, 16px) !important;
bottom: var(--velis-launcher-bottom, 16px) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-launcher-icon {
width: 54px !important;
height: 54px !important;
}
.velis-ai-launcher-label {
font-size: 14px !important;
padding: 8px 14px !important;
}
.velis-ai-launcher-status {
font-size: 11px !important;
line-height: 14px !important;
}
} .velis-ai-top-bar,
#velis-ai-chatbot,
.velis-ai-examples {
width: 780px !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 95% !important;
}
.velis-ai-top-bar {
display: flex !important;
justify-content: center !important;
}
.velis-ai-hi-container {
width: 100% !important;
margin-bottom: 28px !important;
text-align: center !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-hi-container h2 {
margin-bottom: 8px !important;
color: #1e1e1e !important;
font-size: 34px !important;
font-weight: 600 !important;
line-height: 40px !important;
text-align: center !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-hi-container h3 {
color: #5b6170 !important;
font-size: 19px !important;
font-weight: 400 !important;
line-height: 26px !important;
text-align: center !important;
} .velis-ai-chatbot-container[data-status="full"] .velis-ai-hi-container h2 {
animation: velis-open-fade 0.6s ease-out 0.25s both;
}
.velis-ai-chatbot-container[data-status="full"] .velis-ai-hi-container h3 {
animation: velis-open-fade 0.6s ease-out 0.45s both;
} .velis-ai-logo-container {
display: none !important;
}
.velis-ai-logo-container img {
max-height: 40px !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
} #velis-ai-chatbot {
position: relative !important;
border-radius: 32px !important;
border: 2.5px solid transparent !important;
animation: gradientBorder 24s linear infinite;
background: linear-gradient(to right, #120020, #120020) content-box, conic-gradient(from var(--angle), #120020 0deg, #ff6b6b 45deg, #f36fff 90deg, #8b5ff7 135deg, #268aff 180deg, #00d4ff 225deg, #52eaea 270deg, #00ff88 315deg, #120020 360deg) border-box !important;
} .velis-ai-border-custom #velis-ai-chatbot {
background: linear-gradient(to right, #120020, #120020) content-box, conic-gradient(from var(--angle), #120020 0deg, var(--velis-border-1) 60deg, var(--velis-border-2) 180deg, var(--velis-border-1) 300deg, #120020 360deg) border-box !important;
}
#velis-ai-chatbot img {
position: absolute !important;
width: 42px !important;
height: auto !important;
left: 22px !important;
top: 9px !important;
}
#velis-ai-chatbot input {
width: 100% !important;
background-color: white !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
border-radius: 32px !important;
font-size: 18px !important;
height: 62px !important;
padding: 0 92px 0 78px !important;
border: 0 !important;
outline: none !important;
color: #555 !important;
-webkit-appearance: none !important;
appearance: none !important;
}
#velis-ai-chatbot input::placeholder {
color: #757575 !important;
opacity: 1;
} .velis-has-branding .velis-ai-examples {
margin-top: calc( 64px + var( --velis-branding-extra, 0px ) ) !important;
} .velis-ai-chatbot-container[data-status="working"] {
bottom: 14px !important;
} .velis-ai-chatbot-container.velis-has-branding[data-status="working"] {
padding-bottom: calc( 34px + var( --velis-branding-extra, 0px ) ) !important;
}
.velis-ai-chatbot-container[data-status="working"] #velis-ai-chatbot {
box-shadow: 0 10px 30px rgba(31, 40, 80, 0.08) !important;
}
#velis-ai-chatbot input:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
background-color: white !important;
}
#velis-ai-chatbot:has(input:disabled) {
opacity: 0.4;
cursor: not-allowed !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-go-button,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-go-button:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-go-button:focus {
position: absolute !important;
top: 5px !important;
right: 5px !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: calc(100% - 10px) !important;
aspect-ratio: 1 !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
background: var(--velis-color-1) !important;
color: var(--velis-on-color-1, white) !important;
cursor: pointer !important;
transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-go-button:not(.velis-inactive):hover {
background: var(--velis-color-2) !important;
color: var(--velis-on-color-2, white) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-go-button:focus-visible {
outline: 2px solid var(--velis-color-1) !important;
outline-offset: 3px !important;
}
.velis-ai-go-button.velis-inactive {
cursor: not-allowed !important;
opacity: 0.4 !important;
} .velis-ai-action-bar {
display: none !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 72px !important;
padding: 0 32px !important;
z-index: 100000 !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
border-bottom: 1px solid #e7e9f0 !important;
background: white !important;
}
.velis-ai-action-bar[data-active="true"] {
display: flex !important;
}
.velis-ai-header-identity {
display: flex !important;
align-items: center !important;
gap: 14px !important;
min-width: 0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-header-avatar {
flex-shrink: 0 !important;
width: 40px !important;
height: 40px !important;
padding: 6px !important;
object-fit: contain !important;
border-radius: 12px !important;
background: #f1f3f8 !important;
}
.velis-ai-header-text {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-header-text strong {
overflow: hidden !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 20px !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
.velis-ai-header-text span {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 13px !important;
line-height: 18px !important;
color: #5b6170 !important;
}
.velis-ai-header-text span::before {
content: '' !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #1a9e5c !important;
}
.velis-ai-header-actions {
display: flex !important;
flex-shrink: 0 !important;
align-items: center !important;
gap: 4px !important;
}
.velis-action-separator {
width: 1px !important;
height: 24px !important;
margin: 0 6px !important;
background: #e7e9f0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-action-btn {
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: auto !important;
height: 44px !important;
padding: 0 14px !important;
border: 0 !important;
border-radius: 12px !important;
background: transparent !important;
color: #3a3f4b !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 400 !important;
cursor: pointer !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-action-btn:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-action-btn:focus {
background: #f1f3f8 !important;
color: #1e1e1e !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-action-btn:focus-visible {
outline: 2px solid var(--velis-color-1) !important;
outline-offset: 2px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-action-btn-close {
justify-content: center !important;
width: 44px !important;
padding: 0 !important;
background: #f1f3f8 !important;
color: #1e1e1e !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-action-btn-close:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-action-btn-close:focus {
background: #e4e7ef !important;
}
.velis-action-btn svg {
flex-shrink: 0 !important;
}
.velis-action-btn.velis-inactive {
opacity: 0.45;
cursor: default !important;
}
@media ( max-width: 680px ) {
.velis-ai-action-bar {
height: 60px !important;
padding: 0 12px !important;
gap: 8px !important;
}
.velis-ai-header-identity {
gap: 16px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-header-avatar {
width: 40px !important;
height: 40px !important;
padding: 6px !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-header-text strong {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
font-size: 14px !important;
line-height: 18px !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
.velis-ai-header-text span {
display: none !important;
}
.velis-ai-header-actions {
gap: 0 !important;
} .velis-action-label,
.velis-action-separator {
display: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-action-btn {
justify-content: center !important;
width: 44px !important;
padding: 0 !important;
}
}
.velis-test-mode-notice {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
margin-top: 8px !important;
padding: 0 16px !important;
text-align: center !important;
font-family: inherit !important;
color: #d63638 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
.velis-ai-action-bar.velis-has-test-notice ~ .velis-ai-dialog-panel {
top: 108px !important;
}
.velis-ai-action-bar.velis-has-two-notices ~ .velis-ai-dialog-panel {
top: 126px !important;
}
@media ( max-width: 680px ) {
.velis-test-mode-notice {
font-size: 12px !important;
}
.velis-ai-action-bar.velis-has-test-notice ~ .velis-ai-dialog-panel {
top: 112px !important;
}
.velis-ai-action-bar.velis-has-two-notices ~ .velis-ai-dialog-panel {
top: 144px !important;
}
} .velis-ai-dialog-panel {
display: none !important;
opacity: 0;
width: 780px !important;
max-width: 95% !important;
position: fixed !important;
top: 88px !important;
bottom: 91px !important;
padding: 16px 6px 24px !important;
z-index: 100000 !important;
transform: translateX(-50%);
left: 50% !important;
overflow-y: scroll !important;
overscroll-behavior: contain !important; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%) !important;
mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%) !important;
} .velis-ai-chatbot-container-full:has(.velis-has-branding) .velis-ai-dialog-panel {
bottom: calc( 125px + var( --velis-branding-extra, 0px ) ) !important;
}
.velis-ai-dialog-panel[data-active="true"] {
display: block !important;
opacity: 1;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel p,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ol,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ul {
margin-bottom: 14px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ol,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ul {
padding-left: 30px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ol li {
list-style: decimal outside !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ul li {
list-style: disc outside !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel li::before,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel li::after {
content: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a {
color: inherit !important;
text-decoration: underline !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel p:last-child,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ol:last-child,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ul:last-child {
margin-bottom: 0 !important;
}
.velis-ai-dialog-panel::-webkit-scrollbar {
width: 10px !important;
}
.velis-ai-dialog-panel::-webkit-scrollbar-track {
background: transparent !important;
}
.velis-ai-dialog-panel::-webkit-scrollbar-thumb {
background-color: #cccccc !important;
border-radius: 99px !important;
border-right: 6px solid transparent !important;
background-clip: padding-box !important;
} .velis-ai-message-bubble {
position: relative !important;
padding: 12px 18px !important;
width: auto !important;
display: table !important;
margin-bottom: 22px !important;
}
.velis-ai-message-bubble[data-by="user"] {
margin-left: auto !important;
max-width: 70% !important;
border-radius: 20px 20px 6px 20px !important;
background-color: var(--velis-color-1) !important;
color: var(--velis-on-color-1, white) !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel:has(.velis-ai-message-bubble[data-by="agent"])::after {
content: attr(data-disclaimer) !important;
display: block !important;
margin: -12px 0 0 48px !important;
padding: 0 !important;
font-family: inherit !important;
font-size: 12px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 16px !important;
letter-spacing: normal !important;
text-transform: none !important;
color: #6b7080 !important;
text-align: left !important;
} .velis-ai-message-bubble[data-by="agent"] {
margin-left: 48px !important;
max-width: calc(100% - 48px) !important;
padding: 16px 20px !important;
border: 1px solid #e7e9f0 !important;
border-radius: 6px 20px 20px 20px !important;
background: white !important;
}
.velis-ai-message-bubble[data-by="agent"]::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -48px !important;
width: 34px !important;
height: 34px !important;
border: 1px solid #e7e9f0 !important;
border-radius: 50% !important;
background: white var(--velis-agent-avatar, none) center / 22px no-repeat !important;
} .velis-ai-message-bubble[data-by="agent"]:has(.velis-contact-form) {
width: calc(100% - 48px) !important;
padding: 4px 0 0 !important;
border: 0 !important;
background: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-chatbot-contact-message {
margin-bottom: 14px !important;
}
.velis-ai-typing-indicator {
display: flex !important;
gap: 5px !important;
align-items: center !important;
padding: 4px 2px !important;
}
.velis-ai-typing-indicator span {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background-color: #535353 !important;
animation: velis-typing-bounce 1.2s infinite ease-in-out;
}
.velis-ai-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.velis-ai-typing-indicator span:nth-child(3) { animation-delay: 0.4s; } .velis-ai-examples {
margin-top: 48px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-examples-title {
margin-bottom: 12px !important;
color: #6b7080 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 18px !important;
}
.velis-ai-examples-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-example-item {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
width: 100% !important;
height: auto !important;
min-height: 52px !important;
padding: 13px 16px !important;
border: 1px solid #e7e9f0 !important;
border-radius: 14px !important;
background: white !important;
color: #1e1e1e !important;
font-size: 15px !important;
line-height: 21px !important;
text-align: left !important;
cursor: pointer !important;
opacity: 0;
animation: velis-rise-in 0.35s ease-out forwards;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-example-item:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-example-item:focus {
border-color: var(--velis-color-1) !important;
background: white !important;
color: #1e1e1e !important;
box-shadow: 0 6px 18px rgba(31, 40, 80, 0.07) !important;
transform: translateY(-1px);
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-example-item:focus-visible {
outline: 2px solid var(--velis-color-1) !important;
outline-offset: 2px !important;
}
.velis-ai-example-item svg {
flex-shrink: 0 !important;
color: #8a8f9c !important;
transition: color 0.2s ease, transform 0.2s ease;
}
.velis-ai-example-item:hover svg,
.velis-ai-example-item:focus svg {
color: var(--velis-color-1) !important;
transform: translateX(2px);
}
.velis-ai-example-item:nth-child(1) { animation-delay: 100ms; }
.velis-ai-example-item:nth-child(2) { animation-delay: 160ms; }
.velis-ai-example-item:nth-child(3) { animation-delay: 220ms; }
.velis-ai-example-item:nth-child(4) { animation-delay: 280ms; }
.velis-ai-example-item:nth-child(5) { animation-delay: 340ms; }
.velis-ai-example-item:nth-child(6) { animation-delay: 400ms; } .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
margin-top: 2px !important;
padding: 24px !important;
background: #fff !important;
border: 1px solid #ececec !important;
border-radius: 20px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
font-size: 15px !important;
line-height: 22px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form-header {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
color: var( --velis-color-1 ) !important;
background: color-mix( in srgb, var( --velis-color-1 ) 12%, transparent ) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form-heading {
display: flex !important;
flex-direction: column !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form-heading strong {
font-size: 16px !important;
line-height: 22px !important;
font-weight: 600 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form-heading span {
font-size: 13px !important;
line-height: 18px !important;
color: #6b6b6b !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form-fields {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-field {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
cursor: default !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-field-wide {
grid-column: 1 / -1 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-field-label {
font-size: 13px !important;
line-height: 18px !important;
font-weight: 600 !important;
color: #3a3a3a !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-optional {
font-weight: 400 !important;
color: #6b6b6b !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form input:not([type="checkbox"]),
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form select,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form textarea {
width: 100% !important;
height: auto !important;
padding: 11px 14px !important;
border: 1px solid #dcdcdc !important;
border-radius: 12px !important;
background: #fff !important;
color: #1e1e1e !important;
font-size: 15px !important;
line-height: 22px !important;
outline: none !important;
-webkit-appearance: none !important;
appearance: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form input:not([type="checkbox"]):focus,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form select:focus,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form textarea:focus {
background: #fff !important;
color: #1e1e1e !important;
border-color: var( --velis-color-1 ) !important;
box-shadow: 0 0 0 4px color-mix( in srgb, var( --velis-color-1 ) 15%, transparent ) !important;
outline: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form input::placeholder,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form textarea::placeholder {
color: #8a8a8a !important;
opacity: 1;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form textarea {
resize: none !important;
min-height: 90px !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-select {
position: relative !important;
display: block !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-select select {
padding-right: 40px !important;
cursor: pointer !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-select svg {
position: absolute !important;
top: 50% !important;
right: 14px !important;
transform: translateY(-50%);
color: #6b6b6b !important;
pointer-events: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form select option {
background: #fff !important;
color: #1e1e1e !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-privacy-label {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin: 0 !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 20px !important;
color: #555 !important;
cursor: pointer !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-privacy-label input[type="checkbox"] {
flex-shrink: 0 !important;
cursor: pointer !important;
margin: 1px 0 0 !important;
-webkit-appearance: checkbox !important;
appearance: auto !important;
width: 18px !important;
height: 18px !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
accent-color: var( --velis-color-1 ) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-privacy-label input[type="checkbox"]::before,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-privacy-label input[type="checkbox"]::after {
content: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-privacy-label a {
color: inherit !important;
text-decoration: underline !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form button[type="submit"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
min-height: 48px !important;
padding: 12px 16px !important;
border: 0 !important;
border-radius: 12px !important;
background: var( --velis-color-1 ) !important;
color: var(--velis-on-color-1, white) !important;
font-size: 15px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background 0.2s ease;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form button[type="submit"]:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form button[type="submit"]:focus {
color: var(--velis-on-color-2, white) !important;
background: var( --velis-color-2 ) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-chatbot-go-back-to-chat {
display: block !important;
width: auto !important;
min-height: 44px !important;
margin: 4px auto 0 !important;
padding: 0 12px !important;
border: 0 !important;
background: none !important;
color: #555 !important;
font-size: 14px !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
cursor: pointer !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-chatbot-go-back-to-chat:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-chatbot-go-back-to-chat:focus {
background: none !important;
color: #1e1e1e !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form-error {
margin: 0 !important;
font-style: italic !important;
color: #c0392b !important;
font-size: 13px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form-sent {
font-weight: 600 !important;
color: #27ae60 !important;
font-size: 15px !important;
margin: 4px 0 0 !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-consent {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin: 8px 0 !important;
padding: 24px !important;
background: #fff !important;
border: 1px solid #ececec !important;
border-radius: 20px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel p.velis-consent-title {
margin: 0 !important;
color: #1e1e1e !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 22px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel p.velis-consent-text {
margin: 0 !important;
color: #555 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 22px !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-consent-text a {
color: #1e1e1e !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
font-weight: 500 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-consent-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
margin: 4px 0 0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-consent-accept {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
min-height: 44px !important;
margin: 0 !important;
padding: 10px 20px !important;
border: 0 !important;
border-radius: 12px !important;
background: var( --velis-color-1 ) !important;
box-shadow: none !important;
color: var( --velis-on-color-1, #fff ) !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 20px !important;
letter-spacing: normal !important;
text-transform: none !important;
cursor: pointer !important;
transition: background 0.2s ease;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-consent-accept:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-consent-accept:focus-visible {
background: var( --velis-color-2 ) !important;
color: var( --velis-on-color-2, #fff ) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-consent-accept:focus-visible,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-consent-decline:focus-visible {
outline: 2px solid var( --velis-color-1 ) !important;
outline-offset: 2px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-consent-decline {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
min-height: 44px !important;
margin: 0 !important;
padding: 10px 14px !important;
border: 0 !important;
border-radius: 12px !important;
background: none !important;
box-shadow: none !important;
color: #555 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: normal !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-transform: none !important;
cursor: pointer !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-consent-decline:hover {
color: #1e1e1e !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full svg {
fill: none !important;
flex-shrink: 0 !important;
max-width: none !important;
margin: 0 !important;
vertical-align: middle !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full svg[width="16"] {
width: 16px !important;
height: 16px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full svg[width="18"] {
width: 18px !important;
height: 18px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full svg[width="20"] {
width: 20px !important;
height: 20px !important;
}  .velis-ai-message-bubble[data-by="agent"]:has(.velis-proposal),
.velis-ai-message-bubble[data-by="agent"]:has(.velis-products) {
width: calc(100% - 48px) !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel :is(.velis-products, .velis-proposal),
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel :is(.velis-products, .velis-proposal) * {
box-sizing: border-box !important;
float: none !important;
text-transform: none !important;
letter-spacing: normal !important;
text-shadow: none !important;
text-indent: 0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel :is(.velis-products, .velis-proposal) a {
border-bottom: 0 !important;
background-image: none !important;
box-shadow: none !important;
outline-offset: 2px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel :is(.velis-products, .velis-proposal) :is(ins, del) {
background: none !important;
padding: 0 !important;
font-weight: inherit !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel :is(.velis-products, .velis-proposal) .woocommerce-Price-amount {
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel :is(.velis-products, .velis-proposal) .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-products {
display: grid !important;
grid-template-columns: repeat( auto-fill, minmax( min( 170px, calc( 50% - 6px ) ), 1fr ) ) !important;
gap: 12px !important;
margin: 14px 0 0 !important;
padding: 0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-product {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 10px 10px 12px !important;
background: #f8f9fb !important;
border: 1px solid #e7e9f0 !important;
border-radius: 14px !important;
color: #1e1e1e !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-product:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-product:focus-within {
border-color: var( --velis-color-1 ) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-product-main {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
color: #1e1e1e !important;
font-weight: 400 !important;
text-decoration: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel img.velis-product-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 1 !important;
margin: 0 0 6px !important;
padding: 0 !important;
object-fit: cover !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: none !important;
background: white !important;
opacity: 1 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-product-name {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-weight: 600 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-product-price {
color: #1e1e1e !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-product-price del {
margin-right: 4px !important;
color: #8a8a8a !important;
text-decoration: line-through !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-product-price ins {
text-decoration: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-product-actions {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin-top: auto !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-product-link {
color: #1e1e1e !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 20px !important;
text-decoration: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-product-link:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-product-link:focus-visible {
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-product-add {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 40px !important;
margin: 0 !important;
padding: 9px 10px !important;
border: 0 !important;
border-radius: 10px !important;
background: var( --velis-color-1 ) !important;
box-shadow: none !important;
color: var(--velis-on-color-1, white) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 20px !important;
text-align: center !important;
text-decoration: none !important;
white-space: normal !important;
cursor: pointer !important;
transition: background 0.2s ease;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-product-add:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-product-add:focus-visible {
color: var(--velis-on-color-2, white) !important;
background: var( --velis-color-2 ) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-product-add:disabled {
cursor: default !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-product-closed {
display: block !important;
padding: 9px 10px !important;
border: 1px dashed #c9ced6 !important;
border-radius: 10px !important;
color: #6b7280 !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 20px !important;
text-align: center !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-product-add.is-added {
color: white !important;
background: #27ae60 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel p.velis-product-error {
margin: 0 !important;
font-size: 12px !important;
font-style: italic !important;
line-height: 16px !important;
color: #c0392b !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-products-cart {
display: inline-block !important;
min-height: 44px !important;
margin-top: 6px !important;
padding: 12px 0 !important;
border-bottom: 0 !important;
background-image: none !important;
box-shadow: none !important;
color: #1e1e1e !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: normal !important;
text-transform: none !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
margin: 14px 0 0 !important;
padding: 18px !important;
background: #f8f9fb !important;
border: 1px solid #e7e9f0 !important;
border-radius: 16px !important;
color: #1e1e1e !important;
font-size: 15px !important;
line-height: 22px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal p {
margin: 0 !important;
padding: 0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal-header {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
color: var( --velis-color-1 ) !important;
background: color-mix( in srgb, var( --velis-color-1 ) 12%, transparent ) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal-heading {
display: flex !important;
flex-direction: column !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal-heading strong {
font-size: 16px !important;
font-weight: 600 !important;
color: #1e1e1e !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal-heading span {
font-size: 13px !important;
color: #6b7280 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ul.velis-proposal-items {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ul.velis-proposal-items li {
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-height: 68px !important;
margin: 0 !important;
padding: 10px 0 !important;
list-style: none !important;
background: none !important;
border-top: 1px solid #e7e9f0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ul.velis-proposal-items li:first-child {
border-top: 0 !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ul.velis-proposal-items li::before,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel ul.velis-proposal-items li::after {
content: none !important;
display: none !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel img.velis-proposal-thumb {
display: block !important;
flex-shrink: 0 !important;
width: 48px !important;
height: 48px !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
border: 1px solid #e7e9f0 !important;
border-radius: 10px !important;
box-shadow: none !important;
background: white !important;
opacity: 1 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal-qty {
flex-shrink: 0 !important;
font-weight: 700 !important; color: #1e1e1e !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-proposal-name {
flex: 1 !important;
min-width: 0 !important;
color: #1e1e1e !important;
font-weight: 400 !important;
text-decoration: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-proposal-name:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-proposal-name:focus-visible {
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal-price {
flex-shrink: 0 !important;
color: #1e1e1e !important;
white-space: nowrap !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal-total {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
padding-top: 12px !important;
border-top: 1px solid #d5d9e2 !important;
font-size: 17px !important;
color: #1e1e1e !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal-total strong {
font-weight: 700 !important;
white-space: nowrap !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-proposal-add,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-proposal-checkout {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
height: auto !important;
min-height: 48px !important;
margin: 0 !important;
padding: 12px 16px !important;
border: 0 !important;
border-radius: 12px !important;
background: var( --velis-color-1 ) !important;
box-shadow: none !important;
color: var(--velis-on-color-1, white) !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 22px !important;
text-align: center !important;
text-decoration: none !important;
white-space: normal !important;
cursor: pointer !important;
transition: background 0.2s ease;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-proposal-add:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-proposal-add:focus-visible,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-proposal-checkout:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-proposal-checkout:focus-visible {
color: var(--velis-on-color-2, white) !important;
background: var( --velis-color-2 ) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel button.velis-proposal-add:disabled {
opacity: 0.7;
cursor: default !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-proposal-links {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-proposal-cart {
display: block !important;
min-height: 44px !important;
padding: 10px 12px !important;
text-align: center !important;
color: #555 !important;
font-size: 14px !important;
font-weight: 400 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel p.velis-proposal-note {
margin: -6px 0 0 !important;
font-size: 12px !important;
line-height: 16px !important;
text-align: center !important;
color: #8a8a8a !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel p.velis-proposal-done {
font-weight: 600 !important;
color: #27ae60 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel p.velis-proposal-error {
font-style: italic !important;
font-size: 13px !important;
color: #c0392b !important;
}  .velis-ai-message-bubble[data-by="agent"]:has(.velis-links) {
width: calc(100% - 48px) !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-links,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-links * {
box-sizing: border-box !important;
float: none !important;
text-transform: none !important;
letter-spacing: normal !important;
text-shadow: none !important;
text-indent: 0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-links {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 14px 0 0 !important;
padding: 0 !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-links:first-child {
margin-top: 0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-link-card {
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
min-height: 62px !important;
margin: 0 !important;
padding: 10px 12px !important;
border: 1px solid #e7e9f0 !important;
border-radius: 14px !important;
background: #f8f9fb !important;
box-shadow: none !important;
color: #1e1e1e !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
text-decoration: none !important;
outline-offset: 2px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-link-card:hover,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-link-card:focus-visible {
border-color: var( --velis-color-1 ) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
color: #1e1e1e !important;
text-decoration: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-link-badge {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: none !important;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 10px !important;
background: color-mix( in srgb, var( --velis-color-1 ) 12%, transparent ) !important;
color: var( --velis-color-1 ) !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-link-text {
display: flex !important;
flex-direction: column !important;
flex: 1 1 0 !important;
width: 0 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel :is(.velis-link-title, .velis-link-url) {
display: block !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
text-decoration: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-link-title {
color: #1e1e1e !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 20px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-link-url {
color: #6b7280 !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 16px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel .velis-link-go {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: none !important;
width: 30px !important;
height: 30px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #1e1e1e !important;
transition: background 0.2s ease, color 0.2s ease;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-link-card:hover .velis-link-go,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel a.velis-link-card:focus-visible .velis-link-go {
background: var( --velis-color-1 ) !important;
color: var( --velis-on-color-1, white ) !important;
}
@media ( max-width: 680px ) {
.velis-ai-chatbot-container[data-status="full"] {
top: 84px !important;
}
.velis-ai-hi-container {
margin-bottom: 20px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-hi-container h2 {
font-size: 26px !important;
line-height: 32px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-hi-container h3 {
font-size: 16px !important;
line-height: 22px !important;
}
.velis-ai-examples {
margin-top: 36px !important;
}
.velis-has-branding .velis-ai-examples {
margin-top: calc( 56px + var( --velis-branding-extra, 0px ) ) !important;
}
.velis-ai-examples-list {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-example-item:nth-child(n+5) {
display: none !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-example-item {
min-height: 48px !important;
padding: 11px 14px !important;
}
.velis-ai-dialog-panel {
padding: 12px 8px 24px !important;
}
.velis-ai-message-bubble {
font-size: 15px !important;
padding: 10px 14px !important;
}
.velis-ai-message-bubble[data-by="user"] {
max-width: 85% !important;
}
.velis-ai-message-bubble[data-by="agent"] {
margin-left: 38px !important;
max-width: calc(100% - 38px) !important;
padding: 12px 16px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-ai-dialog-panel:has(.velis-ai-message-bubble[data-by="agent"])::after {
margin-left: 38px !important;
}
.velis-ai-message-bubble[data-by="agent"]::before {
left: -38px !important;
width: 28px !important;
height: 28px !important;
background-size: 18px !important;
}
.velis-ai-message-bubble[data-by="agent"]:has(.velis-contact-form) {
width: calc(100% - 38px) !important;
}
.velis-ai-dialog-panel {
top: 72px !important;
}
#velis-ai-chatbot input {
font-size: 16px !important;
height: 54px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form {
padding: 18px !important;
}
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form-fields {
grid-template-columns: 1fr !important;
} .velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form input:not([type="checkbox"]),
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form select,
.velis-ai-chatbot-container-full.velis-ai-chatbot-container-full .velis-contact-form textarea {
font-size: 16px !important;
}
} @property --angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}
@keyframes gradientBorder {
from { --angle: 0turn; }
to   { --angle: 10turn; }
}
@keyframes velis-launcher-in {
from { opacity: 0; transform: translateY(12px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes velis-word-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes velis-rise-in {
from { opacity: 0; transform: translateY( 8px ); }
to   { opacity: 1; transform: translateY( 0 ); }
}
@keyframes velis-typing-bounce {
0%, 60%, 100% { transform: translateY(0);   opacity: 0.35; }
30%            { transform: translateY(-7px); opacity: 1; }
}
@keyframes velis-open-fade {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes floating {
from { transform: scale(1); }
50%  { transform: scale(1.06); }
to   { transform: scale(1); }
}