example_chat.css

      body {
        margin: 0;
        padding-bottom: 3rem;
        font-family: Arial, Helvetica, sans-serif;
      }
      #form {
        background: rgba(0, 0, 0, 0.15);
        padding: 5px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        height: 50px;
        box-sizing: border-box;
      }
      #input {
        border: none;
        padding: 0 5px;
        flex-grow: 1;
        margin: 5px;
      }
      #input:focus {
        outline: none;
      }
      #form button {
        background: #000;
        border: none;
        padding: 0 10px;
        margin: 0.25rem;
        border-radius: 0;
        outline: none;
        color: #fff;
      }
      #messages {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      #messages > li {
        padding: 15px;
        border-bottom: 1px solid #000;
      }
      #messages > li:before {
        content: "└ ";
      }
      #input:disabled, form button:disabled {
        opacity: 0.5;
      }
      #loading {
        position: fixed;
        top: 40%;
        left: 50%;
        margin-left: -135px;
        width: 270px;
        text-align: center;
        font-size: 40px;
      }