feat: Response mobile layout support v1

toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.html

@@ -0,0 +1,46 @@
+<!-- Dimmed backdrop. Tap to dismiss. -->
+<div
+  class="fixed inset-0 z-[140] bg-black/40 backdrop-blur-sm"
+  (click)="onBackdropClick()"
+  (keydown.enter)="onBackdropClick()"
+  (keydown.space)="onBackdropClick()"
+  role="button"
+  tabindex="0"
+  aria-label="Close"
+></div>
+
+<!--
+  Bottom sheet panel. Slides up from the bottom of the viewport. Drag the top handle downward
+  beyond 80px to dismiss. Inner content is projected by the parent component.
+-->
+<div
+  appThemeNode="bottomSheetSurface"
+  class="bottom-sheet-panel fixed inset-x-0 bottom-0 z-[141] flex max-h-[85vh] flex-col rounded-t-2xl border-x border-t border-border bg-card text-foreground shadow-2xl"
+  [style.transform]="'translateY(' + translateY() + 'px)'"
+  [style.transition]="translateY() === 0 ? 'transform 200ms ease-out' : 'none'"
+  [attr.aria-label]="title() || ariaLabel()"
+  role="dialog"
+  aria-modal="true"
+>
+  <!-- Drag handle + optional title -->
+  <div
+    class="flex shrink-0 cursor-grab touch-none flex-col items-center gap-2 px-4 pb-2 pt-3 active:cursor-grabbing"
+    (touchstart)="onHandleTouchStart($event)"
+    (touchmove)="onHandleTouchMove($event)"
+    (touchend)="onHandleTouchEnd()"
+    (touchcancel)="onHandleTouchEnd()"
+  >
+    <span
+      aria-hidden="true"
+      class="h-1.5 w-10 rounded-full bg-muted-foreground/40"
+    ></span>
+    @if (title()) {
+      <h3 class="text-sm font-semibold text-foreground">{{ title() }}</h3>
+    }
+  </div>
+
+  <!-- Scrollable content area -->
+  <div class="min-h-0 flex-1 overflow-y-auto px-1 pb-[max(env(safe-area-inset-bottom),1rem)]">
+    <ng-content />
+  </div>
+</div>