danyang-match/miniapp/pages/messages/messages.wxss

.page {
  min-height:100vh;
  background:var(--color-bg-page);
}

/* --nav-status / --nav-h / --nav-right 由 messages.ts 经 utils/nav-metrics 实测胶囊按钮后注入 */
.messages-hero {
  padding:var(--nav-status, 44px) 24rpx 34rpx;
  border-radius:0 0 36rpx 36rpx;
  background:linear-gradient(160deg, var(--mini-night-start), var(--mini-night-end));
  box-shadow:var(--mini-shadow);
}

.messages-nav {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--nav-h, 80rpx);
}

.messages-title {
  color:var(--color-text-inverse);
  font-size:31rpx;
  font-weight:700;
}

/* 胶囊安全区：右对齐图标必须整体左移到胶囊左侧，否则被胶囊盖住点不到 */
.messages-search {
  position:absolute;
  right:var(--nav-right, 102px);
  width:34rpx;
  height:34rpx;
}

.message-shortcuts {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  padding:22rpx 8rpx 4rpx;
}

.message-shortcut {
  display:flex;
  flex-direction:column;
  align-items:center;
  color:rgba(255, 255, 255, .88);
  font-size:24rpx;
}

.shortcut-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:72rpx;
  height:72rpx;
  margin-bottom:12rpx;
  border:1rpx solid rgba(255, 255, 255, .2);
  border-radius:26rpx;
}

.shortcut-icon image {
  width:45rpx;
  height:45rpx;
}

.shortcut-icon--blue { background:rgba(79, 139, 255, .28); }
.shortcut-icon--pink { background:rgba(255, 92, 130, .28); }
.shortcut-icon--purple { background:rgba(154, 107, 255, .28); }
.shortcut-icon--coral { background:rgba(240, 106, 100, .28); }

.messages-content {
  padding:16rpx 24rpx 40rpx;
}

.conversation-list {
  overflow:hidden;
  margin-top:8rpx;
  border-radius:28rpx;
  background:var(--color-bg-card);
  box-shadow:0 10rpx 32rpx rgba(34, 35, 91, .08);
}