.chat-message div.roll-chat,
.dialog-content div.roll-chat {
  font-family: CaslonAntique;
  display: grid;
  grid-template-areas:
    "img     header  buttons"
    "img     resume  buttons"
    "details details details"
    "actions actions actions";
  grid-template-columns: 3rem 1fr 1.4rem;
  grid-template-rows: max-content max-content max-content max-content;
  gap: 0 0.5rem;

  div.chat-img {
    grid-area: img;
    display: flex;
    flex-direction: column;
    img {
      border: 0;
      max-height: 3rem;
      max-width: 3rem;
      object-fit: contain;
      height: 100%;
    }
  }
  div.chat-header {
    grid-area: header;
    font-weight: bold;
    font-size: 0.9rem;
  }
  div.chat-resume {
    grid-area: resume;
    text-align: justify;
  }
  div.chat-details {
    grid-area: details;
    text-align: justify;
    display: flex;
    flex-direction: column;
  }
  div.chat-actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    a {
      display: flex;
      flex-direction: row;
      img {
        margin-right: 0.5rem;
      }
    }
  }
  
  div.chat-buttons {
    grid-area: buttons;
    display: flex;
    flex-direction: column;

    a {
      border-radius: 0.2rem;
      cursor: pointer;
      padding: 0.2rem;
      position: relative;
      box-shadow: inset 1x 1px #a6827e;
      color: var(--color-controls);
      border: 1px ridge #846109;
      display: inline-block;
      align-items: center;
      
      img {
        max-width: 1rem;
        max-height: 1rem;
      }
    }
    
    a:hover {
      background: var(--background-custom-button-hover);
    }

    a:active{
      position:relative;
      top:1px;
    }

  }
}