.MentionTooltip {
  width: calc(100% - 4rem);
  max-width: 20rem;
  flex-direction: column;

  z-index: -1;

  @media (max-width: 600px) {
    width: calc(100% - 3rem);
  }

  .ListItem.chat-item-clickable {
    margin: 0;

    .ListItem-button {
      border-radius: 0;
    }

    .info {
      display: flex;
    }

    .title {
      margin-inline-end: .625rem;
      max-width: 70%;
      flex: 1 0 auto;
    }

    .handle {
      font-size: 1rem;
    }

    &[dir=rtl] {
      .status {
        width: auto;
      }
    }
  }

  .ChatInfo {
    .title h3 {
      line-height: 1.25;
    }

    .Avatar {
      margin-right: 0.7em;
    }

    .handle {
      &::before {
        content: '@';
      }
    }

    .user-status {
      display: none !important;
    }
  }
}
