.self-end {
    align-self: flex-end;
}

.loader-ioa {
    width: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: l5 1s infinite linear alternate;
    margin-left: auto;
    margin-right: auto;
}

html.dark .loader-ioa {
    animation-name: l5Dark;
}

@keyframes l5 {
    0% {
        box-shadow: 20px 0 #000, -20px 0 #0002;
        background: #000;
    }
    33% {
        box-shadow: 20px 0 #000, -20px 0 #0002;
        background: #0002;
    }
    66% {
        box-shadow: 20px 0 #0002, -20px 0 #000;
        background: #0002;
    }
    100% {
        box-shadow: 20px 0 #0002, -20px 0 #000;
        background: #000;
    }
}

@keyframes l5Dark {
    0% {
        box-shadow: 20px 0 #fff, -20px 0 #fff2;
        background: #fff;
    }
    33% {
        box-shadow: 20px 0 #fff, -20px 0 #fff2;
        background: #fff2;
    }
    66% {
        box-shadow: 20px 0 #fff2, -20px 0 #fff;
        background: #fff2;
    }
    100% {
        box-shadow: 20px 0 #fff2, -20px 0 #fff;
        background: #fff;
    }
}

.assistant-ai-messages {
    max-height: calc(100vh - 21rem);
    padding-left: 1px;
    padding-right: 1px;
}

.reset-styles *{
    all: revert;
}
