<style>
    .msg-screen { background: var(--bg); min-height: 100vh; }
    .msg-header {
      background: var(--card);
      padding: 16px 20px;
      padding-top: calc(16px + env(safe-area-inset-top, 0px));
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .msg-body { padding: 8px 0; padding-bottom: 100px; }
    .msg-search {
      margin: 0 20px 12px;
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: 50px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .msg-search input {
      border: none;
      background: none;
      outline: none;
      flex: 1;
      font-family: 'Poppins', sans-serif;
      font-size: 0.9rem;
    }
    .msg-search i { color: var(--text-muted); }
    .msg-list { }
    .msg-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      cursor: pointer;
      transition: var(--transition);
      position: relative;
    }
    .msg-item:hover { background: rgba(233,30,99,0.02); }
    .msg-item.active { background: rgba(233,30,99,0.05); }
    .msg-item .msg-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
      position: relative;
      display: block;
      flex-shrink: 0;
    }
    .msg-profile-link {
      color: inherit;
      text-decoration: none;
    }
    .msg-profile-link:hover { color: var(--primary); }
    .msg-item .msg-content .msg-name .msg-profile-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .msg-item .msg-avatar .online-dot {
      position: absolute;
      bottom: 2px;
      right: 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #4CAF50;
      border: 2px solid #fff;
    }
    .msg-item .msg-content { flex: 1; min-width: 0; }
    .msg-item .msg-content .msg-name {
      font-weight: 600;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .msg-item .msg-content .msg-preview {
      font-size: 0.8rem;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .msg-item .msg-content .msg-preview .typing-indicator {
      color: var(--primary);
      font-style: italic;
    }
    .msg-item .msg-meta {
      text-align: right;
      flex-shrink: 0;
    }
    .msg-item .msg-meta .msg-time {
      font-size: 0.7rem;
      color: var(--text-muted);
    }
    .msg-item .msg-meta .msg-unread {
      background: var(--primary);
      color: #fff;
      font-size: 0.6rem;
      font-weight: 600;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 4px;
    }
    .msg-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      font-size: 0.75rem;
      color: var(--text-muted);
      font-weight: 500;
    }
    .msg-divider::before,
    .msg-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }
    .msg-family-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 50px;
      font-size: 0.6rem;
      background: rgba(123,31,162,0.1);
      color: var(--accent);
    }

    /* Chat view */
    .chat-screen {
      display: none;
      flex-direction: column;
      height: 100vh;
      background: var(--bg);
    }
    .chat-screen.show { display: flex; }
    .chat-header {
      padding: 12px 16px;
      background: var(--card);
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid var(--border);
    }
    .chat-header .back {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .chat-header .chat-user {
      flex: 1;
      min-width: 0;
    }
    .chat-header .chat-user .chat-name { font-weight: 600; font-size: 0.95rem; }
    .chat-header .chat-user .chat-status { font-size: 0.7rem; color: #4CAF50; }
    .chat-body {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .chat-footer {
      padding: 12px 16px;
      background: var(--card);
      display: flex;
      align-items: center;
      gap: 8px;
      border-top: 1px solid var(--border);
    }
    .chat-footer input {
      flex: 1;
      border: 2px solid var(--border);
      border-radius: 50px;
      padding: 10px 16px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.9rem;
      outline: none;
      transition: var(--transition);
    }
    .chat-footer input:focus { border-color: var(--primary); }
    .chat-footer .send-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: var(--gradient-primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
    }
    .chat-footer .send-btn:hover { transform: scale(1.1); }
    .chat-footer .attach-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: none;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .message-bubble .msg-image {
      max-width: 200px;
      border-radius: 12px;
      margin-top: 4px;
    }
    .message-bubble .msg-voice {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(255,255,255,0.2);
      border-radius: 8px;
    }
    .message-bubble .msg-voice .waveform {
      display: flex;
      gap: 2px;
      align-items: center;
      height: 20px;
    }
    .message-bubble .msg-voice .waveform span {
      width: 3px;
      background: currentColor;
      border-radius: 2px;
      animation: waveAnim 1s infinite;
    }
    @keyframes waveAnim {
      0%, 100% { height: 6px; }
      50% { height: 16px; }
    }
  </style>

<!-- Message List View -->
  <div class="msg-screen" id="messageListView">
    <div class="msg-header">
      <div class="d-flex align-items-center justify-content-between">
        <h5 class="fw-bold mb-0">{{__ "messages.title"}}</h5>
        <button class="btn-icon btn-icon-sm" onclick="showToast('Family Chat Coming Soon', 'info')">
          <i class="bi bi-people-fill"></i>
        </button>
      </div>
    </div>

    <div class="msg-body">
      <div class="msg-search">
        <i class="bi bi-search"></i>
        <input type="text" placeholder="{{__ "messages.search"}}">
      </div>

      <div class="msg-list">
        <!-- Dynamic conversations list loaded here by chat.js -->
      </div>
    </div>

    <!-- Bottom Navigation -->
    {{> bottom-nav}}
  </div>

  <!-- Chat View -->
  <div class="chat-screen" id="chatView">
    <div class="chat-header">
      <button class="back" onclick="closeChatDialog()"><i class="bi bi-chevron-left"></i></button>
      <img src="" id="chatAvatar" class="rounded-circle" style="width:40px;height:40px;object-fit:cover" alt="Avatar">
      <div class="chat-user">
        <div class="chat-name" id="chatName">User</div>
        <div class="chat-status" id="chatStatus">Online</div>
      </div>
      <button class="btn-icon btn-icon-sm" onclick="showToast('Voice call coming soon', 'info')">
        <i class="bi bi-telephone-fill"></i>
      </button>
      <button class="btn-icon btn-icon-sm" onclick="showToast('Video call coming soon', 'info')">
        <i class="bi bi-camera-video-fill"></i>
      </button>
    </div>
    <div class="chat-body" id="chatBody">
      <!-- Dynamic Messages go here -->
    </div>
    <div class="chat-footer">
      <button class="attach-btn" onclick="showToast('Attachment coming soon', 'info')">
        <i class="bi bi-paperclip"></i>
      </button>
      <input type="text" placeholder="Type a message..." id="chatInput" onkeypress="handleChatInputKeyPress(event)">
      <button class="send-btn" onclick="sendRealMessage()">
        <i class="bi bi-send-fill"></i>
      </button>
    </div>
  </div>

  <!-- Contact Consent Modal -->
  <div class="modal fade" id="contactConsentModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header bg-warning text-dark">
          <h5 class="modal-title"><i class="bi bi-shield-exclamation"></i> Safety Warning</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>We detected contact information (email or phone number) in your message.</p>
          <p><strong>Are you sure you want to share this?</strong></p>
          <p class="text-muted small">Suvarna Bandhan is not responsible for any fraud or misuse of contact information shared outside the app's secure messaging platform.</p>
          <input type="hidden" id="pendingMessageContent">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" onclick="confirmSendWithConsent()">I Understand, Send</button>
        </div>
      </div>
    </div>
  </div>

{{#section 'scripts'}}
<script src="/socket.io/socket.io.js"></script>
<script src="/js/chat.js"></script>
{{/section}}
