.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;
		}
	
	}
.daftar-pengunjung{
    width:95%;
    margin:auto;
}
 
.item-pengunjung{
    display:flex;
    align-items:center;

    width:100%;
    min-height:90px;

    margin-bottom:5px;
    padding:7px 8px;

    box-sizing:border-box;

    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:7px;
}

.item-pengunjung:hover{
    background:#f8faf9;
}


/* =========================================================
   NOMOR
   ========================================================= */

.nomor-pengunjung{
	 align-self:flex-start;
    width:28px;
    min-width:28px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-right:8px;

    background:#eef7f0;
    color:#27834b;

    border-radius:5px;

    font-size:12px;
}


/* =========================================================
   INFORMASI
   ========================================================= */

.info-pengunjung{
    flex:1;
    min-width:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:flex-start;

    gap:2px;
}


/* =========================================================
   NAMA
   ========================================================= */

.nama-pengunjung{
    width:100%;
    min-width:0;

    color:#27834b;

    font-size:13px;
    font-weight:600;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.nama-pengunjung i{
    margin-right:3px;
}


/* =========================================================
   LAYANAN
   ========================================================= */

.layanan-pengunjung{
    width:100%;
    min-width:0;

    color:#64748b;

    font-size:11px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================================================
   PERTANYAAN
   ========================================================= */

.pertanyaan-pengunjung{
    width:100%;
    min-width:0;

    color:#7b8791;

    font-size:11px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================================================
   TANGGAL
   ========================================================= */

.tanggal-pengunjung{
    width:100%;
    min-width:0;

    color:#8a98a5;

    font-size:10px;

    white-space:nowrap;
}

.tanggal-pengunjung i{
    color:#62a879;
    margin-right:3px;
}


/* =========================================================
   BUTTON CHAT
   ========================================================= */

.btn-chat-pengunjung{
    position:relative;

    width:62px;
    min-width:62px;
    height:32px;

    margin-left:8px;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:6px;

    background:#50a963;
    color:#fff;

    font-size:11px;

    cursor:pointer;
}

.btn-chat-pengunjung:hover{
    background:#459956;
}

.btn-chat-pengunjung i{
    margin-right:3px;
}


/* =========================================================
   BADGE PESAN
   ========================================================= */

.badge-pesan{
    position:absolute;

    top:-6px;
    right:-6px;

    min-width:18px;
    height:18px;

    padding:0 4px;

    display:flex;
    align-items:center;
    justify-content:center;

    box-sizing:border-box;

    background:#e8434f;
    color:#fff;

    border:2px solid #fff;
    border-radius:50%;

    font-size:9px;
    font-weight:600;
}


/* =========================================================
   STATUS BUTTON
   ========================================================= */

.btn-chat-pengunjung.proses{
    background:#82bd8d;
    cursor:wait;
}

.btn-chat-pengunjung.selesai{
    background:#3f9652;
}


/* =========================================================
   SPINNER
   ========================================================= */

.spinner-chat{
    display:inline-block;

    width:11px;
    height:11px;

    margin-right:4px;

    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;

    border-radius:50%;

    animation:putarChat .7s linear infinite;
}

@keyframes putarChat{
    to{
        transform:rotate(360deg);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .daftar-pengunjung{
        width:100%;
    }


    .item-pengunjung{
        min-height:85px;

        padding:6px 5px;
    }


    .nomor-pengunjung{
        width:25px;
        min-width:25px;
        height:25px;

        margin-right:5px;

        font-size:11px;
    }


    .info-pengunjung{
        gap:2px;
    }


    .nama-pengunjung{
        font-size:11px;
    }


    .layanan-pengunjung{
        font-size:10px;
    }


    .pertanyaan-pengunjung{
        font-size:10px;
    }


    .tanggal-pengunjung{
        font-size:9px;
    }


    .btn-chat-pengunjung{
        width:38px;
        min-width:38px;
        height:30px;

        margin-left:5px;
    }


    .btn-chat-pengunjung .text-chat{
        display:none;
    }


    .btn-chat-pengunjung i{
        margin:0;
    }
}


/* =========================================================
   MOBILE KECIL
   ========================================================= */

@media(max-width:400px){

    .item-pengunjung{
        min-height:82px;
    }


    .nama-pengunjung{
        font-size:10px;
    }


    .layanan-pengunjung{
        font-size:9px;
    }


    .pertanyaan-pengunjung{
        font-size:9px;
    }


    .tanggal-pengunjung{
        font-size:9px;
    }


    .btn-chat-pengunjung{
        width:34px;
        min-width:34px;
    }
}
 
.chat-pegawai{
    width:100%;
    height:90vh;
    display:grid;
    grid-template-columns:520px minmax(0,1fr);
    gap:10px;
    overflow:hidden;
}
.chat-card{
    width:96%;
    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);
}
.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;
}
.chat-pengunjung{
    flex:1 1 auto;
    min-height:0;
    width:100%;
    padding:8px;
    overflow-x:hidden;
    overflow-y:auto;
}
.chat-pengunjung::-webkit-scrollbar,
#obrolan::-webkit-scrollbar{
    width:5px;
}
.chat-pengunjung::-webkit-scrollbar-track,
#obrolan::-webkit-scrollbar-track{
    background:transparent;
}
.chat-pengunjung::-webkit-scrollbar-thumb,
#obrolan::-webkit-scrollbar-thumb{
    background:#cdd8cf;
    border-radius:10px;
}
.chat-pengunjung::-webkit-scrollbar-thumb:hover,
#obrolan::-webkit-scrollbar-thumb:hover{
    background:#aebcaf;
}
.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;
}
.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-disabled{
    opacity:.5;
}
#pesanku:disabled{
    cursor:not-allowed;
    background:#f2f5f2;
}
.tag_segarkan{
    display:none;
}
@media(min-width:1200px){
    .chat-pegawai{
        grid-template-columns:px minmax(0,1fr);
        gap:12px;
    }
}
@media(max-width:900px){
    .chat-pegawai{
        grid-template-columns:280px minmax(0,1fr);
        gap:8px;
    }
}
@media(max-width:700px){
    .chat-pegawai{
        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;
    }
}
@media(max-width:480px){
    .chat-card:first-child{
        height:260px;
        flex-basis:260px;
    }
    .chat-conversation{
        min-height:420px;
    }
    .chat-header,
    #box-header{
        min-height:48px;
        height:48px;
        flex-basis:48px;
    }
    .pesanku{
        font-size:12px;
    }
	
	
	.chat-input-area{
    width:100%;
    padding:8px;
    background:#fff;
    border-top:1px solid #e5e7eb;
}

