/* Aturan umum untuk file attachment dalam gelembung pesan */
.message-bubble .file-attachment {
    max-width: 100%; /* Pastikan kontainer attachment tidak melebihi lebar gelembung */
    margin-top: 5px; /* Sedikit spasi di atas media jika ada teks */
    margin-bottom: 5px; /* Sedikit spasi di bawah media */
    overflow: hidden; /* Penting untuk mencegah konten meluap */
    border-radius: 8px; /* Sudut membulat untuk estetika */
    display: flex; /* Menggunakan flexbox untuk penataan item */
    flex-direction: column; /* Mengatur item secara vertikal */
    align-items: flex-start; /* Mengatur item ke kiri */
    padding: 0; /* Hapus padding agar konten bisa full ke tepi attachment */
    box-sizing: border-box; /* Penting untuk perhitungan lebar yang akurat */
}

/* Aturan untuk gambar yang di-attach */
.message-bubble .attached-image {
    max-width: 100%; /* Memastikan gambar tidak melebihi lebar kontainer parent */
    height: auto;    /* Mempertahankan rasio aspek gambar */
    display: block;  /* Menghilangkan spasi ekstra di bawah gambar */
    border-radius: 8px; /* Sudut membulat */
}

/* Aturan untuk video yang di-attach */
.message-bubble .attached-video {
    width: 100%;     /* Memenuhi lebar kontainer parent */
    height: auto;    /* Mempertahankan rasio aspek video */
    display: block;  /* Menghilangkan spasi ekstra */
    border-radius: 8px; /* Sudut membulat */
}

/* Aturan untuk audio yang di-attach - DEFAULT (untuk desktop atau lebar besar) */
.message-bubble .attached-audio {
    width: 100%;     /* Memenuhi lebar kontainer parent */
    max-width: 250px; /* Batasi lebar maksimum untuk desktop (sesuaikan jika perlu) */
    min-width: 160px; /* Lebar minimum untuk desktop */
    margin-top: 5px;
    margin-bottom: 5px;
    box-sizing: border-box; /* Penting untuk perhitungan lebar yang akurat */
    -webkit-appearance: none; /* Reset gaya browser untuk Safari/Chrome */
    -moz-appearance: none; /* Reset gaya browser untuk Firefox */
    appearance: none; /* Reset gaya browser untuk browser lain */
    padding: 0; /* Pastikan tidak ada padding internal yang membuat overflow */
}

/* Gaya untuk link file (misalnya dokumen, atau file lain yang tidak di-render langsung) */
.message-bubble .file-link {
    display: inline-flex; /* Agar ikon dan teks sejajar */
    align-items: center;
    gap: 8px; /* Jarak antara ikon dan teks */
    background-color: #e0e0e0; /* Warna latar belakang untuk link file yang diterima */
    padding: 8px 12px;
    border-radius: 20px;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
    max-width: 100%; /* Pastikan link tidak melebihi lebar kontainer */
    overflow: hidden; /* Menyembunyikan teks yang melampaui batas */
    text-overflow: ellipsis; /* Menambahkan elipsis jika teks terpotong */
    white-space: nowrap; /* Mencegah teks melipat */
    box-sizing: border-box; /* Memastikan padding tidak menambah lebar melebihi max-width */
}

/* Gaya khusus untuk link file yang dikirim (misalnya oleh Anda) */
.message-bubble.sent .file-link {
    background-color: #dcf8c6; /* Warna latar untuk link file yang dikirim */
    color: #333; /* Pastikan warna teks tetap terlihat */
}

/* --- Penyesuaian Kontainer Utama Chat (Penting untuk Ruang Mobile) --- */
.messages-container {
    display: flex; /* Gunakan flexbox untuk layout utama */
    height: calc(100vh - 60px); /* Contoh: Tinggi penuh viewport dikurangi tinggi header/footer */
    width: 100%;
    overflow: hidden; /* Penting untuk mencegah scrolling berlebih */
}

