/* basic */
body {background-color: transparent;font-size: 13px;user-select: none;}
::-webkit-scrollbar {background-color: transparent;width: 3px;}

/* color */
:root {
    --color: var(--default);
    --default: #3d0cf5;
}
.bg-default {background-color: var(--default);}

/* frame */
.coco {width: 500px;margin: auto;position: relative;}
.system {width: 100%;position: absolute;left: 0;top: 0;height: 400px;cursor: move;}
.profile {margin-bottom: -137px;position: relative;z-index: 1;pointer-events: none;height: 535px;
    span {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition: opacity .05s linear;}
    &.blink span {opacity: 1;}
}

/* btn */
.btn {width: 100%;border-radius: 100px;font-size: 14px;transition-duration: 0s;
    &:hover {transform: translateY(0);transition-duration: .3s;}
}
.btn-saml {display: inline-block;width: auto;height: 40px;line-height: 36px;}
.btn-submit {margin: 10px 0;}
.btn-flex {width: 100%;
    .btn:not(:last-child) {margin-right: 10px;}
}

/* form */
input, .select, select {width: 100%;border-radius: 100px;}
input, .input input, select {padding: 0 15px;}
select:focus, input:not([readonly]):focus, textarea:not([readonly]):focus {border-color: var(--eee);}
textarea {border-radius: 20px;padding: 15px;}

.form {
    hr {margin: 10px auto;}
    item {
        alia {width: 60px;}
        cont {flex: 1;display: flex;align-items: center;}
    }
}

/* control */
.control {background-color: var(--color);padding: 10px;border-radius: 20px;display: flex;align-items: end;
    .btn {padding: 0;background-color: color-mix(in srgb, var(--color), black 30%);box-shadow: -5px -5px 10px color-mix(in srgb, var(--color), white 10%), 5px 5px 10px color-mix(in srgb, var(--color), black 20%);
        &:hover {box-shadow: -5px -5px 10px color-mix(in srgb, var(--color), black 20%), 5px 5px 10px color-mix(in srgb, var(--color), white 10%);}
        .ico {z-index: 1;}
    }
    .control-set {width: 150px;height: 150px;position: relative;margin: 5px;
        .btn {width: 50px;height: 50px;position: absolute;border-radius: 10px;transition-duration: 0s;
            &::after {width: 35px;height: 35px;transform: rotate(45deg);content: '';position: absolute;border-radius: 5px;background-color: color-mix(in srgb, var(--color), black 30%);}
            &:nth-child(1)::after {bottom: -12px;left: 7px;}
            &:nth-child(2)::after {right: -12px;top: 7px;}
            &:nth-child(3)::after {left: -12px;top: 7px;}
            &:nth-child(4)::after {top: -12px;left: 7px;}
            &.active {background-color: white;color: var(--color);z-index: 1;}
            &.active::after  {background-color: white;}
        }
    }
    .control-mode {width: 160px;display: grid;grid-template-columns: repeat(2, 1fr);
        .btn {margin: 10px;width:60px;height:60px;border-radius: 100px;border: 5px var(--color) solid;
            &.active i {color: white;}
        }
        #control-frenzy.active {background-image: conic-gradient(at 50% 50%,var(--red) 0%,var(--pink) 10%,var(--purple) 20%,var(--sapphire) 30%,var(--blue) 40%,var(--cyan) 50%,var(--green) 60%,var(--lime) 70%,var(--yellow) 80%,var(--orange) 90%,var(--red) 100%);}
        #control-voice.active {background-color:  var(--red);}
        #control-text.active {background-color:  var(--green);}
        #control-other.active {background-color:  var(--blue);}
    }
}

/* info */
.info {flex: 1;text-align: center;color: white;line-height: 30px;background-color: color-mix(in srgb, var(--color), black 10%);margin: 10px;border-radius: 100px;opacity: 0;
    &.active {opacity: 1;}
}

/* cont */
.cont {width: 100%;padding: 10px;border-radius: 10px;background-color: white;box-shadow: 0 3px 6px var(--000-1);position: absolute;left: 0;top: calc(100% + 10px);display: none;max-height: 500px;overflow: auto;
    &.active {display: block;}
    &.preparing {visibility: hidden;pointer-events: none;}
    aside {padding: 20px 0;text-align: center;}
    & > load {position: absolute;inset: 0;z-index: 5;min-height: 0;padding: 0;background: rgba(255,255,255,.85);border-radius: inherit;}
}

/* list */
.list {
    li {border: 0;
        a {min-height: 40px;display: flex;align-items: center;cursor: pointer;border-radius: 5px;overflow: hidden;
            span {flex: 1;text-transform: capitalize;padding: 0 10px;}
            .ico {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;}
            .radio {color: var(--ddd);
                &::after {content: '\e9ce';}
            }
            &.active .radio {color: var(--green);
                &::after {content: '\ec1f';}
            }
            &:hover {background-color: var(--f7);
                .ico:hover {background-color: var(--eee);}
                .ico-delete:hover {color: var(--red);}
            }
        }
    }
}

