/* Fix right-aligned messages for bot/agent (BLUE) */
.tk-list > li.tk-right,
.sb-list > li.sb-right,
.tk-list > div.tk-right,
.sb-list > div.sb-right {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}

.tk-list > li.tk-right .tk-message,
.sb-list > li.sb-right .sb-message,
.tk-list > div.tk-right .tk-message,
.sb-list > div.sb-right .sb-message {
    background: #007cff !important;
    color: white !important;
    margin-left: auto !important;
    text-align: left !important;
}

.tk-list > li.tk-right .tk-thumb,
.sb-list > li.sb-right .sb-thumb,
.tk-list > div.tk-right .tk-thumb,
.sb-list > div.sb-right .sb-thumb {
    order: 1 !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
}

.tk-list > li.tk-right .tk-time,
.sb-list > li.sb-right .sb-time,
.tk-list > div.tk-right .tk-time,
.sb-list > div.sb-right .sb-time {
    text-align: right !important;
}

/* Ensure left messages stay left for users/facebook (GREY) */
.tk-list > li:not(.tk-right),
.sb-list > li:not(.sb-right),
.tk-list > div:not(.tk-right):not(.tk-label-date),
.sb-list > div:not(.sb-right):not(.sb-label-date) {
    text-align: left !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

.tk-list > li:not(.tk-right) .tk-message,
.sb-list > li:not(.sb-right) .sb-message,
.tk-list > div:not(.tk-right):not(.tk-label-date) .tk-message,
.sb-list > div:not(.sb-right):not(.sb-label-date) .sb-message {
    background: #f0f0f0 !important;
    color: #333 !important;
    margin-right: auto !important;
}