:root{--bg:#fff;--surface:#fff;--surface2:#f4f4f5;--panel:#fff;--accent:#3390ec;--text:#1c1c1e;--muted:#8e8e93;--border:#e6e8eb;--bubble:#fff;--bubble-me:#effdde;--header:#fff}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;padding-bottom:64px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;line-height:1.45}.app{min-height:100vh}.app-header{z-index:50;background:var(--header);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.brand{letter-spacing:.3px;color:var(--accent);align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.brand .logo{background:var(--accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:15px;font-weight:800;display:flex}.me{align-items:center;gap:10px;display:flex}.me-name{color:var(--muted);font-size:13px}main{max-width:900px;margin:0 auto}.section-title{text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);padding:14px 16px 6px;font-size:12px}.list{background:var(--surface)}.row{border-bottom:1px solid var(--border);cursor:pointer;align-items:center;gap:12px;padding:11px 16px;display:flex}.row:active{background:var(--surface2)}.avatar{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:18px;font-weight:600;display:flex}.row-main{flex:1;min-width:0}.row-name{font-size:15px;font-weight:600}.row-sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.tag{border-radius:4px;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:700}.tag-group{color:var(--accent);background:#e7f0ff}.tag-channel{color:#e07b00;background:#fff0e0}.online-dot,.offline-dot{border-radius:50%;width:9px;height:9px;margin-left:auto}.online-dot{background:#4dca5f}.offline-dot{background:#c8c8cd}.fab{background:var(--accent);color:#fff;cursor:pointer;z-index:60;border:none;border-radius:50%;justify-content:center;align-items:center;width:54px;height:54px;font-size:28px;display:flex;position:fixed;bottom:78px;right:18px;box-shadow:0 3px 12px #3390ec73}.conversation{flex-direction:column;min-height:100vh;display:flex}.chat-header{z-index:40;background:var(--header);border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:10px 14px;display:flex;position:sticky;top:0}.back-btn{cursor:pointer;color:var(--muted);margin-right:2px;font-size:22px}.chat-body{background:#e6ebee;flex-direction:column;flex:1;gap:4px;width:100%;max-width:900px;margin:0 auto;padding:14px 12px 80px;display:flex}.msg{word-wrap:break-word;border-radius:12px;max-width:80%;padding:6px 11px 8px;font-size:15px;position:relative;box-shadow:0 1px 1px #00000014}.msg.them{background:var(--bubble);border-bottom-left-radius:4px;align-self:flex-start}.msg.me{background:var(--bubble-me);border-bottom-right-radius:4px;align-self:flex-end}.msg .sender{color:var(--accent);margin-bottom:1px;font-size:13px;font-weight:600}.msg .time{color:var(--muted);float:right;margin:4px 0 -2px 8px;font-size:11px}.composer{background:var(--header);padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;border-top:1px solid var(--border);align-items:center;gap:8px;display:flex;position:fixed;bottom:0;left:0;right:0}.composer input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:22px;outline:none;flex:1;padding:11px 16px;font-size:15px}.send-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;width:42px;height:42px;font-size:18px}.bottom-nav{background:var(--header);border-top:1px solid var(--border);z-index:100;padding-bottom:env(safe-area-inset-bottom);display:flex;position:fixed;bottom:0;left:0;right:0}.nav-item{cursor:pointer;color:var(--muted);flex-direction:column;flex:1;align-items:center;gap:3px;padding:9px 4px;font-size:11px;display:flex}.nav-item.active{color:var(--accent)}.nav-item svg{stroke:currentColor;fill:none;stroke-width:1.8px;width:22px;height:22px}.center{text-align:center;background:#e6ebee;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:100vh;padding:20px;display:flex}.welcome-logo{color:var(--accent);font-size:30px;font-weight:800}.welcome-sub{color:var(--muted);max-width:320px;font-size:14px}.card{background:var(--surface);border-radius:14px;width:100%;padding:24px;box-shadow:0 2px 10px #0000000f}.card h2{text-align:center;margin-bottom:18px;font-size:20px}.field{background:var(--surface2);border:1px solid var(--border);width:100%;color:var(--text);border-radius:10px;margin-bottom:12px;padding:13px;font-size:15px}.field:focus{border-color:var(--accent);outline:none}.btn{cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:10px;width:100%;margin-bottom:10px;padding:13px;font-size:15px;font-weight:600}.ghost{background:var(--surface2);color:var(--text)}.verify-box{background:var(--surface2);border:1px solid var(--border);color:var(--muted);border-radius:10px;align-items:center;min-height:44px;margin-bottom:12px;padding:12px;font-size:13px;display:flex}.switch{text-align:center;color:var(--muted);font-size:13px}.switch span{color:var(--accent);cursor:pointer}.toast{background:var(--accent);color:#fff;z-index:300;opacity:0;pointer-events:none;border-radius:10px;padding:12px 22px;transition:all .25s;position:fixed;bottom:90px;left:50%;transform:translate(-50%)}.toast.show{opacity:1}.empty{text-align:center;color:var(--muted);padding:40px 0;font-size:14px}.account-head{align-items:center;gap:12px;padding:8px 0 16px;display:flex}.kv{border-top:1px solid var(--border);justify-content:space-between;padding:12px 0;display:flex}.modal{background:0 0;border:none;max-width:420px;margin:auto;padding:20px}.modal::backdrop{background:#00000080}.modal-inner{background:var(--surface);border-radius:14px;padding:24px}.modal-inner h2{text-align:center;margin-bottom:18px;font-size:20px}.seg{gap:8px;margin-bottom:14px;display:flex}.seg button{border:1px solid var(--border);background:var(--surface2);cursor:pointer;color:var(--muted);border-radius:10px;flex:1;padding:10px;font-size:14px}.seg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}