.back-to-top-2 {
    display: none; /* Tombol akan disembunyikan secara default */
    position: fixed; /* Tetap di posisi layar */
    bottom: 90px; /* Jarak dari bawah */
    right: 20px; /* Jarak dari kanan */
    z-index: 99; /* Tingkat z-index agar tombol berada di atas konten */
    background-color: green; /* Warna latar belakang */
    color: white; /* Warna teks */
    border: none; /* Tanpa border */
    width: 50px; /* Lebar tombol */
    height: 50px; /* Tinggi tombol */
    border-radius: 50%; /* Membuat tombol bulat */
    cursor: pointer; /* Ganti kursor saat diarahkan ke tombol */
    font-size: 20px; /* Ukuran ikon */
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* Efek bayangan */
}

/* Pastikan ikon juga ikut terpusat */
.back-to-top-2 i {
    font-size: 20px; /* Ukuran ikon */
    color: white; /* Warna ikon */
}




/* Chat popup container */
.chat-popup {
    position: fixed;
    bottom: 20px; /* Adjust as needed */
    right: 300px; /* Adjust as needed */
    max-width: 450px; /* Set maximum width */
    width: 100%; /* Ensure the element adjusts to the available width */
    margin-bottom: 80px;
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    .chat-popup {
        right: 20px; /* Adjust to the right edge on mobile */
        left: 20px; /* Ensure some padding from the left edge on mobile */
        max-width: calc(100% - 40px); /* Adjust max-width to fit within the screen */
    }

    .chat-window {
        right: 20px; /* Adjust to the right edge on mobile */
        left: 20px; /* Ensure some padding from the left edge on mobile */
        width: calc(100% - 40px); /* Adjust width to fit within the screen */
    }
}



/* Chatbot button */
.chat-btn {
    background-color: green; /* Example color */
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.chat-btn img {
    width: 100%;
    height: auto;
    border: 50%;
}

/* Chat window */
.chat-window {
    display: none; /* Hidden by default */
    position: fixed; /* Changed to fixed to align with chat-popup */
    bottom: 100px; /* Adjust to show above the chat-popup */
    right: 20px; /* Align with chat-popup's right position */
    width: 300px;
    background-color: #f1f1f1; /* Example background color */
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    z-index: 1000; /* Ensure it appears above chat-popup */
}

/* Chat messages container */
.chat-content {
    padding: 10px;
    max-height: 300px; /* Adjust for scrolling */
    overflow-y: auto;
}

/* Individual chat message styles */
.message {
    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 6px;
}

.received {
    background-color: #e5e5ea; /* Example background color */
}

.sent {
    background-color: #f87845; /* Example background color */
    color: white;
    text-align: right;
}

/* Chat input */
.chat-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    background-color: #fff;
    border-top: 1px solid #ccc;
}

.chat-input input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-right: 10px;
}

.chat-input button {
    background-color: green; /* Example button color */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    outline: none;
}

.chat-input button:hover {
    background-color: green; /* Example button hover color */
}

/* Update CSS for chat-window visibility */
.chat-window {
    position: fixed;
    background-color: #FFFFF;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    display: none; /* Initially hidden */
}

.chat-window.show {
    display: block; /* Show when 'show' class is present */
}

/* Skeleton Base */
.skeleton {
    background: #ddd;
    animation: pulse 1.5s infinite ease-in-out;
    border-radius: 5px;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Page Container */
.container {
    padding: 10px;
    max-width: 400px;
    margin: auto;
}

/* 🔹 Header */
.skeleton-header {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
}
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.skeleton-text {
    width: 70%;
    height: 16px;
}

/* 🔹 Search Bar */
.skeleton-search {
    margin: 10px 0;
}
.skeleton-box {
    width: 100%;
    height: 40px;
    border-radius: 20px;
}

/* 🔹 Categories (Ojek, Kuliner, Sayuran, etc.) */
.skeleton-categories {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    text-align: center;
}
.skeleton-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* 🔹 Card Display (Promo / Highlight) */
.skeleton-card-display {
    margin: 10px 0;
}
.skeleton-card {
    width: 100%;
    height: 150px;
    border-radius: 10px;
}

/* 🔹 Tenant Categories */
.skeleton-tenant-categories {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}
.skeleton-tenant-items {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    overflow-x: auto;
}
.skeleton-product {
    width: 100px;
    height: 120px;
    border-radius: 10px;
}

/* 🔹 Bottom Navigation */
.skeleton-bottom-nav {
    display: flex;
    justify-content: space-around;
    padding: 10px;
}
.skeleton-nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}