
#wa-floating-btn{
    position:fixed;
    bottom:25px;
    right:25px;
    width:65px;
    height:65px;
    border:none;
    border-radius:50%;
    background:#25D366;
    cursor:pointer;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    z-index:99999;
    transition:.3s;
    display:flex;
    align-items:center;
    justify-content:center;
}
#wa-floating-btn i{
    font-size:40px;   /* Besarkan icon */
    color: #fff;

    line-height: 1;
    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

#wa-floating-btn:hover{
    transform:scale(1.08);
}

/* Popup */

#wa-popup{

    position:fixed;

    bottom:105px;

    right:25px;

    width:360px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 40px rgba(0,0,0,.2);

    display:none;

    z-index:99999;

    animation:.3s popup;

}

#wa-popup.show{

    display:block;

}

@keyframes popup{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Header */

.wa-header{

background:#1e524d;

color:#fff;

padding:18px;

display:flex;

align-items:center;

gap:15px;

}

.wa-logo{

width:55px;

height:55px;

border-radius:50%;

object-fit:cover;

background:#fff;

}

.wa-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    max-width: 200px;
}

/* Title */
.wa-header-text h4 {
    margin: 0;
    padding: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 600;
    white-space: nowrap;
}

/* Subtitle */
.wa-header-text small {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
}

/* Admin */

.wa-admin-card{

display:flex;

gap:15px;

align-items:center;

padding:15px;

cursor:pointer;

transition:.3s;

border-bottom:1px solid #eee;

}

.wa-admin-card:hover{

background:#f4f4f4;

}

.wa-admin-card img{

width:55px;

height:55px;

border-radius:50%;

object-fit:cover;

}

.wa-admin-info h5{

margin:0;

font-size:15px;

}

.wa-admin-info small{

display:block;

color:#666;

}

.wa-online{

color:#23b14d;

font-size:12px;

}

/* Chat */

.wa-chat-header{

display:flex;

align-items:center;

gap:12px;

padding:15px;

border-bottom:1px solid #eee;

}

.wa-chat-photo{

width:48px;

height:48px;

border-radius:50%;

object-fit:cover;

}

.wa-back-btn{

background:none;

border:none;

font-size:22px;

cursor:pointer;

margin-right:5px;

}

/* Body */

.wa-chat-body{

padding:15px;

}

.wa-chat-body input,

.wa-chat-body textarea{

width:100%;

padding:12px;

margin-bottom:12px;

border:1px solid #ddd;

border-radius:10px;

outline:none;

font-size:14px;

}

.wa-chat-body textarea{

resize:none;

}

#wa-send-btn{

width:100%;

padding:14px;

background:#25D366;

color:#fff;

border:none;

border-radius:10px;

cursor:pointer;

font-weight:bold;

transition:.3s;

}

#wa-send-btn:hover{

background:#20bb58;

}

/* Mobile */

@media(max-width:480px){

#wa-popup{

width:95%;

right:2.5%;

bottom:90px;

}

}