* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin:0; font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
       background:#ededed; color:#222; }
.app { max-width:640px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;
       background:#f7f7f7; position:relative; }
.topbar { display:flex; justify-content:space-between; align-items:center;
          padding:14px 16px; background:#fff; border-bottom:1px solid #e5e5e5;
          position:sticky; top:0; z-index:10; }
.topbar h1 { font-size:17px; margin:0; }
.link { color:#576b95; text-decoration:none; font-size:14px; }

/* 底部双 Tab */
.bottombar { position:fixed; bottom:0; left:50%; transform:translateX(-50%);
             width:100%; max-width:640px; display:flex; background:#fff;
             border-top:1px solid #e5e5e5; padding-bottom:env(safe-area-inset-bottom); }
.tab { flex:1; text-align:center; padding:8px 0 10px; font-size:20px;
       color:#7a7a7a; text-decoration:none; display:flex; flex-direction:column;
       align-items:center; gap:2px; }
.tab span { font-size:11px; }
.tab.active { color:#07c160; }

/* 聊天区 */
.chat-box { flex:1; overflow-y:auto; padding:12px 12px 150px; }
.msg { display:flex; gap:8px; margin-bottom:16px; align-items:flex-start; }
.msg.me { flex-direction:row-reverse; }
.avatar { border-radius:8px; object-fit:cover; background:#ddd; }
.avatar.small { width:38px; height:38px; }
.avatar.big { width:96px; height:96px; border-radius:12px; }
.bubble-wrap { max-width:72%; display:flex; flex-direction:column; }
.msg.me .bubble-wrap { align-items:flex-end; }
.msg-name { font-size:11px; color:#999; margin-bottom:4px; padding:0 2px; }
.bubble { padding:9px 12px; border-radius:8px; background:#fff; font-size:15px;
          line-height:1.45; word-break:break-word; box-shadow:0 1px 1px rgba(0,0,0,.04); }
.msg.me .bubble { background:#95ec69; }
.composer { position:fixed; bottom:62px; left:50%; transform:translateX(-50%);
            width:100%; max-width:640px; display:flex; gap:8px; padding:8px 12px;
            background:#f7f7f7; border-top:1px solid #e5e5e5; }
.composer input { flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:8px;
                  font-size:15px; outline:none; background:#fff; }
.btn { border:none; border-radius:8px; padding:10px 16px; font-size:15px; cursor:pointer; }
.btn.primary { background:#07c160; color:#fff; }
.btn.primary:active { background:#06ad56; }

/* 主页 */
.page { padding:20px 16px 100px; }
.profile-card { background:#fff; border-radius:14px; padding:24px 18px; text-align:center;
                box-shadow:0 2px 12px rgba(0,0,0,.05); }
.avatar-wrap { display:flex; justify-content:center; margin-bottom:14px; }
.file-btn { display:inline-block; color:#576b95; font-size:14px; cursor:pointer; }
.hint { font-size:12px; color:#aaa; margin:6px 0 18px; }
.name-form { display:flex; flex-direction:column; gap:8px; text-align:left;
             max-width:320px; margin:0 auto; }
.name-form label { font-size:13px; color:#666; }
.name-form input { padding:10px 12px; border:1px solid #ddd; border-radius:8px;
                   font-size:15px; outline:none; }
.alert { padding:10px 12px; border-radius:8px; margin-bottom:12px; font-size:14px; }
.alert.ok { background:#e7f8ee; color:#07a84f; }
.alert:not(.ok) { background:#fdecec; color:#d33; }

/* 登录/注册 */
.auth-page { display:flex; align-items:center; justify-content:center;
             min-height:100vh; background:linear-gradient(135deg,#e8f5e9,#e3f2fd);
             padding:20px; }
.auth-card { background:#fff; border-radius:16px; padding:28px 24px; width:100%;
             max-width:380px; box-shadow:0 8px 30px rgba(0,0,0,.08); }
.auth-card h1 { margin:0 0 20px; font-size:22px; text-align:center; }
.auth-card label { display:block; font-size:13px; color:#666; margin:14px 0 6px; }
.auth-card input { width:100%; padding:11px 12px; border:1px solid #ddd;
                   border-radius:8px; font-size:15px; outline:none; }
.auth-card input:focus { border-color:#07c160; }
.auth-card .btn { width:100%; margin-top:20px; }
.switch { text-align:center; font-size:14px; color:#888; margin-top:16px; }
.switch a { color:#07c160; text-decoration:none; }