<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-Content-Type-Options" content="nosniff" />
  <!-- X-Frame-Options is enforced via the _headers HTTP header (meta has no effect) -->
  <meta http-equiv="Referrer-Policy" content="no-referrer" />
  <meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=(), payment=(), usb=()" />
  <link rel="dns-prefetch" href="https://www.gstatic.com" />
  <link rel="dns-prefetch" href="https://firestore.googleapis.com" />
  <link rel="dns-prefetch" href="https://identitytoolkit.googleapis.com" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="google-site-verification" content="1cIP8Y5Xf6O5GOeWqWvDquYAe8mI1JjlfXgCe4M9B-E" />
  <title>MIUT · Digital Ghosts</title>
  <meta name="description" content="MIUT — Digital footprint? We believe in digital ghosts. No trace, no accounts, no identity." />
  <meta name="keywords" content="anonymous chat, private chat, no account chat, ephemeral messaging, digital ghosts, MIUT" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://miutchat.pages.dev/" />
  <link rel="sitemap" type="application/xml" href="/sitemap.xml" />

  <!-- Open Graph -->
  <meta property="og:type"        content="website" />
  <meta property="og:url"         content="https://miutchat.pages.dev/" />
  <meta property="og:title"       content="MIUT · Digital Ghosts" />
  <meta property="og:description" content="No trace. No accounts. No identity. Anonymous ephemeral chat — you leave no digital footprint." />
  <meta property="og:image"       content="https://miutchat.pages.dev/icons/icon-512.png" />

  <!-- Twitter Card -->
  <meta name="twitter:card"        content="summary" />
  <meta name="twitter:title"       content="MIUT · Digital Ghosts" />
  <meta name="twitter:description" content="No trace. No accounts. No identity. Anonymous ephemeral chat." />
  <meta name="twitter:image"       content="https://miutchat.pages.dev/icons/icon-512.png" />
  <meta name="theme-color" content="#0d1a1a" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="MIUT" />
  <link rel="manifest" href="manifest.json" />
  <link rel="apple-touch-icon" href="icons/icon-192.png" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.min.css" />
</head>
<body>

<div id="ripple-container"></div>

<div id="splash" class="screen active">
  <div class="splash-bg"></div>
  <div class="splash-content">
    <div class="logo-hex nx-anim" style="--nx-d:0.1s">
      <div class="miut-logo-ring-wrap">
        <svg class="miut-ring-svg" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
          <circle class="miut-ring-track" cx="60" cy="60" r="54" fill="none" stroke="var(--teal)" stroke-width="2" opacity="0.12"/>
          <circle class="miut-ring-spin" cx="60" cy="60" r="54" fill="none" stroke="var(--teal)" stroke-width="2.5"
                  stroke-linecap="round" stroke-dasharray="80 260"/>
        </svg>
        <img src="icons/icon-192.png" alt="Miut Chat" class="miut-logo-splash-img" loading="eager" decoding="async" />
      </div>
    </div>
    <h1 class="splash-title nx-anim" style="--nx-d:0.22s">MIUT</h1>
    <p class="splash-sub nx-anim" style="--nx-d:0.32s">Digital footprint? We believe in digital ghosts.</p>
  </div>
</div>