.conversations-list {
    flex-shrink: 0; /* Jangan biarkan menyusut */
    width: 300px; /* Lebar default untuk daftar chat */
    overflow-y: auto; /* Bisa di-scroll jika banyak */
    border-right: 1px solid #eee;
}

.chat-interface {
    flex-grow: 1; /* Biarkan mengisi sisa ruang */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Penting untuk mencegah chat meluap */
}

/* Style untuk header chat partner */
.chat-header {
    padding: 10px 15px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0; /* Jangan biarkan header menyusut */
}

/* --- Area Tampilan Pesan (Messages Display) --- */
.messages-display {
    display: flex;
    flex-direction: column;
    padding: 10px; /* Padding di sini agar gelembung pesan tidak menempel tepi */
    overflow-y: auto; /* Aktifkan scrolling vertikal */
    flex-grow: 1; /* Biarkan mengisi ruang vertikal yang tersedia */
    -webkit-overflow-scrolling: touch; /* Membantu scrolling yang lebih halus di iOS */
}

/* Penyesuaian gelembung pesan */
.message-bubble {
    padding: 8px 12px; /* Padding standar untuk gelembung */
    border-radius: 18px;
    margin-bottom: 8px;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
}

.message-bubble.sent {
    background-color: #dcf8c6; /* Warna untuk pesan terkirim */
    align-self: flex-end; /* Dorong ke kanan dalam flex container */
    margin-left: auto; /* Pastikan menempel kanan */
    margin-right: 0; /* Hapus margin kanan default jika ada */
    max-width: 90%; /* Gelembung pesan tidak lebih dari 90% lebar container */
}

.message-bubble.received {
    background-color: #f0f0f0; /* Warna untuk pesan diterima */
    align-self: flex-start; /* Dorong ke kiri dalam flex container */
    margin-left: 0; /* Hapus margin kiri default jika ada */
    margin-right: auto; /* Pastikan menempel kiri */
    max-width: 90%; /* Gelembung pesan tidak lebih dari 90% lebar container */
}


/* --- Media Queries untuk Responsivitas Mobile --- */

@media (max-width: 768px) {
    .messages-container {
        flex-direction: column; /* Ubah layout flexbox utama menjadi kolom */
        height: calc(100vh - 60px); /* Sesuaikan tinggi untuk mobile */
    }

    .conversations-list {
        width: 100%; /* Daftar percakapan jadi full width */
        max-height: 180px; /* Batasi tinggi daftar percakapan di mobile */
        overflow-y: auto;
        border-bottom: 1px solid #eee;
        border-right: none;
    }

    .chat-interface {
        width: 100%; /* Antarmuka chat jadi full width */
        flex-grow: 1;
    }

    /* Penyesuaian gelembung pesan untuk mobile */
    .message-bubble.sent,
    .message-bubble.received {
        max-width: 98%; /* Beri sedikit lebih banyak ruang untuk gelembung di mobile */
        padding: 6px 8px; /* Sedikit kurangi padding gelembung agar lebih ringkas */
    }

    /* Penyesuaian KRITIS untuk Audio di Mobile */
    .message-bubble .attached-audio {
        width: 100%; /* Ambil lebar penuh gelembung pesan */
        max-width: 100%; /* Penting: Tidak ada batasan max-width dari desktop */
        min-width: unset; /* Hapus min-width agar bisa menyusut lebih kecil */
        /*
         * Solusi paling agresif:
         * Atur tinggi eksplisit jika browser memaksakan tinggi yang aneh.
         * Terkadang browser membatasi lebar jika tinggi tidak eksplisit.
         * Ini bisa bervariasi antar browser, jadi perlu penyesuaian.
         * Coba komentar salah satu atau biarkan keduanya, dan amati hasilnya.
         */
        height: 30px; /* Coba tinggi yang spesifik, ini nilai umum */
        min-height: 30px; /* Pastikan tidak menyusut di bawah tinggi ini */

        /* Tambahan untuk memaksa rendering yang benar dan mencegah potongan */
        display: block;
        margin: 0; /* Hapus margin default pada audio elemen */
        padding: 0; /* Hapus padding default pada audio elemen */
    }

    /* Pastikan audio controls (misal di Chrome/Safari) juga tidak meluap */
    .message-bubble .attached-audio::-webkit-media-controls-panel {
        width: 100% !important;
        box-sizing: border-box;
    }
}


