:root{--w:#fff}
.avo { position: fixed; left: 12px; bottom: 16px; z-index: 55; width: 78px; cursor: pointer; transform: translateY(150%); transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.avo.in { transform: translateY(0px); }
.avo svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(rgba(21, 19, 15, 0.26) 0px 12px 20px); }
@keyframes float { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}
.avo.in .body { animation: 4s ease-in-out 0s infinite normal none running float; transform-origin: 50% 96%; }
@keyframes jump { 
  0%, 100% { transform: translateY(0px) scale(1, 1); }
  30% { transform: translateY(-30px) scale(0.95, 1.1); }
  50% { transform: translateY(0px) scale(1.06, 0.94); }
  70% { transform: translateY(-14px); }
}
.avo.happy .body { animation: 1.1s cubic-bezier(0.3, 0.7, 0.4, 1) 0s 2 normal none running jump; }
.avo.happy .halo { opacity: 1; }
.avo.eyes .glasses { transform: translateY(-44px) rotate(-3deg); }
.avo.eyes .eye, .avo.eyes .pupil { opacity: 1; }
.bub { position: absolute; left: 70px; bottom: 90px; width: max-content; max-width: 230px; background: var(--w); border: 2px solid var(--ink); border-radius: 16px 16px 16px 4px; padding: 11px 15px; font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(8px) scale(0.9); transform-origin: 0px 100%; transition: 0.35s; pointer-events: none; }
.bub.show { opacity: 1; transform: none; }
@media (max-width: 900px){.avo { width: 60px; left: 8px; bottom: 84px; }}
@media (max-width: 900px){.bub { left: 52px; bottom: 70px; max-width: 46vw; font-size: 12px; }}
.avo { pointer-events: none; }
.avo svg * { pointer-events: auto; }
.avo .avo-card, .avo .avo-card * { pointer-events: auto; }
@media (max-width: 900px){.avo { width: 52px; }}
@media (max-width: 520px){.avo { width: 32px; left: 4px; bottom: 8px; }}
@media (max-width: 520px){.bub { display: none; }}
@media (max-width: 520px){body:has(.sticky.show) .avo { bottom: 88px; }}
#avo svg { transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
#avo.sad svg { transform: translateY(10px) rotate(-7deg) scale(0.94); }
#avo.curious svg { transform: rotate(7deg); }
#avo.wow svg { transform: scale(1.1) translateY(-6px); }
#avo.love svg { transform: scale(1.05); }
#avo.sleepy svg { animation: 3.2s ease-in-out 0s infinite normal none running avoBob; }
#avo .fx { position: absolute; inset: 0px; pointer-events: none; overflow: visible; }
#avo .fx i { position: absolute; font-style: normal; font-size: 20px; opacity: 0; will-change: transform, opacity; }
#avo .avo-card { position: absolute; bottom: calc(100% + 14px); left: 0px; right: auto; width: 246px; background: rgb(255, 255, 255); border: 2px solid rgb(21, 19, 15); border-radius: 18px; padding: 16px; box-shadow: rgba(21, 19, 15, 0.18) 0px 14px 34px; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.96); transform-origin: left bottom; transition: opacity 0.22s, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3), visibility 0.22s; font-family: Manrope, system-ui, sans-serif; text-align: left; z-index: 5; }
#avo .avo-card.open { opacity: 1; visibility: visible; transform: translateY(0px) scale(1); }
#avo .avo-card h4 { margin: 0px 0px 3px; font-size: 15px; font-weight: 800; color: rgb(21, 19, 15); line-height: 1.25; }
#avo .avo-card p { margin: 0px 0px 13px; font-size: 12.5px; line-height: 1.45; color: rgb(111, 106, 92); }
#avo .avo-card a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 7px; border: 1.5px solid rgb(21, 19, 15); border-radius: 999px; font-size: 13.5px; font-weight: 700; color: rgb(21, 19, 15); text-decoration: none; transition: background 0.18s, color 0.18s; }
#avo .avo-card a:hover { background: rgb(21, 19, 15); color: rgb(246, 241, 226); }
#avo .avo-card a b { margin-left: auto; font-weight: 700; opacity: 0.55; font-size: 11.5px; }
#avo .avo-card a:hover b { opacity: 0.8; }
#avo .avo-card a svg { width: 17px; height: 17px; flex: 0 0 17px; }
#avo .avo-card .x { position: absolute; top: 9px; right: 11px; border: 0px; background: none; cursor: pointer; font-size: 19px; line-height: 1; color: rgb(111, 106, 92); padding: 2px; }
#avo .avo-card .x:hover { color: rgb(21, 19, 15); }
#avo .avo-card a.tel { letter-spacing: -0.01em; }
@media (max-width: 520px){#avo .avo-card { width: 216px; }}
@media (max-width: 520px){#avo .avo-card a { font-size: 12.5px; padding: 8px 10px; gap: 7px; }}
@media (max-width: 520px){#avo .avo-card a b { font-size: 10.5px; }}
@media (max-width: 520px){#avo, .avo { width: 32px !important; left: 4px !important; bottom: 8px !important; }}
@media (max-width: 520px){body:has(.sticky.show) #avo, body:has(.sticky.show) .avo { bottom: 88px !important; }}
.avo { left: auto; right: 12px; }
.bub { left: auto; right: 70px; border-radius: 16px 16px 4px; }
@media (max-width: 900px){.avo { left: auto; right: 8px; }}