/* MODIFIKASI 3: Ubah palet warna ke tema terang (putih) profesional */
    :root {
      --primary-color: #007bff; /* Biru profesional */
      --primary-dark: #ffffff; /* Latar utama container jadi putih */
      --background: #f4f6f8;   /* Latar body jadi abu-abu muda */
      --secondary: #f8f9fa;   /* Warna sekunder untuk card & elemen lain */
      --text-color: #343a40;  /* Teks utama jadi gelap */
      --text-secondary: #6c757d; /* Teks sekunder/abu-abu */
      --border-color: #dee2e6; /* Warna border umum */
      --danger: #dc3545;
      --success: #28a745;
      --warning: #ffc107;
      --info: #17a2b8; /* Warna baru untuk status "Pesan Baru" */
    }
    
    /* MODIFIKASI 2: Sembunyikan semua scrollbar tanpa menghilangkan fungsi */
    ::-webkit-scrollbar {
        display: none;
    }
    body, .chat-list, #hashtag-options, #chat-window-messages, #archive-viewer-messages, .settings-grid, .form-group textarea, #cannedResponseListContainer {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    * { box-sizing: border-box; }
    
    /* MODIFIKASI 3: Ganti font family dan warna dasar body */
    body { 
        margin: 0; 
        padding: 0; 
        font-family: 'Poppins', sans-serif; 
        background: var(--background); 
        color: var(--text-color); 
        font-size: 14px; /* Ukuran font dasar disesuaikan */
        line-height: 1.6; 
    }

    header { 
        background: var(--primary-dark); 
        padding: 15px 25px; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
        position: sticky; top: 0; z-index: 1000;
        border-bottom: 1px solid var(--border-color);
    }
    
    .header-left {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    header .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); }
    .user-info { display: flex; align-items: center; gap: 15px; }
    .username { margin-right: 10px; font-size: 0.9rem; font-weight: 500; }
    
    #userDisplayName { font-weight: 700; color: var(--primary-color); }
    #userDisplayNameSeparator { color: var(--border-color); font-weight: 100; margin: 0 -5px; }

    /* REQ 2: ANIMASI LEVEL BADGE */
    @keyframes animated-badge-glow {
        0% { transform: scale(1); box-shadow: 0 0 4px rgba(0, 123, 255, 0.3); }
        50% { transform: scale(1.05); box-shadow: 0 0 16px rgba(0, 123, 255, 0.7); }
        100% { transform: scale(1); box-shadow: 0 0 4px rgba(0, 123, 255, 0.3); }
    }
    @keyframes animated-gradient {
        from { background-position: 0% 50%; }
        to { background-position: 100% 50%; }
    }
    .level-badge {
        font-size: 0.7rem; color: #fff; padding: 4px 12px; border-radius: 12px;
        text-transform: uppercase; font-weight: 700;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        transition: transform 0.3s ease;
        background-size: 200% 200%;
        animation: animated-badge-glow 3s infinite ease-in-out, animated-gradient 5s infinite ease-in-out alternate;
    }
    .level-super { background-image: linear-gradient(45deg, #ff4d4d, #f991c8, #4d5eff); }
    .level-kepala { background-image: linear-gradient(45deg, #4d5eff, #4dffcf, #a251ff); }
    .level-admin { background-image: linear-gradient(45deg, #ffc107, #ffde59, #ff9a4f); color: #333; }
    .level-operator { background-image: linear-gradient(45deg, #6c757d, #adb5bd, #6c757d); }
    .level-no_role { background: #343a40; }


    .logout-btn { 
        padding: 8px 15px; 
        background: var(--primary-color); 
        color: #fff; border: none; border-radius: 6px; 
        cursor: pointer; font-weight: 500;
        transition: background-color 0.2s;
    }
    .logout-btn:hover { background: #0056b3; }

    .tabs { display: flex; justify-content: center; background: var(--primary-dark); overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--border-color); }
    .tab { padding: 14px 22px; cursor: pointer; font-weight: 500; font-size: 0.95rem; color: var(--text-secondary); border-bottom: 3px solid transparent; transition: all 0.2s;}
    .tab:hover { color: var(--primary-color); }
    .tab.active { color: var(--primary-color); border-bottom: 3px solid var(--primary-color); font-weight: 700; }
    
    .container { width: 95%; max-width: 1400px; margin: 25px auto; background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
    .hidden { display: none !important; }
    .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
    .card { background-color: var(--primary-dark); padding: 25px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
    .card h3 { margin-top: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; font-size: 1.1rem; font-weight: 700; }
    
    input, button, select, textarea { 
        padding: 12px; border-radius: 6px; border: 1px solid #ced4da;
        margin: 8px 0; font-family: 'Poppins', sans-serif; 
        background-color: #fff; color: var(--text-color); width: 100%;
        font-size: 0.9rem;
    }
    input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); }
    button { background: var(--primary-color); color: #fff; font-weight: 500; cursor: pointer; border: 1px solid var(--primary-color); transition: background-color 0.2s; }
    button:disabled { background-color: #6c757d; cursor: not-allowed; border-color: #6c757d;}
    
    table { width: 100%; margin-top: 15px; border-collapse: collapse; background: var(--primary-dark); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden;}
    th, td { border-bottom: 1px solid var(--border-color); padding: 12px 15px; text-align: left; font-size: 0.9rem;}
    th { background: var(--secondary); font-weight: 700; }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover { background-color: #f1f3f5; }

    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; margin-bottom: 8px; color: var(--text-color); font-weight: 500;}
    [data-feature].hidden-feature { display: none !important; }
    .checkbox-container { display: flex; flex-wrap: wrap; gap: 15px; padding: 15px; background-color: var(--secondary); border-radius: 6px; border: 1px solid var(--border-color); }
    .checkbox-item { display: flex; align-items: center; gap: 8px; }
    .cancel-edit-btn { background-color: #6c757d; color: white; margin-top: 10px; border-color: #6c757d;}
    
    /* --- METRIC STYLES (HOME & ENGAGE) --- */
    .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; text-align: left;}
    .metric-card { background-color: var(--secondary); padding: 20px; border-radius: 6px; border: 1px solid var(--border-color); }
    .metric-card .value { font-size: 2.2rem; font-weight: 700; color: var(--primary-color);}
    .metric-card .label { font-size: 0.9rem; color: var(--text-secondary); margin-top: 5px; text-transform: uppercase; font-weight: 500; }
    .card p { color: var(--text-secondary); }

    /* --- CHAT TAB STYLES --- */
    #chat-layout { display: flex; height: 78vh; gap: 25px; }
    #chat-list-container { width: 35%; display: flex; flex-direction: column; background-color: var(--primary-dark); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); }
    #chat-list-header { padding: 15px; border-bottom: 1px solid var(--border-color); }
    #chat-list-header h3 { margin: 0 0 10px 0; font-size: 1.1rem; }
    .filter-controls { display: flex; flex-wrap: wrap; gap: 8px; }
    .filter-controls button { width: auto; padding: 6px 12px; font-size: 0.8rem; background-color: var(--secondary); color: var(--text-color); border: 1px solid var(--border-color); font-weight: 500;}
    .filter-controls button.active { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color);}
    .filter-controls button:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Focus style for filter buttons */
    #chat-list { overflow-y: auto; flex-grow: 1; }
    
    /* UPDATE: Animasi untuk item baru di antrian chat */
    @keyframes flash-new {
      0%, 100% { background-color: inherit; }
      50% { background-color: #d4edda; } /* Warna hijau muda untuk flash */
    }
    .flash-animation {
        animation: flash-new 1.5s ease-in-out;
    }

    .chat-item { padding: 15px; border-bottom: 1px solid var(--border-color); cursor: pointer; position: relative; transition: background-color 0.2s;}
    .chat-item:hover, .chat-item:focus { background-color: #e9f2ff; }
    .chat-item:focus { outline: 2px solid var(--primary-color); outline-offset: -2px; }
    .chat-item.active { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color);}
    .chat-item.active .chat-item-time, .chat-item.active .chat-item-snippet, .chat-item.active .chat-item-status, .chat-item.active .chat-item-site { color: #e9ecef; }
    .chat-item-closed { opacity: 0.7; }
    .chat-item-closed:hover { opacity: 1; }
    .chat-item-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
    .chat-item-user { font-weight: 700; }
    .chat-item-time { font-size: 0.8em; color: var(--text-secondary); }
    
    /* REQ 1 & 3: STYLING UNTUK "WAITING" & "PESAN BARU" */
    @keyframes pulse-red {
        0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
        70% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
        100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    }
    
    /* [PERMINTAAN 1] Tambahkan animasi pulse untuk warna biru (--info) */
    @keyframes pulse-info {
        0% { box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.7); }
        70% { box-shadow: 0 0 0 8px rgba(23, 162, 184, 0); }
        100% { box-shadow: 0 0 0 0 rgba(23, 162, 184, 0); }
    }

    .chat-item-time-badge {
        font-size: 0.7em; font-weight: 700;
        color: #fff;
        padding: 3px 10px; border-radius: 12px;
    }
    .chat-item-time-badge.waiting {
        background-color: var(--danger);
        animation: pulse-red 2s infinite;
    }
    .chat-item-time-badge.new-message {
        background-color: var(--info); /* Warna biru untuk pesan baru */
        animation: pulse-info 2s infinite; /* [PERMINTAAN 1] Terapkan animasi baru */
    }


    .chat-item-snippet { margin: 2px 0 0 0; font-size: 0.9em; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-item-status {
        font-size: 0.7em; font-weight: 700; color: #fff;
        background-color: var(--text-secondary); padding: 2px 8px; border-radius: 10px;
        text-transform: uppercase;
    }
    .chat-item-site { font-size: 0.8em; color: var(--text-secondary); margin-top: 2px; font-weight: 500; }
    .unread-indicator { width: 10px; height: 10px; background-color: var(--danger); border-radius: 50%; position: absolute; top: 20px; right: 15px; }
    #chat-window { width: 65%; display: flex; flex-direction: column; background-color: var(--primary-dark); border-radius: 8px; border: 1px solid var(--border-color); }
    #chat-window-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; color: #888; }
    #chat-window-main { display: flex; flex-direction: column; height: 100%; position: relative; }
    #chat-window-header { padding: 15px; background: var(--secondary); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
    #chat-window-header h3 { margin: 0; font-size: 1.2rem; font-weight: 700; }
    #chat-window-header p { margin: 2px 0 0 0; font-size: 0.8rem; color: var(--text-secondary); width: 100%; line-height: 1.4; }
    #chat-window-header p strong { color: var(--text-color); } /* Style untuk info tambahan */
    
    /* REQ 4: Improved Button Style */
    #close-chat-btn { 
        background-color: var(--danger); 
        width: auto; 
        padding: 8px 16px; /* Slightly larger padding */
        font-size: 0.85rem; /* Slightly larger font */
        margin: 0;
        border: none; /* Remove border for a flatter look */
        transition: all 0.3s ease; /* Smooth transition for all properties */
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        font-weight: 500;
    }
    #close-chat-btn:hover {
        transform: translateY(-2px); /* Lift on hover */
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        background-color: #c82333; /* Darken on hover */
    }

    #chat-window-messages { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
    
    /* UPDATE: Animasi untuk gelembung pesan */
    @keyframes message-in-right { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes message-in-left { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    
    .message-bubble { padding: 10px 15px; border-radius: 18px; max-width: 75%; width: fit-content; word-wrap: break-word; line-height: 1.5; white-space: pre-wrap; }
    .message-bubble.user { background-color: #e9ecef; color: var(--text-color); align-self: flex-start; border-bottom-left-radius: 4px; animation: message-in-left 0.3s ease forwards; }
    .message-bubble.system { background-color: #fffbe6; color: #856404; align-self: center; font-style: italic; font-size: 0.9rem; text-align: center; border: 1px dashed var(--border-color); animation: message-in-left 0.3s ease forwards; }

    /* UPDATE: Container untuk pesan agen (gambar profil + bubble) */
    .agent-message-container {
        display: flex;
        align-items: flex-end;
        gap: 10px;
        align-self: flex-end;
        max-width: 80%;
        animation: message-in-right 0.3s ease forwards;
    }
    .chat-bubble-agent-pic {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        border: 2px solid var(--border-color);
    }
    .message-bubble.agent { background-color: var(--primary-color); color: #fff; }
    
    .message-bubble a { max-width: 100%; border-radius: 10px; display: block; }
    
    /* [PERMINTAAN 2] Ubah max-width dari 250px ke 100% */
    .message-bubble .chat-image { 
        max-width: 100%; 
        max-height: 250px; 
        width: auto; 
        height: auto; 
        border-radius: 10px; 
        cursor: pointer; 
        display: block; /* Pastikan gambar adalah block element */
    }
    
    .message-bubble a { color: inherit; text-decoration: underline; font-weight: bold; }
    .message-timestamp { font-size: 0.7rem; color: #999; margin-top: 5px; display: inline-block; text-align: right; }
    #chat-window-input-area { display: flex; padding: 10px; border-top: 1px solid var(--border-color); gap: 10px; align-items: flex-end; background-color: var(--secondary); transition: opacity 0.2s; }
    #admin-message-input { 
        flex-grow: 1; resize: none; min-height: 50px; 
        max-height: 130px; overflow-y: auto; line-height: 1.5;
    }
    #admin-send-btn { height: 50px; width: 60px; font-size: 1.2rem;}
    #chat-features { display: flex; gap: 5px; }
    #chat-features button { width: 50px; height: 50px; padding: 0; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; background-color: #e9ecef; color: var(--text-color); border-color: #ced4da; }
    .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--primary-dark); padding: 30px; border: 1px solid var(--border-color); border-radius: 10px; z-index: 2000; box-shadow: 0 5px 25px rgba(0,0,0,0.1); width: 90%; max-width: 600px; /* Lebar diperbesar sedikit */ }
    
    /* MODIFIKASI: Style untuk Modal Hashtag */
    #hashtag-modal #hashtag-search { margin: 0 0 15px 0; padding: 10px; font-size: 0.9rem; }
    #hashtag-options { 
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 10px; 
        margin-bottom: 15px; 
        max-height: 25vh; /* Batasi tinggi, misal 25% dari viewport height */
        overflow-y: auto;
        padding: 5px;
        background-color: var(--background);
        border-radius: 6px;
    }
    .hashtag-item {
        background: var(--secondary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        transition: all 0.2s;
        text-align: left;
    }
    .hashtag-item:hover { background-color: #e9ecef; border-color: #c5d2e0; }
    .hashtag-item-text { font-size: 0.85rem; word-break: break-word; flex-grow: 1; }
    .hashtag-item-text strong { color: var(--primary-color); font-size: 0.9rem; display: block; margin-bottom: 5px;}
    .hashtag-item-actions { margin-top: 8px; text-align: right; }
    .hashtag-item-edit-btn {
        background: none; border: none; color: var(--text-secondary);
        font-size: 0.75rem; font-weight: 600; cursor: pointer;
        padding: 3px 8px; margin: 0; width: auto;
    }
    .hashtag-item-edit-btn:hover { color: var(--primary-color); background-color: rgba(0,123,255,0.1); }

    #toggle-add-hashtag-btn {
        width: 100%; background-color: var(--secondary); color: var(--text-color);
        margin: 20px 0 0 0; border: 1px dashed var(--border-color);
        font-weight: 600;
    }
    #add-hashtag-from-chat-form {
        margin-top: 15px; border-top: 1px solid var(--border-color); padding-top: 20px;
        background-color: var(--secondary); padding: 15px; border-radius: 6px;
    }
     #add-hashtag-from-chat-form.hidden { display: none; }
    #add-hashtag-from-chat-form h5 { font-size: 1rem; margin-top: 0; margin-bottom: 15px; }
    #add-hashtag-from-chat-form .form-group { margin-bottom: 10px; }
    #add-hashtag-from-chat-form label { font-size: 0.85rem; margin-bottom: 5px; }
    #add-hashtag-from-chat-form input, #add-hashtag-from-chat-form textarea { margin: 0; }
    #add-hashtag-from-chat-form textarea { min-height: 70px; }
    #saveNewHashtagFromChatBtn { width: 100%; background-color: var(--success); margin-top: 8px; }

    #emoji-picker { position: absolute; bottom: 75px; right: 20px; background: var(--primary-dark); border: 1px solid var(--border-color); padding: 10px; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px; width: 220px; box-shadow: 0 3px 15px rgba(0,0,0,0.1); z-index: 1100;}
    #emoji-picker span { cursor: pointer; font-size: 1.5rem; }

    /* Style for Hashtag Suggestion Box */
    #hashtag-suggestion-box {
        position: absolute;
        bottom: 80px; /* Adjust based on input area height */
        left: 10px;
        width: calc(100% - 20px);
        background: var(--primary-dark);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 0 -3px 15px rgba(0,0,0,0.1);
        max-height: 200px;
        overflow-y: auto;
        z-index: 1100; /* Above input but below modal */
    }
    .suggestion-item {
        padding: 10px 15px;
        cursor: pointer;
        border-bottom: 1px solid var(--border-color);
    }
    .suggestion-item:last-child { border-bottom: none; }
    .suggestion-item:hover, .suggestion-item.active { 
        background-color: var(--primary-color);
        color: white;
    }
    .suggestion-item strong { color: var(--primary-color); margin-right: 8px; }
    .suggestion-item:hover strong, .suggestion-item.active strong { color: white; }

    /* --- ARCHIVES TAB STYLES --- */
    #archive-viewer-modal { height: 80vh; max-height: 700px; display: flex; flex-direction: column; }
    #archive-viewer-header { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
    #archive-viewer-header h4 { margin: 0; font-size: 1.3rem; }
    #archive-viewer-header p { margin: 5px 0 0; color: var(--text-secondary); font-size: 0.9rem;}
    #archive-viewer-messages { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 10px; }
    
    /* REQ 4: Improved Button Styles */
    #toggleDeleteModeBtn, #toggleDeleteModeBtnAdminLog {
        padding: 8px 16px;
        font-weight: 700; /* Bolder text */
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }
    #toggleDeleteModeBtn:hover, #toggleDeleteModeBtnAdminLog:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        filter: brightness(1.05); /* Slightly brighten */
    }
    #deleteSelectedArchivesBtn, #deleteSelectedAdminLogsBtn {
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        font-weight: 500;
        padding: 8px 16px;
    }
    #deleteSelectedArchivesBtn:hover, #deleteSelectedAdminLogsBtn:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 8px rgba(0,0,0,0.3);
       background-color: #c82333;
    }


    /* --- AGENTS TAB STYLES --- */
    .agent-status-list { list-style-type: none; padding: 0; }
    .agent-status-list li { background-color: var(--secondary); padding: 15px; border-radius: 6px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border-color); }
    .agent-status-list .role { font-size: 0.8em; color: var(--text-secondary); }
    .status-indicator { font-size: 0.8em; padding: 4px 10px; border-radius: 12px; text-transform: uppercase; font-weight: 700;}
    
    /* REQ 2: ANIMASI STATUS ONLINE */
    @keyframes pulse-green-glow {
        0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
        70% { box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); }
        100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
    }
    .status-online { 
        background-color: var(--success); 
        color: #fff; 
        animation: pulse-green-glow 2s infinite;
    }
    .status-offline { background-color: #6c757d; color: #fff; }

    /* --- Styles for Action Dropdown --- */
    .action-dropdown { position: relative; display: inline-block; }
    .action-dropdown-toggle {
        background: #6c757d; color: white; padding: 5px 10px;
        font-size: 0.8rem; border: none; cursor: pointer;
        border-radius: 4px; margin:0;
    }
    .action-dropdown-content {
        display: none; position: absolute; background-color: #f9f9f9;
        min-width: 100px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 10; border-radius: 4px; overflow: hidden;
        right: 0; border: 1px solid var(--border-color);
    }
    .action-dropdown-content a, .action-dropdown-content button {
        color: black; padding: 8px 12px; text-decoration: none;
        display: block; font-size: 0.8rem; width: 100%;
        background: none; border: none; text-align: left; cursor: pointer;
    }
    .action-dropdown-content a:hover, .action-dropdown-content button:hover { background-color: #f1f3f5; }
    .action-dropdown-content a.delete, .action-dropdown-content button.delete { color: var(--danger); }
    .action-dropdown-content.show { display: block; }

    /* --- SETTINGS TAB STYLES --- */
    .site-selector-container { display: flex; flex-direction: column; gap: 20px; margin-bottom: 25px; background-color: var(--primary-dark); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color); }
    .site-selector-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
    .site-selector-group label { flex-shrink: 0; font-weight: 500; }
    .site-selector-group select, .site-selector-group input { margin: 0; flex-grow: 1; }
    .site-selector-group button { margin: 0; width: auto; flex-shrink: 0; font-weight: 500;}
    .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; }
    .settings-card .form-group textarea { min-height: 100px; resize: vertical; }
    .auto-close-group { display: flex; gap: 15px; align-items: center; }
    .auto-close-group input[type="number"] { width: 100px; flex-grow: 0; }
    .auto-close-group label { margin-bottom: 0; }


    /* MODIFIKASI 1 (Permintaan Pengguna): Batasi tinggi kontainer daftar hashtag dan buat bisa di-scroll */
    #cannedResponseListContainer {
        display: flex; flex-direction: column; gap: 10px;
        max-height: 260px; /* Perkiraan tinggi untuk 4-5 item */
        overflow-y: auto;
        padding-right: 10px; /* Beri sedikit ruang jika scrollbar muncul (meski disembunyikan) */
    }
    .canned-response-item {
        background-color: var(--secondary); padding: 10px 15px; border-radius: 6px;
        border: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;
    }
    .canned-response-item .text strong {
        color: var(--primary-color); display: block; font-size: 0.95rem;
    }
     .canned-response-item .text p {
        margin: 2px 0 0 0; font-size: 0.85rem; color: var(--text-secondary);
    }
    .canned-response-item .actions { flex-shrink: 0; margin-left: 10px; }

    /* --- NEW STYLES FROM REQUESTS --- */

    /* REQ 2: Agent name in chat bubble */
    .agent-name-in-bubble {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        margin-bottom: 4px;
        color: rgba(255, 255, 255, 0.85);
    }

    /* REQ 4: Notification badge on chat filter buttons */
    .filter-btn .notification-badge {
        background-color: var(--danger);
        color: white;
        border-radius: 10px;
        padding: 1px 7px;
        font-size: 0.7rem;
        font-weight: 700;
        margin-left: 8px;
        min-width: 18px;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
    }
    
    /* REQ 6: Read receipt */
    .read-receipt {
        font-size: 0.9rem;
        color: #3498db; /* A distinct 'read' color */
        margin-left: 5px;
        font-weight: bold;
        display: inline-block;
        vertical-align: middle;
    }
    .read-receipt::before {
        content: '✓✓';
    }
    .message-timestamp {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }


    /* REQ 5 & REQ 1: Header Notification Bell */
    #notification-area {
        position: relative;
    }
    #notification-bell-btn {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    #notification-icon svg {
        width: 24px;
        height: 24px;
        vertical-align: middle;
        color: var(--text-color);
        stroke-width: 1.5;
    }
    #notification-icon:hover svg {
        color: var(--primary-color);
    }
    #notification-count-badge {
        position: absolute;
        top: -4px;
        right: -6px;
        background-color: var(--danger);
        color: white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--primary-dark);
    }
    /* MODIFICATION 1: Change notification dropdown position */
    #notification-dropdown {
        display: none;
        position: absolute;
        top: 0;
        right: auto;
        left: 100%;
        margin-top: 0;
        margin-left: 15px;
        background-color: var(--primary-dark);
        min-width: 300px;
        max-width: 90vw;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
        z-index: 1001;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        max-height: 40vh;
        overflow-y: auto;
    }
    #notification-dropdown.show {
        display: block;
    }
    .notification-dropdown-item {
        padding: 12px 18px;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.9rem;
    }
     .notification-dropdown-item:last-child {
        border-bottom: none;
    }
    .notification-dropdown-item strong {
        color: var(--primary-color);
    }
    .notification-dropdown-item.empty {
        color: var(--text-secondary);
        text-align: center;
    }

    /* Style untuk Color Picker di Settings */
    .color-picker-group { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .color-picker-group input[type="color"] { padding: 0; height: 38px; width: 50px; border: 1px solid var(--border-color); cursor: pointer; margin: 0; flex-shrink: 0; }
    .color-picker-group label { margin-bottom: 0; }
    .color-picker-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }

    /* REQ 2: STYLES FOR IMAGE MODAL */
    #image-modal {
        position: fixed;
        z-index: 3000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.85);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #image-modal img {
        max-width: 90vw;
        max-height: 90vh;
        object-fit: contain;
    }
    #image-modal-close {
        position: absolute;
        top: 20px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        cursor: pointer;
    }
    #image-modal-close:hover {
        color: #bbb;
    }