*{box-sizing:border-box}body{margin:0;font:14px system-ui,"Microsoft YaHei",sans-serif;height:100vh;display:flex;color:#242b29;background:#f4f5f5}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:6px;padding:9px 12px;background:#e4e9e6;color:#273b30}button:hover{background:#d3dfd7}input,select{padding:10px;border:1px solid #d7ddd9;border-radius:6px}#accounts{width:76px;background:#23362d;overflow:auto;padding:14px 10px;color:white;flex-shrink:0}.brand{font-size:24px;text-align:center;color:#8edba7;margin:8px 0 24px}#accounts button{width:52px;margin-bottom:9px}.account.active{background:#83dca1}.account small{display:block;font-size:10px}#conversations{width:290px;background:#edf0ee;display:flex;flex-direction:column;border-right:1px solid #dce1de;flex-shrink:0}header{height:72px;padding:24px;border-bottom:1px solid #dce1de}#status{font-size:11px;float:right;color:#607267}#search{margin:14px}#newRoom{margin:0 14px 14px}#roomList{overflow:auto;flex:1}.room{width:100%;border-radius:0;text-align:left;padding:18px 20px;background:transparent;border-bottom:1px solid #e0e5e2}.room.active{background:#d9e7de}.room small{display:block;margin-top:5px;color:#76867b}.badge{float:right;color:#d73c3c}footer{padding:15px}footer small{display:block;margin-top:10px;color:#748279}main{flex:1;min-width:0;display:flex;flex-direction:column}#chatTitle{font-size:18px}#messages{flex:1;overflow:auto;padding:24px}.empty{text-align:center;margin-top:18vh;font-size:34px;color:#8a9c90}.empty small{font-size:15px}.msg{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 18px}.msg.mine{align-items:flex-end}.msg small{color:#829187;font-size:11px;margin:0 5px 6px}.bubble{background:white;border:1px solid #e0e6e2;border-radius:9px;padding:12px 16px;max-width:75%;white-space:pre-wrap;overflow-wrap:anywhere}.mine .bubble{background:#9ce7b3;border-color:#9ce7b3}#composer{border-top:1px solid #dce1de;padding:12px 20px;position:relative}textarea{width:100%;height:92px;resize:none;border:0;background:transparent;padding:12px;outline-color:#79c895}#send{float:right;background:#2caf66;color:white;min-width:86px}#older{font-size:12px}dialog{border:1px solid #d5dfd8;border-radius:12px;width:400px;padding:28px;box-shadow:0 20px 100px #0003}dialog::backdrop{background:#0005}dialog form{display:flex;flex-direction:column;gap:14px}dialog h2,dialog p{margin:0}dialog p{font-size:12px;color:#77867c;line-height:1.8}dialog form>div{text-align:right}#notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#263b30;color:white;padding:12px 20px;border-radius:7px;display:none}@media(max-width:800px){#conversations{width:210px}.bubble{max-width:92%}}
[hidden]{display:none!important}#chatTitle{display:flex;gap:12px;align-items:center;padding:15px 24px}#chatTitle small{display:block;font-size:12px;font-weight:400;color:#839389;margin-top:5px}.avatar{width:38px;height:38px;min-width:38px;display:grid;place-items:center;border-radius:50%;background:#d6e5dd;color:#387751;padding:0;font-weight:600}.chat-tools{display:flex;align-items:center;gap:5px;border-bottom:1px solid #e1e7e3;padding-bottom:8px}.chat-tools button{background:transparent;padding:5px 10px;font-size:20px}.chat-tools span{font-size:11px;display:block;color:#78897d}.chat-tools #older{margin-left:auto;font-size:12px}#emojiPanel{position:absolute;bottom:100%;left:18px;width:340px;max-height:260px;overflow:auto;background:white;box-shadow:0 8px 30px #0002;border:1px solid #e0e7e2;border-radius:10px;padding:16px;z-index:3;display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.emoji{font-size:23px;background:transparent;padding:4px}#uploadState{font-size:12px;color:#73877a;max-height:52px;overflow:auto}.message-row{display:flex;gap:10px;align-items:flex-start;max-width:85%}.mine .message-row{flex-direction:row-reverse}.message-content{min-width:0}.message-content>small{display:block;margin-bottom:6px}.mine .message-content>small{text-align:right}.message-content .bubble{max-width:none}.system-msg{text-align:center;color:#91a196;font-size:12px;margin:24px 0}.image-bubble{padding:0;background:none;display:flex;flex-direction:column}.image-bubble img{max-width:280px;max-height:240px;border-radius:6px;object-fit:contain;min-height:40px}.image-bubble span{font-size:11px;color:#7a8d81}.video-bubble{min-width:190px;min-height:90px;background:#314c3b;color:#e9f4ed;font-size:17px}.bubble>small{display:block;margin-top:8px}.contact-card{display:flex;flex-direction:column;gap:8px;text-align:left;min-width:200px;background:transparent}.contact-card span{font-size:11px;color:#708777;border-top:1px solid #c4d8cc;padding-top:8px}#profileDialog{padding:0 28px 28px;overflow:hidden}#profileDialog label{display:block;margin:18px 0 10px}#profileNote{width:100%;margin-top:6px}.profile-cover{height:78px;margin:0 -28px 20px;background:linear-gradient(110deg,#74b391,#4e6c78)}.dialog-close{position:absolute;right:12px;top:10px;background:transparent;color:white;font-size:24px}#profileContent>.avatar{margin-top:-45px;width:56px;height:56px;position:relative;border:3px solid white;font-size:23px}#profileContent h2{font-size:20px}dl{display:grid;grid-template-columns:85px 1fr;gap:12px;font-size:12px}dt{color:#819187}dd{margin:0;overflow-wrap:anywhere;text-align:right}#cardDialog{width:420px}#cardDialog p{color:#7f8f85;font-size:12px}#cardSearch{width:100%;margin:8px 0}#cardChoices{height:280px;overflow:auto}.card-choice{display:flex;flex-direction:column;width:100%;align-items:flex-start;gap:5px;background:white;margin:5px 0;padding:13px}.card-choice small{color:#85958b}.card-choice.chosen{background:#d8eee0}.dialog-actions{text-align:right;margin-top:16px}#mediaDialog{width:min(900px,95vw);max-height:90vh}#mediaPreview{display:grid;place-items:center;margin-top:12px}#mediaPreview img,#mediaPreview video{max-width:100%;max-height:75vh}#mediaPreview video{width:100%}.shake{animation:chat-shake .45s ease-in-out}@keyframes chat-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}@media(prefers-reduced-motion:reduce){.shake{animation:none}}
#friendsDialog{width:min(540px,90vw);max-height:80vh;overflow:auto}#friendSearchForm{display:flex;gap:8px}.friend-row{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #e7e7e7}.friend-row span{flex:1;overflow-wrap:anywhere}#friendsButton{margin:8px 12px;padding:10px}#friendsDialog h3{margin-top:22px}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}#changeAvatar{margin:0 12px;padding:8px}
.quick-actions{position:relative;margin:4px 12px}#plusMenu{font-size:24px}#plusActions{position:absolute;z-index:10;background:white;box-shadow:0 4px 20px #0002;border-radius:8px;padding:8px;right:0;min-width:150px}#plusActions button{display:block;width:100%;padding:10px;text-align:left}#groupFriendChoices{max-height:300px;overflow:auto}#groupFriendChoices label{display:flex;gap:12px;padding:10px}#groupFriendChoices input{width:auto}#recordsDialog{width:min(680px,90vw)}#recordsList{height:45vh;overflow:auto}#recordsList article{padding:12px;border-bottom:1px solid #ddd}#recordsList p{white-space:pre-wrap;overflow-wrap:anywhere}#groupRequestsButton{margin:4px 12px}
#groupSettingsDialog{width:min(640px,90vw);max-height:85vh;overflow:auto}#groupSettingsDialog>label{display:block;margin:14px 0}#groupSettingsDialog textarea{height:90px;min-height:90px}#groupSettingsDialog input[type=checkbox]{width:auto;margin-left:12px}#captchaRow{display:flex;align-items:center;gap:10px}#captchaImage{width:160px;height:52px}

.room{display:flex;align-items:center;gap:10px;position:relative}.room.pinned{background:#eaf0ec}.list-avatar{width:40px;height:40px;border-radius:50%;background:#d6e8df;display:grid;place-items:center;flex-shrink:0;overflow:hidden}.list-avatar img{width:100%;height:100%;object-fit:cover}.room-body{min-width:0;flex:1;text-align:left}.room-body strong,.room-body small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-time{font-size:11px;color:#89928d;align-self:flex-start}.room-menu{position:fixed;z-index:999;background:white;padding:6px;box-shadow:0 4px 22px #0003;border-radius:6px;min-width:145px}.room-menu button{display:block;width:100%;text-align:left;background:white}.room-menu button:hover{background:#edf3ef}.read-receipt{color:#74867a;font-size:11px}