fix(examples-chat): responsive shell side panels at <=1024px (#240)

The demo shell pinned the threads panel (left, 240px) and timeline panel
(right, 280px) as fixed-position columns with no breakpoints. At 1024px
viewport both panels open the chat column shrank to ~480px; below 768px
they overlapped the central chat surface and each other.

Two breakpoints:
- <=1024px: narrow the two panels to 200/240px so the chat keeps ~560px
- <=768px:  promote both panels to a centered floating sheet (gutter-aligned,
  rounded, shadowed) so they stack above the chat instead of crowding it

Toggle behaviour is unchanged; only the geometry of the open state shifts.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: blove

examples/chat/angular/src/app/shell/demo-shell.component.css

@@ -76,3 +76,28 @@
   flex-direction: column;
   gap: 8px;
 }
+
+/* Narrow the side panels at tablet widths so the chat column keeps a usable
+   minimum (~480px) when both panels are open. */
+@media (max-width: 1024px) {
+  .demo-shell__threads-panel { width: 200px; }
+  .demo-shell__timeline-panel { width: 240px; }
+}
+
+/* Below tablet the fixed side panels would steal too much of the chat
+   surface. Promote them to a centered overlay sheet — still toggle-driven,
+   but full-width modulo gutter, and they stack above the chat instead of
+   crowding it. */
+@media (max-width: 768px) {
+  .demo-shell__threads-panel,
+  .demo-shell__timeline-panel {
+    left: 16px;
+    right: 16px;
+    width: auto;
+    top: 72px;
+    bottom: 112px;
+    border: 1px solid #303540;
+    border-radius: 10px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
+  }
+}