<div id="join-screen" class="screen">
  <div class="join-bg"></div>
  <div class="join-container">

    <div class="join-header nx-anim" style="--nx-d:0.05s">
      <h2>MIUT</h2>
      <p>No trace. No accounts. No identity.</p>
    </div>

    <div class="join-form nx-anim" style="--nx-d:0.14s">

      <div class="field-group">
        <label>YOUR NAME <span class="label-opt">— optional</span></label>
        <div class="input-wrap">
          <span class="input-icon">
            <svg viewBox="0 0 20 20" fill="none" width="16" height="16">
              <circle cx="10" cy="7" r="3.5" stroke="currentColor" stroke-width="1.5"/>
              <path d="M3 17c0-3.314 3.134-6 7-6s7 2.686 7 6"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
          </span>
          <input type="text" id="input-name" placeholder="Leave blank to stay anonymous"
                 maxlength="24" autocomplete="off" />
        </div>
      </div>

      <div class="join-tabs">
        <button class="join-tab-btn active ripple-btn" data-tab="create">
          <svg viewBox="0 0 16 16" fill="none" width="13" height="13">
            <path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          CREATE ROOM
        </button>
        <button class="join-tab-btn ripple-btn" data-tab="enter">
          <svg viewBox="0 0 16 16" fill="none" width="13" height="13">
            <path d="M6 3l5 5-5 5" stroke="currentColor" stroke-width="2"
                  stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          ENTER ROOM
        </button>
      </div>

      <div class="join-tab-panel active" id="tab-create">
        <div class="field-group">
          <label>ROOM CODE <span class="label-opt">— this IS your encryption key. Min 6 chars.</span></label>
          <div class="input-wrap">
            <span class="input-icon">
              <svg viewBox="0 0 20 20" fill="none" width="16" height="16">
                <rect x="3" y="9" width="14" height="9" rx="2" stroke="currentColor" stroke-width="1.5"/>
                <path d="M7 9V6a3 3 0 016 0v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                <circle cx="10" cy="14" r="1.2" fill="currentColor"/>
              </svg>
            </span>
            <input type="text" id="input-create-code"
                   placeholder="e.g. MIUT42"
                   data-placeholders='["e.g. MIUT42","e.g. 482910","e.g. HAWK42","e.g. STORM9","e.g. ALPHA7","e.g. 007XYZ"]'
                   maxlength="32" autocomplete="off" spellcheck="false" />
            <button class="toggle-pw ripple-btn" id="create-eye-btn" title="Show/hide">
              <svg class="eye-open" viewBox="0 0 20 20" fill="none" width="16" height="16">
                <ellipse cx="10" cy="10" rx="7" ry="4.5" stroke="currentColor" stroke-width="1.5"/>
                <circle cx="10" cy="10" r="2" fill="currentColor"/>
              </svg>
              <svg class="eye-closed" viewBox="0 0 20 20" fill="none" width="16" height="16" style="display:none">
                <path d="M3 3l14 14M8.5 8.7A2 2 0 0012 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                <path d="M5.5 5.9C4.2 7 3.3 8.4 3 10c1.3 4 7 6 7 6s2.6-.9 4.6-2.6M16.7 13.3C17.5 12.3 18 11.2 18 10c-1.3-4-7-6-7-6-.9 0-1.8.2-2.6.4"
                      stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
            </button>
          </div>
          <div class="code-hint">⚠ Write this down — it cannot be recovered. Share it privately with your group.</div>

          <div class="entropy-bar-wrap" id="entropy-wrap" style="display:none">
            <div class="entropy-bar"><div class="entropy-fill" id="entropy-fill"></div></div>
            <span class="entropy-label" id="entropy-label"></span>
          </div>
        </div>
        <div class="tab-info-box">
          <svg viewBox="0 0 20 20" fill="none" width="15" height="15" style="flex-shrink:0;color:var(--teal)">
            <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.5"/>
            <path d="M10 9v5M10 7v.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
          </svg>
          <span>All messages are encrypted using your code as the key. Only people who know the code can read them.</span>
        </div>
        <button class="btn-join ripple-btn" id="btn-create">
          <span>CREATE ROOM</span>
          <div class="btn-shimmer"></div>
        </button>
      </div>

      <div class="join-tab-panel" id="tab-enter">
        <div class="field-group">
          <label>ROOM CODE</label>
          <div class="input-wrap">
            <span class="input-icon">
              <svg viewBox="0 0 20 20" fill="none" width="16" height="16">
                <circle cx="7.5" cy="10" r="3.5" stroke="currentColor" stroke-width="1.5"/>
                <path d="M10.5 10h7M15 10v2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
            </span>
            <input type="text" id="input-room-code"
                   placeholder="Enter the room code"
                   maxlength="32" autocomplete="off" spellcheck="false" />
            <button class="toggle-pw ripple-btn" id="enter-eye-btn" title="Show/hide">
              <svg class="eye-open" viewBox="0 0 20 20" fill="none" width="16" height="16">
                <ellipse cx="10" cy="10" rx="7" ry="4.5" stroke="currentColor" stroke-width="1.5"/>
                <circle cx="10" cy="10" r="2" fill="currentColor"/>
              </svg>
              <svg class="eye-closed" viewBox="0 0 20 20" fill="none" width="16" height="16" style="display:none">
                <path d="M3 3l14 14M8.5 8.7A2 2 0 0012 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                <path d="M5.5 5.9C4.2 7 3.3 8.4 3 10c1.3 4 7 6 7 6s2.6-.9 4.6-2.6M16.7 13.3C17.5 12.3 18 11.2 18 10c-1.3-4-7-6-7-6-.9 0-1.8.2-2.6.4"
                      stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
            </button>
          </div>
          <div class="code-hint">Enter the exact code the room creator shared with you</div>
        </div>
        <button class="btn-join ripple-btn" id="btn-enter">
          <span>ENTER ROOM</span>
          <div class="btn-shimmer"></div>
        </button>
      </div>

      <div id="join-error" class="error-msg"></div>
    </div>

    <div class="security-badge nx-anim" style="--nx-d:0.28s">
      <svg viewBox="0 0 20 20" fill="none" width="14" height="14">
        <rect x="4" y="9" width="12" height="9" rx="2" stroke="currentColor" stroke-width="1.5"/>
        <path d="M7 9V6.5a3 3 0 016 0V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        <circle cx="10" cy="14" r="1.2" fill="currentColor"/>
      </svg>
      <span>🔒 MIUT — Digital ghosts only. No trace left behind.</span>
    </div>

  </div>
