// (C) 2024-2025 GoodData Corporation
@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
@use "@gooddata/sdk-ui-kit/src/@ui/defaultTheme.scss";
@use "react-loading-skeleton/dist/skeleton.css";
@use "@gooddata/sdk-ui-pivot/styles/css/main.css";
@use "@gooddata/sdk-ui-dashboard/styles/css/kdaDialog.css";

@use "input";
@use "variables" as variables;
@use "messages";
@use "window";
@use "conversations";
@use "animation";
@use "intelligence";
@use "tooltip";

.gd-gen-ai-chat__context-chooser {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 245px;
    height: 271px;
    box-sizing: border-box;
    padding-bottom: 10px;

    .gd-ui-kit-paged-virtual-list {
        flex: 0 0 auto;
        height: 196px;
    }

    &:has(.gd-list-searchfield) .gd-ui-kit-paged-virtual-list {
        height: 168px;
    }

    .gd-list-searchfield {
        margin: 0 10px;
    }

    .gd-list-item {
        justify-content: flex-start;
        gap: 10px;

        .gd-ui-kit-icon {
            flex: 0 0 auto;
        }

        .gd-bubble-trigger {
            min-width: 0;
            overflow: hidden;
        }

        .shortened {
            display: block;
            width: 100%;
            min-width: 0;
            overflow: hidden;
        }

        &--selected {
            color: var(--gd-palette-primary-base);
            font-weight: bold;
        }
    }
}

.gd-gen-ai-chat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1em;
    width: 100%;
    height: 100%;
    background-color: kit-variables.$gd-color-light;
    border-radius: 0 0 3px 3px;

    // Some apps include typography after the gen-ai styles
    // this should not happen, but we can never be sure
    // as the component is embeddable by the end user.
    // Need to have high specificity selectors
    &__disclaimer.gd-typography.gd-typography--p {
        font-size: 12px;
        color: kit-variables.$gd-color-state-blank;
        text-align: center;
        line-height: normal;
        // Use custom x margin cause some apps user slightly different
        // font and it may not align properly with larger margin
        margin: calc(#{variables.$y-spacing} - 1em) 10px variables.$x-spacing;
    }

    &__context-indicator {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
        min-width: 0;
        margin: 7px 7px 0 7px;
        font-size: 12px;
        line-height: normal;
        color: kit-variables.$gd-color-state-blank;

        .gd-ui-kit-skeleton--inline {
            display: inline;
        }
    }

    &__global_error {
        margin: variables.$y-spacing variables.$x-spacing;
        display: flex;
        flex-direction: column;
        gap: 15px;

        &__buttons_first {
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 15px;
        }

        &__buttons {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        &__trace-id {
            color: var(--gd-palette-complementary-6);
            text-align: center;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            display: flex;
            align-items: center;
            justify-content: center;

            &-name {
                text-decoration: underline;
                text-decoration-style: dashed;
            }
        }

        &__details {
            &__content {
                display: flex;
                flex-direction: column;
                height: 233px;
                padding-top: 5px;
                align-items: flex-start;
                align-self: stretch;
                border-radius: 3px;
                border: 1px solid var(--gd-palette-complementary-3);
            }

            &__content-title {
                display: flex;
                padding: 0 10px;
                align-items: center;
                gap: 5px;
                align-self: stretch;
                flex-grow: 0;
            }

            &__content-title-text {
                flex: 1 0 0;
                color: var(--gd-palette-complementary-6);
                font-feature-settings:
                    "liga" off,
                    "clig" off;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 23px; /* 164.286% */
            }

            &__content-description {
                display: flex;
                padding: 10px;
                align-items: flex-start;
                gap: 10px;
                align-self: stretch;
                border-radius: 0 0 3px 3px;
                border-top: 1px solid var(--gd-palette-complementary-3);
                background: var(--gray-100-fcfcfd-com-0, #fcfcfd);
                margin: 0;
                color: var(--gd-palette-complementary-7);
                font-family: "Andale Mono", serif;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                overflow: auto;
                overscroll-behavior: contain;
                white-space: normal;
                word-break: break-word;
            }
        }
    }
}