:root { --fw-wa-green: #25D366; --fw-wa-dark: #075E54; --fw-wa-text: #18201f; }
#fw-whatsapp-wrapper { position: fixed; bottom: 22px; z-index: 999999; display: flex; flex-direction: column; gap: 10px; font-family: Montserrat, Arial, sans-serif; }
#fw-whatsapp-wrapper.position-right { right: 22px; align-items: flex-end; }
#fw-whatsapp-wrapper.position-left { left: 22px; align-items: flex-start; }
#fw-whatsapp-button { width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; background: var(--fw-brand-color, #25D366); box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition: transform .22s ease, box-shadow .22s ease; }
#fw-whatsapp-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.13); }
#fw-whatsapp-button:focus-visible, .fw-wa-agent-card:focus-visible, .fw-wa-qq-chip:focus-visible, .fw-bubble-close:focus-visible, .fw-wa-close-panel:focus-visible { outline: 3px solid rgba(37,211,102,.35); outline-offset: 3px; }
.whatsapp-ico { width: 31px; height: 31px; display:block; object-fit:contain; }
#fw-whatsapp-button::after { content:''; position:absolute; width:9px; height:9px; right:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--fw-brand-color, #25D366); }

#fw-whatsapp-bubble { max-width: 270px; background:#fff; color:#2f3836; padding:11px 37px 11px 15px; border-radius:13px; box-shadow:0 8px 24px rgba(0,0,0,.13); border:1px solid rgba(0,0,0,.06); font-size:13px; line-height:1.4; font-weight:600; position:relative; cursor:pointer; opacity:0; transform:translateY(5px); pointer-events:none; transition:opacity .22s ease, transform .22s ease; }
#fw-whatsapp-bubble.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.position-right #fw-whatsapp-bubble::after { content:''; position:absolute; bottom:-7px; right:19px; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #fff; }
.position-left #fw-whatsapp-bubble::after { content:''; position:absolute; bottom:-7px; left:19px; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #fff; }
.fw-bubble-close { position:absolute; top:2px; right:7px; border:0; background:transparent; padding:3px; color:#8b9693; font-size:18px; line-height:1; cursor:pointer; }

#fw-wa-panel[hidden] { display:none !important; }
#fw-wa-panel { width:340px; background:#fff; border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.2); border:1px solid rgba(7,94,84,.08); overflow:hidden; transform-origin:bottom right; opacity:0; visibility:hidden; transform:translateY(12px) scale(.97); transition:opacity .2s ease, visibility .2s ease, transform .2s ease; }
#fw-wa-panel.is-open { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.position-left #fw-wa-panel { transform-origin:bottom left; }
.fw-wa-panel-header { color:#fff; padding:17px 18px 15px; position:relative; background:linear-gradient(135deg,#075E54,#128C7E); }
.fw-wa-heading { padding-right:34px; }
.fw-wa-title { font-weight:700; font-size:15px; letter-spacing:.1px; }
.fw-wa-subtitle { font-size:11px; opacity:.86; margin-top:3px; }
.fw-wa-live-status { display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-size:11px; font-weight:600; opacity:.96; }
.fw-wa-live-status.is-offline { opacity:.82; }
.fw-wa-live-dot { width:7px; height:7px; border-radius:50%; background:#25D366; box-shadow:0 0 0 3px rgba(37,211,102,.18); }
.is-offline .fw-wa-live-dot { background:#d7dbd9; box-shadow:none; }
.fw-wa-close-panel { position:absolute; right:12px; top:11px; border:0; background:transparent; color:#fff; font-size:25px; line-height:1; cursor:pointer; opacity:.82; padding:3px 7px; }
.fw-wa-panel-body { padding:15px; background:#fafcfb; }
.fw-wa-offline-alert { background:#fff6e8; color:#7d5b18; padding:10px 11px; border-radius:9px; font-size:11px; line-height:1.45; text-align:center; margin-bottom:13px; font-weight:600; }
.fw-wa-intro { font-size:12px; color:#5d6764; margin:0 0 11px; line-height:1.45; }
.fw-wa-agent-card { width:100%; background:#fff; color:inherit; border:1px solid #e4e9e7; border-radius:12px; padding:11px; display:flex; align-items:center; gap:11px; margin:0 0 9px; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; text-align:left; }
.fw-wa-agent-card:hover { border-color:#b9ded0; transform:translateY(-1px); box-shadow:0 5px 15px rgba(0,0,0,.07); }
.fw-wa-avatar { position:relative; width:43px; height:43px; flex:0 0 43px; }
.fw-wa-avatar img, .fw-wa-avatar-fallback { width:100%; height:100%; border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center; }
.fw-wa-avatar-fallback { background:#e7f7ef; color:#075E54; font-size:12px; font-weight:800; letter-spacing:.3px; }
.fw-wa-status-dot { position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; background:#25D366; border:2px solid #fff; border-radius:50%; }
.fw-wa-info { min-width:0; flex:1; }
.fw-wa-info h4 { margin:0 0 3px; font-size:13px; color:#26302e; font-weight:700; }
.fw-wa-info p { margin:0; font-size:11px; color:#7a8481; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fw-wa-agent-action { flex:0 0 auto; padding:6px 9px; border-radius:13px; background:#eaf8f0; color:#075E54; font-size:10px; font-weight:800; }
.fw-wa-quick-questions { margin-top:13px; border-top:1px solid #e7ecea; padding-top:12px; }
.fw-wa-qq-title { font-size:10px; color:#7f8986; margin:0 0 8px; text-transform:uppercase; letter-spacing:.55px; font-weight:800; }
.fw-wa-qq-list { display:flex; flex-wrap:wrap; gap:6px; }
.fw-wa-qq-chip { background:#fff; color:#075E54; font-size:11px; line-height:1.25; padding:7px 10px; border-radius:14px; cursor:pointer; transition:all .18s ease; border:1px solid #cce7da; }
.fw-wa-qq-chip:hover { background:#eefaf4; border-color:#a7d9c4; }
.fw-product-wa-container { margin-top:12px; }
.fw-product-wa-btn { min-height:44px; padding:10px 15px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:7px; border:0; background:#25D366; color:#fff !important; font-weight:700; text-decoration:none !important; box-shadow:0 4px 10px rgba(37,211,102,.18); transition:transform .18s ease, box-shadow .18s ease; }
.fw-product-wa-btn:hover { transform:translateY(-1px); box-shadow:0 6px 14px rgba(37,211,102,.23); }
.fw-product-wa-icon { width:20px; height:20px; display:block; }
.fw-product-wa-icon svg { width:100%; height:100%; fill:#fff; display:block; }
@media (prefers-reduced-motion: reduce) { #fw-whatsapp-button, #fw-whatsapp-bubble, #fw-wa-panel, .fw-wa-agent-card, .fw-wa-qq-chip, .fw-product-wa-btn { transition:none !important; } }
@media (max-width: 400px) { #fw-whatsapp-wrapper { bottom:14px; } #fw-whatsapp-wrapper.position-right { right:14px; } #fw-whatsapp-wrapper.position-left { left:14px; } #fw-wa-panel { width:min(340px, calc(100vw - 28px)); } }
@media (max-width: 360px) { #fw-wa-panel { width:calc(100vw - 20px); } #fw-whatsapp-wrapper.position-right { right:10px; } #fw-whatsapp-wrapper.position-left { left:10px; } }