@extends('root')
@section('title', 'Chat Inbox')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============================================
   WhatsCRM-Style 3-Panel Chat Inbox
   ============================================ */

:root {
    --primary-blue: #2e89ff;
    --soft-blue: #eaf7ff;
    --bg-white: #ffffff;
    --border-soft: #e5e7eb;
    --text-dark: #1f2937;
    --text-muted: #9ca3af;
    --success-green: #22c55e;
    --warning-orange: #f59e0b;
    --danger-red: #ef4444;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Main Inbox Layout */
.inbox-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px);
    background: #f3f4f6;
    overflow: hidden;
}

/* Header Bar */
.inbox-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.header-waba-select {
    min-width: 220px;
}

.header-waba-select .select2-container--bootstrap-5 .select2-selection {
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    padding: 6px 12px;
    min-height: 40px;
}

.header-search {
    flex: 1;
    max-width: 320px;
    position: relative;
}

.header-search input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    font-size: 14px;
    background: #f9fafb;
    transition: all 0.2s;
}

.header-search input:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: var(--bg-white);
    box-shadow: 0 0 0 3px rgba(46, 137, 255, 0.1);
}

.header-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.header-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-white);
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: #f9fafb;
    border-color: var(--primary-blue);
}

.filter-btn .badge {
    background: var(--primary-blue);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
}

.sort-order-select {
    padding: 8px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-white);
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
    min-width: 120px;
}
.sort-order-select:hover, .sort-order-select:focus {
    border-color: var(--primary-blue);
    outline: none;
}
.sort-order-select-sm {
    min-width: 100px;
    padding: 6px 10px;
    font-size: 12px;
}

.header-tabs {
    display: flex;
    gap: 4px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 8px;
}

.header-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.header-tab.active {
    background: var(--bg-white);
    color: var(--text-dark);
    box-shadow: var(--shadow-sm);
}

.header-actions {
    display: flex;
    gap: 8px;
}

.header-icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.header-icon-btn:hover {
    background: #f9fafb;
}

.connection-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.connection-badge.online {
    background: #dcfce7;
    color: #16a34a;
}

.connection-badge.offline {
    background: #f3f4f6;
    color: var(--text-muted);
}

/* Count Badges for Filter Tabs */
.count-badge {
    display: inline-block;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

.header-tab.active .count-badge {
    background: var(--primary);
    color: white;
}

/* 3-Panel Container */
.inbox-panels {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Left Panel - Chat List */
.panel-left {
    width: 320px;
    max-width: 360px;
    min-width: 280px;
    background: var(--bg-white);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
    overflow: hidden;
}

.panel-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #e5ddd5;
    position: relative; /* Anchor for emoji picker */
}

/* Right Panel - Info Sidebar */
.panel-right {
    width: 320px;
    background: var(--bg-white);
    border-left: 1px solid var(--border-soft);
    display: none; /* Default hidden, shown via media queries */
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
}

.chat-list-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-list-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.chat-list-count {
    background: var(--primary-blue);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.chat-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
}

.chat-list::-webkit-scrollbar {
    width: 4px;
}

.chat-list::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

.chat-item {
    display: flex;
    align-items: flex-start;
    padding: 14px 16px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    position: relative;
}

.chat-item:hover {
    background: #f5f7fa;
}

.chat-item.active {
    background: var(--soft-blue);
    border-left-color: var(--primary-blue);
}

.chat-item.unassigned {
    border-left-color: var(--warning-orange);
}

.chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
}

.chat-avatar.green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.chat-avatar.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.chat-avatar.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.chat-avatar.orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.chat-avatar.pink { background: linear-gradient(135deg, #ec4899, #db2777); }

.chat-content {
    flex: 1;
    min-width: 0;
    margin-left: 12px;
}

.chat-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.chat-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.chat-phone {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
#chat-phone.tap-to-copy,
#info-phone.tap-to-copy {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#chat-phone.tap-to-copy:hover,
#chat-phone.tap-to-copy:active,
#info-phone.tap-to-copy:hover,
#info-phone.tap-to-copy:active {
    color: var(--primary-blue, #0d6efd);
}

.chat-preview {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-preview i {
    color: var(--primary-blue);
    font-size: 14px;
}

.chat-badges {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.source-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #dbeafe;
    color: #2563eb;
    font-weight: 500;
}

.agent-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f3e8ff;
    color: #7c3aed;
    font-weight: 500;
}

.unread-badge {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-blue);
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unreplied-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.chat-menu-btn {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.chat-item:hover .chat-menu-btn {
    display: flex;
}

.chat-menu-btn:hover {
    background: #e5e7eb;
}

/* Center Panel - Chat Window */
.message-bubble.message-interactive {
    background: transparent !important;
    padding: 0;
    box-shadow: none;
    max-width: 85%; /* Sedikit lebih lebar untuk button */
}

/* Interactive Content Container (Header/Body/Footer) */
.interactive-content {
    background: #fff;
    padding: 6px 7px 8px 9px;
    border-radius: 7.5px; /* Standar bubble radius */
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
    position: relative;
}

.outgoing .interactive-content {
    background: #d9fdd3; /* WhatsApp Green for outgoing text part */
}

/* Interactive Message Reply (Quote) style */
.message-interactive-reply {
     font-size: 13px;
}

/* Buttons Container */
.interactive-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Jarak antar button */
    margin-top: 8px;
}

.interactive-buttons button, 
.interactive-list button {
    background: #fff;
    color: #0084ff; /* WhatsApp-like blue for actions */
    border: none;
    border-radius: 7.5px;
    padding: 10px;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
    text-align: center;
    width: 100%;
    transition: background 0.2s;
    /* Reset disabled styles */
    opacity: 1 !important;
    cursor: default;
}

.interactive-buttons button:hover:not(:disabled), 
.interactive-list button:hover:not(:disabled) {
    background: #f0f2f5;
    cursor: pointer;
}

/* List Message Specifics */
.interactive-list .interactive-sections {
    margin-top: 8px;
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
    border-radius: 7.5px;
    overflow: hidden;
    background: white;
}

.interactive-header {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 14px;
}

.interactive-body {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.interactive-footer {
    font-size: 11px;
    color: rgba(0,0,0,0.45);
    margin-top: 4px;
}

.outgoing .interactive-footer {
    color: rgba(0,0,0,0.45); /* Tetap gray di green bubble */
}

.panel-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    min-width: 0;
    min-height: 0; /* Critical for flex scroll */
    overflow: hidden;
}

#active-chat {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0; /* Critical for flex scroll */
    overflow: hidden;
}

#active-chat.show {
    display: flex !important;
}

.chat-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.chat-window-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-window-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.chat-window-info h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
}

.chat-window-info span {
    font-size: 12px;
    color: var(--text-muted);
}

.chat-window-actions {
    display: flex;
    gap: 8px;
}

/* Messages Area */

.chat-input-wrapper {
    position: relative;
    z-index: 101; /* Ensure above emojis if overlapping */
}

/* Quick Reply Autocomplete */
.qr-autocomplete {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    border-radius: 12px 12px 0 0;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-soft);
}

.qr-autocomplete-item {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f2f5;
    cursor: pointer;
    transition: background 0.2s;
}

.qr-autocomplete-item:last-child {
    border-bottom: none;
}

.qr-autocomplete-item:hover, .qr-autocomplete-item.active {
    background: #f8f9fa;
}

.qr-item-shortcut {
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 13px;
    margin-bottom: 2px;
}

.qr-item-preview {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-messages {
    flex: 1 1 auto;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 20px;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
    min-height: 0; /* Critical for flex scroll */
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

.message-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 70%;
}

.message-wrapper.incoming {
    align-self: flex-start;
}

.message-wrapper.outgoing {
    align-self: flex-end;
}

.message-bubble-wrapper {
    transition: transform 0.2s ease-out;
    will-change: transform;
}
.message-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.message-wrapper.incoming .message-bubble {
    background: var(--bg-white);
    border-bottom-left-radius: 4px;
}

.message-wrapper.outgoing .message-bubble {
    background: var(--soft-blue);
    border-bottom-right-radius: 4px;
}

.message-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dark);
    word-wrap: break-word;
    white-space: pre-wrap;
}

.message-edited-badge {
    font-size: 11px;
    color: var(--text-muted, #666);
    margin-left: 4px;
}

/* Quoted/reply message preview (seperti WhatsApp) */
.message-quoted {
    display: flex;
    align-items: stretch;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.06);
    border-radius: 8px;
    border-left: 3px solid rgba(0,0,0,0.2);
    cursor: pointer;
    font-size: 12px;
    min-height: 36px;
}
.message-quoted:hover {
    background: rgba(0,0,0,0.09);
}
.message-quoted-inner {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.message-quoted-sender {
    font-weight: 600;
    color: var(--text-dark, #111);
    margin-bottom: 2px;
    font-size: 11px;
}
.message-quoted-body {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.message-quoted-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    color: var(--text-muted, #666);
}

/* Reply quote bar (composer) */
.reply-quote-bar {
    padding: 8px 12px;
    background: rgba(0,0,0,0.05);
    border-left: 3px solid var(--primary-blue, #0d6efd);
    border-radius: 6px;
    margin: 0 12px 8px;
}
.reply-quote-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.reply-quote-bar-content {
    flex: 1;
    min-width: 0;
}
.reply-quote-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #666);
    display: block;
    margin-bottom: 2px;
}
.reply-quote-bar-body {
    font-size: 13px;
    color: var(--text-dark, #111);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}
.reply-quote-bar-cancel {
    color: #666;
    flex-shrink: 0;
}

.message-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.message-status { color: var(--text-muted); }
.message-status.delivered { color: var(--primary-blue); }
.message-status.read { color: var(--primary-blue); }

.date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
}

.date-divider span {
    background: rgba(0,0,0,0.05);
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Chat Input */
.chat-input-wrapper {
    padding: 12px 20px;
    background: var(--bg-white);
    border-top: 1px solid var(--border-soft);
    flex-shrink: 0;
}

.chat-input-container {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: #f3f4f6;
    border-radius: 24px;
    padding: 8px 8px 8px 16px;
}

.input-actions {
    display: flex;
    gap: 4px;
}

.input-action-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.input-action-btn:hover {
    background: #e5e7eb;
    color: var(--text-dark);
}

.chat-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: 14px;
    resize: none;
    max-height: 100px;
    line-height: 1.5;
}

.chat-input:focus {
    outline: none;
}

.send-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--primary-blue);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(46, 137, 255, 0.35);
}

.send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(46, 137, 255, 0.45);
}

/* Right Panel - Info Sidebar */
.panel-right {
    width: 320px;
    background: var(--bg-white);
    border-left: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.info-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-header h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
}

.info-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.info-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.customer-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 12px;
}

.customer-card .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.customer-card .info h6 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
}

.customer-card .info span {
    font-size: 12px;
    color: var(--text-muted);
}

.note-textarea {
    width: 100%;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    resize: none;
    min-height: 80px;
}

.note-textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.save-note-btn {
    width: 100%;
    padding: 10px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.2s;
}

.save-note-btn:hover {
    background: #1d7aed;
}

.response-window-card {
    padding: 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.response-window-card.active {
    background: #dcfce7;
    border-color: #bbf7d0;
}

.response-window-card .label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.response-window-card .status {
    font-size: 13px;
    font-weight: 600;
    color: var(--danger-red);
}

.response-window-card.active .status {
    color: var(--success-green);
}

.rating-stars {
    display: flex;
    gap: 4px;
}

.rating-stars i {
    font-size: 20px;
    color: #fbbf24;
    cursor: pointer;
}

.rating-stars i.empty {
    color: #e5e7eb;
}

/* Empty States */
.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.empty-state-icon i {
    font-size: 32px;
    color: var(--text-muted);
}

.empty-state h5 {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--text-dark);
}

.empty-state p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

/* Loading */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE STYLES
   Mobile-first approach with 3 breakpoints
   ============================================ */

/* Mobile Navigation Elements (hidden by default) */
.mobile-menu-btn,
.mobile-back-btn {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dark);
    font-size: 20px;
    flex-shrink: 0;
}

.mobile-menu-btn:hover,
.mobile-back-btn:hover {
    background: #f3f4f6;
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.show {
    opacity: 1;
}

/* ============================================
   MOBILE STYLES (<768px) - WhatsApp Style
   ============================================ */
@media (max-width: 767.98px) {
    /* ========== WHATSAPP COLOR SCHEME ========== */
    :root {
        --wa-chat-bg: #ECE5DD;
        --wa-bubble-outgoing: #DCF8C6;
        --wa-bubble-incoming: #FFFFFF;
        --wa-send-btn: #25D366;
        --wa-header-bg: #075E54;
        --wa-header-text: #FFFFFF;
        --wa-text-primary: #111111;
        --wa-text-secondary: #667781;
        --wa-timestamp: #667781;
        --wa-input-bg: #FFFFFF;
        --wa-composer-bg: #F0F0F0;
    }
    
    /* ========== VIEWPORT ADJUSTMENT ========== */
    .inbox-wrapper {
        height: 100vh;
        height: 100dvh;
        background: var(--wa-chat-bg);
    }
    
    /* ========== HIDE DESKTOP ELEMENTS ========== */
    .mobile-menu-btn {
        display: flex;
    }
    
    .mobile-overlay {
        display: block;
        pointer-events: none;
    }
    
    .mobile-overlay.show {
        pointer-events: auto;
    }
    
    .header-search,
    .header-filters,
    .header-tabs,
    .header-waba-select,
    .header-actions .header-icon-btn:not(:first-child) {
        display: none;
    }
    
    .panel-right {
        display: none !important;
    }

    /* Hide Quick Reply Button on Mobile */
    #quick-reply-btn {
        display: none !important;
    }
    
    /* Saat pertama diakses mobile: hanya tampilkan panel-left (daftar chat), sembunyikan panel-center */
    .panel-center {
        display: none !important;
    }
    
    /* ========== APP BAR (WA HEADER) - 56px ========== */
    .inbox-header {
        display: none; /* Hide main header on mobile */
    }
    
    .chat-window-header {
        height: 56px;
        min-height: 56px;
        padding: 0 8px;
        background: var(--wa-header-bg);
        border-bottom: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        display: flex;
        align-items: center;
        gap: 0;
    }
    
    .mobile-back-btn {
        display: flex;
        width: 40px;
        height: 40px;
        color: var(--wa-header-text);
        font-size: 22px;
        margin-right: 4px;
    }
    
    .mobile-back-btn:hover {
        background: rgba(255,255,255,0.1);
    }
    
    .chat-window-avatar {
        width: 40px;
        height: 40px;
        font-size: 15px;
        flex-shrink: 0;
    }
    
    .chat-window-user {
        flex: 1;
        gap: 10px;
        min-width: 0;
    }
    
    .chat-window-info {
        flex: 1;
        min-width: 0;
    }
    
    .chat-window-info h6 {
        font-size: 16px;
        font-weight: 600;
        color: var(--wa-header-text);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .chat-window-info span {
        font-size: 12px;
        color: rgba(255,255,255,0.8);
    }
    
    .chat-window-actions {
        gap: 4px;
    }
    /* Urutan pesan di header: sembunyikan di mobile (diganti oleh message-sort-order di mobile-search-box) */
    .chat-window-actions #message-sort-order {
        display: none;
    }
    /* Urutan pesan tetap tampil di desktop */
    .chat-window-actions .sort-order-select-sm {
        min-width: 72px;
        max-width: 100px;
        font-size: 11px;
        padding: 4px 6px;
    }
    
    .chat-window-actions .header-icon-btn {
        color: var(--wa-header-text);
        border: none;
        background: transparent;
    }
    
    .chat-window-actions .header-icon-btn:hover {
        background: rgba(255,255,255,0.1);
    }
    
    /* ========== CONVERSATION LIST DRAWER ========== */
    /* Default mobile: tampilkan daftar chat (panel-left), bukan panel-center */
    .panel-left {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        z-index: 1000;
        transform: translateX(0);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
        background: #FFFFFF;
    }
    
    .panel-left.open {
        transform: translateX(0);
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    }
    
    .chat-list-header {
        padding: 12px 16px;
        background: var(--wa-header-bg);
    }
    
    .chat-list-title {
        color: var(--wa-header-text);
        font-size: 18px;
    }
    
    .chat-list-count {
        background: rgba(255,255,255,0.2);
    }
    
    .chat-item {
        padding: 12px 16px;
        min-height: 72px;
        border-left: none;
        border-bottom: 1px solid #E9EDEF;
    }
    
    .chat-item.active,
    .chat-item:hover {
        background: #F0F2F5;
        border-left: none;
    }
    
    .chat-avatar {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    
    .chat-name {
        font-size: 16px;
        color: var(--wa-text-primary);
    }
    
    .chat-preview {
        font-size: 14px;
        color: var(--wa-text-secondary);
    }
    
    .chat-time {
        color: var(--wa-text-secondary);
        font-size: 12px;
    }
    
    /* ========== CHAT MESSAGES AREA (WA STYLE) ========== */
    .chat-messages {
        flex: 1;
        padding: 6px 10px;
        gap: 1px;
        background: var(--wa-chat-bg);
        /* WhatsApp doodle pattern - very subtle */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3Cpattern id='p' width='50' height='50' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23000' fill-opacity='.015'/%3E%3Ccircle cx='40' cy='25' r='1' fill='%23000' fill-opacity='.015'/%3E%3Ccircle cx='25' cy='40' r='1' fill='%23000' fill-opacity='.015'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100' height='100'/%3E%3C/svg%3E");
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ========== MESSAGE BUBBLES (REFINED WA STYLE) ========== */
    .message-wrapper {
        max-width: 72%;
        margin-bottom: 1px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .message-wrapper.incoming {
        padding-left: 12px;
        padding-right: 48px;
    }
    
    .message-wrapper.outgoing {
        padding-left: 48px;
        padding-right: 12px;
    }
    
    /* Group spacing - very tight like WhatsApp */
    .message-wrapper + .message-wrapper.incoming,
    .message-wrapper + .message-wrapper.outgoing {
        margin-top: 1px;
    }
    
    /* Larger gap when sender changes */
    .message-wrapper.incoming + .message-wrapper.outgoing,
    .message-wrapper.outgoing + .message-wrapper.incoming {
        margin-top: 10px;
    }
    
    .message-bubble {
        padding: 7px 10px 8px;
        border-radius: 7.5px;
        box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
        position: relative;
        min-width: 60px;
        word-wrap: break-word;
    }
    
    /* Incoming bubble (white) */
    .message-wrapper.incoming .message-bubble {
        background: var(--wa-bubble-incoming);
        border-top-left-radius: 0;
        margin-left: 0;
    }
    
    /* Incoming bubble tail - smoother curve */
    .message-wrapper.incoming .message-bubble::before {
        content: '';
        position: absolute;
        top: 0;
        left: -8px;
        width: 8px;
        height: 13px;
        background: var(--wa-bubble-incoming);
        clip-path: polygon(100% 0, 0 0, 100% 100%);
    }
    
    /* Outgoing bubble (green) */
    .message-wrapper.outgoing .message-bubble {
        background: var(--wa-bubble-outgoing);
        border-top-right-radius: 0;
        margin-right: 0;
    }
    
    /* Outgoing bubble tail - smoother curve */
    .message-wrapper.outgoing .message-bubble::before {
        content: '';
        position: absolute;
        top: 0;
        right: -8px;
        width: 8px;
        height: 13px;
        background: var(--wa-bubble-outgoing);
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    /* ========== FULLSCREEN CHAT MODE (MAXIMIZE) ========== */
    body.mobile-chat-open {
        overflow: hidden !important;
    }

    body.mobile-chat-open aside.left-sidebar,
    body.mobile-chat-open header.topbar,
    body.mobile-chat-open .impersonation-banner {
        display: none !important;
    }

    body.mobile-chat-open .body-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        height: 100dvh !important;
        width: 100vw !important;
    }

    body.mobile-chat-open .inbox-wrapper {
        height: 100dvh !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        margin: 0 !important;
        border-radius: 0 !important;
        width: 100vw !important;
    }

    /* Ensure header and other elements adjust */
    body.mobile-chat-open .inbox-header {
        display: none; /* Hide the INBOX header too if it contains filters, or maybe keep it? */
        /* Wait, WhatsApp mobile chat view DOES have a header (Avatar, Name, Video/Call icons).
           But it does NOT show the Search/Filter bar of the LIST.
           The `.inbox-header` in my HTML contains the Search/Filter/WABA selector.
           The Chat View has its OWN header `.chat-window-header`.
           So yes, `.inbox-header` (the main one) should potentially be hidden OR it is already covered by the chat view?
           
           In my mobile layout implementation, `panel-left` (drawer) covers the screen.
           When chat is open (`panel-left` hidden), `panel-center` is visible.
           `panel-center` contains `.chat-window-header` and `.chat-messages`.
           
           `.inbox-header` is OUTSIDE `panel-left` and `panel-center`?
           Let's check HTML structure again.
           
           <div class="inbox-wrapper">
              <div class="inbox-header">...</div>
              <div class="inbox-panels">...</div>
           </div>
           
           Yes, `inbox-header` is the top bar with "Find anything...", "Filter", "WABA".
           When in Chat View, this should DEFINITELY be hidden or covered.
           If `inbox-wrapper` goes fullscreen, `inbox-header` is inside it.
           We want `panel-center` to be the ONLY thing visible?
           Or rather, we want `inbox-wrapper` to be fullscreen, but we might want `inbox-header` GONE in favor of `chat-window-header`.
           
           Actually, in standard responsive design (WhatsApp), the "List Header" is part of the List View.
           The "Chat Header" is part of the Chat View.
           
           So hiding `.inbox-header` when `mobile-chat-open` is active is correct behavior.
        */
        display: none !important;
    }

    body.mobile-chat-open .inbox-panels {
        height: 100% !important;
    }

    body.mobile-chat-open .panel-center {
        display: flex !important; /* Ensure it's shown */
        height: 100% !important;
    }
    
    body.mobile-chat-open .panel-left {
        transform: translateX(-100%); /* Sembunyikan daftar chat saat chat dibuka */
    }
    
    /* Hide tail for consecutive messages from same sender */
    .message-wrapper.incoming + .message-wrapper.incoming .message-bubble::before,
    .message-wrapper.outgoing + .message-wrapper.outgoing .message-bubble::before {
        display: none;
    }
    
    .message-wrapper.incoming + .message-wrapper.incoming .message-bubble {
        border-top-left-radius: 7.5px;
    }
    
    .message-wrapper.outgoing + .message-wrapper.outgoing .message-bubble {
        border-top-right-radius: 7.5px;
    }
    
    .message-text {
        font-size: 14.2px;
        line-height: 1.35;
        color: var(--wa-text-primary);
        word-wrap: break-word;
        white-space: pre-wrap;
    }
    
    /* Timestamp inside bubble (WA style - refined) */
    .message-meta {
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        gap: 3px;
        margin-top: 0;
        margin-left: 6px;
        font-size: 11px;
        color: var(--wa-timestamp);
        opacity: 0.6;
        float: right;
        position: relative;
        top: 5px;
        white-space: nowrap;
    }
    
    .message-status {
        font-size: 16px;
        opacity: 0.8;
    }
    
    .message-status.delivered,
    .message-status.read {
        color: #53BDEB;
        opacity: 1;
    }
    
    /* Date divider (WA style - refined) */
    .date-divider {
        padding: 10px 0 14px;
        display: flex;
        justify-content: center;
    }
    
    .date-divider span {
        background: rgba(255, 255, 255, 0.9);
        padding: 6px 12px;
        border-radius: 7.5px;
        font-size: 12.5px;
        color: #54656F;
        font-weight: 400;
        box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.08);
    }
    
    /* ========== MESSAGE COMPOSER (REFINED WA STYLE) ========== */
    .chat-input-wrapper {
        padding: 5px 6px;
        padding-bottom: max(5px, env(safe-area-inset-bottom));
        background: var(--wa-composer-bg);
        border-top: none;
    }
    
    .chat-input-container {
        display: flex;
        align-items: flex-end;
        gap: 6px;
        background: transparent;
        padding: 0;
        border-radius: 0;
    }
    
    /* Input field - more rounded & spacious */
    .input-actions {
        display: flex;
        gap: 0;
        background: var(--wa-input-bg);
        border-radius: 21px 0 0 21px;
        padding-left: 6px;
        align-items: center;
        min-height: 42px;
    }
    
    .input-action-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 24px;
        color: #54656F;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .input-action-btn:hover {
        background: transparent;
        color: var(--wa-header-bg);
    }
    
    .input-action-btn:active {
        opacity: 0.7;
    }
    
    .chat-input {
        flex: 1;
        font-size: 17px;
        padding: 11px 14px 11px 4px;
        border-radius: 0 21px 21px 0;
        min-height: 42px;
        max-height: 100px;
        line-height: 1.35;
        background: var(--wa-input-bg);
        border: none;
        resize: none;
    }
    
    .chat-input::placeholder {
        color: #667781;
        opacity: 0.8;
    }
    
    .chat-input:focus {
        outline: none;
    }
    
    /* Send button (WA green circle - polished) */
    .send-btn {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 50%;
        background: var(--wa-send-btn);
        color: white;
        font-size: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        cursor: pointer;
    }
    
    .send-btn:hover {
        background: #1FAA59;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    
    .send-btn:active {
        transform: scale(0.95);
        box-shadow: none;
    }

    .send-btn:disabled {
        background: #ccc;
        box-shadow: none;
        cursor: not-allowed;
    }

    /* ========== MEDIA MESSAGES ========== */
    .message-bubble img,
    .message-bubble video {
        border-radius: 6px;
        max-width: 100%;
    }
}

/* ============================================
   GLOBAL STYLES (Unified Emoji & Visibility)
   ============================================ */
/* Unified Emoji Picker (Base/Mobile) */
.emoji-picker {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 280px;
    background: #f0f2f5;
    border-top: 1px solid #ddd;
    z-index: 1001;
    padding: 10px;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 8px;
    overflow-y: auto;
    padding-bottom: 20px;
    animation: slideUp 0.2s ease-out;
}

.emoji-picker.open {
    display: grid;
}

.emoji-item {
    font-size: 24px;
    text-align: center;
    padding: 4px;
    cursor: pointer;
    user-select: none;
}

.emoji-item:active {
    background-color: rgba(0,0,0,0.1);
    border-radius: 50%;
}

/* Chat Visibility Defaults */
#active-chat {
    display: none; 
    flex-direction: column;
    height: 100%;
    flex: 1;
}

#empty-chat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ============================================
   DESKTOP-ONLY ELEMENTS (Global, outside mobile query)
   ============================================ */
/* Unified Emoji Picker - Desktop Override */
@media (min-width: 768px) {
    .emoji-picker {
        position: absolute;
        bottom: 70px;
        left: 20px;
        width: 320px;
        height: auto;
        max-height: 300px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: 1px solid #ddd;
        z-index: 1005;
        animation: none;
        border-top-left-radius: 8px; /* Override mobile radius if any */
        border-top-right-radius: 8px;
    }
}

/* ============================================
   TABLET STYLES (768px - 1024px)
   Compact two-pane layout
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Hide right panel */
    .panel-right {
        display: none;
    }
    
    /* Narrower left panel */
    .panel-left {
        width: 280px;
        min-width: 260px;
    }
    
    /* Compact header */
    .inbox-header {
        padding: 10px 16px;
        gap: 12px;
    }
    
    .header-search {
        max-width: 240px;
    }
    
    .header-tabs {
        gap: 2px;
    }
    
    .header-tab {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    /* Chat items */
    .chat-item {
        padding: 12px 14px;
    }
    
    .chat-avatar {
        width: 44px;
        height: 44px;
    }
    
    /* Messages */
    .chat-messages {
        padding: 16px;
    }
    
    .message-wrapper {
        max-width: 75%;
    }
}

/* ============================================
   DESKTOP STYLES (>1024px)
   Full three-pane with refinements
   ============================================ */
@media (min-width: 1025px) {
    /* Right panel visible only when active */
    .panel-right.active {
        display: flex;
    }
    
    /* Softer visual hierarchy */
    .panel-left {
        border-right: none;
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
    }
    
    .panel-right {
        border-left: none;
        box-shadow: -1px 0 3px rgba(0, 0, 0, 0.05);
    }
    
    /* Enhanced active state */
    .chat-item.active {
        background: var(--soft-blue);
        border-left-color: var(--primary-blue);
        box-shadow: inset 0 0 0 1px rgba(46, 137, 255, 0.1);
    }
    
    /* Unread badge enhanced */
    .unread-badge {
        box-shadow: 0 2px 4px rgba(46, 137, 255, 0.3);
    }
}

/* ============================================
   LARGE DESKTOP (>1400px)
   More spacious layout
   ============================================ */
@media (min-width: 1400px) {
    .panel-left {
        width: 360px;
        max-width: 380px;
    }
    
    .panel-right {
        width: 360px;
    }
    
    .chat-messages {
        padding: 24px 32px;
    }
    
    .message-wrapper {
        max-width: 65%;
    }
}

/* ============================================
   DARK MODE COMPATIBILITY
   (If dark mode class exists)
   ============================================ */
@media (prefers-color-scheme: dark) {
    .inbox-wrapper {
        /* Preserve existing dark mode if any */
    }
}

    /* ========== MOBILE SEARCH & FILTER (STICKY) ========== */
    .mobile-search-filter-container {
        display: none; /* Hidden on desktop */
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        padding: 8px 16px;
        border-bottom: 1px solid #f0f0f0;
    }

    @media (max-width: 767.98px) {
        .mobile-search-filter-container {
            display: block;
        }

        .chat-list-header {
            display: none; /* Hide default header text on mobile to save space, or keep it? WA keeps it "Chats" */
            /* Actually WA shows "WhatsApp" at top, then search. 
               We have "Conversations" in chat-list-header.
               Let's keep chat-list-header but make search sticky below it? 
               Or make BOTH sticky?
               Let's make .panel-left use flex column so sticky works inside.
            */
        }
        
        .panel-left {
            display: flex;
            flex-direction: column;
        }
        
        .chat-list {
            flex: 1;
            overflow-y: auto;
        }
    }

    .mobile-sort-order-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }
    .mobile-only-contacts-row {
        margin-bottom: 10px;
    }
    .mobile-only-contacts-row .filter-btn-mobile {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        font-size: 13px;
    }
    .mobile-sort-label {
        font-size: 13px;
        color: var(--text-muted);
        white-space: nowrap;
        margin: 0;
    }
    .sort-order-select-mobile {
        flex: 1;
        min-width: 0;
        max-width: 160px;
    }

    .mobile-search-box {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px;
        margin-bottom: 8px;
        background: #f0f2f5;
        border-radius: 10px;
    }
    .mobile-search-input-row {
        position: relative;
        display: flex;
        align-items: center;
    }
    .mobile-search-input-row i.ti-search {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #8696a0;
        font-size: 18px;
        pointer-events: none;
    }
    .mobile-search-input-row input {
        flex: 1;
        min-width: 0;
        padding: 10px 12px 10px 40px;
        border-radius: 8px;
        border: none;
        background: #fff;
        font-size: 15px;
        color: #111b21;
        outline: none;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .mobile-search-input-row input::placeholder {
        color: #8696a0;
    }
    .mobile-search-input-row .clear-search {
        flex-shrink: 0;
        background: #8696a0;
        border: none;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
        cursor: pointer;
        padding: 0;
    }
    .mobile-search-input-row .mobile-filter-menu-btn {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: none;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #54656f;
        font-size: 18px;
        cursor: pointer;
        padding: 0;
    }
    .mobile-search-input-row .mobile-filter-menu-btn:hover,
    .mobile-search-input-row .mobile-filter-menu-btn:active {
        background: #e9edef;
        color: #111b21;
    }
    .mobile-filter-dropdown {
        display: none;
        position: absolute;
        left: 12px;
        right: 12px;
        top: 100%;
        margin-top: 4px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        z-index: 1000;
        padding: 12px;
        border: 1px solid #e9edef;
    }
    .mobile-filter-dropdown.show {
        display: block;
    }
    .mobile-search-filter-container {
        position: relative;
    }
    .mobile-search-and-menu-wrapper {
        position: relative;
    }
    .mobile-filter-dropdown-inner {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .mobile-filter-dropdown-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .mobile-filter-dropdown-item .sort-order-select-mobile,
    .mobile-filter-dropdown-item .filter-btn-mobile {
        width: 100%;
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 8px;
        border: 1px solid #e9edef;
        background: #fff;
    }
    .mobile-message-sort-row {
        display: none; /* Hidden for now */
    }
    .mobile-message-sort-row .mobile-sort-label {
        font-size: 12px;
        color: #667781;
    }
    .mobile-message-sort-row .sort-order-select-mobile {
        flex: 1;
        min-width: 0;
        max-width: 140px;
        padding: 6px 10px;
        font-size: 13px;
        border-radius: 8px;
        border: 1px solid #e9edef;
        background: #fff;
    }

    .mobile-filter-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar */
    }
    
    .mobile-filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .mobile-filter-tab {
        padding: 6px 12px;
        border-radius: 16px;
        background: #f0f2f5;
        border: none;
        font-size: 13px;
        color: #54656f;
        white-space: nowrap;
        font-weight: 500;
        transition: all 0.2s;
    }

    .mobile-filter-tab.active {
        background: #dcf8c6; /* WA Green-ish tint */
        color: #008069;
        background: #e7fce3;
    }
    
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .header-icon-btn {
        width: 44px;
        height: 44px;
    }
    
    .filter-btn {
        padding: 10px 16px;
        min-height: 44px;
    }
    
    .header-tab {
        min-height: 44px;
        padding: 10px 16px;
    }
    
    /* Remove hover effects that don't work well on touch */
    .chat-item:hover {
        background: transparent;
    }
    
    .chat-item:active {
        background: #f5f7fa;
    }
    
    .chat-item.active {
        background: var(--soft-blue);
    }
}
/* ============ Spam Score Badge ============ */
.spam-score-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.spam-score-badge .spam-icon {
    font-size: 16px;
}

