/* ===== Mini-IM 微信风格样式 v3 ===== */
:root {
  /* === 微信色板 === */
  --wx-green:        #07C160;
  --wx-green-deep:   #06AD56;
  --wx-red:          #FA5151;
  --wx-warn-bg:      #FEF3E4;
  --wx-warn-fg:      #C77D2F;

  /* === 背景 === */
  --wx-bg:           #EDEDED;
  --wx-card:         #FFFFFF;
  --wx-bubble-user:  #95EC69;
  --wx-bubble-ai:    #FFFFFF;

  /* === 文字 === */
  --wx-text-1:       rgba(0,0,0,0.9);
  --wx-text-2:       rgba(0,0,0,0.5);
  --wx-text-3:       rgba(0,0,0,0.3);
  --wx-text-on-dark: #FFFFFF;

  /* === 分割线 === */
  --wx-divider:      rgba(0,0,0,0.10);
  --wx-divider-light:rgba(0,0,0,0.05);

  /* === 圆角 === */
  --wx-radius-card:  8px;
  --wx-radius-sheet: 12px;
  --wx-radius-bubble:6px;

  /* === 间距 / 触摸区 === */
  --wx-touch-min:    44px;

  /* === 阴影 === */
  --wx-shadow-card:  0 1px 2px rgba(0,0,0,.05);
  --wx-shadow-sheet: 0 -2px 12px rgba(0,0,0,.08);
  --app-status-bg:   #f7f7f7;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Helvetica Neue,sans-serif;background:var(--app-status-bg);overflow:hidden;font-size:16px}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0);background:var(--app-status-bg);z-index:9999;pointer-events:none}
input,textarea,button{font-family:inherit;outline:none;border:none}

.page{display:none;width:100%;height:100vh;flex-direction:column;position:relative}
.page.active{display:flex}

/* ===== Login ===== */
#page-login{align-items:center;justify-content:center;background:#1a1a2e;padding:40px;text-align:center}
.login-logo{font-size:72px;margin-bottom:12px}
.login-title{font-size:26px;font-weight:600;color:#fff;margin-bottom:6px}
.login-slogan{font-size:14px;color:rgba(255,255,255,.45);margin-bottom:50px}
.login-btn{width:260px;height:48px;line-height:48px;background:linear-gradient(135deg,#4cc9f0,#4361ee);color:#fff;font-size:17px;border-radius:24px;cursor:pointer;box-shadow:0 4px 20px rgba(76,201,240,.3)}
.login-btn:active{opacity:.7}
.login-btn:disabled{opacity:.5;cursor:default}
.login-footer{position:fixed;bottom:30px;font-size:12px;color:rgba(255,255,255,.25)}

/* ===== Frame + Tab Bar ===== */
#page-frame{background:#f7f7f7}
.tab-page{display:none;flex:1;overflow:hidden;padding-bottom:50px}
.tab-page.active{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
.tab-bar{position:fixed;bottom:0;left:0;right:0;height:50px;background:#f7f7f7;border-top:1px solid #d9d9d9;display:flex;z-index:20;padding-bottom:env(safe-area-inset-bottom,0)}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:4px 0 2px;color:#999;transition:color .1s}
.tab-item.active{color:var(--wx-green)}
.tab-icon{font-size:20px;line-height:1}
.tab-label{font-size:10px;margin-top:2px}

/* ===== Chat List ===== */
.chatlist-header{display:flex;align-items:center;padding:44px 12px 10px;background:#fff;border-bottom:1px solid #e6e6e6}
.menu-btn{font-size:20px;cursor:pointer;padding:4px;width:36px;color:#333}
.chatlist-title{flex:1;font-size:18px;font-weight:600;color:#191919;text-align:center}
.add-btn{font-size:20px;cursor:pointer;padding:4px;width:36px;text-align:right;color:var(--wx-green)}
.chatlist-body{flex:1;overflow-y:auto;background:#f7f7f7}
.chatlist-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#999;padding:40px}
.chat-item{display:flex;align-items:center;padding:14px 16px;background:#fff;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background .1s}
.chat-item:active{background:#ececec}
.chat-item-avatar{width:48px;height:48px;border-radius:50%;margin-right:12px;flex-shrink:0;overflow:visible;background:linear-gradient(135deg,#4cc9f0,#4361ee);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:600}
.chat-item-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.chat-item-info{flex:1;min-width:0}
.chat-item-name{font-size:16px;font-weight:500;color:#333}
.chat-item-preview{font-size:13px;color:#999;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item-time{font-size:11px;color:#9b9b9b;line-height:16px;min-width:44px;text-align:right;white-space:nowrap;margin-left:8px}

/* ===== Sidebar ===== */
.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:30}
.sidebar-overlay.show{display:block}
.sidebar{position:fixed;top:0;left:-280px;width:280px;bottom:0;background:#fff;z-index:31;transition:left .25s ease;padding-top:50px}
.sidebar.show{left:0}
.sidebar-header{display:flex;align-items:center;padding:20px 16px;border-bottom:1px solid #f0f0f0}
.sidebar-avatar{width:56px;height:56px;border-radius:50%;background:#e0e0e0;display:flex;align-items:center;justify-content:center;font-size:28px;margin-right:14px}
.sidebar-info{flex:1}
.sidebar-name{font-size:18px;font-weight:600;color:#333}
.sidebar-uid{font-size:13px;color:#999;margin-top:4px}
.sidebar-menu{padding:16px 20px;font-size:16px;color:#333;cursor:pointer;border-bottom:1px solid #f5f5f5}
.sidebar-menu:active{background:#f5f5f5}

/* ===== Search ===== */
.search-header{display:flex;align-items:center;padding:44px 12px 12px;background:#fff;border-bottom:1px solid #e6e6e6}
.search-back{font-size:20px;cursor:pointer;padding:4px 8px;color:#333}
.search-title{flex:1;font-size:17px;font-weight:600;text-align:center}
.search-body{flex:1;overflow-y:auto;padding:20px 16px;background:#f7f7f7}
.search-input-wrap{background:#fff;border-radius:8px;padding:0 14px;border:1px solid #e0e0e0;display:flex;align-items:center}
.search-input{width:100%;height:44px;font-size:18px;letter-spacing:4px;text-align:center;background:transparent;border:none;outline:none}
.search-hint{font-size:13px;color:#999;text-align:center;margin-top:10px}
.search-result-item{display:flex;align-items:center;background:#fff;border-radius:10px;padding:16px;margin-top:12px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.search-result-avatar{width:48px;height:48px;border-radius:50%;margin-right:14px;overflow:hidden;background:linear-gradient(135deg,#4cc9f0,#4361ee);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}
.search-result-avatar img{width:100%;height:100%;object-fit:cover}
.search-result-info{flex:1}
.search-result-name{font-size:16px;font-weight:500;color:#333}
.search-result-intro{font-size:13px;color:#999;margin-top:2px}
.search-result-add{font-size:13px;color:var(--wx-green);padding:6px 14px;border:1px solid var(--wx-green);border-radius:4px;cursor:pointer;flex-shrink:0;background:#fff}
.search-result-add:active{background:#f0fff0}
.search-result-added{font-size:13px;color:#ccc;padding:6px 14px}
.search-empty{text-align:center;padding:40px;color:#999}

/* ===== Profile ===== */
.profile-header{display:flex;align-items:center;padding:44px 12px 12px;background:#fff;border-bottom:1px solid #e6e6e6}
.profile-back{font-size:20px;cursor:pointer;padding:4px 8px;color:#333}
.profile-title{flex:1;font-size:17px;font-weight:600;text-align:center}
.profile-body{flex:1;overflow-y:auto;background:#f7f7f7;padding:30px 16px}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:#e0e0e0;display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 12px}
.profile-name{text-align:center;font-size:20px;font-weight:600;color:#333}
.profile-uid{text-align:center;font-size:14px;color:#999;margin-top:4px;margin-bottom:24px}
.profile-row{display:flex;align-items:center;padding:14px 16px;background:#fff;border-bottom:1px solid #f0f0f0}
.pr-label{font-size:15px;color:#666;width:80px}
.pr-value{font-size:15px;color:#333;flex:1;text-align:right}
.settings-section{background:#fff;margin-top:16px}
.settings-row{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid #f0f0f0;font-size:15px;color:#333;cursor:pointer}
.settings-row:active{background:#f8f8f8}

/* ===== Video Tab ===== */
.video-body{flex:1;background:#000;display:flex}
.video-iframe{width:100%;height:100%;border:none}

/* ===== Nav Bar (聊天顶栏) ===== */
.nav-bar{display:flex;align-items:center;padding:44px 8px 10px;background:#fff;position:relative;z-index:10;border-bottom:1px solid #d9d9d9}
.nav-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;color:#181818;font-weight:600}
.nav-avatar{width:34px;height:34px;border-radius:6px;margin:0 10px;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,#4cc9f0,#4361ee);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600}
.nav-avatar img{width:100%;height:100%;object-fit:cover}
.nav-name{flex:1;font-size:18px;font-weight:600;color:#191919}
.nav-more{padding:4px 12px;font-size:18px;cursor:pointer;color:#333;letter-spacing:2px}

/* ===== Chat Body ===== */
.chat-body{flex:1;overflow-y:auto;padding:12px 16px;-webkit-overflow-scrolling:touch;background:var(--wx-bg)}
.greeting-msg{text-align:center;color:#b0b0b0;font-size:13px;padding:20px 30px;line-height:1.6}
.time-divider{display:flex;align-items:center;justify-content:center;margin:10px 0 14px;width:100%;clear:both}
.time-divider span{display:inline-block;max-width:80%;padding:3px 8px;border-radius:4px;background:rgba(0,0,0,.08);color:#fff;font-size:12px;line-height:18px;text-align:center}
.msg-row{display:flex;margin-bottom:16px;animation:msgIn .2s ease;width:100%;clear:both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-row.ai{justify-content:flex-start}
.msg-row.user{justify-content:flex-end}
.msg-bubble{max-width:70%;padding:9px 12px;font-size:16px;line-height:1.5;word-break:break-word;position:relative;text-align:left}
.msg-row.user .msg-bubble{background:var(--wx-bubble-user);color:#222;border-radius:6px 2px 6px 6px}
.msg-row.ai .msg-bubble{background:#fff;color:#222;border-radius:2px 6px 6px 6px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.msg-text{white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}
.msg-image{max-width:140px;max-height:200px;border-radius:4px;display:block;cursor:pointer;object-fit:cover}
.msg-img-wrap{position:relative;display:inline-block;line-height:0}
.msg-img-spinner{position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border:2px solid rgba(255,255,255,.6);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.msg-image-loading{opacity:.5}

/* ===== Voice (微信白色语音条) ===== */
.msg-bubble-voice{background:#fff !important;color:#222;border-radius:6px !important;box-shadow:0 1px 2px rgba(0,0,0,.05);padding:10px 14px}
.voice-msg{display:flex;align-items:center;gap:8px;color:#222;cursor:pointer;user-select:none;padding:0}
.voice-msg .voice-icon{flex-shrink:0;color:#5a5a5a}
.voice-msg .voice-dur{font-size:14px;color:#222;flex:1;text-align:right;font-variant-numeric:tabular-nums}
.msg-row.user .voice-msg{flex-direction:row-reverse}
.msg-row.user .voice-msg .voice-dur{text-align:left}
.msg-row.user .voice-msg .voice-icon{transform:scaleX(-1)}

/* ===== Red Packet Card ===== */
.rp-card{background:#fef3e4;border-radius:8px;padding:12px 14px;min-width:180px;cursor:pointer;position:relative;border:1px solid #f7d9b0}
.rp-card-title{font-size:13px;color:#c77d2f;font-weight:500;margin-bottom:2px}
.rp-card .rp-amount-display{font-size:18px;font-weight:700;color:#c77d2f}
.rp-card .rp-amount-display .rp-small{font-size:13px}
.rp-card .rp-card-msg{font-size:12px;color:#c77d2f;opacity:.7;margin-top:2px}
.rp-card-opened{background:#f5f5f5;border-color:#ddd}
.rp-card-opened .rp-card-title,.rp-card-opened .rp-amount-display,.rp-card-opened .rp-card-msg{color:#999}
.tf-card{background:#fff;border-radius:8px;padding:12px 14px;min-width:160px;border:1px solid #e0e0e0}
.tf-card-title{font-size:12px;color:#999;margin-bottom:2px}
.tf-card-amount{font-size:20px;font-weight:700;color:#222}
.tf-card-status{font-size:12px;color:var(--wx-green);margin-top:4px;font-weight:500}
.loc-card{background:#fff;border-radius:8px;overflow:hidden;min-width:180px;border:1px solid #e6e6e6}
.loc-map-bg{height:90px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:28px;color:#bbb}
.loc-info{padding:10px 12px}
.loc-name{font-size:14px;font-weight:500;color:#333}
.loc-addr{font-size:12px;color:#999;margin-top:2px}

/* ===== Input Bar ===== */
.input-bar{display:flex;align-items:center;gap:4px;padding:5px 8px;padding-bottom:calc(5px + env(safe-area-inset-bottom,0));background:#fff;border-top:1px solid #d6d6d6;position:relative;z-index:5}
.input-btn{font-size:24px;cursor:pointer;padding:6px;user-select:none;flex-shrink:0;width:36px;text-align:center}
.input-send{background:#d7d7d7;color:#fff;border:none;font-size:14px;font-weight:500;padding:0 14px;height:36px;border-radius:4px;cursor:pointer;flex-shrink:0;user-select:none;margin-left:4px;min-width:54px}
.input-send.ready{background:var(--wx-green)}
.input-send:disabled{cursor:default;opacity:1}
.input-send.ready:active{background:var(--wx-green-deep)}
.input-text-wrap{flex:1;background:#f0f0f0;border-radius:6px;padding:0 12px;display:flex;align-items:center;min-height:38px}
.input-text-wrap input{width:100%;height:36px;font-size:16px;background:transparent;border:none;outline:none;color:#222}
.input-text-wrap input::placeholder{color:#b0b0b0}
.input-mode-text{display:flex;align-items:center;gap:4px;flex:1}
.input-mode-voice{display:none;flex:1}
.input-bar.voice .input-mode-text{display:none}
.input-bar.voice .input-mode-voice{display:flex}
.voice-btn{flex:1;height:38px;border-radius:6px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:15px;color:#666;cursor:pointer;user-select:none}
.voice-btn.recording{background:#fee;color:#e55}

/* ===== Plus Menu ===== */
.plus-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;background:rgba(0,0,0,.30)}
.plus-overlay.show{display:block}
.plus-sheet{position:fixed;bottom:0;left:0;right:0;background:rgba(248,248,248,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:101;padding:24px 20px calc(20px + env(safe-area-inset-bottom,0));border-radius:var(--wx-radius-sheet) var(--wx-radius-sheet) 0 0;box-shadow:var(--wx-shadow-sheet);animation:slideUp .2s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.plus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 8px;max-width:360px;margin:0 auto}
.plus-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;gap:8px;transition:transform .15s}
.plus-item:active{opacity:.7;transform:scale(0.95)}
.plus-icon{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.plus-icon svg{width:32px;height:32px}
.wx-photo{background:var(--wx-green)}
.wx-camera{background:var(--wx-green)}
.wx-redpacket{background:var(--wx-red)}
.wx-transfer{background:var(--wx-green)}
.wx-location{background:#4361ee}
.plus-label{font-size:12px;color:#555}
.plus-sheet-handle{width:36px;height:4px;background:#ddd;border-radius:2px;margin:10px auto 0}

/* ===== Emoji ===== */
.emoji-overlay{display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;background:#f7f7f7;border-top:1px solid #e0e0e0;padding:12px 8px calc(12px + env(safe-area-inset-bottom,0));animation:slideUp .15s ease}
.emoji-overlay.show{display:block}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-height:210px;overflow-y:auto}
.emoji-item{text-align:center;padding:6px 4px;font-size:28px;cursor:pointer;border-radius:6px}
.emoji-item:active{background:#e8e8e8}

/* ===== Modals ===== */
.rp-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
.rp-modal.show{display:flex}
.rp-modal-inner{background:linear-gradient(180deg,#e6432f,#c1291e);border-radius:12px;width:290px;text-align:center;color:#fff;position:relative;overflow:hidden;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
.tf-modal-inner{background:#fff;border-radius:12px;width:280px;text-align:center;position:relative;overflow:hidden;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.rp-header{padding:30px 20px 10px}
.rp-avatar{font-size:48px;margin-bottom:8px}
.rp-sender{font-size:14px;font-weight:500;margin-bottom:4px;opacity:.9}
.rp-label{font-size:13px;opacity:.6}
.rp-body{padding:10px 20px}
.rp-big-amount{font-size:54px;font-weight:700;margin:4px 0}
.rp-symbol{font-size:30px}
.rp-msg{font-size:13px;opacity:.7;margin-top:2px}
.rp-open-btn{width:200px;height:48px;margin:18px auto 24px;cursor:pointer}
.rp-open-inner{width:200px;height:48px;background:#fcdb4f;border-radius:24px;line-height:48px;font-size:20px;color:#c1291e;font-weight:700;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.rp-open-btn:active .rp-open-inner{transform:scale(.95)}
.rp-result{display:none;padding-bottom:28px}
.rp-result-text{font-size:14px;opacity:.8}
.rp-result-amount{font-size:28px;font-weight:700;margin-top:4px}
.tf-top{background:linear-gradient(180deg,var(--wx-green),#059a4e);padding:28px 20px 16px;color:#fff}
.tf-avatar{font-size:40px;margin-bottom:6px}
.tf-sender{font-size:15px;font-weight:500;opacity:.9}
.tf-amount{font-size:48px;font-weight:700;color:#333;padding:20px 20px 8px}
.tf-symbol{font-size:28px}
.tf-msg-line{font-size:13px;color:#999;padding:0 20px 16px}
.tf-status{font-size:14px;color:var(--wx-green);font-weight:500;padding:0 20px 24px}
.loc-picker{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:#fff;flex-direction:column}
.loc-picker.show{display:flex}
.loc-header{display:flex;align-items:center;padding:44px 12px 12px;background:#fff;border-bottom:1px solid #e6e6e6}
.loc-back{font-size:20px;cursor:pointer;padding:4px 8px}
.loc-title{flex:1;font-size:17px;font-weight:600;text-align:center}
.loc-body{flex:1;overflow-y:auto;padding:16px}
.loc-loading{text-align:center;padding:40px;color:#999}
.loc-item{display:flex;align-items:center;padding:14px 8px;border-bottom:1px solid #f0f0f0;cursor:pointer}
.loc-item:active{background:#f8f8f8}
.loc-item-icon{font-size:24px;margin-right:12px;color:#4361ee}
.loc-item-info{flex:1}
.loc-item-name{font-size:15px;color:#333}
.loc-item-addr{font-size:12px;color:#999;margin-top:2px}
.loc-item-send{font-size:12px;color:var(--wx-green);padding:4px 10px;border:1px solid var(--wx-green);border-radius:4px}
.img-preview{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;background:#000;align-items:center;justify-content:center}
.img-preview.show{display:flex}
.img-preview img{max-width:95%;max-height:90%;object-fit:contain}
.img-close{position:absolute;top:44px;right:16px;color:#fff;font-size:28px;cursor:pointer}
.toast{display:none;position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);color:#fff;padding:10px 20px;border-radius:8px;font-size:14px;z-index:999;text-align:center;max-width:70%;pointer-events:none}
.toast.show{display:block;animation:fadeToast 1.8s ease forwards}
@keyframes fadeToast{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* ===== 录音音量浮窗 ===== */
#voiceTip{position:fixed;bottom:30vh;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;padding:18px 26px;border-radius:12px;z-index:1000;pointer-events:none}
.vt-meter{display:flex;align-items:center;justify-content:center;gap:5px;height:48px;margin-bottom:10px}
.vt-bar{display:block;width:5px;background:var(--wx-green);border-radius:2.5px;transition:height .08s linear;height:6px}
.vt-label{text-align:center;font-size:13px;letter-spacing:1px}

/* ===== 视频 Tab / 未读 Badge ===== */
#tab-video .video-body { flex:1; display:flex; background:#000; position:relative; }
.unread-badge { position:absolute; top:-4px; right:-4px; background:var(--wx-red); color:#fff; font-size:11px; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; padding:0 5px; font-weight:600; }
.chat-item-avatar { position:relative; }
.tab-item { position:relative; }
.tab-item .unread-badge { top:2px; right:calc(50% - 22px); }

/* ===== Android WebView 兼容性：不支持 env(safe-area-inset-bottom) 时的 fallback ===== */
@supports not (padding-bottom: env(safe-area-inset-bottom)) {
  .tab-bar { padding-bottom: 0; }
  .input-bar { padding-bottom: 5px; }
  .plus-sheet { padding-bottom: 20px; }
  .emoji-overlay { padding-bottom: 12px; }
}

/* #tab-video uses flex (inherited from .tab-page.active) */

.video-back{display:none;position:absolute;top:calc(env(safe-area-inset-top,0) + 10px);left:10px;z-index:10;background:rgba(0,0,0,.55);color:#fff;padding:7px 12px;border-radius:16px;font-size:13px;line-height:1;backdrop-filter:blur(4px);cursor:pointer;user-select:none}
/* ===== Amount Input (WeChat Style) ===== */
.amt-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:9999;display:none;align-items:flex-end;justify-content:center}
.amt-overlay.show{display:flex}
.amt-sheet{background:#fff;width:100%;max-width:500px;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom);animation:slideUp .25s}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.amt-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}
.amt-close{font-size:18px;color:#999;cursor:pointer;width:30px;text-align:center}
.amt-title{font-size:17px;font-weight:600;color:#333}
.amt-display{text-align:center;padding:16px 20px 20px;border-bottom:1px solid #f0f0f0}
.amt-currency{font-size:28px;color:#333;font-weight:300}
.amt-value{font-size:48px;color:#333;font-weight:300;font-family:system-ui,-apple-system}
.amt-hint{text-align:center;color:#999;font-size:13px;padding:0 20px 8px;min-height:20px}
.amt-keyboard{padding:8px 12px;background:#f5f5f7}
.amt-row{display:flex;gap:8px;margin-bottom:8px}
.amt-key{flex:1;height:52px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;font-size:20px;color:#333;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .1s}
.amt-key:active{background:#e0e0e0}
.amt-key-del{background:#f5f5f7}
.amt-key-del:active{background:#e0e0e0}
.amt-confirm{display:block;width:calc(100% - 32px);margin:16px auto;padding:14px;background:#07c160;color:#fff;border:none;border-radius:8px;font-size:17px;font-weight:600;cursor:pointer}
.amt-confirm:disabled{background:#b5e8c8;color:#fff;cursor:not-allowed}

/* ===== Red Packet Send Page ===== */
.rp-send-page{position:fixed;top:0;left:0;right:0;bottom:0;background:#f5f5f5;z-index:10000;display:none;flex-direction:column}
.rp-send-page.show{display:flex}
.rp-send-nav{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 16px;background:#f5f5f5;flex-shrink:0}
.rp-send-back{font-size:20px;color:#333;cursor:pointer;padding:4px}
.rp-send-title{font-size:17px;color:#333}
.rp-send-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:24px 20px;overflow-y:auto}
.rp-send-amount-big{font-size:50px;font-weight:300;color:#333;margin:20px 0 30px;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.rp-send-amount-big span{font-weight:400}
.rp-send-card{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:12px;padding:16px 20px;width:100%;margin-bottom:12px;cursor:pointer;transition:background .15s}
.rp-send-card:active{background:#ececec}
.rp-send-card-left{font-size:17px;color:#333}
.rp-send-card-right{font-size:17px;color:#333;text-align:right}
.rp-send-placeholder{color:#ccc}
.rp-send-arrow{color:#999;font-size:14px}
.rp-send-btn{width:80%;height:40px;background:#f44;color:#fff;border:none;border-radius:8px;font-size:17px;margin-top:30px;cursor:pointer;transition:transform .1s,opacity .1s}
.rp-send-btn:active{transform:scale(.95);opacity:.8}
.rp-send-btn:disabled{background:#f9b3b3;cursor:not-allowed}
.rp-send-hint{color:#999;font-size:14px;margin-top:20px;text-align:center}

/* Keyboard */
.rp-keyboard{position:fixed;bottom:0;left:0;right:0;background:#fff;z-index:10001;display:none;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%);transition:transform .25s ease-out}
.rp-keyboard.show{display:flex;transform:translateY(0)}
.rp-kb-display{text-align:right;padding:12px 20px;border-bottom:1px solid #eee}
.rp-kb-currency{font-size:20px;color:#333}
.rp-kb-value{font-size:28px;color:#333;font-weight:300;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.rp-kb-row{display:flex;gap:1px;background:#e5e5e5;margin-top:1px}
.rp-kb-key{flex:1;height:42px;display:flex;align-items:center;justify-content:center;background:#fff;font-size:20px;color:#333;cursor:pointer;user-select:none;transition:background .1s}
.rp-kb-key:active{background:#d9d9d9}
.rp-kb-del{font-size:18px;color:#999}
.rp-kb-close{width:100%;height:40px;background:#07c160;color:#fff;border:none;font-size:17px;cursor:pointer;margin-top:8px}
.rp-kb-close:active{opacity:.8}

/* ===== Payment Modal ===== */
.pay-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:rgba(0,0,0,.5);align-items:center;justify-content:center}
.pay-overlay.show{display:flex}
.pay-modal{background:#fff;width:85%;max-width:340px;border-radius:16px;text-align:center;padding:24px 20px 16px;box-shadow:0 8px 32px rgba(0,0,0,.2);position:relative}
.pay-close{position:absolute;top:12px;right:16px;font-size:20px;color:#999;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.pay-title{font-size:16px;font-weight:600;color:#333;margin-bottom:16px}
.pay-amount{font-size:28px;font-weight:300;color:#333;margin-bottom:16px;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.pay-qr{width:200px;height:200px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:#f9f9f9;border-radius:8px;padding:8px}
.pay-qr canvas,.pay-qr img{width:180px!important;height:180px!important}
.pay-hint{font-size:13px;color:#999;margin-bottom:12px}
.pay-url-wrap{margin-bottom:12px}
.pay-url{font-size:13px;color:#07c160;text-decoration:underline;word-break:break-all}
.pay-confirm{display:block;width:100%;height:44px;background:#07c160;color:#fff;border:none;border-radius:8px;font-size:15px;margin-bottom:8px;cursor:pointer}
.pay-confirm:active{opacity:.8}
.pay-cancel{display:block;width:100%;height:36px;background:transparent;color:#999;border:none;font-size:13px;cursor:pointer}

/* ===== Transfer Send Page (微信转账风格) ===== */
.tf-send-page{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:10000;display:none;flex-direction:column}
.tf-send-page.show{display:flex}
.tf-send-nav{display:flex;align-items:center;padding:44px 16px 12px;background:#fff;flex-shrink:0;position:relative}
.tf-send-back{font-size:20px;color:#333;cursor:pointer;padding:4px;margin-right:8px}
.tf-send-user{flex:1;display:flex;flex-direction:column}
.tf-send-name{font-size:17px;color:#333;font-weight:500}
.tf-send-wxid{font-size:12px;color:#999;margin-top:2px}
.tf-send-avatar{width:36px;height:36px;border-radius:50%;background:#07c160;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.tf-send-body{flex:1;padding:20px;overflow-y:auto}
.tf-send-card{background:#fff;border-radius:12px;padding:16px 20px;margin-bottom:12px}
.tf-send-label{font-size:15px;color:#333;margin-bottom:8px}
.tf-send-input-row{display:flex;align-items:center;cursor:pointer;padding:4px 0}
.tf-send-yuan{font-size:28px;color:#333;font-weight:600;margin-right:4px}
.tf-send-amount{font-size:28px;color:#333;font-weight:400;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.tf-send-cursor{font-size:28px;color:#07c160;font-weight:300;margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.tf-send-note{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:12px;padding:16px 20px;cursor:pointer}
.tf-send-note:active{background:#f5f5f5}
.tf-send-note .tf-send-arrow{color:#999;font-size:16px}
.tf-send-note.editing{border:1px solid #07c160}

/* Transfer Keyboard */
.tf-keyboard{position:fixed;bottom:0;left:0;right:0;background:#f5f5f7;z-index:10001;display:none;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%);transition:transform .25s ease-out}
.tf-keyboard.show{display:flex;transform:translateY(0)}
.tf-kb-row{display:flex;gap:1px;background:#e5e5e5;margin-top:1px}
.tf-kb-key{flex:1;height:42px;display:flex;align-items:center;justify-content:center;background:#fff;font-size:20px;color:#333;cursor:pointer;user-select:none;transition:background .1s}
.tf-kb-key:active{background:#d9d9d9}
.tf-kb-dot{font-size:26px;font-weight:700}
.tf-kb-del{font-size:18px;color:#999}
.tf-kb-send{width:100%;height:42px;background:#07c160;color:#fff;border:none;font-size:17px;font-weight:600;cursor:pointer;margin-top:6px}
.tf-kb-send:active{transform:scale(.98);opacity:.9}
.tf-kb-send.active{background:#07c160}
.tf-kb-send:not(.active){background:#b5e8c8;cursor:not-allowed}

/* Red Packet Modal */
.rp-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;background:rgba(0,0,0,.5);align-items:center;justify-content:center}
.rp-modal.show{display:flex}
.rp-modal-inner{width:85%;max-width:320px;background:#fff;border-radius:16px;text-align:center;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.rp-header{padding:24px 20px 12px}
.rp-avatar{width:56px;height:56px;margin:0 auto 8px;background:#f44;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff}
.rp-sender{font-size:16px;color:#333;font-weight:600}
.rp-label{font-size:12px;color:#999;margin-top:4px}
.rp-body{padding:8px 20px 24px}
.rp-big-amount{font-size:42px;font-weight:300;color:#333;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.rp-symbol{font-size:28px}
.rp-msg{font-size:14px;color:#666;margin-top:8px}
.rp-open-btn{width:72px;height:72px;margin:0 auto 24px;background:#f44;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s;box-shadow:0 4px 16px rgba(255,68,68,.4)}
.rp-open-btn:active{transform:scale(.92)}
.rp-open-inner{color:#fff;font-size:24px;font-weight:600}
.rp-result{display:none;padding:0 20px 24px}
.rp-result-text{font-size:13px;color:#999}
.rp-result-amount{font-size:28px;color:#333;font-weight:500;margin-top:4px}

.chat-item-avatar .unread-badge{top:-8px;right:-8px;min-width:20px;height:20px;line-height:18px;border:2px solid #fff;border-radius:999px;padding:0 5px;font-size:12px;font-weight:700;z-index:2;box-sizing:border-box;}

.chat-item-avatar{overflow:visible}
.chat-item-avatar img{border-radius:50%}
.chat-item-avatar .unread-badge{top:-3px;right:-5px;min-width:19px;height:19px;line-height:17px;border:2px solid #fff;border-radius:999px;padding:0 5px;font-size:12px;font-weight:700;z-index:3;box-sizing:border-box}


/* Xunfang login refresh */
#page-login{align-items:center;justify-content:center;background:radial-gradient(circle at 50% 25%,#fff 0,#fff 28%,#fff3f7 62%,#ffd8df 100%);padding:40px;text-align:center}
.login-logo{font-size:42px;font-weight:500;color:#5a3440;margin-bottom:46px;letter-spacing:0}
.login-title,.login-slogan{display:none}
.login-btn{width:260px;height:48px;line-height:48px;background:linear-gradient(135deg,#ff2b7a,#ff765d);color:#fff;font-size:17px;border-radius:24px;cursor:pointer;box-shadow:0 8px 24px rgba(255,65,112,.25)}
.login-footer{position:fixed;bottom:30px;font-size:12px;color:rgba(90,52,64,.32)}


/* Old Android WebView page isolation fix */
.page{
  display:-webkit-box!important;
  display:-webkit-flex!important;
  display:flex!important;
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  flex-direction:column;
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  height:auto!important;
  min-height:100%!important;
  overflow:hidden;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:0!important;
}
.page.active{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:10!important;
}
#page-login:not(.active) .login-btn,
#page-login:not(.active) .login-logo,
#page-login:not(.active) .login-footer{
  display:none!important;
}
#page-login{background:radial-gradient(circle at 50% 25%,#fff 0,#fff 28%,#fff3f7 62%,#ffd8df 100%)!important}
.login-logo{font-size:42px!important;font-weight:500!important;color:#5a3440!important;margin-bottom:46px!important;letter-spacing:0!important}
.login-title,.login-slogan{display:none!important}
.login-btn{width:260px!important;height:48px!important;line-height:48px!important;background:linear-gradient(135deg,#ff2b7a,#ff765d)!important;color:#fff!important;font-size:17px!important;border-radius:24px!important;box-shadow:0 8px 24px rgba(255,65,112,.25)!important}
.login-footer{color:rgba(90,52,64,.32)!important}


/* Production polish: payment cards should not look like normal chat bubbles. */
.msg-bubble-pay{padding:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;max-width:76%!important;overflow:visible}
.msg-row.user .msg-bubble-pay,.msg-row.ai .msg-bubble-pay{background:transparent!important;box-shadow:none!important}
.msg-bubble-pay .rp-card,.msg-bubble-pay .tf-card{width:min(320px,72vw);min-width:240px;box-sizing:border-box;border:0;border-radius:8px;background:#fa9d2f;color:#fff;padding:18px 20px;box-shadow:0 1px 2px rgba(0,0,0,.12);position:relative;overflow:visible}
.msg-row.user .msg-bubble-pay .rp-card:after,.msg-row.user .msg-bubble-pay .tf-card:after{content:"";position:absolute;right:-8px;top:22px;border-width:8px 0 8px 9px;border-style:solid;border-color:transparent transparent transparent #fa9d2f}
.msg-row.ai .msg-bubble-pay .rp-card:before,.msg-row.ai .msg-bubble-pay .tf-card:before{content:"";position:absolute;left:-8px;top:22px;border-width:8px 9px 8px 0;border-style:solid;border-color:transparent #fa9d2f transparent transparent}
.msg-bubble-pay .rp-card-title,.msg-bubble-pay .tf-card-title{font-size:15px;color:rgba(255,255,255,.9);font-weight:500;margin-top:12px;margin-bottom:0}
.msg-bubble-pay .rp-card .rp-amount-display,.msg-bubble-pay .tf-card-amount{font-size:27px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:4px}
.msg-bubble-pay .rp-card .rp-card-msg,.msg-bubble-pay .tf-card-status{font-size:18px;color:#fff;opacity:.96;margin-top:2px;font-weight:500}
.msg-bubble-pay .rp-card-opened{background:#d7a469;filter:saturate(.75)}
.msg-row.ai .msg-bubble-pay .rp-card-opened:before,.msg-row.user .msg-bubble-pay .rp-card-opened:after{border-left-color:#d7a469;border-right-color:#d7a469}