@keyframes px2pulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
@keyframes px2typing{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}
.px2-online-badge{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 14px;margin:6px auto 0;background:rgba(7,193,96,.08);border-radius:16px;font-size:12px;color:#07C160;font-weight:500;width:fit-content}
.px2-online-dot{width:7px;height:7px;border-radius:50%;background:#07C160;display:inline-block;animation:px2pulse 2s infinite;flex-shrink:0}
.px2-ts{font-size:10px;color:#b0b0b0;margin-top:3px;text-align:right;line-height:1}
.px2-ts.left{text-align:left}
.px2-receipt{font-size:10px;color:#b0b0b0;margin-top:1px;display:inline-block}
.px2-receipt.read{color:#4C84FF}
.px2-typing-bubble{display:flex;align-items:flex-end;gap:8px;padding:4px 10px;animation:px2fadeIn .3s ease}
.px2-typing-bubble .avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0}
.px2-typing-bubble .bubble{background:#f5f5f5;border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:4px}
.px2-typing-bubble .dot{width:6px;height:6px;border-radius:50%;background:#999;animation:px2typing 1.2s infinite}
.px2-typing-bubble .dot:nth-child(2){animation-delay:.2s}
.px2-typing-bubble .dot:nth-child(3){animation-delay:.4s}
@keyframes px2fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.px2-date-sep{text-align:center;font-size:11px;color:#b0b0b0;padding:8px 0 4px;position:relative}
.px2-date-sep::before,.px2-date-sep::after{content:"";display:inline-block;width:30px;height:1px;background:#e0e0e0;vertical-align:middle;margin:0 8px}