.whale-full-screen {
    min-height: 100vh;
    min-width: 1200px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;

    &-show-chatbox {
        @media screen and (max-width: 1512px) {
            width: calc(100vw - var(--alivia-agi-width-small, 480px));
            min-width: calc(100vw - var(--alivia-agi-width-small, 480px));
        }
        @media screen and (min-width: 1513px) and (max-width: 1727px) {
            width: calc(100vw - var(--alivia-agi-width-middle, 540px));
            min-width: calc(100vw - var(--alivia-agi-width-middle, 540px));
        }
        @media screen and (min-width: 1728px) {
            width: calc(100vw - var(--alivia-agi-width-large, 600px));
            min-width: calc(100vw - var(--alivia-agi-width-large, 600px));
        }
    }

    &-title {
        min-height: 56px;
        background-color: #fff;
        padding: 0 16px;
        display: flex;
        align-items: center;

        &-content {
            flex: 1;
        }
        &-right{
            display: flex;
            align-items: center;
        }
        &-bordered {
            box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.06);
        }

        &-divider {
            width: 1px;
            height: 16px;
            margin: 0 12px;
            background: #EEEEEE;
        }
    }
}

.show-appear-prepare,
.show-appear-start {
    opacity: 0;
    transform: scale(0);
}

.show-appear-start {
    opacity: 0;
    animation: .1s ease-in .1s whale-full-screen-show;
}

.show-appear-active {
    opacity: 1;
    transform: scale(1);
}

@keyframes whale-full-screen-show {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}