/* agent */
.agent {
    .agent-add {margin-top: 10px;border: 2px var(--eee) dashed;height: 80px;color: var(--color);cursor: pointer;display: flex;transition: .2s;
        &.dragging {border-color: var(--color);}
    }
    .agent-form {display: none;}
}

/* chat */
.chat {}
.chat-cont {height: 370px;overflow: auto;padding: 10px;
    .chat-item {clear: both;overflow: hidden;margin-bottom: 10px;
        p {white-space: pre-wrap;word-break: break-word;}
        .chat-agent {padding: 10px 0;max-width: 80%;}
        .chat-user {float: right;border-top-right-radius: 0;padding: 10px;background-color: var(--f7);border-radius: 10px 10px 0 10px;max-width: 80%;}
        &.pending .chat-agent {color: var(--999);}
    }
}
.chat-tool {display: flex;align-items: center;background-color: var(--f7);margin-top: 10px;border-radius: 10px;overflow: hidden;
    i,
    a {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;}
    i {color: var(--ddd);}
    a:hover {background-color: var(--eee);}
    u {flex: 1;min-width: 0;padding: 0 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-decoration: none;color: var(--999);}
}
.chat-input {display: flex;margin-top: 10px;
    textarea {height: 50px;min-height:0;border: 0;padding: 12px;flex: 1;border-radius: 0;
        &::-webkit-scrollbar {width: 0;}
    }
    a {border-radius: 100%;width: 50px;height: 50px;}
}
.chat.busy {
    #text-send {filter: grayscale(100%);pointer-events: none;}
}
/* voice */
.voice {
    .chat.processing,
    .chat.recording {opacity: .96;}
    .voice-record.anime-rotate.infinite {animation-duration: .8s;animation-timing-function: linear;}
}

/* tool */
.tool {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;
    li {
        a {display: block;border-radius: 5px;padding: 10px 0;font-weight: normal;
            i {display: block;margin: 5px 0;font-size: 30px;}
            span {text-align: center;display: block;padding: 5px 0;}
        }
        &:hover a {background-color: var(--f7);}
        &.active a {background-color: var(--eee);}
    }
}

/* user */
.user {
    .user-info {display: flex;align-items: center;background-color: var(--f7);border-radius: 5px;margin-bottom: 10px;overflow: hidden;
        .user-account {flex: 1;justify-content: flex-start;
            a {margin-right: 10px;width: 40px;height: 40px;display: flex;align-items: center;justify-self: center;
                &:hover {background-color: var(--eee);}
            }
        }
        .user-balance {color: var(--red);padding: 0 10px;display: flex;align-items: center;
            i {margin-right: 5px;}
        }
    }
}

.user .user-recharge {position: relative;min-height: 140px;padding: 10px 0;}
.user .user-recharge .btn i {margin-right: 8px;font-size: 20px;}
.user .user-recharge.loading item {visibility: hidden;}
.user .user-recharge > load.recharge-load {position: absolute;inset: 0;z-index: 50;min-height: 0;height: auto;padding: 0;background: white;border-radius: 5px;pointer-events: all;}

/* tab */
tab-list {margin-bottom: 10px;}

/* model */
.model {
    .model-box {display: none;margin-top: 10px;}
}

/* login */
.login {
    aside {padding: 10px 0;}
}

/* history */
.history {display: flex;height: 480px;
    .history-sider {overflow: auto;margin-right: 10px;border-right: 1px solid var(--eee);width: 130px;padding-right: 10px;
        fold-title {padding: 5px;
            h5 {font-size: 13px;font-weight: normal;}
            .ico {width: auto;margin-left: 10px;}
            s {font-size: 16px;}
        }
        fold-cont {padding: 0;}
    }
    .history-cont {flex: 1;min-width: 0;overflow: auto;}
    #history-chat-cont {height: 100%;}
    .history-list {display: grid;grid-template-columns: repeat(4, 1fr);
        a {width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;font-size: 12px;
            &:hover {background-color: var(--f7);}
            &.active {background-color: var(--eee);}

        }
    }
}

/* color */
.color {display: flex;
    a {width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;color: white;border-radius: 100%;
        i {opacity: 0;}
        &.active i {opacity: 1;}
    }
}

/* hardware */
.hardware {padding: 5px 0;}
.hardware-list {
    .hardware-status {pointer-events: none;}
    .radio {flex: none;}
    a.offline {cursor: default;
        span {color: var(--999);}
    }
}

/* alert */
alert {background-color: transparent;
    alert-main {box-shadow: 0 5px 10px var(--000-1);}
}

/* tip */
tip {border-radius: 100px;padding: 5px 20px;}


/* pop */
pop {background-color: transparent;
    pop-main {max-width: 500px;box-shadow: 0 5px 10px var(--000-1);border-radius: 10px;overflow: hidden;
        pop-title {border-radius: 20px 20px 0 0;
            h3 {font-size: 14px;}
        }
        pop-cont {border-radius: 0 0 20px 20px;}
    }
}








