@extends('layouts.master')

@section('title', 'Prolex Chat — Secure Legal Messaging')

@section('styles')
<style>
/* ============================================================
   PROLEX CHAT — DESIGN SYSTEM
   ============================================================ */
:root {
  --c-bg:          #f0f4f8;
  --c-surface:     #ffffff;
  --c-surface-2:   #f8fafc;
  --c-surface-3:   #f1f5f9;
  --c-border:      #e2e8f0;
  --c-border-2:    #cbd5e1;

  --c-primary:     #1d4ed8;
  --c-primary-h:   #1e40af;
  --c-primary-mute:#dbeafe;
  --c-primary-soft:#eff6ff;

  --c-sent-bg:     #1d4ed8;
  --c-sent-text:   #ffffff;
  --c-recv-bg:     #f1f5f9;
  --c-recv-text:   #0f172a;

  --c-text:        #0f172a;
  --c-text-2:      #475569;
  --c-text-3:      #94a3b8;
  --c-text-inv:    #ffffff;

  --c-online:      #10b981;
  --c-away:        #f59e0b;
  --c-offline:     #94a3b8;
  --c-danger:      #ef4444;
  --c-success:     #10b981;

  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-full:   9999px;

  --shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --shadow-md:     0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:     0 8px 24px rgba(0,0,0,.12);

  --t-fast:        120ms ease;
  --t-base:        200ms ease;
  --t-slow:        300ms ease;

  --left-w:        300px;
  --right-w:       260px;
  --header-h:      64px;
  --input-max-h:   130px;
}

.chat-dark {
  --c-bg:          #0b1120;
  --c-surface:     #131e30;
  --c-surface-2:   #1a2840;
  --c-surface-3:   #243450;
  --c-border:      #243450;
  --c-border-2:    #2e4060;

  --c-primary:     #3b82f6;
  --c-primary-h:   #60a5fa;
  --c-primary-mute:#1e3a5f;
  --c-primary-soft:#162038;

  --c-sent-bg:     #2563eb;
  --c-recv-bg:     #1a2840;
  --c-recv-text:   #e2e8f0;

  --c-text:        #e2e8f0;
  --c-text-2:      #94a3b8;
  --c-text-3:      #4b6080;
  --c-text-inv:    #ffffff;

  --c-border:      #243450;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
textarea { font-family: inherit; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.chat-root {
  display: flex;
  height: calc(100vh - 85px);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background var(--t-base), color var(--t-base);
}

.main-content { padding: 0 !important; min-height: calc(100vh - 85px) !important; }

.chat-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ============================================================
   LEFT PANEL
   ============================================================ */
.chat-left {
  width: var(--left-w);
  min-width: 240px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  flex-shrink: 0;
  overflow: hidden;
}

/* Brand */
.chat-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--c-border);
}
.chat-logo {
  width: 40px; height: 40px;
  border-radius: var(--radius-lg);
  background: var(--c-primary);
  color: var(--c-text-inv);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(29,78,216,.35);
}
.chat-brand-name { font-weight: 700; font-size: 15px; color: var(--c-text); }
.chat-brand-sub  { font-size: 11px; color: var(--c-text-3); margin-top: 1px; }

/* Tabs */
.chat-tabs {
  display: flex;
  padding: 10px 12px 0;
  gap: 2px;
  border-bottom: 1px solid var(--c-border);
}
.chat-tab {
  flex: 1;
  padding: 7px 4px 9px;
  border: none;
  background: transparent;
  color: var(--c-text-2);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.chat-tab:hover  { color: var(--c-text); }
.chat-tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* Search */
.chat-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
}
.chat-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.chat-search-wrap svg {
  position: absolute;
  left: 10px;
  color: var(--c-text-3);
  width: 15px; height: 15px;
  pointer-events: none;
}
.chat-search-wrap input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: 13px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.chat-search-wrap input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.chat-search-wrap input::placeholder { color: var(--c-text-3); }

/* Groups toolbar */
.chat-groups-bar {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  display: none;
}
.chat-groups-bar.visible { display: block; }
.btn-create-group {
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--c-border-2);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--t-fast);
}
.btn-create-group:hover {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
}

/* Contact list */
.chat-contacts {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.chat-contacts::-webkit-scrollbar { width: 4px; }
.chat-contacts::-webkit-scrollbar-thumb {
  background: var(--c-border-2);
  border-radius: var(--radius-full);
}

/* Contact item */
.chat-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--t-fast);
  position: relative;
}
.chat-contact:hover  { background: var(--c-surface-2); }
.chat-contact.active { background: var(--c-primary-soft); }
.chat-contact.active .chat-cname { color: var(--c-primary); }

.chat-avatar-wrap { position: relative; flex-shrink: 0; }
.chat-avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  background: var(--c-primary-mute);
  color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  border: 1px solid var(--c-border);
  transition: all var(--t-fast);
}
.chat-contact.active .chat-avatar {
  background: var(--c-primary);
  color: var(--c-text-inv);
  border-color: transparent;
}
.chat-status-dot {
  position: absolute; bottom: 0; right: 0;
  width: 11px; height: 11px;
  border-radius: var(--radius-full);
  border: 2px solid var(--c-surface);
  background: var(--c-offline);
}
.chat-status-dot.online  { background: var(--c-online); }
.chat-status-dot.away    { background: var(--c-away); }

