Puedes ir haciendo todo más chico para resoluciones máximas. Empezando por `768px` que es la medida de las tablets y después puedes ir por `480px` que son los celulares.

En el siguiente [link][1] te dejo lo que has hecho pero con cambios para que tome los responsive, lo que hice fue achicar las medidas que tenías inicialmente y ponerle un `min-width` al contenedor para que no se rompa en caso de tener pocos caracteres, más que nada para `:(` que se veía mal.

    @media only screen and (max-width: 768px) {
      .bubble {
        padding: 5px 7px;
        min-width: 30px;
      }
      .bubble:after,
      .bubble:before {
        border-bottom: 12.5px solid transparent;
        border-right: 12.5px solid #00cccc;
        bottom: -12.5px;
        right: 12.5px;
      }
      .bubble:before {
        border-right: 12.5px solid hsla(0, 0%, 0%, 0.1);
        bottom: -14px;
        right: 11px;
      }
    }


  [1]: https://codepen.io/anon/pen/RyqaYV/