.levachat-widget {
--levachat-accent: #38afff;
--levachat-panel-bg: #10151d;
--levachat-panel-border: rgba(255, 255, 255, 0.14);
--levachat-tooltip-text: #fff;
position: fixed;
right: calc(29px + env(safe-area-inset-right));
bottom: calc(25px + env(safe-area-inset-bottom));
z-index: 9999;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
font-family: inherit;
}
.levachat-widget__panel {
display: grid;
gap: 10px;
opacity: 0;
transform: translateY(8px);
transition:
opacity 180ms ease,
transform 180ms ease;
pointer-events: none;
}
.levachat-widget__panel[hidden] {
display: none;
}
.levachat-widget.is-open .levachat-widget__panel {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.levachat-widget__trigger {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
transform-origin: right center;
}
.levachat-widget.is-ready:not(.has-interacted) .levachat-widget__trigger {
animation: levachat-trigger-entry 680ms cubic-bezier(0.2, 1.55, 0.35, 1) 220ms both;
}
.levachat-widget__label {
position: relative;
min-height: 34px;
padding: 0 14px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
display: none;
align-items: center;
justify-content: center;
background: #fff;
color: #32343a;
box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.45);
font-size: 15px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
pointer-events: none;
}
.levachat-widget.is-ready:not(.has-interacted) .levachat-widget__label,
.levachat-widget.is-open .levachat-widget__label {
display: inline-flex;
}
.levachat-widget.is-ready:not(.has-interacted) .levachat-widget__label {
animation: levachat-label-entry 520ms ease 380ms both;
}
.levachat-widget__label::after {
content: "";
position: absolute;
top: 50%;
right: -5px;
width: 10px;
height: 10px;
background: #fff;
border-top: 1px solid rgba(0, 0, 0, 0.08);
border-right: 1px solid rgba(0, 0, 0, 0.08);
transform: translateY(-50%) rotate(45deg);
}
.levachat-widget__label-text--close {
display: none;
}
.levachat-widget.is-open .levachat-widget__label-text--open {
display: none;
}
.levachat-widget.is-open .levachat-widget__label-text--close {
display: inline;
}
.levachat-widget.has-interacted:not(.is-open) .levachat-widget__label {
display: none;
}
.levachat-widget__toggle,
.levachat-widget__link {
position: relative;
--levachat-icon-size: 25px;
--levachat-icon-offset-x: 0;
--levachat-icon-offset-y: 0;
width: 54px;
height: 54px;
border: 0;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
background: var(--levachat-accent);
text-decoration: none;
cursor: pointer;
line-height: 0;
box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.55);
transition:
transform 150ms ease,
box-shadow 150ms ease,
filter 150ms ease;
}
.levachat-widget__toggle {
overflow: hidden;
flex: 0 0 auto;
}
.levachat-widget.is-ready:not(.has-interacted) .levachat-widget__toggle {
animation: levachat-toggle-bounce 1300ms ease 900ms 2;
}
.levachat-widget__toggle:hover,
.levachat-widget__link:hover,
.levachat-widget__toggle:focus-visible,
.levachat-widget__link:focus-visible {
transform: translateY(-2px);
box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.6);
filter: saturate(1.08);
}
.levachat-widget__toggle:focus-visible,
.levachat-widget__link:focus-visible {
outline: 2px solid var(--levachat-accent);
outline-offset: 3px;
}
.levachat-widget__toggle svg,
.levachat-widget__link svg {
display: block;
overflow: visible;
fill: currentColor;
transform: translate(
var(--levachat-icon-offset-x),
var(--levachat-icon-offset-y)
);
}
.levachat-widget__toggle svg {
--levachat-icon-size: 28.3px;
--levachat-icon-offset-y: 0;
width: var(--levachat-icon-size);
height: var(--levachat-icon-size);
}
.levachat-widget__toggle .levachat-widget__toggle-icon {
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
pointer-events: none;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
transition:
opacity 180ms ease,
transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1.35);
}
.levachat-widget__toggle .levachat-widget__toggle-icon--close {
opacity: 0;
transform: translate(-50%, -50%) scale(0.35) rotate(-135deg);
}
.levachat-widget.is-open .levachat-widget__toggle-icon--open {
opacity: 0;
transform: translate(-50%, -50%) scale(0.35) rotate(135deg);
}
.levachat-widget.is-open .levachat-widget__toggle-icon--close {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.levachat-widget__link svg {
width: var(--levachat-icon-size);
height: var(--levachat-icon-size);
}
.levachat-widget__link--facebook {
--levachat-icon-size: 24px;
--levachat-icon-offset-y: -0.5px;
}
.levachat-widget__link--instagram {
--levachat-icon-size: 27px;
--levachat-icon-offset-x: -0.5px;
--levachat-icon-offset-y: -0.5px;
}
.levachat-widget__link--phone {
--levachat-icon-size: 24px;
--levachat-icon-offset-x: 0.5px;
}
.levachat-widget__link--linkedin {
--levachat-icon-size: 25px;
--levachat-icon-offset-y: -0.5px;
}
.levachat-widget__link--viber {
--levachat-icon-size: 30px;
}
.levachat-widget__link--messenger {
background: linear-gradient(135deg, #00b2ff, #006aff);
}
.levachat-widget__link--facebook {
background: #1877f2;
}
.levachat-widget__link--instagram,
.levachat-widget__link--instagram-profile {
background:
radial-gradient(circle at 28% 105%, #feda75 0 18%, transparent 38%),
linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af 70%, #515bd4);
}
.levachat-widget__link--whatsapp {
background: #25d366;
--levachat-icon-size: 28px;
}
.levachat-widget__link--phone {
background: #38afff;
}
.levachat-widget__link--email {
background: #ff4f6d;
}
.levachat-widget__link--x {
background: #111113;
}
.levachat-widget__link--telegram {
background: #229ed9;
}
.levachat-widget__link--linkedin {
background: #0a66c2;
}
.levachat-widget__link--viber {
background: #7360f2;
}
.levachat-widget__link::after {
content: attr(data-tooltip);
position: absolute;
right: calc(100% + 10px);
top: 50%;
max-width: min(220px, calc(100vw - 96px));
padding: 7px 10px;
border: 1px solid var(--levachat-panel-border);
border-radius: 8px;
background: var(--levachat-panel-bg);
color: var(--levachat-tooltip-text);
box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.45);
font-size: 13px;
line-height: 1;
white-space: nowrap;
opacity: 0;
transform: translate(6px, -50%);
pointer-events: none;
transition:
opacity 150ms ease,
transform 150ms ease;
}
.levachat-widget__link:hover::after,
.levachat-widget__link:focus-visible::after {
opacity: 1;
transform: translate(0, -50%);
}
.levachat-widget.is-open .levachat-widget__link {
animation: levachat-link-pop 280ms cubic-bezier(0.2, 1.25, 0.35, 1) backwards;
}
.levachat-widget.is-open .levachat-widget__link:nth-child(2) {
animation-delay: 45ms;
}
.levachat-widget.is-open .levachat-widget__link:nth-child(3) {
animation-delay: 90ms;
}
.levachat-widget.is-open .levachat-widget__link:nth-child(4) {
animation-delay: 135ms;
}
.levachat-widget.is-open .levachat-widget__link:nth-child(5) {
animation-delay: 180ms;
}
.levachat-widget.is-open .levachat-widget__link:nth-child(6) {
animation-delay: 225ms;
}
.levachat-widget.is-open .levachat-widget__link:nth-child(7) {
animation-delay: 270ms;
}
.levachat-widget.is-open .levachat-widget__link:nth-child(8) {
animation-delay: 315ms;
}
.levachat-widget.is-open .levachat-widget__link:nth-child(9) {
animation-delay: 360ms;
}
.levachat-widget.is-open .levachat-widget__link:nth-child(10) {
animation-delay: 405ms;
}
.levachat-widget.is-open .levachat-widget__link:nth-child(11) {
animation-delay: 450ms;
}
@keyframes levachat-trigger-entry {
0% {
opacity: 0;
transform: translateY(18px) scale(0.68);
}
58% {
opacity: 1;
transform: translateY(-7px) scale(1.06);
}
78% {
transform: translateY(2px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes levachat-label-entry {
0% {
opacity: 0;
transform: translateX(10px) scale(0.96);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes levachat-toggle-bounce {
0%,
100% {
transform: translateY(0) scale(1);
}
22% {
transform: translateY(-5px) scale(1.06);
}
42% {
transform: translateY(2px) scale(0.98);
}
60% {
transform: translateY(-2px) scale(1.02);
}
78% {
transform: translateY(0) scale(1);
}
}
@keyframes levachat-link-pop {
0% {
opacity: 0;
transform: translateY(10px) scale(0.72);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.levachat-widget__trigger,
.levachat-widget__label,
.levachat-widget__toggle,
.levachat-widget.is-open .levachat-widget__link {
animation: none;
}
.levachat-widget__toggle-icon,
.levachat-widget__panel {
transition: none;
}
}
@media (max-width: 640px) {
.levachat-widget {
right: calc(28px + env(safe-area-inset-right));
bottom: calc(27px + env(safe-area-inset-bottom));
gap: 10px;
}
.levachat-widget__panel {
gap: 8px;
}
.levachat-widget__label {
min-height: 33px;
padding: 0 13px;
font-size: 15px;
}
.levachat-widget__toggle,
.levachat-widget__link {
width: 54px;
height: 54px;
}
.levachat-widget__toggle svg {
width: 28.3px;
height: 28.3px;
}
.levachat-widget__link {
--levachat-icon-size: 25px;
}
.levachat-widget__link--instagram {
--levachat-icon-size: 27px;
}
.levachat-widget__link--whatsapp {
--levachat-icon-size: 28px;
}
.levachat-widget__link--viber {
--levachat-icon-size: 30px;
}
}