SqlDatabaseVectorSearch/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css

.tooltip-inner {
    text-align: left;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #ddd;
    padding: 2px;
    flex: none;
}

input:focus {
    outline: 0px !important;
    box-shadow: none !important;
}

input[type="checkbox"],
input[type="checkbox"] + label {
    cursor: pointer;
}

.card-body {
    overflow: auto;
    height: 560px;
}

@media (min-width: 768px) {
    .card-body {
        height: 650px;
    }
}

@media (min-width: 2560px) {
    .card-body {
        height: 1020px;
    }
}

.card-text {
    border: 2px solid #ddd;
    border-radius: 8px;
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 8px;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgb(5, 114, 206);
    animation: typing-bounce 1.2s infinite ease-in-out both;
}

    .typing-dot:nth-child(1) {
        animation-delay: -0.24s;
    }

    .typing-dot:nth-child(2) {
        animation-delay: -0.12s;
    }

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .4;
    }

    40% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .typing-dot {
        animation-name: typing-fade;
        animation-duration: 2s;
    }

    @keyframes typing-fade {
        0%, 80%, 100% {
            opacity: .4;
        }

        40% {
            opacity: 1;
        }
    }
}

.message-content {
    position: relative;
}

.streaming-content {
    position: relative;
    min-height: 1.5em;
}

.streaming-text {
    /* Add padding to make space for the spinner when streaming */
}

.streaming-text-with-spinner {
    padding-bottom: 28px; /* Space for spinner (16px height + 8px margin + 4px extra) */
}

.streaming-spinner-bottom-left {
    position: absolute;
    bottom: 2px;
    left: 0px;
    z-index: 10;
}

.btn-clipboard {
    line-height: 1;
    color: var(--bs-body-color);
    background-color: var(--bd-pre-bg);
    border: 0;
    border-radius: .25rem;
    margin-right: -.4em
}

    .btn-clipboard:hover {
        color: var(--bs-link-hover-color)
    }

    .btn-clipboard:focus {
        z-index: 3
    }

.btn-clipboard {
    position: relative;
    z-index: 2;
}