body { 
          font-family: arial, sans-serif;
          font-size: 10px;
          }
          
        .input-username {
          margin-bottom: 5px;
          margin-top: 5px;
          }
          
        .input-password {
          margin-bottom: 5px;
          }
          
        .button { 
          padding: 3px 23.5px; 
          background: #0084ff; 
          color: white; 
          border: none; 
          cursor: pointer; 
          }
          
        #auth-section {
          background-color: var(--block-color);
          padding: 55px 56px 55px 56px;
          height: 126px;
          width: 177px;
          }  
          
        #chat-container { 
          width: 100%; 
          max-width: 289px; 
          overflow: hidden; 
          }
        
        /* Chat Window Scroll Area */
        
        #chat-window { 
          height: 203px; 
          width: 279px;
          overflow-y: scroll; 
          scrollbar-gutter: stable; 
          padding: 5px 5px 0px 5px;
          margin-bottom: 1px;
          }
          
        #messages { 
          list-style: none; 
          padding: 0; 
          margin: 0; 
          display: flex; 
          flex-direction: column; 
          }
        
        /* Message Bubbles */
        
        .msg { 
          margin-bottom: 5px; 
          max-width: 80%; 
          padding: 8px 12px; 
          color: #111;
          background-color: #0000000d; 
          align-self: flex-start; 
          }
          
        .msg.my { 
          background-color: #0000000d; 
          align-self: flex-end; 
          margin-right: 1px;
          }
          
        .name { 
          font-weight: bold; 
          font-style: normal; 
          font-size: 0.8em; 
          display: block; 
          margin-bottom: 2px; 
          }
          
        .msg-span {
          display: inline-block;
          max-width: 100%;       /* Or a fixed width like 200px */
          overflow-wrap: break-word; 
          }
        
        /* Form Styling */
        
        #messageForm { 
          display: flex; 
          /*padding: 10px; */
          background-color: var(--block-color);
          }
          
        #msg-input { 
          flex-grow: 1; 
          padding: 8px 8px 8px 6px;
          border: none; 
          outline: none; 
          font-size: 10px;
          background-color: var(--block-color);
          }
          
        #msg-submit {
          background-color: red;
          border: none;
          color: white;
          /* padding: 0px 0px; */
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 10px;
          cursor: pointer;
          display: none;
          }