@import "_emoji.css";
$bg-6e: #eee;
$color-3a3a3a: #3a3a3a;

.client {
    position: relative;
    height: 100%;
    min-height: 650px;
    min-width: 1080px;
    overflow: scroll;

    .online-user {
        line-height: 1;
        font-size: 12px !important;
        font-family: arial, "SimHei";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #e0e0e0;

        // bootstrap relevant style reset px($px)
        .btn {
            padding: 0 !important;
        }

        .input-group-addon {
            padding: 3px 7px;
        }

        .header {
            position: relative;
            height: 41px;
            background-color: #fff;
            box-shadow: 0 3px 3px #d2d2d2;

            .chat {
                position: absolute;
                top: 13px;
                left: 35px;
                width: 17px;
                height: 20px;
                background-size: 17px 20px;
                background-image: resolve("service/chat.png");
            }

            .logo {
                position: absolute;
                top: 13px;
                left: 61px;
                width: 78px;
                height: 20px;
            }

            .page-desc {
                position: absolute;
                top: 12px;
                left: 155px;
                height: 21px;
                padding-left: 17px;
                color: #3a3a3a;
                font-size: 12px;
                font-family: "sourcehansanscn medium";
                line-height: 21px;
                border-left: 2px solid #ccc;
            }

            .close {
                position: absolute;
                top: 14px;
                right: 20px;
                height: 16px;
                width: 16px;
                cursor: pointer;
                background-size: 16px 16px;
                background-image: resolve("service/close.png");
            }
        }

        .main {
            position: absolute;
            top: 41px;
            left: 0;
            right: 0;
            bottom: 0;

            .chat-panel {
                position: absolute;
                top: 50%;
                left: 50%;
                height: 560px;
                width: 1080px;
                min-width: 1080px;
                margin-top: -280px;
                margin-left: -540px;
                border-radius: 3px;

                .panel-left,
                .panel-right {
                    position: absolute;
                    top: 0;
                    height: 100%;
                    background-color: #fff;
                }

                .panel-left {
                    left: 0;
                    width: 159px;
                    border-radius: 3px;
                    background-color: transparent;

                    .qr-code {
                        height: 212px;
                        padding-top: 12px;
                        text-align: center;
                        border-radius: 3px;
                        background-color: #fff;

                        .code {
                            display: inline-block;
                            height: 135px;
                            width: 135px;
                        }

                        .scan {
                            text-align: left;

                            .icon {
                                float: left;
                                text-align: left;
                                display: inline-block;
                                height: 24px;
                                width: 24px;
                                margin: 24px 16px 0 24px;
                                background-size: 24px 24px;
                                background-image: resolve("service/scan.png");
                            }

                            .tip {
                                display: inline-block;
                                margin-top: 19px;
                                font-size: 12px;
                                line-height: 1.5;
                            }
                        }
                    }

                    .adv {
                        height: 335px;
                        width: 159px;
                        margin-top: 12px;
                        cursor: pointer;
                    }
                }

                .panel-main {
                    height: 100%;
                    margin-left: 171px;
                    margin-right: 324px;
                    border-radius: 3px;
                    background-color: #f5f5f5;

                    .main-head {
                        height: 29px;
                        border-top-left-radius: 3px;
                        border-top-right-radius: 3px;
                        background-color: $bg-6e;

                        .head-info {
                            font-size: 12px;
                            line-height: 29px;
                            text-align: right;

                            .act {
                                display: inline-block;
                                width: 60px;
                                height: 20px;
                                margin: 0 24px 0 17px;
                                line-height: 20px;
                                text-align: center;
                                border-radius: 2px;

                                &.end-chat {
                                    color: #fff;
                                    background-color: #3a3a3a;
                                }
                            }
                        }
                    }

                    .main-body {
                        padding: 12px 17px;
                        height: 408px;
                        max-height: 408px;
                        overflow-y: auto;

                        .msg-list {
                            .list-item {
                                .push-tip {
                                    height: 17px;
                                    margin: 0 53px 12px;
                                    text-align: center;
                                    background-color: #eaeaea;

                                    .tip {
                                        color: #3a3a3a;
                                        font-size: 12px;
                                        line-height: 17px;

                                        &:before {
                                            content: "";
                                            display: inline-block;
                                            height: 11px;
                                            width: 11px;
                                            margin-right: 6px;
                                            margin-bottom: -2px;
                                            background-size: 11px 11px;
                                            background-image: resolve("service/tip.png");
                                        }

                                        a {
                                            color: #d0021b !important;
                                            text-decoration: none !important;
                                            cursor: pointer;
                                        }

                                        .countdown {
                                            color: #d0021b;
                                        }
                                    }
                                }

                                .about-his {
                                    cursor: pointer;
                                    display: block;
                                    height: 17px;
                                    width: 118px;
                                    margin: 0 auto 10px;
                                    font-size: 12px;
                                    line-height: 16px;
                                    text-align: center;
                                    border: 1px solid #ccc;
                                }

                                &.his-msg {
                                    display: none;
                                }

                                &.guest {
                                    overflow: hidden;
                                    margin-bottom: 12px;

                                    .avatar {
                                        float: left;
                                        height: 42px;
                                        width: 42px;
                                        border-radius: 50%;
                                    }

                                    .item-detail {
                                        overflow: hidden;
                                        padding-left: 15px;

                                        .time {
                                            display: block;
                                            margin-bottom: 3px;
                                            color: #666;
                                            font-size: 12px;
                                            font-family: Helvetica;
                                        }

                                        .msg-bubble {
                                            position: relative;
                                            display: inline-block;
                                            margin-right: 45px;
                                            padding: 9px;
                                            color: #fff;
                                            line-height: 1.5;
                                            letter-spacing: 1px;
                                            word-break: break-all;
                                            background-color: #3a3a3a;
                                            border-radius: 3px;
                                            border-top-left-radius: 0;

                                            &:before {
                                                position: absolute;
                                                top: 0;
                                                left: -3px;
                                                display: inline-block;
                                                content: "";
                                                height: 0;
                                                width: 0;
                                                border-style: solid;
                                                border-width: 7px 3px 0;
                                                border-color: #3a3a3a transparent transparent;
                                            }

                                            img {
                                                cursor: pointer;
                                                max-width: 150px;
                                            }
                                        }
                                    }
                                }

                                &.host {
                                    overflow: hidden;
                                    margin-bottom: 12px;

                                    .avatar {
                                        float: right;
                                        height: 42px;
                                        width: 42px;
                                        border-radius: 50%;
                                    }

                                    .item-detail {
                                        overflow: hidden;
                                        padding-right: 15px;

                                        .time {
                                            display: block;
                                            margin-bottom: 3px;
                                            color: #666;
                                            font-size: 12px;
                                            font-family: Helvetica;
                                            text-align: right;
                                        }

                                        .msg-bubble {
                                            float: right;
                                            position: relative;
                                            display: inline-block;
                                            margin-left: 45px;
                                            padding: 9px;
                                            color: #3a3a3a;
                                            line-height: 1.5;
                                            letter-spacing: 1px;
                                            word-break: break-all;
                                            background-color: #fff;
                                            border-radius: 3px;
                                            border-top-right-radius: 0;

                                            &:after {
                                                position: absolute;
                                                top: 0;
                                                right: -3px;
                                                display: inline-block;
                                                content: "";
                                                height: 0;
                                                width: 0;
                                                border-style: solid;
                                                border-width: 7px 3px 0;
                                                border-color: #fff transparent transparent;
                                            }

                                            &.failed {
                                                .resend {
                                                    position: absolute;
                                                    top: 3px;
                                                    left: -59px;
                                                    display: inline-block;
                                                    color: #333;
                                                    cursor: pointer;

                                                    &:before {
                                                        content: "";
                                                        display: inline-block;
                                                        height: 11px;
                                                        width: 11px;
                                                        margin-right: 3px;
                                                        margin-bottom: -2px;
                                                        background-image: resolve("service/tip.png");
                                                    }
                                                }
                                            }

                                            &.sending:before {
                                                position: absolute;
                                                top: 3px;
                                                left: -21px;
                                                content: "";
                                                display: inline-block;
                                                height: 12px;
                                                width: 11px;
                                                background-size: contain;
                                                background-image: resolve("service/loading.gif");
                                            }

                                            img {
                                                cursor: pointer;
                                                max-width: 150px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .main-footer {
                        position: relative;

                        .progress-bar {
                            position: absolute;
                            top: -15px;
                            height: 15px;
                            background-color: #3a3a3a;
                        }

                        .upload-tip {
                            position: absolute;
                            display: none;
                            width: 100%;
                            top: -15px;
                            height: 15px;
                            color: #fff;
                            text-align: center;
                            background-color: #3a3a3a;
                        }

                        .msg-edit {
                            position: relative;
                            height: 150px;
                            width: 100%;
                            border-top: 1px #e0e0e0 solid;
                            border-bottom-left-radius: 3px;
                            border-bottom-right-radius: 3px;
                            background-color: #fff;

                            .edit-left {
                                height: 150px;
                                padding: 6px 17px;
                                margin-right: 60px;

                                .util {
                                    font-size: 0;

                                    .icon {
                                        display: inline-block;
                                        margin-right: 17px;
                                        color: #bcbcbc;
                                        font-size: 12px;
                                        line-height: 13px;
                                        cursor: pointer;

                                        &.emoji,
                                        &.image,
                                        &.evaluate,
                                        &.manual-service {
                                            display: none;
                                        }

                                        &:nth-child(2) {
                                            position: relative;

                                            label {
                                                position: absolute;
                                                top: 0;
                                                right: 0;
                                                bottom: 0;
                                                left: 0;
                                                cursor: pointer;
                                            }
                                        }

                                        &:before {
                                            content: "";
                                            display: inline-block;
                                            height: 15px;
                                            width: 15px;
                                            margin-right: 5px;
                                            vertical-align: bottom;
                                            cursor: pointer;
                                            background-image: resolve("service/chat-sprite.png");
                                        }

                                        &:nth-child(2):before {
                                            position: relative;
                                            background-position: -33px 0;

                                            label {
                                                position: absolute;
                                                top: 0;
                                                right: 0;
                                                bottom: 0;
                                                left: 0;
                                                cursor: pointer;
                                            }
                                        }

                                        &:nth-child(3):before {
                                            background-position: -67px 0;
                                        }

                                        &:nth-child(4):before {
                                            width: 14px;
                                            height: 14px;
                                            background-size: contain;
                                            background-image: resolve("service/human-service.png");
                                        }
                                    }

                                    .send-img {
                                        margin-right: 17px;
                                        color: #bcbcbc;
                                        font-size: 12px;
                                    }
                                }

                                .text {
                                    display: block;
                                    height: 58px;
                                    width: 100%;
                                    padding: 6px 0;
                                    border: none;
                                    resize: none;
                                    outline: none;
                                    word-break: break-all;
                                }
                            }

                            .send {
                                position: absolute;
                                top: 0;
                                right: 0;
                                height: 100%;
                                width: 60px;
                                color: #fff;
                                font-size: 12px;
                                text-align: center;
                                line-height: 150px;
                                background-color: #3a3a3a;
                                border-bottom-right-radius: 3px;
                                cursor: pointer;
                            }

                            #sendImg {
                                visibility: hidden;
                            }
                        }
                    }
                }

                .panel-right {
                    right: 0;
                    width: 312px;
                    border-radius: 3px;

                    .right-head {
                        height: 35px;
                        font-size: 0;
                        line-height: 35px;
                        border-top-left-radius: 3px;
                        border-top-right-radius: 3px;

                        .tab {
                            display: inline-block;
                            width: 50%;
                            color: #3a3a3a;
                            font-size: 12px;
                            text-align: center;
                            cursor: pointer;
                            background-color: #ccc;

                            &.active {
                                color: #484848;
                                background-color: #fff;
                            }

                            &.only-one {
                                width: 100%;
                                background-color: #f5f5f5;
                            }

                            &:first-child {
                                border-top-left-radius: 3px;
                            }

                            &:last-child {
                                border-top-right-radius: 3px;
                            }
                        }
                    }

                    .right-body {
                        &.qa {
                            height: 440px;
                            max-height: 440px;
                            overflow: auto;
                        }

                        &.order {
                            padding-top: 16px;

                            .recent {
                                position: relative;
                                margin: 0 12px 12px;
                                text-align: center;

                                .max {
                                    display: inline-block;
                                    height: 17px;
                                    width: 88px;
                                    line-height: 17px;
                                    border: 1px solid #e0e0e0;
                                }

                                .more {
                                    position: absolute;
                                    top: 5px;
                                    right: 0;
                                    margin-right: 7px;
                                    color: #3a3a3a;
                                    text-decoration: none;

                                    &:before,
                                    &:after {
                                        display: inline-block;
                                        position: absolute;
                                        top: 0;
                                        content: "";
                                        width: 0;
                                        height: 0;
                                        border-style: solid;
                                        border-width: 4px 0 4px 4px;
                                    }

                                    &:before {
                                        right: -6px;
                                        border-color: transparent transparent transparent #000;
                                    }

                                    &:after {
                                        right: -5px;
                                        border-color: transparent transparent transparent #fff;
                                    }
                                }
                            }

                            .list-tip {
                                text-align: center;
                                margin-bottom: 12px;

                                .tip {
                                    color: #b6b6b6;

                                    &:before,
                                    &:after {
                                        content: "";
                                        display: inline-block;
                                        width: 35px;
                                        height: 1px;
                                        margin: 0 3px 2px;
                                        background-color: #e0e0e0;
                                    }
                                }
                            }

                            .order-list {
                                max-height: 471px;
                                padding: 0 12px;
                                overflow-y: auto;

                                .item {
                                    margin-bottom: 12px;
                                    border-radius: 3px;
                                    background-color: #eee;

                                    .item-head {
                                        height: 24px;
                                        padding: 0 6px;
                                        line-height: 24px;
                                        background-color: #e0e0e0;
                                        border-top-left-radius: 3px;
                                        border-top-right-radius: 3px;

                                        .time {
                                            float: left;
                                        }

                                        .order-no {
                                            float: right;

                                            .red {
                                                color: #d0021b;
                                            }
                                        }
                                    }

                                    .item-body {
                                        overflow: hidden;
                                        margin: 9px 15px;

                                        a {
                                            text-decoration: none;
                                        }

                                        .prd-img {
                                            float: left;
                                            height: 60px;
                                            width: 43px;
                                            margin-right: 9px;
                                        }

                                        .prd-desc {
                                            position: relative;
                                            height: 60px;
                                            overflow: hidden;

                                            a {
                                                color: #333;
                                            }

                                            .prd-nm {
                                                margin-bottom: 9px;
                                            }

                                            .prd-other {
                                                position: absolute;
                                                left: 0;
                                                bottom: 0;

                                                .price {
                                                    margin-right: 35px;
                                                    color: #d0021b;
                                                    font-size: 12px;
                                                }
                                            }
                                        }
                                    }

                                    .item-footer {
                                        height: 45px;
                                        margin: 0 15px;
                                        line-height: 1;
                                        border-top: 1px solid #e0e0e0;

                                        .order-amount {
                                            margin: 6px 0 0;
                                        }

                                        .order-other {
                                            position: relative;
                                            margin-top: 6px;

                                            .send-order {
                                                position: absolute;
                                                top: -12px;
                                                right: 0;
                                                width: 71px;
                                                padding: 0;
                                                color: #fff;
                                                background-color: #3a3a3a;
                                                border-radius: 2px;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        &.qa {
                            display: none;
                            padding-top: 7px;

                            .qa-list {
                                padding: 0 12px;
                                overflow-y: auto;

                                .item {
                                    margin-top: 6px;
                                    overflow: hidden;

                                    .q:before,
                                    .a:before {
                                        position: absolute;
                                        top: -2px;
                                        left: -17px;
                                        display: inline-block;
                                        height: 16px;
                                        width: 16px;
                                        color: #fff;
                                        text-align: center;
                                        line-height: 16px;
                                        border-radius: 50%;
                                    }

                                    .q {
                                        cursor: pointer;
                                        position: relative;
                                        margin: 6px 0 6px 24px;
                                        word-break: break-all;

                                        &:before {
                                            content: "Q";
                                            background-color: #000;
                                        }
                                    }

                                    .a {
                                        display: none;
                                        position: relative;
                                        margin: 12px 0 0 24px;
                                        line-height: 1.5;

                                        &:before {
                                            top: 1px;
                                            content: "A";
                                            background-color: #a4a4a4;
                                        }

                                        img {
                                            max-width: 240px;
                                        }
                                    }

                                    &.has-a {
                                        overflow: hidden;
                                        word-break: break-all;
                                        border-radius: 3px;
                                        padding: 12px 12px 12px 0;
                                        margin-bottom: 12px;
                                        background-color: #f0f0f0;
                                    }
                                }

                                .list-tip {
                                    text-align: center;
                                    margin-bottom: 12px;

                                    .tip {
                                        color: #b6b6b6;

                                        &:before,
                                        &:after {
                                            content: "";
                                            display: inline-block;
                                            width: 35px;
                                            height: 1px;
                                            margin: 0 3px 2px;
                                            background-color: #e0e0e0;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .right-footer {
                        display: none;
                        height: 84px;
                        margin: 0 12px;
                        padding-top: 12px;
                        text-align: center;
                        border-top: 1px #e0e0e0 solid;

                        .more-q {
                            margin-bottom: 9px;

                            .red {
                                color: #d0021b;
                                text-decoration: none;
                            }
                        }

                        .chat-icon {
                            height: 35px;
                            width: 35px;
                            margin: 0 auto;
                            background-size: 35px 35px;
                            background-image: resolve("service/chat_02.png");
                        }
                    }
                }
            }
        }
    }

    @import "_modal.css";

    .modal {
        .modal-dialog {
            width: 424px;
        }

        .modal-content {
            width: 412px;
            line-height: 1;
            border: 6px solid #5b5b5b;

            .cus-header {
                position: relative;
                padding: 0 20px;
                margin: 25px auto 15px;
                color: #000;
                font-size: 20px;
                text-align: center;

                .close {
                    position: absolute;
                    top: -4px;
                    right: 25px;
                    color: #000;
                    font-size: 25px;
                    opacity: 1;
                    border: none;
                    background-color: transparent;

                    &:hover {
                        opacity: 1;
                    }
                }
            }

            .cus-body {
                padding: 0 25px;
                overflow: hidden;

                label {
                    display: block;
                    margin-top: 19px;
                    margin-bottom: 9px;
                    color: #3a3a3a;
                    font-size: 14px;
                    font-weight: normal;

                    &.necessary:before {
                        content: "*";
                        color: #da5962;
                        font-size: 14px;
                    }
                }

                input,
                textarea {
                    display: block;
                    width: 100%;
                    padding: 15px 20px;
                    border: none;
                    border-radius: 5px;
                    outline: none;
                    background-color: #f0f0f0;
                }

                input {
                    height: 40px;
                }

                textarea {
                    height: 100px;
                    resize: none;
                }

                select {
                    width: 110px;
                    height: 40px;
                    padding: 10px 20px;
                    font-size: 14px;
                    border: none;
                    background-color: #f0f0f0;
                }

                .leave-msg-tip {
                    color: #d0021b;
                    margin-top: 5px;
                }
            }

            .cus-footer {
                font-size: 0;
                text-align: center;

                .btn {
                    height: 40px;

                    &.dark {
                        color: #fff;
                        background-color: $color-3a3a3a;
                    }

                    &.light {
                        color: $color-3a3a3a;
                        border: 1px solid $color-3a3a3a;
                        background-color: #fff;
                    }
                }
            }
        }

        &.leave-msg {
            .modal-content {
                width: 412px;
                height: 300px;
                line-height: 1;
                border: 6px solid #5b5b5b;

                .cus-body {
                    padding-top: 15px;
                    padding-bottom: 30px;

                    textarea {
                        height: 120px;
                        resize: none;
                    }
                }

                .cus-footer {
                    text-align: center;

                    .btn {
                        width: 140px;
                        margin-right: 40px;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }
        }

        &.make-eval {
            .modal-content {
                width: 412px;
                line-height: 1;
                border: 6px solid #5b5b5b;

                .cus-body {
                    padding-top: 15px;
                    padding-bottom: 30px;

                    .stars {
                        font-size: 0;
                        text-align: center;

                        .star {
                            display: inline-block;
                            height: 30px;
                            width: 30px;
                            margin-right: 20px;
                            margin-bottom: 20px;
                            background-image: resolve("service/star-negative.png");
                            cursor: pointer;

                            &.positive {
                                background-image: resolve("service/star-positive.png");
                            }

                            &:last-child {
                                margin-right: 0;
                            }
                        }

                        .star-text {
                            margin-bottom: 30px;
                            color: #3a3a3a;
                            font-size: 20px;
                        }
                    }

                    .detail-reason {
                        display: none;

                        .dis-wrap {
                            margin-left: 8px;
                            max-height: 155px;
                            overflow-y: scroll;
                            overflow-x: hidden;

                            .discontent {
                                margin-bottom: 30px;

                                .dis-row {
                                    font-size: 0;
                                    margin-bottom: 13px;

                                    .type {
                                        position: relative;
                                        display: inline-block;
                                        width: 155px;
                                        height: 40px;
                                        padding: 0 2px;
                                        font-size: 12px;
                                        text-align: center;
                                        line-height: 40px;
                                        border: 1px #999 solid;
                                        border-radius: 5px;
                                        cursor: pointer;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        overflow: hidden;

                                        &.chosen {
                                            &:after {
                                                position: absolute;
                                                top: 13px;
                                                right: -2px;
                                                content: "";
                                                display: inline-block;
                                                height: 27px;
                                                width: 27px;
                                                background-image: resolve("service/btn-chosen.png");
                                            }
                                        }

                                        &:first-child {
                                            margin-right: 15px;
                                        }
                                    }
                                }
                            }
                        }

                        textarea {
                            height: 120px;
                            resize: none;
                        }
                    }
                }

                .cus-footer {
                    padding-bottom: 35px;
                    text-align: center;

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

    @import "_img-zoom-in.css";
    @import "_un-support.css";
    @import "_connect-fail.css";
}