@charset 'UTF-8';

.page-message {
    height: 100%;
    background: #f5f5f5;
    header {
        background: #fff;
        padding: 0 px2rem(25);
    }
    .mod-content {
        background: #f5f5f5;
        padding: 0 px2rem(25);
        padding-bottom: px2rem(120);
        li {
            &.self {
                .content-box {
                    img {
                        float: right;
                        margin-left: px2rem(44);
                    }
                    .content {
                        float: right;
                        border: 1px solid $mainColor;
                        &:after {
                            border: none;
                            border-top: 1px solid $mainColor;
                            border-right: 1px solid $mainColor;
                            left: auto;
                            right: -px2rem(12); 

                        }
                    }
                }
                
            }
            .time {
                line-height: px2rem(77);
                color: $grayFont;
                font-size: px2rem(24);
                text-align: center;
            }
            .content-box {
                @include clearfix;
                img {
                    float: left;
                    width: px2rem(80);
                    height: px2rem(80);
                    border-radius: 50%;

                }
                .content {
                    display: inline;
                    padding: px2rem(10) px2rem(15);
                    float: right;
                    max-width: px2rem(575);
                    background: #fff;
                    border: 1px solid $borderColor;
                    line-height: px2rem(52);
                    color: #000;
                    font-size: px2rem(32);
                    border-radius: 3px;
                    position: relative;
                    word-wrap: break-word;
                    &:after {
                        content: "";
                        position: absolute;
                        width: px2rem(21);
                        height: px2rem(21);
                        border-radius: 3px;
                        border-bottom: 1px solid $borderColor;
                        border-left: 1px solid $borderColor;
                        background: #fff;
                        transform: rotateZ(45deg);           
                        top: px2rem(27);
                        left: -px2rem(12); 
                    }
                    span {
                        color: #3db3f2;
                    }
                }
            }
        }
    }
    .mod-input {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        height: px2rem(100);
        background: #fff;
        .g-inner {
            padding: px2rem(15) px2rem(25);
            @include clearfix;
            .input {
                width: px2rem(550);
                height: px2rem(66);
                float: left;
                display: block;
                background: #f5f5f5;
                color: #000;
                font-size: px2rem(26);
                text-indent: px2rem(25);
                border-radius: 30px;
            }
            button {
                display: block;
                float: right;
                width: px2rem(120);
                height: px2rem(66);
                background: #999999;
                font-size: px2rem(34);
                line-height: px2rem(66);
                color: #fff;
                text-align: center;
                border-radius: 5px;
            }
        }
    }
}