</div>

<div id="waiting-screen" class="screen">
  <div class="waiting-bg"></div>
  <div class="waiting-container">

    <div class="waiting-pulse-ring"></div>

    <div class="waiting-avatar-wrap">
      <div class="avatar waiting-avatar" id="waiting-avatar"></div>
    </div>

    <h2 class="waiting-title">Waiting for approval</h2>
    <p class="waiting-name" id="waiting-name"></p>

    <div class="waiting-room-row">
      <svg viewBox="0 0 20 20" fill="none" width="12" height="12" style="flex-shrink:0">
        <rect x="3" y="9" width="14" height="9" rx="2" stroke="currentColor" stroke-width="1.4"/>
        <path d="M7 9V6a3 3 0 016 0v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
      </svg>
      <span id="waiting-room-code" class="waiting-room-code"></span>
    </div>

    <p class="waiting-hint">The room admin will see your request and can approve or decline it.<br/>Keep this screen open — you'll be notified instantly.</p>

    <div class="waiting-dots"><span></span><span></span><span></span></div>

    <button class="btn-waiting-cancel ripple-btn" id="btn-waiting-cancel">
      <svg viewBox="0 0 20 20" fill="none" width="13" height="13" style="flex-shrink:0">
        <path d="M13 10H3M5 7l-3 3 3 3" stroke="currentColor" stroke-width="1.5"
              stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9 4h6a1 1 0 011 1v10a1 1 0 01-1 1H9"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
      Cancel Request
    </button>

  </div>
</div>

<div id="invite-screen" class="screen">
  <div class="invite-bg"></div>
  <div class="invite-container">
    <p class="invite-label">YOU'VE BEEN INVITED TO MIUT CHAT</p>
    <h2 class="invite-title">Enter the room code<br/>to join</h2>
    <p class="invite-hint">Ask the person who shared this link for the room code.</p>
    <div class="invite-input-wrap">
      <input id="invite-code-input" type="password" placeholder="Room code…"
             autocomplete="off" autocorrect="off" spellcheck="false"/>
      <button class="invite-vis-btn" id="invite-vis-btn" type="button">
        <svg class="eye-open" viewBox="0 0 20 20" fill="none" width="14" height="14"><path d="M1 10s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6z" stroke="currentColor" stroke-width="1.4"/><circle cx="10" cy="10" r="2.5" stroke="currentColor" stroke-width="1.4"/></svg>
        <svg class="eye-closed" viewBox="0 0 20 20" fill="none" width="14" height="14" style="display:none"><path d="M2 2l16 16M7.5 7.6A4 4 0 0013.4 13M4.2 4.4C2.6 5.8 1 8 1 10c0 0 3.5 6 9 6a9 9 0 004.8-1.4M8 4.1A9 9 0 0119 10s-.7 1.4-2 2.8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
      </button>
    </div>
    <div id="invite-error" class="invite-error"></div>
    <button class="btn-invite-join ripple-btn" id="invite-join-btn" disabled>
      <span>JOIN ROOM</span>
    </button>
    <button class="btn-invite-back">← Cancel Invite</button>
  </div>
