@extends('agency.layouts.app')

@section('title', 'Mesajlarım')
@section('page_title', 'Mesajlarım')

@push('styles')
@php
    $reverbOn = config('broadcasting.default') === 'reverb' && config('broadcasting.connections.reverb.key');
@endphp
<style>
    :root { --mx-a:#5b5bf0; --mx-a2:#8b5cf6; --mx-ink:#0e1526; --mx-ink2:#1b2437;
            --mx-text:#0f172a; --mx-muted:#8b93a7; --mx-soft:#f4f5f9; --mx-soft2:#eceef4;
            --mx-border:#eceef4; --mx-online:#22c55e; }
    .content-area:has(.msgx) { padding:1.4rem 1.6rem; }
    /* Bu sayfada zaten tam messenger var; sağ-alttaki yüzen launcher'ı gizle (gönder butonunu kapatmasın) */
    #chatWidget { display:none !important; }
    .msgx { display:grid; grid-template-columns:360px 1fr; grid-template-rows:minmax(0, 1fr); gap:0; height:calc(100vh - var(--header-height, 70px) - 2.8rem);
        background:#fff; border:1px solid #e9edf3; border-radius:26px; overflow:hidden;
        box-shadow:0 24px 60px -30px rgba(15,23,42,.28); font-family:'Inter',sans-serif; }
    .msgx * { box-sizing:border-box; }

    /* ── Sol panel: sohbet listesi ── */
    .msgx-side { display:flex; flex-direction:column; border-right:1px solid var(--mx-border); background:#fff; min-width:0; min-height:0; }
    .msgx-side-head { padding:22px 22px 8px; }
    .msgx-side-title { display:flex; align-items:center; justify-content:space-between; }
    .msgx-side-title h2 { font-size:1.3rem; font-weight:800; color:var(--mx-text); letter-spacing:-.02em; margin:0; }
    .msgx-new { width:40px; height:40px; border-radius:13px; border:none; cursor:pointer; color:#fff;
        background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); box-shadow:0 8px 18px -6px rgba(91,91,240,.5); transition:transform .15s; }
    .msgx-new:hover { transform:translateY(-2px); }
    .msgx-search { display:flex; align-items:center; gap:10px; margin:14px 0 4px; padding:11px 15px;
        background:var(--mx-soft); border:1px solid transparent; border-radius:14px; color:var(--mx-muted); transition:.15s; }
    .msgx-search:focus-within { background:#fff; border-color:var(--mx-a); box-shadow:0 0 0 4px rgba(91,91,240,.1); }
    .msgx-search input { flex:1; border:none; background:none; outline:none; font-size:.9rem; color:var(--mx-text); }
    .msgx-scroll { flex:1; overflow-y:auto; padding:6px 12px 16px; }
    .msgx-scroll::-webkit-scrollbar { width:8px; }
    .msgx-scroll::-webkit-scrollbar-thumb { background:#e4e7ee; border-radius:8px; }
    .msgx-label { font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mx-muted); padding:12px 10px 5px; }

    .msgx-conv { display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:16px; cursor:pointer; transition:background .14s; position:relative; }
    .msgx-conv:hover { background:var(--mx-soft); }
    .msgx-conv.active { background:linear-gradient(135deg,rgba(91,91,240,.1),rgba(139,92,246,.08)); }
    .msgx-conv.active::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:linear-gradient(var(--mx-a),var(--mx-a2)); }
    .msgx-conv-body { flex:1; min-width:0; }
    .msgx-conv-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
    .msgx-conv-name { font-weight:700; color:var(--mx-text); font-size:.94rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .msgx-conv-time { font-size:.7rem; color:var(--mx-muted); flex-shrink:0; font-weight:600; }
    .msgx-conv-prev { font-size:.82rem; color:var(--mx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
    .msgx-conv-prev.unread { color:var(--mx-text); font-weight:600; }
    .msgx-conv-badge { min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:linear-gradient(135deg,var(--mx-a),var(--mx-a2));
        color:#fff; font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 8px rgba(91,91,240,.34); }
    .msgx-start-ic { color:var(--mx-a); font-size:1rem; flex-shrink:0; }

    /* ── Avatar ── */
    .mx-av { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:17px;
        color:#fff; font-weight:800; font-size:1rem; overflow:hidden; flex-shrink:0; background-size:cover; background-position:center; box-shadow:0 3px 10px rgba(15,23,42,.12); }
    .mx-av-sm { width:44px; height:44px; border-radius:14px; font-size:.85rem; }

    /* ── Çevrimiçi göstergesi ── */
    .mx-avw { position:relative; display:inline-flex; flex-shrink:0; }
    .mx-dot { position:absolute; right:-2px; bottom:-2px; width:14px; height:14px; border-radius:50%;
        background:#94a3b8; border:2.5px solid #fff; transition:background .2s; }
    .mx-dot.on { background:#22c55e; }

    /* ── Sağ panel: thread ── */
    .msgx-main { display:flex; flex-direction:column; min-width:0; min-height:0; background:linear-gradient(180deg,#fbfbfe,#f6f7fb); position:relative; }
    .msgx-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--mx-muted); padding:40px; }
    .msgx-empty-ic { width:96px; height:96px; border-radius:30px; display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--mx-a);
        background:linear-gradient(135deg,rgba(91,91,240,.12),rgba(139,92,246,.12)); margin-bottom:18px; }
    .msgx-empty h3 { font-size:1.2rem; font-weight:800; color:var(--mx-text); margin:0 0 4px; }
    .msgx-empty p { font-size:.9rem; max-width:280px; margin:0; }

    .msgx-thread-wrap { flex:1; display:none; flex-direction:column; min-height:0; }
    .msgx-thread-wrap.on { display:flex; }
    .msgx-thead { display:flex; align-items:center; gap:13px; padding:16px 22px; background:#fff; border-bottom:1px solid var(--mx-border); flex-shrink:0; }
    .msgx-thead .peer { flex:1; min-width:0; }
    .msgx-thead .peer .nm { font-weight:800; font-size:1.02rem; color:var(--mx-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .msgx-thead .peer .st { font-size:.75rem; color:var(--mx-muted); display:flex; align-items:center; gap:6px; }
    /* Durum noktası varsayılan GRİ; yalnızca gerçekten çevrimiçiyse (.on) yeşil yanar */
    .msgx-thead .peer .st::before { content:''; width:7px; height:7px; border-radius:50%; background:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.18); transition:background .2s, box-shadow .2s; }
    .msgx-thead .peer .st.on::before { background:var(--mx-online); box-shadow:0 0 0 3px rgba(34,197,94,.2); }
    .msgx-thead-open { width:40px; height:40px; border-radius:13px; border:1px solid var(--mx-border); background:#fff; color:#64748b; cursor:pointer; transition:.15s; }
    .msgx-thead-open:hover { background:var(--mx-soft); color:var(--mx-a); }

    .msgx-msgs { flex:1; min-height:0; overflow-y:auto; padding:24px 26px; display:flex; flex-direction:column; gap:3px; }
    .msgx-msgs::-webkit-scrollbar { width:9px; }
    .msgx-msgs::-webkit-scrollbar-thumb { background:#e2e5ee; border-radius:9px; }
    .mx-day { align-self:center; font-size:.68rem; font-weight:700; color:var(--mx-muted); background:rgba(15,23,42,.05); padding:4px 14px; border-radius:20px; margin:14px 0 8px; }
    .mx-msg { max-width:62%; padding:8px 13px; font-size:.9rem; line-height:1.45; word-wrap:break-word; overflow-wrap:anywhere; margin-top:3px; }
    /* Saat baloncuk içinde float — taşmasın diye clearfix */
    .mx-msg::after { content:''; display:table; clear:both; }
    .mx-in { align-self:flex-start; background:#fff; color:#1e293b; border-radius:18px 18px 18px 6px; box-shadow:0 1px 3px rgba(15,23,42,.07); }
    .mx-out { align-self:flex-end; background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); color:#fff; border-radius:18px 18px 6px 18px; box-shadow:0 6px 16px -4px rgba(91,91,240,.42); }
    .mx-sender { font-size:.68rem; font-weight:800; opacity:.7; margin-bottom:3px; }
    /* Saat mesajla AYNI satırda (son satırın sağına yaslanır) → mesaj başına daha az dikey alan */
    .mx-time { float:right; font-size:.64rem; opacity:.66; margin:6px -3px -2px 10px; line-height:1; white-space:nowrap; }
    .mx-tick { font-size:.62rem; margin-left:4px; }
    .mx-tick-read { color:#5eead4; opacity:1; }
    .mx-msg.revoked { background:#f1f5f9 !important; color:#94a3b8 !important; box-shadow:none !important; border:1px dashed #cbd5e1; }
    .mx-revoked-note { font-size:.78rem; font-weight:700; color:#ef4444; display:flex; align-items:center; gap:6px; }
    .mx-revoked-body { font-size:.85rem; text-decoration:line-through; opacity:.7; margin-top:3px; }
    .mx-msg.sending { opacity:.55; }

    .mx-att { display:flex; flex-direction:column; gap:7px; margin-top:6px; }
    .mx-att-img { max-width:280px; max-height:280px; border-radius:14px; cursor:pointer; display:block; }
    .mx-att-imgwrap { position:relative; display:inline-block; }
    .mx-att-imgdl { position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:10px; background:rgba(15,23,42,.62); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; opacity:0; transition:.15s; }
    .mx-att-imgwrap:hover .mx-att-imgdl { opacity:1; }
    .mx-att-file { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:13px; background:rgba(0,0,0,.06); }
    .mx-out .mx-att-file { background:rgba(255,255,255,.18); }
    .mx-att-file .fic { font-size:1.25rem; flex-shrink:0; }
    .mx-out .mx-att-file .fic, .mx-out .mx-att-name { color:#fff; }
    .mx-in .mx-att-file .fic, .mx-in .mx-att-name { color:var(--mx-text); }
    .mx-att-meta { flex:1; min-width:0; display:flex; flex-direction:column; }
    .mx-att-name { font-size:.82rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mx-att-size { font-size:.68rem; opacity:.7; }
    .mx-att-act { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:inherit; text-decoration:none; flex-shrink:0; font-size:.8rem; background:rgba(0,0,0,.07); transition:.14s; }
    .mx-out .mx-att-act { background:rgba(255,255,255,.16); }
    .mx-att-act:hover { background:rgba(0,0,0,.15); }
    .mx-out .mx-att-act:hover { background:rgba(255,255,255,.32); }

    .mx-links { display:flex; flex-direction:column; gap:7px; margin-top:6px; }
    .mx-lc { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:14px; cursor:pointer; text-decoration:none; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); transition:.14s; }
    .mx-in .mx-lc { background:#f3f5fb; border-color:#e6e9f2; }
    .mx-lc:hover { transform:translateY(-1px); filter:brightness(.98); }
    .mx-lc-ic { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(255,255,255,.24); color:#fff; }
    .mx-in .mx-lc-ic { background:linear-gradient(135deg,rgba(91,91,240,.14),rgba(139,92,246,.14)); color:var(--mx-a); }
    .mx-lc-b { flex:1; min-width:0; display:flex; flex-direction:column; }
    .mx-lc-t { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
    .mx-lc-l { font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mx-out .mx-lc-t { color:rgba(255,255,255,.82); } .mx-out .mx-lc-l { color:#fff; }
    .mx-in .mx-lc-t { color:var(--mx-muted); } .mx-in .mx-lc-l { color:var(--mx-text); }

    /* ── Composer ── */
    .msgx-chips { display:flex; flex-wrap:wrap; gap:7px; padding:0 22px; }
    .msgx-chips:not(:empty) { padding:10px 22px 0; }
    .mx-chip { display:flex; align-items:center; gap:7px; background:var(--mx-soft); color:#4338ca; font-size:.76rem; font-weight:700; border-radius:10px; padding:6px 10px; max-width:220px; }
    .mx-chip.doc { background:#dcfce7; color:#15803d; }
    .mx-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mx-chip i.x { cursor:pointer; }
    .msgx-compose { display:flex; align-items:flex-end; gap:10px; padding:16px 22px 20px; background:#fff; border-top:1px solid var(--mx-border); flex-shrink:0; }
    .mx-cbtn { width:44px; height:44px; border-radius:14px; border:none; cursor:pointer; flex-shrink:0; transition:.15s; display:flex; align-items:center; justify-content:center; font-size:1rem; }
    .mx-cbtn.tool { background:var(--mx-soft); color:#64748b; }
    .mx-cbtn.tool:hover { background:var(--mx-soft2); color:var(--mx-a); }
    .mx-cbtn.send { background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); color:#fff; box-shadow:0 6px 16px -4px rgba(91,91,240,.5); }
    .mx-cbtn.send:hover { transform:translateY(-2px); }
    .msgx-compose textarea { flex:1; resize:none; border:1px solid var(--mx-border); border-radius:16px; padding:12px 16px; font-size:.92rem; max-height:140px; outline:none; line-height:1.5; background:var(--mx-soft); font-family:inherit; transition:.15s; }
    .msgx-compose textarea:focus { background:#fff; border-color:var(--mx-a); box-shadow:0 0 0 4px rgba(91,91,240,.1); }

    /* ── Link picker (composer üstü) ── */
    .msgx-lp { position:absolute; left:0; right:0; bottom:0; z-index:6; background:#fff; border-top:1px solid var(--mx-border);
        box-shadow:0 -18px 44px rgba(15,23,42,.14); border-radius:22px 22px 0 0; display:none; flex-direction:column; max-height:70%; }
    .msgx-lp.on { display:flex; animation:mxUp .2s ease; }
    @keyframes mxUp { from { transform:translateY(20px); opacity:0 } to { transform:translateY(0); opacity:1 } }
    .msgx-lp-head { display:flex; align-items:center; justify-content:space-between; padding:16px 22px 8px; font-weight:800; color:var(--mx-text); }
    .msgx-lp-x { width:34px; height:34px; border-radius:10px; border:none; background:var(--mx-soft); color:#475569; cursor:pointer; }
    .msgx-lp-types { display:flex; flex-wrap:wrap; gap:7px; padding:4px 22px; }
    .msgx-lp-type { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--mx-border); background:#fff; color:#475569; font-size:.78rem; font-weight:700; border-radius:20px; padding:7px 14px; cursor:pointer; transition:.14s; }
    .msgx-lp-type.active { background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); border-color:transparent; color:#fff; }
    .msgx-lp-results { flex:1; overflow-y:auto; padding:6px 14px 14px; }
    .msgx-lp-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:13px; cursor:pointer; transition:background .14s; }
    .msgx-lp-item:hover { background:var(--mx-soft); }
    .msgx-lp-ic { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:linear-gradient(135deg,rgba(91,91,240,.12),rgba(139,92,246,.12)); color:var(--mx-a); }
    .msgx-lp-name { flex:1; min-width:0; }
    .msgx-lp-name .n { font-weight:700; color:var(--mx-text); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .msgx-lp-name .s { font-size:.74rem; color:var(--mx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .msgx-lp-empty { text-align:center; color:var(--mx-muted); padding:20px; font-size:.85rem; }

    /* ── Bölüm sekmeleri (şirket içi / dış / müşteri) ── */
    .msgx-cats { display:flex; gap:4px; margin-top:12px; background:var(--mx-soft); border-radius:13px; padding:4px; }
    .msgx-cat { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; background:transparent;
        color:var(--mx-muted); font-size:.74rem; font-weight:800; padding:8px 6px; border-radius:10px; cursor:pointer; transition:.15s; white-space:nowrap; }
    .msgx-cat i { font-size:.7rem; }
    .msgx-cat:hover { color:var(--mx-text); }
    .msgx-cat.active { background:#fff; color:var(--mx-a); box-shadow:0 2px 8px rgba(15,23,42,.08); }
    .msgx-cat .msgx-cat-badge { min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:linear-gradient(135deg,var(--mx-a),var(--mx-a2));
        color:#fff; font-size:.6rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
    .msgx-soon { text-align:center; padding:34px 20px; color:var(--mx-muted); }
    .msgx-soon .ic { width:64px; height:64px; border-radius:20px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
        font-size:1.5rem; color:var(--mx-a); background:linear-gradient(135deg,rgba(91,91,240,.12),rgba(139,92,246,.12)); }
    .msgx-soon h6 { font-weight:800; color:var(--mx-text); margin:0 0 4px; font-size:.92rem; }
    .msgx-soon p { font-size:.78rem; margin:0; line-height:1.5; }
    .msgx-soon .tag { display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:.66rem; font-weight:800; letter-spacing:.04em;
        text-transform:uppercase; color:#7c3aed; background:#f3e8ff; border-radius:999px; padding:4px 11px; }

    /* ── Grup: butonlar, modal, üye satırları ── */
    .msgx-new.ghost { background:var(--mx-soft); color:var(--mx-a); box-shadow:none; }
    .msgx-new.ghost:hover { background:var(--mx-soft2); }
    .mxg-ov { position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
        background:rgba(14,21,38,.42); backdrop-filter:blur(6px); animation:mxgFade .18s ease; }
    @keyframes mxgFade { from{opacity:0} to{opacity:1} }
    .mxg-card { width:min(480px, calc(100% - 48px)); max-height:min(660px, calc(100% - 40px)); display:flex; flex-direction:column;
        background:#fff; border-radius:24px; box-shadow:0 40px 90px -20px rgba(14,21,38,.5); overflow:hidden; animation:mxgPop .22s cubic-bezier(.34,1.4,.5,1); }
    @keyframes mxgPop { from{ transform:translateY(26px) scale(.97); opacity:0 } to{ transform:none; opacity:1 } }
    .mxg-head { display:flex; align-items:center; gap:14px; padding:20px 22px 14px; flex-shrink:0; }
    .mxg-head-ic { width:46px; height:46px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; color:#fff;
        background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); box-shadow:0 10px 22px -8px rgba(91,91,240,.55); flex-shrink:0; }
    .mxg-head-tx { flex:1; min-width:0; }
    .mxg-head-tx h3 { margin:0; font-size:1.05rem; font-weight:800; color:var(--mx-text); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mxg-head-tx p { margin:1px 0 0; font-size:.78rem; color:var(--mx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mxg-x { width:36px; height:36px; border-radius:11px; border:none; background:var(--mx-soft); color:#475569; cursor:pointer; flex-shrink:0; transition:.14s; }
    .mxg-x:hover { background:var(--mx-soft2); }
    .mxg-name { display:flex; align-items:center; gap:10px; margin:0 22px 10px; padding:12px 15px; border-radius:14px;
        background:var(--mx-soft); border:1px solid transparent; transition:.15s; flex-shrink:0; }
    .mxg-name:focus-within { background:#fff; border-color:var(--mx-a); box-shadow:0 0 0 4px rgba(91,91,240,.1); }
    .mxg-name i { color:var(--mx-a); }
    .mxg-name input { flex:1; border:none; background:none; outline:none; font-size:.95rem; font-weight:700; color:var(--mx-text); font-family:inherit; }
    .mxg-chips { display:flex; flex-wrap:wrap; gap:7px; padding:0 22px; flex-shrink:0; }
    .mxg-chips:not(:empty) { padding-bottom:10px; }
    .mxg-chip { display:inline-flex; align-items:center; gap:7px; padding:4px 7px 4px 4px; border-radius:20px; font-size:.76rem; font-weight:700; color:#fff;
        background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); box-shadow:0 4px 10px -3px rgba(91,91,240,.4); animation:mxgPop .18s ease; }
    .mxg-chip .mx-av { width:22px; height:22px; border-radius:50%; font-size:.58rem; box-shadow:none; }
    .mxg-chip i.x { cursor:pointer; opacity:.85; padding:2px 4px; }
    .mxg-chip i.x:hover { opacity:1; }
    .mxg-search { margin:0 22px 8px !important; flex-shrink:0; }
    .mxg-list { flex:1; min-height:110px; overflow-y:auto; padding:2px 12px 10px; }
    .mxg-list::-webkit-scrollbar { width:8px; }
    .mxg-list::-webkit-scrollbar-thumb { background:#e4e7ee; border-radius:8px; }
    .mxg-row { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:14px; cursor:pointer; transition:background .13s; }
    .mxg-row:hover { background:var(--mx-soft); }
    .mxg-row .mx-av { width:42px; height:42px; border-radius:13px; font-size:.8rem; }
    .mxg-row-nm { flex:1; min-width:0; font-weight:700; font-size:.9rem; color:var(--mx-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mxg-check { width:24px; height:24px; border-radius:50%; border:2px solid #d7dbe6; display:flex; align-items:center; justify-content:center; font-size:.6rem; color:#fff; transition:.15s; flex-shrink:0; }
    .mxg-row.sel .mxg-check { border-color:transparent; background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); box-shadow:0 3px 8px rgba(91,91,240,.35); }
    .mxg-row.sel { background:linear-gradient(135deg,rgba(91,91,240,.07),rgba(139,92,246,.06)); }
    .mxg-badge { font-size:.6rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:9px; flex-shrink:0; }
    .mxg-badge.owner { color:#7c3aed; background:rgba(139,92,246,.12); }
    .mxg-badge.you { color:#0f766e; background:rgba(20,184,166,.12); }
    .mxg-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px 18px; border-top:1px solid var(--mx-border); flex-shrink:0; }
    .mxg-count { font-size:.78rem; font-weight:700; color:var(--mx-muted); }
    .mxg-create { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; color:#fff; font-weight:800; font-size:.88rem; font-family:inherit;
        padding:12px 22px; border-radius:14px; background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); box-shadow:0 10px 22px -8px rgba(91,91,240,.55); transition:.15s; }
    .mxg-create:hover:not(:disabled) { transform:translateY(-2px); }
    .mxg-create:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
    .mxg-leave { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-weight:800; font-size:.84rem; font-family:inherit;
        padding:11px 18px; border-radius:13px; color:#dc2626; background:rgba(239,68,68,.09); transition:.15s; }
    .mxg-leave:hover { background:rgba(239,68,68,.16); }
    .mxg-sub { font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mx-muted); padding:8px 22px 5px; flex-shrink:0; }

    /* ── Grup simgesi (pp) seçici ── */
    .mxg-avrow { display:flex; align-items:center; gap:12px; margin:0 22px 10px; flex-shrink:0; }
    .mxg-avrow .mxg-name { flex:1; margin:0; }
    .mxg-av { width:52px; height:52px; border-radius:17px; border:2px dashed #d7dbe6; background:var(--mx-soft) center/cover no-repeat;
        color:var(--mx-muted); cursor:pointer; flex-shrink:0; transition:.15s; font-size:1rem; }
    .mxg-av:hover { border-color:var(--mx-a); color:var(--mx-a); }
    .mxg-av.has { border-style:solid; border-color:transparent; box-shadow:0 4px 12px rgba(15,23,42,.18); }
    .mxg-av.has i { display:none; }
    .mxg-head-ic.pick { cursor:pointer; position:relative; background-size:cover; background-position:center; }
    .mxg-head-ic.pick.has i { display:none; }
    .mxg-head-ic.pick::after { content:'\f030'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; right:-5px; bottom:-5px;
        width:21px; height:21px; border-radius:50%; background:#fff; color:var(--mx-a); font-size:.6rem;
        display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(15,23,42,.25); }
    .msgx-thead .peer .st.grp::before { display:none; }
    .msgx-thead .peer.click { cursor:pointer; }
    .mx-conv-grp { font-size:.68rem; color:var(--mx-a); margin-right:6px; }

    /* ── Acente rozeti (dış sohbetler: kişinin hangi acenteden olduğu) ── */
    .mx-agency { display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.02em; color:#7c3aed;
        background:rgba(139,92,246,.12); border-radius:8px; padding:2px 8px; margin-left:7px; max-width:140px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; flex-shrink:0; }
    .msgx-conv-top .mx-agency { flex-shrink:1; min-width:0; }
    .mx-sender .ag { font-weight:700; opacity:.72; }
    .mxg-badge.agency { color:#7c3aed; background:rgba(139,92,246,.12); max-width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:none; letter-spacing:.02em; }

    /* ── Dış sohbet: el sıkışma istekleri ── */
    .mx-req { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:16px; margin-bottom:6px;
        background:var(--mx-soft); border:1px solid var(--mx-border); }
    .mx-req .mx-av { width:42px; height:42px; border-radius:13px; font-size:.8rem; }
    .mx-req-b { flex:1; min-width:0; }
    .mx-req-nm { font-weight:700; font-size:.9rem; color:var(--mx-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mx-req-sub { font-size:.74rem; color:var(--mx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mx-req-act { display:flex; align-items:center; gap:6px; flex-shrink:0; }
    .mx-req-btn { width:32px; height:32px; border-radius:10px; border:none; cursor:pointer; font-size:.76rem; transition:.14s; }
    .mx-req-btn.ok { background:rgba(34,197,94,.14); color:#16a34a; }
    .mx-req-btn.ok:hover { background:#16a34a; color:#fff; }
    .mx-req-btn.no { background:rgba(239,68,68,.12); color:#dc2626; }
    .mx-req-btn.no:hover { background:#dc2626; color:#fff; }
    .mx-req-state { font-size:.6rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:9px; flex-shrink:0; }
    .mx-req-state.wait { color:#b45309; background:rgba(245,158,11,.15); }
    .mx-req-state.no { color:#dc2626; background:rgba(239,68,68,.12); }

    /* ── Dış sohbet izin ayarı + istek gönderme kartları ── */
    .mxs-modes { display:flex; flex-direction:column; gap:8px; padding:0 22px 8px; flex-shrink:0; }
    .mxs-mode { display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:14px; cursor:pointer;
        border:1px solid var(--mx-border); background:var(--bg-card); transition:.14s; }
    .mxs-mode:hover { background:var(--mx-soft); }
    .mxs-mode.on { border-color:var(--mx-a); background:linear-gradient(135deg,rgba(91,91,240,.09),rgba(139,92,246,.07)); }
    .mxs-radio { width:20px; height:20px; border-radius:50%; border:2px solid #d7dbe6; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
    .mxs-mode.on .mxs-radio { border-color:var(--mx-a); }
    .mxs-mode.on .mxs-radio::after { content:''; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--mx-a),var(--mx-a2)); }
    .mxs-mode-tx { flex:1; min-width:0; }
    .mxs-mode-tx b { display:block; font-size:.88rem; color:var(--mx-text); }
    .mxs-mode-tx span { font-size:.73rem; color:var(--mx-muted); line-height:1.45; }
    .mxs-note { font-size:.78rem; color:var(--mx-muted); padding:0 22px 12px; line-height:1.55; flex-shrink:0; }
    .mxs-pick { display:flex; flex-direction:column; flex:1; min-height:150px; }
    .mxs-pick[hidden] { display:none; }
    .mxs-tabs { display:flex; gap:4px; margin:0 22px 8px; background:var(--mx-soft); border-radius:13px; padding:4px; flex-shrink:0; }
    .mxs-tab { flex:1; border:none; background:transparent; color:var(--mx-muted); font-size:.76rem; font-weight:800;
        padding:8px 6px; border-radius:10px; cursor:pointer; font-family:inherit; transition:.15s; }
    .mxs-tab.active { background:var(--bg-card); color:var(--mx-a); box-shadow:0 2px 8px rgba(15,23,42,.08); }
    .mxs-ic { display:inline-flex; align-items:center; justify-content:center; }
    .mxs-textarea { margin:0 22px 12px; border:1px solid var(--mx-border); border-radius:14px; background:var(--mx-soft); padding:11px 14px; flex-shrink:0; transition:.15s; }
    .mxs-textarea:focus-within { background:var(--bg-card); border-color:var(--mx-a); box-shadow:0 0 0 4px rgba(91,91,240,.1); }
    .mxs-textarea textarea { width:100%; border:none; background:none; outline:none; resize:none; font-family:inherit; font-size:.88rem; color:var(--mx-text); }

    /* ── Bilgi balonu (istek gönderildi vb.) ── */
    .mx-toast { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:40; max-width:min(430px,84%); text-align:center;
        background:var(--mx-ink); color:#fff; font-size:.82rem; font-weight:600; padding:11px 18px; border-radius:14px;
        box-shadow:0 18px 40px -14px rgba(14,21,38,.6); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
    .mx-toast.on { opacity:1; transform:translateX(-50%) translateY(-4px); }

    @media (max-width:900px) {
        .msgx { grid-template-columns:1fr; }
        .msgx-side { display:flex; }
        .msgx.thread-open .msgx-side { display:none; }
        .msgx.thread-open .msgx-main { display:flex; }
        .msgx:not(.thread-open) .msgx-main { display:none; }
        .msgx-back { display:inline-flex !important; }
    }
    .msgx-back { display:none; width:40px; height:40px; border-radius:13px; border:1px solid var(--mx-border); background:#fff; color:#64748b; cursor:pointer; margin-right:2px; align-items:center; justify-content:center; }
</style>
@endpush

@section('content')
<div class="msgx" id="msgx">
    {{-- Sol: sohbet listesi --}}
    <aside class="msgx-side">
        <div class="msgx-side-head">
            <div class="msgx-side-title">
                <h2>Mesajlar</h2>
                <div style="display:flex; gap:8px;">
                    <button class="msgx-new ghost" id="mxExtSettings" title="Dış sohbet izinleri" hidden><i class="fas fa-shield-halved"></i></button>
                    <button class="msgx-new ghost" id="mxNewGroup" title="Yeni grup"><i class="fas fa-user-group"></i></button>
                    <button class="msgx-new" id="mxNew" title="Yeni sohbet"><i class="fas fa-pen-to-square"></i></button>
                </div>
            </div>
            <div class="msgx-search">
                <i class="fas fa-magnifying-glass"></i>
                <input type="text" id="mxSearch" placeholder="Sohbet veya kişi ara…" autocomplete="off">
            </div>
            {{-- Bölümler: şirket içi / dış sohbet / müşteri canlı sohbeti --}}
            <div class="msgx-cats" id="mxCats">
                <button class="msgx-cat active" data-cat="internal" title="Aynı acentedeki ekip arkadaşlarınla mesajlaş"><i class="fas fa-building"></i> Şirket İçi</button>
                <button class="msgx-cat" data-cat="external" title="Diğer acentelerdeki kullanıcılarla mesajlaş"><i class="fas fa-globe"></i> Dış Sohbet</button>
                <button class="msgx-cat" data-cat="customer" title="Web sitenizdeki ziyaretçilerle canlı sohbet"><i class="fas fa-headset"></i> Müşteri</button>
            </div>
        </div>
        <div class="msgx-scroll" id="mxScroll">
            <div id="mxContactsWrap" hidden>
                <div class="msgx-label">Kişiler</div>
                <div id="mxContacts"></div>
            </div>
            {{-- Dış sohbet el sıkışması: gelen/giden istekler --}}
            <div id="mxReqWrap" hidden>
                <div class="msgx-label">Sohbet İstekleri</div>
                <div id="mxReqs"></div>
            </div>
            <div id="mxConvWrap">
                <div class="msgx-label" id="mxConvLabel" hidden>Sohbetler</div>
                <div id="mxList"></div>
            </div>
            <div class="msgx-lp-empty" id="mxEmptyList" hidden>Henüz sohbet yok. Yukarıdan kişi arayın.</div>
        </div>
    </aside>

    {{-- Sağ: thread --}}
    <main class="msgx-main">
        <div class="msgx-empty" id="mxEmpty">
            <div class="msgx-empty-ic"><i class="fas fa-comments"></i></div>
            <h3>Sohbet seçin</h3>
            <p>Soldan bir sohbet açın veya yeni bir kişiyle konuşma başlatın.</p>
        </div>

        <div class="msgx-thread-wrap" id="mxThreadWrap">
            <div class="msgx-thead">
                <button class="msgx-back" id="mxBack"><i class="fas fa-arrow-left"></i></button>
                <span class="mx-av mx-av-sm" id="mxPeerAv"></span>
                <div class="peer" id="mxPeerHead"><div class="nm" id="mxPeerName">—</div><div class="st" id="mxPeerSt">Mesajlaşma</div></div>
                <button class="msgx-thead-open" id="mxVisitorCustomer" hidden title="Müşteri kaydı oluştur / eşleştir"><i class="fas fa-user-plus"></i></button>
                <button class="msgx-thead-open" id="mxVisitorClose" hidden title="Sohbeti kapat"><i class="fas fa-box-archive"></i></button>
                <button class="msgx-thead-open" id="mxInfoBtn" hidden title="Grup bilgisi"><i class="fas fa-user-group"></i></button>
                <button class="msgx-thead-open" id="mxThreadReload" title="Yenile"><i class="fas fa-rotate"></i></button>
            </div>
            <div class="msgx-msgs" id="mxMsgs"></div>

            {{-- Link/belge seçici --}}
            <div class="msgx-lp" id="mxLp">
                <div class="msgx-lp-head"><span><i class="fas fa-link me-2"></i>Modül Bağlantısı / Belge</span><button class="msgx-lp-x" id="mxLpX"><i class="fas fa-xmark"></i></button></div>
                <div class="msgx-lp-types" id="mxLpTypes"></div>
                <div class="msgx-search" style="margin:8px 22px"><i class="fas fa-magnifying-glass"></i><input type="text" id="mxLpSearch" placeholder="Ara…"></div>
                <div class="msgx-lp-results" id="mxLpResults"></div>
            </div>

            <div class="msgx-chips" id="mxChips"></div>
            <div class="msgx-compose">
                <button class="mx-cbtn tool" id="mxLinkBtn" title="Modül bağlantısı / belge"><i class="fas fa-link"></i></button>
                <button class="mx-cbtn tool" id="mxAttachBtn" title="Dosya/Resim"><i class="fas fa-paperclip"></i></button>
                <input type="file" id="mxFile" multiple hidden>
                <textarea id="mxInput" rows="1" placeholder="Mesaj yazın…"></textarea>
                <button class="mx-cbtn send" id="mxSend" title="Gönder"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>

        {{-- Kısa bilgi balonu (istek gönderildi, ayar kaydedildi vb.) --}}
        <div class="mx-toast" id="mxToast"></div>
    </main>

    {{-- Grup oluşturma (WhatsApp mantığı: ad + üye seçimi) --}}
    <div class="mxg-ov" id="mxgOv" hidden>
        <div class="mxg-card">
            <div class="mxg-head">
                <div class="mxg-head-ic"><i class="fas fa-user-group"></i></div>
                <div class="mxg-head-tx"><h3>Yeni Grup</h3><p>Grup adını yazın, üyeleri seçin.</p></div>
                <button class="mxg-x" id="mxgX"><i class="fas fa-xmark"></i></button>
            </div>
            <div class="mxg-avrow">
                <button type="button" class="mxg-av" id="mxgAvBtn" title="Grup simgesi seç"><i class="fas fa-camera"></i></button>
                <input type="file" id="mxgAvatar" accept="image/*" hidden>
                <div class="mxg-name"><i class="fas fa-users"></i><input type="text" id="mxgName" maxlength="80" placeholder="Grup adı — örn. Operasyon Ekibi" autocomplete="off"></div>
            </div>
            <div class="mxg-chips" id="mxgChips"></div>
            <div class="msgx-search mxg-search"><i class="fas fa-magnifying-glass"></i><input type="text" id="mxgSearch" placeholder="Kişi ara…" autocomplete="off"></div>
            <div class="mxg-list" id="mxgList"><div class="msgx-lp-empty">Yükleniyor…</div></div>
            <div class="mxg-foot">
                <span class="mxg-count" id="mxgCount">Üye seçilmedi</span>
                <button class="mxg-create" id="mxgCreate" disabled><i class="fas fa-check"></i>Grubu Oluştur</button>
            </div>
        </div>
    </div>

    {{-- Grup bilgisi: üyeler + üye ekleme + gruptan ayrılma --}}
    <div class="mxg-ov" id="mxgiOv" hidden>
        <div class="mxg-card">
            <div class="mxg-head">
                <div class="mxg-head-ic pick" id="mxgiAv" title="Grup simgesini değiştir"><i class="fas fa-user-group"></i></div>
                <input type="file" id="mxgiAvatar" accept="image/*" hidden>
                <div class="mxg-head-tx"><h3 id="mxgiTitle">Grup</h3><p id="mxgiSub">—</p></div>
                <button class="mxg-x" id="mxgiX"><i class="fas fa-xmark"></i></button>
            </div>
            <div class="mxg-sub">Üyeler</div>
            <div class="mxg-list" id="mxgiList" style="flex:0 1 auto; max-height:230px;"></div>
            <div id="mxgiAddWrap">
                <div class="mxg-sub">Üye Ekle</div>
                <div class="msgx-search mxg-search"><i class="fas fa-magnifying-glass"></i><input type="text" id="mxgiSearch" placeholder="Kişi ara ve ekle…" autocomplete="off"></div>
                <div class="mxg-list" id="mxgiResults" style="min-height:56px;"></div>
            </div>
            <div class="mxg-foot">
                <span class="mxg-count"></span>
                <button class="mxg-leave" id="mxgiLeave"><i class="fas fa-arrow-right-from-bracket"></i>Gruptan Ayrıl</button>
            </div>
        </div>
    </div>

    {{-- Dış sohbet isteği gönder (el sıkışma başlangıcı) --}}
    <div class="mxg-ov" id="mxrqOv" hidden>
        <div class="mxg-card" style="max-height:none;">
            <div class="mxg-head">
                <div class="mxg-head-ic"><i class="fas fa-handshake"></i></div>
                <div class="mxg-head-tx"><h3>Sohbet İsteği</h3><p id="mxrqSub">—</p></div>
                <button class="mxg-x" id="mxrqX"><i class="fas fa-xmark"></i></button>
            </div>
            <div class="mxs-note">Başka bir acentedeki kullanıcıyla doğrudan sohbet açılamaz. Önce istek gönderilir; karşı taraf onayladığında sohbet başlar.</div>
            <div class="mxs-textarea">
                <textarea id="mxrqNote" rows="3" maxlength="300" placeholder="Kısa bir not ekleyin (isteğe bağlı) — örn. Ortak kalkış hakkında görüşmek istiyorum."></textarea>
            </div>
            <div class="mxg-foot">
                <span class="mxg-count" id="mxrqMsg"></span>
                <button class="mxg-create" id="mxrqSend"><i class="fas fa-paper-plane"></i>İstek Gönder</button>
            </div>
        </div>
    </div>

    {{-- Dış sohbet izinleri: acentemize dışarıdan kimlere ulaşılabilir --}}
    <div class="mxg-ov" id="mxsetOv" hidden>
        <div class="mxg-card">
            <div class="mxg-head">
                <div class="mxg-head-ic"><i class="fas fa-shield-halved"></i></div>
                <div class="mxg-head-tx"><h3>Dış Sohbet İzinleri</h3><p>Acentenizin hangi personeline dışarıdan ulaşılabilir?</p></div>
                <button class="mxg-x" id="mxsetX"><i class="fas fa-xmark"></i></button>
            </div>
            <div class="mxs-modes" id="mxsetModes"></div>
            <div class="mxs-pick" id="mxsetPick" hidden>
                <div class="mxs-tabs">
                    <button class="mxs-tab active" data-t="roles"><i class="fas fa-user-shield"></i> Roller</button>
                    <button class="mxs-tab" data-t="users"><i class="fas fa-user"></i> Kullanıcılar</button>
                </div>
                <div class="msgx-search mxg-search"><i class="fas fa-magnifying-glass"></i><input type="text" id="mxsetSearch" placeholder="Ara…" autocomplete="off"></div>
                <div class="mxg-list" id="mxsetList"></div>
            </div>
            <div class="mxg-foot">
                <span class="mxg-count" id="mxsetCount">—</span>
                <button class="mxg-create" id="mxsetSave"><i class="fas fa-check"></i>Kaydet</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
@if($reverbOn)
<script src="https://cdn.jsdelivr.net/npm/pusher-js@8.4.0/dist/web/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.16.1/dist/echo.iife.js"></script>
@endif
<script>
window.__CHAT_REVERB = @js([
    'enabled' => (bool) $reverbOn,
    'key' => config('broadcasting.connections.reverb.key'),
    'host' => config('broadcasting.connections.reverb.options.host') ?: request()->getHost(),
    'port' => (int) (config('broadcasting.connections.reverb.options.port') ?: 8080),
    'scheme' => config('broadcasting.connections.reverb.options.scheme') ?: (request()->isSecure() ? 'https' : 'http'),
    'authEndpoint' => url('/broadcasting/auth'),
]);
(function () {
    const API = {
        base: @js(url('agency/chat')),
        contacts: @js(route('agency.chat.contacts')),
        directory: @js(route('agency.chat.directory')),
        conversations: @js(route('agency.chat.conversations')),
        poll: @js(route('agency.chat.poll')),
        start: @js(route('agency.chat.start')),
        requests: @js(route('agency.chat.requests')),
        extSettings: @js(route('agency.chat.external-settings')),
        groups: @js(route('agency.chat.groups.store')),
        linkTypes: @js(route('agency.chat.link-types')),
        linkables: @js(route('agency.chat.linkables')),
        me: {{ auth()->id() ?? 0 }},
    };
    const LBL = { customer:'Müşteri', resource:'Kaynak', supplier:'Tedarikçi', tour:'Tur', departure:'Kalkış', sale:'Satış', contract:'Kontrat' };
    const CSRF = document.querySelector('meta[name="csrf-token"]').content;
    const $ = id => document.getElementById(id);
    const msgx = $('msgx');

    // dir: hiç mesajlaşılmamış kullanıcılar (rehber). convs'ten bağımsız tazelenir;
    // render sırasında mevcut sohbeti olanlar elenir.
    const st = { convs:[], dir:[], openId:null, lastId:0, peer:null, lastDay:null, pending:[], links:[], docs:[], linkTypes:[], activeType:null, cat:'internal',
                 reqIn:[], reqOut:[], reqPeer:null };
    let socketOK = false, msgTimer = null;

    const esc = s => { const d=document.createElement('div'); d.textContent=s==null?'':s; return d.innerHTML; };
    const hue = s => { let h=0; for(let i=0;i<(s||'').length;i++) h=s.charCodeAt(i)+((h<<5)-h); return Math.abs(h)%360; };
    function av(o, cls) {
        cls = cls || 'mx-av';
        if (o && o.avatar) return `<span class="${cls}" style="background-image:url('${o.avatar}')"></span>`;
        const bg = `linear-gradient(135deg,hsl(${hue(o&&(o.title||o.name)||'?')},62%,58%),hsl(${(hue(o&&(o.title||o.name)||'?')+34)%360},62%,48%))`;
        return `<span class="${cls}" style="background:${bg}">${esc((o&&o.initials)||'?')}</span>`;
    }

    // ── Çevrimiçi durumu (Reverb presence) ──
    const ONLINE = new Set();          // o an bağlı kullanıcı id'leri
    let presenceOn = false;            // Reverb yoksa nokta hiç gösterilmez (yanıltıcı olmasın)
    const peerIdOf = (c) => (c && c.type==='dm') ? (+c.peer_id||0) : 0;

    /** Avatar + (varsa) çevrimiçi noktası. uid=0 ise nokta basılmaz (grup vb.). */
    function avp(o, uid, cls) {
        const u = +uid||0;
        const dot = (presenceOn && u) ? `<i class="mx-dot${ONLINE.has(u)?' on':''}" data-uid="${u}"></i>` : '';
        return `<span class="mx-avw">${av(o,cls)}${dot}</span>`;
    }
    /** Yeniden render etmeden mevcut noktaları tazeler. */
    function paintPresence() {
        document.querySelectorAll('.mx-dot[data-uid]').forEach(d => d.classList.toggle('on', ONLINE.has(+d.dataset.uid)));
        paintPeerSt();
    }
    /** Presence kanalından ayrıl ve soketi kapat (çıkış yapıldığında). */
    function leavePresence(echo) {
        try { echo.leave('chat.presence'); echo.disconnect(); } catch(e) {}
        presenceOn=false; socketOK=false;
        ONLINE.clear();
        paintPresence();
    }
    /** Ziyaretçi sohbetinde başlık aksiyonları (müşteri kaydı / kapat). */
    function paintVisitorActions(c) {
        const isVisitor = !!(c && c.type === 'visitor');
        const btnCustomer = $('mxVisitorCustomer'), btnClose = $('mxVisitorClose');
        if (!btnCustomer || !btnClose) return;

        btnCustomer.hidden = !isVisitor;
        btnClose.hidden = !isVisitor;
        if (!isVisitor) return;

        const linked = !!(c.visitor && c.visitor.customer_id);
        btnCustomer.innerHTML = linked ? '<i class="fas fa-user-check"></i>' : '<i class="fas fa-user-plus"></i>';
        btnCustomer.title = linked
            ? 'Müşteri kaydı: ' + (c.visitor.customer_name || 'bağlı') + ' — açmak için tıklayın'
            : 'Müşteri kaydı oluştur / eşleştir';
    }

    function paintPeerSt() {
        const el = $('mxPeerSt'); if (!el) return;
        // Ziyaretçi sohbetinde iletişim bilgisi gösterilir
        if (st.peer && st.peer.type === 'visitor') {
            el.classList.remove('grp', 'on');
            const v = st.peer.visitor || {};
            const bits = [v.phone, v.email].filter(Boolean);
            el.textContent = bits.length ? bits.join(' · ') : 'Site ziyaretçisi';
            return;
        }
        if (st.peer && st.peer.type === 'group') {
            el.classList.add('grp'); el.classList.remove('on');
            const n = st.peer.members_count ? `${st.peer.members_count} üye` : 'Grup';
            el.textContent = st.peer.members_note ? `${n} · ${st.peer.members_note}` : n;
            return;
        }
        el.classList.remove('grp');
        const u = peerIdOf(st.peer);
        const on = !!(presenceOn && u && ONLINE.has(u));
        el.classList.toggle('on', on); // nokta rengi yalnızca gerçekten çevrimiçiyse yeşil
        const ag = (st.peer && st.peer.agency) ? ' · ' + st.peer.agency : ''; // dış sohbet: karşı tarafın acentesi
        if (!presenceOn || !u) { el.textContent = 'Mesajlaşma' + ag; return; }
        el.textContent = (on ? 'Çevrimiçi' : 'Çevrimdışı') + ag;
    }
    function api(url, opts) { opts=opts||{}; opts.headers=Object.assign({'X-Requested-With':'XMLHttpRequest','X-CSRF-TOKEN':CSRF}, opts.headers||{}); return fetch(url,opts).then(r=>r.json()); }
    function dayLabel(iso) { if(!iso) return ''; const d=new Date(iso); const diff=Math.floor((new Date().setHours(0,0,0,0)-new Date(iso).setHours(0,0,0,0))/86400000); if(diff===0) return 'Bugün'; if(diff===1) return 'Dün'; return d.toLocaleDateString('tr-TR',{day:'numeric',month:'long'}); }
    function isViewing() { return !!st.openId && document.visibilityState === 'visible'; }

    // ── Liste ──
    function renderList() {
        const q = $('mxSearch').value.trim().toLowerCase();
        const list = $('mxList');

        // Bölüm rozetleri: kategori başına okunmamış toplamı
        const unreadByCat = { internal:0, external:0, customer:0 };
        st.convs.forEach(c => { const k = c.category || 'internal'; unreadByCat[k] = (unreadByCat[k] || 0) + (c.unread || 0); });
        // Onay bekleyen dış sohbet istekleri de dış sohbet rozetine yazılır
        unreadByCat.external += st.reqIn.length;
        renderRequests();
        document.querySelectorAll('#mxCats .msgx-cat').forEach(b => {
            let badge = b.querySelector('.msgx-cat-badge');
            const n = unreadByCat[b.dataset.cat] || 0;
            if (n > 0) {
                if (!badge) { badge = document.createElement('span'); badge.className = 'msgx-cat-badge'; b.appendChild(badge); }
                badge.textContent = n > 99 ? '99+' : n;
            } else if (badge) { badge.remove(); }
        });

        // Müşteri bölümü: sitedeki canlı destek sohbetleri (rehber satırı yoktur)
        if (st.cat === 'customer') {
            const visitors = st.convs.filter(c => c.category === 'customer');
            const filteredV = q ? visitors.filter(c => (c.title||'').toLowerCase().includes(q)) : visitors;
            $('mxConvLabel').hidden = !filteredV.length;
            $('mxEmptyList').hidden = true;

            if (!filteredV.length) {
                list.innerHTML = '<div class="msgx-soon"><div class="ic"><i class="fas fa-headset"></i></div>' +
                    '<h6>Müşteri Konuşmaları</h6>' +
                    '<p>Web sitenizdeki canlı destek balonundan gelen sohbetler burada listelenir.</p>' +
                    '<span class="tag"><i class="fas fa-wand-magic-sparkles"></i> Henüz sohbet yok</span></div>';
                return;
            }

            list.innerHTML = filteredV.map(convRow).join('');
            list.querySelectorAll('.msgx-conv').forEach(el => el.addEventListener('click', () => openChat(+el.dataset.id)));
            return;
        }

        // Sohbetler (son mesajlaşılan en üstte) + altında henüz mesajlaşılmamış kişiler
        const items = st.convs.filter(c => (c.category || 'internal') === st.cat)
            .concat(directoryFor(st.cat));
        const filtered = q ? items.filter(c => (c.title||'').toLowerCase().includes(q)) : items;
        $('mxConvLabel').hidden = !filtered.length;
        $('mxEmptyList').hidden = filtered.length>0 || !!q;
        list.innerHTML = filtered.map(convRow).join('');
        list.querySelectorAll('.msgx-conv').forEach(el => el.addEventListener('click', () => {
            if (el.dataset.id) openChat(+el.dataset.id); else startWith(+el.dataset.uid);
        }));
    }
    /** Sohbeti zaten açılmış kişiler rehberden düşer (aynı kişi iki kez listelenmesin). */
    function knownPeers() {
        return new Set(st.convs.filter(c => c.type==='dm').map(c => +c.peer_id).filter(Boolean));
    }
    function directoryFor(cat) {
        const known = knownPeers();
        return st.dir.filter(u => (u.category||'internal') === cat && !known.has(+u.peer_id));
    }
    function convRow(c) {
        const lm = c.last_message;
        const prev = lm ? (lm.mine?'Siz: ':'')+esc(lm.preview||'') : '<span style="opacity:.6">Sohbeti başlatın</span>';
        // Rehber satırının konuşma id'si yok; tıklanınca önce sohbet açılır (data-uid).
        const key = c.id ? `data-id="${c.id}"` : `data-uid="${+c.peer_id||0}"`;
        // Ziyaretçi sohbetinde müşteri eşleşmesi / yanıt bekliyor rozetleri
        const vTag = c.type === 'visitor'
            ? (c.visitor_status === 'closed'
                ? '<span class="mx-agency" title="Kapatıldı">Kapalı</span>'
                : (c.visitor?.customer_id
                    ? `<span class="mx-agency" title="Müşteri kaydı bağlı">${esc(c.visitor.customer_name || 'Müşteri')}</span>`
                    : '<span class="mx-agency" title="Müşteri kaydı yok">Yeni</span>'))
            : '';

        return `<div class="msgx-conv ${c.id&&c.id===st.openId?'active':''}" ${key}>
            ${avp(c, peerIdOf(c))}
            <div class="msgx-conv-body">
                <div class="msgx-conv-top"><span class="msgx-conv-name">${c.type==='visitor'?'<i class="fas fa-headset mx-conv-grp" title="Site ziyaretçisi"></i>':(c.is_general?'<i class="fas fa-bullhorn mx-conv-grp" title="Şirket geneli"></i>':(c.type==='group'?'<i class="fas fa-user-group mx-conv-grp"></i>':''))}${esc(c.title)}</span>${vTag}${c.agency?`<span class="mx-agency" title="${esc(c.agency)}">${esc(c.agency)}</span>`:''}<span class="msgx-conv-time">${lm?lm.time:''}</span></div>
                <div class="msgx-conv-prev ${c.unread>0?'unread':''}">${prev}</div>
            </div>
            ${c.unread>0?`<span class="msgx-conv-badge">${c.unread>99?'99+':c.unread}</span>`:''}
        </div>`;
    }

    // ── Dış sohbet el sıkışması (istek → onay) ──
    function loadRequests() {
        api(API.requests).then(d => { st.reqIn = d.incoming || []; st.reqOut = d.outgoing || []; renderList(); }).catch(()=>{});
    }
    /** İstek satırları yalnızca "Dış Sohbet" bölümünde, sohbet listesinin üstünde görünür. */
    function renderRequests() {
        const rows = (st.cat === 'external') ? st.reqIn.concat(st.reqOut).map(reqRow) : [];
        $('mxReqWrap').hidden = !rows.length;
        $('mxReqs').innerHTML = rows.join('');
        $('mxReqs').querySelectorAll('[data-act]').forEach(b => b.addEventListener('click', () => reqAction(+b.dataset.id, b.dataset.act)));
    }
    function reqRow(r) {
        const inc = r.direction === 'incoming';
        const sub = (r.agency ? esc(r.agency) + ' · ' : '') + (r.note ? esc(r.note) : (inc ? 'Sohbet isteği gönderdi' : 'Onay bekleniyor'));
        const act = inc
            ? `<button class="mx-req-btn ok" data-act="accept" data-id="${r.id}" title="Onayla"><i class="fas fa-check"></i></button>
               <button class="mx-req-btn no" data-act="reject" data-id="${r.id}" title="Reddet"><i class="fas fa-xmark"></i></button>`
            : (r.status === 'rejected'
                ? `<span class="mx-req-state no">Reddedildi</span><button class="mx-req-btn no" data-act="cancel" data-id="${r.id}" title="Listeden kaldır"><i class="fas fa-trash"></i></button>`
                : `<span class="mx-req-state wait">Bekliyor</span><button class="mx-req-btn no" data-act="cancel" data-id="${r.id}" title="İsteği geri çek"><i class="fas fa-rotate-left"></i></button>`);
        return `<div class="mx-req">${av(r,'mx-av')}
            <div class="mx-req-b"><div class="mx-req-nm">${esc(r.title)}</div><div class="mx-req-sub">${sub}</div></div>
            <div class="mx-req-act">${act}</div></div>`;
    }
    function reqAction(id, act) {
        if (act === 'cancel') {
            api(`${API.base}/requests/${id}`,{method:'DELETE'}).then(d=>{ if(d.success) loadRequests(); }).catch(()=>{});
            return;
        }
        api(`${API.base}/requests/${id}/respond`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:act})}).then(d=>{
            loadRequests();
            if (d.success && d.status === 'accepted' && d.conversation) {
                if (!st.convs.find(c=>c.id===d.conversation.id)) st.convs.unshift(Object.assign({unread:0,last_message:null},d.conversation));
                st.peer = d.conversation;
                openChat(d.conversation.id);
                toast('Sohbet isteği onaylandı.');
            } else if (d.success) { toast('Sohbet isteği reddedildi.'); refreshSoon(); }
            else { toast(d.message || 'İstek yanıtlanamadı.'); }
        }).catch(()=>{});
    }
    function openReqModal(peer) {
        st.reqPeer = peer || null;
        $('mxrqSub').textContent = ((peer && peer.name) ? peer.name : 'Kullanıcı') + ((peer && peer.agency) ? ' · ' + peer.agency : '');
        $('mxrqNote').value = ''; $('mxrqMsg').textContent = '';
        $('mxrqSend').disabled = false;
        $('mxrqOv').hidden = false;
        setTimeout(()=>$('mxrqNote').focus(),120);
    }
    function closeReqModal() { $('mxrqOv').hidden = true; st.reqPeer = null; }
    function sendReq() {
        if (!st.reqPeer || !st.reqPeer.id) return;
        $('mxrqSend').disabled = true;
        api(API.requests,{method:'POST',headers:{'Content-Type':'application/json'},
            body:JSON.stringify({ user_id:st.reqPeer.id, note:$('mxrqNote').value.trim() })}).then(d=>{
            if (d.success && d.conversation) {   // el sıkışma zaten tamamdı: sohbeti aç
                closeReqModal();
                if (!st.convs.find(c=>c.id===d.conversation.id)) st.convs.unshift(Object.assign({unread:0,last_message:null},d.conversation));
                st.peer = d.conversation; openChat(d.conversation.id);
            } else if (d.success) {
                closeReqModal(); loadRequests();
                toast(d.message || 'Sohbet isteği gönderildi.');
            } else {
                $('mxrqMsg').textContent = d.message || 'İstek gönderilemedi.';
                $('mxrqSend').disabled = false;
            }
        }).catch(()=>{ $('mxrqMsg').textContent='İstek gönderilemedi.'; $('mxrqSend').disabled=false; });
    }
    let toastT = null;
    function toast(msg) {
        const el = $('mxToast'); if (!el || !msg) return;
        el.textContent = msg; el.classList.add('on');
        clearTimeout(toastT); toastT = setTimeout(()=>el.classList.remove('on'), 3400);
    }

    // ── Dış sohbet izinleri (acente ayarı) ──
    const MODE_DESC = {
        all: 'Diğer acentelerdeki kullanıcılar tüm aktif personelinize sohbet isteği gönderebilir.',
        selected: 'Yalnızca seçtiğiniz roldeki veya tek tek seçtiğiniz kullanıcılara ulaşılabilir.',
        none: 'Acentenizdeki hiçbir kullanıcıya dışarıdan sohbet isteği gönderilemez.',
    };
    const sset = { modes:[], roles:[], users:[], mode:'all', roleSel:new Set(), userSel:new Set(), tab:'roles', canEdit:false };
    function openSettings() {
        $('mxsetOv').hidden = false;
        $('mxsetModes').innerHTML = '';
        $('mxsetList').innerHTML = '<div class="msgx-lp-empty">Yükleniyor…</div>';
        $('mxsetCount').textContent = '—';
        api(API.extSettings).then(d=>{
            sset.canEdit = !!d.can_edit;
            sset.modes = d.modes || []; sset.roles = d.roles || []; sset.users = d.users || [];
            sset.mode = (d.setting && d.setting.mode) || 'all';
            sset.roleSel = new Set(((d.setting && d.setting.role_ids) || []).map(Number));
            sset.userSel = new Set(((d.setting && d.setting.user_ids) || []).map(Number));
            sset.tab = 'roles'; $('mxsetSearch').value = '';
            renderSettings();
        }).catch(()=>{ $('mxsetList').innerHTML='<div class="msgx-lp-empty">Ayarlar yüklenemedi.</div>'; });
    }
    function closeSettings() { $('mxsetOv').hidden = true; }
    function renderSettings() {
        $('mxsetModes').innerHTML = sset.modes.map(m=>`<div class="mxs-mode ${m.key===sset.mode?'on':''}" data-m="${m.key}">
            <span class="mxs-radio"></span>
            <span class="mxs-mode-tx"><b>${esc(m.label)}</b><span>${esc(MODE_DESC[m.key]||'')}</span></span></div>`).join('');
        $('mxsetModes').querySelectorAll('.mxs-mode').forEach(el=>el.addEventListener('click',()=>{
            if (!sset.canEdit) return;
            sset.mode = el.dataset.m; renderSettings();
        }));

        $('mxsetPick').hidden = sset.mode !== 'selected';
        document.querySelectorAll('#mxsetOv .mxs-tab').forEach(b=>b.classList.toggle('active', b.dataset.t===sset.tab));

        const q = ($('mxsetSearch').value||'').trim().toLowerCase();
        const rows = sset.tab === 'roles'
            ? sset.roles.filter(r=>!q||(r.label||'').toLowerCase().includes(q)).map(r=>({ id:r.id, name:r.label, sel:sset.roleSel.has(+r.id) }))
            : sset.users.filter(u=>!q||(u.name||'').toLowerCase().includes(q)).map(u=>({ id:u.id, name:u.name, sel:sset.userSel.has(+u.id), user:u }));
        $('mxsetList').innerHTML = rows.length
            ? rows.map(r=>`<div class="mxg-row ${r.sel?'sel':''}" data-id="${r.id}">
                ${r.user ? av(r.user,'mx-av') : `<span class="mx-av mxs-ic" style="background:linear-gradient(135deg,var(--mx-a),var(--mx-a2))"><i class="fas fa-user-shield"></i></span>`}
                <span class="mxg-row-nm">${esc(r.name)}</span><span class="mxg-check"><i class="fas fa-check"></i></span></div>`).join('')
            : '<div class="msgx-lp-empty">Kayıt bulunamadı.</div>';
        $('mxsetList').querySelectorAll('.mxg-row').forEach(el=>el.addEventListener('click',()=>{
            if (!sset.canEdit) return;
            const id = +el.dataset.id, bag = sset.tab==='roles' ? sset.roleSel : sset.userSel;
            bag.has(id) ? bag.delete(id) : bag.add(id);
            renderSettings();
        }));

        const modeLabel = (sset.modes.find(m=>m.key===sset.mode)||{}).label || '';
        $('mxsetCount').textContent = !sset.canEdit
            ? 'Bu ayarı yalnızca acente sahibi değiştirebilir'
            : (sset.mode==='selected' ? `${sset.roleSel.size} rol · ${sset.userSel.size} kullanıcı seçildi` : modeLabel);
        $('mxsetSave').disabled = !sset.canEdit;
    }
    function saveSettings() {
        if (!sset.canEdit) return;
        $('mxsetSave').disabled = true;
        api(API.extSettings,{method:'POST',headers:{'Content-Type':'application/json'},
            body:JSON.stringify({ mode:sset.mode, role_ids:[...sset.roleSel], user_ids:[...sset.userSel] })}).then(d=>{
            if (d.success) { closeSettings(); toast(d.message||'Dış sohbet ayarları kaydedildi.'); loadDirectory(); }
            else { $('mxsetCount').textContent = d.message || 'Kaydedilemedi.'; }
        }).catch(()=>{ $('mxsetCount').textContent='Kaydedilemedi.'; }).finally(()=>{ $('mxsetSave').disabled = !sset.canEdit; });
    }

    // ── Sohbet aç ──
    function openChat(id) {
        const c = st.convs.find(x=>x.id===id) || st.peer;
        st.openId=id; st.lastId=0; st.peer=c; st.lastDay=null;
        clearPending(); clearLinks(); closeLp();
        $('mxEmpty').style.display='none';
        $('mxThreadWrap').classList.add('on');
        msgx.classList.add('thread-open');
        $('mxPeerName').textContent = c?c.title:'';
        st._headAv = c ? (c.avatar||null) : null;
        $('mxPeerAv').outerHTML = av(c,'mx-av mx-av-sm').replace('<span','<span id="mxPeerAv"');
        paintPeerSt();
        const isGrp = !!(c && c.type==='group');
        $('mxInfoBtn').hidden = !isGrp;
        $('mxPeerHead').classList.toggle('click', isGrp);
        paintVisitorActions(c);
        $('mxMsgs').innerHTML = '<div class="mx-day">Yükleniyor…</div>';
        renderList();
        loadMessages(true);
        markRead(id);
        startPolling();
        setTimeout(()=>$('mxInput').focus(),120);
    }

    let msgBusy=false;
    function loadMessages(toBottom) {
        if (!st.openId) return;
        if (!toBottom && msgBusy) return;
        msgBusy=true;
        const url = `${API.base}/conversations/${st.openId}/messages`+(st.lastId?`?after_id=${st.lastId}`:'');
        api(url).then(d=>{
            if (!d.messages) return;
            if (st.lastId===0) { $('mxMsgs').innerHTML=''; st.lastDay=null; }
            let added=false;
            d.messages.forEach(m=>{ appendMsg(m); st.lastId=Math.max(st.lastId,m.id); added=true; });
            if (d.conversation) {
                st.peer = Object.assign(st.peer||{}, d.conversation);
                $('mxPeerName').textContent=d.conversation.title;
                paintPeerSt();
                paintVisitorActions(st.peer);
                // Grup simgesi değiştiyse başlık avatarını tazele (her poll'da değil)
                const nAv = d.conversation.avatar||null;
                if (st._headAv !== nAv) { st._headAv = nAv; $('mxPeerAv').outerHTML = av(st.peer,'mx-av mx-av-sm').replace('<span','<span id="mxPeerAv"'); }
            }
            if (added && (toBottom || nearBottom())) scrollBottom();
            if (added && d.messages.some(m=>!m.mine) && isViewing()) markRead(st.openId);
        }).catch(()=>{}).finally(()=>{ msgBusy=false; });
    }
    function appendMsg(m) {
        const t = $('mxMsgs');
        if (m.id && t.querySelector(`.mx-msg[data-id="${m.id}"]`)) return;
        const day = dayLabel(m.at);
        if (day && day!==st.lastDay) { const dd=document.createElement('div'); dd.className='mx-day'; dd.textContent=day; t.appendChild(dd); st.lastDay=day; }
        const div = document.createElement('div');
        div.className = 'mx-msg '+(m.mine?'mx-out':'mx-in');
        div.dataset.id = m.id;
        if (m.revoked) { div.classList.add('revoked'); div.innerHTML = revokedHtml(m); t.appendChild(div); return; }
        let h='';
        if (!m.mine && m.sender && st.peer && st.peer.type==='group') h+=`<div class="mx-sender" style="color:hsl(${hue(m.sender.name)},58%,44%)">${esc(m.sender.name)}${m.sender.agency?` <span class="ag">· ${esc(m.sender.agency)}</span>`:''}</div>`;
        if (m.body) h+=esc(m.body).replace(/\n/g,'<br>');
        if (m.attachments && m.attachments.length) {
            h+='<div class="mx-att">';
            m.attachments.forEach(a=>{
                if (a.kind==='image') h+=`<div class="mx-att-imgwrap"><img class="mx-att-img" src="${a.url}" onclick="window.open('${a.url}','_blank')" alt=""><a class="mx-att-imgdl" href="${a.download_url}" title="İndir" onclick="event.stopPropagation()"><i class="fas fa-download"></i></a></div>`;
                else h+=`<div class="mx-att-file"><i class="fas fa-file-lines fic"></i><span class="mx-att-meta"><span class="mx-att-name">${esc(a.name)}</span>${a.size?`<span class="mx-att-size">${esc(a.size)}</span>`:''}</span><a class="mx-att-act" href="${a.url}" target="_blank" title="Aç"><i class="fas fa-up-right-from-square"></i></a><a class="mx-att-act" href="${a.download_url}" title="İndir"><i class="fas fa-download"></i></a></div>`;
            });
            h+='</div>';
        }
        if (m.links && m.links.length) {
            h+='<div class="mx-links">';
            m.links.forEach((l,i)=>{ h+=`<a class="mx-lc" data-i="${i}"><span class="mx-lc-ic"><i class="fas ${l.icon||'fa-link'}"></i></span><span class="mx-lc-b"><span class="mx-lc-t">${esc(LBL[l.type]||l.type)}</span><span class="mx-lc-l">${esc(l.label)}</span></span></a>`; });
            h+='</div>';
        }
        h+=`<span class="mx-time">${esc(m.time||'')}${m.mine?tick(m.read):''}</span>`;
        div.innerHTML=h;
        if (m.links && m.links.length) div.querySelectorAll('.mx-lc').forEach(el=>el.addEventListener('click',()=>openLink(m.links[+el.dataset.i])));
        t.appendChild(div);
    }
    function tick(read) { return ` <i class="fas ${read?'fa-check-double mx-tick mx-tick-read':'fa-check mx-tick'}"></i>`; }
    function revokedHtml(m) { let h='<div class="mx-revoked-note"><i class="fas fa-ban"></i> Bu içerik geri çekildi / iptal edildi</div>'; if(m.body) h+=`<div class="mx-revoked-body">${esc(m.body).replace(/\n/g,'<br>')}</div>`; h+=`<span class="mx-time">${esc(m.time||'')}</span>`; return h; }
    function openLink(l) { if(!l||!l.url) return; let p=l.url; try{ const u=new URL(l.url,location.origin); p=u.pathname+u.search; }catch(e){} if(l.qv && typeof window.openQuickView==='function'){ try{ window.openQuickView(p); return; }catch(e){} } window.open(l.url,'_blank'); }
    function nearBottom() { const b=$('mxMsgs'); return b.scrollHeight-b.scrollTop-b.clientHeight<160; }
    function scrollBottom() { const b=$('mxMsgs'); b.scrollTop=b.scrollHeight; }

    let patchBusy=false;
    function patchThread() {
        if (!st.openId || patchBusy) return; patchBusy=true;
        api(`${API.base}/conversations/${st.openId}/messages`).then(d=>{
            (d.messages||[]).forEach(m=>{
                const el=$('mxMsgs').querySelector(`.mx-msg[data-id="${m.id}"]`); if(!el) return;
                if (m.revoked) { if(!el.classList.contains('revoked')){ el.classList.add('revoked'); el.innerHTML=revokedHtml(m); } return; }
                if (m.mine) { const tk=el.querySelector('.mx-tick'); if(tk){ const r=tk.classList.contains('mx-tick-read'); if(m.read&&!r) tk.className='fas fa-check-double mx-tick mx-tick-read'; else if(!m.read&&r) tk.className='fas fa-check mx-tick'; } }
            });
        }).catch(()=>{}).finally(()=>{ patchBusy=false; });
    }

    // ── Gönder ──
    function send() {
        const input=$('mxInput'), body=input.value.trim();
        if ((!body && !st.pending.length && !st.links.length && !st.docs.length) || !st.openId) return;
        const fd=new FormData(); fd.append('body',body);
        st.pending.forEach(f=>fd.append('attachments[]',f));
        if (st.links.length) fd.append('links', JSON.stringify(st.links));
        if (st.docs.length) fd.append('contract_docs', JSON.stringify(st.docs.map(d=>d.id)));
        const tmp=document.createElement('div'); tmp.className='mx-msg mx-out sending';
        tmp.innerHTML=(body?esc(body).replace(/\n/g,'<br>'):(st.docs.length?'📄':st.links.length?'🔗':'📎'))+'<span class="mx-time">gönderiliyor…</span>';
        $('mxMsgs').appendChild(tmp); scrollBottom();
        input.value=''; input.style.height='auto'; clearPending(); clearLinks();
        api(`${API.base}/conversations/${st.openId}/messages`,{method:'POST',body:fd}).then(d=>{
            tmp.remove(); if(d.success&&d.message){ appendMsg(d.message); st.lastId=Math.max(st.lastId,d.message.id); scrollBottom(); refreshSoon(); }
        }).catch(()=>{ const t=tmp.querySelector('.mx-time'); if(t) t.textContent='gönderilemedi'; });
    }

    // ── Ekler + link/belge chip'leri ──
    function addFiles(files) { Array.from(files).forEach(f=>st.pending.push(f)); renderChips(); }
    function clearPending() { st.pending=[]; $('mxFile').value=''; renderChips(); }
    function clearLinks() { st.links=[]; st.docs=[]; renderChips(); }
    function renderChips() {
        const a = st.pending.map((f,i)=>`<span class="mx-chip" data-k="f" data-i="${i}"><i class="fas fa-${(f.type||'').startsWith('image')?'image':'file'}"></i><span>${esc(f.name.slice(0,20))}</span><i class="fas fa-xmark x"></i></span>`);
        const l = st.links.map((x,i)=>`<span class="mx-chip" data-k="l" data-i="${i}"><i class="fas ${x.icon}"></i><span>${esc(x.label)}</span><i class="fas fa-xmark x"></i></span>`);
        const d = st.docs.map((x,i)=>`<span class="mx-chip doc" data-k="d" data-i="${i}"><i class="fas ${x.icon||'fa-file-signature'}"></i><span>${esc(x.label)}</span><i class="fas fa-xmark x"></i></span>`);
        $('mxChips').innerHTML = a.concat(l,d).join('');
        $('mxChips').querySelectorAll('.x').forEach(x=>x.addEventListener('click',()=>{ const c=x.closest('.mx-chip'); const arr={f:st.pending,l:st.links,d:st.docs}[c.dataset.k]; arr.splice(+c.dataset.i,1); renderChips(); }));
    }

    // ── Okundu ──
    function markRead(id) { api(`${API.base}/conversations/${id}/read`,{method:'POST'}).then(()=>{ const c=st.convs.find(x=>x.id===id); if(c) c.unread=0; renderList(); }).catch(()=>{}); }

    // ── Polling / socket ──
    function startPolling() { stopPolling(); let t=0; msgTimer=setInterval(()=>{ if(!socketOK) loadMessages(false); if(++t%4===0) patchThread(); },2500); }
    function stopPolling() { if(msgTimer){ clearInterval(msgTimer); msgTimer=null; } }
    let pollBusy=false;
    function refreshConvs() { if(pollBusy) return; pollBusy=true; api(API.conversations).then(d=>{ if(d.conversations){ st.convs=d.conversations; renderList(); } }).catch(()=>{}).finally(()=>{ pollBusy=false; }); }
    let rt=null; function refreshSoon() { clearTimeout(rt); rt=setTimeout(refreshConvs,400); }
    function globalPoll() { if(pollBusy) return; pollBusy=true; api(API.poll).then(d=>{ if(d.conversations){ st.convs=d.conversations; renderList(); } if(typeof d.requests_incoming==='number' && d.requests_incoming!==st.reqIn.length) loadRequests(); }).catch(()=>{}).finally(()=>{ pollBusy=false; }); }
    // Rehber (mesajlaşılmamış kişiler) nadiren değişir; poll'a yük bindirmemek için ayrı ve seyrek.
    function loadDirectory() { api(API.directory).then(d=>{ if(d.directory){ st.dir=d.directory; renderList(); } }).catch(()=>{}); }

    function initEcho() {
        try {
            const cfg=window.__CHAT_REVERB;
            if (!cfg||!cfg.enabled||!cfg.key||typeof window.Echo!=='function'||typeof window.Pusher==='undefined') return;
            const echo=new window.Echo({ broadcaster:'reverb', key:cfg.key, wsHost:cfg.host, wsPort:cfg.port, wssPort:cfg.port, forceTLS:cfg.scheme==='https', enabledTransports:['ws','wss'], authEndpoint:cfg.authEndpoint, auth:{headers:{'X-CSRF-TOKEN':CSRF}} });
            // Çevrimiçi kullanıcılar: presence kanalı üyeliği = bağlı olmak.
            presenceOn=true;
            echo.join('chat.presence')
                .here(us=>{ ONLINE.clear(); (us||[]).forEach(u=>ONLINE.add(+u.id)); paintPresence(); })
                .joining(u=>{ if(u){ ONLINE.add(+u.id); paintPresence(); } })
                .leaving(u=>{ if(u){ ONLINE.delete(+u.id); paintPresence(); } })
                .error(()=>{ presenceOn=false; paintPresence(); });

            // Başka bir sekmede çıkış yapıldıysa bu sekmenin soketi de kapanmalı,
            // yoksa presence üyeliği sürer ve kullanıcı çevrimiçi görünür.
            echo.private('chat.user.'+API.me)
                .listen('.message.sent',(e)=>{ if(e&&e.conversation_id===st.openId){ loadMessages(false); patchThread(); } refreshConvs(); })
                .listen('.session.ended',()=>leavePresence(echo));
            const p=echo.connector&&echo.connector.pusher;
            // Soket koparsa presence üyeliği de geçersizdir; bayat yeşil nokta göstermeyelim.
            const dropped=()=>{ socketOK=false; ONLINE.clear(); paintPresence(); };
            if (p&&p.connection){ p.connection.bind('connected',()=>socketOK=true); ['unavailable','disconnected','failed'].forEach(ev=>p.connection.bind(ev,dropped)); }
        } catch(e){ socketOK=false; presenceOn=false; }
    }

    // ── Birleşik arama (sohbet + kişi) ──
    let sT=null;
    function onSearch() {
        renderList();
        const q=$('mxSearch').value.trim();
        if (!q || st.cat==='customer') { $('mxContactsWrap').hidden=true; return; }
        clearTimeout(sT);
        sT=setTimeout(()=>{
            api(`${API.contacts}?q=${encodeURIComponent(q)}&scope=${st.cat}`).then(d=>{
                // Listede (sohbet ya da rehber olarak) zaten görünenler burada tekrarlanmasın;
                // bu bölüm artık yalnızca rehber sınırının dışında kalan kişiler için.
                const shown=knownPeers(); st.dir.forEach(u=>shown.add(+u.peer_id));
                const cs=(d.contacts||[]).filter(u=>!shown.has(+u.id)); $('mxContactsWrap').hidden=!cs.length;
                $('mxContacts').innerHTML = cs.map(u=>`<div class="msgx-conv" data-uid="${u.id}">${avp(u, u.id)}<div class="msgx-conv-body"><div class="msgx-conv-name">${esc(u.name)}</div><div class="msgx-conv-prev">${u.agency?`<i class="fas fa-globe" style="font-size:.62rem;margin-right:4px;color:#7c3aed"></i>${esc(u.agency)}`:'Sohbet başlat'}</div></div><i class="fas fa-paper-plane msgx-start-ic"></i></div>`).join('');
                $('mxContacts').querySelectorAll('.msgx-conv').forEach(r=>r.addEventListener('click',()=>startWith(+r.dataset.uid)));
            }).catch(()=>{});
        },250);
    }
    function startWith(uid) {
        api(API.start,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({user_id:uid})}).then(d=>{
            if (d.success&&d.conversation){ if(!st.convs.find(c=>c.id===d.conversation.id)) st.convs.unshift(Object.assign({unread:0,last_message:null},d.conversation)); st.peer=d.conversation; $('mxSearch').value=''; $('mxContactsWrap').hidden=true; openChat(d.conversation.id); return; }
            // Dış sohbet: el sıkışma tamamlanmadan konuşma açılmaz
            if (d.needs_request) { openReqModal(d.peer||{id:uid,name:'Kullanıcı'}); return; }
            if (d.status) { loadRequests(); toast(d.message||''); return; }
            toast(d.message||'Sohbet açılamadı.');
        }).catch(()=>{});
    }

    // ── Link/belge seçici ──
    function loadLinkTypes() { if(st.linkTypes.length) return Promise.resolve(); return api(API.linkTypes).then(d=>{ st.linkTypes=d.types||[]; }).catch(()=>{}); }
    function openLp() { loadLinkTypes().then(()=>{ if(!st.activeType&&st.linkTypes.length) st.activeType=st.linkTypes[0].key; renderTypes(); $('mxLpSearch').value=''; searchLinkables(''); $('mxLp').classList.add('on'); setTimeout(()=>$('mxLpSearch').focus(),120); }); }
    function closeLp() { $('mxLp').classList.remove('on'); }
    function renderTypes() {
        $('mxLpTypes').innerHTML = st.linkTypes.map(t=>`<button class="msgx-lp-type ${t.key===st.activeType?'active':''}" data-t="${t.key}"><i class="fas ${t.icon}"></i>${esc(t.label)}</button>`).join('');
        $('mxLpTypes').querySelectorAll('.msgx-lp-type').forEach(b=>b.addEventListener('click',()=>{ st.activeType=b.dataset.t; renderTypes(); searchLinkables($('mxLpSearch').value); }));
    }
    let lpT=null;
    function searchLinkables(q) {
        if (!st.activeType) return;
        $('mxLpResults').innerHTML='<div class="msgx-lp-empty">Aranıyor…</div>';
        clearTimeout(lpT);
        lpT=setTimeout(()=>{
            api(`${API.linkables}?type=${st.activeType}&q=${encodeURIComponent(q)}`).then(d=>{
                const rows=d.results||[];
                if (!rows.length) { $('mxLpResults').innerHTML='<div class="msgx-lp-empty">Sonuç yok.</div>'; return; }
                $('mxLpResults').innerHTML=rows.map((r,i)=>`<div class="msgx-lp-item" data-i="${i}"><div class="msgx-lp-ic"><i class="fas ${r.icon}"></i></div><div class="msgx-lp-name"><div class="n">${esc(r.label)}</div>${r.sub?`<div class="s">${esc(r.sub)}</div>`:''}</div><i class="fas fa-plus msgx-start-ic"></i></div>`).join('');
                $('mxLpResults').querySelectorAll('.msgx-lp-item').forEach(el=>el.addEventListener('click',()=>addLink(rows[+el.dataset.i])));
            }).catch(()=>{});
        },220);
    }
    function addLink(link) {
        if (!link) return;
        if (link.doc) { if(st.docs.length<6 && !st.docs.find(d=>d.id===link.id)) st.docs.push({id:link.id,label:link.label,icon:link.icon}); }
        else { if(st.links.length<6 && !st.links.find(l=>l.type===link.type&&l.id===link.id)) st.links.push(link); }
        renderChips(); closeLp();
    }

    // ── Grup oluşturma (WhatsApp mantığı) ──
    const grp = { sel:new Map(), contacts:[], avatar:null, avatarUrl:null };
    function paintGrpAv(){
        const b=$('mxgAvBtn');
        b.classList.toggle('has', !!grp.avatar);
        b.style.backgroundImage = grp.avatar ? `url('${grp.avatarUrl}')` : '';
    }
    function openGroupModal() {
        grp.sel.clear();
        if (grp.avatarUrl) URL.revokeObjectURL(grp.avatarUrl);
        grp.avatar=null; grp.avatarUrl=null; $('mxgAvatar').value=''; paintGrpAv();
        $('mxgName').value=''; $('mxgSearch').value='';
        renderGrpChips(); updateGrpFoot();
        $('mxgOv').hidden=false;
        grpSearch('');
        setTimeout(()=>$('mxgName').focus(),120);
    }
    function closeGroupModal(){ $('mxgOv').hidden=true; }
    let gT=null;
    function grpSearch(q){
        clearTimeout(gT);
        gT=setTimeout(()=>{
            // Gruplar şirket içi kurulur: yalnızca acente personeli listelenir
            api(`${API.contacts}?q=${encodeURIComponent(q)}&scope=internal`).then(d=>{ grp.contacts=d.contacts||[]; renderGrpList(); }).catch(()=>{});
        }, q?220:0);
    }
    function renderGrpList(){
        const list=$('mxgList');
        if(!grp.contacts.length){ list.innerHTML='<div class="msgx-lp-empty">Kişi bulunamadı.</div>'; return; }
        list.innerHTML=grp.contacts.map(u=>`<div class="mxg-row ${grp.sel.has(u.id)?'sel':''}" data-id="${u.id}">${av(u,'mx-av')}<span class="mxg-row-nm">${esc(u.name)}</span><span class="mxg-check"><i class="fas fa-check"></i></span></div>`).join('');
        list.querySelectorAll('.mxg-row').forEach(r=>r.addEventListener('click',()=>toggleGrpUser(+r.dataset.id)));
    }
    function toggleGrpUser(id){
        if(grp.sel.has(id)) grp.sel.delete(id);
        else { const u=grp.contacts.find(x=>x.id===id); if(u) grp.sel.set(id,u); }
        renderGrpList(); renderGrpChips(); updateGrpFoot();
    }
    function renderGrpChips(){
        $('mxgChips').innerHTML=[...grp.sel.values()].map(u=>`<span class="mxg-chip" data-id="${u.id}">${av(u,'mx-av')}<span>${esc((u.name||'').split(' ')[0])}</span><i class="fas fa-xmark x"></i></span>`).join('');
        $('mxgChips').querySelectorAll('.x').forEach(x=>x.addEventListener('click',()=>toggleGrpUser(+x.closest('.mxg-chip').dataset.id)));
    }
    function updateGrpFoot(){
        const n=grp.sel.size;
        $('mxgCount').textContent = n ? `${n} üye seçildi` : 'Üye seçilmedi';
        $('mxgCreate').disabled = !(n>0 && $('mxgName').value.trim().length>0);
    }
    let grpBusy=false;
    function createGroup(){
        const title=$('mxgName').value.trim();
        if(!title||!grp.sel.size||grpBusy) return;
        grpBusy=true; $('mxgCreate').disabled=true;
        const fd=new FormData();
        fd.append('title',title);
        [...grp.sel.keys()].forEach(id=>fd.append('user_ids[]',id));
        if (grp.avatar) fd.append('avatar',grp.avatar);
        api(API.groups,{method:'POST',body:fd}).then(d=>{
            if(d.success&&d.conversation){
                closeGroupModal();
                if(!st.convs.find(c=>c.id===d.conversation.id)) st.convs.unshift(Object.assign({unread:0,last_message:null},d.conversation));
                st.peer=d.conversation;
                openChat(d.conversation.id);
            }
        }).catch(()=>{}).finally(()=>{ grpBusy=false; updateGrpFoot(); });
    }

    // ── Grup bilgisi: üyeler, üye ekleme, ayrılma ──
    const gi = { members:[], leaveArmed:false };
    function paintGiAv(){
        const el=$('mxgiAv');
        const has=!!(st.peer&&st.peer.avatar);
        el.classList.toggle('has',has);
        el.style.backgroundImage = has ? `url('${st.peer.avatar}')` : '';
    }
    function uploadGroupAvatar(file){
        if(!file||!st.openId) return;
        const fd=new FormData(); fd.append('avatar',file);
        api(`${API.base}/conversations/${st.openId}/avatar`,{method:'POST',body:fd}).then(d=>{
            if(d.success&&d.conversation){
                st.peer=Object.assign(st.peer||{},d.conversation);
                const c=st.convs.find(x=>x.id===st.openId); if(c) c.avatar=d.conversation.avatar;
                st._headAv=d.conversation.avatar||null;
                $('mxPeerAv').outerHTML = av(st.peer,'mx-av mx-av-sm').replace('<span','<span id="mxPeerAv"');
                paintGiAv(); renderList();
            }
        }).catch(()=>{});
    }
    function openGroupInfo(){
        if(!st.openId||!st.peer||st.peer.type!=='group') return;
        gi.leaveArmed=false; resetLeaveBtn();
        paintGiAv();
        // Genel sohbetin üyeliği acente personelinden otomatik oluşur: elle ekleme/ayrılma yok
        const gen = !!st.peer.is_general;
        $('mxgiAddWrap').hidden = gen;
        $('mxgiLeave').hidden = gen;
        $('mxgiAv').classList.toggle('pick', !gen);
        $('mxgiTitle').textContent=st.peer.title||'Grup';
        $('mxgiSub').textContent='Üyeler yükleniyor…';
        $('mxgiList').innerHTML='<div class="msgx-lp-empty">Yükleniyor…</div>';
        $('mxgiSearch').value=''; $('mxgiResults').innerHTML='';
        $('mxgiOv').hidden=false;
        loadGroupMembers();
    }
    function closeGroupInfo(){ $('mxgiOv').hidden=true; }
    function loadGroupMembers(){
        api(`${API.base}/conversations/${st.openId}/participants`).then(d=>{
            gi.members=d.members||[];
            $('mxgiSub').textContent = st.peer?.is_general
                ? `Şirketteki herkes · ${gi.members.length} üye`
                : `${gi.members.length} üye`;
            $('mxgiList').innerHTML=gi.members.map(m=>`<div class="mxg-row" style="cursor:default">${av(m,'mx-av')}<span class="mxg-row-nm">${esc(m.name)}</span>${m.agency?`<span class="mxg-badge agency" title="${esc(m.agency)}">${esc(m.agency)}</span>`:''}${m.is_creator?'<span class="mxg-badge owner">Kurucu</span>':''}${m.me?'<span class="mxg-badge you">Siz</span>':''}</div>`).join('');
            if(st.peer){ st.peer.members_count=gi.members.length; paintPeerSt(); }
        }).catch(()=>{});
    }
    let giT=null;
    function giSearch(q){
        clearTimeout(giT);
        if(!q.trim()){ $('mxgiResults').innerHTML=''; return; }
        giT=setTimeout(()=>{
            api(`${API.contacts}?q=${encodeURIComponent(q)}`).then(d=>{
                const existing=new Set(gi.members.map(m=>m.id));
                const rows=(d.contacts||[]).filter(u=>!existing.has(u.id));
                $('mxgiResults').innerHTML = rows.length
                    ? rows.map(u=>`<div class="mxg-row" data-id="${u.id}">${av(u,'mx-av')}<span class="mxg-row-nm">${esc(u.name)}</span>${u.agency?`<span class="mxg-badge agency" title="${esc(u.agency)}">${esc(u.agency)}</span>`:''}<span class="mxg-check"><i class="fas fa-plus"></i></span></div>`).join('')
                    : '<div class="msgx-lp-empty">Eklenebilecek kişi bulunamadı.</div>';
                $('mxgiResults').querySelectorAll('.mxg-row').forEach(r=>r.addEventListener('click',()=>addGroupMember(+r.dataset.id)));
            }).catch(()=>{});
        },220);
    }
    function addGroupMember(id){
        api(`${API.base}/conversations/${st.openId}/participants`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({user_ids:[id]})}).then(d=>{
            if(d.success){ $('mxgiSearch').value=''; $('mxgiResults').innerHTML=''; loadGroupMembers(); refreshSoon(); }
        }).catch(()=>{});
    }
    function resetLeaveBtn(){ const b=$('mxgiLeave'); b.innerHTML='<i class="fas fa-arrow-right-from-bracket"></i>Gruptan Ayrıl'; b.style.background=''; b.style.color=''; }
    function leaveGroup(){
        const b=$('mxgiLeave');
        if(!gi.leaveArmed){
            gi.leaveArmed=true;
            b.innerHTML='<i class="fas fa-triangle-exclamation"></i>Emin misiniz? Tekrar tıklayın';
            b.style.background='#dc2626'; b.style.color='#fff';
            setTimeout(()=>{ gi.leaveArmed=false; resetLeaveBtn(); },3500);
            return;
        }
        api(`${API.base}/conversations/${st.openId}/leave`,{method:'POST'}).then(d=>{
            if(d.success){
                const id=st.openId;
                closeGroupInfo();
                st.convs=st.convs.filter(c=>c.id!==id);
                st.openId=null; st.peer=null; stopPolling();
                $('mxThreadWrap').classList.remove('on');
                $('mxEmpty').style.display='';
                msgx.classList.remove('thread-open');
                renderList();
            }
        }).catch(()=>{});
    }

    // ── Olaylar ──
    $('mxNewGroup').addEventListener('click', openGroupModal);
    $('mxgX').addEventListener('click', closeGroupModal);
    $('mxgOv').addEventListener('click', e=>{ if(e.target===e.currentTarget) closeGroupModal(); });
    $('mxgName').addEventListener('input', updateGrpFoot);
    $('mxgAvBtn').addEventListener('click', ()=>$('mxgAvatar').click());
    $('mxgAvatar').addEventListener('change', e=>{
        const f=e.target.files[0];
        if (grp.avatarUrl) URL.revokeObjectURL(grp.avatarUrl);
        grp.avatar=f||null; grp.avatarUrl=f?URL.createObjectURL(f):null;
        paintGrpAv();
    });
    $('mxgiAv').addEventListener('click', ()=>{ if(st.peer&&st.peer.type==='group'&&!st.peer.is_general) $('mxgiAvatar').click(); });
    $('mxgiAvatar').addEventListener('change', e=>{ uploadGroupAvatar(e.target.files[0]); e.target.value=''; });
    $('mxgSearch').addEventListener('input', e=>grpSearch(e.target.value));
    $('mxgCreate').addEventListener('click', createGroup);
    $('mxInfoBtn').addEventListener('click', openGroupInfo);
    $('mxPeerHead').addEventListener('click', ()=>{ if(st.peer&&st.peer.type==='group') openGroupInfo(); });
    $('mxgiX').addEventListener('click', closeGroupInfo);
    $('mxgiOv').addEventListener('click', e=>{ if(e.target===e.currentTarget) closeGroupInfo(); });
    $('mxgiSearch').addEventListener('input', e=>giSearch(e.target.value));
    $('mxgiLeave').addEventListener('click', leaveGroup);
    document.addEventListener('keydown', e=>{ if(e.key==='Escape'){ closeGroupModal(); closeGroupInfo(); closeReqModal(); closeSettings(); } });
    $('mxSend').addEventListener('click', send);
    $('mxInput').addEventListener('keydown', e=>{ if(e.key==='Enter'&&!e.shiftKey){ e.preventDefault(); send(); } });
    $('mxInput').addEventListener('input', function(){ this.style.height='auto'; this.style.height=Math.min(this.scrollHeight,140)+'px'; });
    $('mxAttachBtn').addEventListener('click', ()=>$('mxFile').click());
    $('mxFile').addEventListener('change', e=>addFiles(e.target.files));
    $('mxLinkBtn').addEventListener('click', openLp);
    $('mxLpX').addEventListener('click', closeLp);
    $('mxLpSearch').addEventListener('input', e=>searchLinkables(e.target.value));
    $('mxSearch').addEventListener('input', onSearch);
    $('mxNew').addEventListener('click', ()=>{ $('mxSearch').focus(); });
    document.querySelectorAll('#mxCats .msgx-cat').forEach(b => b.addEventListener('click', () => {
        st.cat = b.dataset.cat;
        document.querySelectorAll('#mxCats .msgx-cat').forEach(x => x.classList.toggle('active', x === b));
        $('mxContactsWrap').hidden = true;
        // İzin ayarı yalnızca dış sohbet bölümünü ilgilendirir
        $('mxExtSettings').hidden = st.cat !== 'external';
        onSearch();
    }));
    $('mxExtSettings').addEventListener('click', openSettings);
    $('mxsetX').addEventListener('click', closeSettings);
    $('mxsetOv').addEventListener('click', e=>{ if(e.target===e.currentTarget) closeSettings(); });
    $('mxsetSave').addEventListener('click', saveSettings);
    $('mxsetSearch').addEventListener('input', renderSettings);
    document.querySelectorAll('#mxsetOv .mxs-tab').forEach(b=>b.addEventListener('click',()=>{ sset.tab=b.dataset.t; $('mxsetSearch').value=''; renderSettings(); }));
    $('mxrqX').addEventListener('click', closeReqModal);
    $('mxrqOv').addEventListener('click', e=>{ if(e.target===e.currentTarget) closeReqModal(); });
    $('mxrqSend').addEventListener('click', sendReq);
    $('mxThreadReload').addEventListener('click', ()=>{ if(st.openId){ st.lastId=0; loadMessages(true); } });

    // ── Ziyaretçi sohbeti: müşteri kaydı / sohbeti kapat ──
    $('mxVisitorCustomer').addEventListener('click', async () => {
        if (!st.openId) return;
        const v = (st.peer && st.peer.visitor) || {};

        // Kayıt zaten bağlıysa müşteri quick-view'ını aç
        if (v.customer_id) {
            if (window.openCustomerDrawer) window.openCustomerDrawer(v.customer_id);
            else window.open(`{{ url('agency/customers') }}/${v.customer_id}`, '_blank');
            return;
        }

        const ok = await appConfirm({
            title: 'Müşteri kaydı',
            text: 'Telefon/e-posta ile eşleşen kayıt aranacak; bulunamazsa sohbetteki bilgilerle yeni müşteri oluşturulacak.',
            confirmButtonText: 'Devam',
        });
        if (!ok) return;

        try {
            const d = await api(`${API.base}/conversations/${st.openId}/link-customer`, { method: 'POST' });
            if (d.success) {
                appToast({ icon: 'success', title: d.message });
                if (st.peer) st.peer.visitor = Object.assign(st.peer.visitor || {}, {
                    customer_id: d.customer.id, customer_name: d.customer.name,
                });
                paintVisitorActions(st.peer);
                refreshConvs();
            } else {
                appToast({ icon: 'error', title: d.message || 'İşlem başarısız.' });
            }
        } catch (e) { appToast({ icon: 'error', title: 'Bir hata oluştu.' }); }
    });

    $('mxVisitorClose').addEventListener('click', async () => {
        if (!st.openId) return;
        const ok = await appConfirm({
            title: 'Sohbet kapatılsın mı?',
            text: 'Ziyaretçi yeni mesaj yazarsa sohbet yeniden açılır.',
            confirmButtonText: 'Kapat',
        });
        if (!ok) return;
        try {
            const d = await api(`${API.base}/conversations/${st.openId}/close-visitor`, { method: 'POST' });
            if (d.success) { appToast({ icon: 'success', title: d.message }); refreshConvs(); }
        } catch (e) { appToast({ icon: 'error', title: 'Bir hata oluştu.' }); }
    });
    $('mxBack').addEventListener('click', ()=>{ msgx.classList.remove('thread-open'); });
    document.addEventListener('visibilitychange', ()=>{ if(isViewing()) markRead(st.openId); });
    const msgs=$('mxMsgs'); ['dragover','drop'].forEach(ev=>msgs.addEventListener(ev,e=>{ e.preventDefault(); if(ev==='drop'&&e.dataTransfer.files.length) addFiles(e.dataTransfer.files); }));

    // ── Başlat ──
    refreshConvs();
    loadDirectory();
    loadRequests();
    initEcho();
    let g=0; setInterval(()=>{ if(socketOK&&(++g%6!==0)) return; globalPoll(); }, 4000);
    setInterval(loadDirectory, 300000); // yeni personel/kullanıcı 5 dakikada bir listeye düşsün
})();
</script>
@endpush