@import "./stu-cmd";

.box {
    .box-body {
        position: relative;

        .body {
            padding: 10px;
            background: #d8e7f9;
            background: linear-gradient(174.54deg, rgba(204, 224, 248, 0.76) 0.23%, rgba(242, 249, 255, 0.76) 120.71%);
            display: flex;
            flex-direction: column;

            &.log-cmd-box {
                display: block;
            }

            &.txt-cmd-box {
                display: none;

                .btn {
                    width: 150px;
                }
            }
        }
    }

    .logs-box {
        width: 100%;
        display: flex;
        flex-direction: column;

        .log-box {
            display: flex;
            padding: 10px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 8px;
            margin: 5px 0;
            overflow: hidden;

            .content {
                width: 100%;
                display: flex;
                flex-direction: column;
                padding: 5px;
                padding-right: 15px;

                .title {
                    display: flex;
                    align-items: flex-start;

                    .role {
                        font-weight: 600;
                        font-size: 16px;
                        color: #094888;
                    }

                    .scene-name {
                        margin-left: 10px;
                        font-size: 12px;
                        padding: 1px 5px;
                        border-radius: 3px;
                        background: rgba(69, 133, 204, 0.1);
                        border: 1px solid #094888;
                        color: #094B88;
                    }
                }

                .text {
                    font-size: 14px;
                    color: #36536D;
                    padding-left: 15px;
                    position: relative;

                    &:before {
                        content: "";
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        border-radius: 8px;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        background: #999;
                    }
                }
            }

            .btn-box {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 5px;

                .btn {
                    font-size: 14px;
                    width: 90px;
                }

                .btn-edit {
                    background: transparent;
                    border: none;
                    color: #094888;
                    margin-right: 10px;

                    svg {
                        width: 22px;
                        fill: #36536D;
                        margin-right: 5px;
                    }
                }
            }

            &.send {
                .title .role {
                    color: #03AEBC;
                }

                .text {
                    &:before {
                        background: #03AEBC;
                    }
                }

                .btn {
                    background: #36536D;
                    color: #fff;
                }
            }
        }

        .empty, .end {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            opacity: .4;
        }

        .empty {
            color: #36536D;
        }

        .end {
            color: #dc3545;
            font-weight: 600;
            opacity: .8;
        }
    }

    .btn {
        &.btn-cmd {
            background: #094B88;
        }

        &.btn-back {
            background: #094B88;
        }
    }
}

.question {
    display: none;

    button {
        --w: 80px;
        width: var(--w);
        height: var(--w);
        border-radius: var(--w);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        z-index: 5;
        color: #fff;
        border: none;
        outline: none;

        &:hover {
            background-color: #bd2130;
        }

        i {
            font-size: 40px;
        }

        &:not(:hover) {
            animation: 1s shine ease-in-out infinite;

            i {
                animation: 1s flashing ease-in-out infinite;
            }
        }
    }
}

.question-text {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--mc);
}

@keyframes shine {
    0% {
        filter: drop-shadow(0 0 12px #dc3545);
    }

    50% {
        filter: drop-shadow(0 0 12px #bd2130);
    }

    100% {
        filter: drop-shadow(0 0 12px #dc3545);
    }
}

@keyframes flashing {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: 0.5;
        transform: scale(0.9)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}