/* ================= FLOAT BUTTON ================= */

.chat-toggle{
position:fixed;
bottom:25px;
right:25px;
width:60px;
height:60px;
border-radius:50%;
border:none;
background:linear-gradient(135deg,#ff4b5c,#6c63ff);
color:white;
font-size:26px;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,.25);
z-index:999;
transition:.3s;
}

.chat-toggle:hover{
transform:scale(1.08);
}


/* ================= CHAT BOX ================= */
/* INI YANG PENTING -> ganti dari chat-container */

.chat-box{
    position:fixed;
    bottom:100px;
    right:25px;
    width:340px;
    height:480px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    display:none;
    flex-direction:column;
    overflow:hidden;
    z-index:999;
}


/* ================= HEADER ================= */

.chat-header{
    background:linear-gradient(135deg,#e05f69,#7165b8);
    color:white;
    padding:14px;
    font-weight:600;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

#closeChat{
    cursor:pointer;
    font-size:18px;
}


/* ================= BODY ================= */

.chat-body{
    flex:1;
    padding:14px;
    overflow-y:auto;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.chat-body::-webkit-scrollbar{
    width:6px;
}
.chat-body::-webkit-scrollbar-thumb{
    background:#d4d6e0;
    border-radius:10px;
}


/* ================= MESSAGE ================= */

.user{
    background:linear-gradient(135deg,#6a5acd,#7b68ee);
    color:white;
    padding:10px 14px;
    border-radius:16px;
    max-width:75%;
    margin-left:auto;
    animation:fade .2s ease;
}

.bot{
    background:#e5e7eb;
    color:#333;
    padding:10px 14px;
    border-radius:16px;
    max-width:75%;
    animation:fade .2s ease;
}

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(6px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ================= FOOTER ================= */

.chat-footer{
    display:flex;
    border-top:1px solid #eee;
}

.chat-footer input{
    flex:1;
    border:none;
    padding:12px;
    outline:none;
}

.chat-footer button{
    border:none;
    background:#e63946;
    color:white;
    padding:0 18px;
    cursor:pointer;
}


/* ================= TYPING ================= */

.typing{
    display:flex;
    gap:5px;
    padding:10px 14px;
    background:#e5e7eb;
    border-radius:16px;
    width:fit-content;
}

.typing span{
    width:7px;
    height:7px;
    background:#666;
    border-radius:50%;
    animation:blink 1.4s infinite;
}

.typing span:nth-child(2){
    animation-delay:.2s;
}

.typing span:nth-child(3){
    animation-delay:.4s;
}

@keyframes blink{
    0%,80%,100%{opacity:0;}
    40%{opacity:1;}
}

/* ================= CHAT MENU (YANG DI-UPDATE) ================= */

.chat-menu {
    position: fixed;
    bottom: 95px;
    right: 25px;
    display: none;
    flex-direction: column;
    gap: 12px;
    z-index: 999;
    animation: menuUp .3s ease;
}

/* Update selector ini biar tombolnya lebar dan teksnya muncul */
.chat-menu .menu-item {
    background: white;
    border: none;
    padding: 15px 20px; /* Padding lebih tebal */
    border-radius: 50px; /* Biar bentuknya kapsul/pill */
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    cursor: pointer;
    display: flex; /* WAJIB: Biar ikon dan teks sejajar */
    align-items: center;
    gap: 12px;
    width: 200px; /* Kasih lebar pasti biar nggak ciut */
    transition: 0.3s;
    text-align: left;
}

/* Styling Ikon */
.m-icon {
    font-size: 20px;
}

/* Styling Teks (Biar nggak ilang) */
.m-text {
    font-size: 15px;
    font-weight: 700; /* Biar teksnya tegas */
    color: #333;
    font-family: Arial, sans-serif;
}

.chat-menu .menu-item:hover {
    transform: translateX(-10px);
    background: #f9f9f9;
}

@keyframes menuUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================= FAQ BOX ================= */

.faq-box{
position:fixed;
bottom:100px;
right:25px;
width:340px;
height:420px;
background:white;
border-radius:20px;
box-shadow:0 20px 60px rgba(0,0,0,.25);
display:none;
flex-direction:column;
overflow:hidden;
z-index:999;
}

.faq-header{
background:linear-gradient(135deg,#e63946,#7b68ee);
color:white;
padding:14px;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:600;
}

.faq-body{
padding:16px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:14px;
background:#f6f7fb;
}

.faq-item{
background:white;
padding:12px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.faq-item h4{
margin-bottom:6px;
font-size:14px;
}

.faq-item p{
font-size:13px;
line-height:1.4;
}

#closeFAQ{
cursor:pointer;
}