diff --git a/selectors-test.html b/selectors-test.html
new file mode 100644
index 0000000..258cfa4
--- /dev/null
+++ b/selectors-test.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Outlook Relook — Selector Test Page</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; }
+    h1 { font-size: 18px; margin-bottom: 16px; }
+    h2 { font-size: 14px; margin: 20px 0 8px; color: #666; }
+    .mock { border: 1px dashed #ccc; padding: 8px 12px; margin: 4px 0; font-size: 13px; background: #fafafa; }
+    .result { margin: 4px 0; font-size: 12px; font-family: monospace; }
+    .pass { color: #2e7d32; }
+    .fail { color: #c62828; }
+    #results { margin-top: 24px; border-top: 1px solid #eee; padding-top: 16px; }
+    button { padding: 8px 16px; margin-top: 12px; cursor: pointer; }
+  </style>
+</head>
+<body>
+  <h1>Outlook Relook — Selector Test Page</h1>
+  <p>Mock OWA DOM fragments. Click "Run Tests" to verify selectors match.</p>
+
+  <!-- Mock OWA elements -->
+  <h2>Copilot</h2>
+  <div class="mock" aria-label="Copilot" role="button">Copilot Button</div>
+  <div class="mock" aria-label="Copilot chat" role="complementary">Copilot Pane</div>
+  <div class="mock" aria-label="Inline writing suggestion">Copilot Compose Suggestion</div>
+
+  <h2>Suggested Replies</h2>
+  <div class="mock" aria-label="Suggested replies" role="group">Sounds good! | Thanks! | Got it.</div>
+
+  <h2>Promotional Banners</h2>
+  <div class="mock" aria-label="Try the new Outlook" role="banner">Try the new Outlook</div>
+  <div class="mock" aria-label="Upgrade to premium">Upgrade to premium</div>
+  <div class="mock" aria-label="Get the Outlook app">Get the Outlook app</div>
+
+  <h2>Focused/Other Tabs</h2>
+  <div class="mock" role="tablist" aria-label="Focused Inbox tabs">
+    <div role="tab">Focused</div>
+    <div role="tab">Other</div>
+  </div>
+
+  <h2>Sidebar App Icons</h2>
+  <nav class="mock" aria-label="App navigation">
+    <div>Mail</div><div>Calendar</div><div>People</div><div>To Do</div>
+  </nav>
+
+  <h2>Layout Regions</h2>
+  <div class="mock" role="banner">Top Bar / Banner</div>
+  <div class="mock" role="toolbar" aria-label="Command actions">Command Bar</div>
+  <div class="mock" role="listbox" aria-label="Message list">
+    <div role="option" aria-label="Unread: Subject line">Message Row</div>
+    <div role="option">Read Message Row</div>
+  </div>
+  <div class="mock" role="navigation" aria-label="Folder pane">
+    <div role="tree" aria-label="Folder list">
+      <div role="treeitem">Inbox</div>
+      <div role="treeitem">Sent</div>
+    </div>
+  </div>
+
+  <h2>Behavior Targets</h2>
+  <div class="mock" role="search"><input placeholder="Search" aria-label="Search mail"></div>
+  <div class="mock" aria-label="Ribbon display options" aria-expanded="true" role="button">Ribbon Toggle</div>
+  <div class="mock" role="alert">Toast notification: Message sent</div>
+
+  <button id="runTests">Run Tests</button>
+  <div id="results"></div>
+
+  <script>
+    document.getElementById('runTests').addEventListener('click', function () {
+      var results = document.getElementById('results');
+      // Clear results using safe DOM methods
+      while (results.firstChild) {
+        results.removeChild(results.firstChild);
+      }
+
+      var heading = document.createElement('h2');
+      heading.textContent = 'Test Results';
+      results.appendChild(heading);
+
+      var tests = [
+        { name: 'copilot-button', selector: '[aria-label*="Copilot" i]', expectMatch: true },
+        { name: 'copilot-pane', selector: '[aria-label*="Copilot" i][role="complementary"]', expectMatch: true },
+        { name: 'copilot-compose', selector: '[aria-label*="writing suggestion" i]', expectMatch: true },
+        { name: 'suggested-replies', selector: '[aria-label*="Suggested repl" i]', expectMatch: true },
+        { name: 'promo-banners', selector: '[aria-label*="Try the new" i]', expectMatch: true },
+        { name: 'focused-tabs', selector: '[role="tablist"][aria-label*="Focused" i]', expectMatch: true },
+        { name: 'sidebar-apps', selector: 'nav[aria-label*="App" i]', expectMatch: true },
+        { name: 'top-bar', selector: '[role="banner"]', expectMatch: true },
+        { name: 'command-bar-alt', selector: '[role="toolbar"][aria-label*="action" i]', expectMatch: true },
+        { name: 'message-list', selector: '[role="listbox"][aria-label*="Message list" i]', expectMatch: true },
+        { name: 'folder-pane', selector: '[role="navigation"][aria-label*="Folder" i]', expectMatch: true },
+        { name: 'search', selector: '[role="search"]', expectMatch: true },
+        { name: 'ribbon-toggle', selector: '[aria-label*="Ribbon" i][aria-expanded]', expectMatch: true },
+        { name: 'toast', selector: '[role="alert"]', expectMatch: true },
+      ];
+
+      var pass = 0;
+      var fail = 0;
+
+      for (var i = 0; i < tests.length; i++) {
+        var test = tests[i];
+        var found = document.querySelectorAll(test.selector).length > 0;
+        var ok = found === test.expectMatch;
+        var div = document.createElement('div');
+        div.className = 'result ' + (ok ? 'pass' : 'fail');
+        div.textContent = (ok ? 'PASS' : 'FAIL') + ' ' + test.name + ': selector="' + test.selector + '" found=' + found + ' expected=' + test.expectMatch;
+        results.appendChild(div);
+        if (ok) pass++; else fail++;
+      }
+
+      var summary = document.createElement('div');
+      summary.className = 'result';
+      summary.textContent = pass + ' passed, ' + fail + ' failed out of ' + tests.length + ' tests';
+      summary.style.fontWeight = 'bold';
+      summary.style.marginTop = '12px';
+      results.appendChild(summary);
+    });
+  </script>
+</body>
+</html>
