diff --git a/AUDIT.md b/AUDIT.md
index da15f93f..2116756e 100644
--- a/AUDIT.md
+++ b/AUDIT.md
@@ -6,6 +6,8 @@
 
 **Quality gate (2026-08-12 — encryption lifecycle + desktop reliability + recovery journal):** lint ✅ · typecheck ✅ (tsgo) · i18n:check ✅ (**2904 keys × 19 locales**) · targeted unit tests ✅ (271 across the full affected storage suite post-merge: `protectedStoreMigration`, `encryptionMigrationJournal`, `secondaryPayloadStoreAdapter(s)`, `protectedWriteAdmission`, `idbStoreEncryption`, `dbService*`, `sceneRevisionService`, `aiInferenceCacheService`) · CI Quality Gate (Node 22 + 24) green on #337/#339 · codecov/patch ✅ (73.46% → target after adding secondary-adapter payload-shape coverage). #335 (fail-closed lifecycle), #336 (desktop AI/Python hardening for #332/#333), #337 (durable migration journal + secondary-store adapters), #339 (cross-tab write-admission fixing the migration TOCTOU race) all merged into `main`. PR #310 closed as superseded (`docs/PR-310-RECONCILIATION.md`). Production disable/passphrase-rotation wiring remains open Phase-4 work — [issue #338](https://github.com/qnbs/WorldScript-Studio/issues/338).
 
