moodle/mod/chat/gui_ajax/theme/bubble/chat.css

.yui-skin-sam .yui-layout .yui-layout-hd {border:0;}
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd {border:0;}
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {border:0;}
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-unit-right {background: white;}
.yui-skin-sam .yui-layout-unit-bottom  {background: #F2F2F2;}
.yui-skin-sam .yui-layout-unit-right {background: #eef2f8;}
.yui-skin-sam .yui-layout-unit-center {background: white;}
.yui-skin-sam .yui-layout-unit-top {background: #FFE39D;}
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {background: transparent;}

#chat-messages {padding-top:15px;}

#input-message {background:#FFFFFF url(input.png) repeat-x scroll 0 0;padding:0 9px;border: 1px solid #999;border-radius: 9px;-moz-border-radius: 9px;}
.mdl-chat-entry,
.mdl-chat-my-entry {clear:both;}
.dir-rtl .mdl-chat-entry,
.dir-rtl .mdl-chat-my-entry {height: 90px;}

.mdl-chat-entry .chat-event {padding-bottom:15px;}

.chat-message .chat-message-meta {padding-top:15px;padding-bottom:15px;}
.chat-message .chat-message-meta .user {white-space:nowrap;}
.chat-message .picture {vertical-align:middle;}
.chat-message .right {text-align:right;}
.chat-message .left {text-align:left;}
.dir-rtl .chat-message .right,
.dir-rtl .chat-message .left  {direction:ltr;}

#chat-input-area,
#chat-input-area table.generaltable,
#chat-input-area table.generaltable td.cell {background: #92B3E8;border: 0; height:100%;}
#chat-userlist {background: #E3E8F0;height: 100%;}

/**
 * The following CSS is a cut down version of PURE CSS SPEECH BUBBLES.
 * Moodle only uses a small subset of the original.
 * The original version is available at http://nicolasgallagher.com/pure-css-speech-bubbles/
 */

/* ------------------------------------------
PURE CSS SPEECH BUBBLES
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 02 March 2010
Version: 1.2 (03 March 2011)

Dual licensed under MIT and GNU GPLv2 © Nicolas Gallagher
------------------------------------------ */

.triangle-border {
    position:relative;
    padding:10px;
    margin:1em 0 3em;
    border:2px solid #5a8f00;
    color:#333;
    background:#fff;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;

    /* moodle specific */
    margin-top:0px;
    /* end moodle specific */
}

/* moodle specific */
@media all and (max-device-width: 320px) {
    .triangle-border {
        width:50%;
    }
}
@media all and (min-device-width: 321px) and (max-device-width: 640px) {
    .triangle-border {
        width:60%;
    }
}
@media all and (min-device-width: 641px) {
    .triangle-border {
        width:65%;
    }
}
/* end moodle specific */

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
    margin-left:30px;
    /* moodle specific */
    float:right;
    /* end moodle specific */
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
    margin-right:30px;
    /* moodle specific */
    float:left;
    /* end moodle specific */
}

.triangle-border:before {
    content:"";
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
    border-style:solid;
    border-color:#5a8f00 transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
    content:"";
    position:absolute;
    bottom:-13px; /* value = - border-top-width - border-bottom-width */
    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:13px 13px 0;
    border-style:solid;
    border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
    top:7px; /* controls vertical position */
    bottom:auto;
    left:-24px; /* value = - border-left-width - border-right-width */
    border-width:10px 24px 10px 0;
    border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
    top:8px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    bottom:auto;
    left:-21px; /* value = - border-left-width - border-right-width */
    border-width:9px 21px 9px 0;
    border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
    top:7px; /* controls vertical position */
    bottom:auto;
    left:auto;
    right:-24px; /* value = - border-left-width - border-right-width */
    border-width:10px 0 10px 24px;
    border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
    top:8px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    bottom:auto;
    left:auto;
    right:-21px; /* value = - border-left-width - border-right-width */
    border-width:9px 0 9px 21px;
    border-color:transparent #fff;
}