#chatbot-window {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 318px;
    height: 450px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
    color: #222222 !important;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    z-index: 12000;
  }

  #chatbot-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 */
  }

  .chatbot-main-title {
    text-align: center;
    padding: 10px;
    font-size: 16px;
    color: #007bff;
    font-weight: bold;
    border-bottom: 1px solid #dddddd;
    display: flex;
    justify-content: space-between;

  }

  .chatbot-botones-superiores {
    display: flex;
  }

  #chatbot-messages {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    border-bottom: 1px solid #dddddd;
  }

  .chatbot-error-message {
    color: red;
    display: none;
  }

  .chatbot-message-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .chatbot-user-message .chatbot-message-container {
    flex-direction: row-reverse;
    align-items: center;
  }

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

  #chatbot-chatform {
    display: flex;
    margin-bottom: 10px;
  }

  #chatbot-chatinput {
    color: #222222;
    flex-grow: 1;
    border: none;
    padding: 10px;
    border-radius: 4px;
  }

  #chatbot-chatform button {
    margin-left: 10px;
    padding: 10px;
    color: #ffffff;
    background: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  #chatbot-chatform button:hover {
    background: #007bff;
  }

  @keyframes scale-animation {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.15);
    }

    100% {
      transform: scale(1);
    }
  }

  #chatbot-expandbutton {
    position: absolute;
    background-color: rgb(255, 255, 255);
    border: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #chatbot-expandicon {
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.5s ease-in-out;
    animation: scale-animation 1.5s infinite;
  }


  #chatbot-registrowindow {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 318px;
    height: 406px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 12000;
  }

  #chatbot-registrowindow input {
    width: 70%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2)
  }

  #chatbot-registrowindow button {
    padding: 10px 20px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }


  @media (max-width: 450px) {
    #chatbot-window::before {
      background-size: contain;
    }
  }


  #chatbot-minimizebutton {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
  }
  #chatbot-minimizebutton:hover {
    transform: scale(1.2);
  }
  #chatbot-minimizeicon {
    stroke: #000000;
  }
  #chatbot-minimizebutton:hover #chatbot-minimizeicon {
    stroke: rgb(255, 0, 0);
  }


  #borrar-button {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
  }
  #borrar-button:hover {
    transform: scale(1.2);
  }
  #trash-icon {
    stroke: #000000;
  }
  #borrar-button:hover #trash-icon {
    stroke: rgb(255, 0, 0);
  }

  #enviar-mail-button {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
  }
  #enviar-mail-button:hover {
    transform: scale(1.2);
  }
  #enviar-mail-button-icon {
    stroke: #000000;
  }
  #enviar-mail-button:hover #enviar-mail-button-icon {
    stroke: rgb(255, 0, 0);
  }



  .chatbot-modal {
    display: none;
    position: fixed;
    width: 280px;
    right: -140px;
    bottom: 400px;
    transform: translate(-50%, -50%);
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
  }

  .chatbot-modal-content {
    text-align: center;
  }

  .chatbot-modal button {
    margin: 5px;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }





  #chatbot-confirmdelete {
    background-color: red;
    color: white;
  }

  #cancel-delete {
    background-color: gray;
    color: white;
  }