#chat-widget {
    width: 400px;
    height: 550px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 150px;
    left: 20px; /* Cambiado de 'right: 20px;' a 'left: 20px;' */
    background-color: #fff;
    z-index: 1000;
    overflow-x: hidden; /* Oculta el desplazamiento horizontal */
}

.hidden {
    display: none !important;
}

#chat-button {
    position: fixed;
    bottom: 90px;
    left: 20px;
    background-color: #fff;
    color: white;
    border: 1px solid #5aabc8;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}

#chat-button.open {
    border: 1px solid #5aabc8; /* Asegurar el mismo color del borde cuando el botón está abierto */
}

#chat-button:focus,
#chat-button:active {
    outline: none; /* Elimina el borde de enfoque */
    border-color: #5aabc8; /* Mantén el color del borde original */
    box-shadow: none; /* Elimina el efecto de sombra que algunos navegadores aplican */
}

#chat-header {
    background-color: #33b4a2;
    color: white;
    padding: 10px;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#chat-body {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden; /* Oculta el desplazamiento horizontal */
}

#chat-footer {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ccc;
}

#chat-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#send-button {
    background-color: #33b4a2;
    color: white;
    border: none;
    padding: 10px;
    margin-left: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.message-agent {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 13px 13px 3px 3px;
    margin-bottom: 20px !important;
    position: relative;
    width: fit-content;
    max-width: 70%;
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Ícono del agente */
.message-agent .icon-user {
    width: 40px; /* Tamaño del ícono */
    height: 40px;
    position: absolute; /* Posiciona el ícono fuera del recuadro */
    left: -50px; /* Mueve el ícono fuera del recuadro */
    top: 50%; /* Centra el ícono verticalmente */
    transform: translateY(-50%); /* Ajusta el centrado vertical */
    border-radius: 50%; /* Hace el ícono redondo */
}


.message-auto {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 13px 13px 13px 3px;
    margin-bottom: 20px !important;
    position: relative;
    width: fit-content;
    max-width: 70%;
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Ícono del agente */
.message-auto .icon-user {
    width: 40px; /* Tamaño del ícono */
    height: 40px;
    position: absolute; /* Posiciona el ícono fuera del recuadro */
    left: -50px; /* Mueve el ícono fuera del recuadro */
    top: 50%; /* Centra el ícono verticalmente */
    transform: translateY(-50%); /* Ajusta el centrado vertical */
    border-radius: 50%; /* Hace el ícono redondo */
}



/* Mensaje del cliente */
.message-client {
    background-color: #33b4a2;
    padding: 10px;
    border-radius: 13px 13px 3px 13px;
    margin-bottom: 20px !important;
    width: fit-content;
    max-width: 70%;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    text-align: right;
    word-break: break-word;
}

.message-client-btn {
    background-color: orange;
    padding: 7px;
    border-radius: 10px;
    margin-bottom: 20px !important;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    text-align: right;
    cursor: pointer;
}

/* Contenedor del texto del mensaje */
.message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

/* Estilo del texto del cliente */
.message-client span {
    color: white;
    text-align: left; /* Asegura que el texto dentro del mensaje también esté alineado */
}

  /* Contenedor de los botones */
  .content-btns {
    display: flex;
    justify-content: flex-end; /* Alinear a la derecha */
    margin-top: 10px; /* Espacio superior, si es necesario */
}


.message-client-btn span {
    color: white;
    text-align: left; /* Asegura que el texto dentro del mensaje también esté alineado */
    font-size: 0.95em;
    
}

/* Hora del mensaje - Agente */
.message-time-agent {
    font-size: 0.7em;
    color: #333;
    margin-top: 5px;
    align-self: flex-end; /* Alinea la hora a la derecha dentro del contenedor */
}

/* Hora del mensaje - Cliente */
.message-time-client {
    font-size: 0.7em;
    color: #fff;
    margin-top: 5px;
    align-self: flex-end; /* Alinea la hora a la derecha dentro del contenedor */
}

/* Nombre del usuario del cliente */
.message-user-client {
    font-weight: bold;
    font-size: 0.9em;
    color: #fff;
    text-align: left; /* Alinea el nombre a la izquierda */
}

/* Nombre del usuario del agente */
.message-user-agent {
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
    text-align: left; /* Alinea el nombre del agente a la izquierda */
}

.message-agent span {
    color: rgb(12, 12, 12);
    text-align: left; /* Asegura que el texto dentro del mensaje esté alineado a la izquierda */
}

.message-auto span {
    color: rgb(12, 12, 12);
    text-align: left; /* Asegura que el texto dentro del mensaje esté alineado a la izquierda */
}

/* Ocultar el widget inicialmente */
.hidden {
    display: none;
}

/* Animación para mostrar y ocultar */
@keyframes slideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Aplicar la animación */
.show {
    animation: slideIn 0.5s forwards;
}

.hide {
    animation: slideOut 0.5s forwards;
}

/* Icono de chat */
#chat-button .icon-chat {
    display: inline;
    width: 33px;
    height: 30px;
}

/* Icono de flecha hacia abajo (oculto por defecto) */
#chat-button .icon-down {
    display: none;
    width: 33px;
    height: 33px;
}

/* Mostrar el icono de flecha hacia abajo cuando el chat esté desplegado */
#chat-button.open .icon-chat {
    display: none;
}

#chat-button.open .icon-down {
    display: inline;
}

/* Animación de giro */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotating {
    animation: rotate 0.4s linear;
}

/* estilos form dentro de chat */
.form-data{
    display: flex;
    padding: 10px;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    border:1px solid #bca;
    border-radius: 8px;
    margin-bottom:20px;
}

.form-data form{
    width: 100%; /* Asegura que el formulario ocupe todo el ancho disponible */
    max-width: 500px; /* Ancho máximo para el formulario */
    display: flex;
    flex-direction: column; /* Coloca los elementos en columna */
    align-items: center; /* Centrar elementos horizontalmente */
}

.button-form {
    align-self: center; /* Centra el botón dentro del formulario */
    color: white;
}

.btn-continuar{
    padding: 5px !important;
}
.form-control-sm{
    height: 35px !important;
}

/* CSS para la animación de tres puntos */
.typing-animation .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background-color: #ccc;
    border-radius: 50%;
    animation: blink 1.5s infinite ease-in-out;
}

.typing-animation .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-animation .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}
