chat-two-tracks.css

/* This CSS is an adaptation from the answer by Roko C. Buljan in https://stackoverflow.com/a/71155446 */ 

* {margin: 0; box-sizing: border-box;}

body {background-color: rgb(157, 152, 150);}

  /* dialogue header */

.top-info {
  text-align: center;
  --rad: 20px;
  --rad-sm: 3px;
  font: 20px/1.5 sans-serif;
  display: flex;
  flex-direction: column;
  padding: 20px;
  max-width: 900px;
  margin: auto;
  background: #3f3e3e;
  color: #fff;
}

.chat {
    --rad: 20px;
    --rad-sm: 3px;
    font: 16px/1.5 sans-serif;
    display: flex;
    flex-direction: column;
    padding: 20px;
    max-width: 900px;
    margin: auto;
    background: #fff;
  }
  
  .msg {
    position: relative;
    max-width: 75%;
    padding: 7px 15px;
    margin-bottom: 30px;
  }
  
  /* 5 levels, two players to/from game master and meta messages form game master */

  .msg.b-gm {
    border-radius: var(--rad) var(--rad-sm) var(--rad-sm) var(--rad);
    background: #874aaf;
    color: #fff;
    margin-left: 60%;
  }

  .msg.a-gm {
    border-radius: var(--rad-sm) var(--rad) var(--rad) var(--rad-sm);
    background: #f39109;
    color: #fff;
    margin-right: 60%;
  }
  
  .msg.gm-a {
    border-radius: var(--rad) var(--rad-sm) var(--rad-sm) var(--rad);
    background: #c4c3c3;    
    color: #0c0c0c;
    margin-right: 40%;
    margin-left: 20%;
  }

  .msg.gm-b {
    border-radius: var(--rad-sm) var(--rad) var(--rad) var(--rad-sm);
    background: #c4c3c3;
    color: #0c0c0c;
    margin-right: 20%;
    margin-left: 40%;
  }

  .msg.gm-gm {
    background: #f1f1f1;
    color: #373636;
    margin-left: 40%;
    margin-right: 40%;
    font-size: 0.8rem;

  }
  
  /* speaker labels */
  
  .msg::before {
    content: attr(speaker);
    font-size: 0.8rem;
    position: absolute;
    bottom: 100%;
    color: #888;
    white-space: nowrap;

  }
  
  .msg.b-gm::before {
    right: 15px;
  }

  .msg.gm-a::before {
    right: 15px;
  }

  .msg.a-gm::before {
    left: 15px;
  }

  .msg.gm-b::before {
    left: 15px;
  }

  .msg.gm-gm::before {
    left: 0px;
  }