:root{
  --blob-ink:#241018;
  --blob-muted:#72515f;
  --blob-ruby:#c90046;
  --blob-ruby2:#ff4f87;
  --blob-gold:#ffb85c;
  --blob-social:#5b8f68;
  --blob-border:rgba(201,0,70,.18);
}
#blob-chat{max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
#blob-shortcuts{margin:10px 0 15px;padding:12px 0;border-block:1px solid var(--blob-border)}
#blob-shortcuts:empty{display:none}
#blob-shortcuts p{font-size:.72rem;color:var(--blob-muted);margin:0 0 8px}
.blob-shortcut-row{display:grid;grid-template-columns:minmax(0,1fr) 34px 34px;align-items:center;gap:5px;margin:6px 0}
.blob-shortcut-row a{font-size:.85rem;font-weight:700;overflow-wrap:anywhere}
.blob-shortcut-row button,.blob-shortcut-reset{border:1px solid var(--blob-border);border-radius:8px;background:#fff9f4;color:var(--blob-ruby);min-height:40px;cursor:pointer}
.blob-shortcut-reset{font-size:.72rem;padding:5px 8px;margin-top:5px}
#blob-character{
  position:fixed;
  right:18px;
  top:auto;
  bottom:20px;
  transform:none;
  z-index:10000;
  width:72px;
  height:68px;
  border:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  border-radius:48% 52% 46% 54%/58% 45% 55% 42%;
  background:radial-gradient(circle at 35% 27%,rgba(255,255,255,.96),transparent 12%),radial-gradient(circle at 30% 25%,#ff9ab6,#ff4f87 34%,#c90046 78%);
  box-shadow:0 18px 42px rgba(201,0,70,.34),inset -12px -12px 24px rgba(80,0,32,.18),inset 10px 10px 18px rgba(255,255,255,.24);
  animation:blobIdle 4s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
@keyframes blobIdle{
  0%,100%{border-radius:48% 52% 46% 54%/58% 45% 55% 42%}
  50%{border-radius:56% 44% 57% 43%/46% 58% 42% 55%}
}
#blob-character.excited{animation:blobPop .55s ease}
@keyframes blobPop{
  30%{transform:translateY(-50%) scale(1.16) rotate(4deg)}
  65%{transform:translateY(-50%) scale(.94) rotate(-4deg)}
}
.blob-face{display:grid;gap:6px;justify-items:center;transform:translateY(4px);position:relative;z-index:3}
.blob-eyes{display:flex;gap:14px}
.blob-eye{width:10px;height:14px;background:white;border-radius:50%;transition:.13s}
.blob-mouth{width:22px;height:10px;border-bottom:3px solid white;border-radius:0 0 999px 999px}
#blob-character.blink .blob-eye{height:3px;border-radius:999px;transform:translateY(6px)!important}
#blob-character.mode-sales{
  width:64px;
  height:132px;
  border-radius:34px 34px 26px 26px;
  background:radial-gradient(circle at 35% 12%,rgba(255,255,255,.96),transparent 10%),linear-gradient(180deg,#ffbf5f,#ff4f87 42%,#c90046);
  animation:airDancer .9s ease-in-out infinite;
  transform-origin:50% 100%;
}
#blob-character.mode-sales .blob-face{transform:translateY(-32px)}
#blob-character.mode-sales .blob-mouth{width:17px;height:17px;border:3px solid white;border-radius:50%}
#blob-character.mode-sales:before,#blob-character.mode-sales:after{
  content:"";
  position:absolute;
  width:16px;
  height:70px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffbf5f,#ff4f87);
  top:38px;
  z-index:1;
  transform-origin:50% 0;
}
#blob-character.mode-sales:before{left:-12px;animation:armLeft .8s ease-in-out infinite}
#blob-character.mode-sales:after{right:-12px;animation:armRight .8s ease-in-out infinite}
@keyframes airDancer{
  0%,100%{transform:translateY(-50%) rotate(-5deg) scaleY(1)}
  50%{transform:translateY(-50%) rotate(6deg) scaleY(1.04)}
}
@keyframes armLeft{0%,100%{transform:rotate(35deg)}50%{transform:rotate(-52deg)}}
@keyframes armRight{0%,100%{transform:rotate(-38deg)}50%{transform:rotate(52deg)}}
#blob-character.mode-social{
  width:76px;
  height:72px;
  background:radial-gradient(circle at 35% 27%,rgba(255,255,255,.95),transparent 12%),radial-gradient(circle at 30% 25%,#a7d8b2,#70b57f 36%,#3f7d4c 82%);
  box-shadow:0 18px 42px rgba(91,143,104,.34),inset -12px -12px 24px rgba(20,80,45,.18),inset 10px 10px 18px rgba(255,255,255,.24);
  animation:socialBreath 3.3s ease-in-out infinite;
}
@keyframes socialBreath{
  0%,100%{transform:translateY(-50%) scale(1)}
  50%{transform:translateY(-50%) scale(1.06)}
}
#blob-chat{
  position:fixed;
  right:108px;
  top:auto;
  bottom:20px;
  transform:none;
  width:min(370px,calc(100vw - 140px));
  max-height:calc(100dvh - 40px);
  overflow:auto;
  border:1px solid var(--blob-border);
  background:rgba(255,255,255,.96);
  border-radius:24px;
  padding:15px;
  box-shadow:0 24px 70px rgba(70,0,28,.22);
  backdrop-filter:blur(18px);
  display:none;
  gap:12px;
  z-index:10001;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
#blob-chat.open{display:grid}
#blob-line{margin:0;color:var(--blob-ink);font-size:1rem;line-height:1.45}
#blob-meta{color:var(--blob-muted);font-size:.82rem}
.blob-chat-actions{display:flex;flex-wrap:wrap;gap:8px}
.blob-chat-actions button,.blob-chat-actions a{
  border:0;
  border-radius:999px;
  padding:9px 11px;
  font-weight:850;
  cursor:pointer;
  background:var(--blob-ruby);
  color:white;
  text-decoration:none;
  font-size:.9rem;
}
.blob-chat-actions .secondary{
  background:rgba(201,0,70,.09);
  color:var(--blob-ruby);
}
@media(max-width:760px){
  #blob-character{
    right:12px;
    top:auto;
    bottom:calc(14px + env(safe-area-inset-bottom));
    transform:none;
    width:58px;
    height:55px;
    box-shadow:0 12px 30px rgba(201,0,70,.3),inset -9px -9px 18px rgba(80,0,32,.16),inset 8px 8px 14px rgba(255,255,255,.22);
  }
  #blob-character.mode-sales{
    width:58px;
    height:116px;
  }
  #blob-chat{
    right:10px;
    left:10px;
    top:auto;
    bottom:calc(82px + env(safe-area-inset-bottom));
    transform:none;
    width:auto;
    max-height:min(65svh,520px);
    overflow:auto;
    border-radius:20px;
  }
  .blob-chat-actions button,.blob-chat-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
  }
}


