Drag section width across the cutoff and watch the AI Context panel flip. Wide (≥ cutoff) → the panel docks inline and cramps the chat beside it (like a split pane). Narrow (< cutoff) → the panel overlays the chat (floating, drop-shadow) with a click-outside backdrop, so the chat is never squeezed to nothing. The ✕ and toolbar toggle close it in both modes. The red ticks below mark the current cutoff on the width track.

Maps to the real change in shared DrawerPanel: today it always overlays (overlay prop). This adds a width gate — the parent (MentorChat) measures its own width via ResizeObserver and passes overlay={width < cutoff}, so above the cutoff the panel reverts to the inline docked pane and below it floats. Same onClose ✕ + click-outside in both. Dial the cutoff above, copy the rule.