*{box-sizing:border-box}body{margin:0;background:#ededeb;color:#252525;font:14px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}main{height:calc(100dvh - 32px);margin:16px auto;max-width:1320px;background:white;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:320px 1fr}aside{background:#fafafa;border-right:1px solid #eee;overflow:auto}header{height:62px;display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid #eee}header b{font-size:18px}button{border:0;border-radius:18px;padding:9px 20px;cursor:pointer;background:#f3f3f3}header button{margin-left:auto}#search{margin:12px;width:calc(100% - 24px);padding:10px;border:0;border-radius:9px;background:#eee}.conversation{display:block;width:100%;border-radius:0;padding:17px;text-align:left;background:transparent;border-bottom:1px solid #f0f0f0}.conversation.active{background:#efefef}.conversation strong{display:block;margin-bottom:7px}.conversation small{color:#999;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}section{display:flex;flex-direction:column;min-width:0;min-height:0}section header small{margin-left:auto;color:#888}#messages{flex:1;overflow:auto;padding:28px 20px}.empty{color:#aaa;text-align:center;margin:20vh 0}.message{margin:16px 0;display:flex;flex-direction:column;align-items:flex-start}.message.outbound{align-items:flex-end}.bubble{background:#f2f2f2;padding:12px 14px;border-radius:12px;max-width:75%;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.outbound .bubble{background:#ffe72d}.message small{color:#aaa;font-size:11px;margin-top:5px}.bubble img,.bubble video{max-width:100%;max-height:320px;border-radius:8px}footer{padding:12px 18px;border-top:1px solid #eee}footer[hidden]{display:none}.tools{display:flex;gap:18px;color:#777}.tools label{cursor:pointer}textarea{width:100%;height:76px;resize:none;border:0;outline:0;padding:14px 0;font:inherit}.sendbar{display:flex;justify-content:space-between;align-items:center}#send{background:#ffe72d;min-width:90px}#error{color:#b34b3b;font-size:12px}dialog{border:0;border-radius:18px;padding:26px;max-width:90vw}dialog input{display:block;padding:12px;margin:15px 0;width:100%;border:1px solid #ddd;border-radius:8px}#back{display:none}#connection{font-size:12px}@media(max-width:650px){main{margin:0;border-radius:0;height:100dvh;display:block}aside,section{height:100%}section{display:none}body.chat section{display:flex}body.chat aside{display:none}#back{display:block;margin:0;padding:4px 12px;font-size:28px}footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}.bubble{max-width:86%}}

.conversation{display:flex;align-items:center;gap:12px}.avatar{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:#ffe72d;display:grid;place-items:center;font-size:18px;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.roomWords{min-width:0;flex:1}

/* Mobile reception layout, 0.1.6 */
body{background:#f4f6f9;color:#202938}main{box-shadow:0 8px 40px #24364c0a}aside{background:#fff}header{height:68px;padding:18px 20px;background:#fff;border-bottom:1px solid #edf0f4}header b{font-weight:650;letter-spacing:.3px}#connection{color:#50816b;background:#edf7f1;border-radius:20px;padding:5px 9px}#search{background:#f2f4f7;border-radius:14px;padding:13px 15px;outline:none}.conversation{padding:18px 20px;border-bottom:1px solid #f4f5f7}.conversation.active{background:#fff9dd}.conversation strong{font-size:15px;margin-bottom:6px}.conversation small{line-height:1.5;color:#89919e}.avatar{width:46px;height:46px;border-radius:16px;background:#fff2b2;color:#655716}#messages{background:#f5f6f8;padding:18px 16px}.message{margin:18px 0}.bubble{border-radius:18px 18px 18px 5px;background:white;box-shadow:0 2px 7px #24364c05;padding:12px 16px;line-height:1.65}.outbound .bubble{background:#ffdf63;border-radius:18px 18px 5px 18px}.message small{color:#99a0ac;margin:7px 4px 0;font-size:11px}footer{background:#fff;padding:12px 16px}.tools{gap:12px;font-size:13px}.tools label{background:#f2f4f7;padding:7px 12px;border-radius:10px;color:#596575}textarea{background:#f5f6f8;border-radius:14px;height:64px;padding:12px;margin:10px 0 8px;line-height:1.5}#send{background:#ffdc59;color:#40370e;border-radius:12px;font-weight:600;padding:10px 24px}.sendbar{min-height:40px}#back{border-radius:12px;color:#536074}#settings{font-size:12px;color:#657084;background:#f2f4f7}.empty{color:#939dac}@media(max-width:650px){header{height:64px;padding:14px 16px}#title{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#connection{font-size:10px;white-space:nowrap}.bubble{font-size:15px;max-width:85%}#back{font-size:27px;padding:0 9px}footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}}