.spam-score-badge .spam-label {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
}

.spam-score-badge .spam-counter {
    font-size: 13px;
    font-weight: 700;
}

.spam-score-badge.level-safe {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.spam-score-badge.level-warning {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
    animation: pulse-warning 2s infinite;
}

.spam-score-badge.level-danger {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
    animation: pulse-danger 1.5s infinite;
}

.spam-score-tooltip {
    display: none;
    position: absolute;
    top: 110%;
    right: 0;
    min-width: 260px;
    background: #1f2937;
    color: #f3f4f6;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 9999;
}

.spam-score-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: #1f2937;
    transform: rotate(45deg);
    border-radius: 2px;
}

.spam-score-badge:hover .spam-score-tooltip {
    display: block;
}

.spam-score-tooltip .tooltip-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.spam-score-tooltip .tooltip-bar {
    height: 6px;
    background: #374151;
    border-radius: 3px;
    margin: 8px 0;
    overflow: hidden;
}

.spam-score-tooltip .tooltip-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background 0.3s;
}

@keyframes pulse-warning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

@keyframes pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
</style>
@endpush

@section('content')
<div class="inbox-wrapper">
        <!-- Header Bar -->
    <div class="inbox-header">
        <!-- Mobile Menu Button (visible on mobile only) -->
        <button class="mobile-menu-btn" id="mobile-menu-btn" title="Open menu">
            <i class="ti ti-menu-2"></i>
        </button>
        
        <!-- WABA Selector Removed for Merged View -->
        
        <div class="header-search">
            <i class="ti ti-search"></i>
            <input type="text" placeholder="Find anything..." id="search-input">
        </div>
        
        <div class="header-filters">
            <select id="conversation-sort-order" class="sort-order-select" title="Urutan daftar percakapan">
                <option value="desc">Terbaru dulu</option>
                <option value="asc">Terlama dulu</option>
            </select>
            @if(isset($package_type) && $package_type === \App\Enums\PackageType::DEDICATED)
                <button class="filter-btn" id="filter-contact-btn" data-active="false">
                    <i class="ti ti-address-book"></i> Only Contacts
                </button>
            @endif
            <button class="filter-btn" style="display:none">
                <i class="ti ti-filter"></i> Filter
                <span class="badge" id="unread-count">0</span>
            </button>
        </div>
        
        <div class="header-tabs">
            <button class="header-tab active" data-status="all">All</button>
            <button class="header-tab" data-status="open">Active</button>
            <button class="header-tab" data-status="closed">Closed</button>
        </div>
        
        <div class="header-tabs" style="margin-left: 12px; border-left: 1px solid var(--border-soft); padding-left: 12px;">
            <button class="header-tab active" data-read-status="all">
                All <span class="count-badge" id="count-all">0</span>
            </button>
            <button class="header-tab" data-read-status="read">
                Read <span class="count-badge" id="count-read">0</span>
            </button>
            <button class="header-tab" data-read-status="unread">
                Unread <span class="count-badge" id="count-unread">0</span>
            </button>
            <button class="header-tab" data-read-status="unreplied">
                Unreplied <span class="count-badge" id="count-unreplied">0</span>
            </button>
        </div>
        
        <div class="header-actions">
            @if(config('judol.enabled'))
            <div class="spam-score-badge level-safe" id="spam-score-badge"
                 data-count="{{ $judol_violations_24h }}"
                 data-limit="{{ $judol_violation_limit }}">
                <i class="ti ti-shield-check spam-icon"></i>
                <span class="spam-label">Pelanggaran</span>
                <span class="spam-counter" id="spam-counter">{{ $judol_violations_24h }}/{{ $judol_violation_limit }}</span>
                <div class="spam-score-tooltip">
                    <div class="tooltip-title">
                        <i class="ti ti-alert-triangle"></i> Status Konten
                    </div>
                    <div>Akun Anda akan dinonaktifkan jika mengirim <strong>{{ $judol_violation_limit }}</strong> pesan terlarang dalam 24 jam.</div>
                    <div class="tooltip-bar">
                        <div class="tooltip-bar-fill" id="spam-bar-fill"></div>
                    </div>
                    <div id="spam-tooltip-detail" style="font-size:11px; opacity:0.7;"></div>
                </div>
            </div>
            @endif
            <span id="connection-status" class="connection-badge offline">
                <i class="ti ti-wifi-off"></i> Offline
            </span>
            <button class="header-icon-btn" id="sound-toggle-btn" title="Toggle Sound">
                <i class="ti ti-volume"></i>
            </button>
            <button class="header-icon-btn">
                <i class="ti ti-dots-vertical"></i>
            </button>
        </div>
    </div>

    <!-- Mobile Overlay (for closing drawer) -->
    <div class="mobile-overlay" id="mobile-overlay"></div>
    
    <!-- 3-Panel Container -->
    <div class="inbox-panels">
        <!-- Left Panel - Chat List -->
        <div class="panel-left" id="panel-left">
            <div class="chat-list-header">
                <span class="chat-list-title">Conversations</span>
                <span class="chat-list-count" id="chat-count">0</span>
            </div>
            
            <!-- Mobile Search & Filters (Sticky) -->
            <div class="mobile-search-filter-container">
                <div class="mobile-search-and-menu-wrapper">
                    <div class="mobile-search-box">
                        <div class="mobile-search-input-row">
                            <i class="ti ti-search"></i>
                            <input type="text" id="mobile-search-input" placeholder="Search chats...">
                            <button class="clear-search" id="mobile-clear-search" style="display:none"><i class="ti ti-x"></i></button>
                            <button type="button" class="mobile-filter-menu-btn" id="mobile-filter-menu-btn" title="Urutan & filter">
                                <i class="ti ti-dots-vertical"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mobile-filter-dropdown" id="mobile-filter-dropdown">
                    <div class="mobile-filter-dropdown-inner">
                        <div class="mobile-filter-dropdown-item">
                            <label class="mobile-sort-label">Urutan daftar</label>
                            <select id="conversation-sort-order-mobile" class="sort-order-select sort-order-select-mobile" title="Urutan daftar percakapan">
                                <option value="desc">Terbaru dulu</option>
                                <option value="asc">Terlama dulu</option>
                            </select>
                        </div>
                        <div class="mobile-filter-dropdown-item" id="mobile-urutan-pesan-wrap" style="display:none">
                            <label class="mobile-sort-label">Urutan pesan</label>
                            <select id="message-sort-order-mobile" class="sort-order-select sort-order-select-mobile" title="Urutan pesan">
                                <option value="asc">Terlama dulu</option>
                                <option value="desc">Terbaru dulu</option>
                            </select>
                        </div>
                        @if(isset($package_type) && $package_type === \App\Enums\PackageType::DEDICATED)
                        <div class="mobile-filter-dropdown-item">
                            <button type="button" class="filter-btn filter-btn-mobile w-100" id="filter-contact-btn-mobile" data-active="false">
                                <i class="ti ti-address-book"></i> Only Contacts
                            </button>
                        </div>
                        @endif
                    </div>
                </div>
                </div>
                <div class="mobile-filter-tabs">
                    <button class="mobile-filter-tab active" data-filter="all">
                        All <span class="count-badge" id="mobile-count-all">0</span>
                    </button>
                    <button class="mobile-filter-tab" data-filter="unread">
                        Unread <span class="count-badge" id="mobile-count-unread">0</span>
                    </button>
                    <button class="mobile-filter-tab" data-filter="read">
                        Read <span class="count-badge" id="mobile-count-read">0</span>
                    </button>
                    <button class="mobile-filter-tab" data-filter="unreplied">
                        Unreplied <span class="count-badge" id="mobile-count-unreplied">0</span>
                    </button>
                    <button class="mobile-filter-tab" data-filter="closed">Closed</button>
                </div>
            </div>

            <div class="chat-list" id="chat-list">
                <div class="loading-state">
                    <div class="spinner"></div>
                    <span style="color: var(--text-muted); font-size: 13px;">Loading chats...</span>
                </div>
            </div>
        </div>

        <!-- Center Panel - Chat Window -->
        <div class="panel-center" id="panel-center">
            <div class="empty-state" id="empty-chat">
                <div class="empty-state-icon">
                    <i class="ti ti-message-circle"></i>
                </div>
                <h5>Select a conversation</h5>
                <p>Choose a chat from the list to start messaging</p>
            </div>
            
            <div id="active-chat">
                <div class="chat-window-header">
                    <!-- Mobile Back Button -->
                    <button class="mobile-back-btn" id="mobile-back-btn" title="Back to chats">
                        <i class="ti ti-arrow-left"></i>
                    </button>
                    <div class="chat-window-user">
                        <div class="chat-window-avatar" id="chat-avatar">?</div>
                        <div class="chat-window-info">
                            <h6 id="chat-name">-</h6>
                            <span id="chat-phone" class="tap-to-copy" title="Klik untuk menyalin nomor">-</span>
                        </div>
                    </div>
                    <div class="chat-window-actions">
                        <select id="message-sort-order" class="sort-order-select sort-order-select-sm" title="Urutan pesan">
                            <option value="asc">Terlama dulu</option>
                            <option value="desc">Terbaru dulu</option>
                        </select>
                        <button class="header-icon-btn" id="btn-assign">
                            <i class="ti ti-user-plus"></i>
                        </button>
                        <button class="header-icon-btn dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="ti ti-dots-vertical"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#"><i class="ti ti-check me-2"></i>Close Chat</a></li>
                            <li><a class="dropdown-item text-danger" href="#"><i class="ti ti-trash me-2"></i>Delete</a></li>
                        </ul>
                    </div>
                </div>
                
                <div class="chat-messages" id="chat-messages"></div>
                
                <!-- Desktop Emoji Picker Container -->
                <!-- Unified Emoji Picker Container -->
                <div class="emoji-picker" id="emoji-picker" style="display: none;">
                    <!-- Emojis will be populated here by JS -->
                </div>

                <div class="chat-input-wrapper">
                    <!-- Reply quote bar (tampil saat user klik Balas pada suatu pesan) -->
                    <div id="reply-quote-bar" class="reply-quote-bar" style="display: none;">
                        <div class="reply-quote-bar-inner">
                            <div class="reply-quote-bar-content">
                                <span class="reply-quote-bar-label">Balas:</span>
                                <span class="reply-quote-bar-body" id="reply-quote-bar-body"></span>
                            </div>
                            <button type="button" class="reply-quote-bar-cancel btn btn-link btn-sm p-0" id="reply-quote-bar-cancel" title="Batal"><i class="ti ti-x"></i></button>
                        </div>
                    </div>
                    <!-- Quick Reply Autocomplete Overlay -->
                    <div id="qr-autocomplete" class="qr-autocomplete" style="display: none;"></div>

                    <div class="chat-input-container">
                        <div class="input-actions">
                            <!-- Unified Toggle -->
                            <button class="input-action-btn" id="emoji-toggle-btn" title="Emoji"><i class="ti ti-mood-smile"></i></button>

                            <!-- Quick Reply Button -->
                            <button class="input-action-btn" id="quick-reply-btn" title="Quick Reply"><i class="ti ti-bolt"></i></button>

                            <button class="input-action-btn" id="btn-attach" title="Attach file" onclick="document.getElementById('media-file-input').click()">
                                <i class="ti ti-paperclip"></i>
                            </button>
                            <input type="file" id="media-file-input" hidden 
                                accept="image/jpeg,image/png,video/mp4,video/3gpp,audio/mpeg,audio/ogg,audio/aac,audio/mp4,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv">
                        </div>
                        <textarea class="chat-input" id="message-input" placeholder="Type a message..." rows="1"></textarea>
                        <button class="send-btn" id="send-btn">
                            <i class="ti ti-send"></i>
                        </button>
                    </div>
                </div>
            </div>
            </div>

        <!-- Media Upload Modal -->
        <div class="modal fade" id="media-upload-modal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <h5 class="modal-title"><i class="ti ti-photo me-2"></i>Send Media</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div id="media-preview-container" style="text-align:center;margin-bottom:16px"></div>
                        <div class="mb-3">
                            <input type="text" class="form-control" id="media-caption" placeholder="Add a caption..." maxlength="1024">
                        </div>
                        <div id="upload-progress-container" style="display:none">
                            <div class="progress" style="height:6px">
                                <div class="progress-bar" id="upload-progress-bar" style="width:0%"></div>
                            </div>
                            <div class="text-center mt-2" style="font-size:13px;color:#6c757d">
                                <span id="upload-progress-text">Uploading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="btn-send-media" disabled>
                            <i class="ti ti-send me-1"></i>Send
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Image Lightbox -->
        <div id="image-lightbox" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:9999;align-items:center;justify-content:center">
            <img id="lightbox-image" src="" style="max-width:90%;max-height:90%;border-radius:8px">
            <button onclick="closeLightbox()" style="position:absolute;top:20px;right:20px;background:transparent;border:none;color:white;font-size:24px;cursor:pointer">
                <i class="ti ti-x"></i>
            </button>
        </div>

        <!-- Right Panel - Info Sidebar -->
        <div class="panel-right" id="panel-right">
            <div class="info-header">
                <h6>Chat Details</h6>
                <button class="header-icon-btn" style="width:32px;height:32px" onclick="$('#panel-right').hide()">
                    <i class="ti ti-x"></i>
                </button>
            </div>
            
            <div class="info-section">
                <div class="info-section-title">Customer</div>
                <div class="customer-card" style="display:block;padding:16px;">
                    <div style="text-align:center;margin-bottom:12px;">
                        <div class="avatar" id="info-avatar" style="width:64px;height:64px;margin:0 auto 10px;font-size:24px;">?</div>
                        <h6 id="info-phone" class="tap-to-copy" style="margin:0;color:var(--text-muted);font-size:14px;" title="Klik untuk menyalin nomor">-</h6>
                    </div>
                    
                    <div class="mb-2">
                        <label style="font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:4px;display:block">Name</label>
                        <input type="text" class="form-control form-control-sm" id="contact-name" placeholder="Contact Name">
                    </div>
                    
                    <div class="mb-2">
                        <label style="font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:4px;display:block">Email</label>
                        <input type="email" class="form-control form-control-sm" id="contact-email" placeholder="Email Address">
                    </div>

                    <div class="mb-3">
                        <label style="font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:4px;display:block">Tags</label>
                        <select class="form-select form-select-sm" id="contact-tags" multiple="multiple" style="width:100%"></select>
                    </div>

                    <button class="btn btn-primary btn-sm w-100" id="save-contact-btn">
                        <i class="ti ti-device-floppy me-1"></i>Save Contact
                    </button>
                </div>
            </div>
            
            <div class="info-section">
                <div class="info-section-title">Response Window</div>
                <div class="response-window-card" id="response-window">
                    <div class="label">24-Hour Window</div>
                    <div class="status">Expired</div>
                </div>
            </div>
            
            <div class="info-section">
                <div class="info-section-title">Rating</div>
                <div class="rating-stars">
                    <i class="ti ti-star-filled"></i>
                    <i class="ti ti-star-filled"></i>
                    <i class="ti ti-star-filled"></i>
                    <i class="ti ti-star-filled empty"></i>
                    <i class="ti ti-star-filled empty"></i>
                </div>
            </div>
            
            <div class="info-section">
                <div class="info-section-title">Notes</div>
                <textarea class="note-textarea" placeholder="Add notes about this customer..." id="note-textarea"></textarea>
                <button class="save-note-btn" id="save-note-btn">Save Note</button>
            </div>
        </div>
    </div>
    </div>
    <!-- Quick Reply Modal -->
    <div class="modal fade" id="quick-reply-modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header border-0 pb-0 d-flex align-items-center">
                    <h5 class="modal-title m-0"><i class="ti ti-bolt me-2"></i>Quick Replies</h5>
                    <button class="btn btn-sm btn-primary ms-auto me-3" id="qr-create-btn"><i class="ti ti-plus"></i> New</button>
                    <button type="button" class="btn-close m-0" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- VIEW: LIST -->
                    <div id="qr-view-list">
                        <!-- Search & Filter -->
                        <div class="d-flex gap-2 mb-3">
                            <div class="position-relative flex-grow-1">
                                <i class="ti ti-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
                                <input type="text" class="form-control ps-5" id="qr-search" placeholder="Search templates or shortcuts...">
                            </div>
                            <select class="form-select w-auto" id="qr-category-filter">
                                <option value="">All Categories</option>
                            </select>
                        </div>

                        <!-- Template List -->
                        <div class="list-group list-group-flush border rounded overflow-auto" style="max-height: 300px;" id="qr-list">
                            <!-- Items injected by JS -->
                            <div class="text-center p-4 text-muted">
                                <i class="ti ti-loader ti-spin fs-2 mb-2"></i>
                                <p>Loading templates...</p>
                            </div>
                        </div>

                        <!-- Preview & Edit Area -->
                        <div class="mt-3 p-3 bg-light rounded border" id="qr-preview-area" style="display:none">
                            <label class="small fw-bold text-muted mb-2">Preview & Edit</label>
                            <textarea class="form-control mb-2" id="qr-preview-text" rows="4"></textarea>
                            <div id="qr-preview-interactive" class="border rounded p-3 mb-2 bg-white" style="display:none; min-height: 100px;"></div>
                            
                            <!-- Dynamic Variables Inputs -->
                            <div id="qr-vars-container" class="row g-2 mb-2"></div>

                            <div class="d-flex justify-content-end gap-2">
                                <button class="btn btn-sm btn-light" id="qr-copy-btn"><i class="ti ti-copy me-1"></i>Copy</button>
                                <button class="btn btn-sm btn-primary" id="qr-use-btn"><i class="ti ti-check me-1"></i>Use Template</button>
                            </div>
                        </div>
                    </div>

                    <!-- VIEW: FORM (Hidden by default) -->
                    <div id="qr-view-form" class="d-none">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6 class="mb-0 fw-bold" id="qr-form-title">Create Quick Reply</h6>
                            <button class="btn btn-sm btn-light btn-icon" id="qr-form-back"><i class="ti ti-arrow-left"></i> Back</button>
                        </div>
                        
                        <form id="qr-form">
                            <input type="hidden" id="qr-id">
                            <div class="mb-3">
                                <label class="form-label small text-muted">Media (Optional)</label>
                                <div class="input-group input-group-sm">
                                    <input type="file" class="form-control" id="qr-input-file" accept="image/*,video/*,video/mp4,audio/*,application/pdf">
                                    <button class="btn btn-outline-secondary" type="button" id="qr-btn-clear-media" style="display:none"><i class="ti ti-x"></i></button>
                                </div>
                                <div id="qr-media-preview" class="mt-2" style="display:none"></div>
                                <input type="hidden" id="qr-media-url">
                                <input type="hidden" id="qr-media-id">
                                <input type="hidden" id="qr-media-type">
                                <input type="hidden" id="qr-media-filename">
                            </div>
                            <div class="mb-3">
                                <label class="form-label small text-muted">Shortcut (Optional)</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text">/</span>
                                    <input type="text" class="form-control" id="qr-input-shortcut" placeholder="e.g. thanks">
                                </div>
                            </div>
                            <div class="mb-3">
                                 <label class="form-label small text-muted">Category</label>
                                 <input type="text" class="form-control form-control-sm" id="qr-input-category" list="qr-category-list" placeholder="e.g. Greeting">
                                 <datalist id="qr-category-list"></datalist>
                            </div>
                            <div class="mb-3">
                                <label class="form-label small text-muted">Message Content</label>
                                <textarea class="form-control" id="qr-input-content" rows="4" required placeholder="Type your message... use {name} for customer name"></textarea>
                                <div class="form-text small">Variables: {name}, {phone}, {agent_name}</div>
                            </div>
                            <div class="d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-sm btn-danger d-none" id="qr-btn-delete">Delete</button>
                                <button type="submit" class="btn btn-sm btn-primary" id="qr-btn-save">Save Template</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
