diff --git a/index.html b/index.html
index fa8bab5..2cb69c2 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,6 @@
 <style>
 :root {
   --line-green: #06c755;
-  --line-green-dark: #05ad4a;
   --bg-gradient: linear-gradient(160deg, #d8f9e8 0%, #e6f0ff 55%, #f3ecff 100%);
   --surface: #ffffff;
   --surface-soft: #f6f8fb;
@@ -15,11 +14,10 @@
   --text-muted: #6b7280;
   --border: #e5e7eb;
   --shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
+  --msg-font-size: 18px;
 }
 
-* {
-  box-sizing: border-box;
-}
+* { box-sizing: border-box; }
 
 body {
   margin: 0;
@@ -34,6 +32,7 @@
 }
 
 #app {
+  position: relative;
   width: min(100%, 420px);
   height: min(92vh, 760px);
   background: var(--surface);
@@ -42,47 +41,129 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.8);
 }
 
 header {
   background: linear-gradient(120deg, var(--line-green) 0%, #2cd56e 100%);
   color: white;
-  padding: 20px;
-  text-align: center;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  font-size: 1.05rem;
+  padding: 14px 12px;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 8px;
+  align-items: center;
 }
 
-#auth {
-  padding: 28px 22px;
-  text-align: center;
+#menuBtn, #themeToggle {
+  border-radius: 10px;
+  padding: 9px 10px;
+}
+
+#menuBtn { background: rgba(255,255,255,.24); }
+#themeToggle { background: #111827; }
+
+#sidebar {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: min(88%, 340px);
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  transform: translateX(-100%);
+  transition: transform 0.2s ease;
+  z-index: 9;
   display: grid;
-  gap: 12px;
-  background: linear-gradient(180deg, #ffffff 0%, #fbfffd 100%);
+  grid-template-rows: auto auto 1fr auto;
+  gap: 10px;
+  padding: 14px;
 }
 
-#auth h2 {
-  margin: 0 0 2px;
-  font-size: 1.1rem;
+#sidebar.open { transform: translateX(0); }
+
+#backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15,23,42,.35);
+  z-index: 8;
+  display: none;
+}
+
+#backdrop.show { display: block; }
+
+#friendList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  overflow: auto;
+  display: grid;
+  gap: 8px;
 }
 
-#auth p {
-  margin: 0 0 12px;
-  color: var(--text-muted);
-  font-size: 0.92rem;
+.friend-item {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 8px;
+  background: var(--surface-soft);
 }
 
-#chat {
+.friend-item.active {
+  border-color: var(--line-green);
+  box-shadow: 0 0 0 2px rgba(6,199,85,0.2);
+}
+
+.friend-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.friend-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 4px;
+  max-width: 120px;
+}
+
+.friend-row button {
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-size: 0.75rem;
+  background: #ef4444;
+}
+
+#auth {
+  padding: 24px 20px;
+  text-align: center;
+  display: grid;
+  gap: 10px;
+}
+
+#statusBar {
+  min-height: 36px;
+  padding: 9px 12px;
+  font-size: 0.85rem;
+  border-radius: 10px;
+  background: #eff6ff;
+  color: #1d4ed8;
   display: none;
-  flex: 1;
-  flex-direction: column;
-  background: linear-gradient(180deg, #f8fcff 0%, #f2fbf6 100%);
+  text-align: left;
+}
+#statusBar.error { background: #fef2f2; color: #b91c1c; }
+#statusBar.success { background: #ecfdf5; color: #047857; }
+
+#chat { display: none; flex: 1; flex-direction: column; background: linear-gradient(180deg, #f8fcff 0%, #f2fbf6 100%); min-height: 0; overflow: hidden; }
+
+#toolbar {
+  display: flex;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  background: #fff;
 }
 
 #messages {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 16px 14px;
   display: flex;
@@ -97,139 +178,202 @@
   max-width: 78%;
   word-break: break-word;
   line-height: 1.4;
+  font-size: var(--msg-font-size);
   box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
 }
 