/* Styling untuk Bagian Komentar */
.chat-section {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Menambahkan sedikit bayangan untuk estetika */
}

.chat-list {
    margin-top: 15px;
    max-height: 400px; /* Batasi tinggi daftar komentar jika terlalu panjang */
    overflow-y: auto; /* Tambahkan scroll jika komentar melebihi tinggi maksimum */
    padding-right: 10px; /* Ruang untuk scrollbar */
}

.chat-item {
    display: flex; /* Menggunakan flexbox untuk tata letak elemen dalam komentar */
    align-items: flex-start; /* Elemen akan rata atas */
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    position: relative; /* Penting untuk positioning tombol aksi */
}

.my-chat {
    background-color: #e0f7fa; /* Warna latar belakang untuk komentar pengguna sendiri */
    margin-left: auto; /* Posisikan komentar sendiri ke kanan */
    max-width: 80%; /* Batasi lebar komentar sendiri */
}

.other-chat {
    background-color: #f0f0f0; /* Warna latar belakang untuk komentar orang lain */
    margin-right: auto; /* Posisikan komentar orang lain ke kiri */
    max-width: 80%; /* Batasi lebar komentar orang lain */
}

.chat-profile-pic {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.chat-content-bubble {
    flex-grow: 1; /* Memungkinkan konten mengambil ruang yang tersedia */
    padding: 8px 12px;
    border-radius: 8px;
    background-color: #ffffff; /* Latar belakang untuk bubble konten */
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chat-item.my-chat .chat-content-bubble {
    background-color: #d1f7fe; /* Warna bubble untuk komentar sendiri */
}

.chat-username {
    font-weight: bold;
    color: #337ab7; /* Warna link username */
    text-decoration: none;
    display: block; /* Agar username di baris terpisah */
    margin-bottom: 5px;
}

.chat-username:hover {
    text-decoration: underline;
}

.chat-content-bubble p {
    margin: 0; /* Hapus margin default paragraf */
    word-wrap: break-word; /* Memastikan teks panjang tidak meluber */
}

.chat-time {
    font-size: 0.75em;
    color: #777;
    display: block; /* Agar waktu di baris terpisah */
    margin-top: 5px;
    text-align: right;
}

/* Styling untuk Action Buttons (Edit/Hapus) di Komentar */
.chat-actions {
    display: flex; /* Menggunakan flexbox untuk tombol edit/hapus */
    gap: 5px; /* Memberi jarak antar tombol */
    margin-top: 5px; /* Jarak dari konten chat */
    justify-content: flex-end; /* Rata kanan di dalam bubble */
}

/* Mengubah gaya tombol aksi agar lebih kecil dan sesuai konteks komentar */
.action-button.edit-chat-button,
.action-button.delete-chat-button {
    padding: 4px 8px; /* Padding lebih kecil */
    font-size: 0.75em; /* Ukuran font lebih kecil */
    border-radius: 4px; /* Sudut sedikit melengkung */
    text-decoration: none; /* Hapus underline pada link */
    transition: background-color 0.2s ease; /* Transisi halus saat hover */
}

.action-button.edit-chat-button {
    background-color: #5cb85c; /* Warna hijau untuk edit */
    color: white;
}

.action-button.edit-chat-button:hover {
    background-color: #4cae4c;
}

.action-button.delete-chat-button {
    background-color: #d9534f; /* Warna merah untuk hapus */
    color: white;
}

.action-button.delete-chat-button:hover {
    background-color: #c9302c;
}

/* Styling untuk form chat/komentar di bagian bawah */
.chat-form {
    display: flex;
    margin-top: 20px;
    gap: 10px; /* Jarak antara textarea dan tombol */
}

.chat-form textarea {
    flex-grow: 1; /* Memungkinkan textarea mengambil ruang yang tersedia */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: vertical; /* Hanya izinkan resize secara vertikal */
    min-height: 40px; /* Tinggi minimum */
    font-size: 1em;
}

.chat-form button {
    padding: 10px 15px;
    background-color: #007bff; /* Warna biru untuk tombol kirim */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.chat-form button:hover {
    background-color: #0056b3;
}

/* Styling untuk Modal Edit Komentar */
#editCommentModal {
    background: rgba(0,0,0,0.6); /* Sedikit lebih gelap */
    z-index: 1001; /* Pastikan di atas elemen lain */
}

#editCommentModal .card-panel {
    background-color: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: fadeInScale 0.3s ease-out; /* Animasi saat muncul */
}