<script>
(function() {
    // ============================================
    // State
    // ============================================
    let currentAssignmentId = null;
    window.currentWabaId = null; // Set when chat is opened
    let allWabaIds = [];      // For Pusher subscription
    let replyingTo = null;    // { wa_message_id, body, sender_name } saat user klik Balas
    let currentStatus = 'all';
    let pusherChannels = [];  // Track subscriptions
    const inboxRealtimeDebug = {{ config('app.debug') ? 'true' : 'false' }};
    function logInboxRealtime(source, eventName, data) {
        if (!inboxRealtimeDebug) return;
        console.log('[Inbox RT]', source, eventName, data);
    }
    let allChats = [];
    let searchQuery = '';
    let serviceWindow = null;
    const isSharedPackage = {{ isset($package_type) && $package_type === \App\Enums\PackageType::SHARED ? 'true' : 'false' }};

    // Read/Unread Filter State
    let currentReadStatus = 'all'; // all | read | unread
    let chatCounts = { total: 0, read: 0, unread: 0 };

    // Sort order: percakapan (desc=terbaru dulu), pesan (asc=terlama dulu)
    const STORAGE_CONVERSATION_SORT = 'clientInbox_conversationSortOrder';
    const STORAGE_MESSAGE_SORT = 'clientInbox_messageSortOrder';
    let conversationSortOrder = (localStorage.getItem(STORAGE_CONVERSATION_SORT) || 'desc');
    let messageSortOrder = (localStorage.getItem(STORAGE_MESSAGE_SORT) || 'asc');

    // Pagination / infinite scroll (WhatsApp-style list)
    let conversationListPage = 1;
    let hasMoreConversations = false;
    let loadingMoreConversations = false;
    const CONVERSATIONS_PER_PAGE = 20;

    // Scroll position preservation
    let chatListScrollPosition = 0;

    function saveScrollPosition() {
        const chatListEl = document.getElementById('chat-list');
        if (chatListEl) {
            chatListScrollPosition = chatListEl.scrollTop;
        }
    }

    function restoreScrollPosition() {
        const chatListEl = document.getElementById('chat-list');
        if (chatListEl && chatListScrollPosition > 0) {
            chatListEl.scrollTop = chatListScrollPosition;
        }
    }


    // DOM
    const chatList = $('#chat-list');
    const chatMessages = $('#chat-messages');
    const chatMessagesEl = document.getElementById('chat-messages');
    // Smart auto-scroll state: true = follow latest, false = biarkan user baca atas
    let autoScrollEnabled = true;
    const SCROLL_THRESHOLD_PX = 120;
    const messageInput = $('#message-input');

    // Infinite scroll: load more conversations when near bottom
    chatList.on('scroll', function() {
        const el = this;
        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 150) {
            loadMoreConversations();
        }
    });

    // Smart auto-scroll untuk area pesan
    if (chatMessagesEl) {
        chatMessagesEl.addEventListener('scroll', function () {
            const el = this;
            const distanceFromBottom = el.scrollHeight - (el.scrollTop + el.clientHeight);
            // Jika user menjauh lebih dari threshold, matikan auto-scroll
            autoScrollEnabled = distanceFromBottom < SCROLL_THRESHOLD_PX;
        });
    }

     // Colors for avatars
    const avatarColors = ['green', 'blue', 'purple', 'orange', 'pink'];

    // Sound State
    let isSoundEnabled = localStorage.getItem('chat_sound_enabled') != 'false'; // Default true
    const soundToggleBtn = $('#sound-toggle-btn');
    
    function updateSoundIcon() {
        soundToggleBtn.html(isSoundEnabled ? '<i class="ti ti-volume"></i>' : '<i class="ti ti-volume-off"></i>');
        soundToggleBtn.attr('title', isSoundEnabled ? 'Mute Sound' : 'Enable Sound');
    }
    updateSoundIcon();
    
    soundToggleBtn.on('click', function() {
        isSoundEnabled = !isSoundEnabled;
        localStorage.setItem('chat_sound_enabled', isSoundEnabled);
        updateSoundIcon();
        showToast(isSoundEnabled ? 'Sound enabled' : 'Sound muted', 'success');
    });

    // ============================================
    // Mobile Navigation (CSS-only toggle)
    // ============================================
    const panelLeft = $('#panel-left');
    const mobileOverlay = $('#mobile-overlay');
    
    // Helper to toggle body class for fullscreen chat
    function toggleMobileChat(show) {
        if (window.innerWidth < 768) {
            if (show) {
                $('body').addClass('mobile-chat-open');
            } else {
                $('body').removeClass('mobile-chat-open');
            }
        } else {
            $('body').removeClass('mobile-chat-open');
        }
    }
    
    function openMobileDrawer() {
        toggleMobileChat(false); // Show navbar when drawer opens
        panelLeft.addClass('open');
        mobileOverlay.addClass('show');
    }
    
    function closeMobileDrawer() {
        panelLeft.removeClass('open');
        mobileOverlay.removeClass('show');
        
        // If we have an active chat, maximize again or ensure maximized
        if (currentAssignmentId) {
             toggleMobileChat(true);
        }
    }
    
    // Mobile menu button
    $('#mobile-menu-btn').on('click', function(e) {
        e.preventDefault();
        openMobileDrawer();
    });
    
    // Close on overlay click
    mobileOverlay.on('click', function() {
        closeMobileDrawer();
    });
    
    // Mobile back button (in chat header)
    // #chat-phone & #info-phone: klik untuk menyalin nomor ke clipboard (mobile + desktop)
    function copyPhoneToClipboard(text) {
        if (!text || text === '-') return;
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function() {
                showToast('Nomor disalin', 'success');
            }).catch(function() {
                copyPhoneFallback(text);
            });
        } else {
            copyPhoneFallback(text);
        }
    }
    $('#chat-phone').on('click', function() {
        copyPhoneToClipboard($(this).text().trim());
    });
    $('#info-phone').on('click', function() {
        copyPhoneToClipboard($(this).text().trim());
    });
    function copyPhoneFallback(text) {
        const input = document.createElement('input');
        input.value = text;
        input.setAttribute('readonly', '');
        input.style.position = 'absolute';
        input.style.left = '-9999px';
        document.body.appendChild(input);
        input.select();
        try {
            document.execCommand('copy');
            showToast('Nomor disalin', 'success');
        } catch (e) {}
        document.body.removeChild(input);
    }

    $('#mobile-back-btn').on('click', function(e) {
        e.preventDefault();
        openMobileDrawer();
        // Refresh daftar chat agar status read/unread dan filter tampil benar
        renderChatList();
    });

    // ============================================
    // Initialize
    // ============================================
    // Initialize Select2 for tags
    $('#contact-tags').select2({
        theme: 'bootstrap-5',
        placeholder: 'Add tags...',
        tags: true,
        tokenSeparators: [',', ' ']
    });

    // Save Contact Button Handler
    $('#save-contact-btn').on('click', function() {
        if (!currentAssignmentId) return;
        
        const btn = $(this);
        const name = $('#contact-name').val().trim();
        const email = $('#contact-email').val().trim();
        const tags = $('#contact-tags').val();

        if (!name) {
            showToast('Name is required', 'error');
            return;
        }

        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i>Saving...');

        $.post(`{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/save-contact`, {
            _token: '{{ csrf_token() }}',
            name: name,
            email: email,
            tags: tags
        })
        .done(function(response) {
            showToast('Contact saved successfully', 'success');
            // Update UI with new name if changed
            $('#chat-name').text(name);
            updateChatInList(currentAssignmentId, { 
                type: 'system', 
                timestamp: new Date().toISOString(),
                // Mock message object structure for updateChatInList
                // But we mainly want to update the name in the list, 
                // updateChatInList functionality might need tweak or we reload list.
                // For now, let's just reload the relevant chat item's name directly in DOM
                // because updateChatInList expects a message object to update preview/time/badge.
            });
            
            // Update name in chat list directly
            $(`.chat-item[data-id="${currentAssignmentId}"] .chat-name`).text(name);
            
            // Re-update info panel to ensure sync
            // response.contact contains the updated contact object
            // We can rely on input values as they match what was saved
        })
        .fail(function(xhr) {
            const msg = xhr.responseJSON?.message || 'Failed to save contact';
            showToast(msg, 'error');
        })
        .always(function() {
            btn.prop('disabled', false).html('<i class="ti ti-device-floppy me-1"></i>Save Contact');
        });
    });

    $(document).ready(function() {
        // Saat refresh: pastikan panel-center tidak aktif di mobile (hanya tampilkan daftar chat)
        $('body').removeClass('mobile-chat-open');
        if (window.innerWidth < 768) {
            panelLeft.removeClass('open');
        }
        
        initInbox();
        
        // Handle window resize
        $(window).resize(function() {
            if (window.innerWidth >= 768) {
                toggleMobileChat(false);
            } else {
                 if (currentAssignmentId && !panelLeft.hasClass('open')) {
                     toggleMobileChat(true);
                 }
            }
        });
        
        // Realtime updates via Pusher (no polling needed)
        // Chat list is refreshed when Pusher events are received
        
        // Restore active conversation from localStorage after chat list loads (hanya di desktop)
        // Di mobile, setelah refresh tetap tampilkan daftar chat saja, jangan auto-buka chat
        if (window.innerWidth >= 768) {
            const savedConvoId = localStorage.getItem('client_active_conversation');
            if (savedConvoId) {
                pendingOpenConvo = parseInt(savedConvoId);
            }
        }

        // Initialize Autocomplete
        initQuickReplyAutocomplete();
    });
    
    let pendingOpenConvo = null;

    // Initialize Inbox: subscribe realtime dulu (dedicated & self_service), lalu load WABA & chat list
    function initInbox() {
        // Subscribe ke channel client ASAP agar pesan realtime langsung diterima (tanpa tunggu WABA list)
        subscribePusher();

        $.get('{{ route("client.inbox.waba-list") }}')
            .done(response => {
                const results = response.results || [];
                allWabaIds = results.map(r => r.id);

                if (allWabaIds.length === 0) {
                    chatList.html('<div class="empty-state"><p>No WABA assigned</p></div>');
                    return;
                }

                // Counts tab (count-all, count-read, count-unread) dan chat-count
                updateChatCounts();
                // Load all chats (merged)
                loadChatList();
            })
            .fail(() => {
                chatList.html('<div class="empty-state"><p>Failed to load WABA list</p></div>');
            });
    }

    // Removed wabaSelect change handler



    let mobileSearchQuery = '';
    let mobileFilterStatus = 'all'; // 'all', 'unread', 'read', 'closed'
    
    // Feature State
    let onlyContactsFilter = false;
    let searchTimeout = null;

    // Init sort order dari localStorage (desktop + mobile)
    $('#conversation-sort-order').val(conversationSortOrder);
    $('#conversation-sort-order-mobile').val(conversationSortOrder);
    $('#message-sort-order').val(messageSortOrder);
    $('#message-sort-order-mobile').val(messageSortOrder);

    function applyConversationSortOrder(val) {
        conversationSortOrder = val;
        localStorage.setItem(STORAGE_CONVERSATION_SORT, conversationSortOrder);
        $('#conversation-sort-order').val(val);
        $('#conversation-sort-order-mobile').val(val);
        conversationListPage = 1;
        loadChatList();
    }

    // Urutan percakapan: ubah → simpan → reload list (desktop)
    $('#conversation-sort-order').on('change', function() {
        applyConversationSortOrder($(this).val());
    });
    // Mobile: tombol titik 3 → buka/tutup dropdown Urutan & Only Contacts
    $('#mobile-filter-menu-btn').on('click', function(e) {
        e.stopPropagation();
        $('#mobile-filter-dropdown').toggleClass('show');
    });
    $(document).on('click', function() {
        $('#mobile-filter-dropdown').removeClass('show');
    });
    $('#mobile-filter-dropdown').on('click', function(e) {
        e.stopPropagation();
    });
    // Tombol Only Contacts di dalam dropdown: handler di sini karena click tidak sampai ke document (stopPropagation)
    $('#mobile-filter-dropdown').on('click', '#filter-contact-btn-mobile', function(e) {
        e.stopPropagation();
        onlyContactsFilter = !onlyContactsFilter;
        updateContactFilterUI();
        loadChatList();
    });

    // Helper: Sort messages client-side
    function sortMessagesClientSide(messages, order) {
        return messages.sort((a, b) => {
            // Priority: timestamp_micro (float) / fallback timestamp_unix / fallback timestamp
            const tA = a.timestamp_micro ? parseFloat(a.timestamp_micro) : (a.timestamp_unix ? a.timestamp_unix : (new Date(a.timestamp).getTime() / 1000));
            const tB = b.timestamp_micro ? parseFloat(b.timestamp_micro) : (b.timestamp_unix ? b.timestamp_unix : (new Date(b.timestamp).getTime() / 1000));
            return order === 'desc' ? (tB - tA) : (tA - tB);
        });
    }

    // Urutan percakapan (mobile): sinkron dengan desktop
    $('#conversation-sort-order-mobile').on('change', function() {
        applyConversationSortOrder($(this).val());
    });

    // Urutan pesan: ubah → simpan → reload pesan chat aktif
    function applyMessageSortOrder(val) {
        messageSortOrder = val;
        localStorage.setItem(STORAGE_MESSAGE_SORT, messageSortOrder);
        $('#message-sort-order').val(val);
        $('#message-sort-order-mobile').val(val);
        if (currentAssignmentId) {
            chatMessages.html('<div class="loading-state"><div class="spinner"></div></div>');
            $.get(`{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/messages`, { sort_order: messageSortOrder })
                .done(response => {
                    let msgs = response.data || [];
                    msgs = sortMessagesClientSide(msgs, messageSortOrder);
                    renderMessages(msgs);
                })
                .fail(() => chatMessages.html('<div class="empty-state"><p>Gagal memuat pesan</p></div>'));
        }
    }
    $('#message-sort-order').on('change', function() {
        applyMessageSortOrder($(this).val());
    });
    $('#message-sort-order-mobile').on('change', function() {
        applyMessageSortOrder($(this).val());
    });

    // Contact Filter Toggle (Dedicated Only) — desktop + mobile
    function updateContactFilterUI() {
        const active = onlyContactsFilter;
        const style = active ? { 'background': '#eaf7ff', 'border-color': '#2e89ff', 'color': '#2e89ff' } : { 'background': '', 'border-color': '', 'color': '' };
        $('#filter-contact-btn').attr('data-active', active).css(style);
        $('#filter-contact-btn-mobile').attr('data-active', active).css(style);
    }
    $(document).on('click', '#filter-contact-btn, #filter-contact-btn-mobile', function() {
        onlyContactsFilter = !onlyContactsFilter;
        updateContactFilterUI();
        loadChatList();
    });
    updateContactFilterUI(); // sync initial state (desktop + mobile)

    // Search (Debounced Server-Side)
    $('#search-input').on('input', function() {
        searchQuery = $(this).val();
        
        if (searchTimeout) clearTimeout(searchTimeout);
        
        searchTimeout = setTimeout(() => {
            loadChatList();
        }, 500);
    });
    
    // Mobile Search (Sticky)
    $('#mobile-search-input').on('input', function() {
        searchQuery = $(this).val();
        
        if (searchQuery) {
            $('#mobile-clear-search').show();
        } else {
            $('#mobile-clear-search').hide();
        }
        
        if (searchTimeout) clearTimeout(searchTimeout);
        
        searchTimeout = setTimeout(() => {
            loadChatList();
        }, 500);
    });
    
    $('#mobile-clear-search').on('click', function() {
        $('#mobile-search-input').val('');
        searchQuery = '';
        $(this).hide();
        loadChatList();
    });
    
    // Mobile Filter Tabs
    $('.mobile-filter-tab').on('click', function() {
        $('.mobile-filter-tab').removeClass('active');
        $(this).addClass('active');
        mobileFilterStatus = $(this).data('filter');
        // Use server-side filtering for unread, client-side for read/closed
        loadChatList(true); // preserve scroll
    });

    // Status tabs (All, Active, Closed) - Desktop
    $('.header-tab[data-status]').on('click', function() {
        $('.header-tab[data-status]').removeClass('active');
        $(this).addClass('active');
        currentStatus = $(this).data('status');
        updateChatCounts();
        loadChatList();
    });

    // Read/Unread tabs (All, Read, Unread) - Desktop
    $('.header-tab[data-read-status]').on('click', function() {
        $('.header-tab[data-read-status]').removeClass('active');
        $(this).addClass('active');
        currentReadStatus = $(this).data('read-status');
        updateChatCounts();
        loadChatList();
    });

    // Update chat counts from dedicated endpoint (sesuai filter: status + read_status)
    function updateChatCounts() {
        let params = {};
        if (currentStatus != 'all') params.status = currentStatus;
        if (currentReadStatus != 'all') params.read_status = currentReadStatus;
        
        // Fetch basic counts (chat_count = jumlah sesuai filter, unread_count = global unread)
        $.get('{{ route("client.inbox.chat-count") }}', params)
            .done(response => {
                $('#chat-count').text(response.chat_count || 0);
                const unread = response.unread_count || 0;
                $('#unread-count').text(unread);
                updateFavicon(unread);
            });
        
        // Fetch detailed counts for filter badges
        $.get('{{ route("client.inbox.chat-counts") }}', params)
            .done(response => {
                chatCounts = response;
                // Update desktop counts
                $('#count-all').text(response.total || 0);
                $('#count-read').text(response.read || 0);
                $('#count-unread').text(response.unread || 0);
                $('#count-unreplied').text(response.unreplied || 0);
                // Update mobile counts
                $('#mobile-count-all').text(response.total || 0);
                $('#mobile-count-read').text(response.read || 0);
                $('#mobile-count-unread').text(response.unread || 0);
                $('#mobile-count-unreplied').text(response.unreplied || 0);
            })
            .fail(error => {
                console.error('Failed to fetch chat counts:', error);
            });
    }

    function loadChatList(preserveScroll = false) {
        if (preserveScroll) {
            saveScrollPosition();
        }
        
        chatList.html('<div class="loading-state"><div class="spinner"></div></div>');
        
        let url = '{{ route("client.inbox.conversations") }}';
        let params = {};
        
        if (currentStatus != 'all') params.status = currentStatus;
        if (onlyContactsFilter) params.only_contacts = 1;
        if (searchQuery) params.search = searchQuery;
        if (currentReadStatus != 'all') params.read_status = currentReadStatus;
        // Unread tab: default asc (terlama dulu) = tidak kirim; bila user pilih Terbaru dulu kirim sort_order=desc. All/Read: selalu kirim preferensi.
        const onUnreadTab = (currentReadStatus === 'unread' || mobileFilterStatus === 'unread');
        if (onUnreadTab) {
            if (conversationSortOrder === 'desc') params.sort_order = 'desc';
        } else {
            params.sort_order = conversationSortOrder;
        }
        
        // Mobile filter: kirim ke server agar data yang di-load sudah terfilter
        if (mobileFilterStatus === 'unread') {
            params.unread_only = 1;
        } else if (mobileFilterStatus === 'read') {
            params.read_status = 'read';
        } else if (mobileFilterStatus === 'unreplied') {
            params.read_status = 'unreplied';
        } else if (mobileFilterStatus === 'closed') {
            params.status = 'closed';
        }
        
        params.page = 1;
        params.per_page = CONVERSATIONS_PER_PAGE;
        
        $.get(url, params)
            .done(response => {
                allChats = response.data || [];
                conversationListPage = 1;
                hasMoreConversations = response.meta && response.meta.has_more === true;
                // Sinkronkan dropdown dengan pilihan user (desktop + mobile)
                $('#conversation-sort-order').val(conversationSortOrder);
                $('#conversation-sort-order-mobile').val(conversationSortOrder);
                renderChatList();
                appendListSentinel();
                
                if (preserveScroll) {
                    setTimeout(restoreScrollPosition, 50);
                }
                
                // Auto-open saved conversation after chat list loads
                if (pendingOpenConvo && allChats.find(c => c.id === pendingOpenConvo)) {
                    openChat(pendingOpenConvo);
                    pendingOpenConvo = null;
                }
            })
            .fail(() => {
                chatList.html('<div class="empty-state"><p>Failed to load chats</p></div>');
            });
    }

    function appendListSentinel() {
        chatList.find('#chat-list-sentinel').remove();
        if (hasMoreConversations) {
            chatList.append('<div id="chat-list-sentinel" style="height:20px;text-align:center;padding:8px 0;"></div>');
        }
    }

    function loadMoreConversations() {
        if (loadingMoreConversations || !hasMoreConversations) return;
        loadingMoreConversations = true;
        const nextPage = conversationListPage + 1;
        let url = '{{ route("client.inbox.conversations") }}';
        let params = { page: nextPage, per_page: CONVERSATIONS_PER_PAGE };
        const onUnreadTab = (currentReadStatus === 'unread' || mobileFilterStatus === 'unread');
        if (onUnreadTab) { if (conversationSortOrder === 'desc') params.sort_order = 'desc'; }
        else { params.sort_order = conversationSortOrder; }
        if (currentStatus != 'all') params.status = currentStatus;
        if (onlyContactsFilter) params.only_contacts = 1;
        if (searchQuery) params.search = searchQuery;
        if (currentReadStatus != 'all') params.read_status = currentReadStatus;
        if (mobileFilterStatus === 'unread') params.unread_only = 1;
        else if (mobileFilterStatus === 'read') params.read_status = 'read';
        else if (mobileFilterStatus === 'unreplied') params.read_status = 'unreplied';
        else if (mobileFilterStatus === 'closed') params.status = 'closed';
        $.get(url, params)
            .done(response => {
                const newChats = response.data || [];
                allChats = allChats.concat(newChats);
                conversationListPage = response.meta ? response.meta.current_page : nextPage;
                hasMoreConversations = response.meta && response.meta.has_more === true;
                appendChatItems(newChats);
                appendListSentinel();
            })
            .always(() => { loadingMoreConversations = false; });
    }

    function appendChatItems(chats) {
        if (chats.length === 0) return;
        const startIndex = allChats.length - chats.length;
        let html = '';
        chats.forEach((chat, i) => {
            const idx = startIndex + i;
            const active = chat.id === currentAssignmentId ? 'active' : '';
            const unassigned = !chat.is_assigned ? 'unassigned' : '';
            const initials = getInitials(chat.customer_name || chat.customer_number);
            const color = avatarColors[idx % avatarColors.length];
            const time = chat.last_message ? formatTime(chat.last_message.timestamp) : '';
            const preview = chat.last_message?.body || 'No messages yet';
            const unrepliedDot = chat.last_from === 'customer' ? '<span class="unreplied-dot" title="Belum dibalas"></span>' : '';
            html += `
                <div class="chat-item ${active} ${unassigned}" data-id="${chat.id}">
                    <div class="chat-avatar ${color}">${initials}</div>
                    <div class="chat-content">
                        <div class="chat-header-row">
                            <span class="chat-name">${escapeHtml(chat.customer_name || 'Unknown')}${unrepliedDot}</span>
                            <span class="chat-time">${time}</span>
                        </div>
                        <div class="chat-phone">${chat.customer_number}</div>
                        <div class="chat-preview">${escapeHtml(preview)}</div>
                        <div class="chat-badges">
                            <span class="source-badge">${chat.waba_pool?.account_name || 'Meta'}</span>
                            ${chat.agent ? `<span class="agent-badge">${escapeHtml(chat.agent.name)}</span>` : '<span class="agent-badge" style="background:#fef3c7;color:#d97706">Unassigned</span>'}
                            ${chat.status === 'closed' ? '<span class="source-badge" style="background:#fee2e2;color:#dc2626">Closed</span>' : ''}
                        </div>
                    </div>
                    ${chat.unread_count > 0 ? `<span class="unread-badge">${chat.unread_count}</span>` : ''}
                    <button class="chat-menu-btn"><i class="ti ti-dots"></i></button>
                </div>
            `;
        });
        chatList.find('#chat-list-sentinel').before(html);
        chatList.find('.chat-item').off('click').on('click', function() {
            openChat($(this).data('id'));
            closeMobileDrawer();
        });
    }

    function renderChatList() {
        let filtered = allChats;
        const isMobile = window.innerWidth < 768; // Check for mobile viewport
        
        // Desktop Search is now Server-Side so `filtered` already contains search results
        // If searchQuery is present from server, we just render what we got.
        
        // Mobile filters (Client-side mainly for Unread/Read tabs)
        if (isMobile) {
            // Apply Mobile-specific Status Filter (on top of whatever we fetched)
            if (mobileFilterStatus === 'unread') {
                filtered = filtered.filter(c => (c.unread_count || 0) > 0);
            } else if (mobileFilterStatus === 'read') {
                filtered = filtered.filter(c => (c.unread_count || 0) === 0);
            } else if (mobileFilterStatus === 'unreplied') {
                filtered = filtered.filter(c => c.last_from === 'customer');
            } else if (mobileFilterStatus === 'closed') {
                filtered = filtered.filter(c => c.status === 'closed');
            }
        }

        if (filtered.length === 0) {
            chatList.html('<div class="empty-state"><p>No conversations</p></div>');
            return;
        }

        let html = '';
        filtered.forEach((chat, i) => {
            const active = chat.id === currentAssignmentId ? 'active' : '';
            const unassigned = !chat.is_assigned ? 'unassigned' : '';
            const initials = getInitials(chat.customer_name || chat.customer_number);
            const color = avatarColors[i % avatarColors.length];
            const time = chat.last_message ? formatTime(chat.last_message.timestamp) : '';
            const preview = chat.last_message?.body || 'No messages yet';

            const unrepliedDot = chat.last_from === 'customer' ? '<span class="unreplied-dot" title="Belum dibalas"></span>' : '';
            html += `
                <div class="chat-item ${active} ${unassigned}" data-id="${chat.id}">
                    <div class="chat-avatar ${color}">${initials}</div>
                    <div class="chat-content">
                        <div class="chat-header-row">
                            <span class="chat-name">${escapeHtml(chat.customer_name || 'Unknown')}${unrepliedDot}</span>
                            <span class="chat-time">${time}</span>
                        </div>
                        <div class="chat-phone">${chat.customer_number}</div>
                        <div class="chat-preview">${escapeHtml(preview)}</div>
                        <div class="chat-badges">
                            <span class="source-badge">${chat.waba_pool?.account_name || 'Meta'}</span>
                            ${chat.agent ? `<span class="agent-badge">${escapeHtml(chat.agent.name)}</span>` : '<span class="agent-badge" style="background:#fef3c7;color:#d97706">Unassigned</span>'}
                            ${chat.status === 'closed' ? '<span class="source-badge" style="background:#fee2e2;color:#dc2626">Closed</span>' : ''}
                        </div>
                    </div>
                    ${chat.unread_count > 0 ? `<span class="unread-badge">${chat.unread_count}</span>` : ''}
                    <button class="chat-menu-btn"><i class="ti ti-dots"></i></button>
                </div>
            `;
        });

        chatList.html(html);
        
        $('.chat-item').on('click', function() {
            openChat($(this).data('id'));
            closeMobileDrawer(); // Close drawer on mobile selection
        });
    }

    // Update single chat item in list and move to top (like WhatsApp)
    function updateChatInList(assignmentId, newMessage, direction) {
        const idToFind = parseInt(assignmentId);
        const chatIndex = allChats.findIndex(c => parseInt(c.id) === idToFind);
        
        console.log(`Updating Chat List: ID=${idToFind}, Index=${chatIndex}, direction=${direction}`);

        if (chatIndex === -1) {
            console.log('Chat not found in local list, reloading...');
            loadChatList();
            return;
        }

        const type = newMessage.type;
        let body = newMessage.body;
        
        if ((!body || body === '') && type === 'interactive') {
            const interactive = newMessage.interactive || {};
            body = interactive?.body?.text || interactive?.body || '';
            if (typeof body === 'object') body = '';
        }
        
        let previewText = body;

        if (!previewText || previewText === '') {
            const mediaLabels = {
                'image': '📷 Photo',
                'video': '🎥 Video',
                'audio': '🎵 Audio',
                'document': '📄 Document',
                'sticker': '🏷️ Sticker',
                'location': '📍 Location',
                'contacts': '👤 Contact',
                'interactive': '🔘 Interactive',
                'button': '🔘 Button Reply',
                'template': '📋 Template',
            };
            previewText = mediaLabels[type] || body || '[Media]';
        }

        const chat = allChats[chatIndex];
        chat.last_message = {
            body: previewText,
            timestamp: newMessage.timestamp,
            type: newMessage.type,
        };
        chat.last_message_at = newMessage.timestamp;

        const msgDirection = direction || newMessage.direction || null;
        if (msgDirection === 'incoming') {
            chat.last_from = 'customer';
        } else if (msgDirection === 'outgoing') {
            chat.last_from = 'agent';
        }
        
        const currentId = parseInt(currentAssignmentId);
        if (parseInt(chat.id) != currentId) {
            chat.unread_count = (chat.unread_count || 0) + 1;
            console.log(`Incremented unread for chat ${chat.id}: ${chat.unread_count}`);
        }
        
        const $chatItem = $(`.chat-item[data-id="${idToFind}"]`);
        
        if ($chatItem.length) {
            $chatItem.find('.chat-preview').text(previewText);
            
            const time = formatTime(newMessage.timestamp);
            $chatItem.find('.chat-time').text(time);
            
            if (parseInt(chat.id) != currentId && chat.unread_count > 0) {
                const $badge = $chatItem.find('.unread-badge');
                if ($badge.length) {
                    $badge.text(chat.unread_count);
                } else {
                    $chatItem.find('.chat-content').after(`<span class="unread-badge">${chat.unread_count}</span>`);
                }
            }

            const $name = $chatItem.find('.chat-name');
            if (chat.last_from === 'customer') {
                if (!$name.find('.unreplied-dot').length) {
                    $name.append('<span class="unreplied-dot" title="Belum dibalas"></span>');
                }
            } else {
                $name.find('.unreplied-dot').remove();
            }
            
            console.log('Chat item updated in place');
        } else {
            console.log('Chat item not in DOM, re-rendering list with scroll preservation');
            saveScrollPosition();
            renderChatList();
            setTimeout(restoreScrollPosition, 50);
        }
        
        updateChatCounts();
    }

    function openChat(assignmentId) {
        currentAssignmentId = assignmentId;
        replyingTo = null;
        updateReplyBar();
        toggleMobileChat(true); // Maximize on mobile
        // Persist to localStorage for page reload
        localStorage.setItem('client_active_conversation', assignmentId);
        
        $('.chat-item').removeClass('active');
        $(`.chat-item[data-id="${assignmentId}"]`).addClass('active');
        
        const chat = allChats.find(c => c.id === assignmentId);
        // Tandai sebagai read saat buka chat agar di daftar tidak lagi unread
        if (chat) {
            chat.unread_count = 0;
            $(`.chat-item[data-id="${assignmentId}"] .unread-badge`).remove();
            const totalUnread = allChats.reduce((sum, c) => sum + (c.unread_count || 0), 0);
            $('#unread-count').text(totalUnread);
            updateFavicon(totalUnread);
        }
        
        $('#empty-chat').hide();
        $('#active-chat').css('display', 'flex');
        $('#panel-right').addClass('active');
        chatMessages.html('<div class="loading-state"><div class="spinner"></div></div>');

        $.get(`{{ url('/client/inbox/conversations') }}/${assignmentId}/messages`, { sort_order: messageSortOrder })
            .done(response => {
                const assignment = response.assignment;
                let messages = response.data || [];
                // Sort client-side to ensure order matches user preference
                messages = sortMessagesClientSide(messages, messageSortOrder);
                
                serviceWindow = response.service_window;
                
                const initials = getInitials(assignment.customer_name || assignment.customer_number);
                $('#chat-avatar').text(initials);
                $('#chat-name').text(assignment.customer_name || assignment.customer_number);
                $('#chat-phone').text(formatPhone(assignment.customer_number));
                
                // Update action buttons
                let actionHtml = '';
                if (assignment.status === 'open') {
                    // actionHtml = `<button class="btn btn-secondary btn-sm" onclick="closeChat(${assignmentId})"><i class="ti ti-check me-1"></i>Close</button>`;
                } else {
                    actionHtml = `<button class="btn btn-success btn-sm" onclick="reopenChat(${assignmentId})"><i class="ti ti-refresh me-1"></i>Reopen</button>`;
                }
                $('#btn-assign').replaceWith(actionHtml);
                
                // Enable/disable input based on chat status
                if (assignment.status === 'closed') {
                    messageInput.prop('disabled', true).attr('placeholder', 'Reopen chat to reply...');
                    $('#send-btn').prop('disabled', true);
                } else {
                    messageInput.prop('disabled', false).attr('placeholder', 'Type a message...');
                    $('#send-btn').prop('disabled', false);
                }
                
                
                // Set currentWabaId from assignment for media uploads
                currentWabaId = assignment.waba_pool_id;

                updateInfoPanel(assignment);
                renderMessages(messages);
                // Fokus input agar keyboard tetap muncul (mobile) setelah chat terbuka
                setTimeout(function() { messageInput.focus(); }, 150);
            });
    }

    function renderMessages(messages) {
        if (messages.length === 0) {
            chatMessages.html('<div class="empty-state"><p>No messages yet</p></div>');
            return;
        }

        let html = '';
        let lastDate = null;

        messages.forEach(msg => {
            const msgDate = new Date(msg.timestamp).toDateString();
            
            if (lastDate != msgDate) {
                html += `<div class="date-divider"><span>${formatDate(msg.timestamp)}</span></div>`;
                lastDate = msgDate;
            }

            const direction = msg.direction;
            const isFailed = msg.status === 'failed';
            const statusIcon = direction === 'outgoing' ? (getStatusIcon(isFailed ? 'failed' : msg.status) + (isFailed ? getResendButtonHtml() : '')) : '';
            const messageContent = renderMessageContent(msg);
            const isInteractive = msg.type === 'interactive';
            const editedBadge = (msg.is_edited && !msg.deleted_at) ? '<span class="message-edited-badge">(edited)</span>' : '';
            const canEdit = direction === 'outgoing' && msg.type === 'text' && !msg.deleted_at;
            const bodyAttr = (msg.body && typeof msg.body === 'string') ? ' data-body="' + escapeHtml(msg.body).replace(/"/g, '&quot;') + '"' : '';
            const waIdAttr = (msg.wa_message_id) ? ` data-wa-id="${escapeHtml(msg.wa_message_id)}"` : '';
            const failedClass = (direction === 'outgoing' && isFailed) ? ' failed' : '';
            const resendAttrs = (direction === 'outgoing' && isFailed && msg.type) ? ` data-resend-type="${escapeHtml(msg.type)}" data-resend-body="${escapeHtml(msg.body || '').replace(/"/g, '&quot;')}"` : '';

            html += `
                <div class="message-wrapper ${direction}${failedClass}" data-id="${msg.id}"${waIdAttr}${bodyAttr}${resendAttrs}>
                    <div class="d-flex flex-column align-items-${direction === 'outgoing' ? 'end' : 'start'}">
                        <div class="message-bubble-wrapper" style="position:relative;display:inline-block">
                            <div class="message-bubble ${isInteractive ? 'message-interactive' : ''}">
                                ${messageContent}
                                ${!isInteractive ? `<div class="message-meta">
                                    <span>${formatTimeOnly(msg.timestamp)}</span>
                                    ${editedBadge}
                                    ${statusIcon}
                                </div>` : ''}
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });

        chatMessages.html(html);
        // Fokus langsung ke pesan terbaru di bawah (tanpa animasi)
        scrollToBottom();
    }

    // Klik quoted message → scroll ke pesan yang direply
    $(document).on('click', '.message-quoted', function() {
        const targetId = $(this).attr('data-quoted-target');
        if (!targetId) return;
        const $target = $(`.message-wrapper[data-wa-id="${targetId}"]`);
        if ($target.length) {
            $target[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    });

    // Blok quoted/reply (preview pesan yang direply) — tampilan seperti WhatsApp
    function getQuotedBlock(msg) {
        if (!msg.context_message_id) return '';
        const targetId = String(msg.context_message_id);
        const q = msg.quoted_message;
        const hasQuoted = !!q;
        const displayText = hasQuoted ? (q.body ?? '') : 'Pesan sebelumnya tidak ditemukan';
        const senderName = (q && q.sender_name) ? escapeHtml(q.sender_name) : '';
        const quotedType = (q && q.type) ? q.type : '';
        const iconMap = { image: 'ti-photo', video: 'ti-video', document: 'ti-file', audio: 'ti-microphone', sticker: 'ti-mood-smile' };
        const icon = iconMap[quotedType] ? `<i class="ti ${iconMap[quotedType]}" style="font-size:14px;color:#666;flex-shrink:0"></i>` : '';
        return `<div class="message-quoted" data-quoted-target="${escapeHtml(targetId)}" role="button" tabindex="0" title="Klik untuk scroll ke pesan">
            <div class="message-quoted-inner">
                ${senderName ? `<span class="message-quoted-sender">${senderName}</span>` : ''}
                <div class="message-quoted-body">${icon}<span class="message-quoted-text">${escapeHtml(displayText)}</span></div>
            </div>
        </div>`;
    }

    // Render message content based on type (text, template, media)
    function renderMessageContent(msg) {
        const type = msg.type;
        const caption = msg.caption || (msg.body && !msg.body.startsWith('[') ? msg.body : '');
        const mediaStatus = msg.data?.media_status || 'completed';
        const quotedBlock = getQuotedBlock(msg);

        // Deleted message: show label (revoked vs local only for outgoing)
        if (msg.deleted_at) {
            const label = msg.revoked_via_wa ? 'Pesan ini telah dihapus' : 'Pesan dihapus oleh admin (tidak terhapus di WhatsApp user)';
            return quotedBlock + `<div class="message-deleted text-muted fst-italic" style="font-size:13px">${escapeHtml(label)}</div>`;
        }

        // Template message with special rendering
        if (type === 'template' && msg.template) {
            return quotedBlock + renderTemplateMessage(msg.template);
        }

        // Check media status for media messages
        if (['image', 'video', 'audio', 'document', 'sticker'].includes(type)) {
            if (mediaStatus === 'pending' || mediaStatus === 'processing') {
                return quotedBlock + renderMediaPending(type, caption);
            }
            if (mediaStatus === 'failed') {
                return quotedBlock + renderMediaFailed(type, caption);
            }
        }

        // Image messages (dengan fallback download ulang jika gagal load)
        if (type === 'image' && msg.media_url) {
            const safeUrl = escapeHtml(msg.media_url);
            return quotedBlock + `
                <div class="message-media message-media-image" data-media-url="${safeUrl}" data-media-type="image">
                    <img src="${msg.media_url}" alt="Image" class="media-element"
                         style="max-width:240px;border-radius:8px;cursor:pointer;background:#f0f0f0" 
                         onclick="showImagePreview('${msg.media_url.replace(/'/g, "\\'")}')"
                         onerror="window.handleMediaLoadError && window.handleMediaLoadError(this)">
                    <div class="media-load-failed" style="display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:200px;min-height:120px;background:rgba(220,53,69,0.08);border-radius:8px;border:1px dashed #dc3545;padding:12px">
                        <span class="text-danger small"><i class="ti ti-photo-off"></i> Gagal memuat</span>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-outline-primary btn-retry-media"><i class="ti ti-refresh me-1"></i>Download ulang</button>
                            <a href="#" class="btn btn-sm btn-outline-secondary btn-open-media-link" target="_blank" rel="noopener"><i class="ti ti-external-link me-1"></i>Buka link</a>
                        </div>
                    </div>
                </div>
                ${caption ? `<div class="message-text">${escapeHtml(caption)}</div>` : ''}
            `;
        }

        // Sticker messages (dengan fallback download ulang jika gagal load)
        if (type === 'sticker' && msg.media_url) {
            const safeUrl = escapeHtml(msg.media_url);
            return quotedBlock + `
                <div class="message-media message-media-sticker" data-media-url="${safeUrl}" data-media-type="image">
                    <img src="${msg.media_url}" alt="Sticker" class="media-element"
                         style="max-width:150px;cursor:pointer" 
                         onclick="showImagePreview('${msg.media_url.replace(/'/g, "\\'")}')"
                         onerror="window.handleMediaLoadError && window.handleMediaLoadError(this)">
                    <div class="media-load-failed" style="display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:120px;min-height:80px;background:rgba(220,53,69,0.08);border-radius:8px;border:1px dashed #dc3545;padding:8px">
                        <span class="text-danger small">Gagal memuat</span>
                        <button type="button" class="btn btn-sm btn-outline-primary btn-retry-media"><i class="ti ti-refresh me-1"></i>Download ulang</button>
                    </div>
                </div>
            `;
        }

        // Document messages (tombol download ulang + buka link)
        if (type === 'document') {
            const filename = msg.media_filename || msg.body || 'Document';
            const fileIcon = getDocumentIcon(filename, msg.media_mime_type);
            const safeUrl = msg.media_url ? escapeHtml(msg.media_url) : '';
            const downloadLink = msg.media_url 
                ? `<a href="${msg.media_url}" target="_blank" download="${escapeHtml(filename)}" class="btn btn-sm btn-outline-primary ms-auto btn-document-download" title="Download" data-media-url="${safeUrl}"><i class="ti ti-download"></i> Download</a>` 
                : '<span class="text-muted ms-auto"><i class="ti ti-clock"></i></span>';
            
            return quotedBlock + `
                <div class="message-document" style="display:flex;align-items:center;gap:10px;padding:12px;background:rgba(0,0,0,0.05);border-radius:8px;min-width:200px;max-width:300px">
                    <i class="ti ${fileIcon}" style="font-size:28px;color:#6c757d"></i>
                    <div style="flex:1;min-width:0;overflow:hidden">
                        <div style="font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="${escapeHtml(filename)}">${escapeHtml(filename)}</div>
                        ${msg.media_size ? `<small style="color:#6c757d">${formatFileSize(msg.media_size)}</small>` : ''}
                    </div>
                    ${downloadLink}
                    ${msg.media_url ? `<a href="${msg.media_url}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary ms-1" title="Buka link"><i class="ti ti-external-link"></i></a>` : ''}
                </div>
                ${caption ? `<div class="message-text" style="margin-top:6px">${escapeHtml(caption)}</div>` : ''}
            `;
        }

        // Video messages (dengan fallback download ulang jika gagal load)
        if (type === 'video' && msg.media_url) {
            const safeUrl = escapeHtml(msg.media_url);
            const mime = escapeHtml(msg.media_mime_type || 'video/mp4');
            return quotedBlock + `
                <div class="message-media message-media-video" data-media-url="${safeUrl}" data-media-type="video" data-media-mime="${mime}">
                    <video controls class="media-element" style="max-width:280px;border-radius:8px;background:#000" preload="metadata" onerror="window.handleMediaLoadError && window.handleMediaLoadError(this)">
                        <source src="${msg.media_url}" type="${msg.media_mime_type || 'video/mp4'}">
                        Your browser does not support video playback.
                    </video>
                    <div class="media-load-failed" style="display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:200px;min-height:120px;background:rgba(220,53,69,0.08);border-radius:8px;border:1px dashed #dc3545;padding:12px">
                        <span class="text-danger small"><i class="ti ti-video-off"></i> Gagal memuat</span>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-outline-primary btn-retry-media"><i class="ti ti-refresh me-1"></i>Download ulang</button>
                            <a href="#" class="btn btn-sm btn-outline-secondary btn-open-media-link" target="_blank" rel="noopener"><i class="ti ti-external-link me-1"></i>Buka link</a>
                        </div>
                    </div>
                </div>
                ${caption ? `<div class="message-text">${escapeHtml(caption)}</div>` : ''}
            `;
        }

        // Audio messages (dengan fallback download ulang jika gagal load)
        if (type === 'audio' && msg.media_url) {
            const isVoiceNote = msg.media_mime_type?.includes('ogg') || msg.media_mime_type?.includes('opus');
            const safeUrl = escapeHtml(msg.media_url);
            const mime = escapeHtml(msg.media_mime_type || 'audio/mpeg');
            return quotedBlock + `
                <div class="message-audio message-media" data-media-url="${safeUrl}" data-media-type="audio" data-media-mime="${mime}" style="display:flex;align-items:center;gap:8px">
                    ${isVoiceNote ? '<i class="ti ti-microphone" style="color:#25D366"></i>' : '<i class="ti ti-music" style="color:#6c757d"></i>'}
                    <audio controls class="media-element" style="width:220px;height:36px" preload="metadata" onerror="window.handleMediaLoadError && window.handleMediaLoadError(this)">
                        <source src="${msg.media_url}" type="${msg.media_mime_type || 'audio/mpeg'}">
                    </audio>
                    <div class="media-load-failed" style="display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:60px;background:rgba(220,53,69,0.08);border-radius:8px;border:1px dashed #dc3545;padding:8px">
                        <span class="text-danger small">Gagal memuat</span>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-outline-primary btn-retry-media"><i class="ti ti-refresh me-1"></i>Download ulang</button>
                            <a href="#" class="btn btn-sm btn-outline-secondary btn-open-media-link" target="_blank" rel="noopener"><i class="ti ti-external-link me-1"></i>Buka link</a>
                        </div>
                    </div>
                </div>
            `;
        }

        // Location messages
        if (type === 'location') {
            return quotedBlock + `
                <div class="message-location" style="padding:10px;background:rgba(0,0,0,0.05);border-radius:8px">
                    <i class="ti ti-map-pin" style="color:#e74c3c"></i>
                    <span>${escapeHtml(msg.body || 'Location shared')}</span>
                </div>
            `;
        }

        // Contact messages
        if (type === 'contacts') {
            return quotedBlock + `
                <div class="message-contact" style="padding:10px;background:rgba(0,0,0,0.05);border-radius:8px">
                    <i class="ti ti-address-book" style="color:#3498db"></i>
                    <span>${escapeHtml(msg.body || 'Contact shared')}</span>
                </div>
            `;
        }

        // Interactive messages (button_reply, list_reply dari customer; atau button/list yang kita kirim)
        if (type === 'interactive') {
            const interactiveData = msg.interactive || msg.data?.interactive;
            return quotedBlock + renderInteractiveMessage(interactiveData, msg.body);
        }

        // Default: text message
        return quotedBlock + `<div class="message-text">${escapeHtml(msg.body || '[Message]')}</div>`;
    }
    
    // Render pending media state (dengan tombol Refetch - proses langsung tanpa queue)
    function renderMediaPending(type, caption) {
        const icons = {
            image: 'ti-photo',
            video: 'ti-video',
            audio: 'ti-microphone',
            document: 'ti-file',
            sticker: 'ti-mood-smile'
        };
        return `
            <div class="message-media-pending" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:200px;min-height:120px;background:rgba(0,0,0,0.05);border-radius:8px;padding:12px">
                <div style="text-align:center;color:#666">
                    <i class="ti ${icons[type] || 'ti-file'}" style="font-size:32px"></i>
                    <div style="font-size:12px;margin-top:4px">Loading media...</div>
                </div>
                <button type="button" class="btn btn-sm btn-outline-primary btn-refetch-media" title="Download sekarang (tanpa antrean)">
                    <i class="ti ti-refresh me-1"></i>Refetch
                </button>
            </div>
            ${caption ? `<div class="message-text">${escapeHtml(caption)}</div>` : ''}
        `;
    }
    
    // Render failed media state (dengan tombol Refetch - proses langsung tanpa queue)
    function renderMediaFailed(type, caption) {
        return `
            <div class="message-media-failed" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:200px;min-height:100px;background:rgba(220,53,69,0.1);border-radius:8px;border:1px dashed #dc3545;padding:12px">
                <div style="text-align:center;color:#dc3545">
                    <i class="ti ti-photo-off" style="font-size:24px"></i>
                    <div style="font-size:12px;margin-top:4px">Media unavailable</div>
                </div>
                <button type="button" class="btn btn-sm btn-outline-primary btn-refetch-media" title="Download sekarang (tanpa antrean)">
                    <i class="ti ti-refresh me-1"></i>Refetch
                </button>
            </div>
            ${caption ? `<div class="message-text">${escapeHtml(caption)}</div>` : ''}
        `;
    }
    
    // Get document icon based on file extension or MIME type
    function getDocumentIcon(filename, mimeType) {
        const ext = filename.split('.').pop()?.toLowerCase();
        
        // PDF
        if (ext === 'pdf' || mimeType?.includes('pdf')) return 'ti-file-type-pdf';
        
        // Word
        if (['doc', 'docx'].includes(ext) || mimeType?.includes('word')) return 'ti-file-type-doc';
        
        // Excel
        if (['xls', 'xlsx', 'csv'].includes(ext) || mimeType?.includes('excel') || mimeType?.includes('spreadsheet')) return 'ti-file-type-xls';
        
        // PowerPoint
        if (['ppt', 'pptx'].includes(ext) || mimeType?.includes('powerpoint') || mimeType?.includes('presentation')) return 'ti-file-type-ppt';
        
        // Text
        if (['txt', 'log', 'md'].includes(ext) || mimeType?.includes('text/plain')) return 'ti-file-text';
        
        // Archive
        if (['zip', 'rar', '7z', 'gz', 'tar'].includes(ext)) return 'ti-file-zip';
        
        // Code/JSON
        if (['json', 'xml', 'html', 'js', 'css', 'php'].includes(ext)) return 'ti-file-code';
        
        // Default
        return 'ti-file';
    }
    
    // Render WhatsApp template message
    // Render WhatsApp template message
    function renderTemplateMessage(template) {
        if (!template || !template.name) {
            return `<div class="message-text">[Template]</div>`;
        }
        
        let html = `<div class="template-message" style="border-left:3px solid #25D366;padding-left:10px">`;
        
        // Template name badge
        const displayName = template.display_name || template.name;
        html += `<div style="font-size:11px;color:#666;margin-bottom:6px">
            <i class="ti ti-template"></i> ${escapeHtml(displayName)}
        </div>`;
        
        // Get template components from database definition
        const templateComponents = template.template_components || [];
        const sentComponents = template.sent_components || [];
        
        // Build parameter map from sent components for substitution
        const paramMap = {};
        sentComponents.forEach(comp => {
            if (comp.type === 'header' && comp.parameters) {
                paramMap.header = comp.parameters;
            } else if (comp.type === 'body' && comp.parameters) {
                paramMap.body = comp.parameters;
            } else if (comp.type === 'button' && comp.parameters) {
                if (!paramMap.buttons) paramMap.buttons = [];
                paramMap.buttons[comp.index || 0] = comp.parameters;
            }
        });
        
        // Parse and render template components from database
        let hasContent = false;
        
        templateComponents.forEach(comp => {
            const compType = comp.type?.toLowerCase();
            
            if (compType === 'header') {
                hasContent = true;
                const format = comp.format?.toLowerCase();
                
                if (format === 'image') {
                    // Image header - get URL from sent parameters
                    const headerParams = paramMap.header || [];
                    const imageUrl = headerParams[0]?.image?.link || '';
                    if (imageUrl) {
                        html += `<div class="template-header" style="margin-bottom:8px">
                            <img src="${imageUrl}" style="max-width:220px;border-radius:8px;cursor:pointer" 
                                 onclick="showImagePreview('${imageUrl}')">
                        </div>`;
                    }
                } else if (format === 'video') {
                    // Video header
                    const headerParams = paramMap.header || [];
                    const videoUrl = headerParams[0]?.video?.link || '';
                    if (videoUrl) {
                        html += `<div class="template-header" style="margin-bottom:8px">
                            <video controls style="max-width:220px;border-radius:8px">
                                <source src="${videoUrl}" type="video/mp4">
                            </video>
                        </div>`;
                    }
                } else if (format === 'document') {
                    // Document header
                    const headerParams = paramMap.header || [];
                    const docUrl = headerParams[0]?.document?.link || '';
                    const docFilename = headerParams[0]?.document?.filename || 'Document';
                    html += `<div class="template-header" style="margin-bottom:8px;padding:10px;background:#f5f5f5;border-radius:6px;display:flex;align-items:center;gap:8px">
                        <i class="ti ti-file-text" style="font-size:24px;color:#666"></i>
                        <span>${escapeHtml(docFilename)}</span>
                        ${docUrl ? `<a href="${docUrl}" target="_blank" class="ms-auto"><i class="ti ti-download"></i></a>` : ''}
                    </div>`;
                } else if (format === 'text' || !format) {
                    // Text header
                    let headerText = comp.text || '';
                    const headerParams = paramMap.header || [];
                    headerParams.forEach((p, i) => {
                        if (p.text) {
                            const placeholder = new RegExp(`\\{\\{${i + 1}\\}\\}`, 'g');
                            headerText = headerText.replace(placeholder, p.text);
                        }
                    });
                    if (headerText) {
                        html += `<div class="template-header" style="font-weight:600;font-size:15px;margin-bottom:6px">${escapeHtml(headerText)}</div>`;
                    }
                }
            } else if (compType === 'body') {
                hasContent = true;
                // Body text with parameter substitution
                let bodyText = comp.text || template.body || '';
                const bodyParams = paramMap.body || [];
                
                // Replace {{1}}, {{2}}, etc. with actual parameter values using regex for global replace
                bodyParams.forEach((p, i) => {
                    if (p.text) {
                        const placeholder = new RegExp(`\\{\\{${i + 1}\\}\\}`, 'g');
                        bodyText = bodyText.replace(placeholder, p.text);
                    }
                });
                
                if (bodyText) {
                    // Convert newlines to <br>
                    bodyText = escapeHtml(bodyText).replace(/\n/g, '<br>');
                    html += `<div class="template-body" style="margin-bottom:6px;line-height:1.5">${bodyText}</div>`;
                }
            } else if (compType === 'footer') {
                hasContent = true;
                // Footer text (usually not parameterized)
                const footerText = comp.text || '';
                if (footerText) {
                    html += `<div class="template-footer" style="font-size:12px;color:#888;margin-top:4px">${escapeHtml(footerText)}</div>`;
                }
            } else if (compType === 'buttons') {
                hasContent = true;
                // Render buttons container
                const buttons = comp.buttons || [];
                if (buttons.length > 0) {
                    html += `<div class="template-buttons" style="margin-top:10px;display:flex;flex-direction:column;gap:6px">`;
                    buttons.forEach((btn, idx) => {
                        const btnType = btn.type?.toLowerCase();
                        let btnText = btn.text || 'Button';
                        
                        if (btnType === 'url') {
                            // URL button - might have dynamic parameter
                            let btnUrl = btn.url || '#';
                            const btnParams = paramMap.buttons?.[idx] || [];
                            btnParams.forEach((p, i) => {
                                if (p.text) {
                                    const placeholder = new RegExp(`\\{\\{${i + 1}\\}\\}`, 'g');
                                    btnUrl = btnUrl.replace(placeholder, p.text);
                                }
                            });
                            html += `<a href="${btnUrl}" target="_blank" style="display:block;text-align:center;padding:10px 16px;background:#f0f0f0;border-radius:8px;color:#0066cc;text-decoration:none;font-size:13px">
                                <i class="ti ti-external-link me-1"></i>${escapeHtml(btnText)}
                            </a>`;
                        } else if (btnType === 'phone_number') {
                            html += `<a href="tel:${btn.phone_number || ''}" style="display:block;text-align:center;padding:10px 16px;background:#f0f0f0;border-radius:8px;color:#16a34a;text-decoration:none;font-size:13px">
                                <i class="ti ti-phone me-1"></i>${escapeHtml(btnText)}
                            </a>`;
                        } else if (btnType === 'quick_reply') {
                            html += `<div style="display:block;text-align:center;padding:10px 16px;background:#f0f0f0;border-radius:8px;color:#333;font-size:13px">
                                ${escapeHtml(btnText)}
                            </div>`;
                        } else {
                            html += `<div style="display:block;text-align:center;padding:10px 16px;background:#f0f0f0;border-radius:8px;color:#333;font-size:13px">
                                ${escapeHtml(btnText)}
                            </div>`;
                        }
                    });
                    html += `</div>`;
                }
            }
        });
        
        // Fallback: if we have body text but no template_components, show body directly
        if (!hasContent && template.body) {
            let bodyText = template.body;
            const bodyParams = paramMap.body || [];
            bodyParams.forEach((p, i) => {
                if (p.text) {
                    const placeholder = new RegExp(`\\{\\{${i + 1}\\}\\}`, 'g');
                    bodyText = bodyText.replace(placeholder, p.text);
                }
            });
            bodyText = escapeHtml(bodyText).replace(/\n/g, '<br>');
            html += `<div class="template-body" style="line-height:1.5">${bodyText}</div>`;
            hasContent = true;
        }
        
        // If still no content, show the sent parameters directly
        if (!hasContent) {
            // Check if we have sent_params (raw parameter values)
            const sentParams = template.sent_params || [];
            const bodyParams = paramMap.body || [];
            
            if (sentParams.length > 0) {
                // Display sent parameters as a list
                html += `<div class="template-body" style="line-height:1.6">`;
                html += `<div style="color:#666;font-size:12px;margin-bottom:6px">Parameter yang dikirim:</div>`;
                sentParams.forEach((param, i) => {
                    html += `<div style="padding:2px 0">${escapeHtml(String(param))}</div>`;
                });
                html += `</div>`;
            } else if (bodyParams.length > 0) {
                // Display parameters from sent_components
                html += `<div class="template-body" style="line-height:1.6">`;
                html += `<div style="color:#666;font-size:12px;margin-bottom:6px">Parameter yang dikirim:</div>`;
                bodyParams.forEach((p, i) => {
                    if (p.text) {
                        html += `<div style="padding:2px 0">${escapeHtml(p.text)}</div>`;
                    }
                });
                html += `</div>`;
            } else {
                // No parameters available at all
                html += `<div class="template-body" style="color:#666;font-style:italic">Template message sent</div>`;
            }
        }
        
        html += `</div>`;
        return html;
    }

    function updateInfoPanel(assignment) {
        if (!assignment) {
            $('#info-avatar').text('?');
            $('#info-name').text('-');
            $('#info-phone').text('-');
            $('#note-textarea').val('');
            return;
        }

        const displayName = assignment.contact_name || assignment.customer_name || assignment.customer_number;
        
        $('#info-avatar').text(getInitials(displayName || assignment.customer_number));
        // Ensure inputs are populated
        $('#contact-name').val(displayName || '');
        $('#contact-email').val(assignment.contact_email || '');
        $('#info-phone').text(formatPhone(assignment.customer_number));
        
        // Clear and populate tags (assuming assignment might carry them if we updated apiMessages)
        // Since apiMessages doesn't return tags yet, we might need to fetch them or assume empty for now.
        // For existing contacts, we should probably fetch tags.
        // Let's assume tags are passed in assignment object if we update controller,
        // OR we fetch them separately.
        // Current Controller apiMessages logic:
        // 'contact_email' => $contactEmail, 
        // We missed 'tags' in apiMessages resource. 
        // Ideally we should add 'tags' to apiMessages response.
        
        // Clearing tags for now as we didn't add it to API response yet in previous step.
        // We should probably update InboxController::apiMessages to include 'tags'
        // For now, fail gracefully
        $('#contact-tags').val(null).trigger('change');
        if (assignment.contact_tags) {
             $('#contact-tags').val(assignment.contact_tags).trigger('change');
        }
        
        // Prefill notes textarea
        $('#note-textarea').val(assignment.notes || '');
        
        // Update response window status - like Agent Inbox
        if (serviceWindow) {
            const card = $('#response-window');
            if (serviceWindow.is_open) {
                const hours = Math.floor(serviceWindow.remaining_seconds / 3600);
                const mins = Math.floor((serviceWindow.remaining_seconds % 3600) / 60);
                card.addClass('active').find('.status').text(`${hours}h ${mins}m remaining`);
            } else {
                card.removeClass('active').find('.status').text('Expired - use template');
            }
        }
    }

    // Send message
    $('#send-btn').on('click', sendMessage);
    messageInput.on('input', function() {
        this.style.height = 'auto';
        this.style.height = Math.min(this.scrollHeight, 100) + 'px';
    });

    function sendMessage() {
        const text = messageInput.val().trim();
        if (!text || !currentAssignmentId) return;
        
        messageInput.val('').css('height', 'auto');
        
        const tempId = 'temp_' + Date.now();
        const payload = {
            _token: '{{ csrf_token() }}',
            type: 'text',
            message: text,
            client_message_id: tempId
        };
        if (replyingTo && replyingTo.wa_message_id) {
            payload.context_message_id = replyingTo.wa_message_id;
        }
        const quotedForAppend = replyingTo ? {
            context_message_id: replyingTo.wa_message_id,
            quoted_message: { body: replyingTo.body, sender_name: replyingTo.sender_name }
        } : null;
        replyingTo = null;
        updateReplyBar();
        
        // Optimistic UI: append immediately with 'sending' status (data-client-message-id set in appendMessage for temp ids)
        appendMessage({
            id: tempId,
            direction: 'outgoing', 
            body: text, 
            timestamp: new Date().toISOString(), 
            status: 'sending',
            context_message_id: quotedForAppend?.context_message_id,
            quoted_message: quotedForAppend?.quoted_message
        });
        
        const sentToAssignmentId = currentAssignmentId;
        $.ajax({
            url: `{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/send`,
            method: 'POST',
            data: payload,
            timeout: 90000 // 90s timeout
        })
        .done(response => {
            // Only update bubble if still viewing this conversation (bubble may be gone if user switched)
            if (parseInt(currentAssignmentId) === parseInt(sentToAssignmentId)) {
                // Multi-strategy search: Pusher may have already updated data-id before this .done() fires
                let $wrap = $(`.message-wrapper[data-id="${tempId}"]`);
                if (!$wrap.length) {
                    // Pusher already updated the bubble: find by client-message-id attr
                    $wrap = chatMessages.find('.message-wrapper').filter(function() {
                        return $(this).attr('data-client-message-id') === String(tempId);
                    });
                }
                if (!$wrap.length && response.message_id) {
                    // Pusher may have removed client-message-id attr; find by server message_id
                    $wrap = $(`.message-wrapper[data-id="${response.message_id}"]`);
                }
                if (!$wrap.length && response.wa_message_id) {
                    $wrap = $(`.message-wrapper[data-wa-id="${response.wa_message_id}"]`);
                }
                if ($wrap.length) {
                    $wrap.find('.message-status').replaceWith(getStatusIcon('sent'));
                    if (response.message_id && $wrap.attr('data-id') !== response.message_id) {
                        $wrap.attr('data-id', response.message_id);
                    }
                    if (response.wa_message_id && !$wrap.attr('data-wa-id')) {
                        $wrap.attr('data-wa-id', response.wa_message_id);
                    }
                    $wrap.removeAttr('data-client-message-id');
                }
            }
            updateChatInList(sentToAssignmentId, {
                body: text,
                type: 'text',
                timestamp: new Date().toISOString(),
            }, 'outgoing');
            if (inboxBroadcastChannel && response) {
                try {
                    inboxBroadcastChannel.postMessage({
                        type: 'outgoing',
                        assignmentId: sentToAssignmentId,
                        messageData: {
                            id: response.message_id,
                            wa_message_id: response.wa_message_id,
                            type: 'text',
                            body: text,
                            timestamp: new Date().toISOString(),
                            direction: 'outgoing',
                            status: 'sent',
                        }
                    });
                } catch (e) {}
            }
        })
        .fail((xhr, status) => {
            if (status === 'timeout') {
                showToast('Taking longer than expected...', 'warning');
                return;
            }
            
            const error = xhr.responseJSON;
            // Find bubble using same multi-strategy approach  
            let $failWrap = $(`.message-wrapper[data-id="${tempId}"]`);
            if (!$failWrap.length) {
                $failWrap = chatMessages.find('.message-wrapper').filter(function() {
                    return $(this).attr('data-client-message-id') === String(tempId);
                });
            }
            $failWrap
                .addClass('failed')
                .find('.message-status')
                .replaceWith(getStatusIcon('failed') + getResendButtonHtml());
            if (error?.error === 'service_window_expired') {
                showToast('24h window expired. Use template message.', 'error');
            } else if (error?.error === 'missing_inbound_timestamp') {
                showToast('Cannot send: no inbound timestamp. Contact support.', 'error');
            } else {
                showToast(error?.message || 'Failed to send', 'error');
            }

            if (error?.judol_blocked && typeof updateSpamBadge === 'function') {
                updateSpamBadge(error.violation_count, error.violation_limit);
            }
        });
        messageInput.focus();
    }

    function updateReplyBar() {
        const bar = $('#reply-quote-bar');
        if (replyingTo) {
            bar.show();
            $('#reply-quote-bar-body').text(replyingTo.body ? (replyingTo.body.length > 80 ? replyingTo.body.substring(0, 80) + '…' : replyingTo.body) : 'Pesan');
        } else {
            bar.hide();
            $('#reply-quote-bar-body').text('');
        }
    }

    // Swipe-to-reply: drag message bubble ke kanan ≥60px untuk aktifkan reply (desktop + mobile)
    (function() {
        const SWIPE_THRESHOLD = 60;
        const SWIPE_COMMIT_H = 15;
        const SWIPE_MAX = 80;
        let swipeState = null;

        function getEventXY(e) {
            if (e.touches && e.touches.length) return { x: e.touches[0].clientX, y: e.touches[0].clientY };
            return { x: e.clientX, y: e.clientY };
        }

        function onSwipeStart(e) {
            const t = e.target;
            if (!t.closest || !t.closest('#chat-messages')) return;
            if (t.closest('.message-quoted, a, button, input, textarea, .btn-resend-message')) return;
            const wrapper = t.closest('.message-wrapper');
            if (!wrapper || !wrapper.getAttribute('data-wa-id')) return;
            const xy = getEventXY(e);
            swipeState = { wrapper: wrapper, startX: xy.x, startY: xy.y, committed: false, currentTx: 0 };
        }

        function onSwipeMove(e) {
            if (!swipeState || !swipeState.wrapper) return;
            const xy = getEventXY(e);
            const deltaX = xy.x - swipeState.startX;
            const deltaY = xy.y - swipeState.startY;
            if (!swipeState.committed) {
                if (Math.abs(deltaX) > SWIPE_COMMIT_H && Math.abs(deltaX) > Math.abs(deltaY)) {
                    swipeState.committed = true;
                    if (e.cancelable) e.preventDefault();
                } else return;
            }
            if (e.cancelable && swipeState.committed) e.preventDefault();
            const tx = Math.min(Math.max(0, deltaX), SWIPE_MAX);
            swipeState.currentTx = tx;
            const bubbleWrap = swipeState.wrapper.querySelector('.message-bubble-wrapper');
            if (bubbleWrap) {
                bubbleWrap.style.transition = 'none';
                bubbleWrap.style.transform = 'translateX(' + tx + 'px)';
            }
        }

        function onSwipeEnd(e) {
            if (!swipeState || !swipeState.wrapper) return;
            const w = swipeState.wrapper;
            const bubbleWrap = w.querySelector('.message-bubble-wrapper');
            const tx = swipeState.currentTx || 0;
            swipeState = null;
            if (bubbleWrap) {
                bubbleWrap.style.transition = 'transform 0.2s ease-out';
                bubbleWrap.style.transform = 'translateX(0)';
            }
            if (tx >= SWIPE_THRESHOLD) {
                const waId = w.getAttribute('data-wa-id');
                const body = (w.getAttribute('data-body') || '').replace(/&quot;/g, '"');
                const senderName = w.classList.contains('incoming') ? 'Customer' : 'Anda';
                if (waId) {
                    replyingTo = { wa_message_id: waId, body: body, sender_name: senderName };
                    updateReplyBar();
                    messageInput[0] && messageInput[0].focus();
                }
            }
        }

        const chatMsgs = document.getElementById('chat-messages');
        if (chatMsgs) {
            chatMsgs.addEventListener('mousedown', onSwipeStart, { passive: true });
            chatMsgs.addEventListener('touchstart', onSwipeStart, { passive: true });
        }
        document.addEventListener('mousemove', onSwipeMove, { passive: false });
        document.addEventListener('mouseup', onSwipeEnd, { passive: true });
        document.addEventListener('touchmove', onSwipeMove, { passive: false });
        document.addEventListener('touchend', onSwipeEnd, { passive: true });
        document.addEventListener('touchcancel', onSwipeEnd, { passive: true });
    })();

    $('#reply-quote-bar-cancel').on('click', function() {
        replyingTo = null;
        updateReplyBar();
    });

    // Resend message (supports text, media, interactive)
    $(document).on('click', '.btn-resend-message', function() {
        const btn = $(this);
        const wrapper = btn.closest('.message-wrapper');
        if (!wrapper.length || !currentAssignmentId) return;

        const type = wrapper.attr('data-type') || 'text';
        
        let payload = {
            _token: '{{ csrf_token() }}',
            type: type
        };

        if (type === 'text') {
            payload.message = wrapper.attr('data-body') || '';
        } else if (['image', 'video', 'audio', 'document', 'sticker'].includes(type)) {
            payload.media_url = wrapper.attr('data-media-url') || '';
            payload.caption = wrapper.attr('data-body') || ''; // caption stored in body
            payload.filename = wrapper.attr('data-media-filename') || '';
        } else if (type === 'interactive') {
            try {
                const interactiveData = JSON.parse(wrapper.attr('data-interactive') || '{}');
                payload.interactive = interactiveData;
            } catch (e) {
                console.error('Failed to parse interactive data', e);
                showToast('Gagal memproses data interaktif', 'error');
                return;
            }
        } else {
            // Fallback
            payload.message = wrapper.attr('data-body') || '';
        }
        payload.client_message_id = wrapper.attr('data-client-message-id') || wrapper.attr('data-id') || ('temp_resend_' + Date.now());

        btn.prop('disabled', true).html('<i class="ti ti-loader spin me-0"></i> Sending...');
        
        $.ajax({
            url: `{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/send`,
            method: 'POST',
            data: payload,
            timeout: 90000
        })
        .done(function(response) {
            wrapper.removeClass('failed');
            wrapper.find('.message-status').first().replaceWith(getStatusIcon('sent'));
            if (response && response.message_id) {
                wrapper.attr('data-id', response.message_id);
                if (response.wa_message_id) wrapper.attr('data-wa-id', response.wa_message_id);
            }
            btn.closest('.resend-btn-container').remove();
            btn.remove();
            showToast('Pesan terkirim', 'success');
        })
        .fail(function(xhr, status) {
            btn.prop('disabled', false).html('<i class="ti ti-refresh me-0"></i> Resend');
            
            if (status === 'timeout') {
                showToast('Sending timed out. Please retry.', 'warning');
                return;
            }
            
            const err = xhr.responseJSON;
            showToast(err?.message || err?.error || 'Gagal mengirim ulang', 'error');
        });
    });


    // Sound Notification (WhatsApp-like Bubble Pop)
    const notificationAudio = new Audio('{{ asset('assets/sounds/nada_notifikasi.mp3') }}');
    function playNotificationSound() {
        if (!isSoundEnabled) return;
        notificationAudio.currentTime = 0;
        notificationAudio.play().catch(e => console.log('Audio play failed (user interaction required):', e));
    }

    // Favicon Notification
    const originalTitle = document.title;
    const faviconLink = document.querySelector("link[rel~='icon']");
    const originalFavicon = faviconLink ? faviconLink.href : '';

    function updateFavicon(count) {
        if (!faviconLink) return;
        
        if (count > 0) {
            const canvas = document.createElement('canvas');
            canvas.width = 32;
            canvas.height = 32;
            const ctx = canvas.getContext('2d');
            const img = new Image();
            img.src = originalFavicon;
            img.onload = () => {
                ctx.drawImage(img, 0, 0, 32, 32);
                ctx.fillStyle = '#ef4444'; // Red-500
                ctx.beginPath();
                ctx.arc(24, 8, 8, 0, 2 * Math.PI);
                ctx.fill();
                ctx.fillStyle = 'white';
                ctx.font = 'bold 10px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                const countText = count > 99 ? '99+' : count;
                ctx.fillText(countText, 24, 8);
                faviconLink.href = canvas.toDataURL('image/png');
                document.title = `(${count}) ${originalTitle}`;
            };
        } else {
            console.log('Resetting favicon to:', originalFavicon);
            faviconLink.href = originalFavicon;
            document.title = originalTitle;
        }
    }

    function escapeHtml(text) {
        if (!text) return '';
        return String(text)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    function getResendAttributes(msg) {
        if (msg.direction != 'outgoing') return '';
        
        let attrs = ` data-type="${escapeHtml(msg.type || 'text')}"`;
        if (msg.body) attrs += ` data-body="${escapeHtml(msg.body).replace(/"/g, '&quot;')}"`;
        if (msg.media_url) attrs += ` data-media-url="${escapeHtml(msg.media_url)}"`;
        if (msg.media_filename) attrs += ` data-media-filename="${escapeHtml(msg.media_filename)}"`;
        if (msg.interactive) attrs += ` data-interactive="${escapeHtml(JSON.stringify(msg.interactive)).replace(/"/g, '&quot;')}"`;
        
        return attrs;
    }

    function appendMessage(msg) {
        const msgId = msg.id || msg.wa_message_id || '';
        
        // Determine content HTML based on type
        let contentHtml = '';
        let isInteractive = false;
        
        if (msg.type === 'interactive' && (msg.interactive || msg.data?.interactive)) {
            // Check msg.interactive (direct) or msg.data.interactive (API)
            const interactiveData = msg.interactive || msg.data?.interactive;
            contentHtml = renderInteractiveMessage(interactiveData, msg.body); // Fallback body used inside if needed
            isInteractive = true;
        } else if (msg.type === 'image') {
            // Basic image render for now (enhance as needed)
            const url = msg.media_url || '#';
            const caption = msg.body || '';
            contentHtml = `
                <div class="message-image mb-1">
                    <img src="${url}" class="img-fluid rounded" style="max-height: 200px; width: auto; object-fit: contain;">
                </div>
                ${caption ? `<div class="message-text">${escapeHtml(caption)}</div>` : ''}
            `;
        } else if (msg.type === 'video') {
            const url = msg.media_url || '#';
            const caption = msg.body || '';
            contentHtml = `
                <div class="message-video mb-1">
                    <video src="${url}" controls class="img-fluid rounded" style="max-height: 200px; width: 100%;"></video>
                </div>
                ${caption ? `<div class="message-text">${escapeHtml(caption)}</div>` : ''}
            `;
        } else {
             // Default text
             // Render links if needed? For now simple escape.
             contentHtml = `<div class="message-text">${escapeHtml(msg.body)}</div>`;
        }
        if (msg.context_message_id) {
            contentHtml = getQuotedBlock({ context_message_id: msg.context_message_id, quoted_message: msg.quoted_message }) + contentHtml;
        }

        const waIdAttr = msg.wa_message_id ? ` data-wa-id="${escapeHtml(msg.wa_message_id)}"` : '';
        const clientMsgIdAttr = (msgId && String(msgId).match(/^temp(_qr)?_/)) ? ` data-client-message-id="${escapeHtml(String(msgId))}"` : '';
        const resendAttrs = getResendAttributes(msg);
        const html = `
            <div class="message-wrapper ${msg.direction}" data-id="${msgId}"${waIdAttr}${clientMsgIdAttr}${resendAttrs}>
                <div class="d-flex flex-column align-items-${msg.direction === 'outgoing' ? 'end' : 'start'}">
                    <div class="message-bubble ${isInteractive ? 'message-interactive' : ''}">
                        ${contentHtml}
                        ${!isInteractive ? `
                        <div class="message-meta">
                            <span>${formatTimeOnly(msg.timestamp)}</span>
                            ${msg.direction === 'outgoing' ? getStatusIcon(msg.status) : ''}
                        </div>` : ''}
                    </div>
                </div>
            </div>
        `;
        chatMessages.append(html);
        setTimeout(() => scrollToBottom(false), 50);
    }

    // Message actions: Delete & Edit (delegated)
    $(document).on('click', '.message-action-delete', function(e) {
        e.preventDefault();
        const link = $(this);
        const msgId = link.data('msg-id');
        const wrapper = link.closest('.message-wrapper');
        if (!currentAssignmentId || !msgId) return;
        if (!confirm('Hapus pesan ini?')) return;
        $.ajax({
            url: `{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/messages/${encodeURIComponent(msgId)}`,
            method: 'DELETE',
            data: { _token: '{{ csrf_token() }}' }
        }).done(function(res) {
            const label = res.revoked_via_wa ? 'Pesan ini telah dihapus' : 'Pesan dihapus oleh admin (tidak terhapus di WhatsApp user)';
            wrapper.find('.message-bubble').html('<div class="message-deleted text-muted fst-italic" style="font-size:13px">' + label + '</div><div class="message-meta"><span>' + (wrapper.find('.message-meta span').first().text() || '') + '</span></div>');
            showToast(res.message || 'Pesan dihapus', 'success');
        }).fail(function(xhr) {
            showToast(xhr.responseJSON?.error || 'Gagal menghapus pesan', 'error');
        });
    });
    $(document).on('click', '.message-action-edit', function(e) {
        e.preventDefault();
        const link = $(this);
        const msgId = link.data('msg-id');
        const wrapper = link.closest('.message-wrapper');
        const body = (wrapper.attr('data-body') || '').replace(/&quot;/g, '"');
        if (!currentAssignmentId || !msgId) return;
        const newBody = prompt('Edit pesan:', body);
        if (newBody === null || newBody.trim() === '') return;
        $.ajax({
            url: `{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/messages/${encodeURIComponent(msgId)}`,
            method: 'PUT',
            contentType: 'application/json',
            data: JSON.stringify({ message: newBody.trim(), _token: '{{ csrf_token() }}' }),
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
        }).done(function(res) {
            wrapper.attr('data-body', newBody.trim());
            if (!wrapper.find('.message-edited-badge').length) {
                wrapper.find('.message-meta').prepend('<span class="message-edited-badge">(edited)</span> ');
            }
            if (res.new_message) {
                appendMessage({
                    id: res.new_message.id,
                    direction: 'outgoing',
                    type: 'text',
                    body: res.new_message.body,
                    timestamp: res.new_message.timestamp,
                    status: 'sent'
                });
            }
            showToast('Pesan dikoreksi dan terkirim', 'success');
        }).fail(function(xhr) {
            showToast(xhr.responseJSON?.error || 'Gagal mengedit pesan', 'error');
        });
    });
    
    function renderInteractiveMessage(interactiveData, fallbackBody) {
        let interactive = interactiveData;
        // Robust parsing
        if (typeof interactive === 'string') {
            try { interactive = JSON.parse(interactive); } catch(e) { console.error('Parse interactive failed', e); interactive = {}; }
        }
        interactive = interactive || {};
        
        // Debugging info
        const debugInfo = `<!-- Client Interactive Type: ${interactive.type}, Keys: ${Object.keys(interactive).join(',')} -->`;
        
        // 1. Check if it is a REPLY from User
        if (interactive.button_reply || interactive.list_reply || interactive.nfm_reply) {
            let title = '[Reply]';
            let desc = '';
            let typeLabel = 'Reply';
            let color = '#25D366';

            if (interactive.button_reply) {
                title = interactive.button_reply.title || fallbackBody;
                typeLabel = 'Button Reply';
            } else if (interactive.list_reply) {
                title = interactive.list_reply.title || fallbackBody;
                desc = interactive.list_reply.description;
                typeLabel = 'List Reply';
            } else if (interactive.nfm_reply) {
                title = interactive.nfm_reply.body || fallbackBody;
                typeLabel = 'Flow Reply';
            }

            return `<div class="message-interactive-reply" style="padding:8px 10px;background:rgba(0,0,0,0.04);border-radius:6px;border-left:3px solid ${color};margin-bottom:4px">
                <div style="color:#6c757d;font-size:10px;text-transform:uppercase;font-weight:600;margin-bottom:2px">${typeLabel}</div>
                <div class="message-text" style="font-weight:500">${escapeHtml(title)}</div>
                ${desc ? `<div class="message-text" style="font-size:11px;color:#666;margin-top:2px">${escapeHtml(desc)}</div>` : ''}
            </div>`;
        }

        // 2. Interactive Message (Buttons / List)
        if (interactive.type === 'button' || interactive.type === 'list') {
             let html = debugInfo + '<div class="interactive-content">';
             
             // Header
             const header = interactive.header;
             if (header) {
                 if (header.type === 'text') {
                     html += `<div class="interactive-header">${escapeHtml(header.text)}</div>`;
                 } else if (header.type === 'image') {
                     const imgLink = header.image?.link || '#';
                     html += `<div class="interactive-header-media mb-2"><img src="${imgLink}" class="img-fluid rounded"></div>`;
                 } else if (header.type === 'video') {
                     const vidLink = header.video?.link || '#';
                     html += `<div class="interactive-header-media mb-2"><video src="${vidLink}" controls class="img-fluid rounded"></video></div>`;
                 } else if (header.type === 'document') {
                     html += `<div class="interactive-header-media mb-2 p-2 bg-light rounded"><i class="ti ti-file me-1"></i> Document</div>`;
                 }
             }
             
             // Body
             const bodyText = interactive.body?.text || fallbackBody;
             if (bodyText) {
                  html += `<div class="interactive-body message-text">${escapeHtml(bodyText)}</div>`;
             }
             
             // Footer
             if (interactive.footer) {
                  html += `<div class="interactive-footer">${escapeHtml(interactive.footer.text)}</div>`;
             }
             
             html += `<div class="message-meta">
                        <span>${formatTimeOnly(new Date().toISOString())}</span>
                    </div>`;
             
             html += '</div>'; // End interactive-content
             
             // Buttons / List
             const action = interactive.action || {};
             
             if (interactive.type === 'button') {
                 const buttons = action.buttons || interactive.buttons || [];
                 if (buttons.length > 0) {
                     html += `<div class="interactive-buttons">`;
                     buttons.forEach(btn => {
                         let title = 'Button';
                         if (btn.type === 'reply' && btn.reply) {
                             title = btn.reply.title;
                         } else if (btn.title) {
                             title = btn.title;
                         }
                         html += `<button disabled>${escapeHtml(title)}</button>`;
                     });
                     html += `</div>`;
                 } else {
                     html += `<!-- No buttons found. ${escapeHtml(JSON.stringify(interactive))} -->`;
                 }
             } else if (interactive.type === 'list') {
                 const btnText = action.button || 'Menu';
                 html += `<div class="interactive-list mt-2">`;
                 html += `<button disabled><i class="ti ti-list me-1"></i> ${escapeHtml(btnText)}</button>`;
                 html += `</div>`;
             }
             
             return html;
        }
        
        return `<div class="message-text">${escapeHtml(fallbackBody)}</div>`;
    }

    // ============================================
    // Client Actions: Close, Reopen
    // ============================================
    window.closeChat = function(assignmentId) {
        if (!confirm('Close this conversation?')) return;
        
        $.post(`{{ url('/client/inbox/conversations') }}/${assignmentId}/close`, {
            _token: '{{ csrf_token() }}'
        })
        .done(() => {
            showToast('Chat closed', 'success');
            loadChatList();
            openChat(assignmentId);
        })
        .fail(xhr => showToast(xhr.responseJSON?.error || 'Failed to close', 'error'));
    };

    window.reopenChat = function(assignmentId) {
        $.post(`{{ url('/client/inbox/conversations') }}/${assignmentId}/reopen`, {
            _token: '{{ csrf_token() }}'
        })
        .done(() => {
            showToast('Chat reopened', 'success');
            loadChatList();
            openChat(assignmentId);
        })
        .fail(xhr => showToast(xhr.responseJSON?.error || 'Failed to reopen', 'error'));
    };

    // Pusher Subscription
    let subscribedWabaIds = [];

    // BroadcastChannel untuk sinkronisasi antar tab browser (tab di background kadang tidak terima Pusher tepat waktu)
    const INBOX_BC_CHANNEL = 'meechat-client-inbox-sync';
    let inboxBroadcastChannel = null;
    try {
        inboxBroadcastChannel = typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel(INBOX_BC_CHANNEL) : null;
    } catch (e) {}
    if (inboxBroadcastChannel) {
        inboxBroadcastChannel.addEventListener('message', function(e) {
            const d = e.data || {};
            if (!d.assignmentId || !d.messageData?.id) return;
            const eventAssignmentId = parseInt(d.assignmentId);
            const currentId = parseInt(currentAssignmentId || 0);
            if (eventAssignmentId !== currentId) return;
            const msgData = d.messageData;
            const existsById = chatMessages.find(`.message-wrapper[data-id="${msgData.id}"]`).length > 0;
            const existsByWaId = msgData.wa_message_id && chatMessages.find(`.message-wrapper[data-wa-id="${msgData.wa_message_id}"]`).length > 0;
            if (existsById || existsByWaId) return;
            const direction = d.type === 'incoming' ? 'incoming' : 'outgoing';
            const payload = direction === 'incoming' ? {
                id: msgData.id,
                wa_message_id: msgData.wa_message_id,
                type: msgData.type,
                body: msgData.body,
                timestamp: msgData.timestamp,
                direction: 'incoming',
                media_url: msgData.media_url,
                media_filename: msgData.media_filename,
                media_mime_type: msgData.media_mime_type,
                data: { media_status: msgData.media_status || 'pending' },
            } : {
                id: msgData.id,
                wa_message_id: msgData.wa_message_id,
                type: msgData.type,
                body: msgData.body,
                timestamp: msgData.timestamp,
                direction: 'outgoing',
                status: msgData.status || 'sent',
                media_url: msgData.media_url,
                media_filename: msgData.media_filename,
                media_mime_type: msgData.media_mime_type,
                template: msgData.template,
                interactive: msgData.interactive,
                sent_by: msgData.sent_by,
                context_message_id: msgData.context_message_id,
                quoted_message: msgData.quoted_message,
            };
            appendMessageWithContent(payload);
            if (direction === 'incoming' && ['image','video','audio','document','sticker'].includes(payload.type) && currentAssignmentId) {
                triggerRefetchMediaForRealtime(msgData.id);
            }
        });
    }

    function subscribePusher() {
        // Subscribe to Client Private Channel (Tenant Isolation)
        // Berlaku untuk dedicated & self_service: backend broadcast ke client.{client_id} → Pusher private-client.{client_id}
        const clientId = '{{ auth()->user()->client?->id ?? "" }}';
        if (!clientId) {
            console.warn('Inbox: client_id kosong, skip Pusher subscribe (pastikan user punya client)');
            return;
        }
        const channelName = 'private-client.' + clientId;
        
        if (pusher.channel(channelName)) return;
        
        console.log('Subscribing to Client Channel: ' + channelName + ' (dedicated/self_service realtime)');
        const channel = pusher.subscribe(channelName);
        pusherChannels.push(channel);
        
        bindChannelEvents(channel, 'client');
    }

    // Map internalMessageId -> client_message_id for handleStatusUpdate fallback (status may arrive before OutgoingMessage)
    const pendingOptimisticMap = new Map();

    function bindChannelEvents(channel, wabaId) {
        channel.bind('pusher:subscription_succeeded', () => {
            console.log('Pusher: Connected to channel ' + channel.name);
            console.log('[Realtime Inbox] Listener aktif: channel=' + channel.name + ', events=incoming.message, outgoing.message, message.status.update');
            $('#connection-status').removeClass('offline').addClass('online')
                .html('<i class="ti ti-wifi"></i> Online');
        });
        
        channel.bind('pusher:subscription_error', (error) => {
            console.error('Pusher: Subscription error for waba.' + wabaId, error);
            logInboxRealtime('client-channel', 'pusher:subscription_error', error);
        });

        const handleNewMessage = (eventName, data) => {
             logInboxRealtime('client-channel', eventName, data);
             const eventAssignmentId = parseInt(data.chatAssignmentId ?? data.assignment_id ?? 0);
             const currentId = parseInt(currentAssignmentId || 0);
             const msgData = data.messageData || {};

             // Shared package: only process messages for conversations in our list (contact-based visibility)
             if (isSharedPackage) {
                 const knownChat = allChats.find(c => parseInt(c.id) === eventAssignmentId);
                 if (!knownChat) {
                     console.log(`[Shared Filter] Skipping event for assignment ${eventAssignmentId} (not in contact list)`);
                     return;
                 }
             }

             if (eventAssignmentId === currentId && msgData.id) {
                 const existsById = $(`.message-wrapper[data-id="${msgData.id}"]`).length > 0;
                 const existsByWaId = msgData.wa_message_id && $(`.message-wrapper[data-wa-id="${msgData.wa_message_id}"]`).length > 0;
                 
                 if (!existsById && !existsByWaId) {
                     const payload = {
                         id: msgData.id,
                         wa_message_id: msgData.wa_message_id,
                         type: msgData.type,
                         body: msgData.body,
                         timestamp: msgData.timestamp,
                         direction: 'incoming',
                         media_url: msgData.media_url,
                         media_filename: msgData.media_filename,
                         media_mime_type: msgData.media_mime_type,
                         data: { media_status: msgData.media_status || 'pending' },
                     };
                     appendMessageWithContent(payload);
                     if (['image','video','audio','document','sticker'].includes(payload.type) && currentAssignmentId) {
                         triggerRefetchMediaForRealtime(msgData.id);
                     }
                     if (inboxBroadcastChannel) {
                         try {
                             inboxBroadcastChannel.postMessage({ type: 'incoming', assignmentId: eventAssignmentId, messageData: msgData });
                         } catch (e) {}
                     }
                 }
             }
             
             playNotificationSound();
             updateChatInList(eventAssignmentId, msgData, 'incoming');
        };

        // Update existing bubble in-place dengan data server (untuk outgoing)
        function updateBubbleWithServerData(wrapper, msgData) {
            const content = renderMessageContent(msgData);
            const statusIcon = getStatusIcon(msgData.status || 'sent');
            const metaHtml = `
                <div class="message-meta">
                    <span>${formatTimeOnly(msgData.timestamp)}</span>
                    ${statusIcon}
                </div>`;
            wrapper.find('.message-bubble').html(content + metaHtml);
            wrapper.attr('data-id', msgData.id || '');
            wrapper.attr('data-wa-id', msgData.wa_message_id || '');
            wrapper.removeAttr('data-client-message-id');
            wrapper.removeClass('failed');
            wrapper.find('.btn-resend-message').remove();
            wrapper.find('.resend-btn-container').remove();
        }

        // Handle outgoing messages (proses disesuaikan dengan handleNewMessage pesan masuk)
        const handleOutgoingMessage = (eventName, data) => {
            const eventAssignmentId = parseInt(data.chatAssignmentId ?? data.sessionId ?? 0);
            const currentId = parseInt(currentAssignmentId || 0);
            const msgData = data.messageData || {};
            const clientMsgId = data.client_message_id;

            // Shared package: sama seperti incoming, hanya proses jika conversation ada di list
            if (isSharedPackage) {
                const knownChat = allChats.find(c => parseInt(c.id) === eventAssignmentId);
                if (!knownChat) {
                    console.log(`[Shared Filter] Skipping outgoing event for assignment ${eventAssignmentId} (not in contact list)`);
                    return;
                }
            }

            // Hanya proses bubble jika conversation ini yang sedang dibuka dan ada msgData.id (mirip incoming)
            if (eventAssignmentId === currentId && msgData.id) {
                const internalId = msgData.original_id ?? parseInt(String(msgData.id).replace(/^out_/, ''), 10);
                if (clientMsgId && internalId) {
                    pendingOptimisticMap.set(internalId, clientMsgId);
                }
                const existsById = $(`.message-wrapper[data-id="${msgData.id}"]`).length > 0;
                const existsByWaId = msgData.wa_message_id && $(`.message-wrapper[data-wa-id="${msgData.wa_message_id}"]`).length > 0;

                // Cari bubble yang sudah ada (temp dari tab pengirim) untuk update in-place
                let wrapper = null;
                if (clientMsgId) {
                    wrapper = chatMessages.find('.message-wrapper').filter(function() { return $(this).attr('data-client-message-id') === String(clientMsgId); });
                }
                if (!wrapper || !wrapper.length) {
                    wrapper = chatMessages.find('.message-wrapper').filter(function() { return $(this).attr('data-id') === String(msgData.id); });
                }
                if (!wrapper || !wrapper.length) {
                    wrapper = msgData.wa_message_id ? chatMessages.find('.message-wrapper').filter(function() { return $(this).attr('data-wa-id') === String(msgData.wa_message_id); }) : $();
                }

                if (wrapper && wrapper.length) {
                    updateBubbleWithServerData(wrapper, msgData);
                    if (internalId) pendingOptimisticMap.delete(internalId);
                } else if (!existsById && !existsByWaId) {
                    const payload = {
                        id: msgData.id,
                        wa_message_id: msgData.wa_message_id,
                        type: msgData.type,
                        body: msgData.body,
                        timestamp: msgData.timestamp,
                        direction: 'outgoing',
                        status: msgData.status,
                        media_url: msgData.media_url,
                        media_filename: msgData.media_filename,
                        media_mime_type: msgData.media_mime_type,
                        template: msgData.template,
                        interactive: msgData.interactive,
                        sent_by: msgData.sent_by,
                        context_message_id: msgData.context_message_id,
                        quoted_message: msgData.quoted_message,
                    };
                    appendMessageWithContent(payload);
                }
                if (inboxBroadcastChannel) {
                    try {
                        inboxBroadcastChannel.postMessage({ type: 'outgoing', assignmentId: eventAssignmentId, messageData: msgData });
                    } catch (e) {}
                }
            }

            // Update chat list di akhir (sama seperti incoming)
            updateChatInList(eventAssignmentId, msgData, 'outgoing');
        };

        // Bind to multiple possible event names to catch namespace issues (referensi: pesan masuk)
        channel.bind('App\\Events\\NewInboxMessage', data => handleNewMessage('App\\Events\\NewInboxMessage', data));
        channel.bind('.App\\Events\\NewInboxMessage', data => handleNewMessage('.App\\Events\\NewInboxMessage', data));
        channel.bind('incoming.message', data => handleNewMessage('incoming.message', data));

        // Outgoing: binding sama seperti pesan masuk (beberapa nama event agar pasti tertangkap)
        channel.bind('App\\Events\\OutgoingMessage', data => handleOutgoingMessage('App\\Events\\OutgoingMessage', data));
        channel.bind('.App\\Events\\OutgoingMessage', data => handleOutgoingMessage('.App\\Events\\OutgoingMessage', data));
        channel.bind('outgoing.message', data => handleOutgoingMessage('outgoing.message', data));

        if (typeof window.DEBUG_PUSHER !== 'undefined' && window.DEBUG_PUSHER) {
            channel.bind_global((eventName, data) => {
                console.log(`[Pusher Global Debug] Event Received: ${eventName}`, data);
            });
        }

        // Handle message status updates (realtime: sent, delivered, received, read, failed)
        const handleStatusUpdate = (data) => {
            console.log('[Realtime] message.status.update diterima', data);
            const waMessageId = (data.messageId || data.statusData?.wa_message_id || '').toString().trim();
            const internalId = data.internalMessageId;
            const status = (data.status || data.statusData?.status || '').toString().toLowerCase();
            
            if (!status) return;
            // Cari bubble: prioritas internalMessageId (out_123) agar cocok saat data-wa-id belum ada
            let wrapper = null;
            if (internalId != null && internalId !== '') {
                wrapper = $(`.message-wrapper.outgoing[data-id="out_${internalId}"]`);
                if (!wrapper.length) wrapper = $(`.message-wrapper[data-id="out_${internalId}"]`);
                if (!wrapper.length) wrapper = $(`.message-wrapper[data-id="${internalId}"]`);
            }
            if ((!wrapper || !wrapper.length) && waMessageId) {
                wrapper = $(`.message-wrapper[data-wa-id="${waMessageId}"]`);
            }
            if ((!wrapper || !wrapper.length) && internalId != null && internalId !== '') {
                const clientMsgId = pendingOptimisticMap.get(parseInt(internalId, 10));
                if (clientMsgId) {
                    wrapper = chatMessages.find('.message-wrapper').filter(function() { return $(this).attr('data-client-message-id') === String(clientMsgId); });
                    if (wrapper.length) pendingOptimisticMap.delete(parseInt(internalId, 10));
                }
            }
            if (!wrapper || !wrapper.length) {
                console.warn('[Realtime] Bubble tidak ditemukan untuk status update', { internalId, waMessageId, status });
                return;
            }
            const $statusEl = wrapper.find('.message-status');
            if ($statusEl.length) $statusEl.replaceWith(getStatusIcon(status));
            
            if (status === 'failed') {
                wrapper.addClass('failed');
                if (!wrapper.find('.btn-resend-message').length) {
                    wrapper.find('.message-meta').append(getResendButtonHtml());
                }
            } else if (['sent', 'delivered', 'received', 'read'].includes(status)) {
                wrapper.removeClass('failed');
                wrapper.find('.btn-resend-message').remove();
                wrapper.find('.resend-btn-container').remove();
            }
        };
        channel.bind('message.status.update', handleStatusUpdate);
        channel.bind('.message.status.update', handleStatusUpdate);
    }

    // Append message with full content rendering (for Pusher events)
    // Uses same HTML structure as appendMessage() so outgoing bubbles align correctly in Tab 2
    function appendMessageWithContent(msg) {
        const msgId = msg.id || msg.wa_message_id || 'msg_' + Date.now();
        const waMessageId = msg.wa_message_id || '';
        const clientMsgIdAttr = (msgId && String(msgId).indexOf('temp') === 0) ? ` data-client-message-id="${escapeHtml(String(msgId))}"` : '';
        const content = renderMessageContent(msg);
        const statusIcon = msg.direction === 'outgoing' ? getStatusIcon(msg.status || 'sent') : '';
        const resendAttrs = getResendAttributes(msg);
        const alignClass = msg.direction === 'outgoing' ? 'align-items-end' : 'align-items-start';
        
        const html = `
            <div class="message-wrapper ${msg.direction}" data-id="${msgId}" data-wa-id="${waMessageId}"${clientMsgIdAttr}${resendAttrs} data-body="${escapeHtml(msg.body || '')}">
                <div class="d-flex flex-column ${alignClass}">
                    <div class="message-bubble-wrapper">
                        <div class="message-bubble">
                            ${content}
                            <div class="message-meta">
                                <span>${formatTimeOnly(msg.timestamp)}</span>
                                ${statusIcon}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        chatMessages.append(html);
        setTimeout(() => scrollToBottom(false), 50);
    }

    // Init Pusher (realtime untuk dedicated & self_service)
    const pusher = new Pusher('{{ config("broadcasting.connections.pusher.key") }}', {
        cluster: '{{ config("broadcasting.connections.pusher.options.cluster") }}',
        authEndpoint: '/broadcasting/login',
        auth: { headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' } },
        enabledTransports: ['ws', 'wss']
    });

    // Reconnection: tampilkan status dan pastikan subscribe tetap aktif setelah reconnect
    pusher.connection.bind('state_change', function (states) {
        const current = states.current;
        if (current === 'connecting' || current === 'unavailable') {
            $('#connection-status').removeClass('online').addClass('offline').html('<i class="ti ti-wifi-off"></i> Reconnecting...');
        } else if (current === 'connected') {
            $('#connection-status').removeClass('offline').addClass('online').html('<i class="ti ti-wifi"></i> Online');
            // Pastikan channel masih ter-subscribe (Pusher biasanya maintain; jika perlu re-subscribe bisa panggil subscribePusher() di sini)
            if (pusherChannels.length === 0 && '{{ auth()->user()->client?->id ?? "" }}') {
                subscribePusher();
            }
        }
    });
    pusher.connection.bind('error', function (err) {
        console.warn('Pusher connection error (retry otomatis oleh Pusher):', err);
    });

    // Opsional: subscribe channel debug jika backend mengirim ke debug-ssp (APP_DEBUG)
    try {
        const debugCh = pusher.subscribe('debug-ssp');
        debugCh.bind_global((eventName, data) => {
            console.log('[DEBUG-SSP] Event:', eventName, data);
        });
    } catch (e) {}

    // Helpers
    function getInitials(name) {
        if (!name) return '?';
        const parts = name.replace(/[^a-zA-Z0-9 ]/g, '').split(' ').filter(p => p);
        return parts.length >= 2 ? (parts[0][0] + parts[1][0]).toUpperCase() : name.substring(0, 2).toUpperCase();
    }

    function formatTime(ts) {
        if (!ts) return '';
        const d = new Date(ts), now = new Date();
        if (d.toDateString() === now.toDateString()) return d.toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' });
        return d.toLocaleDateString('en', { day: '2-digit', month: 'short' });
    }

    function formatTimeOnly(ts) {
        return ts ? new Date(ts).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' }) : '';
    }

    function formatDate(ts) {
        if (!ts) return '';
        const d = new Date(ts), now = new Date();
        if (d.toDateString() === now.toDateString()) return 'Today';
        const y = new Date(now); y.setDate(y.getDate() - 1);
        if (d.toDateString() === y.toDateString()) return 'Yesterday';
        return d.toLocaleDateString('en', { weekday: 'long', day: 'numeric', month: 'long' });
    }

    function formatPhone(p) {
        return p && p.length > 10 ? '+' + p.substring(0,2) + ' ' + p.substring(2,5) + '-' + p.substring(5,9) + '-' + p.substring(9) : p;
    }

    function getStatusIcon(s) {
        const icons = {
            sending: '<span class="message-status"><i class="ti ti-clock"></i></span>',
            sent: '<span class="message-status"><i class="ti ti-check"></i></span>',
            delivered: '<span class="message-status delivered"><i class="ti ti-checks"></i></span>',
            received: '<span class="message-status delivered"><i class="ti ti-checks"></i></span>',
            read: '<span class="message-status read"><i class="ti ti-checks"></i></span>',
            failed: '<span class="message-status"><i class="ti ti-alert-circle text-danger" title="Gagal"></i></span>'
        };
        return icons[s] || icons.sent;
    }

    function getResendButtonHtml() {
        return '<button type="button" class="btn-resend-message btn btn-link btn-sm p-0 ms-1" title="Kirim ulang"><i class="ti ti-refresh me-0"></i> Kirim ulang</button>';
    }

    function escapeHtml(t) {
        const d = document.createElement('div');
        d.textContent = t || '';
        return d.innerHTML;
    }

    function scrollToBottom(force = false) {
        const el = document.getElementById('chat-messages');
        if (!el) return;

        // Jika tidak dipaksa dan user sedang baca pesan atas, jangan ganggu
        if (!force && autoScrollEnabled === false) {
            return;
        }

        // Immediate scroll
        el.scrollTop = el.scrollHeight;
        
        // Ensure scroll after layout repaint (important for mobile transitions)
        requestAnimationFrame(() => {
            el.scrollTop = el.scrollHeight;
        });
        
        // Backup scroll for slower devices/ transitions
        setTimeout(() => {
            el.scrollTop = el.scrollHeight;
        }, 100);
    }

    function showToast(msg, type) {
        const t = $(`<div class="position-fixed bottom-0 end-0 p-3" style="z-index:9999"><div class="toast show bg-${type==='error'?'danger':'success'} text-white" style="border-radius:12px"><div class="toast-body">${msg}</div></div></div>`);
        $('body').append(t);
        setTimeout(() => t.remove(), 3000);
    }

    // ============================================
    // Media load error: tampilkan "Download ulang" saat gambar/video/audio gagal load
    // ============================================
    window.handleMediaLoadError = function(mediaEl) {
        const el = mediaEl && mediaEl.nodeName ? mediaEl : (typeof mediaEl === 'string' ? document.querySelector(mediaEl) : null);
        if (!el) return;
        const wrap = el.closest('.message-media');
        if (!wrap) return;
        const failed = wrap.querySelector('.media-load-failed');
        const mediaElt = wrap.querySelector('.media-element');
        if (mediaElt) mediaElt.style.display = 'none';
        if (failed) {
            failed.style.display = 'flex';
            const link = failed.querySelector('.btn-open-media-link');
            if (link && wrap.dataset.mediaUrl) link.href = wrap.dataset.mediaUrl;
        }
    };

    // Refetch media otomatis setelah pesan media realtime (pending) di-append — kombinasi realtime + refetch
    function triggerRefetchMediaForRealtime(messageId) {
        if (!currentAssignmentId || !messageId) return;
        const csrfToken = $('meta[name="csrf-token"]').attr('content') || '{{ csrf_token() }}';
        $.ajax({
            url: `{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/messages/${encodeURIComponent(messageId)}/refetch-media`,
            method: 'POST',
            data: { _token: csrfToken },
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            xhrFields: { withCredentials: true }
        }).done(function(res) {
            if (res.success) {
                chatMessages.html('<div class="loading-state"><div class="spinner"></div></div>');
                $.get(`{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/messages`, { sort_order: messageSortOrder })
                    .done(function(response) {
                        let msgs = response.data || [];
                        msgs = sortMessagesClientSide(msgs, messageSortOrder);
                        renderMessages(msgs);
                        scrollToBottom(false);
                    })
                    .fail(function() { chatMessages.html('<div class="empty-state"><p>Gagal memuat pesan</p></div>'); });
            }
        });
    }

    // Refetch media (langsung tanpa queue) - untuk media_status pending / failed
    $(document).on('click', '#chat-messages .btn-refetch-media', function(e) {
        e.preventDefault();
        const msgWrapper = $(this).closest('.message-wrapper')[0];
        if (!msgWrapper) return;
        const messageId = msgWrapper.getAttribute ? msgWrapper.getAttribute('data-id') : null;
        const isIncoming = messageId && !String(messageId).startsWith('out_') && /^\d+$/.test(String(messageId));
        if (!isIncoming || !currentAssignmentId) return;

        const csrfToken = $('meta[name="csrf-token"]').attr('content') || '{{ csrf_token() }}';
        const $btn = $(this).prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i>Refetch...');
        $.ajax({
            url: `{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/messages/${encodeURIComponent(messageId)}/refetch-media`,
            method: 'POST',
            data: { _token: csrfToken },
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            xhrFields: { withCredentials: true }
        }).done(function(res) {
            showToast(res.message || 'Media berhasil di-download.', 'success');
            chatMessages.html('<div class="loading-state"><div class="spinner"></div><p class="text-muted small mt-2">Memuat ulang pesan...</p></div>');
            $.get(`{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/messages`, { sort_order: messageSortOrder })
                .done(function(response) {
                    let msgs = response.data || [];
                    msgs = sortMessagesClientSide(msgs, messageSortOrder);
                    renderMessages(msgs);
                })
                .fail(function() {
                    chatMessages.html('<div class="empty-state"><p>Gagal memuat ulang pesan.</p><p class="small text-muted">Media sudah berhasil di-download. Silakan refresh halaman (F5) untuk melihat.</p></div>');
                    showToast('Media berhasil di-download, tetapi daftar pesan gagal dimuat. Silakan refresh halaman.', 'warning');
                });
        }).fail(function(xhr) {
            const status = xhr.status;
            const body = xhr.responseJSON || {};
            let msg = body.message || body.error || 'Gagal refetch media';
            if (status === 401 || status === 403 || status === 419) {
                msg = 'Sesi habis atau token tidak valid. Silakan refresh halaman (F5) lalu coba lagi.';
            }
            showToast(msg, 'error');
        }).always(function() {
            $btn.prop('disabled', false).html('<i class="ti ti-refresh me-1"></i>Refetch');
        });
    });

    $(document).on('click', '#chat-messages .btn-retry-media', function(e) {
        e.preventDefault();
        const wrap = $(this).closest('.message-media')[0];
        if (!wrap) return;
        const msgWrapper = wrap.closest('.message-wrapper');
        const messageId = msgWrapper && msgWrapper.getAttribute ? msgWrapper.getAttribute('data-id') : null;
        const isIncoming = messageId && !String(messageId).startsWith('out_') && /^\d+$/.test(String(messageId));

        if (isIncoming && currentAssignmentId) {
            const csrfToken = $('meta[name="csrf-token"]').attr('content') || '{{ csrf_token() }}';
            const $btn = $(this).prop('disabled', true);
            $.ajax({
                url: `{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/messages/${encodeURIComponent(messageId)}/retry-media`,
                method: 'POST',
                data: { _token: csrfToken },
                headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                xhrFields: { withCredentials: true }
            }).done(function() {
                showToast('Media masuk antrean download. Hasil akan diperbarui setelah selesai.', 'success');
                setTimeout(function() {
                    chatMessages.html('<div class="loading-state"><div class="spinner"></div></div>');
                    $.get(`{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/messages`, { sort_order: messageSortOrder })
                        .done(function(response) {
                            let msgs = response.data || [];
                            msgs = sortMessagesClientSide(msgs, messageSortOrder);
                            renderMessages(msgs);
                        })
                        .fail(function() { chatMessages.html('<div class="empty-state"><p>Gagal memuat pesan</p></div>'); });
                }, 7000);
            }).fail(function(xhr) {
                showToast(xhr.responseJSON?.message || xhr.responseJSON?.error || 'Gagal mengantre download', 'error');
            }).always(function() { $btn.prop('disabled', false); });
            return;
        }

        const url = wrap.dataset.mediaUrl;
        const type = wrap.dataset.mediaType;
        const mime = wrap.dataset.mediaMime || '';
        const failed = wrap.querySelector('.media-load-failed');
        const mediaElt = wrap.querySelector('.media-element');
        if (!url || !mediaElt) return;
        if (type === 'image' || type === 'img') {
            mediaElt.src = url;
            mediaElt.style.display = '';
            if (failed) failed.style.display = 'none';
        } else if (type === 'video' || type === 'audio') {
            const src = mediaElt.querySelector('source') || mediaElt;
            if (src.tagName === 'SOURCE') {
                src.src = url;
                if (mime) src.type = mime;
            } else {
                mediaElt.src = url;
            }
            mediaElt.load();
            mediaElt.style.display = '';
            if (failed) failed.style.display = 'none';
        }
    });

    $(document).on('click', '#chat-messages .btn-open-media-link', function(e) {
        e.preventDefault();
        const wrap = $(this).closest('.message-media')[0];
        if (wrap && wrap.dataset.mediaUrl) {
            window.open(wrap.dataset.mediaUrl, '_blank', 'noopener');
        }
    });

    // ============================================
    // Media Upload Handling
    // ============================================
    const mediaModal = new bootstrap.Modal('#media-upload-modal');
    let pendingMediaFile = null;
    let pendingMediaType = null;
    
    // File input change handler
    $('#media-file-input').on('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;
        
        // Reset input for next selection
        this.value = '';
        
        // Validate and show preview
        const validation = validateMediaFile(file);
        if (!validation.valid) {
            showToast(validation.error, 'error');
            return;
        }
        
        pendingMediaFile = file;
        pendingMediaType = validation.mediaType;
        
        // Create preview
        const preview = createMediaPreview(file, validation.mediaType);
        $('#media-preview-container').html(preview);
        $('#media-caption').val('');
        $('#btn-send-media').prop('disabled', false);
        $('#upload-progress-container').hide();
        
        mediaModal.show();
    });
    
    // Send media button
    $('#btn-send-media').on('click', async function() {
        if (!pendingMediaFile || !currentAssignmentId || !currentWabaId) {
            showToast('No file or conversation selected', 'error');
            return;
        }
        
        const caption = $('#media-caption').val().trim();
        const btn = $(this);
        
        btn.prop('disabled', true).html('<i class="ti ti-loader me-1 spin"></i>Uploading...');
        $('#upload-progress-container').show();
        $('#upload-progress-bar').css('width', '0%');
        
        let appendedMediaId = null;
        try {
            // Step 1: Upload to server
            const formData = new FormData();
            formData.append('file', pendingMediaFile);
            formData.append('waba_pool_id', currentWabaId);
            formData.append('media_type', pendingMediaType);
            
            const uploadResult = await uploadMediaWithProgress(formData);
            
            if (!uploadResult.success) {
                throw new Error(uploadResult.error || 'Upload failed');
            }
            
            // Step 2: Temp bubble (sending) then send; final data from broadcast
            const sentToAssignmentId = currentAssignmentId;
            const tempMediaId = 'temp_media_' + Date.now();
            appendedMediaId = tempMediaId;
            appendMediaMessage({
                id: tempMediaId,
                direction: 'outgoing',
                type: pendingMediaType,
                media_url: uploadResult.media_url,
                body: caption,
                caption: caption,
                media_filename: uploadResult.filename,
                timestamp: new Date().toISOString(),
                status: 'sending'
            });
            const sendResult = await $.post(`{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/send`, {
                _token: '{{ csrf_token() }}',
                type: pendingMediaType,
                media_id: uploadResult.media_id,
                media_url: uploadResult.media_url,
                caption: caption || undefined,
                filename: uploadResult.filename,
                client_message_id: tempMediaId,
            });
            if (parseInt(currentAssignmentId) === parseInt(sentToAssignmentId)) {
                const $tempWrap = $(`.message-wrapper[data-client-message-id="${tempMediaId}"]`);
                if ($tempWrap.length && sendResult && sendResult.message_id) {
                    $tempWrap.attr('data-id', sendResult.message_id);
                    if (sendResult.wa_message_id) $tempWrap.attr('data-wa-id', sendResult.wa_message_id);
                }
            }
            updateChatInList(sentToAssignmentId, {
                body: caption || '',
                type: pendingMediaType,
                timestamp: new Date().toISOString(),
            }, 'outgoing');
            
            mediaModal.hide();
            showToast('Media sent successfully', 'success');
            
        } catch (error) {
            console.error('Media upload error:', error);
            showToast(error.message || 'Failed to send media', 'error');
            // If we appended a bubble (send failed after upload), update it to failed state
            if (appendedMediaId) {
                const $failedWrap = chatMessages.find('.message-wrapper').filter(function() {
                    return $(this).attr('data-client-message-id') === String(appendedMediaId);
                });
                if ($failedWrap.length) {
                    $failedWrap.addClass('failed')
                        .find('.message-status')
                        .replaceWith(getStatusIcon('failed') + getResendButtonHtml());
                }
            }
        } finally {
            btn.prop('disabled', false).html('<i class="ti ti-send me-1"></i>Send');
            pendingMediaFile = null;
            pendingMediaType = null;
        }
    });
    
    function uploadMediaWithProgress(formData) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            
            xhr.upload.addEventListener('progress', (e) => {
                if (e.lengthComputable) {
                    const pct = Math.round((e.loaded / e.total) * 100);
                    $('#upload-progress-bar').css('width', pct + '%');
                    $('#upload-progress-text').text(`Uploading... ${pct}%`);
                }
            });
            
            xhr.addEventListener('load', () => {
                try {
                    resolve(JSON.parse(xhr.responseText));
                } catch (e) {
                    reject(new Error('Invalid response'));
                }
            });
            
            xhr.addEventListener('error', () => reject(new Error('Network error')));
            
            xhr.open('POST', '{{ route("api.media.upload") }}');
            xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
            xhr.send(formData);
        });
    }
    
    function validateMediaFile(file) {
        const mimeType = file.type;
        let mediaType = 'document';
        
        if (mimeType.startsWith('image/')) {
            mediaType = mimeType === 'image/webp' ? 'sticker' : 'image';
        } else if (mimeType.startsWith('video/')) {
            mediaType = 'video';
        } else if (mimeType.startsWith('audio/')) {
            mediaType = 'audio';
        }
        
        const maxSizes = {
            image: 5 * 1024 * 1024,
            video: 16 * 1024 * 1024,
            audio: 16 * 1024 * 1024,
            document: 100 * 1024 * 1024,
            sticker: 500 * 1024,
        };
        
        const maxSize = maxSizes[mediaType] || maxSizes.document;
        if (file.size > maxSize) {
            return { valid: false, error: `File too large. Max: ${(maxSize/1024/1024).toFixed(0)}MB` };
        }
        
        return { valid: true, mediaType };
    }
    
    function createMediaPreview(file, mediaType) {
        const url = URL.createObjectURL(file);
        
        if (mediaType === 'image' || mediaType === 'sticker') {
            return `<img src="${url}" style="max-width:100%;max-height:300px;border-radius:8px">`;
        }
        if (mediaType === 'video') {
            return `<video controls style="max-width:100%;max-height:300px;border-radius:8px"><source src="${url}"></video>`;
        }
        if (mediaType === 'audio') {
            return `<div style="padding:20px;background:#f8f9fa;border-radius:8px"><i class="ti ti-music" style="font-size:48px"></i><audio controls style="width:100%;margin-top:10px"><source src="${url}"></audio></div>`;
        }
        return `<div style="padding:20px;background:#f8f9fa;border-radius:8px"><i class="ti ti-file-text" style="font-size:48px"></i><div style="margin-top:10px">${escapeHtml(file.name)}<br><small>${formatFileSize(file.size)}</small></div></div>`;
    }
    
    function appendMediaMessage(msg) {
        const msgId = msg.id || '';
        const waIdAttr = msg.wa_message_id ? ` data-wa-id="${escapeHtml(msg.wa_message_id)}"` : '';
        const clientMsgIdAttr = (msgId && String(msgId).indexOf('temp') === 0) ? ` data-client-message-id="${escapeHtml(String(msgId))}"` : '';
        const content = renderMessageContent(msg);
        const status = msg.direction === 'outgoing' ? getStatusIcon(msg.status) : '';
        const resendAttrs = getResendAttributes(msg);
        const alignClass = msg.direction === 'outgoing' ? 'align-items-end' : 'align-items-start';
        
        const html = `
            <div class="message-wrapper ${msg.direction}" data-id="${msgId}"${waIdAttr}${clientMsgIdAttr}${resendAttrs}>
                <div class="d-flex flex-column ${alignClass}">
                    <div class="message-bubble-wrapper">
                        <div class="message-bubble">
                            ${content}
                            <div class="message-meta">
                                <span>${formatTimeOnly(msg.timestamp)}</span>
                                ${status}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        chatMessages.append(html);
        scrollToBottom();
    }
    
    function formatFileSize(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    }
    
    // ============================================
    // Image Lightbox
    // ============================================
    window.showImagePreview = function(url) {
        $('#lightbox-image').attr('src', url);
        $('#image-lightbox').css('display', 'flex');
    };
    
    window.closeLightbox = function() {
        $('#image-lightbox').hide();
        $('#lightbox-image').attr('src', '');
    };
    
    // Close lightbox on escape key
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape') closeLightbox();
    });
    
    // Close lightbox on overlay click
    $('#image-lightbox').on('click', function(e) {
        if (e.target === this) closeLightbox();
    });

    // ============================================
    // Save Notes
    // ============================================
    $('#save-note-btn').on('click', function() {
        if (!currentAssignmentId) {
            showToast('Pilih percakapan terlebih dahulu', 'error');
            return;
        }

        const btn = $(this);
        const notes = $('#note-textarea').val().trim();

        btn.prop('disabled', true).text('Saving...');

        $.post(`{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/notes`, {
            _token: '{{ csrf_token() }}',
            notes: notes
        })
        .done(function(res) {
            showToast('Catatan tersimpan', 'success');
        })
        .fail(function(xhr) {
            const msg = xhr.responseJSON?.error || xhr.responseJSON?.message || 'Gagal menyimpan catatan';
            showToast(msg, 'error');
        })
        .always(function() {
            btn.prop('disabled', false).text('Save Note');
        });
    });

    // ============================================
    // Unified Emoji Picker Logic
    // ============================================
    const emojiPicker = $('#emoji-picker');
    const emojiBtn = $('#emoji-toggle-btn');
    const commonEmojis = [
        '😂','👍','❤️','😍','😮','😢','😡','🙏','👋','🎉','🔥','✨','💯','🤝',
        '✅','❌','❓','‼️','📞','📷','🎥','📍','🏠','💼','💰','📅','⏰','☀️',
        '😀','😃','😄','😁','😆','😅','🤣','😊','😇','🙂','🙃','😉','😌','😎',
        '🤓','🧐','😐','😑','😶','😏','😒','🙄','😬','🤥','😌','😔','😪','🤤',
        '😴','😷','🤒','🤕','🤢','🤮','🤧','😵','🤯','🤠','🥳','😎','🤓','🧐',
        '😕','WORRIED','🙁','☹️','😮','😯','😲','😳','🥺','😦','😧','Ql','😨',
        '😰','😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','🥱','😤','😡',
        '😠','🤬','😈','👿','💀','☠️','💩','🤡','👹','👺','👻','👽','👾','🤖'
    ]; 
    
    let isEmojiPickerInitialized = false;

    function initEmojiPicker() {
        if (isEmojiPickerInitialized) return;
        
        let html = '';
        commonEmojis.forEach(emoji => {
           if (emoji.length > 2) return; 
           html += `<div class="emoji-item">${emoji}</div>`;
        });
        emojiPicker.html(html);
        isEmojiPickerInitialized = true;
        
        // Delegated click
        emojiPicker.off('click', '.emoji-item').on('click', '.emoji-item', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const emoji = $(this).text();
            insertAtCursor(messageInput[0], emoji);
        });
    }

    // Toggle Button
    emojiBtn.on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        // Initialize on first open
        if (!isEmojiPickerInitialized) initEmojiPicker();

        const isOpen = emojiPicker.hasClass('open');
        if (isOpen) {
            emojiPicker.removeClass('open').hide();
        } else {
            emojiPicker.addClass('open').show();
            // On mobile, blur input to hide keyboard
            if (window.innerWidth < 768) {
                messageInput.blur();
            }
        }
    });

    // Close on outside click
    $(document).on('click', function(e) {
         if (!$(e.target).closest('#emoji-picker').length && 
             !$(e.target).closest('#emoji-toggle-btn').length) {
             emojiPicker.removeClass('open').hide();
         }
    });
    
    // Auto-hide on input focus (Mobile only, optional behavior)
    messageInput.on('focus click', function() {
        if (window.innerWidth < 768) {
            emojiPicker.removeClass('open').hide();
        }
    });

    // Handle Resize (Optional: could close it to be safe)
    $(window).resize(function() {
         // Keep state, CSS handles layout transformation
    });
    
    function insertAtCursor(input, text) {
        const start = input.selectionStart || input.value.length;
        const end = input.selectionEnd || input.value.length;
        const val = input.value;
        input.value = val.substring(0, start) + text + val.substring(end);
        input.selectionStart = input.selectionEnd = start + text.length;
        input.focus();
    }
    
    // ============================================
    // Quick Reply Logic
    // ============================================
    const quickReplyModal = new bootstrap.Modal('#quick-reply-modal');
    const quickReplyBtn = $('#quick-reply-btn');
    
    // View Containers
    const qrViewList = $('#qr-view-list');
    const qrViewForm = $('#qr-view-form');
    
    // Components
    const qrList = $('#qr-list');
    const qrPreviewArea = $('#qr-preview-area');
    const qrPreviewText = $('#qr-preview-text');
    const qrVarsContainer = $('#qr-vars-container');
    const qrSearch = $('#qr-search');
    const qrCategoryFilter = $('#qr-category-filter');
    const qrUseBtn = $('#qr-use-btn');
    const qrCopyBtn = $('#qr-copy-btn');
    
    // Create/Edit/Delete Components
    const qrCreateBtn = $('#qr-create-btn');
    const qrFormBack = $('#qr-form-back');
    const qrForm = $('#qr-form');
    const qrFormTitle = $('#qr-form-title');
    const qrBtnDelete = $('#qr-btn-delete');
    
    // Form Inputs
    const qrIdInput = $('#qr-id');
    const qrShortcutInput = $('#qr-input-shortcut');
    const qrCategoryInput = $('#qr-input-category');
    const qrContentInput = $('#qr-input-content');

    // Media Inputs
    const qrFileInput = $('#qr-input-file');
    const qrMediaPreview = $('#qr-media-preview');
    const qrMediaUrl = $('#qr-media-url');
    const qrMediaId = $('#qr-media-id');
    const qrMediaType = $('#qr-media-type');
    const qrMediaFilename = $('#qr-media-filename');
    const qrBtnClearMedia = $('#qr-btn-clear-media');

    // Media Upload Handler
    qrFileInput.on('change', async function() {
        if (this.files.length === 0) return;
        const file = this.files[0];
        
        const val = validateMediaFile(file);
        if (!val.valid) {
            showToast(val.error, 'error');
            this.value = '';
            return;
        }

        qrMediaPreview.html('<div class="text-muted small"><i class="ti ti-loader ti-spin"></i> Uploading...</div>').show();
        
        const formData = new FormData();
        formData.append('file', file);
        formData.append('media_type', val.mediaType);
        if (window.currentWabaId) {
             formData.append('waba_pool_id', window.currentWabaId);
        }

        try {
            const res = await uploadMediaWithProgress(formData);
             qrMediaUrl.val(res.media_url);
             qrMediaId.val(res.media_id || '');
             qrMediaType.val(val.mediaType);
             qrMediaFilename.val(res.filename || file.name);
             
             qrMediaPreview.html(createMediaPreview(file, val.mediaType));
             qrBtnClearMedia.show();
             
        } catch (e) {
            console.error(e);
            showToast('Upload failed: ' + (e.message || 'Unknown error'), 'error');
            qrMediaPreview.hide();
            this.value = '';
        }
    });

    qrBtnClearMedia.on('click', function() {
        qrFileInput.val('');
        qrMediaUrl.val('');
        qrMediaId.val('');
        qrMediaType.val('');
        qrMediaFilename.val('');
        qrMediaPreview.hide().html('');
        $(this).hide();
    });
    
    let allQuickReplies = [];
    let currentSelectedQr = null;
    let qrVariables = {}; // Stores values for {name}, {phone}, etc.

    // Shared Data Loader
    function loadQuickRepliesData(callback, force = false) {
        if (!force && allQuickReplies.length > 0) {
            if (callback) callback();
            return;
        }

        $.get('{{ route("quick-replies.index") }}')
            .done(response => {
                allQuickReplies = response.data || [];
                if (callback) callback();
            })
            .fail(() => {
                console.error('Failed to load quick replies');
            });
    }

    // Autocomplete Logic
    function initQuickReplyAutocomplete() {
        const qrAutocomplete = $('#qr-autocomplete');
        
        // Hide on outside click
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.qr-autocomplete').length && !$(e.target).is(messageInput)) {
                qrAutocomplete.hide();
            }
        });

        function checkTrigger() {
            const val = messageInput.val();
            const cursorPos = messageInput[0].selectionStart;
            const textBeforeCursor = val.substring(0, cursorPos);

            // Regex: Last token starts with /
            const match = /(?:^|\s)\/([a-zA-Z0-9\s]*)$/.exec(textBeforeCursor);
            
            // console.log('Checking trigger:', { val, match }); // Debug log

            if (match) {
                const keyword = match[1].toLowerCase();
                
                loadQuickRepliesData(() => {
                    renderAutocomplete(keyword);
                });
            } else {
                qrAutocomplete.hide();
            }
        }

        // Debounce wrapper
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this, args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }

        const debouncedCheckTrigger = debounce(checkTrigger, 300);

        messageInput.on('keyup input click', function() {
             debouncedCheckTrigger();
        });
        
        function renderAutocomplete(keyword) {
             const filtered = allQuickReplies.filter(item => {
                const shortcut = (item.shortcut || '').toLowerCase();
                const content = (item.content || '').toLowerCase();
                if (!keyword) return true;
                return shortcut.includes(keyword) || content.includes(keyword);
            }).slice(0, 5);

            if (filtered.length === 0) {
                qrAutocomplete.hide();
                return;
            }
            
            function getItemPreview(it) {
                const replyType = it.reply_type || 'text';
                if (replyType === 'text') return (it.content || '').trim() || '—';
                if (replyType === 'button' || replyType === 'list' || replyType === 'interactive') {
                    const payload = it.reply_payload || {};
                    const interactive = payload.interactive || payload;
                    const bodyText = interactive.body?.text || '';
                    const typeLabel = replyType === 'button' ? 'Button' : (replyType === 'list' ? 'List' : 'Interactive');
                    return bodyText ? `[${typeLabel}] ${escapeHtml(bodyText.substring(0, 40))}${bodyText.length > 40 ? '…' : ''}` : `[${typeLabel}]`;
                }
                if (['image','video','audio','document','sticker'].indexOf(replyType) >= 0) {
                    return `[${replyType.charAt(0).toUpperCase() + replyType.slice(1)}]`;
                }
                return (it.content || '').trim() || '—';
            }
            
            let html = '';
            filtered.forEach(item => {
                 const sh = item.shortcut ? `/${escapeHtml(item.shortcut)}` : '';
                 const cat = item.category ? `[${escapeHtml(item.category)}]` : '';
                 const preview = getItemPreview(item);
                 html += `
                    <div class="qr-autocomplete-item" data-id="${item.id}">
                        <div class="qr-item-shortcut">${sh} <small class="text-muted">${cat}</small></div>
                        <div class="qr-item-preview">${preview}</div>
                    </div>
                 `;
            });
            
            qrAutocomplete.html(html).show();
        }
        
        // Select Suggestion (text = insert; interactive/media = send via API)
        qrAutocomplete.on('click', '.qr-autocomplete-item', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const id = $(this).data('id');
            const item = allQuickReplies.find(i => i.id == id);
            
            if (!item) {
                qrAutocomplete.hide();
                return;
            }
            
            const val = messageInput.val();
            const cursorPos = messageInput[0].selectionStart;
            const textBeforeCursor = val.substring(0, cursorPos);
            const match = /(?:^|\s)\/([a-zA-Z0-9\s]*)$/.exec(textBeforeCursor);
            
            if (!match) {
                qrAutocomplete.hide();
                return;
            }
            
            const fullMatch = match[0];
            const leadingSpace = fullMatch.startsWith(' ') ? ' ' : '';
            const startIndex = cursorPos - fullMatch.length + leadingSpace.length;
            const replyType = item.reply_type || 'text';
            const replyPayload = item.reply_payload || {};
            const customerName = $('#chat-name').text() != '-' ? $('#chat-name').text() : '';
            const customerPhone = $('#chat-phone').text() != '-' ? $('#chat-phone').text() : '';
            const agentName = '{{ auth()->user()->name }}';
            const qrVars = { name: customerName, phone: customerPhone, agent_name: agentName };
            
            function removeSlashFromInput() {
                const newVal = val.substring(0, startIndex) + leadingSpace + val.substring(cursorPos);
                messageInput.val(newVal).focus();
                messageInput[0].selectionStart = messageInput[0].selectionEnd = startIndex + leadingSpace.length;
                messageInput.trigger('input');
            }
            
            // Text: insert at cursor and remove /keyword
            if (replyType === 'text') {
                let content = (item.content || '').replace(/{name}/g, customerName)
                    .replace(/{phone}/g, customerPhone)
                    .replace(/{agent_name}/g, agentName);
                const newVal = val.substring(0, startIndex) + content + val.substring(cursorPos);
                messageInput.val(newVal).focus();
                messageInput.trigger('input');
                qrAutocomplete.hide();
                return;
            }
            
            // Interactive / media: send via API, then remove /keyword from input and push message to UI
            if (replyType === 'button' || replyType === 'list' || replyType === 'interactive') {
                if (!currentAssignmentId || !currentWabaId) {
                    showToast('No active conversation', 'error');
                    qrAutocomplete.hide();
                    return;
                }
                const interactiveData = replyPayload.interactive || replyPayload;
                const processedInteractive = replaceVariablesInObject(interactiveData, qrVars);
                const sendPayload = {
                    _token: '{{ csrf_token() }}',
                    type: 'interactive',
                    interactive: processedInteractive
                };
                $.ajax({
                    url: `{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/send`,
                    method: 'POST',
                    data: sendPayload,
                    timeout: 90000
                })
                    .done(function() {
                        showToast('Message sent', 'success');
                        removeSlashFromInput();
                        appendMessage({
                            id: 'temp_qr_' + Date.now(),
                            direction: 'outgoing',
                            type: 'interactive',
                            interactive: processedInteractive,
                            timestamp: new Date().toISOString(),
                            status: 'sent'
                        });
                        updateChatInList(currentAssignmentId, {
                            body: processedInteractive?.body?.text || '[Interactive]',
                            type: 'interactive',
                            timestamp: new Date().toISOString(),
                        }, 'outgoing');
                    })
                    .fail(function(xhr, status) {
                        if (status === 'timeout') {
                            showToast('Sending timed out. Please check status.', 'warning');
                            return;
                        }
                        const msg = xhr.responseJSON?.error || xhr.responseJSON?.message || 'Failed to send';
                        showToast(msg || 'Failed to send', 'error');
                    })
                    .always(function() { qrAutocomplete.hide(); });
                return;
            }
            
            if (['image','video','audio','document','sticker'].indexOf(replyType) >= 0) {
                if (!currentAssignmentId || !currentWabaId) {
                    showToast('No active conversation', 'error');
                    qrAutocomplete.hide();
                    return;
                }
                const mediaUrl = replyPayload.media_url || '';
                const caption = replyPayload.caption ? replaceVariables(replyPayload.caption, qrVars) : '';
                const sendPayload = {
                    _token: '{{ csrf_token() }}',
                    type: replyType,
                    // Prefer media_id if available, fallback to media_url only
                    media_id: replyPayload.media_id || undefined,
                    media_url: mediaUrl || undefined,
                    caption: caption || undefined,
                    filename: replyPayload.filename
                };
                $.ajax({
                    url: `{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/send`,
                    method: 'POST',
                    data: sendPayload,
                    timeout: 90000
                })
                    .done(function() {
                        showToast('Message sent', 'success');
                        removeSlashFromInput();
                        appendMessageWithContent({
                            id: 'temp_qr_' + Date.now(),
                            direction: 'outgoing',
                            type: replyType,
                            media_url: mediaUrl,
                            body: caption,
                            media_filename: replyPayload.filename,
                            timestamp: new Date().toISOString(),
                            status: 'sent'
                        });
                        updateChatInList(currentAssignmentId, {
                            body: caption || '',
                            type: replyType,
                            timestamp: new Date().toISOString(),
                        }, 'outgoing');
                    })
                    .fail(function(xhr, status) {
                        if (status === 'timeout') {
                            showToast('Sending timed out. Please check status.', 'warning');
                            return;
                        }
                        const msg = xhr.responseJSON?.error || xhr.responseJSON?.message || 'Failed to send';
                        showToast(msg || 'Failed to send', 'error');
                    })
                    .always(function() { qrAutocomplete.hide(); });
                return;
            }
            
            removeSlashFromInput();
            qrAutocomplete.hide();
        });
    }

    function initQuickReplies() {
        // Load data when modal opens if empty
        quickReplyBtn.on('click', function() {
            quickReplyModal.show();
            // Always ensure categories are extracted if data exists
            if (allQuickReplies.length > 0) {
                // If data exists (maybe from autocomplete), ensure dropdowns are populated
                // accessing inner functions is hard, so we just rely on loadQuickReplies logic
                // which we will update to handle this case
            }
            
            if (allQuickReplies.length === 0) {
                loadQuickReplies();
            } else {
                 // Force re-render if loaded externally to ensure categories exist
                 // We call loadQuickReplies again? No, it filters.
                 // We need to trigger extraction.
                 // Since we can't easily call inner functions, 
                 // we'll modify loadQuickReplies to be smarter.
                 loadQuickReplies(); 
            }
            showList(); // Ensure list is shown
        });

        // Search & Filter
        qrSearch.on('input', renderQuickReplyList);
        qrCategoryFilter.on('change', renderQuickReplyList);

        // Select Template (Delegate)
        qrList.on('click', '.qr-item', function(e) {
            // Ignore if clicked on edit button
            if ($(e.target).closest('.qr-edit-btn').length) return;
            
            const id = $(this).data('id');
            selectQuickReply(id);
        });

        // Dynamic Variable Input
        qrVarsContainer.on('input', 'input', function() {
            const key = $(this).data('key');
            qrVariables[key] = $(this).val();
            updateQrPreview();
        });

        // Copy button
        qrCopyBtn.on('click', function() {
             navigator.clipboard.writeText(qrPreviewText.val());
             const originalHtml = $(this).html();
             $(this).html('<i class="ti ti-check"></i> Copied');
             setTimeout(() => $(this).html(originalHtml), 1500);
        });

        // Use button - Enhanced for Rich Media Support
        qrUseBtn.on('click', function() {
            if (!currentSelectedQr) return;
            
            const replyType = currentSelectedQr.reply_type || 'text';
            const replyPayload = currentSelectedQr.reply_payload || {};
            
            // For text type, insert into input (existing behavior)
            if (replyType === 'text') {
                const text = qrPreviewText.val();
                insertAtCursor(messageInput[0], text);
                quickReplyModal.hide();
                return;
            }
            
            // For rich media types (interactive, media), send langsung via API
            if (!currentAssignmentId || !currentWabaId) {
                showToast('No active conversation', 'error');
                return;
            }
            
            // Build payload dasar
            let sendPayload = {
                _token: '{{ csrf_token() }}'
            };
            // Jika sedang reply ke pesan tertentu, sertakan context_message_id
            if (replyingTo && replyingTo.wa_message_id) {
                sendPayload.context_message_id = replyingTo.wa_message_id;
            }
            
            // Handle interactive types (button, list)
            if (replyType === 'button' || replyType === 'list' || replyType === 'interactive') {
                const interactiveData = replyPayload.interactive || replyPayload;
                
                // Replace variables in interactive payload
                const processedInteractive = replaceVariablesInObject(interactiveData, qrVariables);
                
                sendPayload.type = 'interactive';
                sendPayload.interactive = processedInteractive;

                if (!processedInteractive || (processedInteractive.interactive && Object.keys(processedInteractive.interactive).length === 0) || Object.keys(processedInteractive).length === 0) {
                    showToast('Template Quick Reply tidak valid (kosong). Silakan periksa template.', 'error');
                    console.error('Invalid Interactive Payload:', processedInteractive);
                    return;
                }
            }
            // Handle media types (image, video, audio, document, sticker)
            else if (['image', 'video', 'audio', 'document', 'sticker'].indexOf(replyType) >= 0) {
                sendPayload.type = replyType;
                // Prefer media_id when defined (uploaded to WA), but also support media_url-only quick replies
                if (replyPayload.media_id) {
                    sendPayload.media_id = replyPayload.media_id;
                }
                if (replyPayload.media_url) {
                    sendPayload.media_url = replyPayload.media_url;
                }
                if (replyPayload.caption) {
                    sendPayload.caption = replaceVariables(replyPayload.caption, qrVariables);
                }
                if (replyPayload.filename) {
                    sendPayload.filename = replyPayload.filename;
                }
            }
            else {
                // Fallback for other types (shouldn't happen, but just in case)
                sendPayload.type = replyType;
            }
            
            const tempQrId = 'temp_qr_' + Date.now();
            sendPayload.client_message_id = tempQrId;
            
            const nowIso = new Date().toISOString();
            let tempMsg = {
                id: tempQrId,
                direction: 'outgoing',
                type: sendPayload.type,
                timestamp: nowIso,
                status: 'sending'
            };
            if (sendPayload.type === 'interactive') {
                tempMsg.interactive = sendPayload.interactive;
            } else if (['image','video','audio','document','sticker'].indexOf(sendPayload.type) >= 0) {
                tempMsg.media_url = sendPayload.media_url;
                tempMsg.body = sendPayload.caption || '';
                tempMsg.media_filename = sendPayload.filename;
            }
            if (sendPayload.context_message_id && replyingTo) {
                tempMsg.context_message_id = sendPayload.context_message_id;
                tempMsg.quoted_message = { body: replyingTo.body, sender_name: replyingTo.sender_name };
            }
            appendMessageWithContent(tempMsg);
            
            const sentToAssignmentId = currentAssignmentId;
            const btn = $(this);
            btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i>Sending...');
            console.log('Quick Reply payload:', sendPayload);
            
            $.ajax({
                url: `{{ url('/client/inbox/conversations') }}/${currentAssignmentId}/send`,
                method: 'POST',
                data: sendPayload,
                timeout: 90000
            })
                .done(function(response) {
                    showToast('Message sent', 'success');
                    quickReplyModal.hide();
                    if (parseInt(currentAssignmentId) === parseInt(sentToAssignmentId)) {
                        const $wrap = $(`.message-wrapper[data-client-message-id="${tempQrId}"]`);
                        if ($wrap.length && response && response.message_id) {
                            $wrap.attr('data-id', response.message_id);
                            if (response.wa_message_id) $wrap.attr('data-wa-id', response.wa_message_id);
                        }
                    }
                    updateChatInList(sentToAssignmentId, {
                        body: tempMsg.body || (tempMsg.interactive && tempMsg.interactive.body && tempMsg.interactive.body.text) || '',
                        type: sendPayload.type,
                        timestamp: nowIso,
                    }, 'outgoing');
                    replyingTo = null;
                    updateReplyBar();
                })
                .fail(function(xhr, status) {
                    if (status === 'timeout') {
                        showToast('Sending timed out. Please check status.', 'warning');
                        console.warn('Quick Reply send timed out');
                    } else {
                        console.error('Quick Reply send failed:', xhr.responseJSON);
                        const msg = xhr.responseJSON?.error || xhr.responseJSON?.message || 'Failed to send';
                        showToast(msg, 'error');
                    }
                    const $failWrap = chatMessages.find('.message-wrapper').filter(function() {
                        return $(this).attr('data-client-message-id') === String(tempQrId);
                    });
                    if ($failWrap.length) {
                        $failWrap.addClass('failed')
                            .find('.message-status')
                            .replaceWith(getStatusIcon('failed') + getResendButtonHtml());
                    }
                })
                .always(function() {
                    btn.prop('disabled', false).html('<i class="ti ti-check me-1"></i>Use Template');
                });
        });

        // ============================
        // Create / Edit / Delete Logic
        // ============================
        
        // Open Create Form
        qrCreateBtn.on('click', function() {
            showForm('create');
        });

        // Open Edit Form (Delegated)
        qrList.on('click', '.qr-edit-btn', function(e) {
            e.stopPropagation(); // Stop selection
            const id = $(this).closest('.qr-item').data('id');
            const data = allQuickReplies.find(i => i.id == id);
            if (data) showForm('edit', data);
        });

        // Back to List
        qrFormBack.on('click', function() {
            showList();
        });

        // Save (Create/Update)
        qrForm.on('submit', function(e) {
            e.preventDefault();
            saveQuickReply();
        });

        // Delete
        qrBtnDelete.on('click', function() {
             if (confirm('Are you sure you want to delete this template?')) {
                 deleteQuickReply();
             }
        });
    }

    function showList() {
        qrViewForm.addClass('d-none');
        qrViewList.removeClass('d-none');
        qrCreateBtn.show(); 
    }

    function showForm(mode, data = null) {
        qrViewList.addClass('d-none');
        qrViewForm.removeClass('d-none');
        qrCreateBtn.hide(); // Hide "New" button when in form

        // Reset form
        qrForm[0].reset();
        qrBtnDelete.addClass('d-none');

        if (mode === 'create') {
            qrFormTitle.text('Create Quick Reply');
            qrIdInput.val('');
            // Reset Media
            qrFileInput.val('');
            qrMediaUrl.val('');
            qrMediaId.val('');
            qrMediaType.val('');
            qrMediaFilename.val('');
            qrMediaPreview.hide().html('');
            qrBtnClearMedia.hide();
        } else {
            qrFormTitle.text('Edit Quick Reply');
            qrIdInput.val(data.id);
            qrShortcutInput.val(data.shortcut);
            qrCategoryInput.val(data.category);
            qrContentInput.val(data.content);
            if (data.reply_type !== 'text' && data.reply_type !== 'button' && data.reply_type !== 'list' && data.reply_type !== 'interactive') {
                 // It is media
                 const payload = data.reply_payload || {};
                 qrMediaUrl.val(payload.media_url || '');
                 qrMediaId.val(payload.media_id || '');
                 qrMediaType.val(data.reply_type);
                 qrMediaFilename.val(payload.filename || '');
                 
                 if (payload.media_url) {
                      // Simple preview link/image
                      let preview = '';
                      if (data.reply_type === 'image' || data.reply_type === 'sticker') {
                          preview = `<img src="${payload.media_url}" style="max-height:100px;border-radius:4px">`;
                      } else {
                          preview = `<div class="p-2 bg-light border rounded"><i class="ti ti-file me-1"></i> ${payload.filename || 'Media File'}</div>`;
                      }
                      qrMediaPreview.html(preview).show();
                      qrBtnClearMedia.show();
                      qrFileInput.val(''); // Can't set file input value, but clear it
                 }
            }
            qrBtnDelete.removeClass('d-none');
        }
    }

    function loadQuickReplies(force = false) {
        loadQuickRepliesData(() => {
             extractCategories();
             renderQuickReplyList();
             updateCategoryDataList();
        }, force);
    }

    function saveQuickReply() {
        const id = qrIdInput.val();
        const isEdit = !!id;
        const url = isEdit ? `{{ url('api/inbox/quick-replies') }}/${id}` : `{{ route('quick-replies.store') }}`;
        const method = isEdit ? 'PUT' : 'POST';

        const payload = {
            shortcut: qrShortcutInput.val(),
            category: qrCategoryInput.val(),
            content: qrContentInput.val(),
            _token: '{{ csrf_token() }}'
        };

        const mediaUrl = qrMediaUrl.val();
        if (mediaUrl) {
            payload.reply_type = qrMediaType.val();
            payload.reply_payload = {
                media_url: mediaUrl,
                media_id: qrMediaId.val(),
                caption: qrContentInput.val(),
                filename: qrMediaFilename.val()
            };
        } else {
             payload.reply_type = 'text';
             payload.reply_payload = { message: qrContentInput.val() };
        }

        const saveBtn = $('#qr-btn-save');
        saveBtn.prop('disabled', true).text('Saving...');

        $.ajax({
            url: url,
            method: method,
            data: payload,
            success: function(response) {
                showToast(isEdit ? 'Updated successfully' : 'Created successfully', 'success');
                loadQuickReplies(true);
                showList();
            },
            error: function(xhr) {
                const msg = xhr.responseJSON?.message || 'Failed to save';
                showToast(msg, 'error');
            },
            complete: function() {
                saveBtn.prop('disabled', false).text('Save Template');
            }
        });
    }

    function deleteQuickReply() {
        const id = qrIdInput.val();
        if (!id) return;

        const deleteBtn = qrBtnDelete;
        deleteBtn.prop('disabled', true).text('Deleting...');

        $.ajax({
            url: `{{ url('api/inbox/quick-replies') }}/${id}`,
            method: 'DELETE',
            success: function() {
                showToast('Deleted successfully', 'success');
                loadQuickReplies(true);
                showList();
            },
            error: function(xhr) {
                showToast('Failed to delete', 'error');
            }
        });
    }

    function extractCategories() {
        const categories = [...new Set(allQuickReplies.map(item => item.category).filter(Boolean))];
        let html = '<option value="">All Categories</option>';
        categories.forEach(cat => {
            html += `<option value="${cat}">${cat}</option>`;
        });
        qrCategoryFilter.html(html);
    }
    
    function updateCategoryDataList() {
        const categories = [...new Set(allQuickReplies.map(item => item.category).filter(Boolean))];
        let html = '';
        categories.forEach(cat => {
            html += `<option value="${cat}">`;
        });
        $('#qr-category-list').html(html);
    }

    function renderQuickReplyList() {
        const search = qrSearch.val().toLowerCase();
        const cat = qrCategoryFilter.val();

        const filtered = allQuickReplies.filter(item => {
            const matchSearch = (item.shortcut || '').toLowerCase().includes(search) || 
                                (item.content || '').toLowerCase().includes(search);
            const matchCat = cat === '' || item.category === cat;
            return matchSearch && matchCat;
        });

        if (filtered.length === 0) {
            qrList.html('<div class="text-center p-4 text-muted">No templates found</div>');
            return;
        }

        let html = '';
        filtered.forEach(item => {
            const shortcutBadge = item.shortcut ? `<span class="badge bg-secondary me-2">/${item.shortcut}</span>` : '';
            html += `
                <button class="list-group-item list-group-item-action qr-item p-2" data-id="${item.id}">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <small class="fw-bold text-primary">${shortcutBadge}${item.category || 'General'}</small>
                        <div class="btn btn-sm btn-light btn-icon qr-edit-btn p-0 px-2" title="Edit" style="z-index: 2;"><i class="ti ti-pencil"></i></div>
                    </div>
                    <p class="mb-0 small text-truncate text-break text-muted">${escapeHtml(item.content)}</p>
                </button>
            `;
        });
        qrList.html(html);
    }

    function selectQuickReply(id) {
        currentSelectedQr = allQuickReplies.find(i => i.id == id);
        if (!currentSelectedQr) return;

        qrList.find('.active').removeClass('active');
        qrList.find(`[data-id="${id}"]`).addClass('active');

        // Reset variables
        qrVariables = {};
        
        // Auto-fill common variables
        const chatName = $('#chat-name').text();
        const chatPhone = $('#chat-phone').text();
        
        qrVariables['name'] = chatName != '-' ? chatName : '';
        qrVariables['phone'] = chatPhone != '-' ? chatPhone : '';
        qrVariables['agent_name'] = '{{ auth()->user()->name }}';

        renderQrVariables();
        updateQrPreview();
        qrPreviewArea.show();
    }

    function renderQrVariables() {
        const regex = /\{(\w+)\}/g;
        let match;
        const foundVars = new Set();
        
        // Find all variables in content
        while ((match = regex.exec(currentSelectedQr.content)) != null) {
            foundVars.add(match[1]);
        }

        let html = '';
        foundVars.forEach(v => {
            const val = qrVariables[v] || '';
            html += `
                <div class="col-6">
                    <label class="small text-muted">${v}</label>
                    <input type="text" class="form-control form-control-sm" data-key="${v}" value="${val}">
                </div>
            `;
        });
        qrVarsContainer.html(html);
    }

    function updateQrPreview() {
        if (!currentSelectedQr) return;
        let text = currentSelectedQr.content;
        
        // 1. Replace variables in text
        for (const [key, val] of Object.entries(qrVariables)) {
            text = text.replace(new RegExp(`\\{${key}\\}`, 'g'), val);
        }
        
        const type = currentSelectedQr.reply_type;
        const textArea = $('#qr-preview-text');
        const interactiveDiv = $('#qr-preview-interactive');

        if (type === 'button' || type === 'list') {
            textArea.hide();
            interactiveDiv.show();
            
            // 2. Process payload variables
            const payload = currentSelectedQr.reply_payload || {};
            const processedPayload = replaceVariablesInObject(payload, qrVariables);
            
            interactiveDiv.html(renderInteractivePreview(text, processedPayload));
        } else {
            textArea.show().val(text);
            interactiveDiv.hide();
        }
    }
    
    function renderInteractivePreview(text, payload) {
        let html = `<div class="mb-3">${text ? String(text).replace(/\n/g, '<br>') : ''}</div>`;
        
        const interactive = payload.interactive || payload;
        
        if (interactive.type === 'button') {
             const buttons = interactive.action?.buttons || [];
             html += `<div class="d-grid gap-2">`;
             buttons.forEach(btn => {
                 html += `<button class="btn btn-outline-primary btn-sm text-start" disabled>${btn.reply?.title || 'Button'}</button>`;
             });
             html += `</div>`;
        } else if (interactive.type === 'list') {
             const buttonText = interactive.action?.button || 'Menu';
             const sections = interactive.action?.sections || [];
             
             html += `<div class="d-grid mb-2"><button class="btn btn-outline-primary btn-sm" disabled>${buttonText}</button></div>`;
             
             html += `<div class="border rounded bg-white small">`;
             sections.forEach(sec => {
                 if(sec.title) html += `<div class="p-2 bg-light fw-bold border-bottom">${sec.title}</div>`;
                 sec.rows?.forEach(row => {
                     html += `<div class="p-2 border-bottom last-no-border">
                        <div class="fw-bold">${row.title}</div>
                        ${row.description ? `<div class="text-muted" style="font-size:0.85em">${row.description}</div>` : ''}
                     </div>`;
                 });
             });
             html += `</div>`;
        }
        return html;
    }

    // Helper: Replace variables in a string
    function replaceVariables(text, variables) {
        if (!text || typeof text != 'string') return text;
        let result = text;
        for (const [key, val] of Object.entries(variables || {})) {
            result = result.replace(new RegExp(`\\{${key}\\}`, 'g'), val || '');
        }
        return result;
    }

    // Helper: Deep replace variables in objects/arrays (for interactive payloads)
    function replaceVariablesInObject(obj, variables) {
        if (!obj) return obj;
        if (typeof obj === 'string') {
            return replaceVariables(obj, variables);
        }
        if (Array.isArray(obj)) {
            return obj.map(item => replaceVariablesInObject(item, variables));
        }
        if (typeof obj === 'object') {
            const result = {};
            for (const [key, value] of Object.entries(obj)) {
                result[key] = replaceVariablesInObject(value, variables);
            }
            return result;
        }
        return obj;
    }

    // Initialize logic
    initQuickReplies();

    // ============ Spam Score Badge Logic ============
    window.updateSpamBadge = function(count, limit) {
        const badge = document.getElementById('spam-score-badge');
        if (!badge) return;

        const counter = document.getElementById('spam-counter');
        const barFill = document.getElementById('spam-bar-fill');
        const detail  = document.getElementById('spam-tooltip-detail');
        const icon    = badge.querySelector('.spam-icon');

        count = parseInt(count) || 0;
        limit = parseInt(limit) || 5;

        // Update counter text
        if (counter) counter.textContent = count + '/' + limit;

        // Update data attributes
        badge.dataset.count = count;
        badge.dataset.limit = limit;

        // Calculate percentage
        const pct = Math.min((count / limit) * 100, 100);

        // Determine level
        let level, barColor;
        if (count === 0) {
            level = 'level-safe';
            barColor = '#22c55e';
        } else if (count < Math.ceil(limit * 0.6)) {
            level = 'level-warning';
            barColor = '#f59e0b';
        } else {
            level = 'level-danger';
            barColor = '#ef4444';
        }

        // Update badge class
        badge.className = 'spam-score-badge ' + level;

        // Update icon
        if (icon) {
            icon.className = 'ti spam-icon ' + (
                level === 'level-safe'   ? 'ti-shield-check' :
                level === 'level-warning' ? 'ti-alert-triangle' :
                                            'ti-shield-x'
            );
        }

        // Update bar fill
        if (barFill) {
            barFill.style.width = pct + '%';
            barFill.style.background = barColor;
        }

        // Update detail text
        if (detail) {
            const remaining = Math.max(limit - count, 0);
            if (count === 0) {
                detail.textContent = 'Tidak ada pelanggaran. Status aman ✓';
            } else if (remaining > 0) {
                detail.textContent = `Sisa ${remaining} pelanggaran lagi sebelum akun dinonaktifkan.`;
            } else {
                detail.textContent = '⚠ Batas tercapai! Akun akan segera dinonaktifkan.';
            }
        }
    };

    // Initialize badge on page load
    (function() {
        const badge = document.getElementById('spam-score-badge');
        if (badge) {
            updateSpamBadge(badge.dataset.count, badge.dataset.limit);
        }
    })();

    // Auto Init on Load (optional, but wait for click is better)
    
})();
</script>
@endpush