.menu-tamu{display:grid;grid-template-columns:240px minmax(0,1fr);width:100%}
.menu-tamu-side{width:240px;min-width:240px;padding:5px 5px 5px 0}
.menu-tamu-content{width:100%;min-width:0;padding:8px}
#tag_page{width:100%;height:83vh;overflow:auto}
.menu-tamu-title{margin-bottom:10px;color:var(--tx3);font-size:10px;font-weight:700}
.menu-tamu-title .dsi{display:flex;align-items:center;gap:7px;width:100%;padding:8px 10px!important;border-radius:7px;font-size:12px!important}
.menu-tamu-list{display:flex;flex-direction:column;gap:2px}
.menu-group{width:100%}
.menu-item{position:relative;display:flex;align-items:center;width:100%;min-height:40px;padding:8px 9px;border-radius:7px;color:var(--tx3);font-size:13px;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease}
.menu-item:hover{color:#438e50;background:rgba(159,205,166,.08)}
.menu-item.active{color:#438e50;background:rgba(159,205,166,.16);font-weight:700}
.menu-icon{width:23px;min-width:23px;margin-right:8px;text-align:center;font-size:15px;transition:.2s ease}
.menu-item.active .menu-icon{color:#55a963}
.menu-item>span{flex:1}
.menu-arrow{margin-left:auto;font-size:9px;transition:transform .2s ease,color .2s ease}
.menu-parent.open .menu-arrow{transform:rotate(90deg)}
.menu-parent.active .menu-arrow{color:#55a963}
.menu-child{position:relative;display:none;margin:2px 0 5px 8px;padding:5px 0 5px 18px;border-left:none}
.menu-child::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:#b9dcbc;border-radius:10px}
.menu-child-item{position:relative;display:flex;align-items:center;gap:8px;min-height:34px;padding:6px 8px;border-radius:6px;color:var(--tx3);font-size:12px;cursor:pointer;transition:background .2s ease,color .2s ease}
.menu-child-item>i{width:18px;min-width:18px;text-align:center;font-size:12px;transition:.2s ease}
.menu-child-item::before{content:"";position:absolute;left:-21px;top:50%;width:5px;height:5px;border-radius:50%;background:#9fcda6;transform:translateY(-50%);transition:width .2s ease,height .2s ease,background .2s ease}
.menu-child-item::after{display:none}
.menu-child-item:hover{color:#438e50;background:rgba(159,205,166,.08)}
.menu-child-item:hover::before{width:6px;height:6px;background:#78b982}
.menu-child-item.active{color:#438e50;background:rgba(159,205,166,.16);font-weight:600}
.menu-child-item.active::before{width:6px;height:6px;background:#55a963}
.menu-child-item.active i{color:#55a963}
.menu-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:250px;color:var(--tx3)}
.menu-loading i{font-size:28px;animation:menuSpin 1s linear infinite}
@keyframes menuSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(max-width:768px){
    .menu-tamu{display:block}
    .menu-tamu-side{width:100%;min-width:0}
    .menu-tamu-content{width:100%}
    #tag_page{height:auto;min-height:70vh}
}

.chat-tamu{
    width:100%;
    height:83vh;
    display:grid;
    grid-template-columns:420px minmax(0,1fr);
    gap:10px;
    overflow:hidden;
}
.chat-card{
    width:100%;
    height:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.035);
}
.chat-header{
    width:100%;
    min-height:50px;
    height:50px;
    flex:0 0 50px;
    display:flex;
    align-items:center;
    padding:8px 12px;
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.06);
    color:#003366;
}
.chat-header-title{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--tx);
    font-size:13px;
    font-weight:700;
}
.chat-header-title i{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:rgba(159,205,166,.15);
    color:#55a963;
    font-size:14px;
}
.btn-question{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:7px 11px;
    border:1px solid rgba(85,169,99,.18);
    border-radius:7px;
    background:rgba(159,205,166,.12);
    color:#438e50;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    transition:.2s ease;
}
.btn-question:hover{
    background:rgba(159,205,166,.20);
    color:#357c42;
}
.chat-question{
    flex:1 1 auto;
    min-height:0;
    width:100%;
    padding:8px;
    overflow-x:hidden;
    overflow-y:auto;
}
.chat-conversation{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
}
#box-header{
    width:100%;
    min-height:50px;
    height:50px;
    flex:0 0 50px;
}
#obrolan{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    width:100%;
    padding:12px;
    overflow-x:hidden;
    overflow-y:auto;
    background:#fff;
    scroll-behavior:smooth;
}
#obrolan::-webkit-scrollbar,
.chat-question::-webkit-scrollbar{
    width:5px;
}
#obrolan::-webkit-scrollbar-track,
.chat-question::-webkit-scrollbar-track{
    background:transparent;
}
#obrolan::-webkit-scrollbar-thumb,
.chat-question::-webkit-scrollbar-thumb{
    background:#cdd8cf;
    border-radius:10px;
}
#obrolan::-webkit-scrollbar-thumb:hover,
.chat-question::-webkit-scrollbar-thumb:hover{
    background:#aebcaf;
}
.chat-input-area{
    width:100%;
    flex:0 0 auto;
    padding:9px 10px;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.06);
}
.chat-input-form{
    position:relative;
    width:100%;
}
.pesanku{
    display:block;
    width:100%;
    min-height:45px;
    max-height:130px;
    resize:none;
    padding:11px 48px 11px 12px;
    border:1px solid #dce5de;
    border-radius:8px;
    background:#fbfdfb;
    color:#000;
    font-size:13px;
    line-height:1.4;
    outline:none;
    transition:.2s ease;
    overflow-y:hidden;
}
.pesanku:focus{
    border-color:#9fcda6;
    background:#fff;
    box-shadow:0 0 0 3px rgba(159,205,166,.12);
}
.pesanku::placeholder{
    color:#a6ada8;
}
.btn-chat-send{
    position:absolute;
    right:7px;
    bottom:7px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:7px;
    background:#55a963;
    color:#fff;
    cursor:pointer;
    transition:.2s ease;
}
.btn-chat-send:hover{
    background:#438e50;
    transform:translateY(-1px);
}
.btn-chat-send:disabled{
    opacity:.5;
    cursor:not-allowed;
    transform:none;
}
.chat-modal{
    border:0;
    border-radius:11px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(0,0,0,.12);
}
.chat-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 16px;
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.06);
}
.chat-modal-title{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--tx);
    font-size:14px;
    font-weight:700;
}
.chat-modal-title i{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:rgba(159,205,166,.15);
    color:#55a963;
}
.chat-form-label{
    display:block;
    margin-bottom:6px;
    color:var(--tx3);
    font-size:11px;
    font-weight:600;
}
.chat-form-label i{
    margin-right:4px;
    color:#55a963;
}
.chat-select{
    width:100%;
    min-height:39px;
    padding:7px 10px;
    border:1px solid #dce5de;
    border-radius:7px;
    color:var(--tx);
    background:#fff;
    font-size:12px;
    outline:none;
}
.chat-select:focus{
    border-color:#9fcda6;
    box-shadow:0 0 0 3px rgba(159,205,166,.12);
}
.chat-question-input{
    width:100%;
    min-height:100px;
    resize:vertical;
    padding:10px;
    border:1px solid #dce5de;
    border-radius:7px;
    font-size:12px;
    line-height:1.45;
    outline:none;
}
.chat-question-input:focus{
    border-color:#9fcda6;
    box-shadow:0 0 0 3px rgba(159,205,166,.12);
}
.btn-chat-process{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:100px;
    padding:8px 13px;
    border:0;
    border-radius:7px;
    background:#55a963;
    color:#fff;
    font-size:12px;
    font-weight:600;
    transition:.2s ease;
}
.btn-chat-process:hover{
    background:#438e50;
}
.chat-disabled{
    opacity:.45;
}
#pesanku:disabled{
    cursor:not-allowed;
    background:#f2f5f2;
}
@media(min-width:1200px){
    .chat-tamu{
        grid-template-columns:480px minmax(0,1fr);
        gap:12px;
    }
}
@media(max-width:900px){
    .chat-tamu{
        grid-template-columns:280px minmax(0,1fr);
        gap:8px;
    }
    .chat-header{
        padding:8px 10px;
    }
    #obrolan{
        padding:10px;
    }
}
@media(max-width:700px){
    .chat-tamu{
        width:100%;
        height:auto;
        min-height:83vh;
        display:flex;
        flex-direction:column;
        gap:8px;
        overflow:visible;
    }
    .chat-card{
        width:100%;
        min-height:0;
    }
    .chat-card:first-child{
        height:300px;
        flex:0 0 300px;
    }
    .chat-conversation{
        height:70vh;
        min-height:450px;
    }
    .chat-question{
        max-height:none;
    }
    #obrolan{
        min-height:0;
    }
}
@media(max-width:480px){
    .chat-card:first-child{
        height:260px;
        flex-basis:260px;
    }
    .chat-conversation{
        min-height:420px;
    }
    .chat-header{
        min-height:48px;
        height:48px;
        flex-basis:48px;
    }
    #box-header{
        min-height:48px;
        height:48px;
        flex-basis:48px;
    }
    .pesanku{
        font-size:12px;
    }
    .btn-question{
        padding:7px 9px;
        font-size:11px;
    }
}


