fix(aiui): header overlay panels get readable opacity — scoped, not blanket

Operator-reported: the model-picker and conversation-menu overlays are hard to
read over busy chat content at path-glass-card's shared rgba(0,0,0,0.65).
Scoped .header-overlay-panel (0.88) in ChatHeader.vue only — path-glass-card
itself is untouched, so BookDetail/ArticleDetail/TVSeriesDetail/WebsiteDetail/
ContentPanel/ChatWindow keep their existing glass. Unlayered scoped rule beats
the @layer components class without !important, and reaches the panels through
their Teleport to body.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

aiui/packages/app/src/components/chat/ChatHeader.vue

@@ -119,7 +119,7 @@
       <Transition name="picker">
         <div
           v-if="showModelPicker"
-          class="fixed z-[9999] path-glass-card p-3 space-y-3 animate-fade-up-fast shadow-2xl min-w-[220px]"
+          class="fixed z-[9999] path-glass-card header-overlay-panel p-3 space-y-3 animate-fade-up-fast shadow-2xl min-w-[220px]"
           :style="modelPickerDropdownStyle"
           @click.stop
         >
@@ -180,7 +180,7 @@
       <Transition name="picker">
         <div
           v-if="showMenu"
-          class="fixed z-[9999] path-glass-card p-2 animate-fade-up-fast shadow-2xl min-w-[160px]"
+          class="fixed z-[9999] path-glass-card header-overlay-panel p-2 animate-fade-up-fast shadow-2xl min-w-[160px]"
           :style="menuDropdownStyle"
           @click.stop
         >
@@ -398,6 +398,25 @@ async function handleImportFile(e: Event) {
 </script>
 
 <style scoped>
+/* The two overlays this header opens — the model picker and the conversation
+ * menu — float over live chat content, so the shared `path-glass-card`
+ * translucency (rgba(0,0,0,0.65)) leaves their text hard to read against a
+ * busy backdrop. Operator-reported 2026-08-04.
+ *
+ * Deliberately scoped to this component rather than changing `.path-glass-card`
+ * itself: that class is also used by BookDetail, ArticleDetail, TVSeriesDetail,
+ * WebsiteDetail, ContentPanel, ChatWindow and every ChatPage panel, none of
+ * which have this problem. Only these two get the extra opacity.
+ *
+ * Scoped styles reach these nodes even though they are inside <Teleport to="body">
+ * (Vue stamps the scope attribute on the element itself), and this rule is
+ * unlayered while `.path-glass-card` lives in `@layer components` — unlayered
+ * wins over layered regardless of specificity, so no !important is needed.
+ */
+.header-overlay-panel {
+  background: rgba(0, 0, 0, 0.88);
+}
+
 .picker-enter-active {
   transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }