.typing{background:var(--surface);border:1px solid var(--border);border-radius:20px;justify-content:center;align-items:center;width:5em;height:2em;padding:10px;display:flex;position:relative;box-shadow:0 2px 8px #0000000d}.typing__dot{float:left;background:var(--sage,#8d8c91);opacity:0;border-radius:50%;width:8px;height:8px;margin:0 4px;animation:1s infinite loadingFade}.typing__dot:first-child{animation-delay:0s}.typing__dot:nth-child(2){animation-delay:.2s}.typing__dot:nth-child(3){animation-delay:.4s}@keyframes loadingFade{0%{opacity:0}50%{opacity:.8}to{opacity:0}}.typing-bubble-wrap{transform-origin:0 100%;align-items:flex-end;gap:8px;padding-bottom:12px;padding-left:4px;animation:.3s cubic-bezier(.34,1.56,.64,1) forwards msgScaleInThem;display:flex}.typing-bubble-wrap.exiting{animation:.2s cubic-bezier(.4,0,1,1) forwards typingBubbleOut}@keyframes typingBubbleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes msgScaleInMe{0%{opacity:0;transform:scale(.5)}75%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes msgScaleInThem{0%{opacity:0;transform:scale(.5)}75%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.animate-msg-me{transform-origin:100% 100%;animation:.35s cubic-bezier(.34,1.56,.64,1) forwards msgScaleInMe}.animate-msg-them{transform-origin:0 100%;animation:.35s cubic-bezier(.34,1.56,.64,1) forwards msgScaleInThem}