/* ===== 仿微信 移动端 UI ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --wx-green: #07C160;
  --wx-bg: #EDEDED;
  --wx-nav: #EDEDED;
  --bubble-self: #95EC69;
  --text: #191919;
  --text-gray: #888;
  --line: #E5E5E5;
  --red: #FA5151;
}
html, body {
  height: 100%;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #000;
  overflow: hidden;
}
body { display: flex; justify-content: center; align-items: center; }
#phone {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100%;
  max-height: 932px;
  background: var(--wx-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 30px rgba(0,0,0,.4);
}
@media (min-width: 460px) { #phone { border-radius: 16px; height: 95%; } }

/* 顶栏 */
.navbar {
  flex: 0 0 auto;
  height: 52px;
  background: var(--wx-nav);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: 17px; font-weight: 600;
  padding-top: env(safe-area-inset-top);
}
.navbar .nav-left, .navbar .nav-right {
  position: absolute; top: 0; height: 100%;
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 400; color: #576B95;
  cursor: pointer;
}
.navbar .nav-left { left: 14px; }
.navbar .nav-right { right: 14px; font-size: 22px; }
.navbar .nav-right .btn-ic { padding: 0 4px; }

/* 页面容器 */
.pages { flex: 1 1 auto; position: relative; overflow: hidden; }
.page {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--wx-bg);
  display: none;
}
.page.active { display: block; }

/* 底部 tabbar */
.tabbar {
  flex: 0 0 auto;
  height: 54px;
  display: flex;
  background: #F7F7F7;
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10px; color: #7A7A7A; cursor: pointer; position: relative; gap: 2px;
}
.tabbar .tab.active { color: var(--wx-green); }
.tabbar .tab .ic { font-size: 22px; line-height: 1; }
.tabbar .tab .badge, .list-badge {
  position: absolute; top: 4px; left: 54%;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: 10px;
  font-size: 11px; line-height: 16px; text-align: center;
}
.dot-badge { position:absolute; top:6px; left:60%; width:9px; height:9px; background:var(--red); border-radius:50%; }

