@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,800');
@import '../styles/partials/index.scss';

$primary: #00E0C1;
$primary_darker: #00C9AD;
$primary_lighter: #7FF1E1;
$primary_lightest: #C9F9F3;

$chat_font: 'Montserrat', 'Avenir', Helvetica, Arial, sans-serif;
$chat_font_size: 11pt;
$chat_font_color: #4A4A4A;
$chat_font_color_light: #8B8B8B;
$chat_background: #FAFAFA;

$chat_input_height: 60px;

$chat_background_me: $primary_lightest;
$chat_border_me: 0 solid rgb(100, 190, 180);
$chat_background_other: white;
$chat_border_other: 1px solid $primary_lighter; // #c0c0c0;

.apselui {

    // -------------------------
    // Internal Reset
    // -------------------------
    * {
        box-sizing: border-box;
        border: 0;
        padding: 0;
        margin: 0;
    }
    font-family: $chat_font;
    font-size: $chat_font_size;
    color: $chat_font_color;
    input, textarea {
        font-family: $chat_font;
        font-size: $chat_font_size;
        color: $chat_font_color;
    }

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    // -------------------------
    // Chat Pane Layout
    // -------------------------

    &.chat--frame {
        //position: relative;
        //border: 1px solid red;
        background: $chat_background;

        grid-template-areas: "messages" "input";
        grid-template-rows: minmax(0, 1fr) $chat_input_height;
        max-height: 100%;
        min-height: 100%;
        height: 100%;
        flex-grow: 1;
        @include css3-prefix(display, flex);
        @include css3-prefix(flex-direction, column);
        @include css3-prefix(flex, auto);
    }

    .chat--messages-pane {
        //border: 1px solid orange;
        grid-area: messages;
        
        height: 100%;
        max-height: 100%;

        max-width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;

        // max-height: calc(100% - #{$chat_input_height});
        // min-height: calc(100% - #{$chat_input_height});
        // margin-bottom: 70px;
        // padding-bottom: 70px;

        // Internal layout of messages
        // display: flex;
        &-inner {
            min-height: 100%;
            @include css3-prefix(display, flex);
            @include css3-prefix(flex-direction, column);
            @include css3-prefix(flex, 1);
        }
        z-index: 50;
    }


    // -------------------------
    // Chat Input Box
    // -------------------------

    .chat--input {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: white;
        
        user-select: none;
        //border: 1px solid fuchsia;
        grid-area:input;
        height: $chat_input_height;
        max-height: $chat_input_height;
        background-color: transparent;
        box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.10);
        z-index: 10000;
    }

    .chat--input-content {
        // internal layout
        width:100%;
        height: $chat_input_height;
        background: white;
        // padding: 5px 0px 5px 0px;
        display: grid;
        align-items: center;
        grid-template-areas: "text record";
        grid-template-columns: minmax(0, 1fr) 64px;
    }

    .chat--input-text {
        grid-area: text;
        border: 2px solid $primary;
        border-radius: 2em;
        height: 2.4rem;
        margin-left: 10px;
        margin-right: 10px;
        padding-left: 1rem;
        display:flex;
        flex-wrap: nowrap;
        background-color:white;
    }
    .chat--input-text-input {
        flex-grow: 1;
        &:focus {outline:none;}
        border-radius: 0 20px 20px 0;
        // outline: 1px solid blue;
    }


    // ---------------
    // Chat recording
    // ----------------

    .chat--input-record {
        &:hover {
            cursor: pointer;
        }

        grid-area: record;
        width: 40px;
        height: 40px;

        background-color: $primary;
        border-radius:30px;

        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 19' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1.2-9.1c0-.66.54-1.2 1.2-1.2.66 0 1.2.54 1.2 1.2l-.01 6.2c0 .66-.53 1.2-1.19 1.2-.66 0-1.2-.54-1.2-1.2V4.9zm6.5 6.1c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z' id='a'/%3E%3C/defs%3E%3Cg transform='translate(-5 -2)' fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)' fill='%23FFF'%3E%3Cpath d='M-13-13h50v50h-50v-50z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: auto 20px;

        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);

        &.user-typing {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 19 16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M8 0L.5 18.29l.71.71L8 16l6.79 3 .71-.71z'/%3E%3C/defs%3E%3Cg transform='rotate(90 9.5 9.5)' fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)' fill='%23FFF'%3E%3Cpath d='M-17-15h50v50h-50v-50z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            background-size: auto 16px;
            //transition: all 0.5s linear;
        }

        &.disabled {
            box-shadow: none;
            background-color: hsla(172, 5%, 44%, 1);
        }

        &:active {
            box-shadow: 0 0px 4px 0 rgba(0,0,0,0.50);

        }
    }

    .chat--input-recording-info {
        grid-area: text;
        height: $chat_input_height;
        display: flex;
        align-items: center;
        //bordeR: 1px solid red;

        // span {border: 1px solid orange;}
        .recording-symbol {
            margin-left: 10px;
            font-weight: 600;
            font-size: 40px;
            line-height: 0;
            height: 7px;
            color: red;
        }
        .recording-duration {
            margin-left: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            font-size: 1.1rem;
        }
        .recording-cancel {
            text-align: right;
            margin-left: auto;
            margin-right: 10px;
            font-size: 0.8em;
        }
    }

    // Handle button when recording
    .audio-recording {
        .chat--input-record {
            background-color:red;
            color:white;
        }
    }
    .audio-idle {
        .chat--input-record {
            background-color:white;
            color: inherit;
        }
    }

    // -------------------
    //  Chat file picker
    // -------------------
    .chat--input-text-attach {

        content: '';
        &:hover {
            cursor: pointer;
        }
    }

    .chat--picker {
        a.chat--picker-document {
            &:hover {
                cursor: pointer;
            }
            &:active {
                transform: scale(0.8);
                transition: all 0.5s ease-out;
            }
            //outline: 1px solid orange;
            width: 39px;
            border-radius: 2em;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 11 22' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 0 0 5 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z' id='a'/%3E%3C/defs%3E%3Cg transform='translate(-7 -1)' fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cg mask='url(%23b)' fill='%234A4A4A'%3E%3Cpath d='M-13-13h50v50h-50v-50z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: auto 20px;
            height: 26px;
            font-size: 0px;
            line-height: 21px;
            display: inline-block;
        }
    }

    // -------------------------
    // Chat Image Viewer
    // -------------------------
    .chat--imageviewer {
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index: 100;
        // border: 1px solid red;
        background-color: black;

        .chat--imageviewer-content {
            max-width: 100%;
            max-height: 100%;
            overflow: scroll;
        }
    }

    // -------------------------
    // Chat Base Message
    // -------------------------
    .chat--message {
        position: relative;
        max-width: 80%;

        &:not(.message-complete_request) {
            box-shadow: 0 1px 2px 0 #C8C8C8;
        }
        &.message-complete_request {
            box-shadow: none !important;
            max-width: 100% !important;
            width: 100%;
            padding: 5px !important;
            margin: 0 !important;

            .chat--message-complete {
                display: block;

                &__title {
                    height: 44px;
                    box-shadow: 0 1px 2px 0 #c8c8c8;
                    background-color: $chat_font_color;
                    color: white;
                    border-radius: 6px;
                    padding: 13px 9px 11px 11px;

                    .mdi-bell-outline {
                        margin-right: 9px;
                    }
                }

                &__action {
                    width: 100%;
                    margin-top: 9px;
                    @include css3-prefix(display, flex);
                    @include css3-prefix(flex-direction, row);
                    @include css3-prefix(align-items, center);
                    @include css3-prefix(justify-content, space-between);

                    [type=button] {
                        @include css3-prefix(box-sizing, border-box);
                        cursor: pointer;
                        height: 34px;
                        line-height: 27px;
                        color: $primary;
                        border: solid 1px $primary;
                        background-color: transparent;
                        font-size: 10px;
                        font-weight: 600;
                        border-radius: 15px;

                        &:nth-child(1) {
                            @include css3-prefix(flex, 1);
                        }
                        &:nth-child(2) {
                            margin-left: 8px;
                            @include css3-prefix(flex, auto);
                        }
                    }
                }
            }
        }

        &.message-is-mine.message-text,
        &.message-is-mine.message-image,
        &.message-is-mine.message-offer {
            position: relative;
            border-radius: 6px 0 6px 6px;
            align-self: flex-end;
            background-color: $chat_background_me;
            border: $chat_border_me;
            margin: 5px 23px 5px 5px !important;

            &::after {
              position: absolute;
              content: '';
              top: -9px;
              right: -13px;
              font-size: 0;
              border-top: 10px solid transparent;
              border-bottom: 10px solid transparent;
              border-right: 10px solid $chat_background_me;
              transform: rotate(45deg);
              transform-origin: 0 5px;
              width: 10px;
              height: 20px;
              @include css3-prefix(box-sizing, border-box);
            }
        }
        &.message-is-other.message-text,
        &.message-is-other.message-image,
        &.message-is-other.message-offer {
            position: relative;
            border-radius: 0 6px 6px 6px;
            align-self: flex-start;
            background-color: $chat_background_other;
            border: 1px solid $primary_lighter;
            margin: 5px 5px 5px 23px !important;

            &::before {
              position: absolute;
              content: '';
              top: -3px;
              left: -10px;
              font-size: 0;
              border-top: 10px solid transparent;
              border-bottom: 10px solid transparent;
              border-left: 10px solid $primary_lighter;
              transform: rotate(-45deg);
              transform-origin: 0 5.5px;
              width: 10px;
              height: 20px;
              @include css3-prefix(box-sizing, border-box);
            }
            &::after {
              position: absolute;
              content: '';
              top: -2px;
              left: -8px;
              font-size: 0;
              border-top: 9px solid transparent;
              border-bottom: 9px solid transparent;
              border-left: 9px solid $chat_background_other;
              transform: rotate(-45deg);
              transform-origin: 0 5px;
              width: 9px;
              height: 18px;
              @include css3-prefix(box-sizing, border-box);
            }
        }

        &-offer {
            padding: 9px 8px;
        }
    }

    .chat--message-text-content {
        font-weight: 500;
    }

    // ------------------------
    // Message Info
    // ------------------------

    .chat--messageinfo {
        display: flex;
        justify-content: flex-end;
    }
    .chat--messageinfo-timestamp,
    .chat--messageinfo-receipt {
        font-size: 0.7rem;
        color: $chat_font_color_light;
        font-weight: 400;
    }

    // Status check-mark
    .message-is-other {
        .chat--messageinfo-receipt {
            .check1 { display: none; }
            .check2 { display: none; }
        }

        .chat--messageinfo-timestamp {
            position: absolute;
            right: -40px;
            top: 10px;
            @include css3-prefix(transition, 0.4s);
        }
        &:not(:hover) .chat--messageinfo-timestamp {
            opacity: 0;
        }
        &:hover .chat--messageinfo-timestamp {
            opacity: 1;
        }
    }

    .message-is-mine {
        position: relative;
        @include css3-prefix(align-self, flex-end);

        .chat--messageinfo-timestamp {
            position: absolute;
            top: 10px;
            @include css3-prefix(transition, 0.4s);
            
            &.sending {
                left: -60px;
            }
            &:not(.sending) {
                left: -40px;
            }
        }
        &:not(:hover) .chat--messageinfo-timestamp {
            opacity: 0;
        }
        &:hover .chat--messageinfo-timestamp {
            opacity: 1;
        }
        .chat--messageinfo-receipt {
            position: absolute;
            right: -17px;
            top: 12px;

            .check1 { display: inline; }
            .check2 { display: inline; }
        }

        .chat--messageinfo-receipt {
            margin-left: 5px;
            // .check1 { visibility: hidden; }
            // .check2 { visibility: hidden; }

            .check1 {
                width: 14px;
                height: 14px;
                border-radius: 100%;
                @include css3-prefix(box-sizing, border-box);
                @include css3-prefix(display, flex !important);
                @include css3-prefix(align-items, center);
                @include css3-prefix(justify-content, center);
            }
        }

        &.message-new {
            .chat--messageinfo-receipt {
                // .check1,
                // .check2 {
                //     display: none;
                // }
                .check1 {
                    color: transparent;
                    border-top: 1px solid $primary_darker !important;
                    // border-right: 1px solid $primary !important;
                    border-right: 1px solid transparent !important;
                    border-bottom: 1px solid $primary_darker !important;
                    // border-left: 1px solid $primary_darker !important;
                    border-left: 1px solid transparent !important;
                    @include css3-prefix(animation, rotatingCircle 1s infinite);
                }
            }
        }
        &.message-sent {
            .chat--messageinfo-receipt {
                .check1 { visibility: visible; }
                .check2 { display: none; }
                .check1 {
                    color: $primary_darker;
                    border: 1px solid $primary_darker !important;
                }
            }
        }
        &.message-received {
            .chat--messageinfo-receipt {
                .check1 { visibility: visible; }
                .check2 { visibility: visible; }
                .check1 {
                    color: white;
                    background-color: $primary_darker;
                }
            }
        }
        &.message-read {
            .chat--messageinfo-receipt {
                .check1 { visibility: visible; color: $primary; }
                .check2 { visibility: visible; color: $primary; }
                .check1 {
                    color: $primary_lighter;
                    background-color: $primary_darker;
                }
            }
        }
    }


    // ------------------------
    // TextMessage layout
    // ------------------------
    .chat--message-text {
        padding: 9px 8px; // 0.6em
        overflow-wrap: break-word;
        word-wrap: break-word;

        &.short-text {
            .chat--message-text-content {
                margin-right: 60px;
            }

            .chat--messageinfo {
                margin-top: -10px
            }
        }
    }
    // ------------------------
    // TextDocument layout
    // ------------------------
    .chat--message-document {
        padding: 0.3em 0.3em 0.3em 0.3em;
        overflow-wrap: break-word;
        word-wrap: break-word;

        .chat--message-document-preview {
            width: 300px;
            min-width: 300px;
            position: relative;
            cursor: pointer;

            img {

                min-width: 100px;
                max-width: 100%;
                width: 100%;
                max-height: 60px;
                min-height: 60px;
                object-fit: cover;

                background-color: #e0e0e0;
                border: none;
                outline: none;
                border-radius: 3px;
                z-index:99;
            }

            .chat--message-document-download {
               position: absolute;
               top: calc(50% - 8px);
               left: calc(50% - 8px);

            }
        }

        .chat--message-text-content {
            svg {
                width: 16px;
                height: 16px;
                margin-bottom: -0.15em;
            }
            margin-top: 0.4em;
        }
    }

    // ------------------------
    // ImageMessage layout
    // ------------------------
    .chat--message-image {
        padding: 0.3em 0.3em 0em 0.3em; // weird display bug
        position: relative;

        img {
            min-width: 65px;
            max-width: 100%;
            max-height: 300px;
            object-fit: cover;
            border-radius: 3px;
            z-index:99;
        }

        .chat--message-image-overlay {
            margin: 0.3em 0.3em 0.3em 0.3em;
            border-radius: 3px;
            z-index:2;
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(to bottom right,rgba(255,255,255,0),rgba(0,0,0, 0.2));
          }

        .chat--messageinfo {
            z-index:3;
            // position: absolute;
            // bottom: 0.4em;
            // right: 8px; // 0.6em;

            .chat--messageinfo-timestamp {
                color: white;
            }
        }
    }

    // ------------------------
    // Purchase message layout
    // ------------------------
    .chat--message {

        &.message-purchase {
            width: 100%;
            max-width: 100%;
            margin: 0 0 5px;

        }
    }


}

@-webkit-keyframes rotatingCircle {
    0% {
        @include css3-prefix(transform, rotate(0deg));
    }
    100% {
        @include css3-prefix(transform, rotate(360deg));
    }
}
@-moz-keyframes rotatingCircle {
    0% {
        @include css3-prefix(transform, rotate(0deg));
    }
    100% {
        @include css3-prefix(transform, rotate(360deg));
    }
}
@keyframes rotatingCircle {
    0% {
        @include css3-prefix(transform, rotate(0deg));
    }
    100% {
        @include css3-prefix(transform, rotate(360deg));
    }
}