</div>

<div id="app" class="screen">

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-header nx-anim" style="--nx-d:0.05s">
      <div class="sidebar-title-wrap">
        <span class="app-name">MIUT</span>
        <span class="room-code-pill" id="room-code-pill" title="Tap to copy">····</span>
      </div>
      <button class="icon-btn" title="Share invite link" id="share-room-btn">
        <svg viewBox="0 0 20 20" fill="none" width="17" height="17">
          <circle cx="15" cy="4" r="2" stroke="currentColor" stroke-width="1.4"/>
          <circle cx="15" cy="16" r="2" stroke="currentColor" stroke-width="1.4"/>
          <circle cx="5" cy="10" r="2" stroke="currentColor" stroke-width="1.4"/>
          <path d="M7 9l6-3.5M7 11l6 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
        </svg>
      </button>
      <button class="icon-btn settings-gear-btn" title="Settings" id="settings-btn">
        <svg viewBox="0 0 24 24" fill="none" width="18" height="18" aria-hidden="true">
          <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>

    <div class="my-profile-mini nx-anim" style="--nx-d:0.12s">
      <div class="avatar-wrap">
        <div class="avatar" id="my-avatar-sidebar"></div>
        <div class="status-dot online"></div>
      </div>
      <div class="profile-info">
        <div class="profile-name" id="my-name-sidebar">You</div>
        <div class="profile-status">● Online</div>
      </div>
      <div id="my-admin-badge" class="admin-badge" style="display:none" title="You are an admin">
        <svg viewBox="0 0 20 20" fill="none" width="11" height="11">
          <path d="M10 2l2.2 6.8H19l-5.6 4 2.2 6.8L10 15.5l-5.6 3.9 2.2-6.8L1 9.2h6.8z"
                stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
        </svg>
        ADMIN
      </div>
    </div>

    <div class="sidebar-section">
      <div class="section-label">
        ONLINE <span id="online-count" class="count-badge">1</span>
      </div>
      <div id="members-list" class="members-list"></div>
    </div>

    <div class="sidebar-footer">
      <button class="btn-logout ripple-btn" id="btn-logout">
        <svg viewBox="0 0 20 20" fill="none" width="14" height="14" style="flex-shrink:0">
          <path d="M13 10H3M5 7l-3 3 3 3" stroke="currentColor" stroke-width="1.5"
                stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9 4h6a1 1 0 011 1v10a1 1 0 01-1 1H9"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        Leave Room
      </button>
    </div>
  </aside>

  <main id="main-area" class="main-area">

    <div class="chat-header" id="chat-header">

      <button class="icon-btn hamburger-btn ripple-btn" id="hamburger-btn" title="Menu" aria-label="Open menu">
        <svg viewBox="0 0 20 20" fill="none" width="18" height="18">
          <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
        </svg>
      </button>

      <div class="chat-header-info">
        <div>
          <div class="chat-name" id="chat-name">GROUP ROOM</div>
          <div class="chat-status" id="chat-status">
            <span class="online-dot-sm"></span>
            <span id="member-status-text">0 members online</span>
          </div>
        </div>
      </div>
      <button class="icon-btn ripple-btn" title="Copy room code">
        <svg viewBox="0 0 20 20" fill="none" width="17" height="17">
          <rect x="7" y="7" width="10" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/>
          <path d="M13 7V5a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </button>
      <button class="icon-btn ripple-btn" id="search-btn" title="Search messages">
        <svg viewBox="0 0 20 20" fill="none" width="17" height="17">
          <circle cx="8.5" cy="8.5" r="5" stroke="currentColor" stroke-width="1.5"/>
          <path d="M13 13l3.5 3.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
        </svg>
      </button>
    </div>

    <div id="search-bar" class="search-bar" style="display:none">
      <svg viewBox="0 0 20 20" fill="none" width="15" height="15" style="flex-shrink:0;color:var(--text2)">
        <circle cx="8.5" cy="8.5" r="5" stroke="currentColor" stroke-width="1.5"/>
        <path d="M13 13l3.5 3.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
      </svg>
      <input type="text" placeholder="Search messages…" autocomplete="off" />
      <span id="search-count" class="search-count"></span>
      <button class="icon-btn" style="flex-shrink:0">
        <svg viewBox="0 0 20 20" fill="none" width="13" height="13">
          <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
        </svg>
      </button>
    </div>

    <div id="messages-area" class="messages-area">
      <div id="msg-skeleton" class="msg-skeleton-wrap">
        <div class="skel-row received"><div class="skel-av"></div><div class="skel-lines"><div class="skel-line w60"></div><div class="skel-line w40"></div></div></div>
        <div class="skel-row sent"><div class="skel-lines"><div class="skel-line w50"></div></div></div>
        <div class="skel-row received"><div class="skel-av"></div><div class="skel-lines"><div class="skel-line w70"></div><div class="skel-line w30"></div></div></div>
        <div class="skel-row sent"><div class="skel-lines"><div class="skel-line w45"></div><div class="skel-line w60"></div></div></div>
        <div class="skel-row received"><div class="skel-av"></div><div class="skel-lines"><div class="skel-line w55"></div></div></div>
      </div>
      <div class="room-welcome" id="room-welcome" style="display:none">
        <p class="welcome-title" id="welcome-room-name">ROOM</p>
        <p class="welcome-sub">No trace. No identity. Only people with your code can enter — they leave no digital footprint.</p>
        <div class="enc-note">👻 No trace. No identity. Digital ghosts only.</div>
      </div>
    </div>
    <button id="scroll-fab" class="scroll-fab" aria-label="Scroll to bottom">
      <svg viewBox="0 0 20 20" fill="none" width="16" height="16">
        <path d="M5 8l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span id="scroll-fab-badge" class="scroll-fab-badge"></span>
    </button>

    <div id="typing-indicator" class="typing-indicator" style="display:none">
      <span></span><span></span><span></span>
      <div class="typing-text" id="typing-text"></div>
    </div>

    <div id="reply-bar" class="reply-bar" style="display:none">
      <div class="reply-bar-line"></div>
      <div class="reply-bar-content">
        <div class="reply-bar-sender" id="reply-sender"></div>
        <div class="reply-bar-text"   id="reply-preview"></div>
      </div>
      <button class="reply-bar-close ripple-btn" aria-label="Cancel reply">
        <svg viewBox="0 0 20 20" fill="none" width="14" height="14">
          <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
        </svg>
      </button>
    </div>

    <div id="solo-hint" class="solo-hint" style="display:none">
      <svg viewBox="0 0 20 20" fill="none" width="13" height="13" style="flex-shrink:0">
        <circle cx="10" cy="7" r="3" stroke="currentColor" stroke-width="1.4"/>
        <path d="M4 17c0-3 2.7-5 6-5s6 2 6 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
      </svg>
      <span>Share the room code <strong id="solo-code"></strong> to start chatting</span>
    </div>

    <div class="input-area" id="input-area">
      <button class="icon-btn attach-btn ripple-btn" title="Attach file">
        <svg viewBox="0 0 20 20" fill="none" width="19" height="19">
          <path d="M16.5 10.5l-6.3 6.3a4.24 4.24 0 01-6-6l7-7a2.83 2.83 0 014 4l-7.1 7.1a1.41 1.41 0 01-2-2l6.3-6.3"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </button>
      <div class="msg-input-wrap">
        <textarea id="msg-input" placeholder="Message (encrypted)…"
                  rows="1" maxlength="4000"></textarea>
      </div>
      <button class="send-btn" id="send-btn" aria-label="Send message">
        <svg viewBox="0 0 20 20" fill="none" width="18" height="18">
          <path d="M17.5 2.5L9 11M17.5 2.5L12 17.5l-3-6.5-6.5-3L17.5 2.5Z"
                stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>

  </main>