/*
|--------------------------------------------------------------------------
| CHAT LIST
|--------------------------------------------------------------------------
*/

.wa-chat-list{
    width:100%;
    min-height:100%;
    padding:16px 7%;
    background:#f6f8fb;
    background-image:
        radial-gradient(
            rgba(0,51,102,.035) 1px,
            transparent 1px
        ),
        radial-gradient(
            rgba(0,51,102,.025) 1px,
            transparent 1px
        );
    background-position:
        0 0,
        10px 10px;
    background-size:20px 20px;
}


/*
|--------------------------------------------------------------------------
| ROW
|--------------------------------------------------------------------------
*/

.wa-row{
    width:100%;
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin-bottom:10px;
}

.wa-row-left{
    justify-content:flex-start;
}

.wa-row-right{
    justify-content:flex-end;
}


/*
|--------------------------------------------------------------------------
| AVATAR USER
|--------------------------------------------------------------------------
*/

.wa-avatar{
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    margin-bottom:2px;
    font-size:15px;
}

.wa-avatar-user{
    background:#e8eef5;
    color:#003366;
}


/*
|--------------------------------------------------------------------------
| MESSAGE
|--------------------------------------------------------------------------
*/

.wa-message{
    position:relative;
    max-width:68%;
    min-width:100px;
}

