@extends('seller.layouts.app')

@section('style')
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════
   RESET & LAYOUT OVERRIDES
══════════════════════════════════════════ */
.wa-wrap, .wa-wrap *{box-sizing:border-box;}

/* ── Remove padding/gaps around chat but KEEP user_panel sidebar ── */
.aiz-main-content .px-15px, .aiz-main-content > div:first-child{padding:0!important;margin:0!important;height:100%;} .aiz-main-content{padding:0!important;overflow:hidden!important;}



.wa-wrap .row, .wa-wrap .col, .wa-wrap [class*="col-"]{padding:0!important;margin:0!important;}

/* ── Lock ALL SVG sizes inside chat (prevents huge empty-state blowup) ── */
.wa-wrap svg{max-width:100%;max-height:100%;display:block;}
.wa-wrap .wa-icon-btn svg{width:22px!important;height:22px!important;}
.wa-wrap .wa-back svg{width:24px!important;height:24px!important;}
.wa-wrap .wa-search-wrap svg{width:16px!important;height:16px!important;}
.wa-wrap .wa-send svg{width:22px!important;height:22px!important;}
.wa-wrap .wa-empty-icon{width:280px!important;max-width:70%!important;height:auto!important;}
.wa-wrap .wa-empty-list svg{width:48px!important;height:48px!important;}
.wa-wrap .wa-tick svg, .wa-wrap .wa-tick-mini svg{width:16px!important;height:11px!important;flex-shrink:0;}
.wa-wrap .wa-scroll-btn svg{width:20px!important;height:20px!important;}

:root{
    --wa-green:#e62e04;
    --wa-green-dark:#c92800;
    --wa-green-light:#ffe5dd;
    --wa-green-hover:#e8f5e9;
    --wa-bg:#faf2ef;
    --wa-panel:#ffffff;
    --wa-sidebar:#ffffff;
    --wa-header:#f0f2f5;
    --wa-border:#e9edef;
    --wa-text:#111b21;
    --wa-text-sec:#667781;
    --wa-text-muted:#8696a0;
    --wa-bubble-in:#ffffff;
    --wa-bubble-out:#ffe5dd;
    --wa-hover:#f5f6f6;
    --wa-active:#f0f2f5;
    --wa-tick:#53bdeb;
    --wa-shadow:0 1px 0.5px rgba(11,20,26,0.13);
    --wa-shadow-lg:0 2px 5px rgba(11,20,26,0.08);
}

/* ══════════════════════════════════════════
   MAIN WRAPPER
══════════════════════════════════════════ */
.wa-wrap{
    font-family:'Inter','Segoe UI',system-ui,sans-serif;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    width:100%;
    max-width:100%;
    height:calc(100vh - 180px);
    min-height:600px;
    max-height:820px;
    background:var(--wa-bg);
    overflow:hidden;
    color:var(--wa-text);
    position:relative;
    margin:0;
    padding:0;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    isolation:isolate;
}

/* Force children to behave as flex items, not blocks */
.wa-wrap > .wa-side,
.wa-wrap > .wa-main{
    display:flex!important;
    flex-direction:column!important;
    flex-shrink:0;
}

.wa-wrap > .wa-main{
    flex:1 1 auto!important;
    flex-shrink:1;
    min-width:0;
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.wa-side{
    width:320px;
    min-width:320px;
    max-width:320px;
    height:100%;
    background:var(--wa-sidebar);
    display:flex;
    flex-direction:column;
    border-right:1px solid var(--wa-border);
    overflow:hidden;
}

.wa-side-head{
    background:var(--wa-header);
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
    min-height:59px;
}

.wa-side-head-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.wa-me-av{
    width:40px;
    height:40px;
    min-width:40px;
    max-width:40px;
    border-radius:50%;
    overflow:hidden;
    background:var(--wa-border);
    flex-shrink:0;
}

.wa-me-av img{
    width:40px;
    height:40px;
    object-fit:cover;
    display:block;
}

.wa-side-head h5{
    color:var(--wa-text);
    font-size:1rem;
    font-weight:600;
    margin:0;
}

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

.wa-icon-btn{
    width:40px;
    height:40px;
    border:none;
    background:transparent;
    border-radius:50%;
    color:var(--wa-text-sec);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.15s;
}

.wa-icon-btn:hover{background:rgba(0,0,0,0.05);}

/* Search */
.wa-search{
    padding:8px 12px;
    background:var(--wa-sidebar);
    border-bottom:1px solid var(--wa-border);
    flex-shrink:0;
}

.wa-search-wrap{
    background:var(--wa-header);
    border-radius:8px;
    display:flex;
    align-items:center;
    padding:0 12px;
    height:35px;
    transition:box-shadow 0.15s;
}

.wa-search-wrap:focus-within{
    box-shadow:0 0 0 2px var(--wa-green);
}

.wa-search-wrap svg{
    color:var(--wa-text-muted);
    flex-shrink:0;
    margin-right:10px;
}

.wa-search-wrap input{
    flex:1;
    border:none;
    background:transparent;
    outline:none;
    font-size:0.88rem;
    color:var(--wa-text);
    height:100%;
}

.wa-search-wrap input::placeholder{color:var(--wa-text-muted);}

/* Chat list */
.wa-list{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
}

.wa-list::-webkit-scrollbar{width:6px;}
.wa-list::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}
.wa-list:hover::-webkit-scrollbar-thumb{background:#d1d7db;}

.wa-item{
    display:flex;
    align-items:center;
    gap:13px;
    padding:10px 13px 10px 15px;
    cursor:pointer;
    transition:background 0.1s;
    border-bottom:1px solid transparent;
    position:relative;
}

.wa-item:hover{background:var(--wa-hover);}
.wa-item.active{background:var(--wa-active);}

.wa-item::after{
    content:'';
    position:absolute;
    left:78px;
    right:0;
    bottom:0;
    height:1px;
    background:var(--wa-border);
}
.wa-item:last-child::after{display:none;}

.wa-av{
    width:49px;
    height:49px;
    min-width:49px;
    max-width:49px;
    border-radius:50%;
    overflow:hidden;
    background:var(--wa-border);
    flex-shrink:0;
}

.wa-av img{
    width:49px;
    height:49px;
    object-fit:cover;
    display:block;
}

.wa-item-info{
    flex:1;
    min-width:0;
}

.wa-item-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:3px;
    gap:8px;
}

.wa-name{
    font-size:1rem;
    font-weight:500;
    color:var(--wa-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:1;
    min-width:0;
}

.wa-time{
    font-size:0.72rem;
    color:var(--wa-text-muted);
    white-space:nowrap;
    flex-shrink:0;
}

.wa-item.has-unread .wa-time{
    color:var(--wa-green);
    font-weight:500;
}

.wa-preview-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.wa-preview{
    font-size:0.85rem;
    color:var(--wa-text-sec);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:4px;
}

.wa-preview .wa-tick-mini{
    color:var(--wa-text-muted);
    flex-shrink:0;
}

.wa-preview .wa-tick-mini.seen{color:var(--wa-tick);}

.wa-badge{
    min-width:20px;
    height:20px;
    background:var(--wa-green);
    color:#fff;
    border-radius:999px;
    font-size:0.68rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
    flex-shrink:0;
}

.wa-empty-list{
    text-align:center;
    padding:40px 20px;
    color:var(--wa-text-muted);
    font-size:0.88rem;
}

.wa-empty-list svg{
    opacity:0.4;
    margin-bottom:10px;
}

/* ══════════════════════════════════════════
   MAIN CHAT PANEL
══════════════════════════════════════════ */
.wa-main{
    flex:1;
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
}

/* Empty state - shown by default */
.wa-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    background:var(--wa-header);
    border-bottom:6px solid var(--wa-green);
    text-align:center;
    padding:30px;
    height:100%;
    width:100%;
}

.wa-main > .wa-empty.is-hidden{display:none!important;}

.wa-empty-icon{
    width:320px;
    max-width:80%;
    opacity:0.9;
}

.wa-empty h3{
    font-size:2rem;
    font-weight:300;
    color:#41525d;
    margin:0;
}

.wa-empty p{
    font-size:0.88rem;
    color:var(--wa-text-sec);
    margin:0;
    max-width:460px;
    line-height:1.5;
}

.wa-empty-encrypt{
    margin-top:auto;
    padding-top:20px;
    font-size:0.8rem;
    color:var(--wa-text-muted);
    display:flex;
    align-items:center;
    gap:6px;
}

/* Active chat - hidden by default, shown via JS */
.wa-active{
    display:none;
    flex-direction:column;
    height:100%;
    overflow:hidden;
    background:var(--wa-bg);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><defs><pattern id='p' x='0' y='0' width='60' height='60' patternUnits='userSpaceOnUse'><circle cx='30' cy='30' r='1.2' fill='%23e8c4b8' opacity='0.35'/><path d='M10 10l4 0M46 46l4 0M20 45l3 0M40 15l3 0' stroke='%23e8c4b8' stroke-width='1' stroke-linecap='round' opacity='0.3'/></pattern></defs><rect width='200' height='200' fill='url(%23p)'/></svg>");
}

.wa-main > .wa-active{display:none;}
.wa-main > .wa-active.is-open{display:flex!important;}

/* Chat header */
.wa-chat-head{
    background:var(--wa-header);
    padding:10px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
    min-height:59px;
    border-bottom:1px solid var(--wa-border);
    z-index:2;
}

.wa-back{
    display:none;
    background:transparent;
    border:none;
    color:var(--wa-text-sec);
    cursor:pointer;
    padding:4px;
    border-radius:50%;
}

.wa-back:hover{background:rgba(0,0,0,0.05);}

.wa-chat-head .wa-av{
    width:40px;
    height:40px;
    min-width:40px;
    max-width:40px;
    cursor:pointer;
}

.wa-chat-head .wa-av img{
    width:40px;
    height:40px;
}

.wa-chat-info{
    flex:1;
    min-width:0;
    cursor:pointer;
}

.wa-chat-name{
    font-size:1rem;
    font-weight:500;
    color:var(--wa-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.wa-chat-status{
    font-size:0.78rem;
    color:var(--wa-text-sec);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.wa-chat-actions{
    display:flex;
    gap:4px;
    flex-shrink:0;
}

/* Messages area */
.wa-msgs{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:12px 5% 12px 5%;
    display:flex;
    flex-direction:column;
    gap:2px;
    scroll-behavior:smooth;
}

.wa-msgs::-webkit-scrollbar{width:6px;}
.wa-msgs::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:3px;}
.wa-msgs::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.25);}

/* Date divider */
.wa-divider{
    align-self:center;
    background:#e1f2fb;
    color:#54656f;
    font-size:0.78rem;
    font-weight:500;
    padding:5px 12px;
    border-radius:8px;
    margin:12px 0;
    box-shadow:var(--wa-shadow);
}

/* System message (encryption notice) */
.wa-system{
    align-self:center;
    background:#fff3c4;
    color:#54656f;
    font-size:0.78rem;
    padding:6px 14px;
    border-radius:8px;
    margin:6px 0 12px;
    box-shadow:var(--wa-shadow);
    max-width:80%;
    text-align:center;
    line-height:1.5;
}

/* Message row */
.wa-msg{
    display:flex;
    max-width:65%;
    position:relative;
    animation:waFadeIn 0.15s ease;
}

@keyframes waFadeIn{
    from{opacity:0;transform:translateY(4px);}
    to{opacity:1;transform:translateY(0);}
}

.wa-msg.out{align-self:flex-end;}
.wa-msg.in{align-self:flex-start;}

/* Grouped messages */
.wa-msg + .wa-msg{margin-top:2px;}
.wa-msg.group-start{margin-top:10px;}

.wa-bubble{
    position:relative;
    padding:6px 7px 8px 9px;
    border-radius:8px;
    box-shadow:var(--wa-shadow);
    font-size:0.93rem;
    line-height:1.45;
    word-wrap:break-word;
    word-break:break-word;
    white-space:pre-wrap;
    max-width:100%;
    min-width:70px;
}

.wa-msg.in .wa-bubble{
    background:var(--wa-bubble-in);
    color:var(--wa-text);
}

.wa-msg.out .wa-bubble{
    background:var(--wa-bubble-out);
    color:var(--wa-text);
}

/* Tail */
.wa-msg.group-start.in .wa-bubble::before{
    content:'';
    position:absolute;
    top:0;
    left:-8px;
    width:8px;
    height:13px;
    background:var(--wa-bubble-in);
    clip-path:polygon(100% 0,0 0,100% 100%);
}

