html,
body {
  height: 100%;
  margin: 0;
  font-family: 'helvetica', sans-serif;
}

[v-cloak] {
    display: none;
}


div.app {
    height: 100%;
    width: 100%;
    position: fixed;
}

@media (min-width: 800px) {
    div.app {
      height: 100%;
      width: 800px;
      position: fixed;
      /* keep the whole thing centered */
      left: 50%;
      transform: translate(-50%);
    }
}
  
div.chat-container {
    display: flex;
    flex-flow: column;
    height: 100%;
}

div.chat-error-container {
    border: 3px solid red;
    background: white;
    padding: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    color: red;
}

div.chat-header-container {
    border: 1px dimgray solid;
    background: white;
    padding: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
}

img.chat-header-avatar {
    height: 1.2rem;
    width: 1.2rem;
    padding-left: 0.6rem;
}

div.chat-message-list {
    overflow-y: scroll;
    border: 1px dimgray solid;
    display: flex;
    flex-direction: column-reverse;
    flex-grow: 1; /* fill the middle  */
}

div.quick-replies-container {
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

div.quick-reply {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 1.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 1.0rem;
    border: 2px mediumpurple solid;
    color: purple;
    cursor: pointer;
}

div.quick-reply:hover {
    background: mediumpurple;
    color: white;
}

div.bot-message-container {
    padding: 0.6rem;
    display: flex;
}

div.bot-message-avatar-container {
    margin-left: .3rem;
    padding: .3rem;
    /* keep the avatar at the bottom of the speech bubble */
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

img.bot-message-avatar {
    height: 1.8rem;
    width: 1.8rem;
}

div.bot-message-text {
    background:  lightgray;
    color: black;
    padding: 0.7rem;
    border-radius: 1rem 1rem 1rem 0rem;
    border: 0;
    max-width: 75%;
}

div.bot-message-debug {
    background:  orange;
    color: black;
    padding: 0.7rem;
    border: 0;
    border-radius: 0.5rem;
    max-width: 75%;
    font-family: monospace;
    white-space: pre;
}

img.bot-message-image {
    border-radius: 1rem 1rem 1rem 1rem;
    max-width: 50%;
}

video.bot-message-video {
    border-radius: 1rem 1rem 1rem 1rem;
    width: 90%;
    height: auto;
}
  
div.user-message-container {
    padding: 0.6rem;
    display: flex;
    justify-content: flex-end;
}

div.user-message-text {
    border-radius: 1rem 1rem 0rem 1rem;
    margin-right: .3rem;
    border: 0;
    background: mediumpurple;
    padding: 0.7rem;
    max-width: 75%;
    color: white;
}
  
div.chat-input-container {
    border: 1px dimgray solid;
    display: flex;
    flex-grow: 0;
}

input.chat-input {
    border: none;
    padding: 0.6rem;
    flex-grow: 1;
    font-size: large;
}

button.chat-send-button {
    border: none;
    color: navy;
    background: gainsboro;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: large;
}