.message {
    display: grid;
    grid-template-columns: 2rem 1fr;
    grid-template-rows: min-content min-content;
    grid-template-areas:
        "sender-icon sender-name"
        ". message";
    gap: 0.25rem .75rem;
    animation: message-appear 0.25s ease-out;
    overflow-y: hidden;
}

@keyframes message-appear {
    0% {
        max-height: 0;
        opacity: 0;
    }

    100% {
        opacity: 1;
        max-height: 100px;
    }
}

.message ::deep .initials {
    background-color: grey;
}

.message.assistant ::deep .initials {
    background-color: #d800b1;
}

.message.assistant:not(.visible) {
    display: none;
}

.sender-icon {
    grid-area: sender-icon;
    align-self: center;
    justify-self: center;
}

    .sender-icon ::deep img {
        width: 21px !important;
    }

.sender-name {
    grid-area: sender-name;
    font-size: 1rem;
    font-weight: 600;
    align-self: center;
}

.message-content {
    grid-area: message;
}

.message-text {
    white-space: pre-line;
    word-break: break-word;
}

.search-info {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

    .search-info:before {
        content: 'Searching: ';
    }

.reference-link {
    display: flex;
    text-decoration: none;
    background-color: rgba(128, 128, 128, 0.3);
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

    .reference-link .ref-text {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

        .reference-link svg {
            color: var(--neutral-foreground-rest);
            width: var(--type-ramp-base-line-height);
            height: var(--type-ramp-base-line-height);
            flex-grow: 0;
            flex-shrink: 0;
            margin-right: 0.4rem;
        }

::deep .use-as-reply {
    margin-top: 0.8rem;
    text-align: center;
}