/* 会话列表 */
.conv-list, .contact-list { background: #fff; }
.conv-item, .contact-item {
  display: flex; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid #F0F0F0; cursor: pointer; position: relative;
  background: #fff;
}
.conv-item:active, .contact-item:active { background: #E5E5E5; }
.conv-item.pinned { background: #F2F2F2; }
.avatar {
  width: 46px; height: 46px; border-radius: 6px; flex: 0 0 auto;
  object-fit: cover; background: #ccc; position: relative;
}
.avatar.sm { width: 38px; height: 38px; }
.avatar-wrap { position: relative; flex: 0 0 auto; }
.avatar-wrap .list-badge { top: -6px; left: auto; right: -6px; }
.online-dot { position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border:2px solid #fff; border-radius:50%; background:#bbb; }
.online-dot.on { background: var(--wx-green); }
.conv-main { flex: 1; margin-left: 12px; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; align-items: baseline; }
.conv-name { font-size: 16px; font-weight: 500; }
.conv-time { font-size: 11px; color: #B2B2B2; flex: 0 0 auto; margin-left: 8px; }
.conv-sub { font-size: 13px; color: var(--text-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.cs-tag { display:inline-block; font-size:10px; color:#fff; background:var(--wx-green); border-radius:3px; padding:0 4px; margin-left:4px; vertical-align:middle; }

/* 聊天页 */
#page-chat { background: var(--wx-bg); display: none; flex-direction: column; }
#page-chat.active { display: flex; }
.chat-body { flex: 1; overflow-y: auto; padding: 12px 10px; -webkit-overflow-scrolling: touch; }
.msg-row { display: flex; margin-bottom: 16px; align-items: flex-start; }
.msg-row.self { flex-direction: row-reverse; }
.msg-row .avatar { width: 40px; height: 40px; }
.bubble {
  max-width: 62%; margin: 0 10px; padding: 9px 12px; border-radius: 6px;
  background: #fff; font-size: 15px; line-height: 1.4; word-break: break-word;
  position: relative;
}
.msg-row.self .bubble { background: var(--bubble-self); }
.bubble.voice { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 70px; }
.bubble.voice .wave { font-size: 18px; }
.bubble img.chat-img { max-width: 160px; border-radius: 4px; display: block; }
.msg-sys { text-align: center; margin: 10px 0; }
.msg-sys span { background: rgba(0,0,0,.12); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 4px; }
.msg-call { display:flex; align-items:center; gap:6px; }
.read-flag { font-size: 11px; color: #888; align-self: flex-end; margin: 0 4px; }

/* 输入栏 */
.chat-input {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px; background: #F7F7F7; border-top: 1px solid var(--line);
}
.chat-input .ic-btn { font-size: 26px; color: #333; cursor: pointer; flex: 0 0 auto; width: 32px; text-align:center; }
.chat-input input[type=text] {
  flex: 1; border: none; border-radius: 6px; padding: 9px 10px; font-size: 15px; outline: none;
}
.chat-input .send-btn {
  background: var(--wx-green); color: #fff; border: none; border-radius: 5px;
  padding: 7px 14px; font-size: 14px; cursor: pointer; flex: 0 0 auto;
}
.hold-btn {
  flex: 1; text-align: center; background: #fff; border-radius: 6px; padding: 9px;
  font-size: 15px; user-select: none; cursor: pointer;
}
.hold-btn.recording { background: #d0d0d0; }

/* 通用列表分组 */
.group-title { padding: 8px 14px 4px; font-size: 13px; color: var(--text-gray); }
.cell {
  display:flex; align-items:center; padding:12px 14px; background:#fff;
  border-bottom:1px solid #F0F0F0; cursor:pointer;
}
.cell:active { background:#eee; }
.cell .cell-ic { width:30px; font-size:20px; text-align:center; margin-right:10px; }
.cell .cell-label { flex:1; font-size:16px; }
.cell .cell-val { color:var(--text-gray); font-size:14px; }
.cell .arrow { color:#c8c8c8; margin-left:6px; }

/* “我” 页 */
.me-header { background:#fff; display:flex; align-items:center; padding:22px 16px; margin-bottom:10px; }
.me-header .avatar { width:64px; height:64px; border-radius:10px; }
.me-header .me-info { margin-left:16px; }
.me-header .me-name { font-size:20px; font-weight:600; }
.me-header .me-wxid { font-size:13px; color:var(--text-gray); margin-top:6px; }

/* 空态 */
.empty { text-align:center; color:#999; padding:40px 20px; font-size:14px; }

/* 通用按钮/输入 */
.btn { background:var(--wx-green); color:#fff; border:none; border-radius:6px; padding:11px; font-size:16px; width:100%; cursor:pointer; }
.btn:active { opacity:.85; }
.btn.ghost { background:#fff; color:#333; border:1px solid #ddd; }
.field { width:100%; border:none; border-bottom:1px solid var(--line); padding:12px 4px; font-size:16px; outline:none; background:transparent; }

/* 弹层 */
.modal-mask { position:absolute; inset:0; background:rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; z-index:50; padding:24px; }
.modal-mask.show { display:flex; }
.modal { background:#fff; border-radius:12px; width:100%; max-width:340px; overflow:hidden; }
.modal .m-head { padding:16px; font-size:17px; font-weight:600; text-align:center; }
.modal .m-body { padding:0 16px 16px; }
.modal .m-foot { display:flex; border-top:1px solid var(--line); }
.modal .m-foot button { flex:1; border:none; background:#fff; padding:13px; font-size:16px; cursor:pointer; }
.modal .m-foot button.primary { color:var(--wx-green); font-weight:600; }
.modal .m-foot button + button { border-left:1px solid var(--line); }

/* 搜索结果 */
.search-result { padding:10px 14px; background:#fff; }

/* toast */
#toast {
  position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.75); color:#fff; padding:9px 16px; border-radius:8px;
  font-size:14px; z-index:100; opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap;
}
#toast.show { opacity:1; }