#rwc-root,
#rwc-root * {
box-sizing: border-box;
}
#rwc-root {
--rwc-primary: #5b3df0;
--rwc-primary-dark: #4527d6;
--rwc-bg: #ffffff;
--rwc-bg-soft: #f6f5fb;
--rwc-bot-bubble: #f1f0f8;
--rwc-text: #20212b;
--rwc-text-light: #6b6d80;
--rwc-border: #e7e6f2;
--rwc-radius: 18px;
--rwc-shadow: 0 18px 50px rgba(31, 26, 64, 0.18), 0 2px 8px rgba(31, 26, 64, 0.08);
position: fixed;
bottom: 24px;
z-index: 999999;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.45;
color: var(--rwc-text);
}
#rwc-root.rwc-bottom-right {
right: 24px;
}
#rwc-root.rwc-bottom-left {
left: 24px;
} .rwc-toggle {
width: 60px;
height: 60px;
min-width: 60px;
padding: 0;
border-radius: 50%;
border: none;
background: linear-gradient(145deg, var(--rwc-primary), var(--rwc-primary-dark));
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: var(--rwc-shadow);
transition: transform 0.18s ease, box-shadow 0.18s ease, padding 0.18s ease, border-radius 0.18s ease, width 0.18s ease;
position: relative;
z-index: 2;
}
.rwc-toggle.rwc-has-label {
width: auto;
padding: 0 20px 0 16px;
border-radius: 34px;
}
.rwc-toggle:hover {
transform: translateY(-2px) scale(1.03);
}
.rwc-toggle:active {
transform: scale(0.97);
}
.rwc-toggle-icon-wrap {
position: relative;
width: 26px;
height: 26px;
flex-shrink: 0;
}
.rwc-icon {
width: 26px;
height: 26px;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.rwc-icon-img {
object-fit: contain;
}
.rwc-icon-close {
opacity: 0;
transform: rotate(-45deg) scale(0.7);
}
.rwc-toggle-text {
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
#rwc-root.rwc-open .rwc-icon-main {
opacity: 0;
transform: rotate(45deg) scale(0.7);
}
#rwc-root.rwc-open .rwc-icon-close {
opacity: 1;
transform: rotate(0) scale(1);
}
#rwc-root.rwc-open .rwc-toggle.rwc-has-label {
padding: 0;
width: 60px;
border-radius: 50%;
}
#rwc-root.rwc-open .rwc-toggle-text {
display: none;
} .rwc-toggle.rwc-pulse::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--rwc-primary);
opacity: 0.5;
z-index: -1;
pointer-events: none;
animation: rwc-pulse-ring 2.4s ease-out infinite;
}
@keyframes rwc-pulse-ring {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
#rwc-root.rwc-open .rwc-toggle.rwc-pulse::after {
animation: none;
opacity: 0;
} .rwc-panel {
position: absolute;
bottom: 76px;
width: 380px;
max-width: calc(100vw - 32px);
height: 560px;
max-height: calc(100vh - 140px);
background: var(--rwc-bg);
border-radius: var(--rwc-radius);
box-shadow: var(--rwc-shadow);
display: flex;
flex-direction: column;
overflow: hidden;
transform-origin: bottom right;
transition: opacity 0.18s ease, transform 0.18s ease;
opacity: 1;
transform: scale(1) translateY(0);
}
#rwc-root.rwc-bottom-right .rwc-panel {
right: 0;
transform-origin: bottom right;
}
#rwc-root.rwc-bottom-left .rwc-panel {
left: 0;
transform-origin: bottom left;
}
.rwc-panel.rwc-hidden {
opacity: 0;
transform: scale(0.92) translateY(12px);
pointer-events: none;
} .rwc-header {
background: linear-gradient(135deg, var(--rwc-primary), var(--rwc-primary-dark));
color: #fff;
padding: 16px 18px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.rwc-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.rwc-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.rwc-title {
font-weight: 600;
font-size: 14.5px;
}
.rwc-subtitle {
font-size: 12px;
opacity: 0.85;
display: flex;
align-items: center;
gap: 5px;
margin-top: 1px;
}
.rwc-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ade80;
display: inline-block;
}
.rwc-restart {
background: rgba(255, 255, 255, 0.16);
border: none;
color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, transform 0.4s ease;
}
.rwc-restart:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(-90deg);
} .rwc-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
background: var(--rwc-bg-soft);
}
.rwc-msg {
display: flex;
width: 100%;
}
.rwc-msg.rwc-bot {
justify-content: flex-start;
}
.rwc-msg.rwc-user {
justify-content: flex-end;
}
.rwc-bubble {
max-width: 86%;
padding: 10px 13px;
border-radius: 14px;
font-size: 13.5px;
word-wrap: break-word;
}
.rwc-bot .rwc-bubble {
background: var(--rwc-bot-bubble);
color: var(--rwc-text);
border-bottom-left-radius: 4px;
}
.rwc-user .rwc-bubble {
background: var(--rwc-primary);
color: #fff;
border-bottom-right-radius: 4px;
} .rwc-typing {
display: flex;
align-items: center;
gap: 4px;
padding: 12px 14px;
}
.rwc-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rwc-text-light);
display: inline-block;
animation: rwc-bounce 1.2s infinite ease-in-out;
}
.rwc-typing span:nth-child(2) {
animation-delay: 0.15s;
}
.rwc-typing span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes rwc-bounce {
0%, 60%, 100% {
transform: translateY(0);
opacity: 0.5;
}
30% {
transform: translateY(-4px);
opacity: 1;
}
} .rwc-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-left: 2px;
max-width: 92%;
}
.rwc-option-btn {
background: #fff;
border: 1.5px solid var(--rwc-primary);
color: var(--rwc-primary);
border-radius: 20px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.rwc-option-btn:hover:not(:disabled) {
background: var(--rwc-primary);
color: #fff;
}
.rwc-option-btn:active:not(:disabled) {
transform: scale(0.97);
}
.rwc-options.rwc-locked .rwc-option-btn {
opacity: 0.45;
cursor: default;
} .rwc-products {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 94%;
}
.rwc-product-card {
background: #fff;
border: 1px solid var(--rwc-border);
border-radius: 12px;
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.rwc-product-card:hover {
box-shadow: 0 6px 18px rgba(31, 26, 64, 0.1);
transform: translateY(-1px);
}
.rwc-product-img {
width: 44px;
height: 44px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
background: var(--rwc-bg-soft);
}
.rwc-product-info {
flex: 1;
min-width: 0;
}
.rwc-product-name {
font-weight: 600;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rwc-product-price {
font-size: 12.5px;
color: var(--rwc-primary);
font-weight: 600;
margin-top: 2px;
}
.rwc-select-btn {
background: var(--rwc-primary);
color: #fff;
border: none;
border-radius: 8px;
padding: 7px 12px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease;
}
.rwc-select-btn:hover:not(:disabled) {
background: var(--rwc-primary-dark);
}
.rwc-products.rwc-locked .rwc-select-btn,
.rwc-products.rwc-locked .rwc-product-card {
opacity: 0.45;
} .rwc-form {
background: #fff;
border: 1px solid var(--rwc-border);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 94%;
width: 100%;
}
.rwc-form-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.rwc-form-row label {
font-size: 12px;
font-weight: 600;
color: var(--rwc-text-light);
}
.rwc-form-row input {
border: 1.5px solid var(--rwc-border);
border-radius: 8px;
padding: 9px 10px;
font-size: 13.5px;
color: var(--rwc-text);
background: #fff;
width: 100%;
}
.rwc-form-row input:focus {
outline: none;
border-color: var(--rwc-primary);
box-shadow: 0 0 0 3px rgba(91, 61, 240, 0.12);
}
.rwc-form-error {
font-size: 12.5px;
color: #d92d20;
background: #fef3f2;
border: 1px solid #fecdca;
border-radius: 8px;
padding: 8px 10px;
}
.rwc-pay-btn {
background: linear-gradient(135deg, var(--rwc-primary), var(--rwc-primary-dark));
color: #fff;
border: none;
border-radius: 10px;
padding: 11px 14px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 2px;
transition: opacity 0.15s ease, transform 0.1s ease;
}
.rwc-pay-btn:hover:not(:disabled) {
opacity: 0.92;
}
.rwc-pay-btn:active:not(:disabled) {
transform: scale(0.98);
}
.rwc-pay-btn:disabled {
opacity: 0.6;
cursor: default;
} .rwc-messages::-webkit-scrollbar {
width: 6px;
}
.rwc-messages::-webkit-scrollbar-thumb {
background: rgba(31, 26, 64, 0.18);
border-radius: 10px;
} @media (max-width: 480px) {
#rwc-root.rwc-bottom-right,
#rwc-root.rwc-bottom-left {
right: 16px;
left: auto;
bottom: 16px;
}
.rwc-panel {
position: fixed;
inset: 0;
bottom: 0;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
transform-origin: center bottom;
}
.rwc-toggle {
position: relative;
z-index: 1000000;
}
.rwc-toggle.rwc-has-label {
max-width: calc(100vw - 64px);
}
.rwc-toggle-text {
overflow: hidden;
text-overflow: ellipsis;
max-width: 50vw;
}
} @media (prefers-reduced-motion: reduce) {
.rwc-panel,
.rwc-toggle,
.rwc-icon,
.rwc-restart,
.rwc-product-card {
transition: none !important;
}
.rwc-typing span,
.rwc-toggle.rwc-pulse::after {
animation: none !important;
}
.rwc-toggle.rwc-pulse::after {
opacity: 0 !important;
}
}