body {
    position: relative;
    height: 100vh;
    margin: 0;
    padding: 0;
/*     font-family: Helvetica, Arial, sans-serif; */
    font-size: 14px; 
    color: #222222;
  }
  
  #chat-window {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 350px;
    height: 450px;
    box-shadow: 0px 5px 20px rgba(0,0,0,0.2);
    background: #ffffff; 
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    z-index: 12000;
  }

  #chat-window::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('icons/logo.png') no-repeat center;
    opacity: 0.1; /* Aplica la opacidad solo a la imagen de fondo */
    z-index: -1; /* Pone la imagen detrás del contenido de la ventana de chat */
  }
  
  .main-title {
    text-align: center;
    padding: 10px;
    font-size: 16px;
    color: #931C44;
    font-weight: bold;
    border-bottom: 1px solid #dddddd;
    display: flex;
    justify-content: space-between;

  }
  .botones-superiores{
    display: flex;
  }
  #chat-messages {
    
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    font-weight: lighter;
    border-bottom: 1px solid #dddddd;
  }

  .error-message {
    color: red;
    display: none;
}
  
  .message-container {
    display: flex;
    align-items: baseline;
}

.user-message .message-container {
    flex-direction: row-reverse;
}

  .user-message {
    text-align: right;
  }

  #chat-form {
    display: flex;
    margin-bottom: 10px;
  }
  
  #chat-input {
    color: #222222;
    flex-grow: 1;
    border: none;
    padding: 10px;
    border-radius: 4px;
  }
  
  #chat-form button {
    margin-left: 10px;
    padding: 10px;
    color: #ffffff;
    background: #931C44;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  #chat-form button:hover {
    background: #940031;
  }
  
  @keyframes scale-animation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1);
    }
  }
  
  #expand-button {
    position: absolute;

    background-color: rgb(255, 255, 255);
    border: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #expand-icon {
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.5s ease-in-out;
    animation: scale-animation 1.5s infinite;
  }
  

  #registro-window {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 315px;
    height: 403px;
    box-shadow: 0px 5px 20px rgba(0,0,0,0.2);
    background: #ffffff; 
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 12000;
  }
  
  #registro-window input {
    width: 70%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  #registro-window button {
    padding: 10px 20px;
    border: none;
    background-color: #931C44;
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }

  
  @media  (max-width: 450px) {


    
    #chat-window::before {
      background-size: contain;
    }
  }