.chat-input-form{
    display:flex;
    align-items:flex-end;
    gap:8px;
    width:100%;
    margin:0;
}

.pesanku{
    flex:1;
    width:100%;
    min-height:40px;
    max-height:120px;
    padding:9px 12px;
    border:1px solid #d1d5db;
    border-radius:10px;
    background:#fff;
    color:#333;
    font-size:14px;
    line-height:1.5;
    resize:none;
    outline:none;
    overflow-y:hidden;
    transition:border-color .2s ease,box-shadow .2s ease;
}

.pesanku:focus{
    border-color:#9ca3af;
    box-shadow:0 0 0 2px rgba(0,0,0,.04);
}

.pesanku::placeholder{
    color:#9ca3af;
}

.btn-chat-send{
    width:40px;
    height:40px;
    flex:0 0 40px;
    border:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#343a40;
    color:#fff;
    font-size:15px;
    cursor:pointer;
    transition:background .2s ease,transform .15s ease;
}

.btn-chat-send:hover{
    background:#212529;
    transform:translateY(-1px);
}

.btn-chat-send:active{
    transform:scale(.95);
}

.btn-chat-send:disabled{
    opacity:.6;
    cursor:wait;
    transform:none;
}

.question-alert-icon{
    width:52px;
    height:52px;
    margin:0 auto 12px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f1f3f5;
    color:#495057;
    font-size:21px;
}

.question-alert-title{
    margin:0 0 6px;
    color:#343a40;
    font-weight:600;
    font-size:14px;
}

.question-alert-text{
    color:#6c757d;
    font-size:12px;
    margin-bottom:18px;
}

.question-alert-buttons{
    gap:7px;
}

.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;
}


@media(max-width:480px){
    .chat-input-area{
        padding:7px;
    }

    .chat-input-form{
        gap:6px;
    }

    .pesanku{
        min-height:38px;
        max-height:110px;
        padding:8px 10px;
        font-size:13px;
    }

    .btn-chat-send{
        width:38px;
        height:38px;
        flex-basis:38px;
    }
}