.ssbb{--ssbb-bubble:#fff;--ssbb-text:#222;--ssbb-bubble-border:#ccc;--ssbb-image-border:#ccc;--ssbb-radius:12px;--ssbb-image-size:100px;--ssbb-mobile-image-size:80px;--ssbb-effective-image-size:var(--ssbb-image-size);display:flex;align-items:flex-start;gap:16px;box-sizing:border-box;margin-block:1.5em;max-width:100%}
.ssbb--right{flex-direction:row-reverse}.ssbb__person{flex:0 0 var(--ssbb-effective-image-size);width:var(--ssbb-effective-image-size);text-align:center}.ssbb__avatar{display:block;width:var(--ssbb-effective-image-size);height:var(--ssbb-effective-image-size);box-sizing:border-box;object-fit:cover;border:2px solid var(--ssbb-image-border);border-radius:50%;background:#f3f4f5}.ssbb--rounded .ssbb__avatar{border-radius:12px}.ssbb--square .ssbb__avatar{border-radius:0}.ssbb__avatar--no-border{border:0}.ssbb__name{margin-top:6px;font-size:.72em;line-height:1.3;overflow-wrap:anywhere}.ssbb__bubble{position:relative;flex:0 1 auto;width:fit-content;min-width:0;max-width:calc(100% - var(--ssbb-effective-image-size) - 16px);margin-top:8px;padding:14px 18px;color:var(--ssbb-text);background:var(--ssbb-bubble);border:1px solid var(--ssbb-bubble-border);border-radius:var(--ssbb-radius);box-sizing:border-box;filter:drop-shadow(0 1px 1px rgba(0,0,0,.03))}.ssbb__bubble--no-border{border-color:transparent}.ssbb__bubble::before,.ssbb__bubble::after{position:absolute;top:20px;width:0;height:0;border:9px solid transparent;content:""}.ssbb--left .ssbb__bubble::before{right:100%;border-right-color:var(--ssbb-bubble-border)}.ssbb--left .ssbb__bubble::after{right:calc(100% - 1.5px);border-right-color:var(--ssbb-bubble);}.ssbb--right .ssbb__bubble::before{left:100%;border-left-color:var(--ssbb-bubble-border)}.ssbb--right .ssbb__bubble::after{left:calc(100% - 1.5px);border-left-color:var(--ssbb-bubble)}.ssbb__bubble--no-border::before{display:none}.ssbb__content{line-height:1.65;overflow-wrap:anywhere}.ssbb__content>*{line-height:inherit}.ssbb__content>:first-child{margin-top:0}.ssbb__content>:last-child{margin-bottom:0}.ssbb--animate:not(.ssbb--visible) .ssbb__bubble{opacity:0}.ssbb--animate.ssbb--left:not(.ssbb--visible) .ssbb__bubble{transform:translateX(-40px)}.ssbb--animate.ssbb--right:not(.ssbb--visible) .ssbb__bubble{transform:translateX(40px)}.ssbb--animate.ssbb--ready .ssbb__bubble{will-change:opacity,transform;transition:opacity .3s ease,transform .3s cubic-bezier(.22,.75,.22,1)}.ssbb--animate.ssbb--visible .ssbb__bubble{will-change:auto}
@media (max-width:480px){.ssbb{--ssbb-effective-image-size:var(--ssbb-mobile-image-size);gap:10px}.ssbb__bubble{padding:12px 14px}.ssbb__content{font-size:.9em;line-height:1.55}.ssbb__name{font-size:.68em}}
@media (prefers-reduced-motion:reduce){.ssbb--animate .ssbb__bubble{transition:none!important;transform:none!important;opacity:1!important}}
.ssbb--bubble-thought .ssbb__bubble{border-radius:28px}.ssbb--bubble-thought .ssbb__bubble::before,.ssbb--bubble-thought .ssbb__bubble::after{width:10px;height:10px;border:1px solid var(--ssbb-bubble-border);border-radius:50%;background:var(--ssbb-bubble)}.ssbb--bubble-thought.ssbb--left .ssbb__bubble::before{top:24px;right:calc(100% + 7px);border-color:var(--ssbb-bubble-border)}.ssbb--bubble-thought.ssbb--left .ssbb__bubble::after{top:34px;right:calc(100% + 18px);width:6px;height:6px;border-color:var(--ssbb-bubble-border)}.ssbb--bubble-thought.ssbb--right .ssbb__bubble::before{top:24px;left:calc(100% + 7px);border-color:var(--ssbb-bubble-border)}.ssbb--bubble-thought.ssbb--right .ssbb__bubble::after{top:34px;left:calc(100% + 18px);width:6px;height:6px;border-color:var(--ssbb-bubble-border)}.ssbb--bubble-thought .ssbb__bubble--no-border::before,.ssbb--bubble-thought .ssbb__bubble--no-border::after{display:block;border-color:transparent}.ssbb--bubble-handwritten .ssbb__bubble{font-family:"Klee One","Yuji Syuku","Hiragino Maru Gothic ProN","Yu Gothic",cursive;border-width:2px;border-radius:18px 13px 20px 11px/13px 20px 12px 18px;box-shadow:1px 1px 0 color-mix(in srgb,var(--ssbb-bubble-border) 55%,transparent);transform:rotate(-.15deg)}.ssbb--bubble-handwritten.ssbb--right .ssbb__bubble{transform:rotate(.15deg)}.ssbb--bubble-handwritten .ssbb__content{letter-spacing:.03em}.ssbb--bubble-handwritten.ssbb--animate.ssbb--left.ssbb--ready:not(.ssbb--visible) .ssbb__bubble{transform:translateX(-40px) rotate(-.15deg)}.ssbb--bubble-handwritten.ssbb--animate.ssbb--right.ssbb--ready:not(.ssbb--visible) .ssbb__bubble{transform:translateX(40px) rotate(.15deg)}
.ssbb[class*="ssbb--image-"] .ssbb__avatar{transform-origin:50% 75%}.ssbb--image-shake-small .ssbb__avatar{animation:ssbb-shake-small 1.9s linear infinite}.ssbb--image-sway-large .ssbb__avatar{animation:ssbb-sway-large 2s cubic-bezier(.45,0,.55,1) infinite}.ssbb--image-vertical-large .ssbb__avatar{animation:ssbb-vertical-large 1.6s ease-in-out infinite}.ssbb--image-jump .ssbb__avatar{animation:ssbb-jump 1.8s cubic-bezier(.35,.05,.2,1) infinite}.ssbb--image-shrink-loop .ssbb__avatar{animation:ssbb-shrink-loop 2.5s ease-in infinite}.ssbb--image-boing .ssbb__avatar{animation:ssbb-boing 1.35s ease-in-out infinite}
@keyframes ssbb-shake-small{0%,21.1%,100%{transform:translateX(0)}2.1%,10.5%,18.9%{transform:translateX(-3px)}6.3%,14.7%{transform:translateX(3px)}}
@keyframes ssbb-sway-large{0%,100%{transform:translateX(-13px) rotate(-7deg)}50%{transform:translateX(13px) rotate(7deg)}}
@keyframes ssbb-vertical-large{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes ssbb-jump{0%,20%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(3px) scaleY(.9)}50%{transform:translateY(-28px) scaleY(1.04)}68%{transform:translateY(0) scaleY(.92)}78%{transform:translateY(-5px) scaleY(1)}}
@keyframes ssbb-shrink-loop{0%,12%{transform:scale(1);opacity:1}82%{transform:scale(.05);opacity:.15}83%{transform:scale(1);opacity:0}90%,100%{transform:scale(1);opacity:1}}
@keyframes ssbb-boing{0%,100%{transform:scale(1)}25%{transform:scale(1.14,.88)}50%{transform:scale(.9,1.12)}72%{transform:scale(1.06,.96)}}
@media (prefers-reduced-motion:reduce){.ssbb[class*="ssbb--image-"] .ssbb__avatar{animation:none!important;transform:none!important}}
.ssbb--bubble-standard .ssbb__bubble::before,.ssbb--bubble-handwritten .ssbb__bubble::before{display:block;top:20px;width:14px;height:14px;box-sizing:border-box;background:var(--ssbb-bubble);border:0 solid var(--ssbb-bubble-border);transform:rotate(45deg);z-index:0}.ssbb--bubble-standard .ssbb__bubble::after,.ssbb--bubble-handwritten .ssbb__bubble::after{display:none}.ssbb--bubble-standard.ssbb--left .ssbb__bubble::before{right:auto;left:-8px;border-bottom-width:1px;border-left-width:1px}.ssbb--bubble-standard.ssbb--right .ssbb__bubble::before{right:-8px;left:auto;border-top-width:1px;border-right-width:1px}.ssbb--bubble-handwritten.ssbb--left .ssbb__bubble::before{right:auto;left:-9px;border-bottom-width:2px;border-left-width:2px}.ssbb--bubble-handwritten.ssbb--right .ssbb__bubble::before{right:-9px;left:auto;border-top-width:2px;border-right-width:2px}.ssbb--bubble-standard .ssbb__bubble--no-border::before,.ssbb--bubble-handwritten .ssbb__bubble--no-border::before{display:block;border-width:0}.ssbb--bubble-standard .ssbb__content,.ssbb--bubble-handwritten .ssbb__content{position:relative;z-index:1}
.ssbb--bubble-handwritten .ssbb__bubble{font-family:inherit}.ssbb--bubble-handwritten .ssbb__content{letter-spacing:normal}