.wa-message-user{
    margin-left:3px;
}

.wa-message-admin{
    margin-right:3px;
}


/*
|--------------------------------------------------------------------------
| SENDER
|--------------------------------------------------------------------------
*/

.wa-sender{
    padding:0 9px 4px;
    color:#003366;
    font-size:12px;
    font-weight:600;
}

.wa-message-admin .wa-sender{
    text-align:right;
    color:#003366;
}


/*
|--------------------------------------------------------------------------
| BUBBLE
|--------------------------------------------------------------------------
*/

.wa-bubble{
    position:relative;
    padding:9px 11px 7px;
    border-radius:10px;
    box-shadow:
        0 1px 2px rgba(0,0,0,.06),
        0 3px 8px rgba(0,51,102,.04);
}


/*
|--------------------------------------------------------------------------
| USER BUBBLE
|--------------------------------------------------------------------------
*/

.wa-message-user .wa-bubble{
    background:#fff;
    border:1px solid #e2e9f0;
    border-top-left-radius:3px;
}

.wa-message-user .wa-text{
    color:#003366;
}

.wa-message-user .wa-bubble:before{
    content:"";
    position:absolute;
    top:0;
    left:-7px;
    width:0;
    height:0;
    border-top:9px solid #fff;
    border-left:8px solid transparent;
}


/*
|--------------------------------------------------------------------------
| ADMIN BUBBLE
|--------------------------------------------------------------------------
*/

.wa-message-admin .wa-bubble{
    background:#003366;
    border:1px solid #003366;
    border-top-right-radius:3px;
    box-shadow:
        0 2px 4px rgba(0,51,102,.15),
        0 4px 10px rgba(0,51,102,.08);
}

.wa-message-admin .wa-text{
    color:#fff;
}

.wa-message-admin .wa-bubble:after{
    content:"";
    position:absolute;
    top:0;
    right:-7px;
    width:0;
    height:0;
    border-top:9px solid #003366;
    border-right:8px solid transparent;
}


/*
|--------------------------------------------------------------------------
| TEXT
|--------------------------------------------------------------------------
*/

.wa-text{
    color:#003366;
    font-size:14px;
    line-height:1.5;
    word-wrap:break-word;
    overflow-wrap:anywhere;
}


/*
|--------------------------------------------------------------------------
| META
|--------------------------------------------------------------------------
*/

.wa-meta{
    min-height:14px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    margin-top:5px;
    padding-left:18px;
}

.wa-meta span{
    color:#8a96a3;
    font-size:9.5px;
    line-height:12px;
    white-space:nowrap;
}

.wa-message-admin .wa-meta span{
    color:rgba(255,255,255,.68);
}


