feat: Response mobile layout support v1

toju-app/src/styles.scss

@@ -11,6 +11,78 @@
   }
 }
 
+/*
+ * Global classes consumed by overlay-driven bottom sheets (profile card, plugin action menu).
+ * The CDK overlay container lives outside the Angular component tree, so styling must be global
+ * rather than component-scoped. Keep this in sync with `shared/components/bottom-sheet`.
+ */
+@keyframes metoyou-bottom-sheet-slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.metoyou-bottom-sheet-panel {
+  width: 100% !important;
+  max-width: 100vw;
+  max-height: 85vh;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  border: 1px solid hsl(var(--border));
+  border-bottom: none;
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  box-shadow: 0 -20px 50px -10px rgb(0 0 0 / 50%);
+  overflow: hidden;
+  animation: metoyou-bottom-sheet-slide-up 220ms ease-out;
+}
+
+.metoyou-bottom-sheet-panel > * {
+  display: block;
+  width: 100%;
+  max-height: 85vh;
+  overflow-y: auto;
+}
+
+/*
+ * Sheet-mode overrides: when the profile card or plugin action menu render inside the bottom
+ * sheet panel they should fill the panel rather than keep their popover chrome (fixed width,
+ * shadow, double border).
+ */
+.metoyou-bottom-sheet-panel app-profile-card,
+.metoyou-bottom-sheet-panel app-plugin-action-menu {
+  width: 100%;
+}
+
+.metoyou-bottom-sheet-panel app-plugin-action-menu > div {
+  width: 100% !important;
+  max-width: 100%;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  animation: none;
+}
+
+/*
+ * Flatten the GIF picker chrome when it renders inside the inline `app-bottom-sheet`.
+ * The picker brings its own rounded border + shadow that visually nest inside the sheet frame.
+ */
+.bottom-sheet-panel app-klipy-gif-picker > div {
+  border-radius: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+  --tw-ring-color: transparent !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .metoyou-bottom-sheet-panel {
+    animation: none;
+  }
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;