/* v2 draggable wiggle sales character */
#blob-character{
  touch-action:none;
  user-select:none;
}
#blob-character.dragging{
  animation:none !important;
  cursor:grabbing;
}
#blob-character.blob-positioned{
  transform:none;
}
#blob-character.blob-positioned:not(.mode-sales):not(.mode-social){
  animation:blobIdlePositioned 4s ease-in-out infinite;
}
#blob-character.blob-positioned.mode-social{
  animation:socialBreathPositioned 3.3s ease-in-out infinite;
}
#blob-character.blob-positioned.mode-sales.wiggle-sales{
  animation:wiggleBodyPositioned 1.15s ease-in-out infinite !important;
}
@keyframes blobIdlePositioned{
  0%,100%{border-radius:48% 52% 46% 54%/58% 45% 55% 42%;transform:rotate(-2deg)}
  50%{border-radius:56% 44% 57% 43%/46% 58% 42% 55%;transform:rotate(2deg) scale(1.03)}
}
@keyframes socialBreathPositioned{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes wiggleBodyPositioned{
  0%,100%{transform:rotate(-7deg) scaleY(1)}
  25%{transform:rotate(5deg) scaleY(1.05)}
  50%{transform:rotate(9deg) scaleY(.98)}
  75%{transform:rotate(-4deg) scaleY(1.06)}
}
#blob-character.mode-sales.wiggle-sales{
  width:52px;
  height:172px;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.98),transparent 10%),
    linear-gradient(180deg,#ffdc73 0%,#ff4f87 38%,#c90046 100%);
  box-shadow:
    0 18px 42px rgba(201,0,70,.34),
    inset -10px -16px 26px rgba(80,0,32,.16),
    inset 8px 10px 18px rgba(255,255,255,.20);
  animation:wiggleBody 1.15s ease-in-out infinite;
  transform-origin:50% 100%;
}
#blob-character.mode-sales.wiggle-sales .blob-face{
  transform:translateY(-54px);
}
#blob-character.mode-sales.wiggle-sales .blob-mouth{
  width:16px;
  height:16px;
  border:3px solid white;
  border-radius:50%;
}
#blob-character.mode-sales.wiggle-sales::before,
#blob-character.mode-sales.wiggle-sales::after{
  content:"";
  position:absolute;
  width:14px;
  height:88px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffdc73,#ff4f87);
  top:50px;
  z-index:1;
  transform-origin:50% 0%;
}
#blob-character.mode-sales.wiggle-sales::before{
  left:-12px;
  animation:wiggleArmLeft .7s ease-in-out infinite;
}
#blob-character.mode-sales.wiggle-sales::after{
  right:-12px;
  animation:wiggleArmRight .7s ease-in-out infinite;
}
@keyframes wiggleBody{
  0%,100%{transform:translateY(-50%) rotate(-7deg) scaleY(1)}
  25%{transform:translateY(-50%) rotate(5deg) scaleY(1.05)}
  50%{transform:translateY(-50%) rotate(9deg) scaleY(.98)}
  75%{transform:translateY(-50%) rotate(-4deg) scaleY(1.06)}
}
@keyframes wiggleArmLeft{
  0%,100%{transform:rotate(55deg)}
  50%{transform:rotate(-70deg)}
}
@keyframes wiggleArmRight{
  0%,100%{transform:rotate(-55deg)}
  50%{transform:rotate(70deg)}
}
@media(max-width:760px){
  #blob-character.mode-sales.wiggle-sales{
    width:48px;
    height:150px;
  }
  #blob-character.mode-sales.wiggle-sales .blob-face{
    transform:translateY(-46px);
  }
}