.wa-msg.group-start.out .wa-bubble::before{
    content:'';
    position:absolute;
    top:0;
    right:-8px;
    width:8px;
    height:13px;
    background:var(--wa-bubble-out);
    clip-path:polygon(0 0,100% 0,0 100%);
}

.wa-msg-text{
    padding-right:60px;
}

.wa-msg-meta{
    position:absolute;
    right:8px;
    bottom:4px;
    display:flex;
    align-items:center;
    gap:3px;
    font-size:0.68rem;
    color:var(--wa-text-muted);
    pointer-events:none;
}

.wa-msg-time{
    line-height:1;
}

.wa-tick{
    display:inline-flex;
    color:var(--wa-text-muted);
}

.wa-tick.seen{color:var(--wa-tick);}

/* New messages indicator */
.wa-unread-divider{
    align-self:center;
    width:100%;
    text-align:center;
    font-size:0.78rem;
    color:var(--wa-text-sec);
    padding:4px 0;
    margin:8px 0;
    background:rgba(255,255,255,0.7);
    font-weight:500;
}

/* Scroll to bottom button */
.wa-scroll-btn{
    position:absolute;
    bottom:80px;
    right:20px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    border:none;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    color:var(--wa-text-sec);
    cursor:pointer;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:3;
    transition:transform 0.15s;
}

.wa-scroll-btn:hover{transform:scale(1.05);}
.wa-scroll-btn.show{display:flex;}

.wa-scroll-btn-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:18px;
    height:18px;
    background:var(--wa-green);
    color:#fff;
    border-radius:999px;
    font-size:0.65rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
}

/* Input area */
.wa-input-area{
    background:var(--wa-header);
    padding:10px 16px;
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex-shrink:0;
}

.wa-input-wrap{
    flex:1;
    background:#fff;
    border-radius:8px;
    display:flex;
    align-items:flex-end;
    padding:9px 12px;
    min-width:0;
}

.wa-input-wrap textarea{
    flex:1;
    border:none;
    outline:none;
    font-family:inherit;
    font-size:0.94rem;
    resize:none;
    max-height:120px;
    min-height:22px;
    line-height:1.5;
    color:var(--wa-text);
    background:transparent;
    min-width:0;
    padding:0;
}

.wa-input-wrap textarea::placeholder{color:var(--wa-text-muted);}

.wa-send{
    width:44px;
    height:44px;
    min-width:44px;
    background:var(--wa-green);
    border:none;
    border-radius:50%;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background 0.15s,transform 0.1s;
}

.wa-send:hover{background:var(--wa-green-dark);}
.wa-send:active{transform:scale(0.94);}
.wa-send:disabled{background:var(--wa-text-muted);cursor:not-allowed;}

/* Typing indicator */
.wa-typing{
    align-self:flex-start;
    background:var(--wa-bubble-in);
    padding:12px 16px;
    border-radius:8px;
    box-shadow:var(--wa-shadow);
    display:none;
    align-items:center;
    gap:4px;
    margin-top:4px;
}

.wa-typing.show{display:flex;}

.wa-typing span{
    width:7px;
    height:7px;
    background:var(--wa-text-muted);
    border-radius:50%;
    animation:waBounce 1.2s infinite;
}

.wa-typing span:nth-child(2){animation-delay:0.2s;}
.wa-typing span:nth-child(3){animation-delay:0.4s;}

@keyframes waBounce{
    0%,60%,100%{transform:translateY(0);opacity:0.5;}
    30%{transform:translateY(-6px);opacity:1;}
}

/* Loading skeleton */
.wa-skeleton{
    padding:10px 13px 10px 15px;
    display:flex;
    gap:13px;
    align-items:center;
}

.wa-skeleton-av{
    width:49px;
    height:49px;
    border-radius:50%;
    background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size:200% 100%;
    animation:waShimmer 1.4s infinite;
    flex-shrink:0;
}

.wa-skeleton-lines{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.wa-skeleton-line{
    height:12px;
    border-radius:4px;
    background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size:200% 100%;
    animation:waShimmer 1.4s infinite;
}

.wa-skeleton-line.short{width:60%;}

@keyframes waShimmer{
    0%{background-position:200% 0;}
    100%{background-position:-200% 0;}
}

/* Toast */
.wa-toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(100px);
    background:#323232;
    color:#fff;
    padding:10px 20px;
    border-radius:6px;
    font-size:0.88rem;
    z-index:9999;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
    transition:transform 0.25s;
    pointer-events:none;
}

.wa-toast.show{transform:translateX(-50%) translateY(0);}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1200px){
    .wa-side{width:300px;min-width:300px;max-width:300px;}
}

@media(max-width:992px){
    .wa-side{width:280px;min-width:280px;max-width:280px;}
    .wa-name{font-size:0.92rem;}
    .wa-preview{font-size:0.8rem;}
}

@media(max-width:900px){
    .wa-wrap{
        height:calc(100vh - 120px);
        min-height:500px;
        max-height:none;
        border-radius:0;
    }
    .wa-side{
        position:absolute;
        top:0;left:0;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        height:100%;
        z-index:10;
        transition:transform 0.25s ease;
    }
    .wa-side.hide-mob{transform:translateX(-100%);}
    .wa-back{display:flex!important;align-items:center;}
    .wa-msg{max-width:80%;}
    .wa-empty h3{font-size:1.5rem;}
    .wa-empty-icon{width:200px!important;}
}
</style>
@endsection

