/* 通讯录 · 仿微信风格 */
.contacts-body{
  min-height:100vh;
  background:#ededed;
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
}
body.contacts-body.app-shell{background:#ededed}
html[data-theme="dark"] .contacts-body{background:#000}

.contacts-main{
  width:100%;max-width:none;
  margin:0;
  position:relative;
}

/* —— 搜索栏 —— */
.wx-contacts-search{
  background:#ededed;
  padding:8px 16px 10px;
}
html[data-theme="dark"] .wx-contacts-search{background:#000}
.wx-search-box{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border-radius:8px;
  padding:8px 12px;
  min-height:36px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.04);
}
html[data-theme="dark"] .wx-search-box{
  background:#1c1c1e;
  box-shadow:none;
}
.wx-search-icon{
  width:16px;height:16px;flex-shrink:0;
  color:#b2b2b2;
}
.wx-search-box input{
  flex:1;border:none;outline:none;background:transparent;
  font-size:15px;color:var(--text,#191919);
  min-width:0;
}
.wx-search-box input::placeholder{color:#b2b2b2}

/* —— 列表块 —— */
.wx-contacts-block{
  background:#fff;
  margin-bottom:8px;
}
html[data-theme="dark"] .wx-contacts-block{background:#1c1c1e}

.wx-contacts-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:8px 16px;
  text-decoration:none;
  color:inherit;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s ease;
}
.wx-contacts-row:not(:last-child)::after{
  content:'';
  position:absolute;
  left:68px;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(0,0,0,.06);
  transform:scaleY(.5);
  transform-origin:0 100%;
  pointer-events:none;
}
html[data-theme="dark"] .wx-contacts-row:not(:last-child)::after{background:rgba(255,255,255,.06)}
.wx-contacts-row:active{background:rgba(0,0,0,.04)}
html[data-theme="dark"] .wx-contacts-row:active{background:rgba(255,255,255,.06)}

/* —— 头像 / 图标 —— */
.wx-contacts-avatar,
.contacts-avatar{
  width:40px;height:40px;
  border-radius:6px;
  flex-shrink:0;
  overflow:hidden;
}
.wx-contacts-avatar--img{
  object-fit:cover;
  background:#e5e5ea;
}
.wx-contacts-icon{
  width:40px;height:40px;border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.wx-contacts-icon svg{width:20px;height:20px}
.wx-contacts-icon--msg{background:linear-gradient(135deg,#3db8ff,#10aeff)}

.contacts-avatar-letter{
  display:flex;align-items:center;justify-content:center;
  background:#e3e3e8;
  color:#555;
  font-size:17px;font-weight:500;
}
html[data-theme="dark"] .contacts-avatar-letter{
  background:#3a3a3c;
  color:#ebebf5;
}
.contacts-avatar-icon{background:#f2f2f7}
html[data-theme="dark"] .contacts-avatar-icon{background:#2c2c2e}
.contacts-avatar-icon img{width:100%;height:100%;object-fit:cover;display:block}
.contacts-avatar-icon .nav-icon{width:100%!important;height:100%!important;border-radius:inherit}
.contacts-avatar-icon .nav-icon-svg svg{width:100%;height:100%;display:block}
.contacts-avatar-icon svg{width:58%;height:58%}

.wx-contacts-text{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:2px;
}
.wx-contacts-text strong{
  font-size:17px;font-weight:400;
  color:var(--text,#191919);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wx-contacts-text em{
  font-style:normal;font-size:13px;
  color:#999;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
html[data-theme="dark"] .wx-contacts-text em{color:#8e8e93}

.contacts-empty,
.wx-contacts-empty-filter{
  text-align:center;
  padding:48px 20px;
  color:#999;
  font-size:15px;
}

.wx-contacts-item.is-hidden{display:none}
.wx-contacts-group.is-hidden,
.wx-contacts-letter.is-hidden{display:none}

/* —— 字母分组 —— */
.wx-contacts-letter{
  padding:5px 16px 4px;
  font-size:14px;
  font-weight:500;
  color:#888;
  background:#ededed;
  line-height:1.2;
}
html[data-theme="dark"] .wx-contacts-letter{background:#000;color:#666}

/* —— 右侧字母索引 —— */
.wx-contacts-index{
  position:fixed;
  right:2px;
  top:calc(var(--ios-nav-inline-h) + 72px);
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  z-index:10;
  padding:4px 2px;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:auto;
}
.wx-contacts-index a{
  font-size:10px;
  font-weight:600;
  color:#576b95;
  line-height:1.45;
  padding:1px 4px;
  text-decoration:none;
}
html[data-theme="dark"] .wx-contacts-index a{color:#7d90a9}
.wx-contacts-index a.is-active{color:#07c160}

/* 下拉刷新骨架屏适配 */
.contacts-body--wx .app-skeleton-row{
  padding:10px 16px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
html[data-theme="dark"] .contacts-body--wx .app-skeleton-row{background:#1c1c1e}
.contacts-body--wx .app-skeleton-avatar{
  width:40px;height:40px;border-radius:6px;
}