/*
|--------------------------------------------------------------------------
| DELETE BUTTON
|--------------------------------------------------------------------------
*/

.hapus_chat{
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.65);
    font-size:9px;
    text-decoration:none;
    opacity:.35;
    transition:.2s ease;
}

.wa-bubble:hover .hapus_chat{
    opacity:1;
}

.hapus_chat:hover{
    color:#ffb5b2!important;
    transform:scale(1.1);
}


/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.wa-empty{
    width:100%;
    height:100%;
    min-height:350px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#f6f8fb;
}

.wa-empty-icon{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    border-radius:50%;
    background:#e8eef5;
    color:#003366;
    font-size:30px;
}

.wa-empty-title{
    color:#003366;
    font-size:16px;
    font-weight:600;
}

.wa-empty-text{
    margin-top:5px;
    color:#8995a3;
    font-size:11px;
}


/*
|--------------------------------------------------------------------------
| ADMIN CHARACTER
|--------------------------------------------------------------------------
*/

.wa-admin-character{
    width:46px;
    height:46px;
    min-width:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        #e8eef5,
        #d5e1ec
    );
    color:#003366;
    font-size:21px;
    border:1px solid #cbd9e6;
    box-shadow:0 2px 6px rgba(0,51,102,.08);
}


/*
|--------------------------------------------------------------------------
| PESAN BARU
|--------------------------------------------------------------------------
*/

.wa-row.wa-pesan-baru
.wa-bubble{
    animation:pesanMasuk .5s ease;
}

@keyframes pesanMasuk{

    0%{
        transform:scale(.96);
        opacity:.5;
    }

    60%{
        transform:scale(1.02);
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .wa-chat-list{
        padding:12px 3%;
    }

    .wa-row{
        gap:5px;
        margin-bottom:7px;
    }

    .wa-avatar{
        width:28px;
        height:28px;
        min-width:28px;
        font-size:13px;
    }

    .wa-message{
        max-width:82%;
        min-width:90px;
    }

    .wa-sender{
        font-size:9.5px;
    }

    .wa-text{
        font-size:12px;
        line-height:1.45;
    }

    .wa-meta span{
        font-size:9px;
    }

    .wa-admin-character{
        width:40px;
        height:40px;
        min-width:40px;
        font-size:18px;
    }

}

<style>
.layanan-list{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:7px;
}
.layanan-card{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    background:#fff;
    border:1px solid #e6eee8;
    border-radius:9px;
    transition:.2s ease;
}
.layanan-card:hover{
    border-color:#b9dcbc;
    background:#fcfffc;
    box-shadow:0 3px 12px rgba(0,0,0,.04);
    transform:translateY(-1px);
}
.layanan-no{
    width:28px;
    min-width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:rgba(159,205,166,.15);
    color:#438e50;
    font-size:11px;
    font-weight:700;
}
.layanan-info{
    flex:1;
    min-width:0;
}
.layanan-title{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:3px;
    color:#438e50;
    font-size:12px;
    font-weight:700;
}
.layanan-title i{
    font-size:11px;
    color:#55a963;
}
.layanan-question{
    display:block;
    width:100%;
    color:#68736b;
    font-size:11px;
    line-height:1.4;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.layanan-date{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:4px;
    color:#9aa39d;
    font-size:10px;
}
.layanan-date i{
    color:#8eb896;
}
.layanan-action{
    display:flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
}
.layanan-btn{
    position:relative;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:7px;
    background:#f4f8f5;
    color:#657068;
    text-decoration:none!important;
    cursor:pointer;
    transition:.2s ease;
}
.layanan-btn:hover{
    background:#e9f4eb;
    color:#438e50;
}
.layanan-btn-edit:hover{
    background:#fff4df;
    color:#e28a00;
}
.layanan-btn-delete:hover{
    background:#fff0ed;
    color:#c8442d;
}
.layanan-btn-chat{
    position:relative;
    width:auto;
    min-width:38px;
    padding:0 9px;
    gap:5px;
    background:#55a963;
    color:#fff;
}
.layanan-btn-chat:hover{
    background:#438e50;
    color:#fff;
}
.layanan-btn-chat .chat-text{
    font-size:10px;
    font-weight:600;
}
.layanan-badge{
    position:absolute;
    top:-7px;
    right:-7px;
    min-width:17px;
    height:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    border:2px solid #fff;
    border-radius:20px;
    background:#dc3545;
    color:#fff;
    font-size:8px;
    font-weight:700;
    line-height:1;
    z-index:2;
}
.layanan-badge.pulse{
    animation:badgePulse 1.2s infinite;
}
@keyframes badgePulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.12);
    }
}
.layanan-empty{
    width:100%;
    padding:35px 15px;
    text-align:center;
    border:1px dashed #dce8df;
    border-radius:9px;
    background:#fbfdfb;
    color:#8c968f;
}
.layanan-empty i{
    display:block;
    margin-bottom:8px;
    color:#9fcda6;
    font-size:28px;
}
.layanan-empty strong{
    display:block;
    margin-bottom:3px;
    color:#667169;
    font-size:12px;
}
.layanan-empty span{
    font-size:10px;
}
@media(max-width:576px){
    .layanan-card{
        padding:9px;
        gap:8px;
    }
    .layanan-no{
        width:25px;
        min-width:25px;
        height:25px;
    }
    .layanan-question{
        max-width:180px;
    }
    .layanan-btn{
        width:28px;
        height:28px;
    }
    .layanan-btn-chat{
        width:28px;
        min-width:28px;
        padding:0;
    }
    .layanan-btn-chat .chat-text{
        display:none;
    }
}

