*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#000;color:#fff}.app{max-width:480px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;background:#0b0b0c}.bar{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 16px 12px;border-bottom:1px solid #1c1c1e;background:#0b0b0cd1;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);position:sticky;top:0;z-index:5}.profile{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff;padding:2px 10px;border-radius:14px;transition:transform .14s cubic-bezier(.34,1.56,.64,1),background .2s ease}.profile:hover{background:#ffffff0d}.profile:active{transform:scale(.93)}.avatar-wrap{position:relative;width:44px;height:44px}.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 1px 5px #00000073}.presence{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:2.5px solid #0b0b0c;transition:background .3s ease}.presence.on{background:#30d158}.presence.off{background:#8e8e93}.pname{font-size:13px;font-weight:600;display:flex;align-items:center;gap:3px;line-height:1.1}.chev{color:#8e8e93;font-weight:500;font-size:15px}.pstatus{font-size:11px;color:#8e8e93;line-height:1}.clear{position:absolute;left:12px;top:12px;background:#1c1c1e;color:#ff453a;border:none;border-radius:12px;padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer}.clear:hover{background:#2a2a2c}.info-pop{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);background:#1c1c1e;border:1px solid #2a2a2c;border-radius:14px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:9px;z-index:10;box-shadow:0 10px 30px #0000008c;animation:popIn .2s cubic-bezier(.22,1.2,.36,1) both;transform-origin:top center}.info-id{font-size:12px;color:#8e8e93;font-family:ui-monospace,monospace;text-align:center}.info-reset{background:#2a2a2c;color:#ff453a;border:none;border-radius:9px;padding:7px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s ease}.info-reset:hover{background:#35353a}@keyframes popIn{0%{opacity:0;transform:translate(-50%) translateY(-8px) scale(.94)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px}.row{display:flex}.row.me{justify-content:flex-end}.row.rum{justify-content:flex-start}.bubble{max-width:72%;padding:9px 13px;border-radius:18px;font-size:15px;line-height:1.3;word-wrap:break-word;position:relative;animation:bubbleIn .34s cubic-bezier(.22,1.2,.36,1) both;will-change:transform,opacity}.row.me .bubble{background:#0a84ff;color:#fff;border-bottom-right-radius:5px;transform-origin:bottom right}.row.rum .bubble{background:#26262a;color:#fff;border-bottom-left-radius:5px;transform-origin:bottom left}@keyframes bubbleIn{0%{opacity:0;transform:scale(.72) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.bubble.has-reacts{margin-top:16px}.reacts{position:absolute;top:-14px;display:flex;gap:2px;z-index:2}.row.me .reacts{left:-10px}.row.rum .reacts{right:-10px}.reacts .react{font-size:13px;line-height:1;background:#2a2a2e;border:1.5px solid #0b0b0c;border-radius:999px;padding:4px 5px;box-shadow:0 1px 3px #0006;animation:reactPop .4s cubic-bezier(.3,1.5,.5,1) both;transform-origin:center bottom}@keyframes reactPop{0%{opacity:0;transform:scale(0)}55%{opacity:1;transform:scale(1.28)}to{opacity:1;transform:scale(1)}}.bubble.typing{display:flex;align-items:center;gap:5px;padding:13px 15px}.bubble.typing span{width:8px;height:8px;border-radius:50%;background:#8e8e93;animation:typingWave 1.25s ease-in-out infinite both}.bubble.typing span:nth-child(2){animation-delay:.18s}.bubble.typing span:nth-child(3){animation-delay:.36s}@keyframes typingWave{0%,60%,to{opacity:.35;transform:translateY(0) scale(.9)}30%{opacity:1;transform:translateY(-4px) scale(1)}}.composer{display:flex;gap:8px;padding:12px;border-top:1px solid #1c1c1e}.composer input{flex:1;background:#1c1c1e;border:none;border-radius:18px;padding:10px 14px;color:#fff;font-size:15px;outline:none}.composer input{transition:background .2s ease}.composer input:focus{background:#262629}.composer button{background:#0a84ff;border:none;border-radius:18px;color:#fff;padding:0 16px;font-weight:600;cursor:pointer;transition:transform .12s ease,background .2s ease,opacity .2s ease}.composer button:hover{background:#0a7aec}.composer button:active{transform:scale(.92)}.clear,.id{transition:background .2s ease,color .2s ease}@media(prefers-reduced-motion:reduce){.bubble,.reacts .react{animation-duration:.01ms;animation-iteration-count:1}.bubble.typing span{animation-duration:1.25s}}