#editCommentModal h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

#editCommentModal textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
    resize: vertical;
    min-height: 100px;
    font-size: 1em;
}

#editCommentModal .action-button {
    padding: 8px 15px;
    font-size: 0.9em;
    border-radius: 5px;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* --- Basis Reset/Umum --- */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
}

/* --- Container Header Utama --- */
.app-header {
    background-color: #ffffff; /* Latar putih seperti mobile */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 10px 20px; /* Padding sama seperti mobile */
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
}

/* --- Elemen Khusus Mobile (sembunyikan di desktop) --- */
.mobile-only {
    display: none !important; /* Pastikan elemen ini hanya muncul di mobile */
}

/* --- Tampilan Desktop Header Baru (mengadopsi gaya mobile) --- */
.header-desktop-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* Jarak antara top bar dan nav */
}

.desktop-logo a {
    font-size: 1.8em; /* Ukuran font logo */
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
}

.desktop-search-bar {
    flex-grow: 1; /* Agar search bar mengambil ruang */
    margin: 0 20px; /* Jarak dari logo dan profil */
}

.desktop-search-bar .search-form {
    display: flex;
    width: 100%;
    max-width: 400px; /* Batasi lebar search bar */
    margin: 0 auto; /* Tengah search bar */
    border: 1px solid #ddd;
    border-radius: 20px;
    overflow: hidden; /* Untuk membuat border radius bekerja dengan input */
}

.desktop-search-bar .search-form input {
    border: none;
    padding: 8px 15px;
    flex-grow: 1;
    font-size: 0.9em;
    outline: none;
}

.desktop-search-bar .search-form button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.desktop-search-bar .search-form button:hover {
    background-color: #0056b3;
}

.desktop-profile-and-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antar elemen */
}

.desktop-profile-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.desktop-profile-pic {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    border: 1px solid #eee;
}

.desktop-logout-button, .desktop-auth-link {
    background-color: #dc3545;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.desktop-auth-link {
    background-color: #007bff;
}

.desktop-logout-button:hover, .desktop-auth-link:hover {
    background-color: #c82333;
}

/* --- Navigasi Utama Desktop (mirip navigasi bawah mobile) --- */
.desktop-main-nav {
    border-top: 1px solid #eee; /* Garis pemisah dari top bar */
    padding-top: 10px;
}

.desktop-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around; /* Menyebar item secara merata */
    align-items: center;
}

.desktop-nav-links li {
    margin: 0 10px;
}

.desktop-nav-links a {
    display: flex; /* Agar ikon dan teks sejajar */
    flex-direction: column; /* Ikon di atas teks */
    align-items: center;
    text-decoration: none;
    color: #555;
    padding: 8px 5px;
    font-size: 0.85em; /* Ukuran font lebih kecil seperti mobile */
    transition: color 0.2s ease;
}

.desktop-nav-links a i {
    font-size: 1.4em; /* Ukuran ikon */
    margin-bottom: 5px; /* Jarak antara ikon dan teks */
    color: #007bff; /* Warna ikon */
}

.desktop-nav-links a:hover {
    color: #007bff;
}

.desktop-nav-links a:hover i {
    color: #0056b3;
}

/* --- Media Queries untuk Responsivitas (Ini Yang Paling Penting) --- */

