diff --git a/src/components/BreadcrumbBar.test.tsx b/src/components/BreadcrumbBar.test.tsx
index 97e8ca83..2196e896 100644
--- a/src/components/BreadcrumbBar.test.tsx
+++ b/src/components/BreadcrumbBar.test.tsx
@@ -132,13 +132,22 @@ describe('BreadcrumbBar — title in breadcrumb (always rendered, CSS-toggled)',
     expect(screen.getByText('Note')).toBeInTheDocument()
   })
 
-  it('shadow is controlled by data-title-hidden attribute via CSS', () => {
+  it('separator visibility is controlled by data-title-hidden while using the shared border chrome', () => {
     const { container } = render(<BreadcrumbBar entry={baseEntry} {...defaultProps} />)
     const bar = container.querySelector('.breadcrumb-bar')!
+    expect(bar).toHaveClass('border-b', 'border-transparent')
     expect(bar).not.toHaveAttribute('data-title-hidden')
     bar.setAttribute('data-title-hidden', '')
     expect(bar).toHaveAttribute('data-title-hidden')
   })
+
+  it('uses the active separator state when raw mode forces the title into the breadcrumb', () => {
+    const { container } = render(
+      <BreadcrumbBar entry={baseEntry} {...defaultProps} rawMode onToggleRaw={vi.fn()} />,
+    )
+
+    expect(container.querySelector('.breadcrumb-bar')).toHaveAttribute('data-title-hidden')
+  })
 })
 
 describe('BreadcrumbBar — action buttons always right-aligned', () => {
diff --git a/src/components/BreadcrumbBar.tsx b/src/components/BreadcrumbBar.tsx
index 7079ad48..6a8101e1 100644
--- a/src/components/BreadcrumbBar.tsx
+++ b/src/components/BreadcrumbBar.tsx
@@ -204,11 +204,12 @@ export const BreadcrumbBar = memo(function BreadcrumbBar({
       ref={barRef}
       data-tauri-drag-region
       {...(titleAlwaysVisible ? { 'data-title-hidden': '' } : {})}
-      className="breadcrumb-bar flex shrink-0 items-center"
+      className="breadcrumb-bar flex shrink-0 items-center border-b border-transparent"
       style={{
         height: 52,
         background: 'var(--background)',
         padding: '6px 16px',
+        boxSizing: 'border-box',
       }}
     >
       <div className="breadcrumb-bar__title flex-1 min-w-0">
diff --git a/src/components/Editor.css b/src/components/Editor.css
index b300fcef..ca7b311a 100644
--- a/src/components/Editor.css
+++ b/src/components/Editor.css
@@ -22,14 +22,13 @@
   opacity: 0.55;
 }
 
-/* Breadcrumb bar: title + shadow toggled via data attribute (no React re-render) */
+/* Breadcrumb bar: title + border toggled via data attribute (no React re-render) */
 .breadcrumb-bar {
-  transition: box-shadow 0.2s ease;
-  box-shadow: none;
+  transition: border-color 0.2s ease;
 }
 
 .breadcrumb-bar[data-title-hidden] {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  border-bottom-color: var(--border);
 }
 
 .breadcrumb-bar__title {