+- **`extract-zip@2.0.1` OSV ignore (accepted risk, 2026-08-12):** **GHSA-jmr9-qjv8-65gv** / CVE-2026-56876 (CVSS 8.6, unvalidated symlink path traversal when extracting an attacker-controlled zip) flags a transitive devDependency of `@puppeteer/browsers` (Playwright's browser-binary downloader). No fixed version exists (`extract-zip@2.0.1` is the final release), so `pnpm.overrides` cannot remediate it; documented as an `IgnoredVulns` entry in `src-tauri/osv-scanner.toml`, matching the file's existing pattern for unfixable transitive findings. Not exploitable here: only ever extracts Playwright/Chromium's own CDN-hosted zip releases, never a user- or attacker-supplied archive, and ships in no production bundle.
+
 **Quality gate (2026-06-17 — language expansion +6 locales):** lint ✅ · typecheck ✅ · i18n:check ✅ (**2716 keys × 17 locales** — fi/sv/hu/is/eu + fa RTL) · placeholder guard ✅ (17 bundles) · targeted unit tests ✅ (LanguageSelector 9 · I18nContext 59 · i18nPlaceholders 33). `LanguageSelector` exonym labels localized via `portal.language.names.*` (native endonym stays hardcoded by design). **Bulk translation completed** for all 10 Beta locales (glossary v2.0, ~44 anchor terms/locale; placeholder-masked, checkpointed): post-run coverage fi 91 % · sv 90 % · hu 91 % · is 92 % · eu 92 % · fa 93 % · ja 99 % · zh 100 % · pt 98 % · el 97 % (Beta MT; human native review tracked). Two bulk-script bugs fixed: (1) `glossaryTranslate` partial-match left ~1,300 strings partially English → now exact-match only; (2) `--all` mangled `help.json` rich HTML → `help.json` excluded from `--all` (`ALL_SKIP`) and kept English fallback for the 6 new langs (tag-dense markup isn't MT-safe; human-review task). New `docs/TRANSLATION-GUIDE.md` + `I18N-GLOSSARY.md` v2.0.
 
 **Quality gate (2026-06-16 — v1.23.0):** lint ✅ · typecheck ✅ · i18n:check ✅ (**2709 keys × 11 locales**) · placeholder guard ✅ · unit tests ✅ (5807+ / 485 files) · coverage thresholds L74/B60/F67/S72 ✅. Toolchain: Node 22/24, **pnpm 11**, Vite 8, TypeScript 7 (tsgo).
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d3e99d2..63ec7865 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -60,6 +60,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Migration verification no longer re-scans already-verified stores on resume**, and a batch that
   reports progress without advancing its durable cursor is now rejected instead of being able to
   replay the same records indefinitely. (#337)
+- **AI Writing Studio manuscript text was unreadable, with selection/caret position drifting from
+  the visible text.** `ContextPanel.tsx`'s real (input-handling) textarea sat invisibly over a
+  separate visible text-mirror layer; the shared `Textarea` primitive's unconditional
+  `backdrop-blur-md` blurred the mirror text underneath, the two layers resolved different concrete
+  font stacks for the same font setting (different glyph metrics → position drift), and neither
+  layer synced its scroll position with the other. `components/manuscript/ManuscriptEditor.tsx`
+  (the primary writing surface) used the same fragile pattern and carried the same blur/scroll-sync
+  defect. Fixed via a new `Textarea` `variant="overlay"` (no glass background/blur/reserved
+  padding/mic button) and a single shared `services/editorTypography.ts` font-stack resolver used
+  by both the real textarea and its mirror in both components, plus one-directional scroll sync
+  from each real textarea to its mirror. (#341)
+- **Overlay-variant textareas dropped RTL font resolution, custom-font selection, and dictation.**
+  `resolveEditorFontFamily` now also takes the active text direction and `settings.customFont?.name`
+  (previously every `editorFont: 'custom'` silently rendered as JetBrains Mono, and RTL sessions used
+  LTR font stacks); the new `DictationButton` component restores the microphone entry point that
+  `variant="overlay"` had unconditionally removed from both Writer Studio and the manuscript editor,
+  rendered as a sibling above the mirror instead of inside `Textarea` itself. Also fixes two related
+  scroll-sync gaps: the mirror now resets to the top on a section switch instead of showing a stale
+  offset, and re-syncs after debounced/deferred content growth instead of staying clamped to a
+  since-invalid scroll range. (#341, #344)
 
 ### Docs
 
diff --git a/components/manuscript/ManuscriptEditor.tsx b/components/manuscript/ManuscriptEditor.tsx
index ee1984d7..031c2a27 100644
--- a/components/manuscript/ManuscriptEditor.tsx
+++ b/components/manuscript/ManuscriptEditor.tsx
@@ -1,13 +1,15 @@
 import type { FC, ReactNode } from 'react';
-import React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
 import { useAppSelector } from '../../app/hooks';
 import { useManuscriptViewContext } from '../../contexts/ManuscriptViewContext';
 import { useLanguageToolCheck } from '../../hooks/useLanguageToolCheck';
 import { useTranslation } from '../../hooks/useTranslation';
 import { useVoiceDictation } from '../../hooks/useVoiceDictation';
+import { resolveEditorFontFamily } from '../../services/editorTypography';
 import type { LanguageToolMatch } from '../../services/languageToolService';
 import { InlineAnnotationLayer } from '../copilot/InlineAnnotationLayer';
 import { DebouncedInput } from '../ui/DebouncedInput';
+import { DictationButton } from '../ui/DictationButton';
 import { Icon } from '../ui/Icon';
 import { Textarea } from '../ui/Textarea';
 
@@ -53,14 +55,6 @@ const TYPOS_DE: Record<string, string> = {
   haken: 'Haken',
 };
 
-// QNBS-v3: concrete editor font stacks — single source mirrored from components/ui/Textarea fontMap.
-const EDITOR_FONT_STACKS: Record<string, string> = {
-  serif: 'Merriweather, serif',
-  'sans-serif': 'Inter, sans-serif',
-  monospace: 'JetBrains Mono, monospace',
-  custom: 'JetBrains Mono, monospace',
-};
-
 export const ManuscriptEditor: FC<{ isFocusMode: boolean }> = React.memo(({ isFocusMode }) => {
   const {
     t,
@@ -104,18 +98,14 @@ export const ManuscriptEditor: FC<{ isFocusMode: boolean }> = React.memo(({ isFo
   const deferredContent = useDeferredValue(activeSection?.content ?? '');
   const isHighlightPending = deferredContent !== (activeSection?.content ?? '');
 
-  // QNBS-v3: map the editorFont enum to a concrete CSS stack (mirrors components/ui/Textarea
-  // fontMap) — the raw enum value (e.g. 'custom') is not a valid font-family, and the highlight
-  // overlay must render the exact same stack as the textarea so glyphs stay aligned.
-  const ltrEditorStack = EDITOR_FONT_STACKS[settings.editorFont] ?? 'Inter, sans-serif';
-  // QNBS-v3: RTL prose needs Noto glyphs — generic serif/sans/mono lack reliable Arabic/Hebrew
-  // coverage; prefer Naskh (book face) for serif/custom, Noto Sans otherwise, Latin stack as tail.
-  const editorFontFamily =
-    dir === 'rtl'
-      ? settings.editorFont === 'sans-serif' || settings.editorFont === 'monospace'
-        ? `"Noto Sans Arabic", "Noto Sans Hebrew", ${ltrEditorStack}`
-        : `"Noto Naskh Arabic", "Noto Sans Hebrew", ${ltrEditorStack}`
-      : ltrEditorStack;
+  // QNBS-v3 (#341): shared with components/ui/Textarea.tsx and ContextPanel.tsx — the raw enum
+  // value (e.g. 'custom') is not a valid font-family, and the highlight overlay must render the
+  // exact same stack as the textarea so glyphs stay aligned.
+  const editorFontFamily = resolveEditorFontFamily(
+    settings.editorFont,
+    dir,
+    settings.customFont?.name,
+  );
   const editorStyles: React.CSSProperties = {
     fontFamily: editorFontFamily,
     fontSize: `${settings.fontSize}px`,
@@ -310,6 +300,31 @@ export const ManuscriptEditor: FC<{ isFocusMode: boolean }> = React.memo(({ isFo
     ltAvailable,
   ]);
 
+  // QNBS-v3 (#341): the real textarea and the visible highlight-overlay div below can scroll
+  // independently (overlay is pointer-events-none, so this is one-directional: textarea → overlay
+  // only). Declared before the early return below — hooks must run unconditionally.
+  const highlightRef = useRef<HTMLDivElement>(null);
+  const prevSectionIdRef = useRef(activeSection?.id);
+
+  // QNBS-v3 (#344): resets both layers to the top on a section switch (stale offset from the previous section); otherwise re-applies the textarea's current scrollTop once deferredContent catches up, since a scroll during the useDeferredValue lag window can clamp the overlay's scrollTop against its then-shorter content.
+  useEffect(() => {
+    const sectionChanged = prevSectionIdRef.current !== activeSection?.id;
+    prevSectionIdRef.current = activeSection?.id;
+    if (sectionChanged) {
+      if (editorRef.current) {
+        editorRef.current.scrollTop = 0;
+        editorRef.current.scrollLeft = 0;
+      }
+      if (highlightRef.current) {
+        highlightRef.current.scrollTop = 0;
+        highlightRef.current.scrollLeft = 0;
+      }
+    } else if (deferredContent && editorRef.current && highlightRef.current) {
+      highlightRef.current.scrollTop = editorRef.current.scrollTop;
+      highlightRef.current.scrollLeft = editorRef.current.scrollLeft;
+    }
+  }, [activeSection?.id, deferredContent, editorRef]);
+
   if (!activeSection) {
     return (
       <div className="flex h-full w-full items-center justify-center text-center text-[var(--sc-text-muted)] p-4">
@@ -335,6 +350,13 @@ export const ManuscriptEditor: FC<{ isFocusMode: boolean }> = React.memo(({ isFo
     handleContentChange(activeSection.id, e.currentTarget.value);
   };
 
+  const handleTextareaScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
+    if (highlightRef.current) {
+      highlightRef.current.scrollTop = e.currentTarget.scrollTop;
+      highlightRef.current.scrollLeft = e.currentTarget.scrollLeft;
+    }
+  };
+
   return (
     <div className="relative h-full flex flex-col">
       <div
@@ -351,6 +373,8 @@ export const ManuscriptEditor: FC<{ isFocusMode: boolean }> = React.memo(({ isFo
         {/* QNBS-v3: Phase 2 — show insight badge when there are findings for this chapter */}
         <InlineAnnotationLayer sectionTitle={activeSection.title} />
         <Textarea
+          variant="overlay"
+          data-testid="manuscript-editor-textarea"
           ref={editorRef}
           value={activeSection.content}
           onChange={(e) => handleContentChange(activeSection.id, e.target.value)}
@@ -358,6 +382,7 @@ export const ManuscriptEditor: FC<{ isFocusMode: boolean }> = React.memo(({ isFo
           onKeyUp={handleSelectionEvents}
           onClick={handleSelectionEvents}
           onKeyDown={handleKeyDown}
+          onScroll={handleTextareaScroll}
           className={`h-full w-full leading-relaxed resize-none p-4 sm:p-6 md:p-12 pt-2 bg-transparent border-0 focus:ring-0 flex-grow caret-[var(--sc-text-primary)] text-transparent max-w-3xl mx-auto selection:bg-[var(--sc-accent)]/30 transition-all duration-500 ${isFocusMode ? 'max-w-4xl pt-12' : ''}`}
           placeholder={
             activeSection.prompt ||
@@ -365,19 +390,21 @@ export const ManuscriptEditor: FC<{ isFocusMode: boolean }> = React.memo(({ isFo
           }
           style={{
             fontSize: `${settings.fontSize}px`,
-            // QNBS-v3: must match the highlight overlay's editorFontFamily so glyphs align in RTL.
-            fontFamily: editorFontFamily,
             lineHeight: settings.lineSpacing,
           }}
           spellCheck={false}
         />
         <div
+          ref={highlightRef}
+          data-testid="manuscript-editor-mirror"
+          dir={dir}
           className={`absolute inset-0 p-4 sm:p-6 md:p-12 pt-2 leading-relaxed pointer-events-none overflow-auto max-w-3xl mx-auto transition-all duration-500 ${isFocusMode ? 'max-w-4xl pt-12' : ''} ${isHighlightPending ? 'opacity-70' : 'opacity-100'}`}
           style={editorStyles}
           aria-hidden="true"
         >
           {renderedContent}
         </div>
+        <DictationButton targetRef={editorRef} />
       </div>
       <div className="absolute bottom-20 left-6 md:bottom-4 text-xs text-[var(--sc-text-muted)] bg-[var(--sc-surface-raised)]/90 border border-[var(--sc-border-subtle)] px-3 py-1 rounded-full pointer-events-none backdrop-blur-sm shadow-sm transition-opacity duration-300">
         {activeSectionStats.wordCount} {t('common.words')}
diff --git a/components/ui/DebouncedTextarea.tsx b/components/ui/DebouncedTextarea.tsx
index f366fb08..8778b313 100644
--- a/components/ui/DebouncedTextarea.tsx
+++ b/components/ui/DebouncedTextarea.tsx
@@ -1,47 +1,45 @@
 import type React from 'react';
-import { useEffect, useState } from 'react';
-import { Textarea } from './Textarea';
+import { forwardRef, useEffect, useState } from 'react';
+import { Textarea, type TextareaProps } from './Textarea';
 
-interface DebouncedTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+interface DebouncedTextareaProps extends TextareaProps {
   value: string;
   onDebouncedChange: (value: string) => void;
   debounceTimeout?: number;
 }
 
-export const DebouncedTextarea: React.FC<DebouncedTextareaProps> = ({
-  value: propValue,
-  onDebouncedChange,
-  debounceTimeout = 750,
-  ...props
-}) => {
-  const [internalValue, setInternalValue] = useState(propValue);
+// QNBS-v3 (#344): forwards ref to the real textarea DOM node — a sibling DictationButton needs it to inject a dictated transcript, matching ManuscriptEditor's existing editorRef.
+export const DebouncedTextarea = forwardRef<HTMLTextAreaElement, DebouncedTextareaProps>(
+  ({ value: propValue, onDebouncedChange, debounceTimeout = 750, ...props }, ref) => {
+    const [internalValue, setInternalValue] = useState(propValue);
 
-  // Sync with prop changes from external sources (e.g., undo/redo)
-  useEffect(() => {
-    setInternalValue(propValue);
-  }, [propValue]);
+    // Sync with prop changes from external sources (e.g., undo/redo)
+    useEffect(() => {
+      setInternalValue(propValue);
+    }, [propValue]);
 
-  // Debounce and notify parent of changes
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      // If the user has typed something different from the last known prop value,
-      // notify the parent component.
-      if (propValue !== internalValue) {
-        onDebouncedChange(internalValue);
-      }
-    }, debounceTimeout);
+    // Debounce and notify parent of changes
+    useEffect(() => {
+      const handler = setTimeout(() => {
+        // If the user has typed something different from the last known prop value,
+        // notify the parent component.
+        if (propValue !== internalValue) {
+          onDebouncedChange(internalValue);
+        }
+      }, debounceTimeout);
 
-    // Cleanup: clear the timeout if the user types again.
-    return () => {
-      clearTimeout(handler);
-    };
-    // This effect runs whenever the user's input changes.
-  }, [internalValue, onDebouncedChange, debounceTimeout, propValue]);
+      // Cleanup: clear the timeout if the user types again.
+      return () => {
+        clearTimeout(handler);
+      };
+      // This effect runs whenever the user's input changes.
+    }, [internalValue, onDebouncedChange, debounceTimeout, propValue]);
 
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setInternalValue(e.target.value);
-  };
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setInternalValue(e.target.value);
+    };
 
-  return <Textarea {...props} value={internalValue} onChange={handleChange} />;
-};
+    return <Textarea ref={ref} {...props} value={internalValue} onChange={handleChange} />;
+  },
+);
 DebouncedTextarea.displayName = 'DebouncedTextarea';
diff --git a/components/ui/DictationButton.tsx b/components/ui/DictationButton.tsx
new file mode 100644
index 00000000..54e8703d
--- /dev/null
+++ b/components/ui/DictationButton.tsx
@@ -0,0 +1,56 @@
+import type { FC, RefObject } from 'react';
+import { useEffect } from 'react';
+import { useSpeechRecognition } from '../../hooks/useSpeechRecognition';
+import { useTranslation } from '../../hooks/useTranslation';
+import { Icon } from './Icon';
+
+interface DictationButtonProps {
+  targetRef: RefObject<HTMLTextAreaElement | null>;
+}
+
+// QNBS-v3 (#341/#344): extracted from Textarea.tsx's default-variant mic button so overlay consumers (ContextPanel, ManuscriptEditor) can render it as a sibling instead of losing dictation entirely.
+export const DictationButton: FC<DictationButtonProps> = ({ targetRef }) => {
+  const { isListening, transcript, toggleListening, setTranscript } = useSpeechRecognition();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (transcript && targetRef.current) {
+      const input = targetRef.current;
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLTextAreaElement.prototype,
+        'value',
+      )?.set;
+
+      if (nativeInputValueSetter) {
+        const currentValue = input.value;
+        const separator = currentValue.length > 0 && !currentValue.endsWith('\n') ? ' ' : '';
+        const newValue = currentValue ? `${currentValue}${separator}${transcript}` : transcript;
+        nativeInputValueSetter.call(input, newValue);
+        const event = new Event('input', { bubbles: true });
+        input.dispatchEvent(event);
+      }
+      setTranscript('');
+    }
+  }, [transcript, setTranscript, targetRef]);
+
+  return (
+    <button
+      type="button"
+      onClick={toggleListening}
+      className={`absolute right-3 bottom-3 p-2 rounded-full transition-all duration-sc-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-[var(--sc-ring-focus)] z-20 ${
+        isListening
+          ? 'text-[var(--sc-danger-fg)] bg-[var(--sc-danger-bg)] animate-pulse shadow-[0_0_0_4px_var(--sc-danger-fg)] scale-110'
+          : 'text-[var(--sc-text-muted)] bg-[var(--sc-surface-raised)]/80 hover:text-[var(--sc-text-primary)] hover:bg-[var(--glass-bg-hover)] shadow-sm border border-[var(--sc-border-subtle)]'
+      }`}
+      title={t('common.dictation.title')}
+      aria-label={isListening ? t('common.dictation.stop') : t('common.dictation.start')}
+    >
+      {isListening ? (
+        <Icon name="microphone-solid" size="md" aria-hidden />
+      ) : (
+        <Icon name="microphone" size="md" aria-hidden />
+      )}
+    </button>
+  );
+};
+DictationButton.displayName = 'DictationButton';
diff --git a/components/ui/Textarea.tsx b/components/ui/Textarea.tsx
index 61d59ba4..f58630c6 100644
--- a/components/ui/Textarea.tsx
+++ b/components/ui/Textarea.tsx
@@ -1,88 +1,69 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import { useAppSelector } from '../../app/hooks';
-import { useSpeechRecognition } from '../../hooks/useSpeechRecognition';
 import { useTranslation } from '../../hooks/useTranslation';
-import { Icon } from './Icon';
+import { resolveEditorFontFamily } from '../../services/editorTypography';
+import { DictationButton } from './DictationButton';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /**
+   * 'overlay': a real, focusable, input-only textarea meant to sit invisibly over a separate,
+   * visible text-mirror layer (e.g. ContextPanel.tsx, ManuscriptEditor.tsx) — renders with no
+   * glass background/blur/shadow/hover background/reserved bottom padding, and does not render
+   * its own dictation mic button (the consumer renders a `DictationButton` sibling instead, since
+   * the reserved padding for an internal one would collide with the mirror text).
+   */
+  // QNBS-v3 (#341): the unconditional `backdrop-blur-md` on the 'default' variant was sitting directly over such mirror layers, making the visible text underneath unreadable.
+  variant?: 'default' | 'overlay';
+}
+
+const DEFAULT_CLASSES = `
+    flex min-h-[120px] w-full rounded-sc-lg
+    border border-[var(--sc-border-subtle)]
+    bg-[var(--glass-bg)] backdrop-blur-md
+    px-4 py-3 pb-12 text-sm
+    text-[var(--sc-text-primary)] placeholder:text-[var(--sc-text-muted)]
+    shadow-sm transition-all duration-sc-fast
+    focus-visible:outline-none focus-visible:border-[var(--border-interactive)] focus-visible:ring-2 focus-visible:ring-[var(--sc-ring-focus)] focus-visible:bg-[var(--sc-surface-raised)]/50
+    hover:border-[var(--sc-border-strong)] hover:bg-[var(--glass-bg-hover)]
+    disabled:opacity-50 disabled:cursor-not-allowed
+    scrollbar-thin scrollbar-thumb-rounded-md
+`;
+
+// QNBS-v3 (#341): no glass/blur/shadow/hover-bg/reserved padding — the caller's own className fully controls appearance (typically text-transparent, sitting over a visible mirror layer).
+const OVERLAY_CLASSES = `
+    flex min-h-[120px] w-full rounded-sc-lg
+    border border-[var(--sc-border-subtle)]
+    text-sm placeholder:text-[var(--sc-text-muted)]
+    transition-all duration-sc-fast
+    focus-visible:outline-none focus-visible:border-[var(--border-interactive)] focus-visible:ring-2 focus-visible:ring-[var(--sc-ring-focus)]
+    disabled:opacity-50 disabled:cursor-not-allowed
+    scrollbar-thin scrollbar-thumb-rounded-md
+`;
 
 export const Textarea = React.memo(
-  React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
-    ({ className, style, ...props }, ref) => {
+  React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, style, variant = 'default', ...props }, ref) => {
       const settings = useAppSelector((state) => state.settings);
       const innerRef = useRef<HTMLTextAreaElement>(null);
       const inputRef = (ref as React.RefObject<HTMLTextAreaElement>) || innerRef;
-      const { isListening, transcript, toggleListening, setTranscript } = useSpeechRecognition();
-      const { t } = useTranslation();
-
-      const fontMap = {
-        serif: 'Merriweather, serif',
-        'sans-serif': 'Inter, sans-serif',
-        monospace: 'JetBrains Mono, monospace',
-        custom: 'JetBrains Mono, monospace',
-      };
+      const { dir } = useTranslation();
 
       const editorStyles: React.CSSProperties = {
-        fontFamily: fontMap[settings.editorFont],
+        fontFamily: resolveEditorFontFamily(settings.editorFont, dir, settings.customFont?.name),
         fontSize: `${settings.fontSize}px`,
         lineHeight: settings.lineSpacing,
       };
 
-      useEffect(() => {
-        if (transcript && inputRef.current) {
-          const input = inputRef.current;
-          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-            window.HTMLTextAreaElement.prototype,
-            'value',
-          )?.set;
-
-          if (nativeInputValueSetter) {
-            const currentValue = input.value;
-            const separator = currentValue.length > 0 && !currentValue.endsWith('\n') ? ' ' : '';
-            const newValue = currentValue ? `${currentValue}${separator}${transcript}` : transcript;
-            nativeInputValueSetter.call(input, newValue);
-            const event = new Event('input', { bubbles: true });
-            input.dispatchEvent(event);
-          }
-          setTranscript('');
-        }
-      }, [transcript, setTranscript, inputRef]);
-
       return (
         <div className="relative w-full h-full group">
           <textarea
-            className={`
-                flex min-h-[120px] w-full rounded-sc-lg
-                border border-[var(--sc-border-subtle)] 
-                bg-[var(--glass-bg)] backdrop-blur-md
-                px-4 py-3 pb-12 text-sm 
-                text-[var(--sc-text-primary)] placeholder:text-[var(--sc-text-muted)] 
-                shadow-sm transition-all duration-sc-fast
-                focus-visible:outline-none focus-visible:border-[var(--border-interactive)] focus-visible:ring-4 focus-visible:ring-[var(--sc-ring-focus)] focus-visible:bg-[var(--sc-surface-raised)]/50
-                hover:border-[var(--sc-border-strong)] hover:bg-[var(--glass-bg-hover)]
-                disabled:opacity-50 disabled:cursor-not-allowed
-                scrollbar-thin scrollbar-thumb-rounded-md
-                ${className}
-            `}
+            className={`${variant === 'overlay' ? OVERLAY_CLASSES : DEFAULT_CLASSES} ${className}`}
             ref={inputRef}
+            dir={dir}
             style={{ ...editorStyles, ...style }}
             {...props}
           />
-          <button
-            type="button"
-            onClick={toggleListening}
-            className={`absolute right-3 bottom-3 p-2 rounded-full transition-all duration-sc-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-[var(--sc-ring-focus)] z-10 ${
-              isListening
-                ? 'text-[var(--sc-danger-fg)] bg-[var(--sc-danger-bg)] animate-pulse shadow-[0_0_0_4px_var(--sc-danger-fg)] scale-110'
-                : 'text-[var(--sc-text-muted)] bg-[var(--sc-surface-raised)]/80 hover:text-[var(--sc-text-primary)] hover:bg-[var(--glass-bg-hover)] shadow-sm border border-[var(--sc-border-subtle)]'
-            }`}
-            title={t('common.dictation.title')}
-            aria-label={isListening ? t('common.dictation.stop') : t('common.dictation.start')}
-          >
-            {isListening ? (
-              <Icon name="microphone-solid" size="md" aria-hidden />
-            ) : (
-              <Icon name="microphone" size="md" aria-hidden />
-            )}
-          </button>
+          {variant === 'default' && <DictationButton targetRef={inputRef} />}
         </div>
       );
     },
diff --git a/components/writing/ContextPanel.tsx b/components/writing/ContextPanel.tsx
index 9a3db9d1..385cdb76 100644
--- a/components/writing/ContextPanel.tsx
+++ b/components/writing/ContextPanel.tsx
@@ -1,33 +1,58 @@
 // QNBS-v3: Extracted from WriterView.tsx to keep each file ≤350 lines per architecture rules
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useAppSelector } from '../../app/hooks';
 import { useWriterViewContext } from '../../contexts/WriterViewContext';
 import { writerActions } from '../../features/writer/writerSlice';
 import { useTranslation } from '../../hooks/useTranslation';
+import { resolveEditorFontFamily } from '../../services/editorTypography';
 import { Card, CardContent, CardHeader } from '../ui/Card';
 import { DebouncedTextarea } from '../ui/DebouncedTextarea';
+import { DictationButton } from '../ui/DictationButton';
 import { Select } from '../ui/Select';
 
 const ContextPanel: FC = React.memo(() => {
-  const { t } = useTranslation();
+  const { t, dir } = useTranslation();
   const { project, selectedSectionId, handleContentChange, writerState, dispatch } =
     useWriterViewContext();
   const { selection, activeTool } = writerState;
   const selectedSection = project.manuscript.find((s) => s.id === selectedSectionId);
   const selectedSectionIndex = project.manuscript.findIndex((s) => s.id === selectedSectionId);
   const settings = useAppSelector((state) => state.settings);
-  const fontMap = {
-    serif: 'serif',
-    'sans-serif': 'sans-serif',
-    monospace: 'monospace',
-    custom: 'monospace',
-  };
+  // QNBS-v3 (#341): must resolve to the exact same stack as the real textarea (DebouncedTextarea → Textarea) — a mismatch here was the direct cause of selection/visible-text position drift.
   const editorStyles: React.CSSProperties = {
-    fontFamily: fontMap[settings.editorFont],
+    fontFamily: resolveEditorFontFamily(settings.editorFont, dir, settings.customFont?.name),
     fontSize: `${settings.fontSize}px`,
     lineHeight: settings.lineSpacing,
   };
+  // QNBS-v3 (#341): the real textarea and mirror div can scroll independently (mirror is pointer-events-none, so this is one-directional: real textarea → mirror only).
+  const editorRef = useRef<HTMLTextAreaElement>(null);
+  const mirrorRef = useRef<HTMLDivElement>(null);
+  const handleTextareaScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
+    if (mirrorRef.current) {
+      mirrorRef.current.scrollTop = e.currentTarget.scrollTop;
+      mirrorRef.current.scrollLeft = e.currentTarget.scrollLeft;
+    }
+  };
+  const prevSectionIdRef = useRef(selectedSectionId);
+  // QNBS-v3 (#344): resets both layers to the top on a section switch (stale offset from the previous section); otherwise re-applies the textarea's current scrollTop once the debounced mirror content catches up, since a scroll during the debounce window can clamp the mirror's scrollTop against its then-shorter content.
+  useEffect(() => {
+    const sectionChanged = prevSectionIdRef.current !== selectedSectionId;
+    prevSectionIdRef.current = selectedSectionId;
+    if (sectionChanged) {
+      if (editorRef.current) {
+        editorRef.current.scrollTop = 0;
+        editorRef.current.scrollLeft = 0;
+      }
+      if (mirrorRef.current) {
+        mirrorRef.current.scrollTop = 0;
+        mirrorRef.current.scrollLeft = 0;
+      }
+    } else if (selectedSection?.content && editorRef.current && mirrorRef.current) {
+      mirrorRef.current.scrollTop = editorRef.current.scrollTop;
+      mirrorRef.current.scrollLeft = editorRef.current.scrollLeft;
+    }
+  }, [selectedSectionId, selectedSection?.content]);
   const handleSelectionEvents = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
     const target = e.currentTarget;
     const { selectionStart, selectionEnd, value } = target;
@@ -71,6 +96,8 @@ const ContextPanel: FC = React.memo(() => {
           <div className="relative flex-grow border rounded-md border-[var(--sc-border-subtle)] bg-[var(--sc-surface-base)] overflow-hidden min-h-[300px]">
             {/* QNBS-v3: data-testid disambiguates Writer vs Manuscript textareas in Playwright (shared aria labelling). */}
             <DebouncedTextarea
+              ref={editorRef}
+              variant="overlay"
               data-testid="writer-studio-editor"
               value={selectedSection?.content || ''}
               onDebouncedChange={(content) =>
@@ -79,7 +106,8 @@ const ContextPanel: FC = React.memo(() => {
               onSelect={handleSelectionEvents}
               onMouseUp={handleSelectionEvents}
               onKeyUp={handleSelectionEvents}
-              className="h-full absolute inset-0 resize-none text-transparent bg-transparent caret-[var(--sc-text-primary)] z-10 p-4"
+              onScroll={handleTextareaScroll}
+              className="h-full absolute inset-0 resize-none text-transparent caret-[var(--sc-text-primary)] z-10 p-4"
               placeholder={t('writer.studio.context.contentPlaceholder')}
               aria-label={
                 selectedSection
@@ -90,7 +118,11 @@ const ContextPanel: FC = React.memo(() => {
               role="textbox"
             />
             <div
-              className="absolute inset-0 p-4 leading-relaxed pointer-events-none overflow-auto whitespace-pre-wrap"
+              ref={mirrorRef}
+              data-testid="writer-studio-mirror"
+              aria-hidden="true"
+              dir={dir}
+              className="absolute inset-0 p-4 leading-relaxed pointer-events-none overflow-auto whitespace-pre-wrap text-[var(--sc-text-primary)]"
               style={editorStyles}
             >
               {selectedSection?.content && (
@@ -106,6 +138,7 @@ const ContextPanel: FC = React.memo(() => {
                 </>
               )}
             </div>
+            <DictationButton targetRef={editorRef} />
           </div>
         </CardContent>
       </Card>
diff --git a/services/editorTypography.ts b/services/editorTypography.ts
new file mode 100644
index 00000000..3017a862
--- /dev/null
+++ b/services/editorTypography.ts
@@ -0,0 +1,38 @@
+/**
+ * Single source of truth for the manuscript/writer editor font stacks.
+ * QNBS-v3 (#341): components/ui/Textarea.tsx, components/writing/ContextPanel.tsx, and
+ * components/manuscript/ManuscriptEditor.tsx each maintained their own copy of this mapping —
+ * ContextPanel.tsx's copy had drifted to generic CSS keywords instead of concrete font stacks,
+ * producing different glyph metrics between its real (invisible) textarea and its visible text
+ * mirror, which is what made selection position drift from the visible caret/highlight.
+ */
+
+import type { EditorFont } from '../types';
+
+export const EDITOR_FONT_STACKS: Record<EditorFont, string> = {
+  serif: 'Merriweather, serif',
+  'sans-serif': 'Inter, sans-serif',
+  monospace: 'JetBrains Mono, monospace',
+  custom: 'JetBrains Mono, monospace',
+};
+
+/**
+ * Resolves the concrete font-family stack for an editor surface. RTL prose needs Noto glyph
+ * coverage (generic serif/sans/mono stacks lack reliable Arabic/Hebrew rendering) — this mirrors
+ * the RTL branch ManuscriptEditor.tsx already had before this module existed.
+ */
+// QNBS-v3 (#341/#344): customFontName is quoted and prepended ahead of the 'custom' stack's JetBrains Mono fallback — previously ignored entirely, so every 'custom' editorFont silently rendered as monospace.
+export function resolveEditorFontFamily(
+  editorFont: EditorFont,
+  dir: 'ltr' | 'rtl' = 'ltr',
+  customFontName?: string,
+): string {
+  const ltrStack =
+    editorFont === 'custom' && customFontName
+      ? `"${customFontName}", ${EDITOR_FONT_STACKS.custom}`
+      : (EDITOR_FONT_STACKS[editorFont] ?? EDITOR_FONT_STACKS['sans-serif']);
+  if (dir !== 'rtl') return ltrStack;
+  return editorFont === 'sans-serif' || editorFont === 'monospace'
+    ? `"Noto Sans Arabic", "Noto Sans Hebrew", ${ltrStack}`
+    : `"Noto Naskh Arabic", "Noto Sans Hebrew", ${ltrStack}`;
+}
diff --git a/src-tauri/osv-scanner.toml b/src-tauri/osv-scanner.toml
index 63cf709c..a53cfdfb 100644
--- a/src-tauri/osv-scanner.toml
+++ b/src-tauri/osv-scanner.toml
@@ -122,4 +122,19 @@ reason = "unic-ucd-ident 0.9.0: unmaintained Unicode data crate; final version;
 # @babel/core, dompurify→3.4.12, js-yaml→4.x, body-parser→1.20.6, …) — no open
 # npm ignores remain. (The former dompurify GHSA-x4vx-rjvf-j5p4 and js-yaml-3.x
 # GHSA-h67p-54hq-rp68 ignores were dropped: both advisories no longer match the
-# lockfile after the overrides.)
+# lockfile after the overrides.) One documented ignore remains below — no fixed
+# version exists to override to.
+
+# extract-zip@2.0.1 (CVE-2026-56876 / GHSA-jmr9-qjv8-65gv, CVSS 8.6): unvalidated
+# symlink path traversal when extracting an attacker-controlled zip archive.
+# extract-zip@2.0.1 is the latest published release — no patched version exists
+# (first_patched_version: null on the advisory) — so pnpm.overrides cannot fix
+# this. It's a transitive devDependency of @puppeteer/browsers (Playwright's
+# browser-binary downloader): only ever extracts Playwright/Chromium's own
+# CDN-hosted zip releases, never a user- or attacker-supplied archive, and never
+# ships in the production app bundle. No exploitable attack surface here.
+
+[[IgnoredVulns]]
+id = "GHSA-jmr9-qjv8-65gv"
+ignoreUntil = "2026-11-30T00:00:00Z"
+reason = "extract-zip 2.0.1: unvalidated symlink path traversal; latest release, no fixed version exists; transitive Playwright/@puppeteer/browsers devDependency only extracting Playwright's own CDN-hosted browser binaries, never user-supplied zips; no runtime footprint in the shipped app"
diff --git a/stories/Textarea.stories.tsx b/stories/Textarea.stories.tsx
index 5418eb36..4c37847a 100644
--- a/stories/Textarea.stories.tsx
+++ b/stories/Textarea.stories.tsx
@@ -40,3 +40,8 @@ export const Disabled: Story = {
 export const Tall: Story = {
   args: { placeholder: 'Long-form entry…', rows: 12 },
 };
+
+// QNBS-v3 (#341): 'overlay' sits invisibly over a separate visible mirror layer (ContextPanel.tsx, ManuscriptEditor.tsx) — no glass/blur/reserved padding/mic button, so it's a plain bordered box here.
+export const Overlay: Story = {
+  args: { variant: 'overlay', placeholder: 'Real input textarea, no glass/blur…', rows: 5 },
+};
diff --git a/tests/e2e/manuscript-rendering.spec.ts b/tests/e2e/manuscript-rendering.spec.ts
new file mode 100644
index 00000000..68f6ec04
--- /dev/null
+++ b/tests/e2e/manuscript-rendering.spec.ts
@@ -0,0 +1,68 @@
+/**
+ * QNBS-v3 (#341): ManuscriptEditor.tsx shares the real-textarea-over-mirror pattern and defects with Writer Studio's ContextPanel.tsx; this spec exercises the primary manuscript surface independent of writer.spec.ts.
+ */
+import { expect, test } from '@playwright/test';
+
+import {
+  clickNavItem,
+  ensureBlankProject,
+  flushWriterDebounce,
+  selectEnglish,
+  selectFirstEnabledWriterSection,
+  waitForSpaReady,
+} from './helpers';
+
+const isCI = process.env['CI'] === 'true';
+
+test.describe('Manuscript editor rendering (CI-only)', () => {
+  test.beforeEach(async ({ page }) => {
+    test.skip(!isCI, 'CI-only E2E suite');
+    await page.goto('/');
+    await waitForSpaReady(page);
+  });
+
+  test('Manuscript text is visually readable and stays in scroll sync (#341)', async ({ page }) => {
+    await selectEnglish(page);
+    await ensureBlankProject(page);
+
+    // QNBS-v3: seed section content via Writer Studio (the established, reliable content-entry path) before switching to the Manuscript view to check its own rendering.
+    await clickNavItem(page, /AI Writing Studio|Writer/i);
+    await selectFirstEnabledWriterSection(page);
+    const writerTextbox = page.getByTestId('writer-studio-editor').first();
+    await expect(writerTextbox).toBeVisible();
+    const longContent = Array.from(
+      { length: 60 },
+      (_, i) => `Paragraph ${i + 1}: the quick brown fox jumps over the lazy dog.`,
+    ).join('\n\n');
+    await writerTextbox.fill(longContent);
+    await flushWriterDebounce(page);
+
+    await clickNavItem(page, /Manuscript/i);
+    const manuscriptTextbox = page.getByTestId('manuscript-editor-textarea').first();
+    await expect(manuscriptTextbox).toBeVisible();
+    await expect(manuscriptTextbox).toHaveValue(/Paragraph 1/i);
+
+    const mirror = page.getByTestId('manuscript-editor-mirror').first();
+    await expect(mirror).toBeVisible();
+
+    const backdropFilter = await manuscriptTextbox.evaluate(
+      (el) => getComputedStyle(el).backdropFilter,
+    );
+    expect(backdropFilter === 'none' || backdropFilter === '').toBeTruthy();
+
+    const mirrorColor = await mirror.evaluate((el) => getComputedStyle(el).color);
+    expect(mirrorColor).not.toMatch(/rgba\(0,\s*0,\s*0,\s*0\)|transparent/);
+
+    await manuscriptTextbox.evaluate((el) => {
+      const textarea = el as HTMLTextAreaElement;
+      textarea.scrollTop = 200;
+      textarea.dispatchEvent(new Event('scroll'));
+    });
+    await expect.poll(async () => mirror.evaluate((el) => el.scrollTop)).toBeGreaterThan(0);
+    const [textareaScroll, mirrorScroll] = await Promise.all([
+      manuscriptTextbox.evaluate((el) => (el as HTMLTextAreaElement).scrollTop),
+      mirror.evaluate((el) => el.scrollTop),
+    ]);
+    expect(Math.abs(textareaScroll - mirrorScroll)).toBeLessThanOrEqual(2);
+  });
+});
diff --git a/tests/e2e/writer.spec.ts b/tests/e2e/writer.spec.ts
index 0e852699..956f0148 100644
--- a/tests/e2e/writer.spec.ts
+++ b/tests/e2e/writer.spec.ts
@@ -52,6 +52,51 @@ test.describe('AI Writer Flow (CI-only)', () => {
     await flushWriterDebounce(page);
   });
 
+  // QNBS-v3 (#341): the real textarea sits invisibly over a visible text-mirror layer — a regression here previously left the mirror unreadable (backdrop-blur bleeding through) and scroll-desynced.
+  test('Writer Studio text is visually readable and stays in scroll sync (#341)', async ({
+    page,
+  }) => {
+    await selectEnglish(page);
+    await ensureBlankProject(page);
+    await clickNavItem(page, /AI Writing Studio|Writer/i);
+    await selectFirstEnabledWriterSection(page);
+
+    const writerTextbox = page.getByTestId('writer-studio-editor').first();
+    await expect(writerTextbox).toBeVisible();
+    const longContent = Array.from(
+      { length: 60 },
+      (_, i) => `Paragraph ${i + 1}: the quick brown fox jumps over the lazy dog.`,
+    ).join('\n\n');
+    await writerTextbox.fill(longContent);
+    await flushWriterDebounce(page);
+
+    const mirror = page.getByTestId('writer-studio-mirror').first();
+    await expect(mirror).toBeVisible();
+
+    // The real (invisible) input textarea must never blur the mirror text sitting behind it.
+    const backdropFilter = await writerTextbox.evaluate(
+      (el) => getComputedStyle(el).backdropFilter,
+    );
+    expect(backdropFilter === 'none' || backdropFilter === '').toBeTruthy();
+
+    // The mirror's rendered text color must be a real, non-transparent color.
+    const mirrorColor = await mirror.evaluate((el) => getComputedStyle(el).color);
+    expect(mirrorColor).not.toMatch(/rgba\(0,\s*0,\s*0,\s*0\)|transparent/);
+
+    // Scroll parity: scrolling the real textarea must move the mirror by the same amount.
+    await writerTextbox.evaluate((el) => {
+      const textarea = el as HTMLTextAreaElement;
+      textarea.scrollTop = 200;
+      textarea.dispatchEvent(new Event('scroll'));
+    });
+    await expect.poll(async () => mirror.evaluate((el) => el.scrollTop)).toBeGreaterThan(0);
+    const [textareaScroll, mirrorScroll] = await Promise.all([
+      writerTextbox.evaluate((el) => (el as HTMLTextAreaElement).scrollTop),
+      mirror.evaluate((el) => el.scrollTop),
+    ]);
+    expect(Math.abs(textareaScroll - mirrorScroll)).toBeLessThanOrEqual(2);
+  });
+
   test('keyboard navigation and responsive layout work', async ({ page }) => {
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
diff --git a/tests/unit/DictationButton.test.tsx b/tests/unit/DictationButton.test.tsx
new file mode 100644
index 00000000..ab4936a3
--- /dev/null
+++ b/tests/unit/DictationButton.test.tsx
@@ -0,0 +1,84 @@
+/**
+ * Tests for components/ui/DictationButton.tsx
+ * QNBS-v3 (#344): extracted from Textarea.tsx's default-variant mic button so overlay consumers can render dictation as a sibling.
+ */
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mockToggleListening = vi.fn();
+const mockSetTranscript = vi.fn();
+
+let mockIsListening = false;
+let mockTranscript = '';
+
+vi.mock('../../hooks/useSpeechRecognition', () => ({
+  useSpeechRecognition: () => ({
+    isListening: mockIsListening,
+    transcript: mockTranscript,
+    toggleListening: mockToggleListening,
+    setTranscript: mockSetTranscript,
+  }),
+}));
+
+vi.mock('../../hooks/useTranslation', () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+import { DictationButton } from '../../components/ui/DictationButton';
+
+describe('DictationButton', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockIsListening = false;
+    mockTranscript = '';
+  });
+
+  it('renders a microphone button', () => {
+    const ref = createRef<HTMLTextAreaElement>();
+    render(<DictationButton targetRef={ref} />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('calls toggleListening when clicked', async () => {
+    const user = userEvent.setup();
+    const ref = createRef<HTMLTextAreaElement>();
+    render(<DictationButton targetRef={ref} />);
+    await user.click(screen.getByRole('button'));
+    expect(mockToggleListening).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows "stop" aria-label when listening', () => {
+    mockIsListening = true;
+    const ref = createRef<HTMLTextAreaElement>();
+    render(<DictationButton targetRef={ref} />);
+    expect(screen.getByRole('button').getAttribute('aria-label')).toBe('common.dictation.stop');
+  });
+
+  it('injects the transcript into the target textarea and clears it', () => {
+    const textarea = document.createElement('textarea');
+    textarea.value = 'existing text';
+    document.body.appendChild(textarea);
+    const ref = { current: textarea };
+    mockTranscript = 'dictated words';
+
+    const inputListener = vi.fn();
+    textarea.addEventListener('input', inputListener);
+
+    render(<DictationButton targetRef={ref} />);
+
+    expect(textarea.value).toBe('existing text dictated words');
+    expect(inputListener).toHaveBeenCalledTimes(1);
+    expect(mockSetTranscript).toHaveBeenCalledWith('');
+
+    document.body.removeChild(textarea);
+  });
+
+  it('does not throw when the target ref is not yet attached', () => {
+    mockTranscript = 'dictated words';
+    const ref = createRef<HTMLTextAreaElement>();
+    expect(() => render(<DictationButton targetRef={ref} />)).not.toThrow();
+  });
+});
diff --git a/tests/unit/Textarea.test.tsx b/tests/unit/Textarea.test.tsx
index c5895ca2..0def0778 100644
--- a/tests/unit/Textarea.test.tsx
+++ b/tests/unit/Textarea.test.tsx
@@ -16,7 +16,13 @@ const mockSetTranscript = vi.fn();
 
 let mockIsListening = false;
 let mockTranscript = '';
-let mockSettings = { editorFont: 'serif' as string, fontSize: 16, lineSpacing: 1.6 };
+let mockSettings = {
+  editorFont: 'serif' as string,
+  fontSize: 16,
+  lineSpacing: 1.6,
+  customFont: undefined as { name: string } | undefined,
+};
+let mockDir: 'ltr' | 'rtl' = 'ltr';
 
 vi.mock('../../hooks/useSpeechRecognition', () => ({
   useSpeechRecognition: () => ({
@@ -28,7 +34,7 @@ vi.mock('../../hooks/useSpeechRecognition', () => ({
 }));
 
 vi.mock('../../hooks/useTranslation', () => ({
-  useTranslation: () => ({ t: (k: string) => k, language: 'en' }),
+  useTranslation: () => ({ t: (k: string) => k, language: 'en', dir: mockDir }),
 }));
 
 vi.mock('../../app/hooks', () => ({
@@ -50,7 +56,8 @@ describe('Textarea', () => {
     vi.clearAllMocks();
     mockIsListening = false;
     mockTranscript = '';
-    mockSettings = { editorFont: 'serif', fontSize: 16, lineSpacing: 1.6 };
+    mockSettings = { editorFont: 'serif', fontSize: 16, lineSpacing: 1.6, customFont: undefined };
+    mockDir = 'ltr';
   });
 
   it('renders a <textarea> element', () => {
@@ -83,12 +90,35 @@ describe('Textarea', () => {
   });
 
   it('applies serif font family from settings', () => {
-    mockSettings = { editorFont: 'serif', fontSize: 18, lineSpacing: 1.8 };
+    mockSettings = { editorFont: 'serif', fontSize: 18, lineSpacing: 1.8, customFont: undefined };
     render(<Textarea data-testid="ta" />);
     const textarea = screen.getByTestId('ta');
     expect(textarea.style.fontFamily).toContain('serif');
   });
 
+  it('uses the configured custom font name when editorFont is "custom"', () => {
+    mockSettings = {
+      editorFont: 'custom',
+      fontSize: 16,
+      lineSpacing: 1.6,
+      customFont: { name: 'My Special Font' },
+    };
+    render(<Textarea data-testid="ta" />);
+    expect(screen.getByTestId('ta').style.fontFamily).toContain('My Special Font');
+  });
+
+  it('falls back to the monospace stack when editorFont is "custom" but no custom font is set', () => {
+    mockSettings = { editorFont: 'custom', fontSize: 16, lineSpacing: 1.6, customFont: undefined };
+    render(<Textarea data-testid="ta" />);
+    expect(screen.getByTestId('ta').style.fontFamily).toContain('JetBrains Mono');
+  });
+
+  it('sets the dir attribute to match the active text direction', () => {
+    mockDir = 'rtl';
+    render(<Textarea data-testid="ta" />);
+    expect(screen.getByTestId('ta').getAttribute('dir')).toBe('rtl');
+  });
+
   it('forwards ref to underlying <textarea>', () => {
     const ref = { current: null as HTMLTextAreaElement | null };
     render(<Textarea ref={ref} />);
@@ -108,4 +138,46 @@ describe('Textarea', () => {
     render(<Textarea />);
     expect(screen.getByRole('button').className).toContain('animate-pulse');
   });
+
+  // QNBS-v3 (#341): 'overlay' renders a real, focusable textarea meant to sit invisibly over a separate visible mirror layer — no glass/blur/shadow/reserved padding, no mic button.
+  describe('variant="overlay"', () => {
+    it('does not render the microphone button', () => {
+      render(<Textarea variant="overlay" data-testid="ta" />);
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('does not include backdrop-blur or the glass background class', () => {
+      render(<Textarea variant="overlay" data-testid="ta" />);
+      const className = screen.getByTestId('ta').className;
+      expect(className).not.toContain('backdrop-blur');
+      expect(className).not.toContain('bg-[var(--glass-bg)]');
+    });
+
+    it('does not include the reserved bottom padding for the mic button', () => {
+      render(<Textarea variant="overlay" data-testid="ta" />);
+      expect(screen.getByTestId('ta').className).not.toContain('pb-12');
+    });
+
+    it('still applies the resolved font family from settings', () => {
+      mockSettings = { editorFont: 'serif', fontSize: 18, lineSpacing: 1.8, customFont: undefined };
+      render(<Textarea variant="overlay" data-testid="ta" />);
+      expect(screen.getByTestId('ta').style.fontFamily).toContain('Merriweather');
+    });
+
+    it('retains the focus-visible ring for keyboard accessibility', () => {
+      render(<Textarea variant="overlay" data-testid="ta" />);
+      expect(screen.getByTestId('ta').className).toContain('focus-visible:ring-2');
+      expect(screen.getByTestId('ta').className).toContain(
+        'focus-visible:ring-[var(--sc-ring-focus)]',
+      );
+    });
+  });
+
+  describe('variant="default" (unchanged regression guard)', () => {
+    it('still includes backdrop-blur and renders the mic button', () => {
+      render(<Textarea data-testid="ta" />);
+      expect(screen.getByTestId('ta').className).toContain('backdrop-blur-md');
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/tests/unit/manuscript/ManuscriptEditor.test.tsx b/tests/unit/manuscript/ManuscriptEditor.test.tsx
index f1efdc1b..1794a07e 100644
--- a/tests/unit/manuscript/ManuscriptEditor.test.tsx
+++ b/tests/unit/manuscript/ManuscriptEditor.test.tsx
@@ -113,27 +113,43 @@ vi.mock('../../../components/ui/DebouncedInput', () => ({
   ),
 }));
 
+// QNBS-v3 (#341): captured so tests can assert variant="overlay" is passed and invoke onScroll manually to verify the mirror scroll-sync wiring.
+let lastEditorTextareaVariant: string | undefined;
+let lastEditorTextareaOnScroll: ((e: React.UIEvent<HTMLTextAreaElement>) => void) | undefined;
+
 // Stub Textarea
 vi.mock('../../../components/ui/Textarea', () => ({
   Textarea: ({
     value,
     onChange,
     placeholder,
+    variant,
+    onScroll,
+    // QNBS-v3 (#341): destructured out (not spread) so this mock's own stable "editor-textarea" testid always wins over the real component's data-testid.
+    'data-testid': _dataTestId,
     ...rest
   }: {
     value: string;
     onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
     placeholder?: string;
+    variant?: string;
+    onScroll?: (e: React.UIEvent<HTMLTextAreaElement>) => void;
+    'data-testid'?: string;
     [k: string]: unknown;
-  }) => (
-    <textarea
-      data-testid="editor-textarea"
-      value={value}
-      onChange={onChange}
-      placeholder={placeholder}
-      {...(rest as object)}
-    />
-  ),
+  }) => {
+    lastEditorTextareaVariant = variant;
+    lastEditorTextareaOnScroll = onScroll;
+    return (
+      <textarea
+        data-testid="editor-textarea"
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        onScroll={onScroll}
+        {...(rest as object)}
+      />
+    );
+  },
 }));
 
 // ---------------------------------------------------------------------------
@@ -280,4 +296,23 @@ describe('ManuscriptEditor', () => {
       expect(container.querySelector('.spell-error')).toBeNull();
     });
   });
+
+  // QNBS-v3 (#341): same overlay-textarea/mirror-div pattern and defect as ContextPanel — the real textarea must stay invisible-input-only, and the mirror must track its scroll position.
+  describe('rendering fix (#341)', () => {
+    it('passes variant="overlay" to the real textarea', () => {
+      render(<ManuscriptEditor isFocusMode={false} />);
+      expect(lastEditorTextareaVariant).toBe('overlay');
+    });
+
+    it('syncs the mirror scroll position when the real textarea scrolls', () => {
+      render(<ManuscriptEditor isFocusMode={false} />);
+      const mirror = screen.getByTestId('manuscript-editor-mirror');
+      expect(lastEditorTextareaOnScroll).toBeDefined();
+      Object.defineProperty(mirror, 'scrollTop', { value: 0, writable: true });
+      lastEditorTextareaOnScroll?.({
+        currentTarget: { scrollTop: 360, scrollLeft: 0 },
+      } as unknown as React.UIEvent<HTMLTextAreaElement>);
+      expect(mirror.scrollTop).toBe(360);
+    });
+  });
 });
diff --git a/tests/unit/writing/ContextPanel.test.tsx b/tests/unit/writing/ContextPanel.test.tsx
index cf308f78..7a221803 100644
--- a/tests/unit/writing/ContextPanel.test.tsx
+++ b/tests/unit/writing/ContextPanel.test.tsx
@@ -5,6 +5,8 @@
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type React from 'react';
+import { forwardRef } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 // ---------------------------------------------------------------------------
@@ -65,30 +67,55 @@ vi.mock('../../../hooks/useTranslation', () => ({
   useTranslation: () => ({
     t: (k: string, args?: Record<string, string>) => (args ? `${k}:${JSON.stringify(args)}` : k),
     language: 'en',
+    dir: 'ltr' as const,
   }),
 }));
 
-// Stub DebouncedTextarea to avoid debounce complexity in tests
-vi.mock('../../../components/ui/DebouncedTextarea', () => ({
-  DebouncedTextarea: ({
+// QNBS-v3 (#341): captured so tests can assert variant="overlay" is passed and invoke onScroll manually to verify the mirror scroll-sync wiring.
+let lastDebouncedTextareaVariant: string | undefined;
+let lastDebouncedTextareaOnScroll: ((e: React.UIEvent<HTMLTextAreaElement>) => void) | undefined;
+
+type MockDebouncedTextareaProps = Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'value'
+> & {
+  value: string;
+  variant?: string;
+};
+
+function DebouncedTextareaMock(
+  {
     value,
     placeholder,
     'aria-label': ariaLabel,
+    variant,
+    onScroll,
     ...rest
-  }: {
-    value: string;
-    placeholder?: string;
-    'aria-label'?: string;
-    [key: string]: unknown;
-  }) => (
+  }: MockDebouncedTextareaProps,
+  ref: React.Ref<HTMLTextAreaElement>,
+) {
+  lastDebouncedTextareaVariant = variant;
+  lastDebouncedTextareaOnScroll = onScroll;
+  return (
     <textarea
+      ref={ref}
       data-testid="debounced-textarea"
       defaultValue={value}
       placeholder={placeholder}
       aria-label={ariaLabel}
-      {...(rest as object)}
+      onScroll={onScroll}
+      {...rest}
     />
-  ),
+  );
+}
+
+// Stub DebouncedTextarea to avoid debounce complexity in tests
+vi.mock('../../../components/ui/DebouncedTextarea', () => ({
+  DebouncedTextarea: forwardRef(DebouncedTextareaMock),
+}));
+
+vi.mock('../../../components/ui/DictationButton', () => ({
+  DictationButton: () => <button type="button" data-testid="dictation-button" />,
 }));
 
 vi.mock('../../../components/ui/Select', () => ({
@@ -195,4 +222,34 @@ describe('ContextPanel', () => {
     const textarea = screen.getByTestId('writer-studio-editor');
     expect(textarea).toHaveAttribute('placeholder', 'writer.studio.context.contentPlaceholder');
   });
+
+  // QNBS-v3 (#341): the real textarea must stay invisible-input-only over the visible mirror — confirms the fix is wired, not just present in isolation.
+  it('passes variant="overlay" to the real textarea', () => {
+    render(<ContextPanel />);
+    expect(lastDebouncedTextareaVariant).toBe('overlay');
+  });
+
+  it('renders the mirror layer as aria-hidden with a stable test id', () => {
+    render(<ContextPanel />);
+    const mirror = screen.getByTestId('writer-studio-mirror');
+    expect(mirror).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('syncs the mirror scroll position when the real textarea scrolls, both vertically and horizontally', () => {
+    render(<ContextPanel />);
+    const mirror = screen.getByTestId('writer-studio-mirror');
+    expect(lastDebouncedTextareaOnScroll).toBeDefined();
+    Object.defineProperty(mirror, 'scrollTop', { value: 0, writable: true });
+    Object.defineProperty(mirror, 'scrollLeft', { value: 0, writable: true });
+    lastDebouncedTextareaOnScroll?.({
+      currentTarget: { scrollTop: 240, scrollLeft: 80 },
+    } as unknown as React.UIEvent<HTMLTextAreaElement>);
+    expect(mirror.scrollTop).toBe(240);
+    expect(mirror.scrollLeft).toBe(80);
+  });
+
+  it('renders a dictation entry point alongside the overlay editor', () => {
+    render(<ContextPanel />);
+    expect(screen.getByTestId('dictation-button')).toBeInTheDocument();
+  });
 });