.chat-cinfo { flex: 1; min-width: 0; }
.chat-cinfo-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.chat-cname {
  font-weight: 600; font-size: 14px;
  color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.chat-ctime { font-size: 11px; color: var(--c-text-3); flex-shrink: 0; }
.chat-cmeta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
}
.chat-clast {
  font-size: 12px; color: var(--c-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.chat-unread {
  background: var(--c-primary);
  color: var(--c-text-inv);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Empty state */
.chat-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--c-text-3);
}
.chat-empty-icon { font-size: 36px; margin-bottom: 10px; opacity: .6; }
.chat-empty p { font-size: 13px; }

/* ============================================================
   RESIZER
   ============================================================ */
.chat-resizer {
  width: 3px;
  flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  transition: background var(--t-fast);
  position: relative;
}
.chat-resizer::before {
  content: '';
  position: absolute;
  inset: 0 -4px;
}
.chat-resizer:hover, .chat-resizer.active { background: var(--c-primary); }

/* ============================================================
   MIDDLE PANEL
   ============================================================ */
.chat-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-surface-2);
}

/* Chat header */
.chat-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.chat-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-header-avatar {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--c-primary-mute);
  color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.chat-header-info { min-width: 0; }
.chat-header-name {
  font-weight: 700; font-size: 15px;
  color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-header-sub {
  font-size: 12px; color: var(--c-text-3);
  display: flex; align-items: center; gap: 5px;
}
.chat-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Icon buttons */
.ic-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: 15px;
  transition: all var(--t-fast);
}
.ic-btn:hover {
  background: var(--c-surface-3);
  color: var(--c-text);
  border-color: var(--c-border-2);
}
.ic-btn.primary {
  background: var(--c-primary);
  color: var(--c-text-inv);
  border-color: transparent;
}
.ic-btn.primary:hover { background: var(--c-primary-h); }

/* Typing dots */
.typing-dots {
  display: inline-flex; align-items: center; gap: 2px;
}
.typing-dot {
  width: 4px; height: 4px;
  border-radius: var(--radius-full);
  background: var(--c-primary);
  animation: typingBounce 1.2s ease infinite;
}
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .30s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); opacity:.4; }
  30%          { transform: translateY(-4px); opacity:1; }
}

/* Messages area */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-area::-webkit-scrollbar { width: 6px; }
.chat-area::-webkit-scrollbar-thumb {
  background: var(--c-border-2);
  border-radius: var(--radius-full);
}

/* Load more */
.chat-load-more {
  display: flex; justify-content: center;
  margin-bottom: 12px;
}
.btn-load-more {
  padding: 5px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 12px; font-weight: 600;
  transition: all var(--t-fast);
}
.btn-load-more:hover { background: var(--c-surface-3); color: var(--c-text); }
.btn-load-more:disabled { opacity: .5; cursor: not-allowed; }

/* Date divider */
.msg-date-divider {
  display: flex; align-items: center;
  gap: 10px; margin: 14px 0 8px;
  color: var(--c-text-3); font-size: 11px;
}
.msg-date-divider::before,
.msg-date-divider::after {
  content: ''; flex: 1;
  height: 1px; background: var(--c-border);
}
.msg-date-divider span {
  padding: 2px 10px;
  background: var(--c-surface-3);
  border-radius: var(--radius-full);
  font-weight: 600;
}

/* Message bubble */
.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: min(70%, 540px);
  gap: 3px;
  animation: msgIn .18s ease;
}
@keyframes msgIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.chat-msg.sent    { align-self: flex-end;  align-items: flex-end; }
.chat-msg.received{ align-self: flex-start; align-items: flex-start; }

/* Group consecutive messages */
.chat-msg + .chat-msg.sent     { margin-top: 1px; }
.chat-msg + .chat-msg.received { margin-top: 1px; }
.chat-msg.gap                  { margin-top: 10px; }

.msg-sender { font-size: 11px; color: var(--c-text-3); font-weight: 600; padding: 0 4px; }

.msg-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: var(--shadow-sm);
}
.chat-msg.sent     .msg-bubble {
  background: var(--c-sent-bg);
  color: var(--c-sent-text);
  border-bottom-right-radius: 4px;
}
.chat-msg.received .msg-bubble {
  background: var(--c-recv-bg);
  color: var(--c-recv-text);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--c-border);
}

.msg-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--c-text-3);
  padding: 0 4px;
}
.chat-msg.sent .msg-meta { color: rgba(255,255,255,.55); }
.msg-status { font-size: 12px; }
.msg-status.read { color: var(--c-online); }

/* System message */
.msg-system {
  align-self: center;
  font-size: 11px; color: var(--c-text-3);
  background: var(--c-surface-3);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  max-width: 80%;
  text-align: center;
}

/* ============================================================
   INPUT AREA
   ============================================================ */
.chat-input-area {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  flex-shrink: 0;
}
.chat-input-box {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: var(--c-surface-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 6px 10px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.chat-input-box:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.btn-attach {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--c-text-3); font-size: 16px;
  border-radius: var(--radius-md);
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.btn-attach:hover { color: var(--c-primary); background: var(--c-primary-soft); }
#messageInput {
  flex: 1;
  border: none; outline: none; background: transparent;
  resize: none;
  font-size: 14px; color: var(--c-text);
  max-height: var(--input-max-h);
  line-height: 1.5;
  padding: 4px 4px;
}
#messageInput::placeholder { color: var(--c-text-3); }
.btn-send {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary);
  color: var(--c-text-inv);
  border: none;
  border-radius: var(--radius-lg);
  transition: all var(--t-fast);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(29,78,216,.30);
}
.btn-send:hover:not(:disabled) {
  background: var(--c-primary-h);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29,78,216,.40);
}
.btn-send:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ============================================================
   RIGHT PANEL
   ============================================================ */
