/* ===== Inbox Chat (tampilan mirip WhatsApp) ===== */
.wa-app { display: flex; height: calc(100vh - 230px); min-height: 520px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(15,23,42,.12); border: 1px solid #e2e8f0; font-family: 'Inter', system-ui, sans-serif; color: #111b21; }
.wa-side { width: 380px; max-width: 42%; min-width: 300px; display: flex; flex-direction: column; border-right: 1px solid #e9edef; background: #fff; }
.wa-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #efeae2; position: relative; }

.wa-side-head { background: #f0f2f5; padding: 10px 14px; display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.wa-side-head h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.wa-brand-select { background: #fff; border: 1px solid #d1d7db; border-radius: 8px; font-size: .75rem; font-weight: 700; padding: 5px 8px; color: #0f766e; outline: none; }
.wa-botstate { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; color: #667781; }
.wa-botstate i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; display: inline-block; }
.wa-botstate.on i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.wa-botstate.off i { background: #ef4444; }

.wa-search { padding: 8px 12px; background: #fff; border-bottom: 1px solid #f0f2f5; }
.wa-search input { width: 100%; background: #f0f2f5; border: 0; border-radius: 8px; padding: 8px 12px; font-size: .85rem; outline: none; }
.wa-list { flex: 1; overflow-y: auto; }
.wa-empty { padding: 36px 20px; text-align: center; color: #667781; font-size: .85rem; line-height: 1.5; }

.wa-item { display: flex; gap: 12px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f5f6f6; align-items: center; }
.wa-item:hover { background: #f5f6f6; }
.wa-item.active { background: #f0f2f5; }
.wa-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.05rem; }
.wa-item-body { flex: 1; min-width: 0; }
.wa-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wa-item-name { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-item-time { font-size: .7rem; color: #667781; flex-shrink: 0; }
.wa-item-time.unread { color: #00a884; font-weight: 600; }
.wa-item-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.wa-item-last { font-size: .82rem; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; }
.wa-badge { background: #25d366; color: #fff; font-size: .68rem; font-weight: 700; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa-order-chip { font-size: .62rem; font-weight: 700; background: #e0f2fe; color: #0369a1; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }

/* panel kanan */
.wa-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #667781; background: #f0f2f5; text-align: center; padding: 24px; border-bottom: 6px solid #25d366; }
.wa-placeholder h4 { font-size: 1.3rem; font-weight: 300; color: #41525d; margin: 12px 0 6px; }
.wa-placeholder p { font-size: .85rem; max-width: 360px; line-height: 1.5; }

.wa-thread { display: none; flex-direction: column; flex: 1; min-height: 0; }
.wa-thread.show { display: flex; }
.wa-thread-head { background: #f0f2f5; padding: 9px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #e9edef; }
.wa-back { display: none; background: none; border: 0; font-size: 1.3rem; color: #54656f; cursor: pointer; padding: 0 4px; }
.wa-thread-title { flex: 1; min-width: 0; }
.wa-thread-title b { display: block; font-size: .98rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-thread-title span { font-size: .74rem; color: #667781; }

.wa-msgs { flex: 1; overflow-y: auto; padding: 14px 6% 10px; background-color: #efeae2;
    background-image: radial-gradient(rgba(11,20,26,.045) 1.2px, transparent 1.2px), radial-gradient(rgba(11,20,26,.03) 1px, transparent 1px);
    background-size: 26px 26px, 41px 41px; background-position: 0 0, 13px 17px; }
.wa-day { text-align: center; margin: 12px 0; }
.wa-day span { background: #fff; color: #54656f; font-size: .72rem; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-older { text-align: center; margin-bottom: 8px; }
.wa-older button { background: #fff; border: 0; border-radius: 8px; font-size: .75rem; color: #027eb5; padding: 6px 14px; cursor: pointer; box-shadow: 0 1px .5px rgba(11,20,26,.13); }

.wa-row { display: flex; margin-bottom: 2px; }
.wa-row.out { justify-content: flex-end; }
.wa-row.first { margin-top: 8px; }
.wa-bubble { position: relative; max-width: min(78%, 520px); padding: 6px 8px 6px 9px; border-radius: 8px; background: #fff; box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: .9rem; line-height: 1.38; word-wrap: break-word; overflow-wrap: anywhere; }
.wa-row.out .wa-bubble { background: #d9fdd3; }
.wa-row.in.first .wa-bubble { border-top-left-radius: 0; }
.wa-row.out.first .wa-bubble { border-top-right-radius: 0; }
.wa-row.in.first .wa-bubble::before { content: ''; position: absolute; top: 0; left: -7px; border: 7px solid transparent; border-top-color: #fff; border-right-color: #fff; }
.wa-row.out.first .wa-bubble::before { content: ''; position: absolute; top: 0; right: -7px; border: 7px solid transparent; border-top-color: #d9fdd3; border-left-color: #d9fdd3; }
.wa-sender { font-size: .7rem; font-weight: 700; color: #0f766e; margin-bottom: 2px; }
.wa-sender.bot { color: #7c3aed; }
.wa-sender.phone { color: #b45309; }
.wa-text { white-space: pre-wrap; }
.wa-text a { color: #027eb5; text-decoration: underline; }
.wa-meta { float: right; margin: 6px 0 -3px 10px; font-size: .66rem; color: #667781; display: inline-flex; align-items: center; gap: 3px; height: 15px; }
.wa-tick { width: 16px; height: 11px; }
.wa-tick.read { color: #53bdeb; }
.wa-deleted { color: #667781; font-style: italic; }
.wa-reply-btn { position: absolute; top: 3px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: #54656f; font-size: .8rem; cursor: pointer; opacity: 0; transition: opacity .12s; display: flex; align-items: center; justify-content: center; }
.wa-bubble:hover .wa-reply-btn { opacity: 1; }
@media (hover: none) { .wa-reply-btn { opacity: .75; } }

.wa-quote { background: rgba(11,20,26,.06); border-left: 4px solid #06cf9c; border-radius: 6px; padding: 5px 8px; margin-bottom: 4px; cursor: pointer; font-size: .8rem; }
.wa-row.in .wa-quote { border-left-color: #53bdeb; }
.wa-quote b { display: block; font-size: .72rem; color: #06a07a; margin-bottom: 1px; }
.wa-row.in .wa-quote b { color: #53a6c9; }
.wa-quote span { color: #54656f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.wa-img { display: block; max-width: 100%; width: 280px; max-height: 340px; object-fit: cover; border-radius: 6px; cursor: zoom-in; margin-bottom: 3px; background: #dfe5e7; min-height: 80px; }
.wa-sticker { width: 130px; height: 130px; object-fit: contain; display: block; }
.wa-video, .wa-audio { max-width: 100%; border-radius: 6px; margin-bottom: 3px; }
.wa-video { width: 280px; max-height: 340px; background: #000; }
.wa-audio { width: 260px; height: 38px; }
.wa-media-loading { width: 220px; height: 120px; border-radius: 6px; background: #dfe5e7; color: #667781; font-size: .75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 3px; }
.wa-doc { display: flex; align-items: center; gap: 10px; background: rgba(11,20,26,.06); border-radius: 6px; padding: 9px 10px; margin-bottom: 3px; text-decoration: none; color: inherit; min-width: 200px; }
.wa-doc-icon { width: 34px; height: 40px; border-radius: 4px; background: #ef4444; color: #fff; font-size: .62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.wa-doc-name { font-size: .84rem; font-weight: 500; word-break: break-all; }
.wa-doc-sub { font-size: .7rem; color: #667781; }
.wa-loc { display: block; text-decoration: none; color: inherit; margin-bottom: 3px; }
.wa-loc-map { width: 260px; height: 110px; border-radius: 6px; background: linear-gradient(135deg,#d1fae5,#bae6fd); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.wa-loc small { display: block; color: #027eb5; font-size: .75rem; margin-top: 3px; }

/* composer */
.wa-compose { background: #f0f2f5; padding: 8px 12px; display: flex; align-items: flex-end; gap: 8px; }
.wa-compose textarea { flex: 1; border: 0; border-radius: 10px; padding: 10px 14px; font-size: .92rem; resize: none; max-height: 130px; outline: none; font-family: inherit; line-height: 1.35; }
.wa-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: #54656f; cursor: pointer; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa-icon-btn:hover { background: #e2e6e9; }
.wa-send { background: #00a884; color: #fff; }
.wa-send:hover { background: #008f70; }
.wa-send:disabled { background: #9bd3c7; cursor: not-allowed; }
.wa-reply-bar { background: #f0f2f5; padding: 8px 12px 0; }
.wa-reply-bar > div { background: #fff; border-radius: 8px; border-left: 5px solid #06cf9c; padding: 7px 10px; display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; }
.wa-reply-bar b { color: #06a07a; font-size: .74rem; display: block; }
.wa-reply-bar span { color: #54656f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wa-reply-bar button { margin-left: auto; background: none; border: 0; font-size: 1.1rem; color: #667781; cursor: pointer; }
.wa-attach-prev { background: #f0f2f5; padding: 8px 12px 0; }
.wa-attach-prev > div { background: #fff; border-radius: 8px; padding: 8px 10px; display: flex; gap: 10px; align-items: center; font-size: .82rem; }
.wa-attach-prev img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.wa-attach-prev button { margin-left: auto; background: none; border: 0; font-size: 1.1rem; color: #667781; cursor: pointer; }
.wa-notice { background: #fff8e1; color: #8a6d00; font-size: .76rem; text-align: center; padding: 6px 10px; }

.wa-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; }
.wa-lightbox.show { display: flex; }
.wa-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.wa-lightbox button { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; }

@keyframes waFlash { 0%,100% { background-color: transparent; } 30% { background-color: rgba(255,214,0,.35); } }
.wa-flash { animation: waFlash 1.4s ease; border-radius: 8px; }

@media (max-width: 768px) {
    .wa-app { height: calc(100vh - 190px); }
    .wa-side { width: 100%; max-width: 100%; }
    .wa-main { display: none; }
    .wa-app.chat-open .wa-side { display: none; }
    .wa-app.chat-open .wa-main { display: flex; }
    .wa-back { display: block; }
    .wa-msgs { padding: 12px 10px 8px; }
    .wa-bubble { max-width: 88%; }
    .wa-img, .wa-video { width: 230px; }
}

/* ----- lokasi, rekam suara, menu pesan ----- */
.wa-loc-panel { background: #f0f2f5; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #e0e4e7; }
.wa-loc-panel b { font-size: .85rem; }
.wa-loc-panel input { border: 1px solid #d1d7db; border-radius: 8px; padding: 8px 10px; font-size: .85rem; outline: none; background: #fff; }
.wa-loc-panel div { display: flex; gap: 8px; }
.wa-loc-panel button { background: #00a884; color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.wa-loc-panel button.ghost { background: #e2e6e9; color: #41525d; }
.wa-loc-panel button:disabled { opacity: .6; cursor: wait; }
.wa-loc-panel small { color: #667781; font-size: .72rem; }
.wa-rec-bar { background: #f0f2f5; padding: 8px 12px; display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.wa-rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; animation: waPulse 1s infinite; }
.wa-rec-hint { flex: 1; color: #667781; font-size: .8rem; }
@keyframes waPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.wa-menu { position: fixed; z-index: 10000; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(11,20,26,.25); padding: 6px 0; min-width: 210px; }
.wa-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 16px; font-size: .86rem; color: #111b21; cursor: pointer; }
.wa-menu button:hover { background: #f0f2f5; }
.wa-menu button.danger { color: #dc2626; }
.wa-app .hidden { display: none !important; }

/* --- fitur tambahan: jeda bot, cari, template, lompat --- */
.wa-pause-btn { border: 1px solid #cfd8dc; background: #fff; border-radius: 999px; padding: 5px 11px; font-size: .74rem; font-weight: 600; cursor: pointer; white-space: nowrap; color: #0f766e; }
.wa-pause-btn.paused { background: #fff7ed; border-color: #fdba74; color: #c2410c; }
.wa-find-bar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #f7f8fa; border-bottom: 1px solid #e9edef; }
.wa-find-bar input { flex: 1; border: 1px solid #d1d7db; border-radius: 8px; padding: 6px 10px; font-size: .85rem; outline: none; }
.wa-find-bar span { font-size: .75rem; color: #667781; min-width: 34px; text-align: center; }
.wa-find-bar button { border: 0; background: #e9edef; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; }
.wa-row.found .wa-bubble { outline: 2px solid #fde68a; }
.wa-row.found-cur .wa-bubble { outline: 3px solid #f59e0b; }
.wa-jump { position: absolute; right: 18px; bottom: 150px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; z-index: 5; }
.wa-tpl-panel { max-height: 240px; overflow: auto; background: #fff; border-top: 1px solid #e9edef; padding: 6px 10px; }
.wa-tpl-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px 8px; font-size: .85rem; }
.wa-tpl-head button { border: 0; background: #00a884; color: #fff; border-radius: 6px; padding: 4px 10px; font-size: .75rem; cursor: pointer; }
.wa-tpl-item { display: flex; align-items: stretch; gap: 6px; margin-bottom: 6px; }
.wa-tpl-use { flex: 1; text-align: left; border: 1px solid #e9edef; background: #f9fafb; border-radius: 8px; padding: 7px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.wa-tpl-use b { font-size: .8rem; } .wa-tpl-use span { font-size: .75rem; color: #667781; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wa-tpl-del { border: 0; background: transparent; cursor: pointer; }

/* --- panel info kontak --- */
.wa-info { max-height: 52%; overflow: auto; background: #fff; border-bottom: 1px solid #e9edef; padding: 8px 14px; font-size: .82rem; }
.wa-info-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.wa-info-head button { border: 0; background: #e9edef; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; }
.wa-info-row { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
.wa-info-row span { color: #667781; min-width: 78px; }
.wa-info-row b { flex: 1; font-weight: 600; word-break: break-word; }
.wa-info-row button, .wa-info-order button { border: 1px solid #cfd8dc; background: #f9fafb; border-radius: 6px; padding: 2px 8px; font-size: .72rem; cursor: pointer; }
.wa-info-row a { font-size: .75rem; color: #0284c7; }
.wa-info-sec { margin: 10px 0 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #00a884; font-weight: 700; }
.wa-info-order { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f0f2f5; }
.wa-info-order span { color: #667781; font-size: .76rem; } .wa-info-order small { color: #94a3b8; }

.wa-filters { display: flex; gap: 6px; padding: 6px 12px; border-bottom: 1px solid #f0f2f5; }
.wa-filters button { border: 0; background: #f0f2f5; border-radius: 999px; padding: 4px 11px; font-size: .74rem; cursor: pointer; color: #54656f; }
.wa-filters button.on { background: #d9fdd3; color: #0b6b4f; font-weight: 700; }
.wa-icon-btn.on { background: #d9fdd3; border-radius: 8px; }

.wa-thread.drop::after { content: "Lepaskan file untuk dilampirkan"; position: absolute; inset: 0; background: rgba(0,168,132,.88); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; z-index: 20; pointer-events: none; }
.wa-thread { position: relative; }

.wa-react-row { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid #f0f2f5; }
.wa-react-row button { border: 0; background: transparent; font-size: 1.25rem; cursor: pointer; border-radius: 8px; padding: 2px 5px; }
.wa-react-row button:hover, .wa-react-row button.on { background: #d9fdd3; }
.wa-reactions { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #e9edef; border-radius: 999px; padding: 0 6px; font-size: .85rem; margin-left: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.wa-reactions small { font-size: .65rem; color: #667781; }
.wa-emoji-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; max-height: 170px; overflow: auto; background: #fff; border-top: 1px solid #e9edef; padding: 6px 10px; }
.wa-emoji-panel button { border: 0; background: transparent; font-size: 1.35rem; cursor: pointer; border-radius: 6px; padding: 3px; }
.wa-emoji-panel button:hover { background: #f0f2f5; }

.wa-fwd { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 14px; }
.wa-fwd-card { background: #fff; border-radius: 12px; width: min(420px, 100%); max-height: 86%; display: flex; flex-direction: column; padding: 12px; gap: 8px; }
.wa-fwd-head { display: flex; justify-content: space-between; align-items: center; }
.wa-fwd-head button { border: 0; background: #e9edef; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; }
.wa-fwd-card > input { border: 1px solid #d1d7db; border-radius: 8px; padding: 7px 10px; font-size: .85rem; outline: none; }
.wa-fwd-list { overflow: auto; flex: 1; }
.wa-fwd-list label { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f0f2f5; cursor: pointer; font-size: .85rem; }
.wa-fwd-list small { display: block; color: #667781; font-size: .72rem; }
.wa-fwd-go { border: 0; background: #00a884; color: #fff; border-radius: 8px; padding: 9px; font-weight: 700; cursor: pointer; }
.wa-fwd-go:disabled { opacity: .6; }

/* ---- Chat nomor baru, hasil pencarian pelanggan, link & nomor di pesan ---- */
.wa-newchat { padding: 10px 12px; background: #f0fdf4; border-bottom: 1px solid #d1fae5; display: flex; flex-direction: column; gap: 6px; }
.wa-newchat.hidden { display: none; }
.wa-newchat b { font-size: .8rem; color: #065f46; }
.wa-newchat input { width: 100%; background: #fff; border: 1px solid #d1d7db; border-radius: 8px; padding: 7px 10px; font-size: .85rem; outline: none; }
.wa-newchat div { display: flex; gap: 6px; }
.wa-newchat button { background: #00a884; color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; font-weight: 700; font-size: .8rem; cursor: pointer; }
.wa-newchat button.ghost { background: #e5e7eb; color: #374151; }
.wa-lookup-title { padding: 8px 14px; font-size: .7rem; font-weight: 700; color: #667781; text-transform: uppercase; letter-spacing: .04em; background: #f0f2f5; }
.wa-lookup .wa-item-last { color: #667781; }
.wa-bubble a { color: #027eb5; text-decoration: underline; word-break: break-all; }
.wa-bubble a.wa-phone { color: #027eb5; font-weight: 600; cursor: pointer; }