@keyframes l23-0 {
    0%,31%  {background-position: 50% 0   ,100% 0}
    33%     {background-position: 50% 100%,100% 0}
    43%,64% {background-position: 50% 0   ,100% 0}
    66%     {background-position: 50% 0   ,100% 100%}
    79%     {background-position: 50% 0   ,100% 0}
    100%    {transform:translateX(calc(-100%/3))}
}
@keyframes l23-1 {
    100% {left:calc(100% + 3px)}
}
@keyframes l23-2 {
    100% {top:-0.1px}
}

llm-assistant-chat {

    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100dvh;
    background-color: var(--color-secondary-4);

    #llm-assistant-form {
        position: sticky;
        bottom: 0;
        background: inherit;
        width: 100%;
        background: white;
        padding: var(--spacing-1) var(--spacing-1);
        box-shadow: var(--shadow);

        #div_id_query {
            margin-bottom: 0;
        }

        button[type="submit"] {
            width: 40px;
            height: 40px;
            min-width: 40px;
            padding: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-primary-1);
            border: none;
            cursor: pointer;
            position: absolute;
            right: var(--spacing-0);
            bottom: var(--spacing-0);
            svg-icon {
                color: white;
            }
        }

        button[type="submit"]:hover {
            background-color: var(--color-primary-1-dark);
            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
        }
        .control-group:has(.compact-select) {
            margin-top: 10px;
            display: inline-flex;
            align-items: center;
            margin-bottom: 0;
        }

        #div_id_index_type {
            & ~ button[type="submit"] {
                bottom: calc(var(--spacing-0) + 22px);
            }
        }


    }

    textarea[name="query"] {
        border: none;
        height: 24px;
        min-height: 24px;
        max-height: 200px;
        overflow-y: hidden;
        resize: none;
        width: 100%;
        box-sizing: border-box;
        padding: 0 var(--spacing-1) 0 0;
        list-style: none;
        font: var(--font-body-large);
        font-size: 16px;
        -webkit-text-size-adjust: 100%;

        &:focus {
            box-shadow: none;
        }
    }


    .messages {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        flex: 1;
        gap: var(--spacing-2);
        overscroll-behavior: contain;
        padding: var(--spacing-1);
    }
    .message {
        display: flex;
        padding: 14px var(--spacing-0);
        border-radius: 10px;
        max-width: 80%;
        scroll-margin-bottom: calc(var(--spacing-0) + var(--spacing-1));

        button image {
            width: 24px;
            height: 24px;
        }

        > span {
            min-height: var(--spacing-0);
            white-space: pre-wrap;

            > * {
                white-space: normal;
            }
        }

    }

    /* System messages aligned to the left */
    .system-message {

        background: white;
        align-self: flex-start;
    }

    /* User messages aligned to the right */
    .user-message {

        background-color: var(--color-primary-2);
        color: white;
        align-self: flex-end;
    }

    .satisfaction-feedback-row {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing-0);

        button.clicked svg-icon{
            color: var(--color-primary-1);
        }
    }

}