:root{--bubble-bg:#fff;--bubble-text:#111827;--bubble-border:#e5e7eb;--bubble-shadow:0 2px 4px rgba(0,0,0,.12);--bubble-radius:14px;--arrow-size:10px}@media (prefers-color-scheme:dark){:root{--bubble-bg:#111827;--bubble-text:#f9fafb;--bubble-border:#374151;--bubble-shadow:0 2px 4px rgba(0,0,0,.5)}}.speech-bubble{position:absolute;left:38%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:1;background:var(--bubble-bg);color:var(--bubble-text);border:1px solid var(--bubble-border);border-radius:var(--bubble-radius);box-shadow:var(--bubble-shadow);padding:10px 12px;line-height:1.35;font-weight:600;white-space:nowrap;max-width:calc(100% - 24px);font-size:clamp(12px,3.6vw,14px);--arrow-x:50%;pointer-events:none;opacity:0;transform-origin:bottom center;animation:bubble-pop .22s cubic-bezier(.2,.8,.3,1) forwards}@keyframes bubble-pop{0%{opacity:0;transform:translateX(-50%) translateY(6px) scale(.98)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}@media (prefers-reduced-motion:reduce){.speech-bubble{animation:none;opacity:1}}.speech-bubble:after,.speech-bubble:before{content:"";position:absolute;left:var(--arrow-x);transform:translateX(-50%);width:0;height:0;border-left:var(--arrow-size) solid transparent;border-right:var(--arrow-size) solid transparent}.speech-bubble:before{top:100%;border-top:calc(var(--arrow-size) + 1px) solid var(--bubble-border)}.speech-bubble:after{top:calc(100% - 1px);border-top:var(--arrow-size) solid var(--bubble-bg)}.speech-bubble--left{left:16px;transform:none;--arrow-x:24px}.speech-bubble--right{right:16px;left:auto;transform:none;--arrow-x:calc(100% - 24px)}.speech-bubble--interactive{pointer-events:auto}