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: transparent;
          padding: 34px 4px 0px 4px;
          height: 133px;
          width: 177px;
          border-radius: 2px;
          }
          
        #chat-container { 
          width: 100%; 
          max-width: 289px; 
          overflow: hidden; 
          }
        
        /* Chat Window Scroll Area */
        
        #chat-window {
          height: 159px;
          width: 175px;
          overflow-y: auto;
          scrollbar-width: none;
          padding: 5px 5px 0px 5px;
          margin-bottom: 11px;
        }
          
        /* #messages { 
           list-style: none; 
          padding: 0; 
          margin: 0; 
          display: flex; 
          flex-direction: column; 
          overflow: clip; 
          } */
        
        /* Message Bubbles */
        
        .msg { 
          color: #ffffff;
          }
          
        /*.msg.my { 
           align-self: flex-end; 
          margin-right: 1px; 
          }*/
          
        .name { 
          color: #ffffff94;
          }
          
        .msg-span {
          overflow-wrap: break-word;
          word-break: break-all;
          }
        
        /* Form Styling */
        
        #messageForm {
          display: flex;
          /* padding: 10px; */
          /* background-color: var(--block-color); */
          height: 17px;
        }
          
        #msg-input {
          flex-grow: 1;
          padding: 0px 8px 0px 6px;
          border: none;
          outline: none;
          font-size: 10px;
          background-color: transparent;
          color: #ffffff;
        }
        #msg-input::placeholder {
          color: #ffffff3d;
        }
        #msg-input:focus {
          outline: none;
          color: white;
        }
        
        #msg-input:active {
          outline: none;
          color: white;
        }

        .input-username::placeholder {
          color: #ffffff3d;
        }
        .input-username:focus {
          outline: none;
          color: white;
        }
        
        .input-username:active {
          outline: none;
          color: white;
        }

        .input-password::placeholder {
          color: #ffffff3d;
        }
        .input-password:focus {
          outline: none;
          color: white;
        }
        
        .input-password:active {
          outline: none;
          color: white;
        }
          
        #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 #ffffff3d;
          border-top: 2px solid #ffffff94; /* 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: #ffffff94;
          font-style: italic;
        }
        
        .msg-time {
          color: #ffffff3d;
          margin: 0px -0.8px 0px -0.8px;
        }

#typing-indicator {
    font-size: 9px;
    font-style: italic;
    color: #0000004a;
    height: 10px;
    width: auto;
    position: absolute;
    top: 0px;
    text-align: end;
    /* background: transparent;  */ /* default */
    border-radius: 0px 2px 0px 2px;
    padding: 2px 2px;
    /* transition: background 0.2s ease; */
    right: 0px;
    /* text-align: center; */
    line-height: 10px;

    /* activate this tree to give it a "appear from the top" effect*/ 
    /* transform: translateY(-10px); 
    opacity: 0; 
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s ease; */
}

/* Only apply background when typing is visible */
#typing-indicator.active {
    background: #ffffffbd;
    /* transform: translateY(0); */
    opacity: 1;
    /* backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); */
}



          
altcha-widget {
  --altcha-border-width: 1px;
  --altcha-border-radius: 0px;
  --altcha-color-base: transparent;
  --altcha-color-border: transparent;
  --altcha-color-text: white;
  --altcha-color-border-focus: currentColor;
  --altcha-color-error-text: #f23939;
  --altcha-color-footer-bg: #f4f4f4;
  --altcha-max-width: 260px;
}

.input-password {
    background-color: transparent;
    border-color: transparent;
    color: white;
}

.input-username {
    background-color: transparent;
    border-color: transparent;
    color: white;
}

.verif-button {
    color: #ffffff94;
    background: transparent;
    border: transparent;
    border: solid #ffffff3d 1px;
    border-radius: 4px;
    cursor: pointer;
}