/* Chat Box */

.chat-box {
  overflow: hidden;
  width: 100%;
  height: 100%;
  flex: 1;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-2);

  form {
    line-height: 1;
    display: flex;
    clear: both;
    font-size: 1em;
    padding: var(--spacing);

    .textarea-container {
      flex: 1;

      textarea {
        width: 100%;
      }
    }

    button {
      & span {
        display: inline-block;
        scale: 1.5;
      }
    }
  }

  .messages {
    flex: 1;
    overflow-y: auto;
    padding-top: var(--spacing-2);

    div {
      margin: var(--spacing);
      clear: both;

      &[data-role='user'] {
        max-width: 90%;
        float: right;
        background-color: var(--primary);
        color: var(--on-primary);
        padding: var(--spacing);
        border-radius: var(--radius);
      }

      pre {
        overflow-x: auto;
      }
    }
  }
}