fix(web): narrow viewport blurs the entire conversation

[testikun]

Problem

Resizing a populated OpenPI Web workbench from a desktop width to the narrow/mobile breakpoint makes the conversation, messages, and composer appear blurred. The sidebar correctly switches to the mobile trigger, but the usable content becomes visually unreadable.

Reproduction

1. Open a populated Web session at a viewport wider than 760px.
2. Drag the browser/window edge until the viewport is 760px or narrower.
3. Observe that the message list and composer are blurred across the full conversation area.
4. Resize above 760px and observe that the blur disappears.

Root cause

The base .workbench-header style applies backdrop-filter: blur(8px) and -webkit-backdrop-filter: blur(8px). At the narrow breakpoint, the same element becomes an absolute overlay with inset: 0, so it covers the complete conversation shell while retaining both backdrop filters. The mobile rule intends to keep only the sidebar trigger as an overlay, but the full-size transparent header still filters everything behind it.

Expected behavior

At narrow widths, only the mobile sidebar trigger should overlay the conversation. Messages and the composer must remain crisp and readable while resizing in either direction.

Acceptance

• Reset both backdrop filters for the narrow full-shell header.
• Preserve the desktop header styling and mobile sidebar trigger behavior.
• Add a regression test for the responsive CSS contract.
• Run the real local Web workbench and verify desktop-to-narrow and narrow-to-desktop resizing.
• Add real before/after test screenshots to the first PR comment.

[testikun]

I will take this. I reproduced the failure from the responsive CSS contract: the full-shell mobile header retains the desktop backdrop blur. I will fix it on current main, add a focused regression test, run the full repository gates, and attach real local desktop and narrow viewport screenshots to the first PR comment.