body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

textarea {
    display: block;

    &#query {
        height: 200px;
        resize: none;
        overflow-y: scroll;
    }
}

form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
}

div#dialogue-box {
    width: 100%;
    max-width: 600px;

    .chat {
        padding: 1rem 1rem;
        border: 1px solid black;
        border-radius: 1rem;
        width: 50%;
        margin-bottom: 1rem;

        &.query {
            float: right;
            background-color: lightgrey;
        }

        &.response {
            float: left;
            background-color: white;
        }
    }
}

/* HTML: <div class="loader"></div> */
.loader {
    opacity: 0;
    width: 60px;
    aspect-ratio: 8;
    background: radial-gradient(circle closest-side, #000 90%, #0000) 0/calc(100%/3) 100% space;
    clip-path: inset(0 100% 0 0);
    animation: l1 1s steps(4) infinite;
    margin-bottom: 0.2rem;

    &.htmx-request {
        opacity: 1;
    }
}

@keyframes l1 {
    to {
        clip-path: inset(0 -34% 0 0)
    }
}