:root{color:#182018;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#76ce921f,#0000 28%),linear-gradient(#f1f6f2 0%,#e7eee8 100%);font-family:PingFang SC,Microsoft YaHei,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0}button,textarea,input{font:inherit}button{cursor:pointer}textarea{resize:none}input{outline:none}.app-shell{place-items:center;min-height:100vh;padding:20px 12px;display:grid}.phone-frame{width:min(100%,430px);height:min(920px,100vh - 24px);min-height:min(920px,100vh - 24px);padding:14px 8px calc(92px + env(safe-area-inset-bottom,0px));background:linear-gradient(#f8fbf8,#f4f8f4);border-radius:38px;grid-template-rows:auto auto 1fr;gap:10px;display:grid;position:relative;overflow:hidden;box-shadow:0 26px 56px #44684a24,inset 0 1px #ffffffd1}.phone-frame.chat-mode{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));grid-template-rows:1fr}.phone-frame.auth-mode{background:radial-gradient(circle at 0 0,#41c78929,#0000 34%),radial-gradient(circle at 100% 100%,#f4c05629,#0000 28%),linear-gradient(#f7fbf7,#eff6f0);grid-template-rows:1fr;padding:12px}.phone-glow{filter:blur(26px);pointer-events:none;background:#72cd8a14;border-radius:999px;width:220px;height:220px;position:absolute;inset:auto -80px 45% auto}.dialog-overlay{z-index:30;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:radial-gradient(circle at top,#43c37d24,#0000 32%),#121e1557;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.error-dialog{color:#193020;background:linear-gradient(#fffffff7,#f4f9f4f0);border-radius:28px;width:min(100%,320px);padding:22px 20px 18px;box-shadow:0 26px 48px #253a2938,inset 0 1px #fffffff2}.error-dialog-badge{color:#16874e;letter-spacing:.16em;background:#1da85f1a;border-radius:999px;align-items:center;min-height:28px;padding:0 12px;font-size:12px;font-weight:800;display:inline-flex}.error-dialog h3{margin:16px 0 8px;font-size:24px;line-height:1.1}.error-dialog p{color:#617265;margin:0;font-size:14px;line-height:1.6}.error-dialog-button{color:#fff;background:linear-gradient(135deg,#2cbc6b,#14914d);border:0;border-radius:16px;width:100%;height:46px;margin-top:18px;font-size:14px;font-weight:800;box-shadow:0 14px 22px #28a45c38}.dialog-fade-enter-active,.dialog-fade-leave-active{transition:opacity .2s}.dialog-fade-enter-active .error-dialog,.dialog-fade-leave-active .error-dialog{transition:transform .2s,opacity .2s}.dialog-fade-enter-from,.dialog-fade-leave-to{opacity:0}.dialog-fade-enter-from .error-dialog,.dialog-fade-leave-to .error-dialog{opacity:0;transform:translateY(10px)scale(.98)}.page-bar,.page-title,.conversation-top,.conversation-foot,.composer-input,.bottom-nav,.nav-item,.profile-main,.shortcut-card,.setting-row,.contact-row,.messages-summary,.top-actions,.top-search{align-items:center;display:flex}.page-bar{z-index:1;justify-content:space-between;gap:10px;padding:4px 8px 2px;position:relative}.page-bar.detail{z-index:8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#f8fbf8fa,#f8fbf8e6);padding:4px 8px 10px}.page-title{flex-direction:column;align-items:flex-start;gap:1px;min-width:0}.page-title strong{letter-spacing:-.03em;color:#182418;font-size:21px;font-weight:700;line-height:1.15}.page-title small,.conversation-preview,.conversation-top small,.contact-meta small,.setting-row small,.message-row small,.messages-summary small,.empty-state p{color:#748275}.back-button,.icon-ghost,.outline-button,.send-button,.icon-button,.conversation-row,.nav-item,.contact-row,.setting-row,.search-toggle{border:0}.back-button,.icon-ghost,.search-toggle{color:#269859;background:#ffffffe6;border-radius:14px;min-width:40px;height:40px;padding:0 12px;font-weight:700;box-shadow:0 4px 10px #5e7c610f}.top-actions{gap:8px}.top-search{justify-content:flex-start;gap:8px;width:40px;transition:width .22s,padding .22s;overflow:hidden}.top-search.expanded{width:190px;padding-right:10px}.top-search input{color:#1d281e;background:0 0;border:0;width:100%;min-width:0}.top-search input::placeholder{color:#97a498}.messages-home,.contacts-page,.me-page,.chat-detail-page,.chat-card.detail{gap:10px;min-height:0;display:grid}.chat-detail-page{grid-template-rows:auto 1fr;gap:0;height:100%;min-height:0;overflow:hidden}.chat-card,.profile-card,.shortcut-card,.content-card{z-index:1;position:relative}.content-card,.chat-card,.profile-card{background:#ffffff9e;border-radius:24px;padding:14px;box-shadow:inset 0 1px #ffffffb8}.auth-page{z-index:1;grid-template-rows:auto 1fr;gap:10px;height:100%;min-height:0;display:grid;position:relative}.auth-hero,.auth-card{border-radius:32px;position:relative;overflow:hidden}.auth-hero{color:#173222;background:linear-gradient(145deg,#ffffffe6,#f1f9f1c2),radial-gradient(circle at 100% 0,#4cc78333,#0000 34%);min-height:174px;padding:22px 20px 18px;box-shadow:0 22px 40px #4a70511f,inset 0 1px #fffc}.auth-badge{color:#13824c;letter-spacing:.18em;background:#1aa4601f;border-radius:999px;align-items:center;min-height:28px;padding:0 12px;font-size:12px;font-weight:800;display:inline-flex}.auth-hero h1{margin:14px 0 6px;font-size:32px;line-height:1.08}.auth-hero p{z-index:1;color:#607262;max-width:264px;margin:0;font-size:13px;line-height:1.45;position:relative}.auth-orbit{pointer-events:none;border-radius:999px;position:absolute}.auth-orbit-one{background:radial-gradient(circle,#46d08a57,#46d08a00);width:160px;height:160px;top:-42px;right:-26px}.auth-orbit-two{border:1px solid #17824c1f;width:92px;height:92px;bottom:44px;right:68px}.auth-card{background:#ffffffc2;flex-direction:column;min-height:0;padding:14px;display:flex;box-shadow:0 18px 34px #576e591f,inset 0 1px #ffffffdb}.auth-switch{background:#ebf3ece6;border-radius:20px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:6px;display:grid}.auth-switch-item{color:#709074;background:0 0;border:0;border-radius:16px;height:42px;font-weight:700;transition:background .2s,color .2s,transform .2s}.auth-switch-item.active{color:#fff;background:linear-gradient(135deg,#2aba68,#14904d);transform:translateY(-1px)}.auth-form{flex-direction:column;flex:1;gap:10px;margin-top:14px;display:flex}.auth-avatar-picker{cursor:pointer;background:#f5faf5f5;border:1px solid #89a58e24;border-radius:20px;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:10px 12px;display:grid}.auth-avatar-input,.profile-avatar-input{display:none}.auth-avatar-preview,.profile-avatar{place-items:center;display:grid;overflow:hidden}.auth-avatar-preview{color:#fff;background:linear-gradient(135deg,#58ca86,#2da45f);border-radius:20px;width:62px;height:62px;font-size:22px;font-weight:800;box-shadow:0 10px 18px #35a8622e}.auth-avatar-preview img,.profile-avatar img{object-fit:cover;width:100%;height:100%}.auth-avatar-copy strong{color:#223324;display:block}.auth-avatar-copy small{color:#728374;margin-top:2px;font-size:12px;display:block}.auth-field{gap:6px;display:grid}.auth-field span{color:#3a4f3f;font-size:13px;font-weight:700}.auth-gender-group{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.auth-gender-item{color:#506351;background:#f8fbf8f5;border:1px solid #86a08b33;border-radius:14px;height:42px;font-weight:700;transition:border-color .2s,background .2s,color .2s}.auth-gender-item.active{color:#fff;background:linear-gradient(135deg,#2cbc6b,#14914d);border-color:#22a45c3d}.auth-field input{color:#203123;background:#f8fbf8f5;border:1px solid #86a08b33;border-radius:16px;width:100%;height:50px;padding:0 16px;box-shadow:inset 0 1px #ffffffeb}.auth-field input:focus{border-color:#24a0586b;box-shadow:0 0 0 4px #36be6c1a,inset 0 1px #ffffffeb}.auth-error{color:#d14c4c;opacity:0;min-height:16px;margin:-2px 0 0;font-size:12px}.auth-error.visible{opacity:1}.auth-submit{color:#fff;background:linear-gradient(135deg,#2cbc6b,#14914d);border:0;border-radius:16px;height:50px;margin-top:4px;font-size:15px;font-weight:800;box-shadow:0 14px 22px #28a45c38}.auth-submit:disabled{cursor:default;opacity:.7}.auth-hint{color:#738473;text-align:center;font-size:12px}.section-mini-title{color:#5d705f;letter-spacing:.08em;margin-bottom:12px;font-size:12px;font-weight:800}.section-caption{color:#7d8b7d;margin:-6px 0 12px;font-size:12px;line-height:1.4}.friend-requests-card{gap:10px;display:grid}.friend-request-list{gap:8px;display:grid}.friend-request-item{background:#f7faf7f5;border-radius:18px;gap:8px;padding:10px 12px;display:grid}.friend-request-main{grid-template-columns:auto 1fr;align-items:start;gap:10px;display:grid}.friend-request-copy{gap:2px;display:grid}.friend-request-copy strong{color:#223324}.friend-request-copy small,.friend-request-copy em{color:#738473;font-size:12px;font-style:normal}.friend-request-copy small em{color:#8a968b}.friend-request-copy p{color:#415443;margin:0;font-size:13px;line-height:1.35}.friend-request-actions{justify-content:flex-end;align-items:center;gap:8px;display:flex}.friend-request-status{color:#239657;font-size:13px;font-weight:700}.friend-request-item[data-status=rejected] .friend-request-status{color:#c45454}.auth-submit.compact{width:auto;min-width:88px;height:38px;margin-top:0;padding:0 16px}.empty-state.compact{padding:6px 0 2px}.friend-dialog{gap:10px;display:grid}.friend-dialog-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px;display:grid}.messages-panel{z-index:1;border-radius:18px;grid-template-rows:auto 1fr;min-height:0;max-height:717px;display:grid;position:relative;overflow:hidden}.messages-summary{justify-content:space-between;padding:2px 12px 8px}.messages-summary span{color:#192419;font-size:15px;font-weight:700}.conversation-list{scrollbar-width:none;background:#ffffffe0;border-radius:18px;gap:0;min-height:0;overflow:auto}.conversation-list::-webkit-scrollbar{display:none}.search-list{padding:8px 0}.search-section+.search-section{margin-top:2px}.search-section-title{color:#6e7c70;letter-spacing:.06em;padding:10px 14px 6px;font-size:12px;font-weight:800}.conversation-shell{position:relative;overflow:hidden}.conversation-row,.contact-row,.setting-row{text-align:left;background:#fffffffa;width:100%;padding:10px 14px}.conversation-row{z-index:3;grid-template-columns:auto 1fr;gap:10px;display:grid;position:relative;box-shadow:inset 0 -1px #4a664d14}.conversation-row.search-row:disabled{cursor:default;opacity:.72}.conversation-shell:last-child .conversation-row{box-shadow:none}.contact-row{border-radius:18px;grid-template-columns:auto 1fr;gap:12px;margin-bottom:10px;display:grid}.setting-row{border-radius:18px;justify-content:space-between;margin-bottom:10px}.contact-row:hover,.setting-row:hover{background:#f4f8f4}.avatar{color:#fff;letter-spacing:.08em;border-radius:16px;place-items:center;width:44px;height:44px;font-weight:700;display:grid}.avatar.small{border-radius:15px;width:42px;height:42px}.avatar.large{border-radius:20px;width:56px;height:56px}.avatar.xl{border-radius:24px;width:70px;height:70px}.conversation-body,.contact-meta{min-width:0}.conversation-top{justify-content:space-between;gap:8px}.conversation-top strong,.contact-meta strong{color:#1b2a1d;font-size:16px}.conversation-preview{text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:12px;display:block;overflow:hidden}.conversation-foot{gap:8px;margin-top:5px}.presence,.tag,.unread-dot,.group-title{justify-content:center;align-items:center;display:inline-flex}.presence,.tag{border-radius:999px;min-height:22px;padding:0 8px;font-size:11px}.presence[data-state=online]{color:#239657;background:#e7f8ed}.presence[data-state=busy]{color:#b87a07;background:#fff4dc}.presence[data-state=offline]{color:#6c776d;background:#eef1ee}.tag{color:#4d6a54;background:#eef7f0}.unread-dot{color:#fff;background:#f45c5c;border-radius:999px;min-width:22px;min-height:22px;margin-left:auto;padding:0 6px;font-size:11px;font-weight:700}.empty-state{text-align:center;padding:24px 16px 28px}.empty-state strong{color:#1b251c}.empty-state p{margin:8px 0 0;font-size:13px}.contact-shortcuts{gap:10px;display:grid}.shortcut-button{text-align:left;border:0;width:100%;position:relative}.shortcut-badge,.nav-badge{color:#fff;background:#f45c5c;border-radius:999px;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 6px;font-size:11px;font-weight:700;display:inline-flex;position:absolute;top:-6px;right:-10px;box-shadow:0 8px 14px #f45c5c3d}.shortcut-badge{z-index:1;top:10px;right:12px}.shortcut-card{background:#ffffffbd;border-radius:24px;gap:12px;padding:14px 16px}.shortcut-card strong{color:#1d2a1f}.shortcut-card p{color:#7a867b;margin:4px 0 0;font-size:12px}.shortcut-icon{color:#fff;border-radius:16px;place-items:center;width:42px;height:42px;font-weight:700;display:grid}.shortcut-icon.green{background:linear-gradient(135deg,#62d39f,#28af66)}.shortcut-icon.teal{background:linear-gradient(135deg,#58d0d0,#2599a0)}.contacts-card{scrollbar-width:none;min-height:0;max-height:540px;overflow:auto}.contacts-card-full,.new-friends-panel{max-height:none}.contacts-card::-webkit-scrollbar{display:none}.contact-group{gap:10px;display:grid}.group-title{color:#5b6e5d;background:#edf5ee;border-radius:12px;width:30px;height:30px;font-size:12px;font-weight:700}.profile-card{gap:16px;display:grid}.page-title-inline{flex-direction:row;align-items:center;gap:8px}.new-friends-header{position:relative}.new-friends-title{flex:1;justify-content:center}.new-friends-title .back-button{position:absolute;left:0}.new-friends-title .page-title-inline,.new-friends-title>div{align-items:center;display:flex}.new-friend-count{color:#24a058;background:#ebf7ee;border-radius:999px;justify-content:center;align-items:center;min-width:32px;height:32px;padding:0 10px;font-size:13px;font-weight:700;display:inline-flex}.profile-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.profile-avatar-picker{cursor:pointer}.profile-avatar{position:relative}.profile-avatar:after{content:"换";color:#1f9a58;background:#fff;border-radius:999px;place-items:center;width:24px;height:24px;font-size:12px;font-weight:800;display:grid;position:absolute;bottom:-2px;right:-2px;box-shadow:0 4px 10px #47624a1f}.profile-upload-row{cursor:pointer}.profile-main{gap:14px}.profile-main h2{margin:0}.profile-main p,.profile-main small{margin:4px 0 0}.outline-button{color:#27985a;background:#edf7ef;border-radius:16px;height:42px;font-weight:700}.outline-button.danger{color:#c45454;background:#fff2f2}.chat-card.detail{min-height:0;box-shadow:none;background:0 0;border-radius:0;grid-template-rows:minmax(0,1fr) auto;gap:0;padding:0;display:grid;overflow:hidden}.chat-title{gap:2px}.chat-title .page-title strong{letter-spacing:-.02em;font-size:18px;line-height:1.2}.chat-title .page-title small{font-size:12px;line-height:1.25}.title-inline{align-items:center;gap:8px;display:flex}.presence.chip{min-height:20px;padding:0 8px}.message-list{scrollbar-width:none;flex-direction:column;gap:10px;min-height:0;padding:10px 12px 6px;display:flex;overflow:auto}.message-list::-webkit-scrollbar{display:none}.message-row{align-items:flex-end;gap:8px;display:flex}.message-entry{display:grid}.message-entry.system{gap:2px}.message-time-divider{color:#9eaaa0;justify-content:center;margin:10px 0 8px;font-size:11px;line-height:1;display:flex}.message-row.system{justify-content:center;padding:4px 0 8px}.message-avatar{border-radius:14px;flex:0 0 36px;width:36px;height:36px;font-size:12px}.message-avatar.mine{order:2}.message-row.me .bubble{order:1}.message-row.contact .bubble{order:2}.message-row.contact{justify-content:flex-start}.message-row.me{justify-content:flex-end}.bubble-wrap{flex-direction:column;width:fit-content;max-width:82%;display:flex}.message-row.me .bubble-wrap,.message-row.contact .bubble-wrap{align-items:stretch}.bubble{border-radius:16px;max-width:100%;padding:12px 14px;box-shadow:inset 0 1px #ffffffe6,0 8px 18px #71817214}.system-bubble{color:#4f6052;text-align:left;justify-items:stretch;gap:8px;width:min(100%,308px);padding:0;display:grid}.system-bubble p{margin:0;font-size:13px;line-height:1.5}.system-copy{color:#536655;text-align:center;background:#f5f8f4f5;border-radius:16px;padding:12px 14px;box-shadow:inset 0 1px #ffffffe6,0 8px 18px #71817214}.bubble-image,.bubble-video{padding:8px}.bubble-audio{min-width:168px;padding-right:14px}.message-row.contact .bubble{color:#536655;background:#f5f8f4f5}.message-row.me .bubble{color:#16311d;background:linear-gradient(#dcf5e0f5,#c9edd0f5)}.message-row p{margin:0;line-height:1.5}.media-image,.media-poster{border-radius:14px;width:100%;max-width:220px;display:block}.media-video{position:relative}.play-badge,.duration-badge{color:#fff;border-radius:999px;justify-content:center;align-items:center;display:inline-flex;position:absolute}.play-badge{background:#00000075;width:40px;height:40px;font-size:16px;top:50%;left:50%;transform:translate(-50%,-50%)}.duration-badge{background:#0000008a;min-height:24px;padding:0 8px;font-size:12px;bottom:10px;right:10px}.media-audio{align-items:center;gap:8px;display:flex}.audio-wave{flex:1;align-items:center;gap:2px;min-height:24px;display:flex}.audio-wave i{opacity:.72;background:currentColor;border-radius:999px;width:3px;display:block}.message-status-row{justify-content:flex-end;padding-right:44px;display:flex}.message-meta{color:#8a968b;margin-top:2px;padding:0 2px;font-size:11px;line-height:1.2;display:block}.chat-bottom{margin-bottom:calc(var(--composer-offset,0px));background:linear-gradient(#f3f8f300,#f3f8f3eb 18%,#f3f8f3fa);flex-direction:column;justify-content:flex-end;gap:8px;padding:8px 10px 10px;transition:margin-bottom .2s;display:flex}.plus-sheet{background:#f8fbf8fa;border-radius:24px;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;padding:16px 12px 10px;display:grid;box-shadow:0 14px 28px #5369561a,inset 0 1px #ffffffdb}.composer{background:#f8fbf8f5;border-radius:26px;box-shadow:0 -6px 18px #5067530f,inset 0 1px #ffffffd1}.plus-action{color:#324334;background:0 0;border:0;justify-items:center;gap:8px;padding:0;display:grid}.plus-action-icon{color:#27a15c;background:linear-gradient(#fff,#eaf3ec);border-radius:18px;place-items:center;width:52px;height:52px;font-size:18px;font-weight:700;display:grid;box-shadow:0 6px 14px #546a5614}.plus-action span:last-child{font-size:12px}.composer-input{background:0 0;border-radius:22px;gap:10px;padding:10px}.icon-button{color:#29985a;background:#e7f2e9;border-radius:14px;flex:0 0 38px;width:38px;height:38px;font-size:18px;font-weight:700}.icon-button.active{color:#178f4a;background:#dff4e7}.composer-input textarea{color:#182118;background:0 0;border:0;outline:none;flex:1;min-height:38px;max-height:110px;padding-top:9px}.composer-input textarea::placeholder{color:#8a958b}.send-button{color:#fff;background:#27b05e;border-radius:14px;min-width:68px;height:38px;font-weight:700}.voice-button{color:#243726;background:#fff;border:0;border-radius:14px;flex:1;min-height:38px;font-weight:700}.plus-button{font-size:22px}.bottom-nav{left:8px;right:8px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5;background:#ffffffc7;border-radius:24px;justify-content:space-around;gap:8px;padding:10px 8px 2px;position:absolute;box-shadow:0 10px 24px #5067531f}.nav-item{color:#859286;background:0 0;border-radius:18px;flex-direction:column;flex:1;justify-content:center;gap:5px;padding:8px 4px;transition:background .2s,color .2s,transform .2s,box-shadow .2s}.nav-item.active{color:#24a058;background:linear-gradient(#e7f8edfa,#d6f2dffa);transform:translateY(-1px);box-shadow:inset 0 1px #ffffffeb,0 8px 16px #30a05b1a}.nav-icon{border-radius:8px;place-items:center;width:28px;height:28px;display:grid;position:relative;overflow:visible}.nav-icon img{object-fit:contain;filter:saturate(.78)opacity(.82);width:100%;height:100%;transition:filter .2s,transform .2s;display:block}.nav-item.active .nav-icon img{filter:none;transform:translateY(-1px)}.nav-item span:last-child{font-size:12px;font-weight:600}.nav-item.active span:last-child{color:#1d9a56}@media (width>=768px){.phone-frame{min-height:900px}.messages-panel,.contacts-card{max-height:540px}.chat-card.detail{height:717px}}@media (width<=420px){.app-shell{padding:0}.phone-frame{width:100%;height:100vh;min-height:100vh;padding:12px 8px calc(92px + env(safe-area-inset-bottom,0px));border-radius:0}.phone-frame.chat-mode{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));grid-template-rows:1fr}.phone-frame.auth-mode{padding:10px}.page-title strong{font-size:22px}.top-search.expanded{width:156px}.messages-panel,.contacts-card{max-height:540px}.bottom-nav{left:8px;right:8px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}.composer{margin-bottom:env(safe-area-inset-bottom,0px)}.auth-hero h1{font-size:28px}.auth-hero{min-height:164px}.auth-card{padding:12px}}