@media(max-width:760px){
  #blob-character, #blob-character.blob-positioned {
    left:auto!important; top:auto!important; right:12px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    touch-action:manipulation;
  }
  #blob-character.mode-social { width:58px; height:55px; animation:blobDockBreath 3.3s ease-in-out infinite; }
  #blob-character.mode-sales, #blob-character.mode-sales.wiggle-sales { width:50px; height:62px; animation:blobDockWiggle 1.15s ease-in-out infinite!important; }
  #blob-character.mode-sales .blob-face, #blob-character.mode-sales.wiggle-sales .blob-face { transform:translateY(-3px); }
  #blob-character.mode-sales::before, #blob-character.mode-sales::after,
  #blob-character.mode-sales.wiggle-sales::before, #blob-character.mode-sales.wiggle-sales::after { width:9px; height:30px; top:22px; }
  #blob-character.mode-sales::before, #blob-character.mode-sales.wiggle-sales::before { left:-6px; }
  #blob-character.mode-sales::after, #blob-character.mode-sales.wiggle-sales::after { right:-6px; }
  #blob-character.excited { animation:blobDockPop .55s ease; }
  .blob-chat-actions a, .blob-chat-actions button { padding:8px 10px; font-size:.85rem; }
}
@keyframes blobDockBreath { 50% { transform:scale(1.04); } }
@keyframes blobDockWiggle { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(5deg); } }
@keyframes blobDockPop { 30% { transform:scale(1.1) rotate(3deg); } 65% { transform:scale(.96) rotate(-3deg); } }

@media(prefers-reduced-motion:reduce){
  #blob-character,#blob-character::before,#blob-character::after{animation:none!important}
}