.wa-assistant { position: fixed; right: 22px; bottom: 20px; z-index: 40; font-family: "DM Sans", sans-serif; }.assistant-launcher { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border: 0; border-radius: 40px; color: #fff; background: #0b3b60; box-shadow: 0 11px 27px rgba(6, 42, 68, .32); cursor: pointer; font: 700 13px "DM Sans", sans-serif; transition: transform .2s ease, background .2s ease; }.assistant-launcher:hover { background: #1778ba; transform: translateY(-3px); }.assistant-launcher img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; object-position: center 34%; background: #dcedf7; }.assistant-panel { position: absolute; right: 0; bottom: 72px; width: min(360px, calc(100vw - 32px)); overflow: hidden; padding: 21px; border: 1px solid #d8e8ef; border-radius: 12px; color: #173c55; background: #fff; box-shadow: 0 19px 46px rgba(6, 42, 68, .24); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transition: opacity .22s ease, transform .22s ease, visibility .22s; }.wa-assistant.open .assistant-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }.assistant-close { position: absolute; top: 9px; right: 11px; border: 0; color: #627584; background: transparent; cursor: pointer; font-size: 23px; line-height: 1; }.assistant-title { display: flex; align-items: center; gap: 10px; padding-right: 24px; margin-bottom: 17px; }.assistant-title img { width: 57px; height: 57px; border-radius: 50%; object-fit: cover; object-position: center 34%; background: #e6f5fb; }.assistant-title div { display: flex; flex-direction: column; }.assistant-title span { color: #1979b7; font-size: 9px; font-weight: 700; letter-spacing: .12em; }.assistant-title strong { margin: 2px 0; font: 700 19px Manrope, sans-serif; letter-spacing: -.04em; }.assistant-title small { color: #657985; font-size: 12px; }.assistant-form { display: grid; gap: 10px; }.assistant-form label { display: grid; gap: 4px; color: #3a586b; font-size: 11px; font-weight: 700; }.assistant-form label em { color: #8c9da6; font-style: normal; font-weight: 400; }.assistant-form input, .assistant-form select, .assistant-form textarea { width: 100%; padding: 9px 10px; border: 1px solid #cfe1ea; border-radius: 4px; color: #173c55; background: #fbfdfe; font: 13px "DM Sans", sans-serif; outline: none; }.assistant-form textarea { min-height: 58px; resize: vertical; }.assistant-form input:focus, .assistant-form select:focus, .assistant-form textarea:focus { border-color: #2187c1; box-shadow: 0 0 0 3px #dceff8; }.assistant-form button { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 3px; padding: 11px; border: 0; border-radius: 4px; color: #fff; background: #1778ba; cursor: pointer; font: 700 13px "DM Sans", sans-serif; }.assistant-form button:hover { background: #0e669e; }.assistant-form button span { font-size: 17px; }.assistant-call { display: block; margin-top: 13px; color: #176b9d; text-align: center; font-size: 12px; font-weight: 700; }.bot-field { position: absolute; left: -9999px; opacity: 0; }.assistant-success { margin-bottom: 13px; padding: 10px; border-radius: 4px; color: #14663c; background: #e2f6e9; font-size: 12px; line-height: 1.45; }
.assistant-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.assistant-toggle:checked ~ .assistant-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }.assistant-toggle:checked ~ .assistant-launcher { background: #1778ba; }
.wa-assistant:not(.open) .assistant-launcher { animation: wa-dance 5.5s ease-in-out 2s infinite; }.wa-assistant:not(.open) .assistant-launcher img { animation: wa-wave 5.5s ease-in-out 2s infinite; }@keyframes wa-dance { 0%, 82%, 100% { transform: translateY(0) rotate(0); } 86% { transform: translateY(-11px) rotate(-4deg); } 90% { transform: translateY(0) rotate(4deg); } 94% { transform: translateY(-7px) rotate(-3deg); } 97% { transform: translateY(0) rotate(0); } }@keyframes wa-wave { 0%, 82%, 100% { transform: rotate(0); } 87% { transform: rotate(-10deg) scale(1.04); } 91% { transform: rotate(10deg) scale(1.04); } 95% { transform: rotate(-7deg); } }@media (prefers-reduced-motion: reduce) { .wa-assistant:not(.open) .assistant-launcher, .wa-assistant:not(.open) .assistant-launcher img { animation: none; } }
@media (max-width: 520px) { .wa-assistant { right: 14px; bottom: 14px; }.assistant-launcher span { display: none; }.assistant-launcher { padding: 5px; }.assistant-panel { bottom: 69px; right: 0; } }