/* Aturan untuk layar di bawah 768px (ukuran mobile) */
@media (max-width: 767px) {
    .app-header {
        display: none; /* Sembunyikan header desktop di mobile */
    }

    .mobile-only {
        display: block !important; /* Tampilkan elemen mobile di mobile */
    }

    /* Penyesuaian untuk mobile top bar */
    .header-mobile-content {
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 10px 20px;
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-logo a {
        font-size: 1.8em;
        font-weight: bold;
        color: #007bff;
        text-decoration: none;
    }

    .mobile-top-actions {
        display: flex;
        gap: 15px;
    }

    .mobile-top-actions a {
        color: #555;
        font-size: 1.2em;
        text-decoration: none;
    }
    .mobile-top-actions a:hover {
        color: #007bff;
    }


    /* Mobile Main Nav (Bottom Navigation Bar) */
    .mobile-main-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        z-index: 1000;
        padding: 8px 0;
    }

    .mobile-nav-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .mobile-nav-links li {
        flex: 1; /* Agar item mengambil ruang yang sama */
        text-align: center;
    }

    .mobile-nav-links a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #555;
        font-size: 0.7em; /* Lebih kecil agar muat */
        padding: 5px 0;
    }

    .mobile-nav-links a i {
        font-size: 1.5em;
        margin-bottom: 3px;
        color: #007bff;
    }

    /* Mobile Overlay Menu */
    .mobile-overlay-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 2000;
        display: none; /* Sembunyikan secara default */
        justify-content: flex-end; /* Dorong menu ke kanan */
        overflow-y: auto;
    }

    .mobile-overlay-menu.is-open {
        display: flex; /* Tampilkan saat dibuka */
    }

    .overlay-content-wrapper { /* Tambahkan wrapper untuk konten menu */
        width: 80%; /* Lebar menu overlay */
        max-width: 300px;
        background-color: #fff;
        transform: translateX(100%); /* Sembunyikan di luar layar */
        transition: transform 0.3s ease-out;
    }

    .mobile-overlay-menu.is-open .overlay-content-wrapper {
        transform: translateX(0); /* Geser masuk */
    }

    .overlay-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        background-color: #f8f8f8;
    }

    .overlay-profile-pic {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
    }

    .overlay-username {
        font-weight: bold;
        color: #333;
    }

    .close-overlay-menu {
        background: none;
        border: none;
        font-size: 1.5em;
        color: #555;
        cursor: pointer;
    }

    .overlay-links {
        list-style: none;
        padding: 20px;
        margin: 0;
    }

    .overlay-links li {
        margin-bottom: 15px;
    }

    .overlay-links a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #333;
        font-size: 1.1em;
        padding: 8px 0;
    }

    .overlay-links a i {
        margin-right: 15px;
        color: #007bff;
        font-size: 1.2em;
    }

    /* Mobile Search Bar Overlay */
    .mobile-search-bar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff; /* Latar putih untuk search bar overlay */
        z-index: 2000;
        display: none; /* Sembunyikan secara default */
        flex-direction: column;
        align-items: center;
        padding-top: 20px;
    }

    .mobile-search-bar-overlay.is-open {
        display: flex;
    }

    .mobile-search-form {
        display: flex;
        width: 90%;
        max-width: 500px;
        border: 1px solid #ddd;
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .mobile-search-form .back-button-search-mobile {
        background: none;
        border: none;
        padding: 10px 15px;
        font-size: 1.2em;
        color: #555;
        cursor: pointer;
    }

    .mobile-search-form input[type="text"] {
        flex-grow: 1;
        border: none;
        padding: 10px 10px;
        outline: none;
        font-size: 1em;
    }

    .mobile-search-form .submit-search-mobile {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        font-size: 1em;
    }
}


/* --- BASIS HEADER - Default untuk Mobile (Sembunyikan Desktop) --- */

/* Sembunyikan header desktop secara default (akan ditimpa di media query desktop) */
.app-header {
    display: none; 
}

/* Tampilkan elemen-elemen mobile header secara default */
.header-mobile-content,
.mobile-main-nav,
.mobile-overlay-menu,
.mobile-search-bar-overlay {
    display: block; /* Default untuk mobile */
}

