@import "animations";

:root {
    --ai-primary-color: var(--purple-700);
    --ai-primary-bg: var(--purple-100);
    --ai-primary-border: var(--purple-200);
    --ai-secondary-color: var(--gray-700);
    --ai-secondary-bg: var(--gray-100);
    --ai-secondary-border: var(--gray-300);
}

.ai-generative-tips {
    color: $gray-700;

    .title {
        font-weight: 500;
    }

    ion-icon {
        color: $gray-600;
        font-size: 1.7rem;
    }
}

.ai-generative-warning {
    color: var(--ai-secondary-color);

    .sub-title {
        font-weight: 500;
    }

    ion-icon {
        color: $gray-600;
        font-size: 1.7rem;
    }

    .card-header {
        &:not(.d-none) {
            +.card-body {
                background-color: $card-cap-bg;
                color: $gray-800;
            }
        }
    }
}

.ai-modal-dialog {
    .modal-dialog {
        border-style: solid;
        border-width: 3px;
        border-image-source: $rainbow-linear-gradient;
        border-image-slice: 1;
        background-image: linear-gradient(to bottom, #fff, #fff), $rainbow-linear-gradient;
        background-origin: border-box;
        background-clip: content-box, border-box;
        z-index: 9999;

        border-radius: var(--theme-rounded-corners, .4rem);
    }

    .clear-textarea {
        width: 25px;
        height: 25px;
        top: 0.5rem;
        right: 0.5rem;

        ion-icon {
            color: $gray-600;
        }
    }

    .ai-text-generator {
        .preview {
            background-image: linear-gradient(to bottom, $gray-100, $gray-200);
            height: auto;
            max-height: 60vh;
            overflow-y: auto;

            h1 {
                font-size: 1.25rem;
            }

            h2 {
                font-size: 1.15rem;
            }

            h3 {
                font-size: 1.05rem;
            }

            @include media-breakpoint-down(xl) {
                max-height: 45vh;
            }

            @include media-breakpoint-down(md) {
                max-height: 40vh;
            }

            @include media-breakpoint-down(sm) {
                max-height: 30vh;
            }
        }
    }

    .ai-image-generator {
        .preview {
            min-height: 200px;
            height: auto;
            max-height: 60vh;
            border: solid 1px $border-color;
            background-image: linear-gradient(to bottom, #fcfdfe, $gray-100);
            overflow: auto;

            @include media-breakpoint-up(lg) {
                overflow: hidden;
            }

            .loading-preview,
            .images-preview {
                .col {
                    @include media-breakpoint-down(md) {
                        &:not(:last-child) {
                            margin-bottom: 1rem;
                        }
                    }
                }
            }

            .loading-square {
                opacity: 0.15;
                background: linear-gradient(to bottom right, #32bbff, #b120e0 49%, #f7a800);
                background-size: 200% 200%;
                animation: gradientAnimation var(--ai-gradient-duration) linear infinite;
                min-height: 200px;

                &::after {
                    position: absolute;
                    content: "";
                    background-color: $white;
                    width: 35px;
                    height: 35px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    border-radius: 50%;
                    animation: pulsate var(--ai-pulsate-duration) alternate infinite;
                }
            }

            .image-preview {
                .select-preview-image {
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}

.ai-action-sheet {
    position: fixed;
    top: var(--ai-assistant-offset-top, 134px);
    right: -130vw;
    width: 500px;
    height: calc(100vh - var(--ai-assistant-offset-top, 134px));
    max-height: 800px;
    background-color: $white;
    transition: top 0.2s ease, right 0.3s ease-in-out;
    z-index: 79;
    box-shadow: 0 3px 20px 0 rgba(0,0,0,.07);

    @include media-breakpoint-down(md) {
        max-height: 80vh;
    }

    @include media-breakpoint-only(xs) {
        max-width: calc(100vw - 2rem);

        >* {
            width: 100%;
            @include box-shadow($box-shadow-lg);
        }
    }

    &.ai-action-sheet-open {
        right: var(--ai-assistant-offset-right, 0px);
    }
}

.ai-chat-conversation {
    max-width: 500px;
    height: 100%;

    .ai-header {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .ai-send,
    .ai-close {
        width: 1.5rem;
        height: 1.5rem;
        top: 0.5rem;
        right: 0.5rem;

        ion-icon {
            color: $black;
        }
    }

    .ai-chat-spinner {
        width: 6rem;
        height: 6rem;
        color: var(--ai-primary-color);
    }

    .ai-conversations {
        .ai-conversations-content {
            .ai-conversation {
                &:not(:last-child) {
                    margin-bottom: 2rem;
                }

                * {
                    display: inline-block;
                }

                p {
                    margin-bottom: 0px;
                }
            }
        }

        .ai-conversation {
            animation: fadeUp 0.4s ease forwards;

            &-user {
                .ai-conversation-content {
                    background: var(--ai-primary-bg);
                    color: var(--ai-primary-color);
                    border: solid 1px var(--ai-primary-border);
                }
            }

            &-loading,
            &-model {
                .ai-conversation-content {
                    background: var(--ai-secondary-bg);
                    color: var(--ai-secondary-color);
                    border: solid 1px var(--ai-secondary-border);
                }
            }

            &-loading {
                .ellipsis {
                    width: 0.7rem;

                    &:after {
                        overflow: hidden;
                        display: inline-block;
                        vertical-align: bottom;
                        animation: ellipsis steps(4, end) 900ms infinite;
                        content: "\2026";
                        /* ascii code for the ellipsis character */
                        width: 0px;
                    }
                }
            }


        }
    }

    .ai-introduction {
        color: var(--ai-primary-color);

        ion-icon {
            background: var(--ai-primary-bg);
            font-size: 2.5rem;
        }

        p {
            font-size: 1.1rem;
        }
    }

    .ai-questions-list {
        list-style: none;
        color: var(--ai-primary-color);

        li ~ li {
            margin-top: 10px;
        }

        .ai-question {
            background: var(--ai-primary-bg);
            border: solid 1px var(--ai-primary-border);
        }
    }
}
