AO3 Work Skin - Obey Me! chat

/*made by referencing https://archiveofourown.org/works/6434845/chapters/14729722 . The tutorial there roughly applies to this skin, too.*/

#workskin .chat {
  max-width: 75vw;
  font-family: Verdana, sans-serif;
  display: table;
  margin: auto;
}

#workskin .header {
/* for the header containing contact names. Insert two breaks after for best results.*/
  min-width: 75vw;
  background-color: #1accbc;
  background-image: linear-gradient(to right,#1ACDB7,#19C8CD);
  border-bottom: 1px solid #C1D9D9;
  color: #ffffff;
  font-weight: bold;
  padding-bottom: .2em;
  padding-top: .2em;
  padding-left: 2vw;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: -2em;
  text-align: left;
  text-transform: capitalize;
  display: table;
}

#workskin .messagebody {
  background-color: #CFF0E7;
  display: table;
  padding-left: .5em;
  padding-right: .5em;
  background-image: radial-gradient(rgba(255,0,0,0) 60%, rgba(192,216,216,1));
}

#workskin .text {
/*for messages from the left side of the screen.*/
  float: left;
  color: #2C252D;
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0.2em 1.5em 0.2em 1.5em;
  margin-left: 4vw;
  background: #ffffff;
  max-width: 75%;
  box-shadow: 0px 2px 3px 1px #ADBDBA;
  clear: both;
  position: relative;
}

#workskin .text::before {
  content: "";
  position: absolute;
  left: -.5em;
  top: 0em;
  width: 0.5em;
  height: 1em;
  border-right: 0.5em solid #ffffff;
  border-top-right-radius: 1em 1em;
}

#workskin .reply {
/*for messages from the right side of the screen.*/

  float: right;
  color: #FFFFFF;
  margin: 0 0 0.5em;
  border-radius: 1em;
  padding: 0.2em 1.5em 0.2em 1.5em;
  margin-right: 4vw;
  background: #31D7D5;
  max-width: 75%;
  clear: both;
  position: relative;
  box-shadow: 0px 2px 3px 1px #ADBDBA;
}

#workskin .reply::before {
  content: "";
  position: absolute;
  right: -0.5em;
  top: 0em;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid #31D7D5;
  border-top-left-radius: 1em 1em;
}

#workskin .hide {
  display: none;
}

#workskin .end {
/*For that little "END" text after chats, or for timestamps.*/
  min-width: 5vw;
  color: #ffffff;
  background-color: rgba(0,0,0,0.3);
  font-size: .75em;
  text-align: center;
  display: table;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  border-radius: .75em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

#workskin .textname {
/*For the name of a sender on the left side of the screen.*/
  min-width: 2vw;
  color: #ffffff;
  background-color: rgba(0,0,0,0.2);
  font-size: .7em;
  text-align: left;
  margin-right: auto;
  margin-bottom: .3em;
  margin-top: .75em;
  border-radius: .75em;
  display: table;
  clear: both;
  margin-left: 4.5vw;
  padding: 0.2em 0.5em 0.2em 0.5em;
  text-transform: capitalize;
}

#workskin .replyname {
/*For the name of a sender on the right side of the screen.*/

  min-width: 2vw;
  color: #ffffff;
  background-color: rgba(0,0,0,0.2);
  font-size: .7em;
  text-align: right;
  margin-left: auto;
  margin-bottom: .3em;
  margin-top: .75em;
  border-radius: .75em;
  display: table;
  clear: both;
  margin-right: 4.5vw;
  padding: 0.2em 0.5em 0.2em 0.5em;
}