.page {
  min-height: 100vh;
  background: #f4f5fa;
}

.messages-hero {
  padding: env(safe-area-inset-top) 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: 88rpx;
}

.messages-title {
  color: #fff;
  font-size: 31rpx;
  font-weight: 700;
}

.messages-search {
  position: absolute;
  right: 14rpx;
  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: 20rpx;
}

.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: #fff;
  box-shadow: 0 10rpx 32rpx rgba(34, 35, 91, .08);
}