-.me {
-  background: var(--line-green);
-  color: white;
-  margin-left: auto;
-  border-bottom-right-radius: 4px;
-}
+.me { background: var(--line-green); color: white; margin-left: auto; border-bottom-right-radius: 4px; }
+.other { background: #fff; color: var(--text-primary); margin-right: auto; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
 
-.other {
-  background: #ffffff;
-  color: var(--text-primary);
-  margin-right: auto;
-  border: 1px solid var(--border);
-  border-bottom-left-radius: 4px;
-}
+.message-meta { display: block; margin-top: 6px; font-size: 0.72rem; opacity: 0.75; }
+.chatimg { width: 100%; max-width: 190px; border-radius: 10px; margin-top: 8px; display: block; }
 
-.chatimg {
-  width: 100%;
-  max-width: 190px;
-  border-radius: 10px;
+.msg-actions {
   margin-top: 8px;
-  display: block;
+  display: flex;
+  gap: 6px;
 }
 
-#inputArea {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 8px;
-  padding: 12px;
-  border-top: 1px solid var(--border);
-  background: var(--surface);
+.msg-actions button {
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-size: 0.7rem;
 }
 
-#imageInput {
-  grid-column: 1 / -1;
+.msg-edit { background: #0ea5e9; }
+.msg-delete { background: #ef4444; }
+
+#bottomBar {
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  background: var(--surface);
+  border-top: 1px solid var(--border);
 }
 
-#actions {
+
+#inputArea { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; background: var(--surface); }
+#imageInput,
+#profileImageInput,
+#backgroundImageInput { grid-column: 1 / -1; }
+#actions { display: flex; gap: 8px; }
+
+#stampBar {
   display: flex;
-  gap: 8px;
+  align-items: center;
+  gap: 6px;
+  overflow-x: auto;
+  padding: 8px 12px 4px;
+  border-top: 1px dashed var(--border);
+  min-height: 46px;
 }
 
-input,
-button {
-  font: inherit;
-  padding: 10px 12px;
+.stamp-btn {
+  min-width: 44px;
+  height: 40px;
   border-radius: 12px;
-  border: 1px solid var(--border);
+  padding: 0;
+  font-size: 1.35rem;
+  background: #e5e7eb;
+  color: #111827;
 }
 
-input {
-  width: 100%;
-  background: var(--surface-soft);
+.msg.stamp-only {
+  font-size: 2.4rem;
+  line-height: 1.05;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 4px 8px;
 }
 
-input:focus {
-  outline: 2px solid rgba(6, 199, 85, 0.25);
-  border-color: var(--line-green);
+.msg.stamp-only .message-meta {
+  font-size: 0.65rem;
+  opacity: 0.75;
 }
 
-button {
-  background: var(--line-green);
-  color: white;
-  border: none;
-  cursor: pointer;
-  font-weight: 600;
-  transition: transform 0.12s ease, opacity 0.12s ease, background 0.2s ease;
-}
 
-button:hover {
-  transform: translateY(-1px);
-  opacity: 0.96;
+.friend-badges {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
 }
 
-button:active {
-  transform: translateY(0);
+.friend-badges small {
+  font-size: 0.65rem;
+  background: #e0f2fe;
+  color: #0369a1;
+  border-radius: 999px;
+  padding: 1px 6px;
 }
 
-#googleLogin {
-  background: #ffffff;
-  color: #111827;
-  border: 1px solid #d1d5db;
+input, button { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); }
+input { width: 100%; background: var(--surface-soft); }
+button { background: var(--line-green); color: white; border: none; cursor: pointer; font-weight: 600; }
+#googleLogin { background: #fff; color: #111827; border: 1px solid #d1d5db; }
+#logout { margin: 0 12px 12px; background: #ef4444; }
+#aiBtn { background: #6366f1; }
+#recordBtn { background: #ef4444; }
+
+#profileAvatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid rgba(255,255,255,.5);
+  background: rgba(255,255,255,.2);
 }
 
-#logout {
-  margin: 0 12px 12px;
-  background: #ef4444;
+#messages.custom-bg {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-#aiBtn {
-  background: #6366f1;
+body.dark {
+  --bg-gradient: linear-gradient(160deg, #0f172a 0%, #111827 60%, #1f2937 100%);
+  --surface: #111827;
+  --surface-soft: #1f2937;
+  --text-primary: #f9fafb;
+  --text-muted: #9ca3af;
+  --border: #374151;
 }
+body.dark #toolbar, body.dark #inputArea, body.dark #googleLogin, body.dark #bottomBar, body.dark #stampBar { background: #1f2937; color: #f9fafb; }
+body.dark .other { background: #1f2937; color: #f9fafb; }
 </style>
 </head>
 <body>
 <div id="app">
-<header>LINE Ultimate</header>
-
-<div id="auth">
-  <h2>ログインしてチャットを始めましょう</h2>
-  <p>Google またはメールアドレスでサインインできます。</p>
-  <button id="googleLogin">Googleログイン</button>
-  <input id="email" placeholder="email" autocomplete="email">
-  <input id="password" type="password" placeholder="password" autocomplete="current-password">
-  <button id="register">新規登録</button>
-  <button id="login">ログイン</button>
-</div>
+  <div id="backdrop"></div>
+
+  <aside id="sidebar">
+    <h3 style="margin:4px 0">フレンド</h3>
+    <div>
+      <input id="friendEmail" placeholder="friend@example.com">
+      <input id="friendName" placeholder="フレンド表示名（任意）" style="margin-top:8px">
+      <button id="addFriend" style="margin-top:8px;width:100%">フレンド追加</button>
+    </div>
+    <input id="friendSearchInput" placeholder="フレンド検索" style="margin-top:8px">
+    <ul id="friendList"></ul>
+    <div>
+      <label for="profileImageInput">プロフィール画像（GIF可）</label>
+      <input id="profileImageInput" type="file" accept="image/*,.gif">
+      <label for="backgroundImageInput" style="margin-top:8px;display:block;">背景画像（GIF可）</label>
+      <input id="backgroundImageInput" type="file" accept="image/*,.gif">
+    </div>
+    <div>
+      <label for="fontSizeSlider">文字サイズスライドバー</label>
+      <input id="fontSizeSlider" type="range" min="14" max="24" value="18">
+    </div>
+  </aside>
+
+  <header>
+    <button id="menuBtn">☰</button>
+    <strong style="text-align:center;letter-spacing:.02em">LINE Ultimate</strong>
+    <div style="display:flex; gap:8px; justify-self:end; align-items:center;">
+      <img id="profileAvatar" alt="avatar">
+      <button id="themeToggle">テーマ</button>
+    </div>
+  </header>
+
+  <div id="auth">
+    <h2 style="margin:0">ログインしてチャットを始めましょう</h2>
+    <p style="margin:0;color:var(--text-muted)">Google またはメールアドレスでサインインできます。</p>
+    <div id="statusBar"></div>
+    <button id="googleLogin">Googleログイン</button>
+    <input id="email" placeholder="email" autocomplete="email">
+    <input id="password" type="password" placeholder="password" autocomplete="current-password">
+    <input id="displayName" placeholder="表示名（任意）" autocomplete="nickname">
+    <button id="register">新規登録</button>
+    <button id="login">ログイン</button>
+  </div>
 
-<div id="chat">
-  <div id="messages"></div>
-  <div id="inputArea">
-    <input id="msg" placeholder="message">
-    <div id="actions">
-      <button id="send">送信</button>
-      <button id="aiBtn">AI</button>
+  <div id="chat">
+    <div id="toolbar">
+      <input id="searchInput" placeholder="メッセージ検索...">
+      <small id="chatMode" style="align-self:center;white-space:nowrap">全体</small>
+    </div>
+    <div id="messages"></div>
+    <div id="stampBar"></div>
+    <div id="bottomBar">
+      <div id="inputArea">
+        <input id="msg" placeholder="message">
+        <div id="actions">
+          <button id="send">送信</button>
+          <button id="aiBtn">AI</button>
+          <button id="recordBtn">🎤録音</button>
+        </div>
+        <input type="file" id="imageInput" accept="image/*">
+      </div>
+      <button id="logout">ログアウト</button>
     </div>
-    <input type="file" id="imageInput" accept="image/*">
   </div>
-  <button id="logout">ログアウト</button>
-</div>
 </div>
 
 <script type="module">
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
-import { getAuth, GoogleAuthProvider, signInWithPopup,
-createUserWithEmailAndPassword, signInWithEmailAndPassword,
-onAuthStateChanged, signOut }
-from "https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js";
-import { getFirestore, collection, addDoc, onSnapshot,
-query, orderBy, serverTimestamp }
-from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";
+import { getAuth, GoogleAuthProvider, signInWithPopup, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, signOut, updateProfile } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js";
+import { getFirestore, collection, addDoc, onSnapshot, query, orderBy, serverTimestamp, doc, setDoc, deleteDoc, updateDoc, arrayUnion } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";
 
 const firebaseConfig = {
   apiKey: "AIzaSyDNUzhTrnAAUJye82vNZEy0Sgnj7e8IR9E",
@@ -240,122 +384,598 @@ <h2>ログインしてチャットを始めましょう</h2>
   appId: "1:35972275719:web:383fd1ac8a47ceca96d4a2"
 };
 
-const GEMMA_KEY = "AIzaSyDY0Jcd-72QPZlfOJAtUCYxeRrjHBvJRtQ";
-
 const app = initializeApp(firebaseConfig);
 const auth = getAuth(app);
 const db = getFirestore(app);
-
 const googleProvider = new GoogleAuthProvider();
 
-const authDiv = document.getElementById("auth");
-const chatDiv = document.getElementById("chat");
-const messagesDiv = document.getElementById("messages");
-const msgInput = document.getElementById("msg");
-const imageInput = document.getElementById("imageInput");
-
-/* ログイン */
-document.getElementById("googleLogin").onclick =
-()=> signInWithPopup(auth,googleProvider);
-
-document.getElementById("register").onclick = async()=>{
-  try{
-    await createUserWithEmailAndPassword(auth,
-      email.value,password.value);
-  }catch(e){alert(e.message);}
+const ui = {
+  authDiv: document.getElementById("auth"),
+  chatDiv: document.getElementById("chat"),
+  messagesDiv: document.getElementById("messages"),
+  statusBar: document.getElementById("statusBar"),
+  emailInput: document.getElementById("email"),
+  passwordInput: document.getElementById("password"),
+  displayNameInput: document.getElementById("displayName"),
+  msgInput: document.getElementById("msg"),
+  imageInput: document.getElementById("imageInput"),
+  profileImageInput: document.getElementById("profileImageInput"),
+  backgroundImageInput: document.getElementById("backgroundImageInput"),
+  profileAvatar: document.getElementById("profileAvatar"),
+  searchInput: document.getElementById("searchInput"),
+  chatMode: document.getElementById("chatMode"),
+  sidebar: document.getElementById("sidebar"),
+  backdrop: document.getElementById("backdrop"),
+  friendEmail: document.getElementById("friendEmail"),
+  friendName: document.getElementById("friendName"),
+  friendSearchInput: document.getElementById("friendSearchInput"),
+  friendList: document.getElementById("friendList"),
+  stampBar: document.getElementById("stampBar"),
+  fontSizeSlider: document.getElementById("fontSizeSlider")
+};
+
+let allMessages = [];
+let friends = [];
+let selectedFriendEmail = "";
+let editingMessageId = null;
+let mediaRecorder = null;
+let recordingStream = null;
+let userSettings = { profileImage: "", backgroundImage: "" };
+
+const authErrorMessages = {
+  "auth/email-already-in-use": "このメールアドレスはすでに登録されています。ログインをお試しください。",
+  "auth/invalid-email": "メールアドレスの形式が正しくありません。",
+  "auth/missing-password": "パスワードを入力してください。",
+  "auth/weak-password": "パスワードは6文字以上で入力してください。",
+  "auth/invalid-credential": "メールアドレスまたはパスワードが正しくありません。",
+  "auth/popup-closed-by-user": "Googleログインがキャンセルされました。"
 };
 
-document.getElementById("login").onclick = async()=>{
-  try{
-    await signInWithEmailAndPassword(auth,
-      email.value,password.value);
-  }catch(e){alert(e.message);}
+const friendDocId = (email) => encodeURIComponent(email.trim().toLowerCase());
+const safeText = (value="") => value.replace(/[<>]/g, "");
+const STAMPS = ["😀","😂","🥺","😍","😭","👍","🙏","🔥","🎉","💯","😎","🤔","🥳","🙌","🌸","❤️","💚","💙","🫶","😇","😴","🥲","😡","👏","✨","🍀","🍣","🍜","☕","🐱","🐶","🎮","📚","🎵","🚀","⚽","💡","🧋","🍓","🌈"];
+
+const toMillis = (value) => {
+  const date = value?.toDate ? value.toDate() : null;
+  return date ? date.getTime() : 0;
 };
 
-document.getElementById("logout").onclick =
-()=> signOut(auth);
+const normalizeEmail = (email = "") => email.trim().toLowerCase();
+const buildConversationId = (a, b) => [normalizeEmail(a), normalizeEmail(b)].sort().join("__");
+
 
-/* 認証監視 */
-onAuthStateChanged(auth,user=>{
-  if(!user){
-    authDiv.style.display="grid";
-    chatDiv.style.display="none";
+const setStatus = (message, type="info") => {
+  if (!message) {
+    ui.statusBar.style.display = "none";
+    ui.statusBar.textContent = "";
+    ui.statusBar.className = "";
     return;
   }
+  ui.statusBar.style.display = "block";
+  ui.statusBar.textContent = message;
+  ui.statusBar.className = type;
+};
+
+const showAuthError = (error) => {
+  const msg = authErrorMessages[error.code] || `認証エラーが発生しました (${error.code || "unknown"})`;
+  setStatus(msg, "error");
+};
+
+
+const fileToDataUrl = (file) => new Promise((resolve) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(reader.result);
+  reader.readAsDataURL(file);
+});
+
+const playPopSound = () => {
+  const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+  if (!AudioContextClass) return;
+  const ctx = new AudioContextClass();
+  const osc = ctx.createOscillator();
+  const gain = ctx.createGain();
+  osc.type = "triangle";
+  osc.frequency.setValueAtTime(720, ctx.currentTime);
+  osc.frequency.exponentialRampToValueAtTime(420, ctx.currentTime + 0.08);
+  gain.gain.setValueAtTime(0.001, ctx.currentTime);
+  gain.gain.exponentialRampToValueAtTime(0.12, ctx.currentTime + 0.01);
+  gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.12);
+  osc.connect(gain);
+  gain.connect(ctx.destination);
+  osc.start();
+  osc.stop(ctx.currentTime + 0.12);
+  setTimeout(() => ctx.close(), 200);
+};
+
+const canSendToCurrentFriend = () => {
+  const currentFriend = friends.find((friend) => friend.email === selectedFriendEmail);
+  if (selectedFriendEmail && currentFriend?.blocked) {
+    setStatus("ブロック中のフレンドには送信できません。", "error");
+    return false;
+  }
+  return true;
+};
+
+const buildMessagePayload = ({ text = "", image = null, audio = null }) => ({
+  text,
+  image,
+  audio,
+  name: auth.currentUser.displayName || (auth.currentUser.email || "匿名"),
+  senderEmail: auth.currentUser.email || "",
+  targetEmail: selectedFriendEmail || null,
+  conversationId: selectedFriendEmail ? buildConversationId(auth.currentUser.email || "", selectedFriendEmail) : null,
+  uid: auth.currentUser.uid,
+  createdAt: serverTimestamp(),
+  readByIds: [auth.currentUser.uid]
+});
+
+const postMessage = async (payload) => {
+  await addDoc(collection(db, "messages"), buildMessagePayload(payload));
+  if (selectedFriendEmail) {
+    await setDoc(doc(db, "users", auth.currentUser.uid, "friends", friendDocId(selectedFriendEmail)), {
+      lastChattedAt: serverTimestamp()
+    }, { merge: true });
+  }
+  playPopSound();
+};
 
-  authDiv.style.display="none";
-  chatDiv.style.display="flex";
-
-  const q=query(collection(db,"messages"),
-    orderBy("createdAt"));
-
-  onSnapshot(q,snap=>{
-    messagesDiv.innerHTML="";
-    snap.forEach(doc=>{
-      const data=doc.data();
-      const div=document.createElement("div");
-      div.className="msg "+(data.uid===user.uid?"me":"other");
-      div.innerHTML=data.text||"";
-
-      if(data.image){
-        const img=document.createElement("img");
-        img.src=data.image;
-        img.className="chatimg";
-        div.appendChild(img);
+const applyUserSettings = () => {
+  if (userSettings.profileImage) {
+    ui.profileAvatar.src = userSettings.profileImage;
+  } else {
+    ui.profileAvatar.removeAttribute("src");
+  }
+
+  if (userSettings.backgroundImage) {
+    ui.messagesDiv.style.backgroundImage = `url(${userSettings.backgroundImage})`;
+    ui.messagesDiv.classList.add("custom-bg");
+  } else {
+    ui.messagesDiv.style.backgroundImage = "";
+    ui.messagesDiv.classList.remove("custom-bg");
+  }
+};
+
+const formatTime = (value) => {
+  const date = value?.toDate ? value.toDate() : null;
+  if (!date) return "送信中...";
+  return date.toLocaleTimeString("ja-JP", { hour: "2-digit", minute: "2-digit" });
+};
+
+const openSidebar = () => {
+  ui.sidebar.classList.add("open");
+  ui.backdrop.classList.add("show");
+};
+
+const closeSidebar = () => {
+  ui.sidebar.classList.remove("open");
+  ui.backdrop.classList.remove("show");
+};
+
+const renderStampBar = () => {
+  ui.stampBar.innerHTML = "";
+  STAMPS.forEach((stamp) => {
+    const btn = document.createElement("button");
+    btn.className = "stamp-btn";
+    btn.textContent = stamp;
+    btn.onclick = async () => {
+      if (!auth.currentUser) {
+        setStatus("スタンプ送信にはログインが必要です。", "error");
+        return;
       }
+      if (!canSendToCurrentFriend()) return;
+      await postMessage({ text: stamp, image: null, audio: null });
+    };
+    ui.stampBar.appendChild(btn);
+  });
+};
+
+const markMessagesAsRead = async (messages, user) => {
+  for (const msg of messages) {
+    if (!msg?.id || msg.uid === user.uid) continue;
+    const ids = Array.isArray(msg.readByIds) ? msg.readByIds : [];
+    if (ids.includes(user.uid)) continue;
+    try {
+      await updateDoc(doc(db, "messages", msg.id), { readByIds: arrayUnion(user.uid) });
+    } catch (_error) {
+      // 読み取り専用時などは無視
+    }
+  }
+};
 
-      messagesDiv.appendChild(div);
+const renderFriends = () => {
+  ui.friendList.innerHTML = "";
+  const keyword = (ui.friendSearchInput?.value || "").trim().toLowerCase();
+
+  const globalItem = document.createElement("li");
+  globalItem.className = `friend-item ${selectedFriendEmail ? "" : "active"}`;
+  globalItem.innerHTML = `<div class="friend-row"><strong>全体チャット</strong><button style="background:#0ea5e9">選択</button></div>`;
+  globalItem.querySelector("button").onclick = () => {
+    selectedFriendEmail = "";
+    renderFriends();
+    renderMessages();
+  };
+  ui.friendList.appendChild(globalItem);
+
+  const sortedFriends = [...friends]
+    .sort((a, b) => Number(Boolean(b.favorite)) - Number(Boolean(a.favorite)) || (toMillis(b.lastChattedAt) - toMillis(a.lastChattedAt)));
+
+  sortedFriends
+    .filter((friend) => {
+      if (!keyword) return true;
+      return (friend.email || "").toLowerCase().includes(keyword) || (friend.name || "").toLowerCase().includes(keyword);
+    })
+    .forEach((friend) => {
+      const li = document.createElement("li");
+      li.className = `friend-item ${selectedFriendEmail === friend.email ? "active" : ""}`;
+      li.innerHTML = `<div class="friend-row"><div><strong>${safeText(friend.name || "Friend")}</strong><br><small>${safeText(friend.email)}</small><div class="friend-badges">${friend.favorite ? "<small>お気に入り</small>" : ""}${friend.blocked ? "<small>ブロック中</small>" : ""}</div></div><div class="friend-actions"><button class="select">選択</button><button class="favorite">★</button><button class="rename">名前</button><button class="block">🚫</button><button class="delete">削除</button></div></div>`;
+      li.querySelector(".select").style.background = "#0ea5e9";
+      li.querySelector(".select").onclick = () => {
+        selectedFriendEmail = normalizeEmail(friend.email);
+        renderFriends();
+        renderMessages();
+        closeSidebar();
+      };
+      li.querySelector(".favorite").style.background = friend.favorite ? "#f59e0b" : "#64748b";
+      li.querySelector(".favorite").onclick = async () => {
+        if (!auth.currentUser) return;
+        await setDoc(doc(db, "users", auth.currentUser.uid, "friends", friendDocId(friend.email)), {
+          favorite: !friend.favorite,
+          updatedAt: serverTimestamp()
+        }, { merge: true });
+      };
+      li.querySelector(".rename").style.background = "#6366f1";
+      li.querySelector(".rename").onclick = async () => {
+        if (!auth.currentUser) return;
+        const nextName = prompt("フレンド表示名を入力してください", friend.name || "");
+        if (nextName === null) return;
+        await setDoc(doc(db, "users", auth.currentUser.uid, "friends", friendDocId(friend.email)), {
+          email: friend.email,
+          name: nextName.trim() || friend.email.split("@")[0],
+          updatedAt: serverTimestamp()
+        }, { merge: true });
+      };
+      li.querySelector(".block").style.background = friend.blocked ? "#991b1b" : "#475569";
+      li.querySelector(".block").onclick = async () => {
+        if (!auth.currentUser) return;
+        await setDoc(doc(db, "users", auth.currentUser.uid, "friends", friendDocId(friend.email)), {
+          blocked: !friend.blocked,
+          updatedAt: serverTimestamp()
+        }, { merge: true });
+      };
+      li.querySelector(".delete").onclick = async () => {
+        if (!auth.currentUser) return;
+        await deleteDoc(doc(db, "users", auth.currentUser.uid, "friends", friendDocId(friend.email)));
+      };
+      ui.friendList.appendChild(li);
     });
-    messagesDiv.scrollTop=messagesDiv.scrollHeight;
+};
+
+const filteredMessages = () => {
+  if (!auth.currentUser) return [];
+  const me = normalizeEmail(auth.currentUser.email || "");
+  const keyword = ui.searchInput.value.trim().toLowerCase();
+
+  return allMessages
+    .filter((msg) => {
+      const sender = normalizeEmail(msg.senderEmail || "");
+      const target = normalizeEmail(msg.targetEmail || "");
+      if (selectedFriendEmail) {
+        const friend = normalizeEmail(selectedFriendEmail);
+        const convId = buildConversationId(me, friend);
+        const inConv = msg.conversationId ? msg.conversationId === convId : ((sender === me && target === friend) || (sender === friend && target === me));
+        return inConv;
+      }
+      return !target;
+    })
+    .filter((msg) => !keyword || (msg.text || "").toLowerCase().includes(keyword));
+};
+
+const startEditMessage = (message) => {
+  if (!message || !message.id) return;
+  editingMessageId = message.id;
+  ui.msgInput.value = message.text || "";
+  document.getElementById("send").textContent = "更新";
+  ui.msgInput.focus();
+  setStatus("編集モード: テキストを修正して更新を押してください。", "info");
+};
+
+const cancelEditMode = () => {
+  editingMessageId = null;
+  document.getElementById("send").textContent = "送信";
+};
+
+const renderMessages = () => {
+  const user = auth.currentUser;
+  if (!user) return;
+
+  ui.messagesDiv.innerHTML = "";
+  if (selectedFriendEmail) {
+    const friend = friends.find((item) => normalizeEmail(item.email) === normalizeEmail(selectedFriendEmail));
+    ui.chatMode.textContent = `1:1 ${friend?.name || selectedFriendEmail}`;
+  } else {
+    ui.chatMode.textContent = "全体";
+  }
+
+  const visibleMessages = filteredMessages();
+  visibleMessages.forEach((data) => {
+    const div = document.createElement("div");
+    const isStampOnly = !!(data.text && STAMPS.includes((data.text || "").trim()) && !data.image && !data.audio);
+    div.className = "msg " + (data.uid === user.uid ? "me" : "other") + (isStampOnly ? " stamp-only" : "");
+    div.textContent = data.text || "";
+
+    if (data.image) {
+      const img = document.createElement("img");
+      img.src = data.image;
+      img.className = "chatimg";
+      div.appendChild(img);
+    }
+
+    if (data.audio) {
+      const audio = document.createElement("audio");
+      audio.src = data.audio;
+      audio.controls = true;
+      audio.style.marginTop = "8px";
+      audio.style.width = "100%";
+      div.appendChild(audio);
+    }
+
+    const meta = document.createElement("small");
+    meta.className = "message-meta";
+    const readIds = Array.isArray(data.readByIds) ? data.readByIds : [];
+    const readCount = Math.max(readIds.length - 1, 0);
+    meta.textContent = `${data.name || "匿名"}・${formatTime(data.createdAt)}${data.editedAt ? " (編集済み)" : ""}${data.uid === user.uid ? ` ・既読${readCount}` : ""}`;
+    div.appendChild(meta);
+
+    if (data.uid === user.uid && data.id) {
+      const actionWrap = document.createElement("div");
+      actionWrap.className = "msg-actions";
+
+      const editBtn = document.createElement("button");
+      editBtn.className = "msg-edit";
+      editBtn.textContent = "編集";
+      editBtn.onclick = () => startEditMessage(data);
+
+      const deleteBtn = document.createElement("button");
+      deleteBtn.className = "msg-delete";
+      deleteBtn.textContent = "削除";
+      deleteBtn.onclick = async () => {
+        if (!confirm("このメッセージを削除しますか？")) return;
+        await deleteDoc(doc(db, "messages", data.id));
+        if (editingMessageId === data.id) {
+          cancelEditMode();
+          ui.msgInput.value = "";
+        }
+      };
+
+      actionWrap.append(editBtn, deleteBtn);
+      div.appendChild(actionWrap);
+    }
+
+    ui.messagesDiv.appendChild(div);
   });
+
+  ui.messagesDiv.scrollTop = ui.messagesDiv.scrollHeight;
+  markMessagesAsRead(visibleMessages, user);
+};
+
+document.getElementById("menuBtn").onclick = openSidebar;
+ui.backdrop.onclick = closeSidebar;
+document.getElementById("themeToggle").onclick = () => document.body.classList.toggle("dark");
+renderStampBar();
+ui.friendSearchInput.oninput = renderFriends;
+
+ui.fontSizeSlider.oninput = (event) => {
+  document.documentElement.style.setProperty("--msg-font-size", `${event.target.value}px`);
+};
+
+document.getElementById("googleLogin").onclick = () => signInWithPopup(auth, googleProvider)
+  .then(() => setStatus("Googleでログインしました。", "success"))
+  .catch(showAuthError);
+
+document.getElementById("register").onclick = async () => {
+  try {
+    setStatus("");
+    const credential = await createUserWithEmailAndPassword(auth, ui.emailInput.value, ui.passwordInput.value);
+    if (ui.displayNameInput.value.trim()) {
+      await updateProfile(credential.user, { displayName: ui.displayNameInput.value.trim() });
+    }
+    setStatus("新規登録に成功しました。", "success");
+  } catch (error) {
+    showAuthError(error);
+  }
+};
+
+document.getElementById("login").onclick = async () => {
+  try {
+    setStatus("");
+    await signInWithEmailAndPassword(auth, ui.emailInput.value, ui.passwordInput.value);
+    setStatus("ログインに成功しました。", "success");
+  } catch (error) {
+    showAuthError(error);
+  }
+};
+
+document.getElementById("logout").onclick = () => signOut(auth);
+
+onAuthStateChanged(auth, (user) => {
+  if (!user) {
+    ui.authDiv.style.display = "grid";
+    ui.chatDiv.style.display = "none";
+    return;
+  }
+
+  ui.authDiv.style.display = "none";
+  ui.chatDiv.style.display = "flex";
+
+  onSnapshot(query(collection(db, "messages"), orderBy("createdAt")), (snap) => {
+    allMessages = [];
+    snap.forEach((d) => allMessages.push({ id: d.id, ...d.data() }));
+    renderMessages();
+  });
+
+  onSnapshot(collection(db, "users", user.uid, "friends"), (snap) => {
+    friends = [];
+    snap.forEach((d) => friends.push(d.data()));
+    renderFriends();
+    renderMessages();
+  });
+
+  onSnapshot(doc(db, "users", user.uid), (snap) => {
+    const data = snap.data() || {};
+    userSettings = {
+      profileImage: data.profileImage || "",
+      backgroundImage: data.backgroundImage || ""
+    };
+    applyUserSettings();
+  });
+});
+
+ui.searchInput.oninput = renderMessages;
+
+ui.profileImageInput.onchange = async () => {
+  if (!auth.currentUser || !ui.profileImageInput.files[0]) return;
+  const dataUrl = await fileToDataUrl(ui.profileImageInput.files[0]);
+  await setDoc(doc(db, "users", auth.currentUser.uid), { profileImage: dataUrl }, { merge: true });
+  setStatus("プロフィール画像を更新しました。", "success");
+  ui.profileImageInput.value = "";
+};
+
+ui.backgroundImageInput.onchange = async () => {
+  if (!auth.currentUser || !ui.backgroundImageInput.files[0]) return;
+  const dataUrl = await fileToDataUrl(ui.backgroundImageInput.files[0]);
+  await setDoc(doc(db, "users", auth.currentUser.uid), { backgroundImage: dataUrl }, { merge: true });
+  setStatus("背景画像を更新しました。", "success");
+  ui.backgroundImageInput.value = "";
+};
+
+ui.msgInput.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    document.getElementById("send").click();
+  }
+  if (event.key === "Escape" && editingMessageId) {
+    cancelEditMode();
+    ui.msgInput.value = "";
+    setStatus("編集モードを解除しました。", "info");
+  }
 });
 
-/* 送信 */
-document.getElementById("send").onclick=async()=>{
-  if(!auth.currentUser)return;
+document.getElementById("addFriend").onclick = async () => {
+  if (!auth.currentUser) return;
+  const email = normalizeEmail(ui.friendEmail.value);
+  if (!email || !email.includes("@")) {
+    setStatus("有効なメールアドレスでフレンド追加してください。", "error");
+    return;
+  }
+
+  await setDoc(doc(db, "users", auth.currentUser.uid, "friends", friendDocId(email)), {
+    email,
+    name: (ui.friendName.value || "").trim() || email.split("@")[0],
+    favorite: false,
+    blocked: false,
+    createdAt: serverTimestamp()
+  }, { merge: true });
+
+  ui.friendEmail.value = "";
+  ui.friendName.value = "";
+  setStatus("フレンドを追加しました。", "success");
+};
+
+
+document.getElementById("recordBtn").onclick = async () => {
+  if (!auth.currentUser) return;
+  if (!canSendToCurrentFriend()) return;
+
+  if (mediaRecorder && mediaRecorder.state === "recording") {
+    mediaRecorder.stop();
+    document.getElementById("recordBtn").textContent = "🎤録音";
+    setStatus("録音を停止して送信中です...", "info");
+    return;
+  }
+
+  try {
+    recordingStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    mediaRecorder = new MediaRecorder(recordingStream);
+    const chunks = [];
+
+    mediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) chunks.push(event.data);
+    };
 
-  let imageBase64=null;
-  const file=imageInput.files[0];
+    mediaRecorder.onstop = async () => {
+      const blob = new Blob(chunks, { type: "audio/webm" });
+      const audioBase64 = await fileToDataUrl(new File([blob], "voice.webm", { type: "audio/webm" }));
 
-  if(file){
-    imageBase64=await new Promise(res=>{
-      const reader=new FileReader();
-      reader.onload=()=>res(reader.result);
-      reader.readAsDataURL(file);
+      await postMessage({ text: "🎤 音声メッセージ", image: null, audio: audioBase64 });
+
+      if (recordingStream) {
+        recordingStream.getTracks().forEach((track) => track.stop());
+      }
+      setStatus("録音した音声を送信しました。", "success");
+    };
+
+    mediaRecorder.start();
+    document.getElementById("recordBtn").textContent = "■停止";
+    setStatus("録音中...もう一度押すと自動送信します。", "info");
+  } catch (error) {
+    setStatus("マイクを利用できませんでした。ブラウザ権限を確認してください。", "error");
+  }
+};
+
+document.getElementById("send").onclick = async () => {
+  if (!auth.currentUser) return;
+  if (!canSendToCurrentFriend()) return;
+  const text = ui.msgInput.value.trim();
+
+  if (editingMessageId) {
+    if (!text) {
+      setStatus("編集メッセージは空にできません。", "error");
+      return;
+    }
+    await updateDoc(doc(db, "messages", editingMessageId), {
+      text,
+      editedAt: serverTimestamp()
     });
+    cancelEditMode();
+    ui.msgInput.value = "";
+    ui.imageInput.value = "";
+    setStatus("メッセージを更新しました。", "success");
+    return;
   }
 
-  await addDoc(collection(db,"messages"),{
-    text:msgInput.value,
-    image:imageBase64,
-    uid:auth.currentUser.uid,
-    createdAt:serverTimestamp()
-  });
+  if (!text && !ui.imageInput.files[0]) return;
+
+  let imageBase64 = null;
+  const file = ui.imageInput.files[0];
+
+  if (file) {
+    imageBase64 = await fileToDataUrl(file);
+  }
+
+  await postMessage({ text, image: imageBase64, audio: null });
 
-  msgInput.value="";
-  imageInput.value="";
+  ui.msgInput.value = "";
+  ui.imageInput.value = "";
 };
 
-/* AI */
-document.getElementById("aiBtn").onclick=async()=>{
-  const text=msgInput.value;
-  if(!text)return;
-
-  const res=await fetch(
-  "https://api.groq.com/openai/v1/chat/completions",{
-    method:"POST",
-    headers:{
-      "Content-Type":"application/json",
-      "Authorization":"org_01kjpzdja9fantcz1g0jmhare9"
+document.getElementById("aiBtn").onclick = async () => {
+  const text = ui.msgInput.value;
+  if (!text) return;
+
+  const res = await fetch("https://api.groq.com/openai/v1/chat/completions", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": "org_01kjpzdja9fantcz1g0jmhare9"
     },
-    body:JSON.stringify({
-      model:"gemma-7b-it",
-      messages:[{role:"user",content:text}]
+    body: JSON.stringify({
+      model: "gemma-7b-it",
+      messages: [{ role: "user", content: text }]
     })
   });
 
-  const data=await res.json();
-  msgInput.value=data.choices[0].message.content;
+  const data = await res.json();
+  ui.msgInput.value = data.choices?.[0]?.message?.content || "AI応答を取得できませんでした";
 };
 </script>
 </body>