@use './mixins';

.paca-ai-search {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.paca-ai-search-input-container {
	position: relative;
	display: block;
}

.paca-ai-search-input {
    @include mixins.card;
    
	resize: none;
	overflow-y: auto;
	box-sizing: border-box;
	transition: height 0.2s ease;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.4;
    padding-bottom: 2rem;
}

// Honeypot field - hidden from users, visible to bots
.paca-ai-search-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	z-index: -1;
}

.paca-ai-search-input-controls {
    position: absolute;
    bottom: 0.75rem;
	right: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background-color: #fff;
    z-index: 2;
}

.paca-ai-search-button {
	border: none;
	background: transparent;
	outline: none !important;
	transition: all 0.3s ease;

	svg {
		width: 100%;
		height: auto;
		max-width: 1rem;
		fill: #ccc;
	}

	&:hover {
		cursor: pointer;

        svg {
            fill: #000;
        }
	}
}

.paca-ai-search-input-counter {
    font-size: 0.75rem;
    color: #666;
}

.paca-ai-search-answer-result {
    @include mixins.card;
    min-height: 200px;

    p {
        margin: 0;
    }
}

.paca-ai-search-answer-skeleton {
    @include mixins.card;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    &--line {
        height: 1rem;
        border-radius: 4px;
        @include mixins.skeleton-shimmer;
        
        &:first-child {
            width: 90%;
        }
        
        &:nth-child(2) {
            width: 75%;
        }
        
        &:last-child {
            width: 60%;
        }
    }
}

.paca-ai-results,
.paca-ai-search-results {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.paca-ai-search-result {
    flex: 0 0 calc(25% - 1rem);

    &--link {
        @include mixins.card;
        padding: 8px 19px 8px 12px;

        text-decoration: none;
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
    }

    &--title {
        font-size: 1rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0.5rem;
    }

    &--categories,
    &--author {
        font-size: 0.8rem;
        color: #666;
    }

    &--icon {
        width: 1rem;
        height: auto;
        position: absolute;
        bottom: 0.25rem;
        right: 0.175rem;
        padding: 0;
    }

    p {
        margin: 0;
    }

    &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        & .paca-ai-search-result--title {
            text-decoration: underline;
        }

        & .paca-ai-search-result--icon {
            opacity: 0.7;
        }
    }
}

.paca-ai-load-more {
    @include mixins.card;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
    padding: 10px;
    cursor: pointer;
    background-color: #fff;

    &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}