</div>

<div id="settings-modal" class="modal-overlay" style="display:none">
  <div class="modal">
    <div class="modal-header">
      <h3>SETTINGS</h3>
      <button class="icon-btn">
        <svg viewBox="0 0 20 20" fill="none" width="16" height="16">
          <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
        </svg>
      </button>
    </div>
    <div class="modal-body">
      <div class="setting-item">
        <label>SOUND ALERTS</label>
        <div class="toggle-wrap">
          <input type="checkbox" id="sound-toggle" checked />
          <label for="sound-toggle" class="toggle"></label>
        </div>
      </div>
      <div class="setting-item">
        <label>ANIMATIONS</label>
        <div class="toggle-wrap">
          <input type="checkbox" id="anim-toggle" checked />
          <label for="anim-toggle" class="toggle"></label>
        </div>
      </div>
      <div class="setting-divider"></div>
      <div class="setting-item">
        <label>APP VERSION</label>
        <span class="setting-value">MIUT v2.0</span>
      </div>
      <div class="setting-item">
        <label>ENCRYPTION</label>
        <span class="setting-value teal">AES-256-GCM ✓</span>
      </div>
      <div class="setting-item">
        <label>SIGNING</label>
        <span class="setting-value teal">ECDSA P-256 ✓</span>
      </div>
      <div class="setting-item">
        <label>KEY EPOCH</label>
        <span class="setting-value teal" id="epoch-display">0</span>
      </div>

      <div id="approval-setting-row" class="setting-item" style="display:none">
        <div class="setting-label-group">
          <label>APPROVAL GATE</label>
          <span class="setting-sublabel">New members must be approved by admin</span>
        </div>
        <div class="toggle-wrap">
          <input type="checkbox" id="approval-toggle" />
          <label for="approval-toggle" class="toggle"></label>
        </div>
      </div>

      <div id="rotate-key-row" class="setting-item" style="display:none">
        <div class="setting-label-group">
          <label>ROTATE KEY</label>
          <span class="setting-sublabel">New messages will use a freshly derived key</span>
        </div>
        <button class="btn-rotate-key ripple-btn">
          <svg viewBox="0 0 20 20" fill="none" width="13" height="13">
            <path d="M4 4v4h4M16 16v-4h-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M4.3 12A7 7 0 0015.7 8M15.7 8A7 7 0 004.3 12" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
          </svg>
          ROTATE
        </button>
      </div>

      <div id="ttl-row" class="setting-item" style="display:none">
        <div class="setting-label-group">
          <label>MESSAGE EXPIRY</label>
          <span class="setting-sublabel">Auto-vanish after: <strong id="ttl-display">Off</strong></span>
        </div>
        <select id="ttl-select" class="ttl-select">
          <option value="0">Off</option>
          <option value="30000">30s</option>
          <option value="300000">5 min</option>
          <option value="3600000">1 hour</option>
          <option value="86400000">24 hours</option>
          <option value="604800000">7 days</option>
        </select>
      </div>

      <button class="btn-join ripple-btn small" style="margin-top:16px">
        SAVE SETTINGS
      </button>

      <div class="setting-item" id="install-app-row" style="display:none; margin-top:8px">
        <div class="setting-label-group">
          <label>INSTALL APP</label>
          <span class="setting-sublabel">Add Miut Chat to your home screen</span>
        </div>
        <button class="btn-rotate-key ripple-btn">
          <svg viewBox="0 0 20 20" fill="none" width="13" height="13">
            <path d="M10 3v10M6 9l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M3 15h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
          </svg>
          INSTALL
        </button>
      </div>
    </div>
  </div>
</div>

<div id="media-viewer" class="media-viewer" style="display:none">
  <button class="mv-close">
    <svg viewBox="0 0 20 20" fill="none" width="18" height="18">
      <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </svg>
  </button>
  <img id="mv-img" src="" alt="" style="display:none" />
  <video id="mv-video" controls style="display:none"></video>
</div>

<div id="sidebar-overlay"></div>

<div id="toast-container" class="toast-container"></div>

<input type="file" id="file-input"
       accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip"
       style="display:none" /><script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-check-compat.js"></script>
<script src="db-manager.min.js" defer></script>
<script src="app.min.js" defer></script>
<script src="sw-bridge.min.js" defer></script>
<script src="placeholder-rotator.min.js" defer></script>
</body>
</html>