.chat-in{
    justify-content:flex-end;
}

.chat-out{
    justify-content:flex-start;
}
.chat-row{
    display:flex;
    width:100%;
    margin:8px 0;
    gap:8px;
}

.chat-in{
    justify-content:flex-start;
}

.chat-out{
    justify-content:flex-end;
}

.chat-avatar{
    width:30px;
    min-width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:17px;
    border-radius:50%;
    background:#eaf5ec;
    color:#55a963;
    font-size:13px;
}

.chat-avatar-admin{
    background:#55a963;
    color:#fff;
}

.chat-message-wrap{
    max-width:75%;
    min-width:0;
}

.chat-info{
    display:flex;
    align-items:center;
    gap:7px;
    min-height:17px;
    margin-bottom:3px;
    font-size:12px;
}

.chat-in .chat-info{
    justify-content:flex-start;
}

.chat-out .chat-info{
    justify-content:flex-end;
}

.chat-name{
    color:#438e50;
    font-size:12px;
    font-weight:700;
}

.chat-time{
    color:#9ba59e;
    font-size:9px;
}

.chat-bubble{
    position:relative;

    display:inline-block;

    padding:7px 10px;

    border-radius:8px;

    font-size:13px;
    line-height:1.45;

    word-break:break-word;
    white-space:normal;
}


/* =========================================
   CHAT PENGUNJUNG
   WhatsApp style - ekor kiri
========================================= */

.chat-bubble-in{
    background:wjite;
    border:1px solid #9FE97C;
    color:#505a53;
	border:#003366 solid 1px
    border-top-left-radius:3px;
}


/* ekor kiri */

.chat-bubble-in::before{
    content:"";

    position:absolute;

    left:-6px;
    top:0;

    width:0;
    height:0;

    border-top:7px solid #e0ece2;
    border-left:6px solid transparent;
}

.chat-bubble-in::after{
    content:"";

    position:absolute;

    left:-5px;
    top:1px;

    width:0;
    height:0;

    border-top:6px solid #f1f7f2;
    border-left:5px solid transparent;
}


/* =========================================
   CHAT PETUGAS
   WhatsApp style - ekor kanan
========================================= */

.chat-bubble-out{
 ;
    color:#000;
border:1pk solid #FF9933;
    border-top-right-radius:3px;

    box-shadow:0 2px 5px rgba(85,169,99,.12);
}


/* ekor kanan */

.chat-bubble-out::after{
    content:"";

    position:absolute;

    right:-6px;
    top:0;

    width:0;
    height:0;

    border-top:7px solid #D6DAF5;
    border-right:6px solid transparent;
}
.chat-delete{
    display:flex;
    align-items:center;
    justify-content:center;
    width:21px;
    height:21px;
    margin-left:2px;
    border-radius:5px;
    color:#c8442d!important;
    text-decoration:none!important;
    transition:.2s ease;
}

.chat-delete:hover{
    background:#fff0ed;
    color:#a82f1e!important;
}

@media(max-width:576px){

    .chat-message-wrap{
        max-width:82%;
    }

    .chat-avatar{
        width:27px;
        min-width:27px;
        height:27px;
        font-size:11px;
    }

    .chat-bubble{
        padding:7px 9px;
        font-size:11px;
    }

}