#chat-button {
    position: fixed;
    bottom: 70px;
    right: 20px;
    background      : linear-gradient(135deg,#0d6efd,#084298);
    color: #fff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
    font-size: 22px;
    cursor: pointer;
    z-index: 9999;
}

#chat-widget {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 300px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,.2);
    display: none;
    flex-direction: column;
    z-index: 9999;
}

#chat-header {
    background      : linear-gradient(135deg,#0d6efd,#084298);
    color: #fff;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
}

#chat-body {
    padding: 10px;
    height: 220px;
    overflow-y: auto;
    font-size: 14px;
}

.chat {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    max-width: 85%;
}

.chat.sistem {
    background: #f1f1f1;
}

.chat.user {
    background      : linear-gradient(135deg,#0d6efd,#084298);
    color: #fff;
    margin-left: auto;
}

#chat-input {
    display: flex;
    border-top: 1px solid #ddd;
}

#chat-input input {
    flex: 1;
    border: none;
    padding: 10px;
    outline: none;
}

#chat-input button {
    background: linear-gradient(135deg,#0d6efd,#084298);
    color: #fff;
    border: none;
    padding: 0 15px;
    cursor: pointer;
}

.chat { margin:5px 0; padding:8px 12px; border-radius:8px; max-width:80%; }
        .chat.pengunjung { background:#2563eb; color:#fff; margin-left:auto; }
        .chat.admin { background:#16a34a; color:#fff; margin-right:auto; }
        .chat.sistem { background:#eee; color:#333; font-size:13px; }
        
#chat-button,
#chat-widget {
    z-index: 2147483647 !important; /* layer tertinggi browser */
    pointer-events: auto !important;
}
#chat-button.notif {
    background: #dc2626; /* merah */
    animation: blink 1s infinite;
}

@keyframes blink {
    0%   { box-shadow: 0 0 0px rgba(220,38,38,0.8); }
    50%  { box-shadow: 0 0 15px rgba(220,38,38,1); }
    100% { box-shadow: 0 0 0px rgba(220,38,38,0.8); }
}

/* NOTIFIKASI CHAT DARI ADMIN */
#chat-button.notif {
    background: linear-gradient(135deg,#0d6efd,#084298);
    animation: pulseChat 1s infinite;
}

/* Titik notifikasi */
#chat-button::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    display: none;
}

/* Aktifkan titik */
#chat-button.notif::after {
    display: block;
}

/* Animasi aman (CSS only) */
@keyframes pulseChat {
    0% { box-shadow: 0 0 0 0 0  #084298  }
    70% { box-shadow: 0 0 0 10px #0d6efd }
    100% { box-shadow: 0 0 0 0   #084298 }
}
.chat-image {
            max-width: 185px;
            border-radius: 10px;
            margin-top: 5px;
            cursor: pointer;
            transition: 0.3s;
        }
        
        .chat-image:hover {
            transform: scale(1.05);
        }
        
        .chat-text {
            margin-bottom: 4px;
            word-break: break-word;
        }
        
        .chat-time {
            display: block;
            font-size: 11px;
            opacity: 0.6;
            margin-top: 4px;
        }