.rx-chat {
--rx-chat-accent-2: #c13f1e; position: fixed !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important; z-index: 999999 !important;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
font-style: normal !important;
} .rx-chat--bottom-right { right: var(--rx-chat-x, 20px) !important; bottom: var(--rx-chat-y, 20px) !important; }
.rx-chat--bottom-left  { left:  var(--rx-chat-x, 20px) !important; bottom: var(--rx-chat-y, 20px) !important; align-items: flex-start !important; }
.rx-chat--top-right    { right: var(--rx-chat-x, 20px) !important; top:    var(--rx-chat-y, 20px) !important; flex-direction: column-reverse !important; }
.rx-chat--top-left     { left:  var(--rx-chat-x, 20px) !important; top:    var(--rx-chat-y, 20px) !important; flex-direction: column-reverse !important; align-items: flex-start !important; } .rx-chat .rx-chat__toggle {
-webkit-appearance: none !important;
appearance: none !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: var(--rx-chat-size, 60px) !important;
height: var(--rx-chat-size, 60px) !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
border-radius: 50% !important;
background: linear-gradient(150deg, var(--rx-chat-accent, #dc4f2c) 0%, var(--rx-chat-accent-2) 100%) !important;
color: #fff !important;
cursor: pointer !important;
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
0 12px 32px rgba(0, 0, 0, 0.35),
0 0 32px rgba(220, 79, 44, 0.35) !important;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
-webkit-tap-highlight-color: transparent;
}
.rx-chat .rx-chat__toggle:hover,
.rx-chat .rx-chat__toggle:focus-visible {
background: linear-gradient(150deg, var(--rx-chat-accent, #dc4f2c) 0%, var(--rx-chat-accent-2) 100%) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.05) !important;
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
0 16px 40px rgba(0, 0, 0, 0.4),
0 0 48px rgba(220, 79, 44, 0.5) !important;
}
.rx-chat .rx-chat__toggle:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.9) !important;
outline-offset: 3px !important;
}
.rx-chat .rx-chat__toggle svg {
width: 46% !important;
height: 46% !important;
display: block !important;
} .rx-chat .rx-chat__glyph-bubble { fill: #fff !important; }
.rx-chat .rx-chat__glyph-dot { fill: var(--rx-chat-accent, #dc4f2c) !important; } .rx-chat--single .rx-chat__toggle--wa {
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
border-radius: 50% !important;
background: linear-gradient(150deg, #2ce072 0%, #1faf55 100%) !important;
color: #fff !important;
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
0 12px 32px rgba(0, 0, 0, 0.35) !important;
}
.rx-chat--single .rx-chat__toggle--wa svg { width: 56% !important; height: 56% !important; fill: #fff !important; }
.rx-chat--single a {
display: block !important;
width: var(--rx-chat-size, 60px) !important;
height: var(--rx-chat-size, 60px) !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.rx-chat--single a:hover { transform: translateY(-2px) scale(1.05) !important; } .rx-chat .rx-chat__icon {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.rx-chat .rx-chat__icon--close { opacity: 0; transform: rotate(-45deg) scale(0.5); }
.rx-chat .rx-chat__icon--close svg { fill: #fff !important; }
.rx-chat.rx-chat--open .rx-chat__icon--chat { opacity: 0; transform: rotate(45deg) scale(0.5); }
.rx-chat.rx-chat--open .rx-chat__icon--close { opacity: 1; transform: none; } .rx-chat .rx-chat__panel {
position: relative !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
box-sizing: border-box !important;
width: min(320px, calc(100vw - 2 * var(--rx-chat-x, 20px))) !important;
margin: 0 !important;
padding: 20px !important;
border: 0 !important;
border-radius: 20px !important;
background:
radial-gradient(circle 220px at calc(100% + 40px) -40px, rgba(220, 79, 44, 0.22) 0%, transparent 65%),
linear-gradient(175deg, rgba(11, 16, 35, 0.92) 0%, rgba(7, 10, 24, 0.94) 100%) !important;
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
0 24px 64px rgba(0, 0, 0, 0.45) !important;
transform-origin: bottom right;
animation: rx-chat-pop 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rx-chat .rx-chat__panel[hidden] { display: none !important; } .rx-chat .rx-chat__panel::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(220, 79, 44, 0.45) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.rx-chat--bottom-left .rx-chat__panel { transform-origin: bottom left; }
.rx-chat--top-right .rx-chat__panel { transform-origin: top right; }
.rx-chat--top-left .rx-chat__panel { transform-origin: top left; }
@keyframes rx-chat-pop {
from { opacity: 0; transform: translateY(10px) scale(0.95); }
to   { opacity: 1; transform: none; }
}
.rx-chat .rx-chat__heading {
margin: 0 0 6px !important;
padding: 0 !important;
color: #fff !important;
font-family: inherit !important;
font-size: 15px !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1.35 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
} .rx-chat .rx-chat__option {
-webkit-appearance: none !important;
appearance: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important;
box-sizing: border-box !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 12px 14px !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 14px !important;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
color: #fff !important;
text-decoration: none !important;
text-transform: none !important;
cursor: pointer !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.3 !important;
letter-spacing: normal !important;
text-align: left !important;
text-shadow: none !important;
box-shadow: none !important;
transition: background 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease !important;
-webkit-tap-highlight-color: transparent;
}
.rx-chat .rx-chat__option:hover,
.rx-chat .rx-chat__option:focus-visible {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
transform: translateY(-1px) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
color: #fff !important;
}
.rx-chat .rx-chat__option:focus-visible {
outline: 2px solid var(--rx-chat-accent, #dc4f2c) !important;
outline-offset: 2px !important;
}
.rx-chat .rx-chat__option-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 40px !important;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 12px !important;
color: #fff !important;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22) !important;
}
.rx-chat .rx-chat__option-icon svg { width: 22px !important; height: 22px !important; fill: currentColor !important; display: block !important; }
.rx-chat .rx-chat__option--live .rx-chat__option-icon {
background: linear-gradient(150deg, var(--rx-chat-accent, #dc4f2c) 0%, var(--rx-chat-accent-2) 100%) !important;
}
.rx-chat .rx-chat__option--wa .rx-chat__option-icon {
background: linear-gradient(150deg, #2ce072 0%, #1faf55 100%) !important;
}
.rx-chat .rx-chat__option-text {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
text-align: left !important;
}
.rx-chat .rx-chat__option-text strong {
font-weight: 600 !important;
font-style: normal !important;
font-size: 14px !important;
color: #fff !important;
letter-spacing: 0.01em !important;
}
.rx-chat .rx-chat__option-text small {
font-size: 12px !important;
font-weight: 400 !important;
font-style: normal !important;
color: rgba(255, 255, 255, 0.6) !important;
letter-spacing: normal !important;
} @media (max-width: 767px) {
.rx-chat--show-desktop { display: none !important; }
}
@media (min-width: 768px) {
.rx-chat--show-mobile { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.rx-chat .rx-chat__toggle,
.rx-chat .rx-chat__icon,
.rx-chat .rx-chat__option,
.rx-chat--single a { transition: none !important; }
.rx-chat .rx-chat__panel { animation: none !important; }
.rx-chat .rx-chat__toggle:hover,
.rx-chat .rx-chat__toggle:focus-visible,
.rx-chat--single a:hover { transform: none !important; }
}