.chat-right {
  width: var(--right-w);
  min-width: 200px;
  max-width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  overflow-y: auto;
}
.chat-right::-webkit-scrollbar { width: 4px; }
.chat-right::-webkit-scrollbar-thumb {
  background: var(--c-border-2);
  border-radius: var(--radius-full);
}

.chat-panel {
  padding: 14px;
  border-bottom: 1px solid var(--c-border);
}
.chat-panel:last-child { border-bottom: none; }
.chat-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.chat-panel-title {
  font-size: 12px; font-weight: 700; color: var(--c-text-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.chat-panel-badge {
  background: var(--c-primary);
  color: var(--c-text-inv);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

/* Notification item */
.notif-item {
  padding: 9px 10px;
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  margin-bottom: 6px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all var(--t-fast);
}
.notif-item:last-child { margin-bottom: 0; }
.notif-item:hover { background: var(--c-primary-soft); border-left-color: var(--c-primary); }
.notif-title { font-size: 12px; font-weight: 600; color: var(--c-text); margin-bottom: 2px; }
.notif-text  { font-size: 11px; color: var(--c-text-2); }
.notif-time  { font-size: 10px; color: var(--c-text-3); margin-top: 3px; }

/* Request item */
.req-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  margin-bottom: 6px;
  transition: background var(--t-fast);
}
.req-item:last-child { margin-bottom: 0; }
.req-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--c-primary-mute);
  color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.req-info { flex: 1; min-width: 0; }
.req-name { font-size: 12px; font-weight: 600; color: var(--c-text); }
.req-actions { display: flex; gap: 4px; flex-shrink: 0; }
.req-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-md);
  font-size: 12px; cursor: pointer;
  transition: all var(--t-fast);
}
.req-btn.approve { background: #d1fae5; color: #065f46; }
.req-btn.approve:hover { background: var(--c-success); color: #fff; }
.req-btn.decline { background: #fee2e2; color: #7f1d1d; }
.req-btn.decline:hover { background: var(--c-danger); color: #fff; }

/* ============================================================
   UTILITIES
   ============================================================ */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) { .chat-right { display: none; } }
@media (max-width: 768px) {
  .chat-root { height: calc(100vh - 60px); }
  .chat-left {
    position: absolute; top: 0; left: 0; height: 100%;
    transform: translateX(-100%);
    transition: transform var(--t-base);
    z-index: 20; box-shadow: var(--shadow-lg);
  }
  .chat-left.open { transform: translateX(0); }
  .chat-resizer   { display: none; }
  #toggleSidebarBtn { display: flex !important; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin 1s linear infinite; display: inline-block; }
</style>
@endsection

@section('content')
<div class="chat-root" id="chatRoot">
  <div class="chat-container" id="chatContainer">

    {{-- LEFT PANEL --}}
    <aside class="chat-left" id="chatLeft" aria-label="Contacts and groups">

      <div class="chat-brand">
        <div class="chat-logo">P</div>
        <div>
          <div class="chat-brand-name">Prolex</div>
          <div class="chat-brand-sub">Secure Legal Messaging</div>
        </div>
      </div>

      <div class="chat-tabs" role="tablist">
        <button class="chat-tab active" id="tabContacts" role="tab" aria-selected="true">Contacts</button>
        <button class="chat-tab"        id="tabGroups"   role="tab" aria-selected="false">Groups</button>
        <button class="chat-tab"        id="tabSettings" role="tab" aria-selected="false">Settings</button>
      </div>

      <div class="chat-search">
        <div class="chat-search-wrap">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
          </svg>
          <input id="searchInput" type="search" placeholder="Search…" autocomplete="off" aria-label="Search">
        </div>
      </div>

      <div id="groupsBar" class="chat-groups-bar">
        <button id="btnCreateGroup" class="btn-create-group">＋ Create Group</button>
      </div>

      <nav class="chat-contacts" id="contactsList" role="list" aria-label="Conversations"></nav>
    </aside>

    <div class="chat-resizer" id="resizer1" aria-hidden="true"></div>

    {{-- MIDDLE PANEL --}}
    <main class="chat-middle">
      <header class="chat-header">
        <div class="chat-header-left">
          <button class="ic-btn" id="toggleSidebarBtn" title="Menu" style="display:none" aria-label="Toggle sidebar">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
          </button>
          <div class="chat-header-avatar" id="headerAvatar">—</div>
          <div class="chat-header-info">
            <div class="chat-header-name" id="headerName">Select a contact</div>
            <div class="chat-header-sub">
              <span id="headerStatus">No conversation selected</span>
              <span id="typingIndicator" class="typing-dots hidden" aria-live="polite">
                <span class="typing-dot"></span>
                <span class="typing-dot"></span>
                <span class="typing-dot"></span>
              </span>
            </div>
          </div>
        </div>
        <div class="chat-header-right">
          <button class="ic-btn" id="btnSearchMsg" title="Search messages" aria-label="Search messages">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
            </svg>
          </button>
          <button class="ic-btn" id="btnCall" title="Audio call" aria-label="Audio call">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.1 1.18 2 2 0 012.08 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 7.91a16 16 0 006.17 6.17l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/>
            </svg>
          </button>
          <button class="ic-btn" id="btnVideo" title="Video call" aria-label="Video call">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
            </svg>
          </button>
          <button class="ic-btn" id="btnInfo" title="Info" aria-label="Conversation info">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
          </button>
          <button class="ic-btn primary" id="btnTheme" title="Toggle theme" aria-label="Toggle dark mode">🌙</button>
        </div>
      </header>

      <section class="chat-area" id="chatArea" aria-live="polite" aria-label="Messages">
        <div class="msg-system">Welcome to Prolex Secure Chat. Select a contact to start messaging.</div>
      </section>

      <div class="chat-input-area">
        <div class="chat-input-box">
          <button class="btn-attach" id="btnAttach" title="Attach file" aria-label="Attach file">📎</button>
          <textarea id="messageInput" placeholder="Type a message…" rows="1" aria-label="Message input"></textarea>
        </div>
        <button class="btn-send" id="sendBtn" aria-label="Send message" disabled>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
          </svg>
        </button>
      </div>
    </main>

    <div class="chat-resizer" id="resizer2" aria-hidden="true"></div>

    {{-- RIGHT PANEL --}}
    <aside class="chat-right" aria-label="Activity">
      <div class="chat-panel">
        <div class="chat-panel-head">
          <span class="chat-panel-title">Notifications</span>
          <span class="chat-panel-badge" id="notifBadge">0</span>
        </div>
        <div id="notifList">
          <div class="chat-empty"><div class="chat-empty-icon">🔕</div><p>No notifications</p></div>
        </div>
      </div>
      <div class="chat-panel">
        <div class="chat-panel-head">
          <span class="chat-panel-title">Requests</span>
          <span class="chat-panel-badge" id="reqBadge">0</span>
        </div>
        <div id="reqList">
          <div class="chat-empty"><div class="chat-empty-icon">✓</div><p>No pending requests</p></div>
        </div>
      </div>
      <div class="chat-panel">
        <div class="chat-panel-head">
          <span class="chat-panel-title">Shared Files</span>
        </div>
        <div class="chat-empty"><div class="chat-empty-icon">📄</div><p>No shared files</p></div>
      </div>
    </aside>

  </div>
</div>
@endsection

@push('scripts')
<script>window.USER_ID = @json(auth()->id());</script>
@vite(['resources/js/chat.js'])
<script src="{{ asset('js/echo-init.js') }}"></script>
<script>
(function () {
  'use strict';

  /* ============================================================
     CONSTANTS
     ============================================================ */
  const CSRF   = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';
  const API    = '/api/v1/chat';
  const POLL_MS = 5000;

  /* ============================================================
     SERVER DATA
     ============================================================ */
  const serverContacts = @json($chatContacts ?? []);

  /* ============================================================
     STATE
     ============================================================ */
  const state = {
    view:           'contacts',   // 'contacts' | 'groups' | 'settings'
    contacts:       serverContacts.map(c => ({ ...c, status: 'offline', messages: [] })),
    groups:         [],
    notifications:  [{ id: 1, title: 'Welcome!', text: 'Welcome to Prolex Secure Chat', time: new Date() }],
    requests:       [],
    chat:           null,         // active contact/group object
    chatType:       null,         // 'contact' | 'group'
    isDark:         false,
    searchQuery:    '',
    // pagination
    page:           1,
    hasMore:        false,
    loadingOlder:   false,
    // polling
    pollTimer:      null,
    lastMsgId:      null,
    // echo
    echoChannel:    null,
    // id counter for optimistic messages
    idCounter:      0,
  };

  /* ============================================================
     DOM REFS — resolved once on boot
     ============================================================ */
  const $ = id => document.getElementById(id);
  const el = {
    root:           $('chatRoot'),
    left:           $('chatLeft'),
    contactsList:   $('contactsList'),
    search:         $('searchInput'),
    chatArea:       $('chatArea'),
    headerAvatar:   $('headerAvatar'),
    headerName:     $('headerName'),
    headerStatus:   $('headerStatus'),
    typingInd:      $('typingIndicator'),
    msgInput:       $('messageInput'),
    sendBtn:        $('sendBtn'),
    themeBtn:       $('btnTheme'),
    notifBadge:     $('notifBadge'),
    notifList:      $('notifList'),
    reqBadge:       $('reqBadge'),
    reqList:        $('reqList'),
    groupsBar:      $('groupsBar'),
    tabContacts:    $('tabContacts'),
    tabGroups:      $('tabGroups'),
    tabSettings:    $('tabSettings'),
    toggleSidebar:  $('toggleSidebarBtn'),
  };

  /* ============================================================
     UTILITIES
     ============================================================ */
  function esc(str) {
    const d = document.createElement('div');
    d.textContent = String(str ?? '');
    return d.innerHTML;
  }

  function fmtTime(date) {
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  }

  function fmtRelative(date) {
    const diff = Date.now() - date.getTime();
    const m = Math.floor(diff / 60000);
    if (m < 1)   return 'Just now';
    if (m < 60)  return `${m}m ago`;
    const h = Math.floor(m / 60);
    if (h < 24)  return `${h}h ago`;
    return date.toLocaleDateString();
  }

  function fmtDateDivider(date) {
    const today = new Date();
    const yest  = new Date(today); yest.setDate(today.getDate() - 1);
    if (date.toDateString() === today.toDateString()) return 'Today';
    if (date.toDateString() === yest.toDateString())  return 'Yesterday';
    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
  }

  function nextId() { return ++state.idCounter; }

  async function apiPost(url, body) {
    const res = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept':        'application/json',
        'X-CSRF-TOKEN':  CSRF,
      },
      credentials: 'same-origin',
      body: JSON.stringify(body),
    });
    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      throw Object.assign(new Error(`HTTP ${res.status}`), { status: res.status, data: err });
    }
    return res.json();
  }

  async function apiGet(url) {
    const res = await fetch(url, {
      headers: { 'Accept': 'application/json' },
      credentials: 'same-origin',
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  }

  function comingSoon(label = 'This feature') {
    apiPost(`${API}/coming-soon`, {})
      .then(d => alert(d?.message ?? 'Coming soon'))
      .catch(() => alert('Coming soon'));
  }

  /* ============================================================
     CONTACTS RENDERING
     ============================================================ */
  function renderContacts(filter = '') {
    const q = filter.toLowerCase();
    const list = state.contacts.filter(c =>
      c.name.toLowerCase().includes(q) ||
      (c.role ?? 'User').toLowerCase().includes(q)
    );

    if (!list.length) {
      el.contactsList.innerHTML = `<div class="chat-empty"><div class="chat-empty-icon">🔍</div><p>No contacts found</p></div>`;
      return;
    }

    el.contactsList.innerHTML = list.map(c => {
      const last     = c.messages.at(-1);
      const isActive = state.chat?.id === c.id && state.chatType === 'contact';
      const unread   = c.messages.filter(m => !m.is_read && m.direction === 'received').length;

      return `
        <div class="chat-contact${isActive ? ' active' : ''}"
             role="listitem button"
             tabindex="0"
             data-id="${c.id}"
             data-type="contact"
             data-chat-id="${c.chat_id ?? ''}">
          <div class="chat-avatar-wrap">
            <div class="chat-avatar">${esc(c.initials)}</div>
            <div class="chat-status-dot ${c.status === 'online' ? 'online' : c.status === 'away' ? 'away' : ''}"></div>
          </div>
          <div class="chat-cinfo">
            <div class="chat-cinfo-top">
              <span class="chat-cname">${esc(c.name)}</span>
              ${last ? `<span class="chat-ctime">${fmtRelative(last.timestamp)}</span>` : ''}
            </div>
            <div class="chat-cmeta">
              <span class="chat-clast">${last
                ? `${last.direction === 'sent' ? '✓ ' : ''}${esc(last.text.substring(0, 38))}${last.text.length > 38 ? '…' : ''}`
                : `<em style="color:var(--c-text-3)">${esc(c.role ?? 'User')}</em>`
              }</span>
              ${unread > 0 ? `<span class="chat-unread">${unread}</span>` : ''}
            </div>
          </div>
        </div>`;
    }).join('');

    el.contactsList.querySelectorAll('.chat-contact').forEach(node => {
      node.addEventListener('click',   () => openChat(node));
      node.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openChat(node); } });
    });
  }

  function renderGroups(filter = '') {
    el.groupsBar.classList.add('visible');
    const q    = filter.toLowerCase();
    const list = state.groups.filter(g => g.name.toLowerCase().includes(q));

    if (!list.length) {
      el.contactsList.innerHTML = `<div class="chat-empty"><div class="chat-empty-icon">👥</div><p>No groups yet</p></div>`;
      return;
    }

    el.contactsList.innerHTML = list.map(g => {
      const last     = g.messages?.at(-1);
      const isActive = state.chat?.id === g.id && state.chatType === 'group';
      return `
        <div class="chat-contact${isActive ? ' active' : ''}"
             role="listitem button" tabindex="0"
             data-id="${g.id}" data-type="group">
          <div class="chat-avatar-wrap">
            <div class="chat-avatar">${esc(g.initials)}</div>
          </div>
          <div class="chat-cinfo">
            <div class="chat-cinfo-top">
              <span class="chat-cname">${esc(g.name)}</span>
              ${last ? `<span class="chat-ctime">${fmtRelative(last.timestamp)}</span>` : ''}
            </div>
            <div class="chat-cmeta">
              <span class="chat-clast">${last
                ? esc(last.text.substring(0, 38))
                : `${g.members?.length ?? 0} members`
              }</span>
            </div>
          </div>
        </div>`;
    }).join('');

    el.contactsList.querySelectorAll('.chat-contact').forEach(node => {
      node.addEventListener('click', () => openChat(node));
    });
  }

  function renderSettings() {
    el.groupsBar.classList.remove('visible');
    el.contactsList.innerHTML = `
      <div style="padding:16px;overflow-y:auto">
        <p style="font-size:13px;font-weight:700;color:var(--c-text-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px">Preferences</p>
        ${['Sound notifications','Auto-scroll','Typing indicators'].map(label => `
          <label style="display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;margin-bottom:10px">
            <input type="checkbox" checked onclick="event.preventDefault();comingSoon('${label}')"> ${label}
          </label>`).join('')}
        <hr style="border:none;border-top:1px solid var(--c-border);margin:16px 0">
        <p style="font-size:11px;color:var(--c-text-3);line-height:1.6">
          Prolex Secure Chat v2.0<br>
          End-to-end encrypted legal messaging<br>
          © 2026 Melsoft Private Limited
        </p>
      </div>`;
  }

  /* ============================================================
     MESSAGE RENDERING
     ============================================================ */
  function renderMessages() {
    if (!state.chat) {
      el.chatArea.innerHTML = '<div class="msg-system">Welcome to Prolex Secure Chat. Select a contact to start messaging.</div>';
      return;
    }

    const msgs   = state.chat.messages ?? [];
    let   html   = '';
    let   lastDate = null;
    let   lastSender = null;

    if (state.hasMore) {
      html += `<div class="chat-load-more">
        <button class="btn-load-more" id="btnLoadMore" ${state.loadingOlder ? 'disabled' : ''}>
          ${state.loadingOlder ? '<span class="spin">↻</span> Loading…' : 'Load earlier messages'}
        </button>
      </div>`;
    }

    msgs.forEach(msg => {
      const dateStr = msg.timestamp.toDateString();
      if (dateStr !== lastDate) {
        html += `<div class="msg-date-divider"><span>${fmtDateDivider(msg.timestamp)}</span></div>`;
        lastDate   = dateStr;
        lastSender = null;
      }

      const isGap = lastSender !== null && lastSender !== msg.direction;
      lastSender   = msg.direction;

      const statusIcon = msg.direction === 'sent'
        ? `<span class="msg-status ${msg.is_read ? 'read' : ''}">
             ${msg.is_read ? '✓✓' : '✓'}
           </span>`
        : '';

      html += `
        <div class="chat-msg ${msg.direction}${isGap ? ' gap' : ''}" data-id="${msg.id}">
          ${state.chatType === 'group' && msg.direction === 'received'
            ? `<div class="msg-sender">${esc(msg.sender)}</div>` : ''}
          <div class="msg-bubble">${esc(msg.text)}</div>
          <div class="msg-meta">
            <span>${fmtTime(msg.timestamp)}</span>
            ${statusIcon}
          </div>
        </div>`;
    });

    el.chatArea.innerHTML = html;

    if (!state.loadingOlder) scrollBottom();

    $('btnLoadMore')?.addEventListener('click', loadOlderMessages);
  }

  function scrollBottom() {
    el.chatArea.scrollTop = el.chatArea.scrollHeight;
  }

  /* ============================================================
     RIGHT PANEL RENDERING
     ============================================================ */
  function renderNotifications() {
    const list = state.notifications;
    el.notifBadge.textContent = list.length;
    el.notifList.innerHTML = list.length
      ? list.map(n => `
          <div class="notif-item" data-id="${n.id}">
            <div class="notif-title">${esc(n.title)}</div>
            <div class="notif-text">${esc(n.text)}</div>
            <div class="notif-time">${fmtRelative(n.time)}</div>
          </div>`).join('')
      : '<div class="chat-empty"><div class="chat-empty-icon">🔕</div><p>No notifications</p></div>';

    el.notifList.querySelectorAll('.notif-item').forEach(node => {
      node.addEventListener('click', () => {
        const id = parseInt(node.dataset.id);
        state.notifications = state.notifications.filter(n => n.id !== id);
        renderNotifications();
      });
    });
  }

  function renderRequests() {
    const list = state.requests;
    el.reqBadge.textContent = list.length;
    el.reqList.innerHTML = list.length
      ? list.map(r => `
          <div class="req-item" data-id="${r.id}">
            <div class="req-avatar">${esc(r.initials)}</div>
            <div class="req-info"><div class="req-name">${esc(r.name)}</div></div>
            <div class="req-actions">
              <button class="req-btn approve" data-action="approve" title="Accept">✓</button>
              <button class="req-btn decline" data-action="decline" title="Decline">✗</button>
            </div>
          </div>`).join('')
      : '<div class="chat-empty"><div class="chat-empty-icon">✓</div><p>No pending requests</p></div>';

    el.reqList.querySelectorAll('.req-btn').forEach(btn => {
      btn.addEventListener('click', e => {
        e.stopPropagation();
        comingSoon('Contact requests');
      });
    });
  }

  /* ============================================================
     API — LOAD MESSAGES
     ============================================================ */
  async function loadChatMessages(chatId, page = 1) {
    if (!chatId) return { messages: [], currentPage: page, lastPage: page };
    try {
      // FIX #1 — correct URL includes /messages
      const payload = await apiGet(`${API}/rooms/${chatId}/messages?page=${page}`);
      const items   = Array.isArray(payload) ? payload : (payload.data ?? []);
      const meta    = payload?.meta ?? {};

      const messages = items.map(msg => {
        const isSent = msg.sender_id === window.USER_ID;
        return {
          id:        msg.message_id ?? msg.id ?? nextId(),
          message_id:msg.message_id,
          sender_id: msg.sender_id,
          chat_id:   msg.chat_id,
          text:      msg.message ?? '',
          timestamp: msg.sent_at ? new Date(msg.sent_at) : new Date(),
          direction: isSent ? 'sent' : 'received',
          // FIX — renamed relationship is senderUser on backend
          sender:    msg.senderUser?.name ?? msg.sender?.name ?? 'Unknown',
          is_read:   !!msg.is_read,
          read_at:   msg.read_at ?? null,
          status:    isSent ? (msg.is_read ? 'read' : 'sent') : 'received',
        };
      });
      // FIX #4 — NO .reverse() — backend already returns ASC (oldest first)

      return {
        messages,
        currentPage: meta.current_page ?? page,
        lastPage:    meta.last_page    ?? page,
      };
    } catch (err) {
      console.error('[chat] loadChatMessages failed:', err);
      return { messages: [], currentPage: page, lastPage: page };
    }
  }

  /* ============================================================
     API — ENSURE ROOM EXISTS
     ============================================================ */
  async function ensureRoom(contact) {
    if (contact.chat_id) return contact.chat_id;
    try {
      const room       = await apiPost(`${API}/rooms/private`, { receiver_id: contact.id });
      contact.chat_id  = room.chat_id;
      contact.chat_type = room.chat_type ?? 'private';
      return contact.chat_id;
    } catch (err) {
      console.error('[chat] ensureRoom failed:', err);
      return null;
    }
  }

  /* ============================================================
     OPEN CHAT
     ============================================================ */
  async function openChat(node) {
    const id   = parseInt(node.dataset.id);
    const type = node.dataset.type;

    if (type === 'group') { comingSoon('Group chat'); return; }

    state.chat     = state.contacts.find(c => c.id === id);
    state.chatType = 'contact';
    if (!state.chat) return;

    // Update header
    el.headerAvatar.textContent = state.chat.initials;
    el.headerName.textContent   = state.chat.name;
    el.headerStatus.textContent = '';

    // Reset pagination
    state.page        = 1;
    state.hasMore     = false;
    state.loadingOlder = false;

    renderContacts(state.searchQuery);
    renderMessages(); // show skeleton immediately

    const chatId = await ensureRoom(state.chat);
    if (chatId) {
      const { messages, currentPage, lastPage } = await loadChatMessages(chatId, 1);
      state.chat.messages = messages;
      state.page    = currentPage;
      state.hasMore = currentPage < lastPage;
      state.lastMsgId = messages.at(-1)?.id ?? null;
      renderMessages();
      renderContacts(state.searchQuery);
      subscribeEcho(chatId);
      startPolling(chatId);
    }

    el.msgInput.focus();
  }

  /* ============================================================
     SEND MESSAGE
     ============================================================ */
  async function sendMessage() {
    const text = el.msgInput.value.trim();
    if (!text || !state.chat) return;

    el.msgInput.value = '';
    el.msgInput.style.height = 'auto';
    el.sendBtn.disabled = true;

    const chatId = await ensureRoom(state.chat);
    if (!chatId) { console.error('[chat] No chat room'); return; }

    // Optimistic message
    const optimisticId = `opt-${nextId()}`;
    const optimistic = {
      id:        optimisticId,
      sender_id: window.USER_ID,
      chat_id:   chatId,
      text,
      timestamp: new Date(),
      direction: 'sent',
      is_read:   false,
      status:    'sent',
    };
    state.chat.messages.push(optimistic);
    state.chat.chat_id = chatId;
    renderMessages();

    try {
      // FIX #2 — message_type is required by controller validation
      const saved = await apiPost(`${API}/rooms/${chatId}/messages`, {
        message:      text,
        message_type: 'text',
      });

      // Replace optimistic with real data
      const idx = state.chat.messages.findIndex(m => m.id === optimisticId);
      if (idx !== -1) {
        state.chat.messages[idx] = {
          id:        saved.message_id,
          message_id:saved.message_id,
          sender_id: window.USER_ID,
          chat_id:   saved.chat_id ?? chatId,
          text:      saved.message,
          timestamp: saved.sent_at ? new Date(saved.sent_at) : new Date(),
          direction: 'sent',
          is_read:   false,
          status:    'sent',
        };
        state.lastMsgId = saved.message_id;
      }
      renderMessages();
      renderContacts(state.searchQuery);
    } catch (err) {
      console.error('[chat] sendMessage failed:', err);
      // Mark optimistic as failed
      const idx = state.chat.messages.findIndex(m => m.id === optimisticId);
      if (idx !== -1) state.chat.messages[idx].status = 'failed';
      renderMessages();
    }
  }

  /* ============================================================
     LOAD OLDER MESSAGES
     ============================================================ */
  async function loadOlderMessages() {
    if (!state.chat?.chat_id || state.loadingOlder || !state.hasMore) return;
    state.loadingOlder = true;
    renderMessages();

    const prevH   = el.chatArea.scrollHeight;
    const nextPage = state.page + 1;
    const { messages, currentPage, lastPage } = await loadChatMessages(state.chat.chat_id, nextPage);

    state.chat.messages = [...messages, ...state.chat.messages];
    state.page          = currentPage;
    state.hasMore       = currentPage < lastPage;
    state.loadingOlder  = false;
    renderMessages();
    el.chatArea.scrollTop = el.chatArea.scrollHeight - prevH;
  }

  /* ============================================================
     POLLING — fallback for environments without websockets
     ============================================================ */
  function startPolling(chatId) {
    stopPolling();
    state.pollTimer = setInterval(async () => {
      if (!state.chat?.chat_id) return;
      const { messages } = await loadChatMessages(state.chat.chat_id, 1);
      if (!messages.length) return;
      const latestId = messages.at(-1).id;
      if (String(latestId) !== String(state.lastMsgId)) {
        state.chat.messages = messages;
        state.lastMsgId     = latestId;
        renderMessages();
        renderContacts(state.searchQuery);
      }
    }, POLL_MS);
  }

  function stopPolling() {
    if (state.pollTimer) { clearInterval(state.pollTimer); state.pollTimer = null; }
  }

  /* ============================================================
     ECHO — real-time subscription
     FIX #3 — listener is INSIDE this IIFE so it has direct access
     to state and renderMessages(). Cleans up previous channel.
     ============================================================ */
  function subscribeEcho(chatId) {
    if (!window.Echo) return;

    // Leave previous channel
    if (state.echoChannel) {
      window.Echo.leave(state.echoChannel);
      state.echoChannel = null;
    }

    state.echoChannel = `chat.${chatId}`;

    window.Echo.private(state.echoChannel)
      .listen('MessageSent', (e) => {
        const msg = e.message;
        if (!msg || !state.chat) return;
        if (msg.chat_id   !== state.chat.chat_id) return;  // wrong room
        if (msg.sender_id === window.USER_ID)      return;  // own message (already optimistic)

        state.chat.messages.push({
          id:        msg.message_id,
          message_id:msg.message_id,
          sender_id: msg.sender_id,
          chat_id:   msg.chat_id,
          text:      msg.message ?? '',
          timestamp: msg.sent_at ? new Date(msg.sent_at) : new Date(),
          direction: 'received',
          sender:    msg.sender_name ?? 'Unknown',
          is_read:   false,
          status:    'received',
        });
        state.lastMsgId = msg.message_id;
        renderMessages();
        renderContacts(state.searchQuery);
      });
  }

  /* ============================================================
     PRESENCE
     ============================================================ */
  function updateContactStatus(userId, status) {
    const c = state.contacts.find(c => c.id === userId);
    if (!c) return;
    c.status = status;
    if (state.view === 'contacts') renderContacts(state.searchQuery);
  }

  window.updateContactStatus = updateContactStatus;
  window.updatePresence      = () => {};

  /* ============================================================
     TABS
     ============================================================ */
  function switchTab(tab) {
    state.view = tab;
    [el.tabContacts, el.tabGroups, el.tabSettings].forEach(t => {
      t.classList.remove('active');
      t.setAttribute('aria-selected', 'false');
    });
    el.groupsBar.classList.remove('visible');

    if (tab === 'contacts') {
      el.tabContacts.classList.add('active');
      el.tabContacts.setAttribute('aria-selected', 'true');
      renderContacts(state.searchQuery);
    } else if (tab === 'groups') {
      el.tabGroups.classList.add('active');
      el.tabGroups.setAttribute('aria-selected', 'true');
      renderGroups(state.searchQuery);
    } else {
      el.tabSettings.classList.add('active');
      el.tabSettings.setAttribute('aria-selected', 'true');
      renderSettings();
    }
  }

  /* ============================================================
     PANEL RESIZING
     ============================================================ */
  function initResizers() {
    [['resizer1', 'chatLeft', 'left'], ['resizer2', 'chatRight', 'right']].forEach(([resId, panelId, side]) => {
      const resizer = $(resId);
      const panel   = $(panelId);
      if (!resizer || !panel) return;

      let dragging = false;

      resizer.addEventListener('mousedown', e => {
        dragging = true;
        resizer.classList.add('active');
        document.body.style.cursor    = 'col-resize';
        document.body.style.userSelect = 'none';

        const onMove = ev => {
          if (!dragging) return;
          const container = $('chatContainer').getBoundingClientRect();
          if (side === 'left') {
            const w = Math.max(240, Math.min(420, ev.clientX - container.left));
            panel.style.width = `${w}px`;
          } else {
            const w = Math.max(200, Math.min(360, container.right - ev.clientX));
            panel.style.width = `${w}px`;
          }
        };

        const onUp = () => {
          dragging = false;
          resizer.classList.remove('active');
          document.body.style.cursor    = '';
          document.body.style.userSelect = '';
          document.removeEventListener('mousemove', onMove);
          document.removeEventListener('mouseup',   onUp);
        };

        document.addEventListener('mousemove', onMove);
        document.addEventListener('mouseup',   onUp);
      });
    });
  }

  /* ============================================================
     THEME
     ============================================================ */
  function toggleTheme() {
    state.isDark = !state.isDark;
    el.root.classList.toggle('chat-dark', state.isDark);
    el.themeBtn.textContent = state.isDark ? '☀️' : '🌙';
    localStorage.setItem('prolexDark', state.isDark);
  }

  /* ============================================================
     INIT
     ============================================================ */
  function init() {
    // Restore theme
    if (localStorage.getItem('prolexDark') === 'true') {
      state.isDark = true;
      el.root.classList.add('chat-dark');
      el.themeBtn.textContent = '☀️';
    }

    // Initial renders
    renderContacts();
    renderNotifications();
    renderRequests();

    // Auto-open first contact that has an existing chat
    setTimeout(() => {
      const first = el.contactsList.querySelector('.chat-contact[data-chat-id]:not([data-chat-id=""])') ??
                    el.contactsList.querySelector('.chat-contact');
      first?.click();
    }, 80);

    // Resizers
    initResizers();

    // Tabs
    el.tabContacts.addEventListener('click', () => switchTab('contacts'));
    el.tabGroups.addEventListener('click',   () => switchTab('groups'));
    el.tabSettings.addEventListener('click', () => switchTab('settings'));

    // Create group
    $('btnCreateGroup')?.addEventListener('click', () => comingSoon('Group creation'));

    // Search
    el.search.addEventListener('input', e => {
      state.searchQuery = e.target.value;
      if (state.view === 'contacts') renderContacts(state.searchQuery);
      else if (state.view === 'groups') renderGroups(state.searchQuery);
    });

    // Message input — auto-resize + enable send
    el.msgInput.addEventListener('input', () => {
      el.sendBtn.disabled = !el.msgInput.value.trim();
      el.msgInput.style.height = 'auto';
      el.msgInput.style.height = `${Math.min(el.msgInput.scrollHeight, 130)}px`;
    });

    el.msgInput.addEventListener('keydown', e => {
      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
    });

    el.sendBtn.addEventListener('click', sendMessage);

    // Header buttons
    el.themeBtn.addEventListener('click', toggleTheme);
    $('btnCall')?.addEventListener('click',      () => comingSoon('Audio calling'));
    $('btnVideo')?.addEventListener('click',     () => comingSoon('Video calling'));
    $('btnAttach')?.addEventListener('click',    () => comingSoon('File sharing'));
    $('btnSearchMsg')?.addEventListener('click', () => comingSoon('Message search'));
    $('btnInfo')?.addEventListener('click',      () => comingSoon('Conversation info'));

    // Mobile sidebar
    el.toggleSidebar?.addEventListener('click', () => el.left.classList.toggle('open'));
    window.addEventListener('resize', () => {
      const mobile = window.innerWidth <= 768;
      el.toggleSidebar.style.display = mobile ? 'flex' : 'none';
      if (!mobile) el.left.classList.remove('open');
    });
    if (window.innerWidth <= 768) el.toggleSidebar.style.display = 'flex';

    console.log('✅ Prolex Chat initialised');
  }

  // Expose for echo-init.js
  window.chatApp = { updateContactStatus };

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