feat: Integrate forum layout support across various components and enhance room handling logic

src/app/components/speech-bubble/SpeechBubble.css.ts

@@ -0,0 +1,60 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+const tailTopBase = {
+  content: '""',
+  position: 'absolute' as const,
+  top: toRem(-5),
+  left: 'var(--speech-tail-x, 50%)',
+  transform: 'translateX(-50%) rotate(45deg)',
+  width: toRem(10),
+  height: toRem(10),
+};
+
+export const SpeechBubble = style({
+  position: 'relative',
+  padding: `${toRem(8)} ${toRem(12)}`,
+  backgroundColor: color.SurfaceVariant.Container,
+  color: color.SurfaceVariant.OnContainer,
+  borderRadius: config.radii.R300,
+  boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+});
+
+export const SpeechBubbleTailTop = style({
+  selectors: {
+    '&::before': {
+      ...tailTopBase,
+      backgroundColor: color.SurfaceVariant.Container,
+    },
+  },
+});
+
+/** Popover menus (kebab, etc.) — surface matches folds Menu. */
+export const SpeechBubbleMenu = style({
+  position: 'relative',
+  padding: 0,
+  backgroundColor: color.Surface.Container,
+  color: color.Surface.OnContainer,
+  borderRadius: config.radii.R400,
+  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  boxShadow: '0 10px 28px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 12%)',
+  overflow: 'visible',
+});
+
+export const SpeechBubbleMenuTailTop = style({
+  selectors: {
+    '&::before': {
+      ...tailTopBase,
+      backgroundColor: color.Surface.Container,
+      borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+      borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+    },
+  },
+});
+
+globalStyle(`${SpeechBubbleMenu} > *`, {
+  background: 'transparent',
+  border: 'none',
+  boxShadow: 'none',
+});
+