diff --git a/resources/js/chat-room/profile-controls.js b/resources/js/chat-room/profile-controls.js
index 971eea4..fb43a6f 100644
--- a/resources/js/chat-room/profile-controls.js
+++ b/resources/js/chat-room/profile-controls.js
@@ -703,6 +703,11 @@ export function bindProfileControls() {
         if (event.target.closest("[data-settings-modal-overlay]")) {
             closeSettingsModal();
         }
+
+        // ── 头像选择弹窗：点击遮罩层关闭 ──
+        if (event.target.closest("[data-avatar-picker-overlay]") && !event.target.closest("[data-avatar-picker-panel]")) {
+            closeAvatarPicker();
+        }
     });
 
     document.addEventListener("change", (event) => {
diff --git a/resources/views/chat/partials/layout/toolbar.blade.php b/resources/views/chat/partials/layout/toolbar.blade.php
index c75cd25..233f597 100644
--- a/resources/views/chat/partials/layout/toolbar.blade.php
+++ b/resources/views/chat/partials/layout/toolbar.blade.php
@@ -44,10 +44,10 @@
 </div>
 
 {{-- ═══════════ 头像选择弹窗 ═══════════ --}}
-<div id="avatar-picker-modal"
+<div id="avatar-picker-modal" data-avatar-picker-overlay
     style="display:none; position:fixed; top:0; left:0; right:0; bottom:0;
     background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center;">
-    <div
+    <div data-avatar-picker-panel
         style="background:#fff; width:600px; max-height:80vh; border-radius:6px; overflow:hidden;
         box-shadow:0 4px 20px rgba(0,0,0,0.3); display:flex; flex-direction:column;">
         {{-- 标题栏 --}}