.av-assist { position: fixed; right: 20px; bottom: 20px; z-index: 9000; font-family: "Poppins", "Hind Siliguri", system-ui, sans-serif; } .av-assist__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: #F96E89; color: #ffffff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 30px rgba(249, 110, 137, 0.4); } .av-assist__btn svg { width: 24px; height: 24px; } .av-assist__btn:hover { background: #EB637D; } .av-assist.is-open .av-assist__btn { display: none; } .av-assist__panel[hidden] { display: none !important; } .av-assist__panel { width: min(380px, calc(100vw - 24px)); height: min(620px, calc(100vh - 40px)); height: min(620px, calc(100dvh - 40px)); display: flex; flex-direction: column; background: #ffffff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05); } .av-assist__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: #2D3440; color: #ffffff; } .av-assist__avatar { width: 44px; height: 44px; border-radius: 50%; background: #ffffff; display: grid; place-items: center; overflow: hidden; flex: 0 0 44px; } .av-assist__avatar img { width: 36px; height: 36px; object-fit: contain; } .av-assist__hb { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .av-assist__hb strong { font-size: 15px; font-weight: 600; } .av-assist__hb span { font-size: 12px; color: rgba(255, 255, 255, 0.75); } .av-assist__hb span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #25D366; margin-right: 6px; vertical-align: middle; } .av-assist__close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #ffffff; cursor: pointer; display: grid; place-items: center; } .av-assist__close svg { width: 18px; height: 18px; } .av-assist__log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; background: #F7F7F7; display: flex; flex-direction: column; gap: 10px; } .av-assist__msg { max-width: 86%; } .av-assist__msg p { margin: 0; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; white-space: pre-line; } .av-assist__msg--bot { align-self: flex-start; } .av-assist__msg--bot p { background: #ffffff; color: #2B2B2B; border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .av-assist__msg--user { align-self: flex-end; } .av-assist__msg--user p { background: #F96E89; color: #ffffff; border-bottom-right-radius: 4px; } .av-assist__msg.is-typing p { color: #888888; font-style: italic; } .av-assist__msg.is-typing p::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: avAssistDots 1.2s steps(4) infinite; } @keyframes avAssistDots { to { content: "..."; } } .av-assist__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .av-assist__card { display: flex; flex-direction: column; gap: 4px; background: #ffffff; border-radius: 12px; padding: 8px; color: #2B2B2B; text-decoration: none; font-size: 11px; line-height: 1.3; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .av-assist__card img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #F2F2F2; border-radius: 8px; } .av-assist__card strong { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .av-assist__card span { color: #F96E89; font-weight: 600; } .av-assist__links { display: flex; flex-wrap: wrap; gap: 8px; } .av-assist__link { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #2D3440; color: #ffffff; font-size: 12px; font-weight: 500; text-decoration: none; } .av-assist__link:hover { background: #F96E89; color: #ffffff; } .av-assist__quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; background: #F7F7F7; scrollbar-width: none; } .av-assist__quick::-webkit-scrollbar { display: none; } .av-assist__quick:empty { display: none; } .av-assist__chip { flex: 0 0 auto; border: 1px solid #F96E89; border-radius: 999px; background: #ffffff; color: #F96E89; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; } .av-assist__chip:hover { background: #F96E89; color: #ffffff; } .av-assist__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #ECECEC; background: #ffffff; } .av-assist__input { flex: 1; min-width: 0; border: 1px solid #E2E2E2; border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 14px; color: #2B2B2B; background: #ffffff; } .av-assist__input:focus { outline: 2px solid #F96E89; outline-offset: 0; border-color: #F96E89; } .av-assist__send { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #F96E89; color: #ffffff; cursor: pointer; display: grid; place-items: center; flex: 0 0 42px; } .av-assist__send svg { width: 20px; height: 20px; } .av-assist__send:hover { background: #EB637D; } .av-assist__foot { display: flex; border-top: 1px solid #ECECEC; background: #ffffff; } .av-assist__fl { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; font-size: 12px; font-weight: 500; color: #2B2B2B; text-decoration: none; } .av-assist__fl + .av-assist__fl { border-left: 1px solid #ECECEC; } .av-assist__fl svg { width: 18px; height: 18px; } .av-assist__fl--wa svg { color: #25D366; } .av-assist__fl--mess svg { color: #0084FF; } .av-assist__fl--call svg { color: #F96E89; } .av-assist__fl:hover { background: #F7F7F7; color: #000000; } @media (max-width: 599.98px) { .av-assist { right: 12px; bottom: 12px; } .av-assist.is-open { left: 12px; } .av-assist__panel { width: auto; height: min(640px, calc(100dvh - 24px)); } .av-assist__cards { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { .av-assist__msg.is-typing p::after { animation: none; content: "..."; } } .av-assist__live { display: flex; align-items: center; gap: 12px; margin: 10px 14px 0; padding: 11px 14px; border-radius: 14px; background: #137A3F; color: #ffffff !important; text-decoration: none; box-shadow: 0 10px 22px -14px rgba(10, 80, 40, 0.8); transition: background 0.2s ease, transform 0.2s ease; } .av-assist__live:hover, .av-assist__live:focus-visible { background: #0F6534; transform: translateY(-1px); } .av-assist__live svg { flex: 0 0 26px; width: 26px; height: 26px; } .av-assist__live span { display: flex; flex-direction: column; line-height: 1.25; } .av-assist__live strong { font-size: 14px; font-weight: 600; } .av-assist__live small { font-size: 11.5px; opacity: 0.9; } .av-assist__live small { color: #E3F4E9 !important; opacity: 1; } .av-assist__chip { border-color: rgba(176, 141, 60, 0.6) !important; color: #806423 !important; } .av-assist__chip:hover { background: #0F0D0B !important; color: #E8C878 !important; }