.ai-search {
    border-style: solid;
    border-width: 2px;
    border-image-source: $rainbow-linear-gradient;
    border-image-slice: 0;
    background-image: linear-gradient(to bottom, #fff, #fff),
        $rainbow-linear-gradient;
    background-origin: border-box;
    background-clip: content-box, border-box;

    border-radius: var(--theme-rounded-corners, 0.4rem);

    &-content {
        max-height: 350px;
        overflow-y: auto;
    }

    &-applications {
        column-gap: 1rem / 2;
    }

    &-line {
        flex-grow: 1;
        height: 1px;
        background-color: $gray-300;
    }

    &-info {
        color: $gray-600;
    }

    //modifier class to retain theme navbar bg colour in the search field
    &-navbar {
        @include media-breakpoint-up(md) {
            background-image: linear-gradient(to bottom, var(--theme-navbar-search-bg), var(--theme-navbar-search-bg)),
            $rainbow-linear-gradient;
        }
    }
}

.ai-skeleton {
    width: 100%;
    height: auto;

    svg {
        width: 100%;
        height: 100px;
        display: block;
    }
}

.ai-show-more-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;

    &.ai-expanded {
        max-height: 2000px;
    }
}

.ai-citation {
    &-title {
        max-width: 200px;
    }

    &-popover {
        font-size: 0.8rem;

        small {
            font-size: 0.70rem;
        }

        ion-icon {
            transform: rotate(48deg);
            font-size: 0.8rem;
        }
    }
}

.ai-application-popover-list {
    overflow: auto;
    max-height: 350px;
}
