:root{--bg:#f4f5f7;--line:#e8e8e8;--text:#202124;--muted:#8b8d93;--green:#16a56b;--mine:#95ec69;--red:#d84a37}*{box-sizing:border-box}body{margin:0;background:#e8ebef;color:var(--text);font:14px -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}.app{height:100vh;max-width:1200px;margin:auto;display:flex;background:#fff;box-shadow:0 0 30px #c9cdd2}.sidebar{width:285px;background:#f7f7f7;border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:18px}.brand{font-size:25px;font-weight:800;letter-spacing:-1px}.brand span{color:var(--green)}.search{display:flex;gap:8px;align-items:center;background:#fff;border-radius:8px;padding:8px 10px;color:#888}.search input{border:0;outline:0;background:transparent;width:100%}.conversation{border:0;background:transparent;text-align:left;display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;cursor:pointer}.conversation.active,.conversation:hover{background:#eaeaea}.conversation b,.conversation small{display:block}.conversation small,header small{color:var(--muted);font-size:12px;font-weight:400;margin-top:3px}.avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:9px;color:#fff;font-weight:700;font-style:normal}.green{background:#19a873}.local-tip{margin-top:auto;color:#999;font-size:12px;line-height:1.6}.chat{min-width:0;flex:1;display:flex;flex-direction:column;background:#f8f8f8}header{height:72px;background:#fff;padding:14px 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}header>div{display:grid;grid-template-columns:44px auto;align-items:center}header b{font-size:16px}header small{grid-column:2}.ghost{border:0;background:transparent;color:#999;cursor:pointer}.messages{padding:22px clamp(16px,4vw,48px);overflow:auto;flex:1;display:flex;flex-direction:column;gap:15px}.message{display:flex;gap:9px;max-width:76%;align-items:flex-start}.message.mine{align-self:flex-end;flex-direction:row-reverse}.bubble{padding:10px 13px;border-radius:6px;background:#fff;line-height:1.5;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1px #ddd}.mine .bubble{background:var(--mine)}.time{align-self:flex-end;color:#aaa;font-size:11px;white-space:nowrap}.message img{max-width:min(360px,60vw);display:block;border-radius:6px;cursor:zoom-in}.audio{display:flex;gap:11px;align-items:center;min-width:145px;border:0;background:transparent;cursor:pointer;font:inherit}.audio::before{content:'▶';color:#287c4b}.red-packet{background:linear-gradient(135deg,#e96643,#ca3e2c);color:#ffe7b5;width:245px;padding:15px;border-radius:6px;cursor:pointer}.red-packet strong{color:white;display:block;font-size:15px;margin-bottom:15px}.red-packet footer{border-top:1px solid #ef896e;padding-top:7px;font-size:11px;color:#ffe3b6}.composer{background:#fff;border-top:1px solid var(--line);padding:10px 18px 13px;position:relative}.tools{display:flex;gap:13px}.tool{background:transparent;border:0;color:#666;font-size:20px;cursor:pointer;padding:2px}.tool.recording{color:#df493a;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}textarea{border:0;outline:0;width:100%;resize:none;font:15px inherit;padding:8px 0;max-height:100px}.send{border:0;border-radius:5px;background:var(--green);color:#fff;padding:8px 18px;cursor:pointer;float:right}.emoji-panel{position:absolute;bottom:100%;left:18px;background:white;border:1px solid var(--line);padding:9px;border-radius:8px;box-shadow:0 4px 13px #ccc;font-size:21px;word-spacing:5px;cursor:pointer}.typing{padding:0 45px 6px;color:#999;font-size:12px}dialog{border:0;border-radius:14px;box-shadow:0 10px 35px #555;max-width:92vw}.close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:26px;color:#777;cursor:pointer}.packet-dialog{padding:0;background:transparent;overflow:hidden}.packet-card{width:310px;text-align:center;color:white;background:linear-gradient(145deg,#e56340,#ba2e25);padding:46px 28px 30px}.packet-sender{font-size:15px}.packet-title{font-size:20px;margin:16px 0}.packet-card p{color:#ffd3a0;font-size:12px}.open-packet{width:86px;height:86px;border:0;border-radius:50%;background:#f8c34e;color:#9b3b1d;font-size:30px;margin:18px auto;display:block;cursor:pointer}.details-link{background:transparent;border:0;color:#ffe0ae;cursor:pointer}.details-dialog,.send-dialog{width:380px;padding:25px}.details-dialog h2,.send-dialog h2{margin-top:0}.claim-list{border-top:1px solid var(--line)}.claim{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}.claim small{color:#999}.send-dialog label{display:block;margin:15px 0;color:#555}.send-dialog input{display:block;width:100%;padding:9px;margin-top:6px;border:1px solid #ddd;border-radius:5px;font:inherit}.wide{width:100%;float:none}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#222d;color:#fff;padding:10px 16px;border-radius:20px;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:650px){.sidebar{display:none}.app{height:100dvh}.messages{padding:15px}.message{max-width:88%}header{padding:12px 16px}}
.conversation-list{display:flex;flex-direction:column;gap:3px}.conversation{width:100%}.avatar.group{background:#5a78d2}.new-group{background:#fff;border:1px dashed #bfc6cd;border-radius:8px;padding:9px;color:#5272ca;cursor:pointer}.header-actions{display:flex!important;gap:8px;align-items:center}.sender-name{font-size:11px;color:#999;margin-bottom:4px}.member-options{display:flex;gap:10px;margin-top:8px}.member-options label{margin:0;font-size:13px}.member-options input{display:inline;width:auto;margin:0 3px 0 0}
.app-view{display:none;flex:1;overflow:auto;background:#f7f8fa}.app-view.active-view{display:block}.bottom-nav{display:none}.sidebar .bottom-nav{height:62px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;margin:0 -14px -22px}.nav-item{border:0;background:transparent;color:#8d97a4;font-size:11px;padding:7px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}.nav-item span{font-size:20px}.nav-item.active{color:#168de3}.page-header{height:82px;padding:24px 30px 12px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.page-header h1{font-size:24px;margin:0}.round-add{border:0;background:transparent;color:#2089e8;font-size:31px;cursor:pointer}.page-search{margin:15px 25px}.quick-actions{background:#fff;padding:0 25px}.quick-actions button{display:flex;width:100%;align-items:center;gap:12px;border:0;border-bottom:1px solid #f0f0f0;background:white;padding:13px 0;text-align:left;font:16px inherit;cursor:pointer}.quick-actions span{display:inline-grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#5d7cf1;color:#fff}.quick-actions button:first-child span{background:#ffab3e}.section-label{padding:12px 25px;margin:0;color:#91959d;font-size:12px}.list-panel{background:#fff}.contact-row{display:flex;align-items:center;gap:11px;padding:11px 25px;border-bottom:1px solid #f0f0f0}.contact-row b,.contact-row small{display:block}.contact-row small{color:#999;margin-top:3px}.empty-state{max-width:380px;text-align:center;margin:15vh auto;color:#9a9ea5;padding:20px}.empty-state>div{font-size:48px;color:#5a78d2}.empty-state h2{font-size:18px;color:#3b4048}.profile-card{display:flex;align-items:center;gap:13px;padding:22px 28px;background:#fff;margin-top:13px}.profile-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:linear-gradient(135deg,#16a56b,#57c0cf);font-size:25px;color:white;font-weight:800}.profile-card b,.profile-card small{display:block}.profile-card small{color:#90949a;margin-top:5px}.profile-card>span:last-child{margin-left:auto;font-size:28px;color:#bbb}.settings-panel{margin-top:13px;background:#fff}.settings-panel button{display:flex;align-items:center;gap:12px;width:100%;padding:15px 28px;border:0;border-bottom:1px solid #f0f0f0;background:white;font:16px inherit;text-align:left;cursor:pointer}.settings-panel button span{color:#198ce7;width:22px}.settings-panel button i{margin-left:auto;font-style:normal;font-size:24px;color:#c2c5c8}.profile-note{text-align:center;color:#a4a7ac;font-size:12px;line-height:1.8;margin-top:26px}
.chat:not(.active-view){display:none}
.real-friends{max-height:32vh;overflow:auto;flex-shrink:0}.real-friends>small{display:block;color:#89958c;margin-top:6px}.real-friend{display:flex;align-items:center;gap:10px;text-decoration:none;color:#263d30;padding:9px;border-radius:8px}.real-friend:hover{background:#e0f1e6}.real-friend small{display:block;color:#819286;font-size:11px;margin-top:3px}.request-count{font-style:normal;border-radius:12px;background:#df4d47;color:white;padding:2px 6px;font-size:11px}.friend-notice{position:fixed;right:18px;top:18px;z-index:20;background:white;border:1px solid #cbe4d7;border-radius:12px;box-shadow:0 5px 25px #0002;padding:15px;max-width:calc(100vw - 36px)}.friend-notice b{display:block;margin-bottom:10px}.friend-notice button,.friend-request button{border:0;border-radius:7px;background:#198756;color:white;padding:7px 12px;margin:4px;cursor:pointer}.friend-request{padding:12px 0;border-bottom:1px solid #eee}.friend-request small{display:block;color:#89958c;margin:6px 0}#realRequests{max-height:50vh;overflow:auto}
.call-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;background:#fff;border-bottom:1px solid #e8e8e8}.call-actions a{color:#147c55;background:#e9f6ef;border-radius:8px;padding:8px 12px;text-decoration:none}.call-actions small{color:#888}
#emojiPanel{width:min(350px,calc(100vw - 40px));max-height:300px;overflow-y:auto;word-spacing:normal}#emojiPanel h4{margin:8px 0;font-size:12px;color:#77817c;font-weight:500}.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.emoji-grid button{min-height:36px;border-radius:6px}.emoji-grid button:hover{background:#e9f6ee}#packetCountHint{display:block;color:#888;line-height:1.6;margin-top:8px}#packetCount:disabled{background:#f1f3f4;color:#777}
.sidebar{flex-shrink:0;min-height:0}.conversation-list{overflow:auto;min-height:0}.sidebar-nav{flex-shrink:0}.app{height:100dvh;overflow:hidden}.chat{min-height:0}.messages{min-height:0}.contact-row{width:100%;background:white;border:0;border-bottom:1px solid #eee;text-align:left;cursor:pointer;font:inherit}.mobile-conversations{display:none}.emoji-panel button{border:0;background:none;font-size:22px;cursor:pointer}[hidden]{display:none!important}
@media(max-width:650px){.mobile-conversations{display:flex;justify-content:space-between;padding:8px 16px}.mobile-conversations button{background:white;border:1px solid #ddd;border-radius:8px;padding:6px 10px;color:#168d63}.bottom-nav{width:100%}.sidebar .bottom-nav{display:none}}
.settings-dialog{width:420px;padding:25px}.settings-dialog h2{margin:0 0 7px}.settings-intro{color:#92979f;font-size:13px;margin:0 0 15px}.setting-list{border-top:1px solid var(--line)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 2px;border-bottom:1px solid var(--line)}.setting-row b,.setting-row small{display:block}.setting-row small{font-weight:400;font-size:12px;color:#999;margin-top:3px}.switch{appearance:none;width:43px;height:25px;border-radius:20px;background:#d9dde2;position:relative;cursor:pointer;transition:.2s}.switch::after{content:'';position:absolute;width:21px;height:21px;top:2px;left:2px;border-radius:50%;background:white;box-shadow:0 1px 2px #aaa;transition:.2s}.switch:checked{background:#168de3}.switch:checked::after{left:20px}.setting-value{color:#8e949c;font-size:13px}
.large-text{font-size:16px}.large-text .conversation small,.large-text header small,.large-text .sender-name,.large-text .time{font-size:12px}.fairness-link{color:#168354;margin-top:14px}.fairness-info{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.7;overflow-wrap:anywhere;background:#f6f7f8;padding:10px;border-radius:6px}
@media(max-width:650px){.app{padding-bottom:60px}.bottom-nav{position:fixed;z-index:4;bottom:0;left:0;right:0;height:60px;background:white;border-top:1px solid var(--line);display:flex;justify-content:space-around}.nav-item{border:0;background:transparent;color:#8d97a4;font-size:11px;padding:7px 15px;display:flex;flex-direction:column;align-items:center;gap:3px}.nav-item span{font-size:20px}.nav-item.active{color:#168de3}.page-header{height:74px;padding:19px 20px 10px}.page-search{margin:12px 18px}.quick-actions{padding:0 18px}.contact-row{padding:11px 18px}.section-label{padding:11px 18px}.profile-card{padding:19px 20px}.settings-panel button{padding:15px 20px}}