/*
 *  $Chat Box
 *
 */

.chat-box {
    .panel {
        margin-bottom: 5px;
    }
    .chatbox-user {
        margin-bottom: 35px;
        .chat-time {
            display: block;
            text-align: right;
        }
    }
    .chatbox-user.right .chat-avatar img {
        float: right;
    }
    .chat-avatar {
        width: 48px;
        display: block;
    }
    .message {
        position: relative;
        margin-left: 60px;
    }
    .message:before {
        content: "";
        position: absolute;
        left: 0;
        border-right: 6px solid #fff;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        top: 10px;
        margin-left: -6px;
    }
    .panel-body {
        display: table;
        width: 100%;
    }
    .chatbox-user.right .message {
        position: relative;
        margin-left: 0;
        margin-right: 60px;
        .panel {
            background-color: @brand-success;
            color: #fff;
        }
        .chat-time {
            text-align: left;
        }
    }
    .chatbox-user.right .message:before {
        left: 100%;
        margin-right: 6px;
        margin-left: 0;
        border-right: 6px solid transparent;
        border-left: 6px solid @brand-success;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
    }
    p {
        margin: 0;
    }
    @-webkit-keyframes opacity {
        0% {.opacity(1);}
        100% {.opacity(.4);}
    }
    @-moz-keyframes opacity {
        0% {.opacity(1);}
        100% {.opacity(.4);}
    }
    .typing {
        display: block;
        &:before,
        &:after {
            content: '';
        }
        & > div,
        &:before,
        &:after {
            border-radius: 50%;
            width: 8px;
            height: 8px;
            background-color: fade(#000, 50%);
            display: inline-block;
            margin-right: 5px;
        }
        & > div,
        &:before,
        &:after {
            -webkit-animation-name: opacity;
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-name: opacity;
            -moz-animation-duration: 1s;
            -moz-animation-iteration-count: infinite;
        }
        & > div {
            -webkit-animation-delay: 100ms;
            -moz-animation-delay: 100ms;
        }
        &:after {
            -webkit-animation-delay: 300ms;
            -moz-animation-delay: 300ms;
        }
    }
}

.mail-list {
    margin: 0 -1px;
    .list-group-item {
        .rounded(0);
        &:last-child {
            border-bottom: 0;
        }
    }
}