.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;
          background-size: 278px 208px;
          background-image: linear-gradient(#ffffff, #ffffff);
          background-repeat: no-repeat;
          }
          
        #messages { 
          list-style: none; 
          padding: 0; 
          margin: 0; 
          display: flex; 
          flex-direction: column; 
          }
        
        /* Message Bubbles */
        
        .msg { 
          margin-bottom: 5px; 
          max-width: 80%; 
          padding: 7.8px 7px; 
          color: var(--artist-chatmessage-text);
          background-color: var(--artist-chatmessage-background); 
          border-radius: 4px;
          align-self: flex-start; 
          }
          
        .msg.my { 
          align-self: flex-end; 
          margin-right: 1px;
          }
          
        .name { 
          font-weight: bold; 
          font-style: normal; 
          font-size: 0.8em; 
          color: var(--artist-chatmessage-username);
          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;
          }
          
        /* Spinner Animation */
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        .loader {
          border: 2px solid rgba(0, 0, 0, 0.1);
          border-top: 2px solid #0084ff; /* Matches your button color */
          border-radius: 50%;
          width: 14px;
          height: 14px;
          animation: spin 1s linear infinite;
          display: inline-block;
          vertical-align: middle;
          margin-right: 5px;
        }
        
        #loading-status {
          padding: 10px;
          color: var(--artist-chat-loading);
          font-style: italic;
        }
        
        .msg-time {
  font-size: 0.7em;
  color: var(--artist-chatmessage-date);
  display: block;
  margin-top: 3px;
  text-align: right;
  opacity: 0.7;
}

#typing-indicator {
    font-size: 9px;
    font-style: italic;
    color: #888;
    height: 14px;
    width: 278px;
    background: #ffffff00;
    position: absolute;
    bottom: 28px;
    text-align: end;
}

          
        #msg-input::placeholder {
          color: #ffffff3d;
        }
        #msg-input:focus {
          outline: none;
        }
        
        #msg-input:active {
          outline: none;
        }

        /* .input-username::placeholder {
        } */
        .input-username:focus {
          outline: none;
        }
        
        .input-username:active {
          outline: none;
        }

        /* .input-password::placeholder {
        } */
        .input-password:focus {
          outline: none;
        }
        
        .input-password:active {
          outline: none;
        }