/* 通讯录 / 字母索引 / 长按菜单
   —— 由 styles.css 第 1682–1827 行原样切分，规则与顺序未改动。 */
/* 通讯录 */
.contacts-page{
  flex:1;display:flex;flex-direction:column;
  background:#F4F5F7;
  position:relative;overflow:hidden;
}
.contacts-page .chat-header{
  height:52px;display:flex;align-items:center;
  padding:0 16px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-bottom:0.5px solid rgba(0,0,0,0.06);
  flex-shrink:0;gap:8px;
}
.contacts-search{
  padding:12px 20px 4px;flex-shrink:0;
}
.contacts-search input{
  width:100%;padding:9px 14px;border:none;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:10px;
  box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.05);
  font-size:13px;outline:none;font-family:inherit;
  box-sizing:border-box;color:#1C1C1E;
}
.contacts-search input::placeholder{color:#C7C7CC;}

/* 分组标签 */
.contacts-groups{
  display:flex;gap:6px;padding:8px 20px 4px;
  overflow-x:auto;flex-shrink:0;
}
.contacts-groups::-webkit-scrollbar{display:none;}
.contacts-group-tag{
  padding:6px 14px;border-radius:20px;
  font-size:12px;font-weight:500;
  color:#AEAEB2;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(20px);
  border:0.5px solid rgba(0,0,0,0.05);
  cursor:pointer;white-space:nowrap;
  transition:all 0.2s;
}
.contacts-group-tag.active{
  color:#1C1C1E;font-weight:600;
  background:rgba(255,255,255,0.95);
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.contacts-group-tag.add{
  color:#FFB6D9;
  border:1px dashed rgba(255,182,217,0.5);
  background:transparent;
}

/* 联系人列表（含字母索引） */
.contacts-list-wrap{
  flex:1;position:relative;overflow:hidden;
}
.contacts-list{
  height:100%;overflow-y:auto;
  padding:4px 16px 16px;
}
.contacts-alpha-title{
  font-size:12px;font-weight:600;
  color:#8E8E93;padding:12px 6px 6px;
  letter-spacing:0.05em;
}
.contacts-item{
  display:flex;align-items:center;
  padding:11px 14px;margin-bottom:3px;
  border-radius:12px;
  background:rgba(255,255,255,0.7);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.04);
  cursor:pointer;
}
.contacts-item:active{transform:scale(0.98);}
.contacts-avatar{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,#F0E5EC,#DCE5F0);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;margin-right:12px;
  background-size:cover;background-position:center;overflow:hidden;
  flex-shrink:0;
}
.contacts-info{flex:1;min-width:0;}
.contacts-name{font-size:14px;color:#1C1C1E;font-weight:600;}
.contacts-comm{font-size:11px;color:#AEAEB2;margin-top:2px;}

/* 右侧字母条 */
.contacts-alpha-bar{
  position:absolute;right:0;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;
  align-items:center;gap:0;
  padding:6px 3px;
  z-index:10;
  user-select:none;
}
.contacts-alpha-letter{
  font-size:9px;
  font-weight:400;
  color:#B8B8BD;
  padding:0 3px;
  line-height:1.4;
  cursor:pointer;
  transition:color 0.1s,transform 0.1s;
  background:transparent;
}
.contacts-alpha-letter.active{
  color:#1C1C1E;
  background:transparent;
  font-weight:500;
}
.contacts-alpha-letter:active{
  transform:scale(1.15);
  color:#1C1C1E;
}

/* 长按菜单 */
.contacts-menu-mask{
  position:fixed;inset:0;z-index:1000;
}
.contacts-menu{
  position:fixed;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(30px);
  border-radius:14px;
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
  padding:6px;
  min-width:140px;
}
.contacts-menu-title{
  font-size:11px;color:#AEAEB2;
  padding:6px 12px 4px;font-weight:600;
}
.contacts-menu-item{
  padding:9px 12px;font-size:13px;
  color:#1C1C1E;cursor:pointer;border-radius:8px;
  transition:background 0.15s;
}
.contacts-menu-item:active{background:rgba(0,0,0,0.05);}
.contacts-menu-item.new{color:#FFB6D9;}