/* --- MOBILE HEADER: TOP BAR --- */
.header-mobile-content {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 10px 20px;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    display: flex; /* Pastikan ini flexbox untuk top bar */
    justify-content: space-between;
    align-items: center;
}

.mobile-top-bar { /* Ini mungkin tidak lagi diperlukan jika header-mobile-content sudah flex */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mobile-logo a {
    font-size: 1.8em;
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
}

.mobile-top-actions {
    display: flex;
    gap: 15px;
}

.mobile-top-actions a {
    color: #555;
    font-size: 1.2em;
    text-decoration: none;
    transition: color 0.2s ease;
}
.mobile-top-actions a:hover {
    color: #007bff;
}

/* --- MOBILE HEADER: BOTTOM NAVIGATION BAR --- */
.mobile-main-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 8px 0;
    box-sizing: border-box;
}

.mobile-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.mobile-nav-links li {
    flex: 1; /* Agar item mengambil ruang yang sama */
    text-align: center;
}

.mobile-nav-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #555;
    font-size: 0.7em;
    padding: 5px 0;
    transition: color 0.2s ease;
}

.mobile-nav-links a i {
    font-size: 1.5em;
    margin-bottom: 3px;
    color: #007bff;
    transition: color 0.2s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active-nav-link { /* Jika Anda punya kelas active-nav-link */
    color: #007bff;
}

.mobile-nav-links a:hover i,
.mobile-nav-links a.active-nav-link i {
    color: #0056b3;
}


/* --- MOBILE HEADER: OVERLAY MENU (Side Menu) --- */
.mobile-overlay-menu {
    position: fixed;
    top: 0;
    left: 0; /* Mulai dari kiri */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay transparan */
    z-index: 2000;
    display: flex;
    justify-content: flex-start; /* Dorong konten menu ke kiri */
    overflow: hidden; /* Sembunyikan scrollbar global */
    visibility: hidden; /* Sembunyikan sepenuhnya saat tidak aktif */
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease; /* Transisi untuk overlay */
}

.mobile-overlay-menu.is-open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s ease;
}

/* Konten menu yang bergeser masuk/keluar */
.overlay-content-wrapper { 
    width: 70%; /* Lebar menu overlay di mobile */
    max-width: 300px;
    background-color: #fff;
    transform: translateX(-100%); /* Sembunyikan di luar layar (ke kiri) */
    transition: transform 0.3s ease-out;
    height: 100%; /* Pastikan tingginya 100% */
    display: flex;
    flex-direction: column;
}

.mobile-overlay-menu.is-open .overlay-content-wrapper {
    transform: translateX(0); /* Geser masuk */
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: #f8f8f8;
}

.profile-info {
    display: flex;
    align-items: center;
}

.overlay-profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    border: 1px solid #ccc;
}

.overlay-username {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
}
.overlay-guest {
    color: #666;
    font-style: italic;
    font-size: 0.9em;
}


.close-overlay-menu {
    background: none;
    border: none;
    font-size: 1.5em;
    color: #555;
    cursor: pointer;
    padding: 5px;
}

.overlay-links {
    list-style: none;
    padding: 20px;
    margin: 0;
    flex-grow: 1; /* Ambil sisa ruang */
    overflow-y: auto; /* Bisa discroll jika banyak link */
}

.overlay-links li {
    margin-bottom: 15px;
}

.overlay-links a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 1.1em;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.overlay-links a i {
    margin-right: 15px;
    color: #007bff;
    font-size: 1.2em;
}

.overlay-links a:hover {
    color: #007bff;
}


/* --- MOBILE HEADER: SEARCH BAR OVERLAY --- */
.mobile-search-bar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    visibility: hidden; /* Sembunyikan sepenuhnya saat tidak aktif */
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease;
}

.mobile-search-bar-overlay.is-open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s ease;
}

.mobile-search-form {
    display: flex;
    width: 90%;
    max-width: 500px;
    border: 1px solid #ddd;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.mobile-search-form .back-button-search-mobile {
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 1.2em;
    color: #555;
    cursor: pointer;
}