@section('panel_content')
{{-- Critical CSS inlined here as a safety net in case @section('style') doesn't render in this layout --}}
<style>
.wa-wrap{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:stretch !important;width:100% !important;height:calc(100vh - 180px) !important;min-height:600px !important;max-height:820px !important;overflow:hidden !important;background:#faf2ef !important;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08);position:relative;font-family:'Inter','Segoe UI',system-ui,sans-serif;color:#111b21;}
.wa-wrap *{box-sizing:border-box;}
.wa-wrap > .wa-side{flex:0 0 320px !important;max-width:320px !important;width:320px !important;height:100% !important;background:#fff !important;display:flex !important;flex-direction:column !important;border-right:1px solid #e9edef !important;overflow:hidden !important;}
.wa-wrap > .wa-main{flex:1 1 auto !important;min-width:0 !important;height:100% !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;position:relative !important;}
.wa-wrap .wa-empty{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:20px;background:#f0f2f5 !important;border-bottom:6px solid #e62e04;text-align:center;padding:30px;height:100% !important;width:100% !important;}
.wa-wrap .wa-empty.is-hidden{display:none !important;}
.wa-wrap .wa-active{display:none !important;flex-direction:column;height:100% !important;overflow:hidden;}
.wa-wrap .wa-active.is-open{display:flex !important;}
.wa-wrap svg{max-width:100%;max-height:100%;}
.wa-wrap .wa-empty-icon{width:280px !important;max-width:70% !important;height:auto !important;}
.wa-wrap .wa-icon-btn svg{width:22px !important;height:22px !important;}
.wa-wrap .wa-back svg{width:24px !important;height:24px !important;}
.wa-wrap .wa-send svg{width:22px !important;height:22px !important;}
.wa-wrap .wa-search-wrap svg{width:16px !important;height:16px !important;}
.wa-wrap .wa-av{width:49px !important;height:49px !important;min-width:49px !important;max-width:49px !important;border-radius:50% !important;overflow:hidden !important;}
.wa-wrap .wa-av img{width:49px !important;height:49px !important;object-fit:cover !important;display:block !important;}
.wa-wrap .wa-chat-head .wa-av{width:40px !important;height:40px !important;min-width:40px !important;max-width:40px !important;}
.wa-wrap .wa-chat-head .wa-av img{width:40px !important;height:40px !important;}
.wa-wrap .wa-me-av{width:40px !important;height:40px !important;min-width:40px !important;max-width:40px !important;border-radius:50% !important;overflow:hidden !important;}
.wa-wrap .wa-me-av img{width:40px !important;height:40px !important;object-fit:cover !important;display:block !important;}
</style>

<input type="hidden" id="authUserId" value="{{ Auth()->user()->id }}">
<input type="hidden" id="authUserName" value="{{ Auth()->user()->name }}">
<input type="hidden" id="authUserImage" value="{{ Auth()->user()->avatar_original ? uploaded_asset(Auth()->user()->avatar_original) : static_asset('assets/img/avatar-place.png') }}">
<input type="hidden" id="initSellerId" value="{{ $seller_id ?? 0 }}">

<div class="wa-wrap" style="display:flex !important;flex-direction:row !important;width:100%;height:calc(100vh - 180px);min-height:600px;max-height:820px;overflow:hidden;">

    {{-- ═══════════ SIDEBAR ═══════════ --}}
    <div class="wa-side" id="waSide" style="flex:0 0 320px;max-width:320px;">
        <div class="wa-side-head">
            <div class="wa-side-head-left">
                <div class="wa-me-av">
                    <img src="{{ Auth()->user()->avatar_original ? uploaded_asset(Auth()->user()->avatar_original) : static_asset('assets/img/avatar-place.png') }}" alt="Me" onerror="this.src='{{ static_asset('assets/img/avatar-place.png') }}'">
                </div>
            </div>
            <div class="wa-side-actions">
                <button class="wa-icon-btn" title="{{ translate('New chat') }}">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                </button>
                <button class="wa-icon-btn" title="{{ translate('Menu') }}">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
                </button>
            </div>
        </div>

        <div class="wa-search">
            <div class="wa-search-wrap">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                <input type="text" id="waSearch" placeholder="{{ translate('Search or start new chat') }}">
            </div>
        </div>

        <div class="wa-list" id="waList">
            {{-- Skeleton loading --}}
            <div class="wa-skeleton"><div class="wa-skeleton-av"></div><div class="wa-skeleton-lines"><div class="wa-skeleton-line"></div><div class="wa-skeleton-line short"></div></div></div>
            <div class="wa-skeleton"><div class="wa-skeleton-av"></div><div class="wa-skeleton-lines"><div class="wa-skeleton-line"></div><div class="wa-skeleton-line short"></div></div></div>
            <div class="wa-skeleton"><div class="wa-skeleton-av"></div><div class="wa-skeleton-lines"><div class="wa-skeleton-line"></div><div class="wa-skeleton-line short"></div></div></div>
        </div>
    </div>

    {{-- ═══════════ MAIN ═══════════ --}}
    <div class="wa-main" style="flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:hidden;">

        {{-- Empty state --}}
        <div class="wa-empty" id="waEmpty">
            <svg class="wa-empty-icon" viewBox="0 0 303 172" xmlns="http://www.w3.org/2000/svg">
                <defs><linearGradient id="e1" x1="50%" x2="50%" y1="100%" y2="0%"><stop offset="0%" stop-color="#f0f2f5"/><stop offset="100%" stop-color="#fafafa"/></linearGradient></defs>
                <path fill="url(#e1)" d="M229.565 160.229C259.295 133.804 281 100.725 281 62.152 281 23.58 247.18 0 208.607 0c-19.337 0-36.957 6.72-49.886 17.714-12.931-10.994-30.551-17.714-49.888-17.714C70.261 0 36.43 23.58 36.43 62.152c0 38.573 21.707 71.652 51.437 98.077L158.72 172l70.845-11.771z"/>
                <path fill="#dfe5e7" d="M232.401 141.354c21.185-20.975 34.008-49.007 34.008-79.773 0-30.765-27.28-47.775-57.802-47.775-17.551 0-33.559 5.495-44.193 14.304C153.779 19.3 137.772 13.806 120.221 13.806c-30.524 0-57.803 17.01-57.803 47.775s12.823 58.798 34.008 79.773l68.02 9.63 67.955-9.63z"/>
                <path fill="#fff" d="M155.815 156.96c24.437 0 44.243-19.79 44.243-44.207s-19.806-44.207-44.243-44.207c-24.436 0-44.242 19.79-44.242 44.207s19.806 44.207 44.242 44.207z"/>
                <path fill="#dfe5e7" d="M146 88v50h20V88h-20zm0 55v10h20v-10h-20z"/>
            </svg>
            <h3>{{ translate('Keep your messages secure') }}</h3>
            <p>{{ translate('Select a chat from the sidebar to start messaging. Your messages are end-to-end encrypted and private.') }}</p>
            <div class="wa-empty-encrypt">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                {{ translate('End-to-end encrypted') }}
            </div>
        </div>

        {{-- Active chat --}}
        <div class="wa-active" id="waActive">

            {{-- Header --}}
            <div class="wa-chat-head">
                <button class="wa-back" id="waBack" aria-label="Back">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
                </button>
                <div class="wa-av">
                    <img id="waHeadImg" src="{{ static_asset('assets/img/avatar-place.png') }}" alt="Avatar" onerror="this.src='{{ static_asset('assets/img/avatar-place.png') }}'">
                </div>
                <div class="wa-chat-info">
                    <div class="wa-chat-name" id="waHeadName">—</div>
                    <div class="wa-chat-status" id="waHeadStatus">{{ translate('click here for contact info') }}</div>
                </div>
                <div class="wa-chat-actions">
                    <button class="wa-icon-btn" id="waSearchBtn" title="{{ translate('Search in chat') }}">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                    </button>
                    <div class="wa-menu-wrap" style="position:relative;">
                        <button class="wa-icon-btn" id="waMenuBtn" title="{{ translate('Menu') }}" type="button">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
                        </button>
                        <div class="wa-menu-dropdown" id="waMenuDropdown">
                            <button class="wa-menu-item" data-action="contact">{{ translate('View contact') }}</button>
                            <button class="wa-menu-item" data-action="search">{{ translate('Search messages') }}</button>
                            <button class="wa-menu-item" data-action="mute">{{ translate('Mute notifications') }}</button>
                            <button class="wa-menu-item" data-action="clear">{{ translate('Clear chat') }}</button>
                            <button class="wa-menu-item wa-menu-danger" data-action="block">{{ translate('Block user') }}</button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Messages --}}
            <div class="wa-msgs" id="waMsgs"></div>

            {{-- Scroll to bottom button --}}
            <button class="wa-scroll-btn" id="waScrollBtn" aria-label="Scroll to bottom">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                <span class="wa-scroll-btn-badge" id="waUnreadScroll" style="display:none;">0</span>
            </button>

            {{-- Input --}}
            <div class="wa-input-area">
                <button class="wa-icon-btn" title="{{ translate('Emoji') }}" type="button">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>
                </button>
                <button class="wa-icon-btn" title="{{ translate('Attach') }}" type="button" id="waAttachBtn" onclick="document.getElementById('waFileInput').click()">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                </button>
                <input type="file" id="waFileInput" style="display:none;" accept="image/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/plain,.zip,.rar">
                <div class="wa-input-wrap">
                    <textarea id="waInput" rows="1" placeholder="{{ translate('Type a message') }}" autocomplete="off"></textarea>
                </div>
                <button class="wa-send" id="waSend" aria-label="Send" disabled>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="wa-toast" id="waToast"></div>
@endsection

@section('script')
<script>
/* ═══════════════════════════════════════════
   INJECT FULL CSS AT RUNTIME
   Deferred to avoid race with site's own initialization scripts
═══════════════════════════════════════════ */
function __waInjectChatCSS(){
    if(document.getElementById('wa-runtime-css')) return;
    var s = document.createElement('style');
    s.id = 'wa-runtime-css';
    s.textContent = [
        ".wa-wrap,.wa-wrap *{box-sizing:border-box;}",
        ".wa-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important;color:#111b21 !important;}",
        ".wa-side{background:#fff !important;display:flex !important;flex-direction:column !important;border-right:1px solid #e9edef !important;overflow:hidden !important;}",
        ".wa-side-head{background:#e62e04 !important;padding:10px 16px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;flex-shrink:0 !important;min-height:59px !important;border-bottom:1px solid #c92800 !important;}",
        ".wa-side-head-left{display:flex !important;align-items:center !important;gap:12px !important;}",
        ".wa-side-actions{display:flex !important;gap:4px !important;align-items:center !important;}",
        ".wa-me-av{width:40px !important;height:40px !important;min-width:40px !important;max-width:40px !important;border-radius:50% !important;overflow:hidden !important;background:#e9edef !important;flex-shrink:0 !important;}",
        ".wa-me-av img{width:40px !important;height:40px !important;object-fit:cover !important;display:block !important;}",
        ".wa-icon-btn{width:40px !important;height:40px !important;min-width:40px !important;border:none !important;background:transparent !important;border-radius:50% !important;color:#667781 !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;}",
        ".wa-icon-btn:hover{background:rgba(0,0,0,0.05) !important;}",
        ".wa-icon-btn svg{width:22px !important;height:22px !important;display:block !important;}",
        ".wa-search{padding:8px 12px !important;background:#fff !important;border-bottom:1px solid #e9edef !important;flex-shrink:0 !important;}",
        ".wa-search-wrap{background:#f0f2f5 !important;border-radius:8px !important;display:flex !important;align-items:center !important;padding:0 12px !important;height:35px !important;}",
        ".wa-search-wrap svg{width:16px !important;height:16px !important;color:#8696a0 !important;flex-shrink:0 !important;margin-right:10px !important;}",
        ".wa-search-wrap input{flex:1 !important;border:none !important;background:transparent !important;outline:none !important;font-size:0.88rem !important;color:#111b21 !important;height:100% !important;}",
        ".wa-list{flex:1 !important;overflow-y:auto !important;overflow-x:hidden !important;}",
        ".wa-list::-webkit-scrollbar{width:6px;}",
        ".wa-list::-webkit-scrollbar-thumb{background:#d1d7db;border-radius:3px;}",
        ".wa-item{display:flex !important;align-items:center !important;gap:13px !important;padding:10px 13px 10px 15px !important;cursor:pointer !important;border-bottom:1px solid #f0f2f5 !important;position:relative;pointer-events:auto !important;user-select:none !important;-webkit-tap-highlight-color:rgba(230,46,4,0.15) !important;touch-action:manipulation !important;}",
        ".wa-item img,.wa-item span,.wa-item div{pointer-events:none;}",
        ".wa-item:hover{background:#f5f6f6 !important;}",
        ".wa-item.active{background:#f0f2f5 !important;}",
        ".wa-av{width:49px !important;height:49px !important;min-width:49px !important;max-width:49px !important;border-radius:50% !important;overflow:hidden !important;background:#e9edef !important;flex-shrink:0 !important;}",
        ".wa-av img{width:49px !important;height:49px !important;object-fit:cover !important;display:block !important;}",
        ".wa-item-info{flex:1 !important;min-width:0 !important;}",
        ".wa-item-top{display:flex !important;align-items:center !important;justify-content:space-between !important;margin-bottom:3px !important;gap:8px !important;}",
        ".wa-name{font-size:1rem !important;font-weight:500 !important;color:#111b21 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;flex:1 !important;min-width:0 !important;}",
        ".wa-time{font-size:0.72rem !important;color:#8696a0 !important;white-space:nowrap !important;flex-shrink:0 !important;}",
        ".wa-item.has-unread .wa-time{color:#e62e04 !important;font-weight:500 !important;}",
        ".wa-preview-row{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important;}",
        ".wa-preview{font-size:0.85rem !important;color:#667781 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;flex:1 !important;min-width:0 !important;display:flex !important;align-items:center !important;gap:4px !important;}",
        ".wa-preview-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}",
        ".wa-tick-mini{color:#8696a0;flex-shrink:0;display:inline-flex;}",
        ".wa-tick-mini.seen{color:#53bdeb;}",
        ".wa-tick-mini svg{width:14px !important;height:14px !important;}",
        ".wa-badge{min-width:20px !important;height:20px !important;background:#e62e04 !important;color:#fff !important;border-radius:999px !important;font-size:0.68rem !important;font-weight:600 !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 6px !important;flex-shrink:0 !important;}",
        ".wa-empty-list{text-align:center !important;padding:40px 20px !important;color:#8696a0 !important;font-size:0.88rem !important;}",
        ".wa-empty-list svg{opacity:0.4;margin-bottom:10px;width:48px !important;height:48px !important;display:block;margin-left:auto;margin-right:auto;}",
        ".wa-main{flex:1 1 auto !important;min-width:0 !important;height:100% !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;position:relative !important;}",
        ".wa-empty{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:20px !important;background:#f0f2f5 !important;border-bottom:6px solid #e62e04 !important;text-align:center !important;padding:30px !important;height:100% !important;width:100% !important;}",
        ".wa-empty.is-hidden{display:none !important;}",
        ".wa-empty-icon{width:280px !important;max-width:70% !important;height:auto !important;opacity:0.9;}",
        ".wa-empty h3{font-size:2rem !important;font-weight:300 !important;color:#41525d !important;margin:0 !important;}",
        ".wa-empty p{font-size:0.88rem !important;color:#667781 !important;margin:0 !important;max-width:460px !important;line-height:1.5 !important;}",
        ".wa-empty-encrypt{margin-top:auto !important;padding-top:20px !important;font-size:0.8rem !important;color:#8696a0 !important;display:flex !important;align-items:center !important;gap:6px !important;}",
        ".wa-active{display:none;flex-direction:column;height:100% !important;overflow:hidden;background:#faf2ef;}",
        ".wa-active.is-open{display:flex !important;}",
        ".wa-chat-head{background:#e62e04 !important;padding:10px 16px !important;display:flex !important;align-items:center !important;gap:12px !important;flex-shrink:0 !important;min-height:59px !important;border-bottom:1px solid #c92800 !important;z-index:2;}",
        ".wa-chat-head .wa-chat-name{color:#fff !important;}",
        ".wa-chat-head .wa-chat-status{color:rgba(255,255,255,0.85) !important;}",
        ".wa-chat-head .wa-icon-btn{color:#fff !important;}",
        ".wa-chat-head .wa-icon-btn:hover{background:rgba(255,255,255,0.15) !important;}",
        ".wa-chat-head .wa-back{color:#fff !important;}",
        ".wa-chat-head .wa-back:hover{background:rgba(255,255,255,0.15) !important;}",
        ".wa-side-head .wa-icon-btn{color:#fff !important;}",
        ".wa-side-head .wa-icon-btn:hover{background:rgba(255,255,255,0.15) !important;}",
        ".wa-back{display:none;background:transparent;border:none;color:#667781;cursor:pointer;padding:4px;border-radius:50%;}",
        ".wa-back:hover{background:rgba(0,0,0,0.05);}",
        ".wa-back svg{width:24px !important;height:24px !important;}",
        ".wa-chat-head .wa-av{width:40px !important;height:40px !important;min-width:40px !important;max-width:40px !important;cursor:pointer;}",
        ".wa-chat-head .wa-av img{width:40px !important;height:40px !important;}",
        ".wa-chat-info{flex:1 !important;min-width:0 !important;cursor:pointer;}",
        ".wa-chat-name{font-size:1rem !important;font-weight:500 !important;color:#111b21 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}",
        ".wa-chat-status{font-size:0.78rem !important;color:#667781 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}",
        ".wa-chat-actions{display:flex !important;gap:4px !important;flex-shrink:0 !important;}",
        ".wa-menu-wrap{position:relative !important;}",
        ".wa-menu-dropdown{position:absolute !important;top:100% !important;right:0 !important;background:#fff !important;border-radius:8px !important;box-shadow:0 4px 16px rgba(0,0,0,0.15) !important;min-width:200px !important;padding:6px 0 !important;z-index:100 !important;display:none !important;margin-top:4px !important;}",
        ".wa-menu-dropdown.show{display:block !important;}",
        ".wa-menu-item{display:block !important;width:100% !important;padding:10px 20px !important;border:none !important;background:transparent !important;text-align:left !important;cursor:pointer !important;font-size:0.88rem !important;color:#111b21 !important;font-family:inherit !important;}",
        ".wa-menu-item:hover{background:#f5f6f6 !important;}",
        ".wa-menu-danger{color:#e62e04 !important;}",
        ".wa-menu-danger:hover{background:#fff0ee !important;}",
        ".wa-msgs{flex:1 !important;overflow-y:auto !important;overflow-x:hidden !important;padding:12px 5% !important;display:flex !important;flex-direction:column !important;gap:2px !important;scroll-behavior:smooth;}",
        ".wa-msgs::-webkit-scrollbar{width:6px;}",
        ".wa-msgs::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:3px;}",
        ".wa-divider{align-self:center !important;background:#e1f2fb !important;color:#54656f !important;font-size:0.78rem !important;font-weight:500 !important;padding:5px 12px !important;border-radius:8px !important;margin:12px 0 !important;box-shadow:0 1px 0.5px rgba(11,20,26,0.13);}",
        ".wa-system{align-self:center !important;background:#fff3c4 !important;color:#54656f !important;font-size:0.78rem !important;padding:6px 14px !important;border-radius:8px !important;margin:6px 0 12px !important;box-shadow:0 1px 0.5px rgba(11,20,26,0.13);max-width:80%;text-align:center;line-height:1.5;}",
        ".wa-msg{display:flex !important;max-width:65% !important;position:relative;}",
        ".wa-msg.out{align-self:flex-end !important;}",
        ".wa-msg.in{align-self:flex-start !important;}",
        ".wa-msg + .wa-msg{margin-top:2px;}",
        ".wa-msg.group-start{margin-top:10px !important;}",
        ".wa-bubble{position:relative !important;padding:6px 7px 8px 9px !important;border-radius:8px !important;box-shadow:0 1px 0.5px rgba(11,20,26,0.13) !important;font-size:0.93rem !important;line-height:1.45 !important;word-wrap:break-word !important;word-break:break-word !important;white-space:pre-wrap !important;max-width:100% !important;min-width:70px !important;}",
        ".wa-msg.in .wa-bubble{background:#ffffff !important;color:#111b21 !important;}",
        ".wa-msg.out .wa-bubble{background:#ffe5dd !important;color:#111b21 !important;}",
        ".wa-msg.group-start.in .wa-bubble::before{content:'';position:absolute;top:0;left:-8px;width:8px;height:13px;background:#fff;clip-path:polygon(100% 0,0 0,100% 100%);}",
        ".wa-msg.group-start.out .wa-bubble::before{content:'';position:absolute;top:0;right:-8px;width:8px;height:13px;background:#ffe5dd;clip-path:polygon(0 0,100% 0,0 100%);}",
        ".wa-msg-text{padding-right:60px !important;display:block;}",
        ".wa-msg-meta{position:absolute !important;right:8px !important;bottom:4px !important;display:flex !important;align-items:center !important;gap:3px !important;font-size:0.68rem !important;color:#8696a0 !important;pointer-events:none;}",
        ".wa-msg-time{line-height:1;}",
        ".wa-tick{display:inline-flex !important;color:#8696a0 !important;}",
        ".wa-tick.seen{color:#53bdeb !important;}",
        ".wa-tick svg{width:16px !important;height:11px !important;}",
        ".wa-scroll-btn{position:absolute !important;bottom:80px !important;right:20px !important;width:42px !important;height:42px !important;border-radius:50% !important;background:#fff !important;border:none !important;box-shadow:0 2px 8px rgba(0,0,0,0.15) !important;color:#667781 !important;cursor:pointer !important;display:none;align-items:center;justify-content:center;z-index:3;}",
        ".wa-scroll-btn.show{display:flex !important;}",
        ".wa-scroll-btn svg{width:20px !important;height:20px !important;}",
        ".wa-scroll-btn-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;background:#e62e04;color:#fff;border-radius:999px;font-size:0.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;}",
        ".wa-input-area{background:#f0f2f5 !important;padding:10px 16px !important;display:flex !important;align-items:flex-end !important;gap:10px !important;flex-shrink:0 !important;}",
        ".wa-input-wrap{flex:1 !important;background:#fff !important;border-radius:8px !important;display:flex !important;align-items:flex-end !important;padding:9px 12px !important;min-width:0 !important;}",
        ".wa-input-wrap textarea{flex:1 !important;border:none !important;outline:none !important;font-family:inherit !important;font-size:0.94rem !important;resize:none !important;max-height:120px !important;min-height:22px !important;line-height:1.5 !important;color:#111b21 !important;background:transparent !important;min-width:0 !important;padding:0 !important;}",
        ".wa-send{width:44px !important;height:44px !important;min-width:44px !important;background:#e62e04 !important;border:none !important;border-radius:50% !important;color:#fff !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;}",
        ".wa-send:hover{background:#c92800 !important;}",
        ".wa-send:active{transform:scale(0.94);}",
        ".wa-send:disabled{background:#8696a0 !important;cursor:not-allowed !important;}",
        ".wa-send svg{width:22px !important;height:22px !important;}",
        "@media(max-width:900px){.wa-back{display:flex !important;align-items:center;}.wa-msg{max-width:80% !important;}.wa-empty h3{font-size:1.5rem !important;}.wa-empty-icon{width:200px !important;}.wa-side.hide-mob{transform:translateX(-100%) !important;transition:transform 0.25s ease !important;z-index:1 !important;}.wa-side{transition:transform 0.25s ease !important;}}"
    ].join('\n');
    document.head.appendChild(s);
    console.log('[Chat] Runtime CSS injected successfully');
}

// Defer injection until page fully loaded — prevents race with site scripts
if(document.readyState === 'complete'){
    __waInjectChatCSS();
} else {
    window.addEventListener('load', __waInjectChatCSS);
}
</script>

<script>
/* ═══════════════════════════════════════════
   FORCE LAYOUT VIA JS — BYPASSES ALL CSS ISSUES
   Last-resort defensive styling in case CSS is stripped/overridden
═══════════════════════════════════════════ */
(function forceChatLayout(){
    function apply(){
        var wrap = document.querySelector('.wa-wrap');
        if(!wrap){ return setTimeout(apply, 50); }

        // Force wrapper
        Object.assign(wrap.style, {
            display: 'flex',
            flexDirection: 'row',
            flexWrap: 'nowrap',
            alignItems: 'stretch',
            width: '100%',
            height: 'calc(100vh - 180px)',
            minHeight: '600px',
            maxHeight: '820px',
            overflow: 'hidden',
            background: '#faf2ef',
            borderRadius: '8px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
            position: 'relative',
            fontFamily: "'Inter','Segoe UI',system-ui,sans-serif",
            color: '#111b21',
            margin: '0',
            padding: '0'
        });

        // Force sidebar
        var side = wrap.querySelector('.wa-side');
        if(side){
            Object.assign(side.style, {
                flex: '0 0 320px',
                width: '320px',
                maxWidth: '320px',
                minWidth: '320px',
                height: '100%',
                background: '#fff',
                display: 'flex',
                flexDirection: 'column',
                borderRight: '1px solid #e9edef',
                overflow: 'hidden'
            });
        }

        // Sidebar header (top bar with avatar + icons)
        var sideHead = wrap.querySelector('.wa-side-head');
        if(sideHead){
            Object.assign(sideHead.style, {
                background: '#f0f2f5',
                padding: '10px 16px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                flexShrink: '0',
                minHeight: '59px',
                borderBottom: '1px solid #e9edef'
            });
        }

        var sideHeadLeft = wrap.querySelector('.wa-side-head-left');
        if(sideHeadLeft){
            Object.assign(sideHeadLeft.style, {
                display: 'flex',
                alignItems: 'center',
                gap: '12px'
            });
        }

        var sideActions = wrap.querySelector('.wa-side-actions');
        if(sideActions){
            Object.assign(sideActions.style, {
                display: 'flex',
                gap: '4px',
                alignItems: 'center'
            });
        }

        // Me avatar
        var meAv = wrap.querySelector('.wa-me-av');
        if(meAv){
            Object.assign(meAv.style, {
                width: '40px',
                height: '40px',
                minWidth: '40px',
                maxWidth: '40px',
                borderRadius: '50%',
                overflow: 'hidden',
                background: '#e9edef',
                flexShrink: '0'
            });
            var img = meAv.querySelector('img');
            if(img) Object.assign(img.style, {
                width: '40px', height: '40px', objectFit: 'cover', display: 'block'
            });
        }

        // All icon buttons
        wrap.querySelectorAll('.wa-icon-btn').forEach(function(btn){
            Object.assign(btn.style, {
                width: '40px',
                height: '40px',
                minWidth: '40px',
                border: 'none',
                background: 'transparent',
                borderRadius: '50%',
                color: '#667781',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexShrink: '0'
            });
            var svg = btn.querySelector('svg');
            if(svg){ svg.setAttribute('width','22'); svg.setAttribute('height','22'); }
        });

        // Search bar
        var search = wrap.querySelector('.wa-search');
        if(search){
            Object.assign(search.style, {
                padding: '8px 12px',
                background: '#fff',
                borderBottom: '1px solid #e9edef',
                flexShrink: '0'
            });
        }

        var searchWrap = wrap.querySelector('.wa-search-wrap');
        if(searchWrap){
            Object.assign(searchWrap.style, {
                background: '#f0f2f5',
                borderRadius: '8px',
                display: 'flex',
                alignItems: 'center',
                padding: '0 12px',
                height: '35px'
            });
            var sInput = searchWrap.querySelector('input');
            if(sInput) Object.assign(sInput.style, {
                flex: '1', border: 'none', background: 'transparent',
                outline: 'none', fontSize: '0.88rem', color: '#111b21',
                height: '100%', marginLeft: '10px'
            });
            var sSvg = searchWrap.querySelector('svg');
            if(sSvg){
                sSvg.setAttribute('width','16');
                sSvg.setAttribute('height','16');
                sSvg.style.color = '#8696a0';
                sSvg.style.flexShrink = '0';
            }
        }

        // List
        var list = wrap.querySelector('.wa-list');
        if(list){
            Object.assign(list.style, {
                flex: '1',
                overflowY: 'auto',
                overflowX: 'hidden'
            });
        }

        // Force main panel
        var main = wrap.querySelector('.wa-main');
        if(main){
            Object.assign(main.style, {
                flex: '1 1 auto',
                minWidth: '0',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                overflow: 'hidden',
                position: 'relative'
            });
        }

        // Empty state
        var empty = wrap.querySelector('.wa-empty');
        if(empty && !empty.classList.contains('is-hidden')){
            Object.assign(empty.style, {
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                gap: '20px',
                background: '#f0f2f5',
                borderBottom: '6px solid #e62e04',
                textAlign: 'center',
                padding: '30px',
                height: '100%',
                width: '100%'
            });
        }

        // Active chat container
        var active = wrap.querySelector('.wa-active');
        if(active){
            active.style.flexDirection = 'column';
            active.style.height = '100%';
            active.style.overflow = 'hidden';
            if(active.classList.contains('is-open')){
                active.style.display = 'flex';
            } else {
                active.style.display = 'none';
            }
        }

        // Mobile breakpoint
        function handleResize(){
            var isMobile = window.innerWidth <= 900;
            if(isMobile){
                // Wrapper full viewport on mobile (account for top header + bottom navbar)
                wrap.style.height = 'calc(100vh - 180px)';
                wrap.style.minHeight = '400px';
                wrap.style.maxHeight = 'none';
                wrap.style.borderRadius = '0';
                wrap.style.boxShadow = 'none';
                wrap.style.position = 'relative';

                // Sidebar: full screen, no flex, absolute positioned
                side.style.position = 'absolute';
                side.style.top = '0';
                side.style.left = '0';
                side.style.width = '100%';
                side.style.maxWidth = '100%';
                side.style.minWidth = '0';
                side.style.height = '100%';
                side.style.zIndex = '5';
                side.style.flex = 'none';

                // Main: also full screen, behind sidebar by default
                if(main){
                    main.style.position = 'absolute';
                    main.style.top = '0';
                    main.style.left = '0';
                    main.style.width = '100%';
                    main.style.height = '100%';
                    main.style.zIndex = '1';
                    main.style.flex = 'none';
                }

                // Show back button on mobile
                var backBtn = $('waBack');
                if(backBtn) backBtn.style.display = 'flex';
            } else {
                // Desktop restore
                wrap.style.height = 'calc(100vh - 180px)';
                wrap.style.minHeight = '600px';
                wrap.style.maxHeight = '820px';
                wrap.style.borderRadius = '8px';
                wrap.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)';
                wrap.style.position = 'relative';

                side.style.position = 'relative';
                side.style.top = '';
                side.style.left = '';
                side.style.flex = '0 0 320px';
                side.style.width = '320px';
                side.style.maxWidth = '320px';
                side.style.minWidth = '320px';
                side.style.height = '100%';
                side.style.zIndex = '';
                side.style.transform = '';
                side.classList.remove('hide-mob');

                if(main){
                    main.style.position = 'relative';
                    main.style.top = '';
                    main.style.left = '';
                    main.style.width = '';
                    main.style.height = '100%';
                    main.style.zIndex = '';
                    main.style.flex = '1 1 auto';
                }

                // Hide back button on desktop
                var backBtn = $('waBack');
                if(backBtn) backBtn.style.display = 'none';
            }
        }
        handleResize();
        window.addEventListener('resize', handleResize);

        // On mobile: when sidebar has .hide-mob, translate it off-screen AND bring main to front
        var sideObserver = new MutationObserver(function(){
            if(window.innerWidth <= 900){
                if(side.classList.contains('hide-mob')){
                    side.style.transform = 'translateX(-100%)';
                    side.style.transition = 'transform 0.25s ease';
                    side.style.zIndex = '1';
                    if(main){ main.style.zIndex = '5'; }
                } else {
                    side.style.transform = 'translateX(0)';
                    side.style.transition = 'transform 0.25s ease';
                    side.style.zIndex = '5';
                    if(main){ main.style.zIndex = '1'; }
                }
            } else {
                side.style.transform = '';
                side.style.zIndex = '';
                if(main){ main.style.zIndex = ''; }
            }
        });
        sideObserver.observe(side, {attributes:true, attributeFilter:['class']});

        // Re-apply when chat opens/closes (observe active class changes)
        var observer = new MutationObserver(function(){
            if(active){
                active.style.display = active.classList.contains('is-open') ? 'flex' : 'none';
            }
            if(empty){
                empty.style.display = empty.classList.contains('is-hidden') ? 'none' : 'flex';
            }
        });
        if(active) observer.observe(active, {attributes:true, attributeFilter:['class']});
        if(empty) observer.observe(empty, {attributes:true, attributeFilter:['class']});
    }

    if(document.readyState === 'loading'){
        document.addEventListener('DOMContentLoaded', apply);
    } else {
        apply();
    }
})();
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script>
(function(){
'use strict';

/* ═══════════════════════════════════════════
   FIREBASE INIT
   ⚠️ IMPORTANT: Add to .env file for proper security:
     FIREBASE_API_KEY=AIza...
     FIREBASE_AUTH_DOMAIN=new-bestmart.firebaseapp.com
     FIREBASE_PROJECT_ID=new-bestmart
     FIREBASE_STORAGE_BUCKET=new-bestmart.appspot.com
     FIREBASE_MESSAGING_SENDER_ID=415104443878
     FIREBASE_APP_ID=1:415104443878:web:3a65e2dc2b558c43256227

   Also set Firestore Security Rules:
     match /Chats/{chatId}/messages/{msgId} {
       allow read, write: if request.auth != null &&
         (request.auth.uid == resource.data.sender_id ||
          request.auth.uid == resource.data.receiver_id);
     }
═══════════════════════════════════════════ */

// Config with fallback (remove fallback after .env is set)
var FB_CONFIG = {
    apiKey:            "{{ env('FIREBASE_API_KEY', 'AIzaSyA6NtapayCekgMnIoWGNEhXZUaueUZrqCY') }}",
    authDomain:        "{{ env('FIREBASE_AUTH_DOMAIN', 'new-bestmart.firebaseapp.com') }}",
    projectId:         "{{ env('FIREBASE_PROJECT_ID', 'new-bestmart') }}",
    storageBucket:     "{{ env('FIREBASE_STORAGE_BUCKET', 'new-bestmart.appspot.com') }}",
    messagingSenderId: "{{ env('FIREBASE_MESSAGING_SENDER_ID', '415104443878') }}",
    appId:             "{{ env('FIREBASE_APP_ID', '1:415104443878:web:3a65e2dc2b558c43256227') }}"
};

if(typeof firebase === 'undefined'){
    console.error('[Chat] Firebase SDK not loaded! Include firebase-app and firebase-firestore scripts.');
} else if(!firebase.apps.length){
    firebase.initializeApp(FB_CONFIG);
    console.log('[Chat] Firebase initialized with project:', FB_CONFIG.projectId);
}
var db = (typeof firebase !== 'undefined' && firebase.firestore) ? firebase.firestore() : null;

/* ═══════════════════════════════════════════
   STATE
═══════════════════════════════════════════ */
var ME          = document.getElementById('authUserId').value;
var MENAME      = document.getElementById('authUserName').value;
var MEIMG       = document.getElementById('authUserImage').value;
var INIT_SELLER = document.getElementById('initSellerId').value;
var PLACEHOLDER = '{{ static_asset("assets/img/avatar-place.png") }}';
var CSRF        = document.querySelector('meta[name=csrf-token]')?.getAttribute('content') || '';

var activeSellerId   = '';
var activeSellerName = '';
var activeSellerImg  = '';
var msgListenerOut   = null;   // my → seller
var msgListenerIn    = null;   // seller → me
var sidebarListener  = null;
var typingListener   = null;
var presenceListener = null;
var allMsgs          = [];
var msgIdSet         = new Set();
var userCache        = new Map();  // Cache user data to prevent N+1
var isAtBottom       = true;
var pendingUnread    = 0;
var typingTimeout    = null;

/* ═══════════════════════════════════════════
   HELPERS
═══════════════════════════════════════════ */
function $(id){ return document.getElementById(id); }

/** Escape HTML to prevent XSS — CRITICAL SECURITY */
function formatFileSize(bytes){
    if(!bytes) return "";
    if(bytes < 1024) return bytes + " B";
    if(bytes < 1048576) return Math.round(bytes/1024) + " KB";
    return (bytes/1048576).toFixed(1) + " MB";
}

function esc(str){
    if(str === null || str === undefined) return '';
    var d = document.createElement('div');
    d.textContent = String(str);
    return d.innerHTML;
}

/** Linkify URLs safely (after escaping) */
function linkify(escapedText){
    var urlRe = /(https?:\/\/[^\s<]+)/g;
    return escapedText.replace(urlRe, function(url){
        return '<a href="'+url+'" target="_blank" rel="noopener noreferrer" style="color:#039be5;text-decoration:underline;">'+url+'</a>';
    });
}

function fmtTime(ts){
    if(!ts) return '';
    return moment(parseInt(ts)).format('h:mm A');
}

function fmtDay(ts){
    if(!ts) return '';
    var m = moment(parseInt(ts));
    if(m.isSame(moment(),'day')) return 'Today';
    if(m.isSame(moment().subtract(1,'day'),'day')) return 'Yesterday';
    if(m.isAfter(moment().subtract(7,'days'))) return m.format('dddd');
    return m.format('D MMMM YYYY');
}

function fmtListTime(ts){
    if(!ts) return '';
    var m = moment(parseInt(ts));
    if(m.isSame(moment(),'day')) return m.format('h:mm A');
    if(m.isSame(moment().subtract(1,'day'),'day')) return 'Yesterday';
    if(m.isAfter(moment().subtract(7,'days'))) return m.format('dddd');
    return m.format('DD/MM/YYYY');
}

function safeImg(src){
    return src && String(src).trim() && src !== 'null' && src !== 'undefined' ? src : PLACEHOLDER;
}

function scrollBottom(smooth){
    var b = $('waMsgs');
    if(!b) return;
    b.scrollTop = b.scrollHeight;
    isAtBottom = true;
    pendingUnread = 0;
    updateScrollBtn();
}

function updateScrollBtn(){
    var btn = $('waScrollBtn');
    var badge = $('waUnreadScroll');
    if(!btn) return;
    if(!isAtBottom){
        btn.classList.add('show');
        if(pendingUnread > 0){
            badge.style.display = 'flex';
            badge.textContent = pendingUnread;
        } else {
            badge.style.display = 'none';
        }
    } else {
        btn.classList.remove('show');
    }
}

function toast(msg){
    var t = $('waToast');
    t.textContent = msg;
    t.classList.add('show');
    clearTimeout(t._timer);
    t._timer = setTimeout(function(){ t.classList.remove('show'); }, 2500);
}

function detachListener(ref){
    try{ if(typeof ref === 'function') ref(); }catch(e){}
}

function cleanupChatListeners(){
    detachListener(msgListenerOut); msgListenerOut = null;
    detachListener(msgListenerIn);  msgListenerIn  = null;
    detachListener(typingListener); typingListener = null;
    detachListener(presenceListener); presenceListener = null;
}

/* ═══════════════════════════════════════════
   SIDEBAR LOADER — Optimized, no N+1
═══════════════════════════════════════════ */
function loadSidebar(){
    if(sidebarListener) detachListener(sidebarListener);

    console.log('[Chat] Loading sidebar for user:', ME);

    // Check Firebase is ready
    if(!firebase || !firebase.apps || !firebase.apps.length){
        console.error('[Chat] Firebase not initialized!');
        $('waList').innerHTML =
            '<div class="wa-empty-list" style="color:#d9534f;padding:30px 20px;">' +
            '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>' +
            '<div style="font-weight:600;margin-top:10px;">Firebase not initialized</div>' +
            '<div style="font-size:0.78rem;margin-top:6px;opacity:0.8;">Check .env for FIREBASE_* variables</div>' +
            '</div>';
        return;
    }

    if(!ME){
        console.error('[Chat] User ID is empty!');
        $('waList').innerHTML =
            '<div class="wa-empty-list" style="color:#d9534f;padding:30px 20px;">' +
            '<div style="font-weight:600;">Not logged in</div>' +
            '</div>';
        return;
    }

    sidebarListener = db.collection("UserChatList").doc(ME).collection('chatWithUser')
        .orderBy("date","desc")
        .onSnapshot(function(snap){
            console.log('[Chat] Sidebar snapshot received, size:', snap.size);
            if(snap.empty){
                console.log('[Chat] No chats found for user');
                renderEmptyList();
                return;
            }
            processSidebarSnap(snap);
        }, function(err){
            console.error('[Chat] Sidebar listener error:', err);
            $('waList').innerHTML =
                '<div class="wa-empty-list" style="color:#d9534f;padding:30px 20px;">' +
                '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>' +
                '<div style="font-weight:600;margin-top:10px;">Connection error</div>' +
                '<div style="font-size:0.75rem;margin-top:6px;opacity:0.8;word-break:break-word;">' + esc(err.message || 'Unknown') + '</div>' +
                '<div style="font-size:0.7rem;margin-top:10px;opacity:0.6;">Check Firebase rules & credentials</div>' +
                '</div>';
        });
}

function renderEmptyList(){
    $('waList').innerHTML =
        '<div class="wa-empty-list">' +
        '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>' +
        '<div>{{ translate("No chats yet") }}</div>' +
        '<div style="font-size:0.78rem;margin-top:6px;opacity:0.7;">{{ translate("Start a conversation with a seller") }}</div>' +
        '</div>';
}

function processSidebarSnap(snap){
    var promises = [];

    snap.forEach(function(doc){
        var data = doc.data();
        var uid  = data.user_id;
        if(!uid || uid === ME) return;

        var p = fetchUser(uid).then(function(u){
            if(!u) return null;
            var unread = parseInt(data.newMessagesCountFromUser) || 0;
            var rsPath = uid + '_' + ME;

            // Get last message
            return db.collection("Chats").doc(rsPath).collection('messages')
                .orderBy("timestamp","desc").limit(1).get()
                .then(function(mSnap){
                    var preview = '', time = '', lastMine = false, lastSeen = false;
                    if(!mSnap.empty){
                        var lm = mSnap.docs[0].data();
                        preview = lm.message || '';
                        time    = fmtListTime(lm.timestamp);
                        lastMine = lm.sender_id === ME;
                        lastSeen = !!lm.isSeen;
                    }
                    return {
                        uid: uid,
                        name: u.authUserName || 'User',
                        img:  safeImg(u.authUserImage),
                        unread: unread,
                        preview: preview,
                        time: time,
                        lastMine: lastMine,
                        lastSeen: lastSeen,
                        rawTs: mSnap.empty ? 0 : parseInt(mSnap.docs[0].data().timestamp || 0)
                    };
                })
                .catch(function(){ return null; });
        }).catch(function(){ return null; });

        promises.push(p);
    });

    Promise.all(promises).then(function(users){
        users = users.filter(Boolean);
        if(!users.length){ renderEmptyList(); return; }
        users.sort(function(a,b){ return b.rawTs - a.rawTs; });
        renderSidebar(users);
    });
}

/** Cache user data to reduce N+1 */
function fetchUser(uid){
    if(userCache.has(uid)){
        return Promise.resolve(userCache.get(uid));
    }
    return db.collection("Users").where("authUserId","==",uid).get()
        .then(function(uSnap){
            if(uSnap.empty) return null;
            var u = uSnap.docs[0].data();
            userCache.set(uid, u);
            // Invalidate cache after 5 min
            setTimeout(function(){ userCache.delete(uid); }, 5*60*1000);
            return u;
        });
}

function renderSidebar(users){
    var frag = document.createDocumentFragment();

    users.forEach(function(u){
        var item = document.createElement('div');
        item.className = 'wa-item' + (u.uid === activeSellerId ? ' active' : '') + (u.unread > 0 ? ' has-unread' : '');
        item.id = 'waItem-' + u.uid;

        var tickHtml = '';
        if(u.lastMine && u.preview){
            tickHtml = '<span class="wa-tick-mini' + (u.lastSeen ? ' seen' : '') + '">' +
                '<svg width="14" height="14" viewBox="0 0 16 11" fill="currentColor">' +
                (u.lastSeen
                  ? '<path d="M11.071.653a.498.498 0 0 0-.697.097l-6.239 8.26-2.582-2.756a.501.501 0 0 0-.73.686l2.98 3.181a.5.5 0 0 0 .364.158h.022a.5.5 0 0 0 .368-.199L11.169 1.35a.499.499 0 0 0-.098-.697zm4.196 0a.498.498 0 0 0-.697.097L8.331 8.91l-.494-.527a.5.5 0 1 0-.729.685l.898.959a.5.5 0 0 0 .364.158h.022a.5.5 0 0 0 .368-.199l6.609-8.731a.499.499 0 0 0-.102-.602z"/>'
                  : '<path d="M11.071.653a.498.498 0 0 0-.697.097l-6.239 8.26-2.582-2.756a.501.501 0 0 0-.73.686l2.98 3.181a.5.5 0 0 0 .364.158h.022a.5.5 0 0 0 .368-.199L11.169 1.35a.499.499 0 0 0-.098-.697z"/>') +
                '</svg></span>';
        }

        // SAFE: textContent for user data
        item.innerHTML =
            '<div class="wa-av"><img alt="" onerror="this.src=\'' + esc(PLACEHOLDER) + '\'"></div>' +
            '<div class="wa-item-info">' +
                '<div class="wa-item-top">' +
                    '<span class="wa-name"></span>' +
                    '<span class="wa-time"></span>' +
                '</div>' +
                '<div class="wa-preview-row">' +
                    '<span class="wa-preview">' + tickHtml + '<span class="wa-preview-text"></span></span>' +
                    (u.unread > 0 ? '<span class="wa-badge">' + (u.unread > 99 ? '99+' : u.unread) + '</span>' : '') +
                '</div>' +
            '</div>';

        // Set text content safely (prevents XSS)
        item.querySelector('.wa-av img').src = u.img;
        item.querySelector('.wa-name').textContent = u.name;
        item.querySelector('.wa-time').textContent = u.time;
        item.querySelector('.wa-preview-text').textContent = u.preview;

        // Click/tap handler — support both mouse and touch explicitly
        var clickHandler = function(e){
            e.preventDefault();
            e.stopPropagation();
            console.log('[Chat] Chat item clicked:', u.uid, u.name);
            openChat(u.uid, u.name, u.img);
        };
        item.addEventListener('click', clickHandler);
        // Make it visually obvious it's tappable
        item.style.cursor = 'pointer';
        item.setAttribute('role', 'button');
        item.setAttribute('tabindex', '0');

        frag.appendChild(item);
    });

    var list = $('waList');
    list.innerHTML = '';
    list.appendChild(frag);

    // Auto-open if INIT_SELLER
    if(INIT_SELLER && INIT_SELLER !== '0' && !activeSellerId){
        var found = users.find(function(x){ return x.uid === INIT_SELLER; });
        if(found) openChat(found.uid, found.name, found.img);
    }
}

/* ═══════════════════════════════════════════
   SEARCH
═══════════════════════════════════════════ */
$('waSearch').addEventListener('input', function(){
    var q = this.value.toLowerCase().trim();
    document.querySelectorAll('.wa-item').forEach(function(el){
        var nameEl = el.querySelector('.wa-name');
        if(!nameEl) return;
        var nm = nameEl.textContent.toLowerCase();
        el.style.display = nm.includes(q) ? '' : 'none';
    });
});

/* ═══════════════════════════════════════════
   OPEN CHAT
═══════════════════════════════════════════ */
function openChat(uid, name, img){
    // Prevent reopening same chat
    if(uid === activeSellerId && msgListenerOut) return;

    cleanupChatListeners();

    activeSellerId   = uid;
    activeSellerName = name;
    activeSellerImg  = safeImg(img);

    // Update header safely
    $('waHeadName').textContent = name;
    $('waHeadImg').src = activeSellerImg;
    $('waHeadStatus').textContent = ''; // Will be set by presence listener

    // Show active chat (class-based — beats inline styles from parent layout)
    $('waEmpty').classList.add('is-hidden');
    $('waActive').classList.add('is-open');

    // Mobile: hide sidebar
    console.log('[Chat] openChat - window width:', window.innerWidth, 'isMobile:', window.innerWidth <= 900);
    if(window.innerWidth <= 900){
        var sideEl = $('waSide');
        sideEl.classList.add('hide-mob');
        // Directly apply transform as fallback
        sideEl.style.transform = 'translateX(-100%)';
        sideEl.style.transition = 'transform 0.25s ease';
        sideEl.style.zIndex = '1';
        // Main should be on top and full width
        var mainEl = document.querySelector('.wa-main');
        if(mainEl){
            mainEl.style.zIndex = '5';
            mainEl.style.position = 'absolute';
            mainEl.style.top = '0';
            mainEl.style.left = '0';
            mainEl.style.width = '100%';
            mainEl.style.height = '100%';
        }
        console.log('[Chat] Sidebar hidden, main brought to front');
    }

    // Active styling
    document.querySelectorAll('.wa-item').forEach(function(el){ el.classList.remove('active'); });
    var item = $('waItem-' + uid);
    if(item){
        item.classList.add('active');
        item.classList.remove('has-unread');
        var badge = item.querySelector('.wa-badge');
        if(badge) badge.remove();
    }

    // Reset state
    allMsgs = [];
    msgIdSet = new Set();
    pendingUnread = 0;
    isAtBottom = true;

    // Show loading
    $('waMsgs').innerHTML = '<div class="wa-divider">{{ translate("Loading messages...") }}</div>';

    // Mark seen & reset counter
    markSeen(uid);
    updateChatListCount(ME, uid, 0);

    // Attach realtime listeners (both directions)
    attachMessageListeners(uid);

    // Attach presence listener for online/last seen
    attachPresenceListener(uid);
}

/* ═══════════════════════════════════════════
   PRESENCE / ONLINE STATUS
═══════════════════════════════════════════ */
function attachPresenceListener(uid){
    // Listen to user's Presence doc (document ID = authUserId for easy lookup)
    presenceListener = db.collection("UserPresence").doc(uid)
        .onSnapshot(function(doc){
            if(uid !== activeSellerId) return; // Stale
            updatePresenceUI(doc.exists ? doc.data() : null);
        }, function(err){
            console.warn('[Chat] Presence listener error:', err);
        });
}

function updatePresenceUI(presence){
    var statusEl = $('waHeadStatus');
    if(!statusEl) return;

    if(!presence || !presence.lastSeen){
        statusEl.textContent = '';
        return;
    }

    var lastSeen = parseInt(presence.lastSeen) || 0;
    var isOnline = presence.isOnline === true;
    var now = Date.now();
    var diff = now - lastSeen;

    // Consider online only if flag is true AND last ping within 90s
    if(isOnline && diff < 90 * 1000){
        statusEl.textContent = '{{ translate("online") }}';
        statusEl.setAttribute('style', 'color:#ffffff !important;font-weight:600 !important;');
    } else {
        statusEl.setAttribute('style', 'color:rgba(255,255,255,0.85) !important;');
        if(diff < 60 * 1000){
            statusEl.textContent = '{{ translate("last seen just now") }}';
        } else if(diff < 60 * 60 * 1000){
            var mins = Math.floor(diff / 60000);
            statusEl.textContent = '{{ translate("last seen") }} ' + mins + ' {{ translate("min ago") }}';
        } else if(moment(lastSeen).isSame(moment(), 'day')){
            statusEl.textContent = '{{ translate("last seen today at") }} ' + moment(lastSeen).format('h:mm A');
        } else if(moment(lastSeen).isSame(moment().subtract(1,'day'), 'day')){
            statusEl.textContent = '{{ translate("last seen yesterday at") }} ' + moment(lastSeen).format('h:mm A');
        } else {
            statusEl.textContent = '{{ translate("last seen") }} ' + moment(lastSeen).format('DD/MM/YYYY');
        }
    }
}

/* ═══════════════════════════════════════════
   UPDATE MY OWN PRESENCE (heartbeat every 30s)
═══════════════════════════════════════════ */
function updateMyPresence(isOnline){
    if(!ME || !db) return;
    db.collection("UserPresence").doc(ME).set({
        isOnline: isOnline,
        lastSeen: Date.now().toString()
    }, { merge: true }).catch(function(err){
        console.warn('[Chat] Presence update failed:', err);
    });
}

// Mark online on load
updateMyPresence(true);

// Heartbeat every 30 seconds
var presenceHeartbeat = setInterval(function(){
    if(!document.hidden) updateMyPresence(true);
}, 30 * 1000);

// Mark offline on unload
window.addEventListener('beforeunload', function(){
    updateMyPresence(false);
});

// Handle tab visibility changes
document.addEventListener('visibilitychange', function(){
    updateMyPresence(!document.hidden);
});

/* ═══════════════════════════════════════════
   ATTACH REALTIME LISTENERS — FIXED DUPLICATE BUG
═══════════════════════════════════════════ */
function attachMessageListeners(sellerId){
    var rs = sellerId + '_' + ME;  // seller → me
    var sr = ME + '_' + sellerId;  // me → seller

    var firstLoadIn = true, firstLoadOut = true;

    msgListenerIn = db.collection("Chats").doc(rs).collection('messages')
        .orderBy("timestamp")
        .onSnapshot(function(snap){
            handleSnapshot(snap, sellerId, 'in', firstLoadIn);
            firstLoadIn = false;
        }, function(err){
            console.error('In listener error:', err);
        });

    msgListenerOut = db.collection("Chats").doc(sr).collection('messages')
        .orderBy("timestamp")
        .onSnapshot(function(snap){
            handleSnapshot(snap, sellerId, 'out', firstLoadOut);
            firstLoadOut = false;
        }, function(err){
            console.error('Out listener error:', err);
        });
}

function handleSnapshot(snap, sellerId, dir, isFirstLoad){
    if(sellerId !== activeSellerId) return; // Stale listener

    var changed = false, newIncoming = 0;

    snap.docChanges().forEach(function(ch){
        var d = ch.doc.data();
        var id = ch.doc.id + '_' + dir;
        d._id = id;
        d._dir = dir;

        // ═══ STRICT FILTER: Only messages between ME and activeSellerId ═══
        var sender = d.sender_id;
        var receiver = d.receiver_id;
        var isValidPair =
            (sender === ME && receiver === sellerId) ||
            (sender === sellerId && receiver === ME);

        if(!isValidPair){
            console.warn('[Chat] Rejected message (not in this pair):', {
                sender: sender, receiver: receiver, me: ME, seller: sellerId
            });
            return; // Skip messages that don't belong to this conversation
        }

        if(ch.type === 'added' && !msgIdSet.has(id)){
            msgIdSet.add(id);
            allMsgs.push(d);
            changed = true;
            if(!isFirstLoad && d.sender_id !== ME && !isAtBottom){
                newIncoming++;
            }
        } else if(ch.type === 'modified'){
            // Update seen status
            var idx = allMsgs.findIndex(function(m){ return m._id === id; });
            if(idx > -1){
                allMsgs[idx] = Object.assign({}, allMsgs[idx], d, {_id:id, _dir:dir});
                changed = true;
            }
        }
    });

    if(changed){
        allMsgs.sort(function(a,b){
            return (parseInt(a.timestamp)||0) - (parseInt(b.timestamp)||0);
        });
        renderMsgs();
        if(!isFirstLoad){
            if(newIncoming > 0 && !isAtBottom){
                pendingUnread += newIncoming;
                updateScrollBtn();
            }
            // Auto-mark seen if at bottom
            if(isAtBottom){
                markSeen(sellerId);
                updateChatListCount(ME, sellerId, 0);
            }
        } else {
            scrollBottom();
        }
    }
}

/* ═══════════════════════════════════════════
   RENDER — SAFE (no innerHTML for user data)
═══════════════════════════════════════════ */
function renderMsgs(){
    var box = $('waMsgs');
    if(!allMsgs.length){
        box.innerHTML =
            '<div class="wa-system">' +
            '{{ translate("Messages are end-to-end encrypted. No one outside of this chat, not even us, can read them.") }}' +
            '</div>' +
            '<div class="wa-divider" style="background:transparent;box-shadow:none;color:var(--wa-text-muted);">{{ translate("No messages yet. Say hi!") }} 👋</div>';
        return;
    }

    var wasAtBottom = isAtBottom;
    box.innerHTML = '';

    // System/encryption banner
    var sys = document.createElement('div');
    sys.className = 'wa-system';
    sys.innerHTML = '🔒 ' + esc('{{ translate("Messages are end-to-end encrypted. No one outside of this chat can read them.") }}');
    box.appendChild(sys);

    var lastDay = '';
    var lastSender = '';
    var lastTs = 0;
    var GROUP_WINDOW = 60 * 1000; // 1 min

    allMsgs.forEach(function(d, i){
        var day = fmtDay(d.timestamp);
        if(day !== lastDay){
            var div = document.createElement('div');
            div.className = 'wa-divider';
            div.textContent = day;
            box.appendChild(div);
            lastDay = day;
            lastSender = '';
        }

        var mine = d.sender_id === ME;
        var ts   = parseInt(d.timestamp) || 0;
        var isGroupStart = (d.sender_id !== lastSender) || (ts - lastTs > GROUP_WINDOW);

        var row = document.createElement('div');
        row.className = 'wa-msg ' + (mine ? 'out' : 'in') + (isGroupStart ? ' group-start' : '');

        var bubble = document.createElement('div');
        bubble.className = 'wa-bubble';

        var textSpan = document.createElement('span');
        textSpan.className = 'wa-msg-text';

        if(d.msg_type === 'image' && d.file_url){
            var img = document.createElement('img');
            img.src = d.file_url;
            img.style.cssText = 'max-width:250px;max-height:300px;border-radius:8px;display:block;cursor:pointer;';
            img.onclick = function(){ window.open(d.file_url, '_blank'); };
            textSpan.appendChild(img);
            if(d.caption){
                var cap = document.createElement('div');
                cap.style.cssText = 'font-size:0.88rem;color:#111b21;margin-top:6px;line-height:1.4;';
                cap.textContent = d.caption;
                textSpan.appendChild(cap);
            }
        } else if(d.msg_type === 'file' && d.file_url){
            var fileLink = document.createElement('a');
            fileLink.href = d.file_url;
            fileLink.target = '_blank';
            fileLink.style.cssText = 'display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(0,0,0,0.04);border-radius:6px;text-decoration:none;color:inherit;min-width:200px;';
            fileLink.innerHTML = '<div style="width:36px;height:36px;background:#e62e04;color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;text-transform:uppercase;flex-shrink:0;">' + (d.file_ext || 'FILE').substring(0,4) + '</div>' +
                '<div style="flex:1;min-width:0;"><div style="font-size:0.85rem;font-weight:500;color:#111b21;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + esc(d.file_name || 'File') + '</div>' +
                '<div style="font-size:0.72rem;color:#667781;">' + (d.file_size ? formatFileSize(d.file_size) : 'Download') + '</div></div>' +
                '<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="opacity:0.5;flex-shrink:0;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>';
            textSpan.appendChild(fileLink);
        } else {
            textSpan.innerHTML = linkify(esc(d.message || ''));
        }
        bubble.appendChild(textSpan);

        // Meta (time + tick)
        var meta = document.createElement('span');
        meta.className = 'wa-msg-meta';

        var timeSpan = document.createElement('span');
        timeSpan.className = 'wa-msg-time';
        timeSpan.textContent = fmtTime(d.timestamp);
        meta.appendChild(timeSpan);

        if(mine){
            var tick = document.createElement('span');
            tick.className = 'wa-tick' + (d.isSeen ? ' seen' : '');
            tick.innerHTML = d.isSeen
                ? '<svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor"><path d="M11.071.653a.498.498 0 0 0-.697.097l-6.239 8.26-2.582-2.756a.501.501 0 0 0-.73.686l2.98 3.181a.5.5 0 0 0 .364.158h.022a.5.5 0 0 0 .368-.199L11.169 1.35a.499.499 0 0 0-.098-.697zm4.196 0a.498.498 0 0 0-.697.097L8.331 8.91l-.494-.527a.5.5 0 1 0-.729.685l.898.959a.5.5 0 0 0 .364.158h.022a.5.5 0 0 0 .368-.199l6.609-8.731a.499.499 0 0 0-.102-.602z"/></svg>'
                : '<svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor"><path d="M11.071.653a.498.498 0 0 0-.697.097l-6.239 8.26-2.582-2.756a.501.501 0 0 0-.73.686l2.98 3.181a.5.5 0 0 0 .364.158h.022a.5.5 0 0 0 .368-.199L11.169 1.35a.499.499 0 0 0-.098-.697z"/></svg>';
            meta.appendChild(tick);
        }

        bubble.appendChild(meta);
        row.appendChild(bubble);
        box.appendChild(row);

        lastSender = d.sender_id;
        lastTs = ts;
    });

    if(wasAtBottom){ scrollBottom(); }
}

/* ═══════════════════════════════════════════
   SEND — FIXED race condition, no duplicate reload
═══════════════════════════════════════════ */
function sendMsg(){
    var input = $('waInput');
    var msg = input.value.trim();
    var sid = activeSellerId;
    if(!sid) return;

    if(pendingFile){
        var fileToSend = pendingFile;
        pendingFile = null;
        var bar = document.getElementById('filePreviewBar');
        if(bar) bar.remove();
        input.value = '';
        input.style.height = 'auto';
        uploadAndSendFile(fileToSend, msg);
        return;
    }

    if(!msg) return;

    // Optimistic UI: clear input immediately
    input.value = '';
    input.style.height = 'auto';
    $('waSend').disabled = true;
    input.focus();

    var ts = Date.now().toString();
    var sb = sid + '_' + ME;  // me → seller path

    var payload = {
        message: msg,
        isSeen: false,
        receiver_id: sid,
        sender_id: ME,
        seller_buyer: sb,
        timestamp: ts
    };

    // Firestore write (listener will render it automatically — no manual reload)
    db.collection("Chats").doc(sb).collection('messages').add(payload)
        .then(function(){
            // Update chat lists (for sidebar ordering)
            return Promise.all([
                updateChatListEntry(ME, sid, 0, ts),
                updateChatListEntry(sid, ME, 1, ts, true)  // increment
            ]);
        })
        .catch(function(err){
            console.error('Send failed:', err);
            toast('{{ translate("Message failed to send") }}');
            // Restore input
            input.value = msg;
        });

    // Backend API (for notifications, etc.) — separate concern
    if(CSRF){
        fetch('/chat/send-message', {
            method: 'POST',
            headers: {
                'Content-Type':'application/json',
                'X-CSRF-TOKEN': CSRF,
                'Accept':'application/json'
            },
            body: JSON.stringify({
                receiver_id: sid,
                message: msg,
                seller_id: sid
            })
        }).catch(function(err){
            console.warn('Backend notify failed (non-fatal):', err);
        });
    }

    scrollBottom();
}

/* ═══════════════════════════════════════════
   FIREBASE HELPERS — OPTIMIZED
═══════════════════════════════════════════ */
/** Update chat list entry with proper increment */
function updateChatListEntry(owner, userId, count, ts, increment){
    var ref = db.collection("UserChatList").doc(owner).collection('chatWithUser');
    return ref.where("user_id","==",userId).get()
        .then(function(s){
            if(s.empty){
                return ref.add({
                    user_id: userId,
                    newMessagesCountFromUser: count,
                    date: ts || Date.now().toString()
                });
            } else {
                var docRef = ref.doc(s.docs[0].id);
                var update = { date: ts || Date.now().toString() };
                if(increment){
                    update.newMessagesCountFromUser = firebase.firestore.FieldValue.increment(1);
                } else {
                    update.newMessagesCountFromUser = count;
                }
                return docRef.update(update);
            }
        });
}

function updateChatListCount(owner, userId, count){
    return updateChatListEntry(owner, userId, count);
}

/** Mark seen — OPTIMIZED: only unseen messages */
function markSeen(sellerId){
    var rs = sellerId + '_' + ME;
    db.collection("Chats").doc(rs).collection('messages')
        .where("receiver_id","==",ME)
        .where("isSeen","==",false)
        .get()
        .then(function(s){
            if(s.empty) return;
            var batch = db.batch();
            s.docs.forEach(function(d){
                batch.update(d.ref, { isSeen: true });
            });
            return batch.commit();
        })
        .catch(function(err){
            console.error('markSeen error:', err);
        });
}

/* ═══════════════════════════════════════════
   INPUT & INTERACTIONS
═══════════════════════════════════════════ */
var input = $('waInput');
var sendBtn = $('waSend');

input.addEventListener('input', function(){
    this.style.height = 'auto';
    this.style.height = Math.min(this.scrollHeight, 120) + 'px';
    sendBtn.disabled = !this.value.trim();
});

input.addEventListener('keydown', function(e){
    if(e.key === 'Enter' && !e.shiftKey){
        e.preventDefault();
        sendMsg();
    }
});

sendBtn.addEventListener('click', sendMsg);
var EMOJI_LIST = ['😀','😃','😄','😁','😆','😅','🤣','😂','🙂','🙃','😉','😊','😇','🥰','😍','🤩','😘','😗','😚','😙','🥲','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐','🤨','😐','😑','😶','😏','😒','🙄','😬','🤥','😌','😔','😪','🤤','😴','😷','🤒','🤕','🤢','🤮','🤧','🥵','🥶','🥴','😵','🤯','🤠','🥳','🥸','😎','🤓','🧐','😕','😟','🙁','☹️','😮','😯','😲','😳','🥺','😦','😧','😨','😰','😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','🥱','😤','😡','😠','🤬','😈','👿','💀','☠️','💩','🤡','👹','👺','👻','👽','👾','🤖','😺','😸','😹','😻','😼','😽','🙀','😿','😾','❤️','🧡','💛','💚','💙','💜','🤎','🖤','🤍','💔','❣️','💕','💞','💓','💗','💖','💘','💝','💟','👍','👎','👌','✌️','🤞','🤟','🤘','🤙','👈','👉','👆','🖕','👇','☝️','👋','🤚','🖐️','✋','🖖','👏','🙌','🤝','🙏','💪','🎉','🎊','🎁','🎂','🔥','⭐','🌟','✨','💯','💥','💫','💦','💨','🏆','🏅','🎖️','🌹','🌺','🌸','🌼','🌻','💐','🍀','🌈','☀️','🌙','⚡','☁️','🌧️','❄️','⛄','🌊'];

function toggleEmojiPicker(triggerBtn){
    var existing = document.getElementById('emojiPickerBox');
    if(existing){ existing.remove(); return; }

    var picker = document.createElement('div');
    picker.id = 'emojiPickerBox';
    picker.style.cssText = 'position:absolute;bottom:60px;left:14px;background:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:10px;width:320px;max-height:250px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:1000;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;';

    EMOJI_LIST.forEach(function(e){
        var b = document.createElement('button');
        b.type = 'button';
        b.textContent = e;
        b.style.cssText = 'background:none;border:none;font-size:22px;cursor:pointer;padding:4px;border-radius:4px;transition:background 0.1s;';
        b.onmouseenter = function(){ this.style.background = '#f0f2f5'; };
        b.onmouseleave = function(){ this.style.background = 'none'; };
        b.onclick = function(){
            var inp = document.getElementById('waInput');
            inp.value += e;
            inp.focus();
            inp.dispatchEvent(new Event('input'));
        };
        picker.appendChild(b);
    });

    // Insert near input
    var inputArea = document.querySelector('.wa-input-area');
    inputArea.style.position = 'relative';
    inputArea.parentNode.style.position = 'relative';
    inputArea.parentNode.appendChild(picker);

    // Close on outside click
    setTimeout(function(){
        document.addEventListener('click', function closeP(ev){
            if(!picker.contains(ev.target) && ev.target !== triggerBtn){
                picker.remove();
                document.removeEventListener('click', closeP);
            }
        });
    }, 100);
}

// Attach to emoji button
setTimeout(function(){
    var emojiBtns = document.querySelectorAll('.wa-input-area .wa-icon-btn[title*="Emoji"], .wa-input-area .wa-icon-btn:first-child');
    emojiBtns.forEach(function(btn){
        if(btn.getAttribute('id') === 'waAttachBtn') return;
        btn.onclick = function(e){ e.stopPropagation(); toggleEmojiPicker(btn); };
    });
}, 500);


var pendingFile = null;
var fileInput = document.getElementById('waFileInput');
if(fileInput){
    fileInput.addEventListener('change', function(e){
        var file = e.target.files[0];
        if(!file) return;
        if(!activeSellerId){
            toast('{{ translate("Please select a chat first") }}');
            this.value = '';
            return;
        }
        if(file.size > 10 * 1024 * 1024){
            toast('{{ translate("File too large. Max 10MB.") }}');
            this.value = '';
            return;
        }
        showFilePreview(file);
        this.value = '';
    });
}

function showFilePreview(file){
    pendingFile = file;
    var existing = document.getElementById('filePreviewBar');
    if(existing) existing.remove();

    var isImage = file.type.startsWith('image/');
    var bar = document.createElement('div');
    bar.id = 'filePreviewBar';
    bar.style.cssText = 'background:#f0f2f5;border-top:1px solid #ddd;padding:10px 16px;display:flex;align-items:center;gap:12px;';

    bar.innerHTML =
        '<button id="fpClose" style="background:none;border:none;color:#667781;font-size:22px;cursor:pointer;padding:4px 8px;line-height:1;">&times;</button>' +
        (isImage
            ? '<img id="fpThumb" style="width:54px;height:54px;border-radius:8px;object-fit:cover;flex-shrink:0;">'
            : '<div style="width:54px;height:54px;background:#e62e04;color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;text-transform:uppercase;flex-shrink:0;">' + (file.name.split('.').pop() || 'FILE').substring(0,4) + '</div>') +
        '<div style="flex:1;min-width:0;">' +
            '<div style="font-size:0.85rem;font-weight:500;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + file.name + '</div>' +
            '<div style="font-size:0.72rem;color:#667781;">' + formatFileSize(file.size) + ' &middot; Tap send to share</div>' +
        '</div>';

    var inputArea = document.querySelector('.wa-input-area');
    inputArea.parentNode.insertBefore(bar, inputArea);

    if(isImage){
        var reader = new FileReader();
        reader.onload = function(e){
            var thumb = document.getElementById('fpThumb');
            if(thumb) thumb.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    document.getElementById('fpClose').onclick = function(){
        bar.remove();
        pendingFile = null;
    };

    sendBtn.disabled = false;
    $('waInput').focus();
}

function compressImage(file, maxWidth, quality){
    return new Promise(function(resolve){
        if(!file.type.startsWith('image/')){
            resolve(file);
            return;
        }
        var reader = new FileReader();
        reader.onload = function(e){
            var img = new Image();
            img.onload = function(){
                var canvas = document.createElement('canvas');
                var width = img.width, height = img.height;
                if(width > maxWidth){
                    height = height * (maxWidth / width);
                    width = maxWidth;
                }
                canvas.width = width;
                canvas.height = height;
                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, width, height);
                canvas.toBlob(function(blob){
                    var compressed = new File([blob], file.name, { type: 'image/jpeg', lastModified: Date.now() });
                    resolve(compressed);
                }, 'image/jpeg', quality);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    });
}

function uploadAndSendFile(file, caption){
    caption = caption || '';
    var prepare = file.type.startsWith('image/')
        ? compressImage(file, 1280, 0.75)
        : Promise.resolve(file);

    prepare.then(function(finalFile){
        var fd = new FormData();
        fd.append('file', finalFile);

        toast('{{ translate("Uploading...") }}');

        fetch('/chat/upload-file', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF },
            body: fd
        })
        .then(function(r){ return r.json(); })
        .then(function(data){
            if(!data.success){ toast('{{ translate("Upload failed") }}'); return; }

            var ts = Date.now().toString();
            var sb = ME + '_' + activeSellerId;  // seller → buyer path

            var msgObj = {
                message:      caption || (data.type === 'image' ? '📷 Image' : ('📎 ' + data.name)),
                caption:      caption,
                file_url:     data.url,
                file_name:    data.name,
                file_size:    data.size,
                file_type:    data.type,
                file_ext:     data.ext,
                msg_type:     data.type,
                isSeen:       false,
                receiver_id:  activeSellerId,
                sender_id:    ME,
                seller_buyer: sb,
                timestamp:    ts
            };

            db.collection("Chats").doc(sb).collection('messages').add(msgObj);
            updateChatListEntry(ME, activeSellerId, 0, ts, false);
            updateChatListEntry(activeSellerId, ME, 1, ts, true);

            fetch('/chat/send-message', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
                body: JSON.stringify({
                    receiver_id: activeSellerId,
                    message: '[' + (data.type === 'image' ? 'Image' : 'File') + '] ' + data.name + ' - ' + data.url,
                    seller_id: ME
                })
            });

            toast('{{ translate("Sent!") }}');
        })
        .catch(function(err){
            console.error('Upload failed:', err);
            toast('{{ translate("Upload failed") }}');
        });
    });
}


// Scroll tracking
$('waMsgs').addEventListener('scroll', function(){
    var box = this;
    var threshold = 80;
    isAtBottom = (box.scrollHeight - box.scrollTop - box.clientHeight) < threshold;
    if(isAtBottom){
        pendingUnread = 0;
        if(activeSellerId){
            markSeen(activeSellerId);
            updateChatListCount(ME, activeSellerId, 0);
        }
    }
    updateScrollBtn();
});

$('waScrollBtn').addEventListener('click', function(){ scrollBottom(); });

// Back button (mobile)
$('waBack').addEventListener('click', function(){
    console.log('[Chat] Back button clicked');
    var sideEl = $('waSide');
    var mainEl = document.querySelector('.wa-main');

    sideEl.classList.remove('hide-mob');

    if(window.innerWidth <= 900){
        // Mobile: bring sidebar back on top, main behind
        sideEl.style.transform = 'translateX(0)';
        sideEl.style.zIndex = '5';
        sideEl.style.transition = 'transform 0.25s ease';

        if(mainEl){
            // Reset main to behind but still covering full area
            mainEl.style.zIndex = '1';
            mainEl.style.position = 'absolute';
            mainEl.style.top = '0';
            mainEl.style.left = '0';
            mainEl.style.width = '100%';
            mainEl.style.height = '100%';
        }
    } else {
        // Desktop: clear mobile-only styles
        sideEl.style.transform = '';
        sideEl.style.zIndex = '';
        if(mainEl){
            mainEl.style.position = '';
            mainEl.style.zIndex = '';
        }
    }

    $('waActive').classList.remove('is-open');
    $('waEmpty').classList.remove('is-hidden');
    cleanupChatListeners();
    activeSellerId = '';
    document.querySelectorAll('.wa-item').forEach(function(el){ el.classList.remove('active'); });
});

/* ═══════════════════════════════════════════
   CHAT HEADER MENU (3-dots dropdown)
═══════════════════════════════════════════ */
var menuBtn = $('waMenuBtn');
var menuDropdown = $('waMenuDropdown');
var searchBtn = $('waSearchBtn');

if(menuBtn && menuDropdown){
    menuBtn.addEventListener('click', function(e){
        e.stopPropagation();
        menuDropdown.classList.toggle('show');
    });

    // Close on outside click
    document.addEventListener('click', function(e){
        if(!menuDropdown.contains(e.target) && e.target !== menuBtn){
            menuDropdown.classList.remove('show');
        }
    });

    // Menu item actions
    menuDropdown.addEventListener('click', function(e){
        var item = e.target.closest('.wa-menu-item');
        if(!item) return;
        var action = item.getAttribute('data-action');
        menuDropdown.classList.remove('show');
        handleMenuAction(action);
    });
}

function handleMenuAction(action){
    if(!activeSellerId){ toast('{{ translate("Open a chat first") }}'); return; }

    switch(action){
        case 'contact':
            toast('{{ translate("Contact") }}: ' + activeSellerName);
            break;

        case 'search':
            toggleMessageSearch();
            break;

        case 'mute':
            toast('{{ translate("Notifications muted") }}');
            // TODO: persist mute preference in Firestore
            break;

        case 'clear':
            if(confirm('{{ translate("Clear all messages in this chat? This cannot be undone.") }}')){
                clearChatMessages();
            }
            break;

        case 'block':
            if(confirm('{{ translate("Block") }} ' + activeSellerName + '? {{ translate("You will no longer receive messages from this user.") }}')){
                blockUser();
            }
            break;
    }
}

/** Clear all messages in current conversation (both paths) */
function clearChatMessages(){
    if(!activeSellerId) return;
    var rs = activeSellerId + '_' + ME;
    var sr = ME + '_' + activeSellerId;

    toast('{{ translate("Clearing chat...") }}');

    Promise.all([
        db.collection("Chats").doc(rs).collection('messages').get(),
        db.collection("Chats").doc(sr).collection('messages').get()
    ]).then(function(results){
        var batch = db.batch();
        var count = 0;
        results.forEach(function(snap){
            snap.docs.forEach(function(d){
                batch.delete(d.ref);
                count++;
            });
        });
        if(count === 0){
            toast('{{ translate("No messages to clear") }}');
            return;
        }
        return batch.commit().then(function(){
            allMsgs = [];
            msgIdSet = new Set();
            renderMsgs();
            toast('{{ translate("Chat cleared") }}');
        });
    }).catch(function(err){
        console.error('Clear chat failed:', err);
        toast('{{ translate("Failed to clear chat") }}');
    });
}

/** Block user — store in BlockedUsers collection */
function blockUser(){
    if(!activeSellerId) return;
    db.collection("BlockedUsers").doc(ME).collection('blocked')
        .doc(activeSellerId).set({
            blockedUserId: activeSellerId,
            blockedAt: Date.now().toString()
        })
        .then(function(){
            toast('{{ translate("User blocked") }}');
        })
        .catch(function(err){
            console.error('Block failed:', err);
            toast('{{ translate("Failed to block user") }}');
        });
}

/* ═══════════════════════════════════════════
   IN-CHAT MESSAGE SEARCH
═══════════════════════════════════════════ */
var searchBarVisible = false;

if(searchBtn){
    searchBtn.addEventListener('click', toggleMessageSearch);
}

function toggleMessageSearch(){
    var existing = document.getElementById('waMsgSearchBar');
    if(existing){
        existing.remove();
        searchBarVisible = false;
        // Remove all highlights
        document.querySelectorAll('.wa-msg-highlight').forEach(function(el){
            el.classList.remove('wa-msg-highlight');
        });
        return;
    }

    var bar = document.createElement('div');
    bar.id = 'waMsgSearchBar';
    bar.setAttribute('style', 'background:#fff;padding:10px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #e9edef;flex-shrink:0;');
    bar.innerHTML =
        '<input type="text" id="waMsgSearchInput" placeholder="{{ translate("Search in conversation...") }}" ' +
        'style="flex:1;border:1px solid #e9edef;border-radius:6px;padding:8px 12px;font-size:0.88rem;outline:none;font-family:inherit;">' +
        '<span id="waMsgSearchCount" style="font-size:0.78rem;color:#667781;white-space:nowrap;"></span>' +
        '<button id="waMsgSearchClose" style="background:transparent;border:none;cursor:pointer;color:#667781;padding:4px;" title="Close">' +
        '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>' +
        '</button>';

    // Insert after chat header
    var chatHead = document.querySelector('.wa-chat-head');
    chatHead.insertAdjacentElement('afterend', bar);
    searchBarVisible = true;

    var input = document.getElementById('waMsgSearchInput');
    input.focus();

    input.addEventListener('input', function(){
        var q = this.value.toLowerCase().trim();
        var count = 0;
        var firstMatch = null;

        document.querySelectorAll('.wa-msg').forEach(function(el){
            var textEl = el.querySelector('.wa-msg-text');
            if(!textEl) return;
            var text = textEl.textContent.toLowerCase();
            if(q && text.includes(q)){
                el.classList.add('wa-msg-highlight');
                if(!firstMatch) firstMatch = el;
                count++;
            } else {
                el.classList.remove('wa-msg-highlight');
            }
        });

        document.getElementById('waMsgSearchCount').textContent =
            q ? (count + ' {{ translate("matches") }}') : '';

        if(firstMatch){
            firstMatch.scrollIntoView({behavior:'smooth', block:'center'});
        }
    });

    document.getElementById('waMsgSearchClose').addEventListener('click', toggleMessageSearch);
}

// Add highlight style
(function(){
    if(document.getElementById('wa-highlight-css')) return;
    var s = document.createElement('style');
    s.id = 'wa-highlight-css';
    s.textContent = '.wa-msg-highlight .wa-bubble{box-shadow:0 0 0 2px #e62e04, 0 1px 0.5px rgba(11,20,26,0.13) !important;transition:box-shadow 0.2s;}';
    document.head.appendChild(s);
})();

/* ═══════════════════════════════════════════
   SIDEBAR HEADER MENU (3-dots in sidebar)
═══════════════════════════════════════════ */
var sideMenuBtn = document.querySelector('.wa-side-head .wa-icon-btn:last-child');
if(sideMenuBtn){
    sideMenuBtn.addEventListener('click', function(e){
        e.stopPropagation();
        toast('{{ translate("Sidebar menu coming soon") }}');
    });
}

/* ═══════════════════════════════════════════
   HANDLE INIT_SELLER (auto-open)
═══════════════════════════════════════════ */
if(INIT_SELLER && INIT_SELLER !== '0'){
    fetchUser(INIT_SELLER).then(function(u){
        if(u && !activeSellerId){
            openChat(INIT_SELLER, u.authUserName || 'User', safeImg(u.authUserImage));
        }
    }).catch(function(){});
}

/* ═══════════════════════════════════════════
   CLEANUP ON UNLOAD
═══════════════════════════════════════════ */
window.addEventListener('beforeunload', function(){
    cleanupChatListeners();
    if(sidebarListener) detachListener(sidebarListener);
    if(presenceHeartbeat) clearInterval(presenceHeartbeat);
});

/* ═══════════════════════════════════════════
   INIT
═══════════════════════════════════════════ */
loadSidebar();

})();
</script>
@endsection