:root {
    font-size: 10px;
}

body {
    font-family: Helvetica, sans-serif, Arial;
    background-color: #B5C18E;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.chat__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat__title, .header__title {
    font-size: 3rem;
    font-weight: bold;
    color: rgb(48, 158, 117);
    text-align: center;
    margin-bottom: 2rem;
}

.header__icon {
    height: 6rem;
    margin-top: 1rem;
}

.chat {
    width: 90%; /* Ancho relativo */
    max-width: 90rem; /* Máximo ancho para pantallas grandes */
    background-color: #1C523E;
    border-radius: 1rem;
    box-shadow: 0 0.5px 5px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    height: 80vh; /* Altura relativa al viewport */
    max-height: 80vh; /* Máxima altura */
}

.chat__messages {
    flex-grow: 1; /* Ocupa el espacio disponible */
    overflow-y: auto;
    padding: 1rem;
    border-radius: 0.8rem;
    background-color: #41586e;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat__message {
    max-width: 75%;
    padding: 1.5rem;
    font-size: 1.8rem;
    border-radius: 1rem;
    word-wrap: break-word;
    white-space: pre-line;
}

.chat__message--user {
    background-color: rgb(60, 175, 133);
    color: white;
    text-align: right;
    margin-left: auto;
}

.chat__message--bot {
    background-color: rgb(42, 126, 95);
    color: white;
    text-align: left;
    margin-right: auto;
}

.chat__input-group {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: 1rem;
}

.chat__input {
    box-sizing: border-box;
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    font-size: 1.6rem;
    border-radius: 5px;
    padding: 1rem;
    transition: all 300ms;
    flex: 4;
}

.chat__input:focus {
    border-color: rgb(38, 192, 61);
    box-shadow: 0px 0px 5px rgb(130, 226, 78);
}

.chat__button {
    font-size: 1.6rem;
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    flex: 1;
    background-color: #2d9a2d;
    color: white;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 300ms ease;
}

.chat__button:hover {
    background-color: rgb(51, 196, 51);
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    :root {
        font-size: 8px; /* Reducir el tamaño base de la fuente para pantallas más pequeñas */
    }

    .chat {
        width: 95%; /* Aumentar el ancho en pantallas más pequeñas */
        height: 90vh; /* Aumentar la altura en pantallas más pequeñas */
        max-height: 90vh;
    }

    .chat__messages {
        height: auto; /* Altura automática */
        flex-grow: 1; /* Ocupa el espacio disponible */
    }

    .chat__message {
        font-size: 1.6rem; /* Reducir el tamaño de la fuente en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    :root {
        font-size: 7px; /* Reducir aún más el tamaño base de la fuente para pantallas muy pequeñas */
    }

    .chat {
        padding: 1rem; /* Reducir el padding en pantallas muy pequeñas */
        height: 100vh; /* Ocupar toda la altura en dispositivos móviles */
        max-height: 100vh;
        border-radius: 0; /* Eliminar bordes redondeados en móviles */
    }

    .chat__messages {
        height: auto; /* Altura automática */
        flex-grow: 1; /* Ocupa el espacio disponible */
    }

    .chat__message {
        font-size: 1.4rem; /* Reducir el tamaño de la fuente en pantallas muy pequeñas */
    }
}

/* Estilos del loader */
.loader {
    font-weight: bold;
    font-family: monospace;
    font-size: 15px;
    display: inline-grid;
}

.loader:before,
.loader:after {
    content: "Escribiendo...";
    grid-area: 1/1;
    -webkit-mask: linear-gradient(90deg, #000 50%, #0000 0) 0 50%/2ch 100%;
    animation: l11 1s infinite cubic-bezier(0.5, 220, 0.5, -220);
}

.loader:after {
    -webkit-mask-position: 1ch 50%;
    --s: -1;
}

@keyframes l11 {
    100% {
        transform: translateY(calc(var(--s, 1) * 0.1%));
    }
}