.mobile-search-form input[type="text"] {
    flex-grow: 1;
    border: none;
    padding: 10px 10px;
    outline: none;
    font-size: 1em;
}

.mobile-search-form .submit-search-mobile {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1em;
}

/* --- BADGE NOTIFIKASI UMUM --- */
.notification-badge {
    background-color: #ff4d4f;
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    margin-left: 5px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
    vertical-align: middle;
    display: none; /* Sembunyikan secara default, akan ditampilkan oleh JS jika ada angka */
}
.notification-badge:not(:empty) {
    display: inline-block; /* Tampilkan hanya jika ada angka */
}


/* --- MEDIA QUERY UNTUK DESKTOP (Tampilan desktop akan aktif di layar >= 768px) --- */
@media (min-width: 768px) {
    /* Sembunyikan semua elemen mobile di desktop */
    .header-mobile-content,
    .mobile-main-nav,
    .mobile-overlay-menu,
    .mobile-search-bar-overlay {
        display: none !important;
    }

    /* Tampilkan header desktop di desktop */
    .app-header {
        display: block; /* Atau flex, sesuai kebutuhan layout utama header desktop */
        background-color: #ffffff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 10px 20px;
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        box-sizing: border-box;
    }

    /* --- Tampilan Desktop Header Baru (mengadopsi gaya mobile) --- */
    .header-desktop-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .desktop-logo a {
        font-size: 1.8em;
        font-weight: bold;
        color: #007bff;
        text-decoration: none;
    }

    .desktop-search-bar {
        flex-grow: 1;
        margin: 0 20px;
    }

    .desktop-search-bar .search-form {
        display: flex;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        border: 1px solid #ddd;
        border-radius: 20px;
        overflow: hidden;
    }

    .desktop-search-bar .search-form input {
        border: none;
        padding: 8px 15px;
        flex-grow: 1;
        font-size: 0.9em;
        outline: none;
    }

    .desktop-search-bar .search-form button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 8px 15px;
        cursor: pointer;
        font-size: 0.9em;
        transition: background-color 0.2s ease;
    }

    .desktop-search-bar .search-form button:hover {
        background-color: #0056b3;
    }

    .desktop-profile-and-actions {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .desktop-profile-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #333;
        font-weight: bold;
        transition: color 0.2s ease;
    }
    .desktop-profile-link:hover {
        color: #007bff;
    }

    .desktop-profile-pic {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 8px;
        border: 1px solid #eee;
    }

    .desktop-logout-button, .desktop-auth-link {
        background-color: #dc3545;
        color: white;
        padding: 8px 12px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 0.9em;
        transition: background-color 0.2s ease;
    }

    .desktop-auth-link {
        background-color: #007bff;
    }

    .desktop-logout-button:hover, .desktop-auth-link:hover {
        background-color: #c82333;
    }
    .desktop-auth-link:hover {
        background-color: #0056b3;
    }

    /* --- Navigasi Utama Desktop (mirip navigasi bawah mobile) --- */
    .desktop-main-nav {
        border-top: 1px solid #eee;
        padding-top: 10px;
    }

    .desktop-nav-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .desktop-nav-links li {
        margin: 0 10px;
    }

    .desktop-nav-links a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #555;
        padding: 8px 5px;
        font-size: 0.85em;
        transition: color 0.2s ease;
    }

    .desktop-nav-links a i {
        font-size: 1.4em;
        margin-bottom: 5px;
        color: #007bff;
    }

    .desktop-nav-links a:hover {
        color: #007bff;
    }

    .desktop-nav-links a:hover i {
        color: #0056b3;
    }
}

/* --- MOBILE HEADER: BOTTOM NAVIGATION BAR --- */
.mobile-main-nav {
    position: fixed; /* <-- PASTIKAN INI 'fixed' */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    z-index: 1000; /* Pastikan di atas konten lain */
    padding: 8px 0;
    box-sizing: border-box;
}

/* Sisa dari styling mobile-main-nav dan nav-links tidak perlu diubah */
/* ... */