.ConvoHeader {
  display: grid;
  grid-template-areas:
    'button avatar name'
    'button avatar info';
  grid-template-rows: 1fr 1fr;
  grid-template-columns: auto auto 1fr;
  height: 48px;
  padding: 0 8px;
  gap: 0 8px;
  flex: none;
  border-bottom: 1px solid var(--vkui--color_separator_primary);
  background: var(--vkui--color_background_content);
}

.ConvoHeader__back {
  grid-area: button;
  align-self: center;
  width: 32px;
  height: 32px;
}

.ConvoHeader__avatar {
  grid-area: avatar;
  align-self: center;
}

.ConvoHeader__name {
  grid-area: name;
  align-self: end;

  display: flex;
  align-items: flex-end;
  gap: 3px;
  font: var(--smallFont);
  height: var(--lineHeight);
  font-weight: 500;
  overflow: hidden;
}

.ConvoHeader__nameText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ConvoHeader__info {
  grid-area: info;
  align-self: start;
  font: var(--smallFont);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vkui--color_text_secondary);
}
