feat: Response mobile layout support v1

2026-05-18 03:03:55 +02:00
45 changed files with 2369 additions and 377 deletions
--- a/e2e/tests/plugins/plugin-api-two-users.spec.ts
+++ b/e2e/tests/plugins/plugin-api-two-users.spec.ts
@@ -39,7 +39,6 @@ test.describe('Plugin API multi-user runtime', () => {
      await closeSettingsModal(scenario.bob.page);
      await expect(soundboardComposerButton(scenario.bob.page)).toBeVisible({ timeout: 20_000 });
      await expect(scenario.bob.page.getByText(SOUND_BOARD_TEXT, { exact: true })).toBeVisible({ timeout: 20_000 });
-      await expect(scenario.bob.page.getByTestId('e2e-plugin-owned-dom')).toHaveAttribute('data-plugin-owner', 'e2e.all-api-plugin');
    });

    await test.step('Alice opens the plugin soundboard modal and plays a sound to voice', async () => {
@@ -150,7 +149,7 @@ async function installGrantAndActivatePlugin(page: Page, installFromStore: boole
    await page.getByLabel('Plugin source manifest URL').fill(PLUGIN_SOURCE_URL);
    await page.getByRole('button', { name: 'Add Source' }).click();
    await expect(page.getByRole('heading', { name: PLUGIN_TITLE })).toBeVisible({ timeout: 20_000 });
-    await page.getByRole('button', { exact: true, name: /^(Install|Install to Server)$/ }).click();
+    await page.locator('article', { hasText: PLUGIN_TITLE }).getByRole('button', { exact: true, name: /^(Install|Install to Server)$/ }).click();
    await expect(page.getByRole('dialog', { name: PLUGIN_TITLE })).toBeVisible({ timeout: 10_000 });
    await page.getByRole('button', { name: 'Install and Activate' }).click();
    await expect(page.locator('article', { hasText: PLUGIN_TITLE }).getByText('Installed')).toBeVisible({ timeout: 20_000 });
--- a/e2e/tests/plugins/plugin-manager-ui.spec.ts
+++ b/e2e/tests/plugins/plugin-manager-ui.spec.ts
@@ -33,9 +33,11 @@ test.describe('Plugin manager UI', () => {
      await page.getByLabel('Plugin source manifest URL').fill('http://localhost:4200/plugins/e2e-plugin-source.json');
      await page.getByRole('button', { name: 'Add Source' }).click();
      await expect(page.getByRole('heading', { name: 'E2E All API Plugin' })).toBeVisible({ timeout: 15_000 });
-      await page.getByRole('button', { name: 'Readme' }).click();
+      const pluginCard = page.locator('article', { hasText: 'E2E All API Plugin' });
+
+      await pluginCard.getByRole('button', { name: 'Readme' }).click();
      await expect(page.getByText('Fixture plugin for Playwright coverage.')).toBeVisible({ timeout: 10_000 });
-      await page.getByRole('button', { exact: true, name: /^(Install|Install to Server)$/ }).click();
+      await pluginCard.getByRole('button', { exact: true, name: /^(Install|Install to Server)$/ }).click();
      const installDialog = page.getByRole('dialog', { name: 'E2E All API Plugin' });

      await expect(installDialog).toBeVisible({ timeout: 10_000 });
--- a/e2e/tests/voice/direct-call.spec.ts
+++ b/e2e/tests/voice/direct-call.spec.ts
@@ -90,10 +90,7 @@ test.describe('Direct private calls', () => {
        })
        .toBeGreaterThan(0);

-      await scenario.bob.page.getByRole('button', { name: 'Open private call' }).click();
-      await expect(scenario.bob.page).toHaveURL(/\/call\//, { timeout: 20_000 });
-      await scenario.bob.page.getByRole('button', { name: 'Join call' }).click();
-      await expect(scenario.bob.page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+      await answerIncomingCall(scenario.bob.page);
      await expect(scenario.bob.page.locator('[data-testid^="server-rail-call-"]')).toHaveCount(1, { timeout: 20_000 });

      await expect
@@ -176,10 +173,7 @@ test.describe('Direct private calls', () => {
        })
        .toBeGreaterThan(0);

-      await charlie.page.getByRole('button', { name: 'Open private call' }).click();
-      await expect(charlie.page).toHaveURL(/\/call\//, { timeout: 20_000 });
-      await charlie.page.getByRole('button', { name: 'Join call' }).click();
-      await expect(charlie.page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+      await answerIncomingCall(charlie.page);
      await expect(charlie.page.locator('app-private-call aside app-dm-chat').getByText(privateOnlyMessage)).toHaveCount(0);

      await waitForConnectedPeerCount(scenario.alice.page, 2, 45_000);
@@ -345,12 +339,7 @@ test.describe('Direct private calls', () => {
        })
        .toBeGreaterThan(charliePlayCountBeforeGroupCall);

-      await scenario.bob.page
-        .getByRole('button', { name: 'Open private call' })
-        .last()
-        .click();
-
-      await scenario.bob.page.getByRole('button', { name: 'Join call' }).click();
+      await answerIncomingCall(scenario.bob.page);
      await expect
        .poll(async () => await getActiveCallAudioLoops(scenario.bob.page), {
          timeout: 10_000,
@@ -358,12 +347,7 @@ test.describe('Direct private calls', () => {
        })
        .toBe(0);

-      await scenario.charlie.page
-        .getByRole('button', { name: 'Open private call' })
-        .last()
-        .click();
-
-      await scenario.charlie.page.getByRole('button', { name: 'Join call' }).click();
+      await answerIncomingCall(scenario.charlie.page);
      await expect
        .poll(async () => await getActiveCallAudioLoops(scenario.charlie.page), {
          timeout: 10_000,
@@ -378,10 +362,7 @@ test.describe('Direct private calls', () => {

    await test.step('Alice starts a private call and Bob joins', async () => {
      await startCallFromSearch(scenario.alice.page, scenario.bobUserId, 'Bob');
-      await scenario.bob.page.getByRole('button', { name: 'Open private call' }).click();
-      await expect(scenario.bob.page).toHaveURL(/\/call\//, { timeout: 20_000 });
-      await scenario.bob.page.getByRole('button', { name: 'Join call' }).click();
-      await expect(scenario.bob.page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+      await answerIncomingCall(scenario.bob.page);

      await waitForConnectedPeerCount(scenario.alice.page, 1, 45_000);
      await waitForConnectedPeerCount(scenario.bob.page, 1, 45_000);
@@ -413,12 +394,11 @@ test.describe('Direct private calls', () => {

    await test.step('Caller leaving before answer clears recipient call route and rail icon', async () => {
      await startCallFromSearch(scenario.alice.page, scenario.bobUserId, 'Bob');
-      await scenario.bob.page.getByRole('button', { name: 'Open private call' }).click();
-      await expect(scenario.bob.page).toHaveURL(/\/call\//, { timeout: 20_000 });
+      await expect(incomingCallDialog(scenario.bob.page)).toBeVisible({ timeout: 20_000 });

      await scenario.alice.page.getByRole('button', { name: 'Leave call' }).click();
      await expect(scenario.alice.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
-      await expect(scenario.bob.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
+      await expect(incomingCallDialog(scenario.bob.page)).toHaveCount(0, { timeout: 20_000 });
      await expect(scenario.bob.page.getByRole('button', { name: 'Open private call' })).toHaveCount(0);
      await expect(scenario.bob.page.locator('[data-testid^="server-rail-call-"]')).toHaveCount(0);
      await expect
@@ -431,9 +411,7 @@ test.describe('Direct private calls', () => {

    await test.step('Leaving an answered call clears local ringing and returns to DM', async () => {
      await startCallFromSearch(scenario.alice.page, scenario.bobUserId, 'Bob');
-      await scenario.bob.page.getByRole('button', { name: 'Open private call' }).click();
-      await scenario.bob.page.getByRole('button', { name: 'Join call' }).click();
-      await expect(scenario.bob.page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+      await answerIncomingCall(scenario.bob.page);

      await scenario.bob.page.getByRole('button', { name: 'Leave call' }).click();
      await expect(scenario.bob.page).toHaveURL(/\/dm\//, { timeout: 20_000 });
@@ -633,6 +611,30 @@ async function startCallFromSearch(page: Page, userId: string, displayName: stri
  await expect(page).toHaveURL(/\/call\//, { timeout: 20_000 });
 }

+function incomingCallDialog(page: Page) {
+  return page.getByRole('dialog', { name: /is calling/ });
+}
+
+async function answerIncomingCall(page: Page): Promise<void> {
+  const dialog = incomingCallDialog(page);
+
+  if (await dialog.isVisible({ timeout: 5_000 }).catch(() => false)) {
+    await dialog.getByRole('button', { name: 'Answer' }).click();
+  } else {
+    await page.getByRole('button', { name: 'Open private call' }).last().click();
+    await expect(page).toHaveURL(/\/call\//, { timeout: 20_000 });
+
+    const joinButton = page.getByRole('button', { name: 'Join call' });
+
+    if (await joinButton.isVisible({ timeout: 5_000 }).catch(() => false)) {
+      await joinButton.click();
+    }
+  }
+
+  await expect(page).toHaveURL(/\/call\//, { timeout: 20_000 });
+  await expect(page.getByRole('button', { name: 'Leave call' })).toBeVisible({ timeout: 20_000 });
+}
+
 async function getCurrentUserId(page: Page): Promise<string> {
  return await page.evaluate(() => localStorage.getItem('metoyou_currentUserId') ?? '');
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,6 +50,7 @@
        "rxjs": "~7.8.0",
        "simple-peer": "^9.11.1",
        "sql.js": "^1.13.0",
+        "swiper": "^12.1.4",
        "tslib": "^2.3.0",
        "typeorm": "^0.3.28",
        "uuid": "^13.0.0",
@@ -31843,6 +31844,25 @@
        "url": "https://github.com/sponsors/fb55"
      }
    },
+    "node_modules/swiper": {
+      "version": "12.1.4",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.4.tgz",
+      "integrity": "sha512-bihiwoKMOQwW8FfdUbo1DgkVH25E+4ZELIq0oopL1KTKBteLuaTMi/wwFjMxtlhTkk45k3XQ89D1Fvv0spSqBA==",
+      "funding": [
+        {
+          "type": "custom",
+          "url": "https://sponsors.nolimits4web.com"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nolimits4web"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
    "node_modules/swrv": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/swrv/-/swrv-1.2.0.tgz",
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
    "rxjs": "~7.8.0",
    "simple-peer": "^9.11.1",
    "sql.js": "^1.13.0",
+    "swiper": "^12.1.4",
    "tslib": "^2.3.0",
    "typeorm": "^0.3.28",
    "uuid": "^13.0.0",
--- a/toju-app/src/app/app.html
+++ b/toju-app/src/app/app.html
@@ -3,14 +3,16 @@
  class="workspace-bright-theme relative h-screen overflow-hidden bg-background text-foreground"
 >
  <div
-    class="grid h-full min-h-0 min-w-0 overflow-hidden"
-    [ngStyle]="appShellLayoutStyles()"
+    class="h-full min-h-0 min-w-0 overflow-hidden"
+    [class.grid]="!isMobile()"
+    [class.flex]="isMobile()"
+    [ngStyle]="isMobile() ? null : appShellLayoutStyles()"
  >
    <aside
      appThemeNode="serversRail"
      class="min-h-0 overflow-hidden bg-transparent"
-      [class.hidden]="isThemeStudioFullscreen()"
-      [ngStyle]="serversRailLayoutStyles()"
+      [class.hidden]="isThemeStudioFullscreen() || isMobile()"
+      [ngStyle]="isMobile() ? null : serversRailLayoutStyles()"
    >
      <app-servers-rail class="block h-full" />
    </aside>
@@ -18,9 +20,12 @@
    <main
      appThemeNode="appWorkspace"
      class="relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-background"
-      [ngStyle]="appWorkspaceShellStyles()"
+      [class.flex-1]="isMobile()"
+      [ngStyle]="isMobile() ? null : appWorkspaceShellStyles()"
    >
-      <app-title-bar class="block shrink-0" />
+      @if (!isMobile()) {
+        <app-title-bar class="block shrink-0" />
+      }

      <div class="relative min-h-0 flex-1 overflow-hidden">
        @if (isThemeStudioFullscreen()) {
--- a/toju-app/src/app/app.ts
+++ b/toju-app/src/app/app.ts
@@ -30,7 +30,7 @@ import { ServerDirectoryFacade } from './domains/server-directory';
 import { NotificationsFacade } from './domains/notifications';
 import { TimeSyncService } from './core/services/time-sync.service';
 import { VoiceSessionFacade } from './domains/voice-session';
-import { ExternalLinkService } from './core/platform';
+import { ExternalLinkService, ViewportService } from './core/platform';
 import { SettingsModalService } from './core/services/settings-modal.service';
 import { ElectronBridgeService } from './core/platform/electron/electron-bridge.service';
 import { UserStatusService } from './core/services/user-status.service';
@@ -99,6 +99,8 @@ export class App implements OnInit, OnDestroy {
  readonly theme = inject(ThemeService);
  readonly voiceSession = inject(VoiceSessionFacade);
  readonly externalLinks = inject(ExternalLinkService);
+  readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;
  readonly electronBridge = inject(ElectronBridgeService);
  readonly userStatus = inject(UserStatusService);
  readonly gameActivity = inject(GameActivityService);
--- a/toju-app/src/app/core/platform/index.ts
+++ b/toju-app/src/app/core/platform/index.ts
@@ -1,2 +1,3 @@
 export * from './platform.service';
 export * from './external-link.service';
+export * from './viewport.service';
--- a/toju-app/src/app/core/platform/viewport.service.ts
+++ b/toju-app/src/app/core/platform/viewport.service.ts
@@ -0,0 +1,69 @@
+import {
+  DestroyRef,
+  Injectable,
+  NgZone,
+  computed,
+  inject,
+  signal
+} from '@angular/core';
+
+/**
+ * Tracks viewport-level UX traits used to switch between desktop and mobile layouts.
+ *
+ * `isMobile` follows the Tailwind `md` breakpoint (max-width: 767.98px). It is the
+ * single source of truth for whether the UI should render in mobile mode - components
+ * and templates should use this signal rather than ad-hoc `window.innerWidth` checks.
+ *
+ * `isTouch` is a best-effort hint indicating coarse pointer / touch capability. It is
+ * stable for the lifetime of the page and does not flip when devices are connected.
+ */
+@Injectable({ providedIn: 'root' })
+export class ViewportService {
+  /** Pixel breakpoint that separates mobile from tablet/desktop layouts. Matches Tailwind `md`. */
+  static readonly MOBILE_MAX_WIDTH = 767.98;
+
+  /** True when the viewport is in mobile mode (width <= MOBILE_MAX_WIDTH). */
+  readonly isMobile = computed(() => this.isMobileSignal());
+  /** True when the primary pointer is coarse (touch screen). */
+  readonly isTouch = computed(() => this.isTouchSignal());
+  /** Convenience: true when running on a non-mobile viewport. */
+  readonly isDesktop = computed(() => !this.isMobileSignal());
+
+  private readonly zone = inject(NgZone);
+  private readonly destroyRef = inject(DestroyRef);
+
+  private readonly mobileQuery: MediaQueryList | null;
+  private readonly touchQuery: MediaQueryList | null;
+
+  private readonly isMobileSignal = signal(false);
+  private readonly isTouchSignal = signal(false);
+
+  constructor() {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      this.mobileQuery = null;
+      this.touchQuery = null;
+      return;
+    }
+
+    this.mobileQuery = window.matchMedia(`(max-width: ${ViewportService.MOBILE_MAX_WIDTH}px)`);
+    this.touchQuery = window.matchMedia('(pointer: coarse)');
+
+    this.isMobileSignal.set(this.mobileQuery.matches);
+    this.isTouchSignal.set(this.touchQuery.matches);
+
+    const onMobileChange = (event: MediaQueryListEvent) => {
+      this.zone.run(() => this.isMobileSignal.set(event.matches));
+    };
+    const onTouchChange = (event: MediaQueryListEvent) => {
+      this.zone.run(() => this.isTouchSignal.set(event.matches));
+    };
+
+    this.mobileQuery.addEventListener('change', onMobileChange);
+    this.touchQuery.addEventListener('change', onTouchChange);
+
+    this.destroyRef.onDestroy(() => {
+      this.mobileQuery?.removeEventListener('change', onMobileChange);
+      this.touchQuery?.removeEventListener('change', onTouchChange);
+    });
+  }
+}
--- a/toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.html
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.html
@@ -40,31 +40,43 @@
  </div>

  @if (showKlipyGifPicker()) {
-    <div
-      class="fixed inset-0 z-[89]"
-      (click)="closeKlipyGifPicker()"
-      (keydown.enter)="closeKlipyGifPicker()"
-      (keydown.space)="closeKlipyGifPicker()"
-      tabindex="0"
-      role="button"
-      aria-label="Close GIF picker"
-      style="-webkit-app-region: no-drag"
-    ></div>
-
-    <div class="pointer-events-none fixed inset-0 z-[90]">
+    @if (isMobile()) {
+      <app-bottom-sheet (dismissed)="closeKlipyGifPicker()">
+        <div appThemeNode="chatGifPickerSurface">
+          <app-klipy-gif-picker
+            [signalSource]="currentRoom()"
+            (gifSelected)="handleKlipyGifSelected($event)"
+            (closed)="closeKlipyGifPicker()"
+          />
+        </div>
+      </app-bottom-sheet>
+    } @else {
      <div
-        appThemeNode="chatGifPickerSurface"
-        class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
-        [style.bottom.px]="composerBottomPadding() + 8"
-        [style.right.px]="klipyGifPickerAnchorRight()"
-      >
-        <app-klipy-gif-picker
-          [signalSource]="currentRoom()"
-          (gifSelected)="handleKlipyGifSelected($event)"
-          (closed)="closeKlipyGifPicker()"
-        />
+        class="fixed inset-0 z-[89]"
+        (click)="closeKlipyGifPicker()"
+        (keydown.enter)="closeKlipyGifPicker()"
+        (keydown.space)="closeKlipyGifPicker()"
+        tabindex="0"
+        role="button"
+        aria-label="Close GIF picker"
+        style="-webkit-app-region: no-drag"
+      ></div>
+
+      <div class="pointer-events-none fixed inset-0 z-[90]">
+        <div
+          appThemeNode="chatGifPickerSurface"
+          class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
+          [style.bottom.px]="composerBottomPadding() + 8"
+          [style.right.px]="klipyGifPickerAnchorRight()"
+        >
+          <app-klipy-gif-picker
+            [signalSource]="currentRoom()"
+            (gifSelected)="handleKlipyGifSelected($event)"
+            (closed)="closeKlipyGifPicker()"
+          />
+        </div>
      </div>
-    </div>
+    }
  }

  <app-chat-message-overlays
--- a/toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.ts
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.ts
@@ -10,6 +10,8 @@ import {
 } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { ElectronBridgeService } from '../../../../core/platform/electron/electron-bridge.service';
+import { ViewportService } from '../../../../core/platform';
+import { BottomSheetComponent } from '../../../../shared';
 import { RealtimeSessionFacade } from '../../../../core/realtime';
 import { Attachment, AttachmentFacade } from '../../../attachment';
 import { KlipyGif, KlipyService } from '../../application/services/klipy.service';
@@ -45,6 +47,7 @@ import {
    KlipyGifPickerComponent,
    ChatMessageListComponent,
    ChatMessageOverlaysComponent,
+    BottomSheetComponent,
    ThemeNodeDirective
  ],
  templateUrl: './chat-messages.component.html',
@@ -59,6 +62,9 @@ export class ChatMessagesComponent {
  private readonly webrtc = inject(RealtimeSessionFacade);
  private readonly attachmentsSvc = inject(AttachmentFacade);
  private readonly klipy = inject(KlipyService);
+  private readonly viewport = inject(ViewportService);
+
+  readonly isMobile = this.viewport.isMobile;

  readonly allMessages = this.store.selectSignal(selectAllMessages);
  private readonly activeChannelId = this.store.selectSignal(selectActiveChannelId);
--- a/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.html
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.html
@@ -6,6 +6,10 @@
  [attr.data-message-id]="msg.id"
  class="group relative flex gap-3 rounded-lg p-2 transition-colors hover:bg-secondary/30"
  [class.opacity-50]="msg.isDeleted"
+  (touchstart)="onMessageTouchStart($event)"
+  (touchend)="onMessageTouchEnd()"
+  (touchmove)="onMessageTouchEnd()"
+  (touchcancel)="onMessageTouchEnd()"
 >
  <div
    appThemeNode="chatMessageAvatar"
@@ -469,7 +473,7 @@
    }
  </div>

-  @if (!msg.isDeleted) {
+  @if (!msg.isDeleted && !isMobile()) {
    <div
      appThemeNode="chatMessageActions"
      class="absolute right-2 top-2 flex items-center gap-1 rounded-lg border border-border bg-card shadow-lg opacity-0 transition-opacity group-hover:opacity-100"
@@ -534,4 +538,83 @@
      }
    </div>
  }
+
+  <ng-template #mobileSheetTpl>
+    <app-bottom-sheet
+      title="Message"
+      ariaLabel="Message actions"
+      (dismissed)="closeMobileActions()"
+    >
+      <div class="flex flex-col py-1">
+        <div class="px-3 pb-2 pt-1">
+          <p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">React</p>
+          <div class="mt-2 grid grid-cols-8 gap-1">
+            @for (emoji of commonEmojis; track emoji) {
+              <button
+                type="button"
+                class="rounded p-1 text-xl transition-colors hover:bg-secondary"
+                (click)="onMobileReact(emoji)"
+              >
+                {{ emoji }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <div class="my-1 h-px bg-border"></div>
+
+        <button
+          type="button"
+          class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-foreground transition-colors hover:bg-secondary"
+          (click)="onMobileReply()"
+        >
+          <ng-icon
+            name="lucideReply"
+            class="h-5 w-5 text-muted-foreground"
+          />
+          <span>Reply</span>
+        </button>
+
+        <button
+          type="button"
+          class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-foreground transition-colors hover:bg-secondary"
+          (click)="onMobileCopy()"
+        >
+          <ng-icon
+            name="lucideCopy"
+            class="h-5 w-5 text-muted-foreground"
+          />
+          <span>Copy message content</span>
+        </button>
+
+        @if (isOwnMessage()) {
+          <button
+            type="button"
+            class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-foreground transition-colors hover:bg-secondary"
+            (click)="onMobileEdit()"
+          >
+            <ng-icon
+              name="lucideEdit"
+              class="h-5 w-5 text-muted-foreground"
+            />
+            <span>Edit</span>
+          </button>
+        }
+
+        @if (isOwnMessage() || isAdmin()) {
+          <button
+            type="button"
+            class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-destructive transition-colors hover:bg-destructive/10"
+            (click)="onMobileDelete()"
+          >
+            <ng-icon
+              name="lucideTrash2"
+              class="h-5 w-5"
+            />
+            <span>Delete</span>
+          </button>
+        }
+      </div>
+    </app-bottom-sheet>
+  </ng-template>
 </div>
--- a/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts
@@ -8,15 +8,21 @@ import {
  effect,
  inject,
  input,
+  OnDestroy,
  output,
  signal,
-  ViewChild
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef
 } from '@angular/core';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
 import { Router } from '@angular/router';

 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
  lucideCheck,
+  lucideCopy,
  lucideDownload,
  lucideEdit,
  lucideExpand,
@@ -34,7 +40,7 @@ import {
  MAX_BROWSER_INLINE_MEDIA_SIZE_BYTES,
  MAX_AUTO_SAVE_SIZE_BYTES
 } from '../../../../../attachment';
-import { PlatformService } from '../../../../../../core/platform';
+import { PlatformService, ViewportService } from '../../../../../../core/platform';
 import { ElectronBridgeService } from '../../../../../../core/platform/electron/electron-bridge.service';
 import {
  ExperimentalMediaSettingsService
@@ -52,6 +58,7 @@ import { PluginRenderHostComponent } from '../../../../../plugins/feature/plugin
 import { PluginRequirementStateService, PluginUiRegistryService } from '../../../../../plugins';

 import {
+  BottomSheetComponent,
  ChatAudioPlayerComponent,
  ChatVideoPlayerComponent,
  ProfileCardService,
@@ -125,11 +132,13 @@ interface MissingPluginEmbedFallback {
    UserAvatarComponent,
    PluginRenderHostComponent,
    ExperimentalVlcPlayerComponent,
-    ThemeNodeDirective
+    ThemeNodeDirective,
+    BottomSheetComponent
  ],
  viewProviders: [
    provideIcons({
      lucideCheck,
+      lucideCopy,
      lucideDownload,
      lucideEdit,
      lucideExpand,
@@ -148,8 +157,9 @@ interface MissingPluginEmbedFallback {
    style: 'display: contents;'
  }
 })
-export class ChatMessageItemComponent {
+export class ChatMessageItemComponent implements OnDestroy {
  @ViewChild('editTextareaRef') editTextareaRef?: ElementRef<HTMLTextAreaElement>;
+  @ViewChild('mobileSheetTpl') mobileSheetTpl?: TemplateRef<unknown>;

  private readonly attachmentsSvc = inject(AttachmentFacade);
  private readonly klipy = inject(KlipyService);
@@ -160,6 +170,13 @@ export class ChatMessageItemComponent {
  private readonly experimentalMedia = inject(ExperimentalMediaSettingsService);
  private readonly profileCard = inject(ProfileCardService);
  private readonly router = inject(Router);
+  private readonly viewport = inject(ViewportService);
+  private readonly overlay = inject(Overlay);
+  private readonly viewContainerRef = inject(ViewContainerRef);
+  private mobileSheetOverlayRef: OverlayRef | null = null;
+  private longPressTimer: number | null = null;
+  readonly isMobile = this.viewport.isMobile;
+  readonly mobileSheetOpen = signal(false);
  private readonly attachmentVersion = signal(this.attachmentsSvc.updated());
  private readonly experimentalPlayerAttachmentId = signal<string | null>(null);
  private readonly mediaSupportCache = new Map<string, boolean>();
@@ -360,6 +377,116 @@ export class ChatMessageItemComponent {
    this.deleteRequested.emit(this.message());
  }

+  onMessageTouchStart(event: TouchEvent): void {
+    if (!this.isMobile() || this.message().isDeleted) {
+      return;
+    }
+
+    if (event.touches.length !== 1) {
+      this.clearLongPressTimer();
+      return;
+    }
+
+    if (this.isEditableTarget(event.target)) {
+      this.clearLongPressTimer();
+      return;
+    }
+
+    this.clearLongPressTimer();
+    this.longPressTimer = window.setTimeout(() => {
+      this.longPressTimer = null;
+      this.openMobileSheet();
+    }, 500);
+  }
+
+  onMessageTouchEnd(): void {
+    this.clearLongPressTimer();
+  }
+
+  private clearLongPressTimer(): void {
+    if (this.longPressTimer !== null) {
+      window.clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+  }
+
+  private isEditableTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof Element)) {
+      return false;
+    }
+
+    return target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]') !== null;
+  }
+
+  closeMobileActions(): void {
+    this.detachMobileSheet();
+  }
+
+  private openMobileSheet(): void {
+    if (this.mobileSheetOverlayRef || !this.mobileSheetTpl) {
+      this.mobileSheetOpen.set(true);
+      return;
+    }
+
+    const overlayRef = this.overlay.create({
+      positionStrategy: this.overlay.position().global(),
+      scrollStrategy: this.overlay.scrollStrategies.block(),
+      hasBackdrop: false,
+      panelClass: 'metoyou-chat-actions-sheet-pane'
+    });
+    const portal = new TemplatePortal(this.mobileSheetTpl, this.viewContainerRef);
+
+    overlayRef.attach(portal);
+    this.mobileSheetOverlayRef = overlayRef;
+    this.mobileSheetOpen.set(true);
+  }
+
+  private detachMobileSheet(): void {
+    this.mobileSheetOpen.set(false);
+
+    if (this.mobileSheetOverlayRef) {
+      this.mobileSheetOverlayRef.dispose();
+      this.mobileSheetOverlayRef = null;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.clearLongPressTimer();
+    this.detachMobileSheet();
+  }
+
+  onMobileReact(emoji: string): void {
+    this.addReaction(emoji);
+    this.closeMobileActions();
+  }
+
+  onMobileReply(): void {
+    this.requestReply();
+    this.closeMobileActions();
+  }
+
+  onMobileEdit(): void {
+    this.startEdit();
+    this.closeMobileActions();
+  }
+
+  onMobileDelete(): void {
+    this.requestDelete();
+    this.closeMobileActions();
+  }
+
+  async onMobileCopy(): Promise<void> {
+    const text = this.message().content;
+
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // Clipboard API unavailable; silently ignore.
+    }
+
+    this.closeMobileActions();
+  }
+
  removeEmbed(url: string): void {
    this.embedRemoved.emit({
      messageId: this.message().id,
--- a/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html
+++ b/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html
@@ -4,27 +4,29 @@
  aria-label="KLIPY GIF picker"
  style="background: hsl(var(--background) / 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px)"
 >
-  <div class="flex items-start justify-between gap-4 border-b border-border/70 bg-secondary/15 px-5 py-4">
-    <div>
-      <div class="text-[11px] font-semibold uppercase tracking-[0.28em] text-primary">KLIPY</div>
-      <h3 class="mt-1 text-lg font-semibold text-foreground">Choose a GIF</h3>
-      <p class="mt-1 text-sm text-muted-foreground">
-        {{ searchQuery.trim() ? 'Search results from KLIPY.' : 'Trending GIFs from KLIPY.' }}
-      </p>
-    </div>
+  @if (!isMobile()) {
+    <div class="flex items-start justify-between gap-4 border-b border-border/70 bg-secondary/15 px-5 py-4">
+      <div>
+        <div class="text-[11px] font-semibold uppercase tracking-[0.28em] text-primary">KLIPY</div>
+        <h3 class="mt-1 text-lg font-semibold text-foreground">Choose a GIF</h3>
+        <p class="mt-1 text-sm text-muted-foreground">
+          {{ searchQuery.trim() ? 'Search results from KLIPY.' : 'Trending GIFs from KLIPY.' }}
+        </p>
+      </div>

-    <button
-      type="button"
-      (click)="close()"
-      class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/70 bg-secondary/30 text-muted-foreground transition-colors hover:bg-secondary/80 hover:text-foreground"
-      aria-label="Close GIF picker"
-    >
-      <ng-icon
-        name="lucideX"
-        class="h-4 w-4"
-      />
-    </button>
-  </div>
+      <button
+        type="button"
+        (click)="close()"
+        class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/70 bg-secondary/30 text-muted-foreground transition-colors hover:bg-secondary/80 hover:text-foreground"
+        aria-label="Close GIF picker"
+      >
+        <ng-icon
+          name="lucideX"
+          class="h-4 w-4"
+        />
+      </button>
+    </div>
+  }

  <div class="border-b border-border/70 bg-secondary/10 px-5 py-4">
    <label class="relative block">
@@ -37,7 +39,7 @@
        type="text"
        [ngModel]="searchQuery"
        (ngModelChange)="onSearchQueryChanged($event)"
-        placeholder="Search KLIPY"
+        [placeholder]="isMobile() ? 'Search KLIPY and add a gif to the chat' : 'Search KLIPY'"
        class="relative z-0 w-full rounded-xl border border-border/80 bg-background/70 px-10 py-3 text-sm text-foreground placeholder:text-muted-foreground shadow-sm backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-primary"
      />
    </label>
@@ -80,12 +82,14 @@
        </div>
      </div>
    } @else {
-      <div class="columns-[12rem] gap-4">
+      <div [class]="isMobile() ? 'grid grid-cols-2 gap-2' : 'columns-[12rem] gap-4'">
        @for (gif of results(); track gif.id) {
          <button
            type="button"
            (click)="selectGif(gif)"
-            class="group mx-auto mb-4 inline-block w-full max-w-[15.5rem] break-inside-avoid align-top overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30"
+            [class]="isMobile()
+              ? 'group block w-full overflow-hidden rounded-xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30'
+              : 'group mx-auto mb-4 inline-block w-full max-w-[15.5rem] break-inside-avoid align-top overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30'"
          >
            <div
              class="relative flex items-center justify-center overflow-hidden bg-secondary/30"
@@ -104,30 +108,55 @@
                KLIPY
              </span>
            </div>
-            <div class="px-3 py-2">
-              <p class="truncate text-xs font-medium text-foreground">
-                {{ gif.title || 'KLIPY GIF' }}
-              </p>
-              <p class="mt-1 text-[10px] uppercase tracking-[0.22em] text-muted-foreground">Click to select</p>
-            </div>
+            @if (!isMobile()) {
+              <div class="px-3 py-2">
+                <p class="truncate text-xs font-medium text-foreground">
+                  {{ gif.title || 'KLIPY GIF' }}
+                </p>
+                <p class="mt-1 text-[10px] uppercase tracking-[0.22em] text-muted-foreground">Click to select</p>
+              </div>
+            }
          </button>
        }
      </div>
+
+      @if (isMobile() && hasNext()) {
+        <div class="mt-3 flex justify-center">
+          <button
+            type="button"
+            (click)="loadMore()"
+            [disabled]="loading()"
+            class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border/80 bg-background/60 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
+            [attr.aria-label]="loading() ? 'Loading more GIFs' : 'Load more GIFs'"
+          >
+            @if (loading()) {
+              <span class="h-4 w-4 animate-spin rounded-full border-2 border-primary/20 border-t-primary"></span>
+            } @else {
+              <ng-icon
+                name="lucideChevronDown"
+                class="h-5 w-5"
+              />
+            }
+          </button>
+        </div>
+      }
    }
  </div>

-  <div class="flex items-center justify-between gap-4 border-t border-border/70 bg-secondary/10 px-5 py-4">
-    <p class="text-xs text-muted-foreground">Click a GIF to select it. Powered by KLIPY.</p>
+  @if (!isMobile()) {
+    <div class="flex items-center justify-between gap-4 border-t border-border/70 bg-secondary/10 px-5 py-4">
+      <p class="text-xs text-muted-foreground">Click a GIF to select it. Powered by KLIPY.</p>

-    @if (hasNext()) {
-      <button
-        type="button"
-        (click)="loadMore()"
-        [disabled]="loading()"
-        class="rounded-full border border-border/80 bg-background/60 px-4 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
-      >
-        {{ loading() ? 'Loading...' : 'Load more' }}
-      </button>
-    }
-  </div>
+      @if (hasNext()) {
+        <button
+          type="button"
+          (click)="loadMore()"
+          [disabled]="loading()"
+          class="rounded-full border border-border/80 bg-background/60 px-4 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {{ loading() ? 'Loading...' : 'Load more' }}
+        </button>
+      }
+    </div>
+  }
 </div>
--- a/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.ts
+++ b/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.ts
@@ -17,6 +17,7 @@ import { FormsModule } from '@angular/forms';
 import { firstValueFrom } from 'rxjs';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
+  lucideChevronDown,
  lucideImage,
  lucideSearch,
  lucideX
@@ -24,6 +25,7 @@ import {
 import { KlipyGif, KlipyService } from '../../application/services/klipy.service';
 import type { RoomSignalSourceInput } from '../../../server-directory';
 import { ChatImageProxyFallbackDirective } from '../chat-image-proxy-fallback.directive';
+import { ViewportService } from '../../../../core/platform';

 const KLIPY_CARD_MIN_WIDTH = 140;
 const KLIPY_CARD_MAX_WIDTH = 248;
@@ -42,6 +44,7 @@ const KLIPY_CARD_FALLBACK_SIZE = 160;
  ],
  viewProviders: [
    provideIcons({
+      lucideChevronDown,
      lucideImage,
      lucideSearch,
      lucideX
@@ -58,6 +61,8 @@ export class KlipyGifPickerComponent implements OnInit, AfterViewInit, OnDestroy
  @ViewChild('searchInput') searchInput?: ElementRef<HTMLInputElement>;

  private readonly klipy = inject(KlipyService);
+  private readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;
  private currentPage = 1;
  private searchTimer: ReturnType<typeof setTimeout> | null = null;
  private requestId = 0;
--- a/toju-app/src/app/domains/direct-message/feature/dm-chat/dm-chat.component.html
+++ b/toju-app/src/app/domains/direct-message/feature/dm-chat/dm-chat.component.html
@@ -97,29 +97,40 @@
    </div>

    @if (showGifPicker()) {
-      <div
-        class="fixed inset-0 z-[89]"
-        tabindex="0"
-        role="button"
-        aria-label="Close GIF picker"
-        (click)="closeGifPicker()"
-        (keydown.enter)="closeGifPicker()"
-        (keydown.space)="closeGifPicker()"
-      ></div>
-
-      <div class="pointer-events-none fixed inset-0 z-[90]">
+      @if (isMobile()) {
+        <app-bottom-sheet (dismissed)="closeGifPicker()">
+          <div appThemeNode="chatGifPickerSurface">
+            <app-klipy-gif-picker
+              (gifSelected)="handleGifSelected($event)"
+              (closed)="closeGifPicker()"
+            />
+          </div>
+        </app-bottom-sheet>
+      } @else {
        <div
-          appThemeNode="chatGifPickerSurface"
-          class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
-          [style.bottom.px]="composerBottomPadding() + 8"
-          [style.right.px]="gifPickerAnchorRight()"
-        >
-          <app-klipy-gif-picker
-            (gifSelected)="handleGifSelected($event)"
-            (closed)="closeGifPicker()"
-          />
+          class="fixed inset-0 z-[89]"
+          tabindex="0"
+          role="button"
+          aria-label="Close GIF picker"
+          (click)="closeGifPicker()"
+          (keydown.enter)="closeGifPicker()"
+          (keydown.space)="closeGifPicker()"
+        ></div>
+
+        <div class="pointer-events-none fixed inset-0 z-[90]">
+          <div
+            appThemeNode="chatGifPickerSurface"
+            class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
+            [style.bottom.px]="composerBottomPadding() + 8"
+            [style.right.px]="gifPickerAnchorRight()"
+          >
+            <app-klipy-gif-picker
+              (gifSelected)="handleGifSelected($event)"
+              (closed)="closeGifPicker()"
+            />
+          </div>
        </div>
-      </div>
+      }
    }

    <app-chat-message-overlays
--- a/toju-app/src/app/domains/direct-message/feature/dm-chat/dm-chat.component.ts
+++ b/toju-app/src/app/domains/direct-message/feature/dm-chat/dm-chat.component.ts
@@ -15,7 +15,8 @@ import { Store } from '@ngrx/store';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import { ElectronBridgeService } from '../../../../core/platform/electron/electron-bridge.service';
-import { UserAvatarComponent } from '../../../../shared';
+import { ViewportService } from '../../../../core/platform';
+import { BottomSheetComponent, UserAvatarComponent } from '../../../../shared';
 import { DirectCallService } from '../../../direct-call';
 import { Attachment, AttachmentFacade } from '../../../attachment';
 import { ThemeNodeDirective } from '../../../theme';
@@ -61,6 +62,7 @@ interface DmStatusLabel {
    ChatMessageListComponent,
    ChatMessageOverlaysComponent,
    KlipyGifPickerComponent,
+    BottomSheetComponent,
    NgIcon,
    ThemeNodeDirective,
    UserAvatarComponent
@@ -80,8 +82,10 @@ export class DmChatComponent {
  private readonly attachments = inject(AttachmentFacade);
  private readonly klipy = inject(KlipyService);
  private readonly linkMetadata = inject(LinkMetadataService);
+  private readonly viewport = inject(ViewportService);
  private readonly metadataRequestKeys = new Set<string>();
  private openedConversationId: string | null = null;
+  readonly isMobile = this.viewport.isMobile;
  readonly directCalls = inject(DirectCallService);
  readonly directMessages = inject(DirectMessageService);
  readonly currentUser = this.store.selectSignal(selectCurrentUser);
--- a/toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-chat-panel.component.html
+++ b/toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-chat-panel.component.html
@@ -1,6 +1,6 @@
 <main
  appThemeNode="dmChatPanel"
-  class="relative min-h-0 min-w-0 overflow-hidden bg-background"
+  class="relative h-full min-h-0 w-full min-w-0 overflow-hidden bg-background"
  [ngStyle]="chatPanelStyles()"
 >
  <app-dm-chat />
--- a/toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-workspace.component.html
+++ b/toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-workspace.component.html
@@ -1,7 +1,53 @@
-<div
-  class="grid h-full min-h-0 overflow-hidden bg-background"
-  [ngStyle]="layoutStyles()"
->
-  <app-dm-conversations-panel />
-  <app-dm-chat-panel />
-</div>
+@if (isMobile()) {
+  <!-- Mobile: Swiper-driven page stack (conversations -> chat) -->
+  <swiper-container
+    #swiperEl
+    class="block h-full min-h-0 w-full bg-background"
+    slides-per-view="1"
+    space-between="0"
+    initial-slide="0"
+    threshold="10"
+    resistance-ratio="0"
+  >
+    <swiper-slide class="block h-full w-full">
+      <div class="flex h-full w-full min-h-0 overflow-hidden">
+        <app-servers-rail class="block h-full shrink-0" />
+        <div class="flex min-h-0 flex-1 overflow-hidden border-l border-border">
+          <app-dm-conversations-panel class="block h-full w-full" />
+        </div>
+      </div>
+    </swiper-slide>
+
+    <swiper-slide class="block h-full w-full">
+      <div class="flex h-full w-full min-h-0 flex-col overflow-hidden">
+        <div class="flex shrink-0 items-center gap-2 border-b border-border bg-card px-3 py-2">
+          <button
+            type="button"
+            (click)="setMobilePage('conversations')"
+            class="grid h-11 w-11 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+            aria-label="Back to conversations"
+          >
+            <ng-icon
+              name="lucideChevronLeft"
+              class="h-5 w-5"
+            />
+          </button>
+          <p class="truncate text-sm font-semibold text-foreground">Direct messages</p>
+        </div>
+        <div class="min-h-0 flex-1 overflow-hidden">
+          <app-dm-chat-panel class="block h-full w-full" />
+        </div>
+      </div>
+    </swiper-slide>
+  </swiper-container>
+} @else {
+  <!-- Desktop: theme-driven 2-pane grid layout -->
+  <div
+    class="grid h-full min-h-0 overflow-hidden bg-background"
+    [ngStyle]="layoutStyles()"
+  >
+    <app-dm-conversations-panel />
+    <app-dm-chat-panel />
+  </div>
+}
+
--- a/toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-workspace.component.ts
+++ b/toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-workspace.component.ts
@@ -1,46 +1,99 @@
 /* eslint-disable @typescript-eslint/member-ordering */
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
  Component,
+  ElementRef,
+  NgZone,
+  OnDestroy,
  computed,
  effect,
  inject,
-  OnDestroy
+  signal,
+  viewChild
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft } from '@ng-icons/lucide';
+import { ServersRailComponent } from '../../../../features/servers/servers-rail/servers-rail.component';
+import { ViewportService } from '../../../../core/platform';
 import { ThemeService } from '../../../theme';
 import { DirectMessageService } from '../../application/services/direct-message.service';
 import { DmChatPanelComponent } from './dm-chat-panel.component';
 import { DmConversationsPanelComponent } from './dm-conversations-panel.component';

+/** Mobile-only page identifier within the DM workspace flow. */
+export type DmWorkspaceMobilePage = 'conversations' | 'chat';
+
+const PAGE_TO_INDEX: Record<DmWorkspaceMobilePage, number> = {
+  conversations: 0,
+  chat: 1
+};
+const INDEX_TO_PAGE: DmWorkspaceMobilePage[] = ['conversations', 'chat'];
+
+interface SwiperElement extends HTMLElement {
+  swiper?: { activeIndex: number; slideTo: (index: number, speed?: number) => void };
+}
+
@Component({
  selector: 'app-dm-workspace',
  standalone: true,
  imports: [
    CommonModule,
+    NgIcon,
    DmChatPanelComponent,
-    DmConversationsPanelComponent
+    DmConversationsPanelComponent,
+    ServersRailComponent
  ],
+  viewProviders: [provideIcons({ lucideChevronLeft })],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './dm-workspace.component.html'
 })
 export class DmWorkspaceComponent implements OnDestroy {
  private readonly route = inject(ActivatedRoute);
  private readonly router = inject(Router);
  private readonly theme = inject(ThemeService);
+  private readonly viewport = inject(ViewportService);
+  private readonly zone = inject(NgZone);
+  private lastSeenConversationId: string | null = null;
+  private swiperListenerAttached: SwiperElement | null = null;
  readonly directMessages = inject(DirectMessageService);
  readonly routeConversationId = toSignal(this.route.paramMap.pipe(map((params) => params.get('conversationId'))), {
    initialValue: this.route.snapshot.paramMap.get('conversationId')
  });
  readonly layoutStyles = computed(() => this.theme.getLayoutContainerStyles('dmLayout'));
+  readonly isMobile = this.viewport.isMobile;
+  readonly swiperRef = viewChild<ElementRef<SwiperElement>>('swiperEl');
+
+  /** Active page within the mobile single-pane navigation flow. Ignored on desktop. */
+  readonly mobilePage = signal<DmWorkspaceMobilePage>('conversations');

  constructor() {
    effect(() => {
      const conversationId = this.routeConversationId();
+      const isMobile = this.isMobile();

      if (conversationId) {
        void this.directMessages.openConversation(conversationId);
+
+        // Only auto-advance to the chat page when the conversation actually changes.
+        // Without this, pressing Back to the conversations list immediately bounces
+        // us forward again because the conversation id is still the same.
+        if (isMobile && conversationId !== this.lastSeenConversationId) {
+          this.mobilePage.set('chat');
+        }
+
+        this.lastSeenConversationId = conversationId;
+        return;
+      }
+
+      this.lastSeenConversationId = null;
+
+      // On mobile, stay on the conversations list and let the user pick one explicitly.
+      if (isMobile) {
+        this.mobilePage.set('conversations');
        return;
      }

@@ -50,9 +103,55 @@ export class DmWorkspaceComponent implements OnDestroy {
        void this.router.navigate(['/dm', firstConversation.id], { replaceUrl: true });
      }
    });
+
+    // Mirror `mobilePage` into the Swiper instance so route-driven page changes and the
+    // header back button actually slide the carousel.
+    effect(() => {
+      const el = this.swiperRef()?.nativeElement;
+      const targetIndex = PAGE_TO_INDEX[this.mobilePage()];
+
+      if (el?.swiper && el.swiper.activeIndex !== targetIndex) {
+        el.swiper.slideTo(targetIndex);
+      }
+    });
+
+    // Bridge Swiper's slidechange event back into `mobilePage`.
+    effect((onCleanup) => {
+      const el = this.swiperRef()?.nativeElement;
+
+      if (!el || el === this.swiperListenerAttached) {
+        return;
+      }
+
+      const handler = (event: Event) => {
+        const detail = (event as CustomEvent).detail;
+        const swiper = Array.isArray(detail) ? detail[0] : detail;
+        const index = swiper?.activeIndex ?? 0;
+        const page = INDEX_TO_PAGE[index] ?? 'conversations';
+
+        this.zone.run(() => this.mobilePage.set(page));
+      };
+
+      el.addEventListener('swiperslidechange', handler);
+      this.swiperListenerAttached = el;
+
+      onCleanup(() => {
+        el.removeEventListener('swiperslidechange', handler);
+
+        if (this.swiperListenerAttached === el) {
+          this.swiperListenerAttached = null;
+        }
+      });
+    });
+  }
+
+  /** Set the active mobile page. No-op on desktop. */
+  setMobilePage(page: DmWorkspaceMobilePage): void {
+    this.mobilePage.set(page);
  }

  ngOnDestroy(): void {
    this.directMessages.closeConversationView(this.routeConversationId());
  }
 }
+
--- a/toju-app/src/app/domains/plugins/feature/plugin-action-menu/plugin-action-menu.service.ts
+++ b/toju-app/src/app/domains/plugins/feature/plugin-action-menu/plugin-action-menu.service.ts
@@ -15,6 +15,7 @@ import {
  fromEvent
 } from 'rxjs';
 import { PluginActionMenuComponent } from './plugin-action-menu.component';
+import { ViewportService } from '../../../../core/platform';

 const GAP = 10;
 const VIEWPORT_MARGIN = 8;
@@ -28,6 +29,7 @@ const POSITIONS: ConnectedPosition[] = [
@Injectable({ providedIn: 'root' })
 export class PluginActionMenuService {
  private readonly overlay = inject(Overlay);
+  private readonly viewport = inject(ViewportService);
  private currentOrigin: HTMLElement | null = null;
  private overlayRef: OverlayRef | null = null;
  private overlaySubscriptions: Subscription | null = null;
@@ -47,20 +49,38 @@ export class PluginActionMenuService {
    }

    const elementRef = origin instanceof ElementRef ? origin : new ElementRef(origin);
+    const isMobile = this.viewport.isMobile();

    this.currentOrigin = rawEl;

-    const positionStrategy = this.overlay
-      .position()
-      .flexibleConnectedTo(elementRef)
-      .withPositions(POSITIONS)
-      .withViewportMargin(VIEWPORT_MARGIN)
-      .withPush(true);
+    if (isMobile) {
+      const positionStrategy = this.overlay
+        .position()
+        .global()
+        .left('0')
+        .right('0')
+        .bottom('0');

-    this.overlayRef = this.overlay.create({
-      positionStrategy,
-      scrollStrategy: this.overlay.scrollStrategies.noop()
-    });
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.block(),
+        hasBackdrop: true,
+        backdropClass: 'cdk-overlay-dark-backdrop',
+        panelClass: 'metoyou-bottom-sheet-panel'
+      });
+    } else {
+      const positionStrategy = this.overlay
+        .position()
+        .flexibleConnectedTo(elementRef)
+        .withPositions(POSITIONS)
+        .withViewportMargin(VIEWPORT_MARGIN)
+        .withPush(true);
+
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.noop()
+      });
+    }

    this.syncThemeVars();

@@ -68,6 +88,14 @@ export class PluginActionMenuService {
    const subscriptions = new Subscription();

    subscriptions.add(componentRef.instance.closed.subscribe(() => this.close()));
+
+    if (isMobile) {
+      subscriptions.add(this.overlayRef.backdropClick().subscribe(() => this.close()));
+      this.overlaySubscriptions = subscriptions;
+
+      return;
+    }
+
    subscriptions.add(fromEvent<PointerEvent>(document, 'pointerdown')
      .pipe(
        filter((event) => {
--- a/toju-app/src/app/domains/server-directory/feature/server-search/server-search.component.html
+++ b/toju-app/src/app/domains/server-directory/feature/server-search/server-search.component.html
@@ -1,6 +1,41 @@
 <div class="flex h-full min-h-0 flex-col">
  <div class="border-b border-border px-3 py-3">
-    <div class="flex flex-col gap-2 md:flex-row md:items-center">
+    <!--
+      Mobile-only header row:
+        [Back] ----- Search ----- [Settings]
+      Hidden on >=md where the original inline header (search bar + buttons) is used.
+    -->
+    <div class="mb-2 flex items-center gap-2 md:hidden">
+      <button
+        type="button"
+        aria-label="Back to server view"
+        class="grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-border bg-secondary text-muted-foreground transition-colors hover:bg-secondary/80"
+        [class.invisible]="!canGoBack()"
+        [disabled]="!canGoBack()"
+        (click)="goBack()"
+      >
+        <ng-icon
+          name="lucideArrowLeft"
+          class="h-5 w-5"
+        />
+      </button>
+
+      <h1 class="min-w-0 flex-1 truncate text-center text-base font-semibold text-foreground">Search</h1>
+
+      <button
+        type="button"
+        aria-label="Settings"
+        class="grid h-11 w-11 shrink-0 place-items-center rounded-lg border border-border bg-secondary text-muted-foreground transition-colors hover:bg-secondary/80"
+        (click)="openSettings()"
+      >
+        <ng-icon
+          name="lucideSettings"
+          class="h-5 w-5"
+        />
+      </button>
+    </div>
+
+    <div class="flex flex-row items-center gap-2">
      <div class="relative min-w-0 flex-1">
        <ng-icon
          name="lucideSearch"
@@ -16,6 +51,7 @@
        />
      </div>

+      <!-- Create button is shown inline next to the search input on all sizes; Settings is desktop-only here (mobile uses the top header row above). -->
      <div class="flex shrink-0 items-center gap-2">
        <button
          type="button"
@@ -27,12 +63,12 @@
            name="lucidePlus"
            class="h-4 w-4"
          />
-          Create
+          <span>Create</span>
        </button>

        <button
          type="button"
-          class="grid h-10 w-10 place-items-center rounded-lg border border-border bg-secondary transition-colors hover:bg-secondary/80"
+          class="hidden h-10 w-10 place-items-center rounded-lg border border-border bg-secondary transition-colors hover:bg-secondary/80 md:grid"
          title="Settings"
          (click)="openSettings()"
        >
@@ -60,13 +96,51 @@
    }
  </div>

+  <!-- Mobile tab strip: toggle between People and Servers panes (hidden on >=md) -->
+  <div
+    role="tablist"
+    aria-label="Search results"
+    class="flex border-b border-border md:hidden"
+  >
+    <button
+      type="button"
+      role="tab"
+      [attr.aria-selected]="mobileTab() === 'people'"
+      class="flex-1 px-3 py-2.5 text-sm font-medium transition-colors border-b-2"
+      [class.border-primary]="mobileTab() === 'people'"
+      [class.text-foreground]="mobileTab() === 'people'"
+      [class.border-transparent]="mobileTab() !== 'people'"
+      [class.text-muted-foreground]="mobileTab() !== 'people'"
+      (click)="mobileTab.set('people')"
+    >
+      People
+    </button>
+    <button
+      type="button"
+      role="tab"
+      [attr.aria-selected]="mobileTab() === 'servers'"
+      class="flex-1 px-3 py-2.5 text-sm font-medium transition-colors border-b-2"
+      [class.border-primary]="mobileTab() === 'servers'"
+      [class.text-foreground]="mobileTab() === 'servers'"
+      [class.border-transparent]="mobileTab() !== 'servers'"
+      [class.text-muted-foreground]="mobileTab() !== 'servers'"
+      (click)="mobileTab.set('servers')"
+    >
+      Servers ({{ searchResults().length }})
+    </button>
+  </div>
+
  <div class="grid min-h-0 flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[minmax(300px,380px)_1fr]">
    <app-user-search-list
      class="min-h-0 overflow-y-auto border-b border-border lg:border-b-0 lg:border-r"
+      [class.hidden]="isMobile() && mobileTab() !== 'people'"
      [searchQuery]="searchQuery"
    />

-    <section class="min-h-0 overflow-y-auto">
+    <section
+      class="min-h-0 overflow-y-auto"
+      [class.hidden]="isMobile() && mobileTab() !== 'servers'"
+    >
      <div class="sticky top-0 z-10 flex items-center justify-between border-b border-border bg-background/95 px-3 py-2 backdrop-blur">
        <div>
          <h3 class="text-sm font-semibold text-foreground">Servers</h3>
@@ -215,7 +289,7 @@
                  } @else {
                    <button
                      type="button"
-                      class="pointer-events-none scale-95 rounded-md bg-primary px-2.5 py-1.5 text-xs font-semibold text-primary-foreground opacity-0 transition-[opacity,transform] duration-75 ease-out hover:scale-100 hover:opacity-100 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-100 group-focus-within:opacity-100"
+                      class="rounded-md bg-primary px-2.5 py-1.5 text-xs font-semibold text-primary-foreground transition-[opacity,transform] duration-75 ease-out md:pointer-events-none md:scale-95 md:opacity-0 md:hover:scale-100 md:hover:opacity-100 md:group-hover:pointer-events-auto md:group-hover:scale-100 md:group-hover:opacity-100 md:group-focus-within:pointer-events-auto md:group-focus-within:scale-100 md:group-focus-within:opacity-100"
                      [attr.aria-label]="'Join ' + server.name"
                      (click)="joinServer(server)"
                    >
--- a/toju-app/src/app/domains/server-directory/feature/server-search/server-search.component.ts
+++ b/toju-app/src/app/domains/server-directory/feature/server-search/server-search.component.ts
@@ -18,6 +18,7 @@ import {
 } from 'rxjs';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
+  lucideArrowLeft,
  lucideExternalLink,
  lucideFileText,
  lucideSearch,
@@ -34,14 +35,15 @@ import {
  selectSearchResults,
  selectIsSearching,
  selectRoomsError,
-  selectSavedRooms
+  selectSavedRooms,
+  selectCurrentRoom
 } from '../../../../store/rooms/rooms.selectors';
 import {
  Room,
  User,
  type PluginRequirementSummary
 } from '../../../../shared-kernel';
-import { ExternalLinkService } from '../../../../core/platform';
+import { ExternalLinkService, ViewportService } from '../../../../core/platform';
 import { SettingsModalService } from '../../../../core/services/settings-modal.service';
 import { DatabaseService } from '../../../../infrastructure/persistence';
 import { type ServerInfo } from '../../domain/models/server-directory.model';
@@ -83,6 +85,7 @@ interface JoinPluginConsentDialog {
  ],
  viewProviders: [
    provideIcons({
+      lucideArrowLeft,
      lucideExternalLink,
      lucideFileText,
      lucideSearch,
@@ -110,14 +113,22 @@ export class ServerSearchComponent implements OnInit {
  private webrtc = inject(RealtimeSessionFacade);
  private pluginRequirements = inject(PluginRequirementService);
  private pluginStore = inject(PluginStoreService);
+  private viewport = inject(ViewportService);
  private searchSubject = new Subject<string>();
  private banLookupRequestVersion = 0;

+  /** True on mobile breakpoints. Drives the tabbed mobile layout. */
+  readonly isMobile = this.viewport.isMobile;
+
+  /** Active mobile tab. Ignored on desktop where both panes are visible side-by-side. */
+  readonly mobileTab = signal<'people' | 'servers'>('servers');
+
  searchQuery = '';
  searchResults = this.store.selectSignal(selectSearchResults);
  isSearching = this.store.selectSignal(selectIsSearching);
  error = this.store.selectSignal(selectRoomsError);
  savedRooms = this.store.selectSignal(selectSavedRooms);
+  currentRoom = this.store.selectSignal(selectCurrentRoom);
  currentUser = this.store.selectSignal(selectCurrentUser);
  activeEndpoints = this.serverDirectory.activeServers;
  bannedServerLookup = signal<Record<string, boolean>>({});
@@ -235,6 +246,24 @@ export class ServerSearchComponent implements OnInit {
    this.settingsModal.open('network');
  }

+  /**
+   * Navigate back from the Search page to the chat-room view (server rail + current server).
+   * Prefers the current room; falls back to the first saved room. No-op when the user has not
+   * joined any servers.
+   */
+  goBack(): void {
+    const target = this.currentRoom() ?? this.savedRooms()[0] ?? null;
+
+    if (target) {
+      this.store.dispatch(RoomsActions.viewServer({ room: target }));
+    }
+  }
+
+  /** True when the back button has a destination (user is in or has joined at least one server). */
+  canGoBack(): boolean {
+    return !!this.currentRoom() || this.savedRooms().length > 0;
+  }
+
  /** Join a previously saved room by converting it to a ServerInfo payload. */
  joinSavedRoom(room: Room): void {
    this.openJoinedRoom(room);
--- a/toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.html
+++ b/toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.html
@@ -63,17 +63,19 @@
          />
        </button>

-        <button
-          (click)="toggleScreenShare()"
-          type="button"
-          [class]="getCompactScreenShareClass()"
-          title="Toggle Screen Share"
-        >
-          <ng-icon
-            [name]="isScreenSharing() ? 'lucideMonitorOff' : 'lucideMonitor'"
-            class="w-4 h-4"
-          />
-        </button>
+        @if (!isMobile()) {
+          <button
+            (click)="toggleScreenShare()"
+            type="button"
+            [class]="getCompactScreenShareClass()"
+            title="Toggle Screen Share"
+          >
+            <ng-icon
+              [name]="isScreenSharing() ? 'lucideMonitorOff' : 'lucideMonitor'"
+              class="w-4 h-4"
+            />
+          </button>
+        }

        <app-debug-console
          launcherVariant="compact"
--- a/toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.ts
+++ b/toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.ts
@@ -24,6 +24,7 @@ import { loadVoiceSettingsFromStorage, saveVoiceSettingsToStorage } from '../../
 import { VoiceConnectionFacade } from '../../../../domains/voice-connection';
 import { VoicePlaybackService } from '../../../../domains/voice-connection';
 import { ScreenShareFacade, ScreenShareQuality } from '../../../../domains/screen-share';
+import { ViewportService } from '../../../../core/platform';
 import { UsersActions } from '../../../../store/users/users.actions';
 import { selectCurrentUser } from '../../../../store/users/users.selectors';
 import { DebugConsoleComponent, ScreenShareQualityDialogComponent } from '../../../../shared';
@@ -59,6 +60,8 @@ import { ThemeNodeDirective } from '../../../../domains/theme';
 export class FloatingVoiceControlsComponent implements OnInit {
  private readonly webrtcService = inject(VoiceConnectionFacade);
  private readonly screenShareService = inject(ScreenShareFacade);
+  private readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;
  private readonly voiceSessionService = inject(VoiceSessionFacade);
  private readonly voicePlayback = inject(VoicePlaybackService);
  private readonly store = inject(Store);
--- a/toju-app/src/app/features/room/chat-room/chat-room.component.html
+++ b/toju-app/src/app/features/room/chat-room/chat-room.component.html
@@ -1,71 +1,188 @@
 <div class="flex h-full flex-col bg-background">
  @if (currentRoom()) {
-    <div
-      class="grid min-h-0 flex-1 overflow-hidden"
-      [ngStyle]="roomLayoutStyles()"
-    >
-      <aside
-        appThemeNode="chatRoomChannelsPanel"
-        class="flex min-h-0 overflow-hidden border-r border-border bg-card"
-        [ngStyle]="channelsPanelLayoutStyles()"
+    @if (isMobile()) {
+      <!-- Mobile: Swiper-driven page stack (channels -> main -> members) -->
+      <swiper-container
+        #swiperEl
+        class="block min-h-0 w-full flex-1"
+        slides-per-view="1"
+        space-between="0"
+        initial-slide="0"
+        threshold="10"
+        resistance-ratio="0"
      >
-        <app-rooms-side-panel
-          panelMode="channels"
-          class="block h-full w-full"
-        />
-      </aside>
-
-      <main
-        appThemeNode="chatRoomMainPanel"
-        class="relative min-h-0 min-w-0 overflow-hidden bg-background"
-        [ngStyle]="mainPanelLayoutStyles()"
-      >
-        @if (!isVoiceWorkspaceExpanded()) {
-          @if (hasTextChannels()) {
-            <div class="h-full overflow-hidden">
-              <app-chat-messages />
+        <swiper-slide class="block h-full w-full">
+          <div class="flex h-full w-full min-h-0 overflow-hidden">
+            <app-servers-rail class="block h-full shrink-0" />
+            <div class="flex min-h-0 flex-1 overflow-hidden border-l border-border bg-card">
+              <app-rooms-side-panel
+                panelMode="channels"
+                class="block h-full w-full"
+              />
            </div>
-          } @else {
-            <div
-              appThemeNode="chatRoomEmptyState"
-              class="flex h-full items-center justify-center px-6"
-            >
-              <div class="max-w-md text-center text-muted-foreground">
-                <div
-                  data-theme-slot="icon"
-                  class="theme-icon-slot mx-auto mb-4 h-14 w-14 items-center justify-center rounded-3xl border border-border/70 bg-secondary/70 bg-center bg-cover bg-no-repeat text-sm font-semibold uppercase tracking-[0.18em] text-foreground"
-                ></div>
+          </div>
+        </swiper-slide>
+
+        <swiper-slide class="block h-full w-full">
+          <div class="flex h-full w-full min-h-0 flex-col overflow-hidden bg-background">
+            <div class="flex shrink-0 items-center gap-2 border-b border-border bg-card px-3 py-2">
+              <button
+                type="button"
+                (click)="setMobilePage('channels')"
+                class="grid h-11 w-11 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                aria-label="Back to channels"
+              >
                <ng-icon
-                  name="lucideHash"
-                  class="mx-auto mb-4 h-16 w-16 opacity-30"
+                  name="lucideChevronLeft"
+                  class="h-5 w-5"
                />
-                <h2
-                  data-theme-slot="text"
-                  class="mb-2 text-xl font-medium text-foreground"
-                >
-                  No text channels
-                </h2>
-                <p class="text-sm">There are no existing text channels currently.</p>
+              </button>
+              <div class="min-w-0 flex-1">
+                @if (activeChannel(); as channel) {
+                  <p class="flex min-w-0 items-center gap-1 truncate text-sm font-semibold text-foreground">
+                    @if (channel.type === 'text') {
+                      <ng-icon
+                        name="lucideHash"
+                        class="h-4 w-4 shrink-0 text-muted-foreground"
+                      />
+                    }
+                    <span class="truncate">{{ channel.name }}</span>
+                  </p>
+                } @else {
+                  <p class="truncate text-sm font-semibold text-foreground">{{ currentRoom()?.name }}</p>
+                }
              </div>
+              <button
+                type="button"
+                (click)="setMobilePage('members')"
+                class="grid h-11 w-11 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                aria-label="Show members"
+              >
+                <ng-icon
+                  name="lucideUsers"
+                  class="h-5 w-5"
+                />
+              </button>
            </div>
-          }
-        }

-        <app-voice-workspace />
-      </main>
+            <main class="relative min-h-0 min-w-0 flex-1 overflow-hidden bg-background">
+              @if (!isVoiceWorkspaceExpanded()) {
+                @if (hasTextChannels()) {
+                  <div class="h-full overflow-hidden">
+                    <app-chat-messages />
+                  </div>
+                } @else {
+                  <div class="flex h-full items-center justify-center px-6">
+                    <div class="max-w-md text-center text-muted-foreground">
+                      <ng-icon
+                        name="lucideHash"
+                        class="mx-auto mb-4 h-16 w-16 opacity-30"
+                      />
+                      <h2 class="mb-2 text-xl font-medium text-foreground">No text channels</h2>
+                      <p class="text-sm">There are no existing text channels currently.</p>
+                    </div>
+                  </div>
+                }
+              }

-      <aside
-        appThemeNode="chatRoomMembersPanel"
-        class="flex min-h-0 overflow-hidden border-l border-border bg-card"
-        [ngStyle]="membersPanelLayoutStyles()"
+              <app-voice-workspace />
+            </main>
+          </div>
+        </swiper-slide>
+
+        <swiper-slide class="block h-full w-full">
+          <div class="flex h-full w-full min-h-0 flex-col overflow-hidden bg-card">
+            <div class="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2">
+              <button
+                type="button"
+                (click)="setMobilePage('main')"
+                class="grid h-11 w-11 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                aria-label="Back to chat"
+              >
+                <ng-icon
+                  name="lucideChevronLeft"
+                  class="h-5 w-5"
+                />
+              </button>
+              <p class="truncate text-sm font-semibold text-foreground">Members</p>
+            </div>
+            <app-rooms-side-panel
+              panelMode="users"
+              [showVoiceControls]="false"
+              class="block h-full w-full"
+            />
+          </div>
+        </swiper-slide>
+      </swiper-container>
+    } @else {
+      <!-- Desktop: theme-driven 3-pane grid layout -->
+      <div
+        class="grid min-h-0 flex-1 overflow-hidden"
+        [ngStyle]="roomLayoutStyles()"
      >
-        <app-rooms-side-panel
-          panelMode="users"
-          [showVoiceControls]="false"
-          class="block h-full w-full"
-        />
-      </aside>
-    </div>
+        <aside
+          appThemeNode="chatRoomChannelsPanel"
+          class="flex min-h-0 overflow-hidden border-r border-border bg-card"
+          [ngStyle]="channelsPanelLayoutStyles()"
+        >
+          <app-rooms-side-panel
+            panelMode="channels"
+            class="block h-full w-full"
+          />
+        </aside>
+
+        <main
+          appThemeNode="chatRoomMainPanel"
+          class="relative min-h-0 min-w-0 overflow-hidden bg-background"
+          [ngStyle]="mainPanelLayoutStyles()"
+        >
+          @if (!isVoiceWorkspaceExpanded()) {
+            @if (hasTextChannels()) {
+              <div class="h-full overflow-hidden">
+                <app-chat-messages />
+              </div>
+            } @else {
+              <div
+                appThemeNode="chatRoomEmptyState"
+                class="flex h-full items-center justify-center px-6"
+              >
+                <div class="max-w-md text-center text-muted-foreground">
+                  <div
+                    data-theme-slot="icon"
+                    class="theme-icon-slot mx-auto mb-4 h-14 w-14 items-center justify-center rounded-3xl border border-border/70 bg-secondary/70 bg-center bg-cover bg-no-repeat text-sm font-semibold uppercase tracking-[0.18em] text-foreground"
+                  ></div>
+                  <ng-icon
+                    name="lucideHash"
+                    class="mx-auto mb-4 h-16 w-16 opacity-30"
+                  />
+                  <h2
+                    data-theme-slot="text"
+                    class="mb-2 text-xl font-medium text-foreground"
+                  >
+                    No text channels
+                  </h2>
+                  <p class="text-sm">There are no existing text channels currently.</p>
+                </div>
+              </div>
+            }
+          }
+
+          <app-voice-workspace />
+        </main>
+
+        <aside
+          appThemeNode="chatRoomMembersPanel"
+          class="flex min-h-0 overflow-hidden border-l border-border bg-card"
+          [ngStyle]="membersPanelLayoutStyles()"
+        >
+          <app-rooms-side-panel
+            panelMode="users"
+            [showVoiceControls]="false"
+            class="block h-full w-full"
+          />
+        </aside>
+      </div>
+    }
  } @else {
    <div
      appThemeNode="chatRoomEmptyState"
@@ -91,3 +208,4 @@
    </div>
  }
 </div>
+
--- a/toju-app/src/app/features/room/chat-room/chat-room.component.ts
+++ b/toju-app/src/app/features/room/chat-room/chat-room.component.ts
@@ -1,9 +1,14 @@
 /* eslint-disable @typescript-eslint/member-ordering */
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
  Component,
+  ElementRef,
+  NgZone,
  computed,
+  effect,
  inject,
-  signal
+  signal,
+  viewChild
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Store } from '@ngrx/store';
@@ -21,13 +26,37 @@ import {
 import { ChatMessagesComponent } from '../../../domains/chat/feature/chat-messages/chat-messages.component';
 import { RoomsSidePanelComponent } from '../rooms-side-panel/rooms-side-panel.component';
 import { VoiceWorkspaceComponent } from '../voice-workspace/voice-workspace.component';
+import { ServersRailComponent } from '../../servers/servers-rail/servers-rail.component';

-import { selectCurrentRoom, selectTextChannels } from '../../../store/rooms/rooms.selectors';
+import {
+  selectActiveChannelId,
+  selectCurrentRoom,
+  selectTextChannels
+} from '../../../store/rooms/rooms.selectors';
 import { SettingsModalService } from '../../../core/services/settings-modal.service';
+import { ViewportService } from '../../../core/platform';
 import { selectIsCurrentUserAdmin } from '../../../store/users/users.selectors';
 import { VoiceWorkspaceService } from '../../../domains/voice-session';
 import { ThemeNodeDirective, ThemeService } from '../../../domains/theme';

+/** Mobile-only page identifier within the chat-room view. */
+export type ChatRoomMobilePage = 'channels' | 'main' | 'members';
+
+const PAGE_TO_INDEX: Record<ChatRoomMobilePage, number> = {
+  channels: 0,
+  main: 1,
+  members: 2
+};
+const INDEX_TO_PAGE: ChatRoomMobilePage[] = [
+  'channels',
+  'main',
+  'members'
+];
+
+interface SwiperElement extends HTMLElement {
+  swiper?: { activeIndex: number; slideTo: (index: number, speed?: number) => void };
+}
+
@Component({
  selector: 'app-chat-room',
  standalone: true,
@@ -37,6 +66,7 @@ import { ThemeNodeDirective, ThemeService } from '../../../domains/theme';
    ChatMessagesComponent,
    VoiceWorkspaceComponent,
    RoomsSidePanelComponent,
+    ServersRailComponent,
    ThemeNodeDirective
  ],
  viewProviders: [
@@ -50,22 +80,52 @@ import { ThemeNodeDirective, ThemeService } from '../../../domains/theme';
      lucideChevronLeft
    })
  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './chat-room.component.html'
 })
 /**
 * Main chat room view combining the messages panel, side panels, and admin controls.
+ *
+ * On desktop the three panels (channels | main | members) are rendered side-by-side via the
+ * theme-driven grid layout. On mobile the same panels are rendered as Swiper slides
+ * (channels -> main -> members) so the user can swipe between them. `mobilePage`
+ * remains the source of truth and stays in sync with the active slide.
 */
 export class ChatRoomComponent {
  private readonly store = inject(Store);
  private readonly settingsModal = inject(SettingsModalService);
  private readonly theme = inject(ThemeService);
+  private readonly viewport = inject(ViewportService);
+  private readonly zone = inject(NgZone);
  private voiceWorkspace = inject(VoiceWorkspaceService);
+  private lastSeenChannelId: string | null = null;
+  private lastSeenRoomId: string | null = null;
+  private swiperListenerAttached: SwiperElement | null = null;
  showMenu = signal(false);
  showAdminPanel = signal(false);

+  /** Active page within the mobile single-pane navigation flow. Ignored on desktop. */
+  readonly mobilePage = signal<ChatRoomMobilePage>('channels');
+  readonly isMobile = this.viewport.isMobile;
+  readonly swiperRef = viewChild<ElementRef<SwiperElement>>('swiperEl');
+
  currentRoom = this.store.selectSignal(selectCurrentRoom);
  isAdmin = this.store.selectSignal(selectIsCurrentUserAdmin);
  textChannels = this.store.selectSignal(selectTextChannels);
+  activeChannelId = this.store.selectSignal(selectActiveChannelId);
+  /**
+   * Resolved channel object for `activeChannelId`. Used on mobile to title the main pane
+   * with the selected channel name instead of the room name.
+   */
+  activeChannel = computed(() => {
+    const id = this.activeChannelId();
+
+    if (!id) {
+      return null;
+    }
+
+    return this.currentRoom()?.channels?.find((channel) => channel.id === id) ?? null;
+  });
  isVoiceWorkspaceExpanded = this.voiceWorkspace.isExpanded;
  hasTextChannels = computed(() => this.textChannels().length > 0);
  roomLayoutStyles = computed(() => this.theme.getLayoutContainerStyles('roomLayout'));
@@ -73,6 +133,82 @@ export class ChatRoomComponent {
  mainPanelLayoutStyles = computed(() => this.theme.getLayoutItemStyles('chatRoomMainPanel'));
  membersPanelLayoutStyles = computed(() => this.theme.getLayoutItemStyles('chatRoomMembersPanel'));

+  constructor() {
+    // When entering a server, always land on the channels list ("first page") on mobile, even
+    // if a default channel is pre-selected. Once inside the server, *changing* channels
+    // (i.e. user taps a channel in the list) advances to the main pane so the user sees the chat.
+    effect(() => {
+      const channelId = this.activeChannelId();
+      const roomId = this.currentRoom()?.id ?? null;
+      const isRoomChange = roomId !== this.lastSeenRoomId;
+
+      this.lastSeenRoomId = roomId;
+
+      if (!this.isMobile()) {
+        this.lastSeenChannelId = channelId ?? null;
+        return;
+      }
+
+      if (isRoomChange) {
+        // New server: show the channels list and don't auto-advance.
+        this.lastSeenChannelId = channelId ?? null;
+        this.mobilePage.set('channels');
+        return;
+      }
+
+      if (channelId && channelId !== this.lastSeenChannelId) {
+        this.mobilePage.set('main');
+      }
+
+      this.lastSeenChannelId = channelId ?? null;
+    });
+
+    // Mirror `mobilePage` into the Swiper instance so back-button taps and the
+    // channel-selected auto-advance actually slide the carousel.
+    effect(() => {
+      const el = this.swiperRef()?.nativeElement;
+      const targetIndex = PAGE_TO_INDEX[this.mobilePage()];
+
+      if (el?.swiper && el.swiper.activeIndex !== targetIndex) {
+        el.swiper.slideTo(targetIndex);
+      }
+    });
+
+    // Bridge Swiper's slidechange event back into `mobilePage`.
+    effect((onCleanup) => {
+      const el = this.swiperRef()?.nativeElement;
+
+      if (!el || el === this.swiperListenerAttached) {
+        return;
+      }
+
+      const handler = (event: Event) => {
+        const detail = (event as CustomEvent).detail;
+        const swiper = Array.isArray(detail) ? detail[0] : detail;
+        const index = swiper?.activeIndex ?? 0;
+        const page = INDEX_TO_PAGE[index] ?? 'channels';
+
+        this.zone.run(() => this.mobilePage.set(page));
+      };
+
+      el.addEventListener('swiperslidechange', handler);
+      this.swiperListenerAttached = el;
+
+      onCleanup(() => {
+        el.removeEventListener('swiperslidechange', handler);
+
+        if (this.swiperListenerAttached === el) {
+          this.swiperListenerAttached = null;
+        }
+      });
+    });
+  }
+
+  /** Set the active mobile page. No-op on desktop. */
+  setMobilePage(page: ChatRoomMobilePage): void {
+    this.mobilePage.set(page);
+  }
+
  /** Open the settings modal to the Server admin page for the current room. */
  toggleAdminPanel() {
    const room = this.currentRoom();
@@ -82,3 +218,4 @@ export class ChatRoomComponent {
    }
  }
 }
+
--- a/toju-app/src/app/features/room/voice-workspace/voice-workspace.component.html
+++ b/toju-app/src/app/features/room/voice-workspace/voice-workspace.component.html
@@ -257,6 +257,7 @@
                    <button
                      type="button"
                      class="inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2.5 font-medium text-primary-foreground transition hover:bg-primary/90"
+                      [class.hidden]="isMobile()"
                      (click)="toggleScreenShare()"
                    >
                      <ng-icon
--- a/toju-app/src/app/features/room/voice-workspace/voice-workspace.component.ts
+++ b/toju-app/src/app/features/room/voice-workspace/voice-workspace.component.ts
@@ -43,6 +43,7 @@ import {
  ScreenShareQuality,
  ScreenShareStartOptions
 } from '../../../domains/screen-share';
+import { ViewportService } from '../../../core/platform';
 import { selectCurrentRoom } from '../../../store/rooms/rooms.selectors';
 import { UsersActions } from '../../../store/users/users.actions';
 import { selectCurrentUser, selectOnlineUsers } from '../../../store/users/users.selectors';
@@ -90,6 +91,8 @@ export class VoiceWorkspaceComponent {
  private readonly store = inject(Store);
  private readonly webrtc = inject(VoiceConnectionFacade);
  private readonly screenShare = inject(ScreenShareFacade);
+  private readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;
  private readonly voicePlayback = inject(VoicePlaybackService);
  private readonly workspacePlayback = inject(VoiceWorkspacePlaybackService);
  private readonly voiceSession = inject(VoiceSessionFacade);
--- a/toju-app/src/app/features/settings/settings-modal/settings-modal.component.html
+++ b/toju-app/src/app/features/settings/settings-modal/settings-modal.component.html
@@ -1,8 +1,8 @@
 <!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->
@if (isOpen() && !isThemeStudioFullscreen()) {
-  <!-- Backdrop -->
+  <!-- Backdrop (hidden on mobile where the modal is full-screen) -->
  <div
-    class="fixed inset-0 z-[90] bg-black/80 backdrop-blur-sm transition-opacity duration-200"
+    class="fixed inset-0 z-[90] hidden bg-black/80 backdrop-blur-sm transition-opacity duration-200 md:block"
    [class.opacity-100]="animating()"
    [class.opacity-0]="!animating()"
    (click)="onBackdropClick()"
@@ -13,15 +13,14 @@
    aria-label="Close settings"
  ></div>

-  <!-- Modal -->
-  <div class="fixed inset-0 z-[91] flex items-center justify-center p-4 pointer-events-none">
+  <!-- Modal: full-screen page on mobile, centered dialog on desktop -->
+  <div class="fixed inset-0 z-[91] flex pointer-events-none md:items-center md:justify-center md:p-4">
    <div
      appThemeNode="settingsModalSurface"
-      class="pointer-events-auto relative flex w-full max-w-5xl overflow-hidden rounded-lg border border-border bg-card shadow-lg transition-all duration-200"
-      style="height: min(720px, 88vh)"
+      class="pointer-events-auto relative flex h-full w-full overflow-hidden bg-card transition-all duration-200 md:h-[min(720px,88vh)] md:max-w-5xl md:rounded-lg md:border md:border-border md:shadow-lg"
      [class.scale-100]="animating()"
      [class.opacity-100]="animating()"
-      [class.scale-95]="!animating()"
+      [class.md:scale-95]="!animating()"
      [class.opacity-0]="!animating()"
      (click)="$event.stopPropagation()"
      (keydown.enter)="$event.stopPropagation()"
@@ -31,18 +30,32 @@
      aria-labelledby="settings-modal-title"
      tabindex="-1"
    >
-      <!-- Side Navigation -->
+      <!-- Side Navigation: persistent on desktop; full-width "menu" page on mobile -->
      <nav
        appThemeNode="settingsModalNav"
-        class="flex w-56 flex-shrink-0 flex-col border-r border-border bg-card"
+        class="flex w-full flex-shrink-0 flex-col border-r border-border bg-card md:w-56"
+        [class.hidden]="isMobile() && mobilePage() !== 'menu'"
      >
-        <div class="border-b border-border px-3 py-3">
+        <div class="flex items-center justify-between border-b border-border px-3 py-3">
          <h2
            id="settings-modal-title"
            class="text-lg font-semibold text-foreground"
          >
            Settings
          </h2>
+          @if (isMobile()) {
+            <button
+              (click)="close()"
+              type="button"
+              aria-label="Close settings"
+              class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground md:hidden"
+            >
+              <ng-icon
+                name="lucideX"
+                class="w-5 h-5"
+              />
+            </button>
+          }
        </div>

        <div class="flex-1 overflow-y-auto py-2">
@@ -52,8 +65,8 @@
            <button
              (click)="navigate(page.id)"
              type="button"
-              class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors"
-              [class.bg-secondary]="activePage() === page.id"
+              class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-2.5 text-sm transition-colors md:py-1.5"
+              [class.bg-secondary]="activePage() === page.id && !isMobile()"
              [class.text-foreground]="activePage() === page.id"
              [class.font-medium]="activePage() === page.id"
              [class.text-muted-foreground]="activePage() !== page.id"
@@ -92,8 +105,8 @@
                  <button
                    (click)="navigate(page.id)"
                    type="button"
-                    class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors"
-                    [class.bg-secondary]="activePage() === page.id"
+                    class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-2.5 text-sm transition-colors md:py-1.5"
+                    [class.bg-secondary]="activePage() === page.id && !isMobile()"
                    [class.text-foreground]="activePage() === page.id"
                    [class.font-medium]="activePage() === page.id"
                    [class.text-muted-foreground]="activePage() !== page.id"
@@ -123,66 +136,85 @@
        </div>
      </nav>

-      <!-- Content -->
-      <div class="flex-1 flex flex-col min-w-0">
+      <!-- Content: shown alongside nav on desktop; full-width "detail" page on mobile -->
+      <div
+        class="flex flex-1 flex-col min-w-0"
+        [class.hidden]="isMobile() && mobilePage() !== 'detail'"
+      >
        <!-- Header -->
        <div
          appThemeNode="settingsModalHeader"
-          class="flex items-center justify-between border-b border-border px-5 py-3 flex-shrink-0"
+          class="flex items-center justify-between border-b border-border px-3 py-3 flex-shrink-0 md:px-5"
        >
-          <h3 class="text-lg font-semibold text-foreground">
-            @switch (activePage()) {
-              @case ('general') {
-                General
-              }
-              @case ('plugins') {
-                Client Plugins
-              }
-              @case ('network') {
-                Network
-              }
-              @case ('theme') {
-                Theme Studio
-              }
-              @case ('notifications') {
-                Notifications
-              }
-              @case ('voice') {
-                Voice & Audio
-              }
-              @case ('updates') {
-                Updates
-              }
-              @case ('localApi') {
-                Local API
-              }
-              @case ('data') {
-                Data
-              }
-              @case ('debugging') {
-                Debugging
-              }
-              @case ('server') {
-                Server Settings
-              }
-              @case ('serverPlugins') {
-                Server Plugins
-              }
-              @case ('members') {
-                Members
-              }
-              @case ('bans') {
-                Bans
-              }
-              @case ('permissions') {
-                Permissions
-              }
+          <div class="flex min-w-0 items-center gap-1">
+            @if (isMobile()) {
+              <button
+                (click)="backToMenu()"
+                type="button"
+                aria-label="Back to settings menu"
+                class="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground md:hidden"
+              >
+                <ng-icon
+                  name="lucideChevronLeft"
+                  class="w-5 h-5"
+                />
+              </button>
            }
-          </h3>
+            <h3 class="truncate text-lg font-semibold text-foreground">
+              @switch (activePage()) {
+                @case ('general') {
+                  General
+                }
+                @case ('plugins') {
+                  Client Plugins
+                }
+                @case ('network') {
+                  Network
+                }
+                @case ('theme') {
+                  Theme Studio
+                }
+                @case ('notifications') {
+                  Notifications
+                }
+                @case ('voice') {
+                  Voice & Audio
+                }
+                @case ('updates') {
+                  Updates
+                }
+                @case ('localApi') {
+                  Local API
+                }
+                @case ('data') {
+                  Data
+                }
+                @case ('debugging') {
+                  Debugging
+                }
+                @case ('server') {
+                  Server Settings
+                }
+                @case ('serverPlugins') {
+                  Server Plugins
+                }
+                @case ('members') {
+                  Members
+                }
+                @case ('bans') {
+                  Bans
+                }
+                @case ('permissions') {
+                  Permissions
+                }
+              }
+            </h3>
+          </div>
          <div class="flex items-center gap-2">
            <button
              (click)="close()"
              type="button"
+              aria-label="Close settings"
              class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
            >
              <ng-icon
--- a/toju-app/src/app/features/settings/settings-modal/settings-modal.component.ts
+++ b/toju-app/src/app/features/settings/settings-modal/settings-modal.component.ts
@@ -17,6 +17,7 @@ import {
  lucideX,
  lucideBug,
  lucideBell,
+  lucideChevronLeft,
  lucideDownload,
  lucideGlobe,
  lucideAudioLines,
@@ -30,6 +31,7 @@ import {
 } from '@ng-icons/lucide';

 import { SettingsModalService, SettingsPage } from '../../../core/services/settings-modal.service';
+import { ViewportService } from '../../../core/platform';
 import { RealtimeSessionFacade } from '../../../core/realtime';
 import { selectSavedRooms, selectCurrentRoom } from '../../../store/rooms/rooms.selectors';
 import { selectCurrentUser } from '../../../store/users/users.selectors';
@@ -83,6 +85,7 @@ import {
      lucideX,
      lucideBug,
      lucideBell,
+      lucideChevronLeft,
      lucideDownload,
      lucideGlobe,
      lucideAudioLines,
@@ -103,9 +106,21 @@ export class SettingsModalComponent {
  private webrtc = inject(RealtimeSessionFacade);
  private theme = inject(ThemeService);
  private themeLibrary = inject(ThemeLibraryService);
+  private viewport = inject(ViewportService);
  readonly thirdPartyLicenses: readonly ThirdPartyLicense[] = THIRD_PARTY_LICENSES;
  private lastRequestedServerId: string | null = null;

+  /** True on mobile breakpoints. Drives the full-screen, page-stack layout. */
+  readonly isMobile = this.viewport.isMobile;
+
+  /**
+   * Active mobile sub-page within the settings flow.
+   * 'menu'   -> the section list (nav)
+   * 'detail' -> the selected page content
+   * Ignored on desktop.
+   */
+  readonly mobilePage = signal<'menu' | 'detail'>('menu');
+
  private permissionsComponent = viewChild<PermissionsSettingsComponent>('permissionsComp');

  savedRooms = this.store.selectSignal(selectSavedRooms);
@@ -299,6 +314,11 @@ export class SettingsModalComponent {
      }

      this.animating.set(true);
+
+      // On mobile, always start on the section list so the user picks the page first.
+      if (this.isMobile()) {
+        this.mobilePage.set('menu');
+      }
    });

    effect(() => {
@@ -360,6 +380,12 @@ export class SettingsModalComponent {
    }

    if (this.isOpen()) {
+      // On mobile, Escape on the detail page just navigates back to the menu.
+      if (this.isMobile() && this.mobilePage() === 'detail') {
+        this.backToMenu();
+        return;
+      }
+
      this.close();
    }
  }
@@ -386,6 +412,16 @@ export class SettingsModalComponent {

  navigate(page: SettingsPage): void {
    this.modal.navigate(page);
+
+    // On mobile, advance to the detail page so the user sees the selected pane.
+    if (this.isMobile()) {
+      this.mobilePage.set('detail');
+    }
+  }
+
+  /** Go back to the section list on mobile. No-op on desktop. */
+  backToMenu(): void {
+    this.mobilePage.set('menu');
  }

  openThemeStudio(): void {
--- a/toju-app/src/app/features/shell/native-context-menu/native-context-menu.component.ts
+++ b/toju-app/src/app/features/shell/native-context-menu/native-context-menu.component.ts
@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { ElectronBridgeService } from '../../../core/platform/electron/electron-bridge.service';
+import { ViewportService } from '../../../core/platform/viewport.service';
 import { ContextMenuComponent } from '../../../shared';
 import type { ContextMenuParams } from '../../../core/platform/electron/electron-api.models';

@@ -55,11 +56,19 @@ export class NativeContextMenuComponent implements OnInit, OnDestroy {

  private readonly document = inject(DOCUMENT);
  private readonly electronBridge = inject(ElectronBridgeService);
+  private readonly viewport = inject(ViewportService);
  private cleanup: (() => void) | null = null;
  private selectionSnapshot: ContextMenuSelectionSnapshot | null = null;

  @HostListener('document:contextmenu', ['$event'])
  onDocumentContextMenu(event: MouseEvent): void {
+    // On mobile (non-Electron), let the OS-native context menu handle text inputs,
+    // selection, links, and images. Intercepting here suppresses the OS menu and
+    // leaves the user without copy/paste/select-all affordances.
+    if (this.viewport.isMobile() && !this.electronBridge.isAvailable) {
+      return;
+    }
+
    this.captureSelectionSnapshot(event);

    if (this.electronBridge.isAvailable) {
--- a/toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.html
+++ b/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>
--- a/toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.scss
+++ b/toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.scss
@@ -0,0 +1,27 @@
+/*
+ * Bottom sheet slide-up animation. Applied on initial mount so the panel slides into view.
+ * Drag offsets are applied inline via [style.transform], which override this animation.
+ */
+:host {
+  display: contents;
+}
+
+.bottom-sheet-panel {
+  animation: bottom-sheet-slide-up 220ms ease-out;
+}
+
+@keyframes bottom-sheet-slide-up {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bottom-sheet-panel {
+    animation: none;
+  }
+}
--- a/toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.ts
+++ b/toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.ts
@@ -0,0 +1,102 @@
+import {
+  Component,
+  HostListener,
+  computed,
+  input,
+  output,
+  signal
+} from '@angular/core';
+import { ThemeNodeDirective } from '../../../domains/theme';
+
+/**
+ * Mobile bottom-sheet container.
+ *
+ * Renders a backdrop + a panel anchored to the bottom of the viewport that slides up from below.
+ * Intended for use on phone-sized viewports where context menus, action sheets, and confirmation
+ * dialogs are better presented as bottom sheets than as floating popovers or centered modals.
+ *
+ * The component is layout-only: callers project their content via `<ng-content>` and listen for
+ * the `dismissed` output to close themselves. Drag-to-dismiss is supported via touch gestures.
+ *
+ * Desktop callers should not render this component; use the original popover/modal layout instead.
+ *
+ * @example
+ * ```html
+ * @if (isMobile()) {
+ *   <app-bottom-sheet (dismissed)="close()">
+ *     <my-menu-items />
+ *   </app-bottom-sheet>
+ * }
+ * ```
+ */
+@Component({
+  selector: 'app-bottom-sheet',
+  standalone: true,
+  imports: [ThemeNodeDirective],
+  templateUrl: './bottom-sheet.component.html',
+  styleUrl: './bottom-sheet.component.scss'
+})
+export class BottomSheetComponent {
+  /** Optional title rendered at the top of the sheet. Omit for an unlabeled action sheet. */
+  readonly title = input<string | null>(null);
+
+  /** Optional ARIA label when no visible title is provided. */
+  readonly ariaLabel = input<string>('Menu');
+
+  /** Emits when the user dismisses the sheet (backdrop tap, swipe-down, or Escape). */
+  readonly dismissed = output<undefined>();
+
+  /** Pixels the sheet is currently dragged downward. Drives the translate transform. */
+  protected readonly dragOffset = signal(0);
+
+  /** Visible transform offset in CSS pixels (only positive values move the sheet down). */
+  protected readonly translateY = computed(() => Math.max(0, this.dragOffset()));
+
+  private touchStartY: number | null = null;
+
+  @HostListener('document:keydown.escape')
+  protected onEscape(): void {
+    this.dismissed.emit(undefined);
+  }
+
+  protected onBackdropClick(): void {
+    this.dismissed.emit(undefined);
+  }
+
+  protected onHandleTouchStart(event: TouchEvent): void {
+    const touch = event.touches[0];
+
+    if (!touch) {
+      return;
+    }
+
+    this.touchStartY = touch.clientY;
+  }
+
+  protected onHandleTouchMove(event: TouchEvent): void {
+    if (this.touchStartY === null) {
+      return;
+    }
+
+    const touch = event.touches[0];
+
+    if (!touch) {
+      return;
+    }
+
+    const delta = touch.clientY - this.touchStartY;
+
+    // Only allow dragging downward; ignore upward drags.
+    this.dragOffset.set(Math.max(0, delta));
+  }
+
+  protected onHandleTouchEnd(): void {
+    // Dismiss if the user dragged the sheet down by more than 80px; otherwise snap back.
+    if (this.dragOffset() > 80) {
+      this.dismissed.emit(undefined);
+    }
+
+    this.touchStartY = null;
+    this.dragOffset.set(0);
+  }
+}
--- a/toju-app/src/app/shared/components/confirm-dialog/confirm-dialog.component.html
+++ b/toju-app/src/app/shared/components/confirm-dialog/confirm-dialog.component.html
@@ -1,46 +1,85 @@
-<!-- Backdrop -->
-<div
-  class="fixed inset-0 z-40 bg-black/30"
-  (click)="cancelled.emit(undefined)"
-  (keydown.enter)="cancelled.emit(undefined)"
-  (keydown.space)="cancelled.emit(undefined)"
-  role="button"
-  tabindex="0"
-  aria-label="Close dialog"
-></div>
-
-<!-- Dialog -->
-<div
-  appThemeNode="confirmDialogSurface"
-  class="fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg shadow-lg"
-  [class]="widthClass()"
->
-  <div class="p-4">
-    <h4 class="font-semibold text-foreground mb-2">{{ title() }}</h4>
-    <div class="text-sm text-muted-foreground">
+<!--
+  Two presentations:
+  - Mobile: rendered through `app-bottom-sheet` so confirmations slide up from the bottom.
+  - Desktop: original centered modal with backdrop.
+-->
+@if (isMobile()) {
+  <app-bottom-sheet
+    [title]="title()"
+    [ariaLabel]="title()"
+    (dismissed)="cancelled.emit(undefined)"
+  >
+    <div class="px-4 pb-3 pt-1 text-sm text-muted-foreground">
      <ng-content />
    </div>
+    <div class="flex gap-2 border-t border-border p-3">
+      <button
+        (click)="cancelled.emit(undefined)"
+        type="button"
+        class="min-h-11 flex-1 rounded-lg bg-secondary px-3 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
+      >
+        {{ cancelLabel() }}
+      </button>
+      <button
+        (click)="confirmed.emit(undefined)"
+        type="button"
+        class="min-h-11 flex-1 rounded-lg px-3 py-2 text-sm transition-colors"
+        [class.bg-primary]="variant() === 'primary'"
+        [class.text-primary-foreground]="variant() === 'primary'"
+        [class.hover:bg-primary/90]="variant() === 'primary'"
+        [class.bg-destructive]="variant() === 'danger'"
+        [class.text-destructive-foreground]="variant() === 'danger'"
+        [class.hover:bg-destructive/90]="variant() === 'danger'"
+      >
+        {{ confirmLabel() }}
+      </button>
+    </div>
+  </app-bottom-sheet>
+} @else {
+  <!-- Backdrop -->
+  <div
+    class="fixed inset-0 z-40 bg-black/30"
+    (click)="cancelled.emit(undefined)"
+    (keydown.enter)="cancelled.emit(undefined)"
+    (keydown.space)="cancelled.emit(undefined)"
+    role="button"
+    tabindex="0"
+    aria-label="Close dialog"
+  ></div>
+
+  <!-- Dialog -->
+  <div
+    appThemeNode="confirmDialogSurface"
+    class="fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg shadow-lg"
+    [class]="widthClass()"
+  >
+    <div class="p-4">
+      <h4 class="font-semibold text-foreground mb-2">{{ title() }}</h4>
+      <div class="text-sm text-muted-foreground">
+        <ng-content />
+      </div>
+    </div>
+    <div class="flex gap-2 p-3 border-t border-border">
+      <button
+        (click)="cancelled.emit(undefined)"
+        type="button"
+        class="flex-1 px-3 py-2 bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm"
+      >
+        {{ cancelLabel() }}
+      </button>
+      <button
+        (click)="confirmed.emit(undefined)"
+        type="button"
+        class="flex-1 px-3 py-2 rounded-lg transition-colors text-sm"
+        [class.bg-primary]="variant() === 'primary'"
+        [class.text-primary-foreground]="variant() === 'primary'"
+        [class.hover:bg-primary/90]="variant() === 'primary'"
+        [class.bg-destructive]="variant() === 'danger'"
+        [class.text-destructive-foreground]="variant() === 'danger'"
+        [class.hover:bg-destructive/90]="variant() === 'danger'"
+      >
+        {{ confirmLabel() }}
+      </button>
+    </div>
  </div>
-  <div class="flex gap-2 p-3 border-t border-border">
-    <button
-      (click)="cancelled.emit(undefined)"
-      type="button"
-      class="flex-1 px-3 py-2 bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm"
-    >
-      {{ cancelLabel() }}
-    </button>
-    <button
-      (click)="confirmed.emit(undefined)"
-      type="button"
-      class="flex-1 px-3 py-2 rounded-lg transition-colors text-sm"
-      [class.bg-primary]="variant() === 'primary'"
-      [class.text-primary-foreground]="variant() === 'primary'"
-      [class.hover:bg-primary/90]="variant() === 'primary'"
-      [class.bg-destructive]="variant() === 'danger'"
-      [class.text-destructive-foreground]="variant() === 'danger'"
-      [class.hover:bg-destructive/90]="variant() === 'danger'"
-    >
-      {{ confirmLabel() }}
-    </button>
-  </div>
-</div>
+}
--- a/toju-app/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts
+++ b/toju-app/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts
@@ -1,15 +1,18 @@
 import {
  Component,
+  HostListener,
+  inject,
  input,
-  output,
-  HostListener
+  output
 } from '@angular/core';
 import { ThemeNodeDirective } from '../../../domains/theme';
+import { ViewportService } from '../../../core/platform';
+import { BottomSheetComponent } from '../bottom-sheet/bottom-sheet.component';

@Component({
  selector: 'app-confirm-dialog',
  standalone: true,
-  imports: [ThemeNodeDirective],
+  imports: [ThemeNodeDirective, BottomSheetComponent],
  templateUrl: './confirm-dialog.component.html',
  host: {
    style: 'display: contents;'
@@ -24,6 +27,8 @@ export class ConfirmDialogComponent {
  confirmed = output<undefined>();
  cancelled = output<undefined>();

+  readonly isMobile = inject(ViewportService).isMobile;
+
  @HostListener('document:keydown.escape')
  onEscape(): void {
    this.cancelled.emit(undefined);
--- a/toju-app/src/app/shared/components/context-menu/context-menu.component.html
+++ b/toju-app/src/app/shared/components/context-menu/context-menu.component.html
@@ -1,23 +1,40 @@
-<!-- Invisible backdrop that captures clicks outside -->
-<div
-  class="fixed inset-0 z-40"
-  (click)="closed.emit(undefined)"
-  (contextmenu)="$event.preventDefault(); closed.emit(undefined)"
-  (keydown.enter)="closed.emit(undefined)"
-  (keydown.space)="closed.emit(undefined)"
-  role="button"
-  tabindex="0"
-  aria-label="Close menu"
-></div>
-<!-- Positioned menu panel -->
-<div
-  #panel
-  appThemeNode="contextMenuSurface"
-  class="fixed z-50 bg-card border border-border rounded-lg shadow-lg py-1"
-  [class]="widthPx() ? '' : width()"
-  [style.left.px]="clampedX()"
-  [style.top.px]="clampedY()"
-  [style.width.px]="widthPx() || null"
->
-  <ng-content />
-</div>
+<!--
+  ContextMenu has two presentations:
+  - On phone-sized viewports the menu opens as a bottom sheet anchored to the bottom of the screen.
+  - On desktop it remains an absolutely-positioned popover at the requested (x, y) coordinates.
+-->
+@if (isMobile()) {
+  <app-bottom-sheet
+    [title]="sheetTitle()"
+    [ariaLabel]="sheetTitle() || 'Menu'"
+    (dismissed)="closed.emit(undefined)"
+  >
+    <div class="flex flex-col py-1">
+      <ng-content />
+    </div>
+  </app-bottom-sheet>
+} @else {
+  <!-- Invisible backdrop that captures clicks outside -->
+  <div
+    class="fixed inset-0 z-40"
+    (click)="closed.emit(undefined)"
+    (contextmenu)="$event.preventDefault(); closed.emit(undefined)"
+    (keydown.enter)="closed.emit(undefined)"
+    (keydown.space)="closed.emit(undefined)"
+    role="button"
+    tabindex="0"
+    aria-label="Close menu"
+  ></div>
+  <!-- Positioned menu panel -->
+  <div
+    #panel
+    appThemeNode="contextMenuSurface"
+    class="fixed z-50 bg-card border border-border rounded-lg shadow-lg py-1"
+    [class]="widthPx() ? '' : width()"
+    [style.left.px]="clampedX()"
+    [style.top.px]="clampedY()"
+    [style.width.px]="widthPx() || null"
+  >
+    <ng-content />
+  </div>
+}
--- a/toju-app/src/app/shared/components/context-menu/context-menu.component.ts
+++ b/toju-app/src/app/shared/components/context-menu/context-menu.component.ts
@@ -7,14 +7,17 @@ import {
  ViewChild,
  ElementRef,
  AfterViewInit,
-  OnInit
+  OnInit,
+  inject
 } from '@angular/core';
 import { ThemeNodeDirective } from '../../../domains/theme';
+import { ViewportService } from '../../../core/platform';
+import { BottomSheetComponent } from '../bottom-sheet/bottom-sheet.component';

@Component({
  selector: 'app-context-menu',
  standalone: true,
-  imports: [ThemeNodeDirective],
+  imports: [ThemeNodeDirective, BottomSheetComponent],
  templateUrl: './context-menu.component.html',
  styleUrl: './context-menu.component.scss'
 })
@@ -24,19 +27,32 @@ export class ContextMenuComponent implements OnInit, AfterViewInit {
  y = input.required<number>();
  width = input<string>('w-48');
  widthPx = input<number | null>(null);
+  /** Optional title shown when the menu is presented as a mobile bottom sheet. */
+  sheetTitle = input<string | null>(null);
  closed = output<undefined>();

-  @ViewChild('panel', { static: true }) panelRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('panel', { static: false }) panelRef?: ElementRef<HTMLDivElement>;
+
+  private readonly viewport = inject(ViewportService);
+  readonly isMobile = this.viewport.isMobile;

  clampedX = signal(0);
  clampedY = signal(0);

  ngOnInit(): void {
+    if (this.isMobile()) {
+      return;
+    }
+
    this.clampedX.set(this.clampX(this.x(), this.estimateWidth()));
    this.clampedY.set(this.clampY(this.y(), 80));
  }

  ngAfterViewInit(): void {
+    if (this.isMobile() || !this.panelRef) {
+      return;
+    }
+
    const rect = this.panelRef.nativeElement.getBoundingClientRect();

    this.clampedX.set(this.clampX(this.x(), rect.width));
--- a/toju-app/src/app/shared/components/profile-card/profile-card-mobile.component.html
+++ b/toju-app/src/app/shared/components/profile-card/profile-card-mobile.component.html
@@ -0,0 +1,253 @@
+<div
+  appThemeNode="profileCardSurface"
+  class="flex w-full flex-col bg-card text-foreground"
+>
+  @let profileUser = displayedUser();
+  @let statusColor = currentStatusColor();
+  @let statusLabel = currentStatusLabel();
+  @let self = isSelf();
+  @let friend = isFriend();
+  @let isEditable = editable();
+  @let activeField = editingField();
+
+  <div
+    appThemeNode="profileCardBanner"
+    class="h-24 bg-gradient-to-r from-primary/30 to-primary/10"
+  ></div>
+
+  <div class="-mt-12 flex flex-col items-center px-6">
+    <div class="relative">
+      <button
+        type="button"
+        class="rounded-full"
+        [disabled]="!isEditable || avatarSaving()"
+        (click)="pickAvatar(avatarInput)"
+      >
+        <app-user-avatar
+          [name]="profileUser.displayName"
+          [avatarUrl]="profileUser.avatarUrl"
+          size="xl"
+          [status]="profileUser.status"
+          [showStatusBadge]="true"
+          ringClass="ring-4 ring-card"
+        />
+      </button>
+      @if (isEditable) {
+        <span
+          class="pointer-events-none absolute bottom-1 right-1 flex h-7 w-7 items-center justify-center rounded-full border-2 border-card bg-primary text-primary-foreground shadow"
+        >
+          <ng-icon
+            name="lucideCamera"
+            class="h-3.5 w-3.5"
+          />
+        </span>
+      }
+      <input
+        #avatarInput
+        type="file"
+        class="hidden"
+        [accept]="avatarAccept"
+        (change)="onAvatarSelected($event)"
+      />
+    </div>
+
+    <div class="mt-3 w-full text-center">
+      @if (isEditable && activeField === 'displayName') {
+        <input
+          type="text"
+          class="w-full rounded-lg border border-border bg-background/70 px-3 py-2 text-center text-lg font-semibold text-foreground outline-none focus:border-primary/70"
+          [value]="displayNameDraft()"
+          (input)="onDisplayNameInput($event)"
+          (blur)="finishEdit('displayName')"
+        />
+      } @else if (isEditable) {
+        <button
+          type="button"
+          class="w-full text-center text-xl font-semibold text-foreground hover:underline"
+          (click)="startEdit('displayName')"
+        >
+          {{ profileUser.displayName }}
+        </button>
+      } @else {
+        <h2 class="text-center text-xl font-semibold text-foreground">{{ profileUser.displayName }}</h2>
+      }
+    </div>
+
+    @if (profileUser.username && profileUser.username !== profileUser.displayName) {
+      <p class="mt-0.5 text-sm text-muted-foreground">{{ '@' + profileUser.username }}</p>
+    }
+
+    @if (isEditable) {
+      <div class="relative mt-3 w-full max-w-[14rem]">
+        <button
+          type="button"
+          class="flex w-full items-center gap-2 rounded-full border border-border bg-secondary/40 px-3 py-1.5 text-sm transition-colors hover:bg-secondary"
+          (click)="toggleStatusMenu()"
+        >
+          <span
+            class="h-2 w-2 rounded-full"
+            [class]="statusColor"
+          ></span>
+          <span class="flex-1 text-left text-foreground">{{ statusLabel }}</span>
+          <ng-icon
+            name="lucideChevronDown"
+            class="h-3.5 w-3.5 text-muted-foreground"
+          />
+        </button>
+
+        @if (showStatusMenu()) {
+          <div class="absolute left-0 right-0 top-full z-10 mt-1 rounded-lg border border-border bg-card py-1 shadow-lg">
+            @for (opt of statusOptions; track opt.label) {
+              <button
+                type="button"
+                class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-secondary"
+                [class.bg-secondary]="isStatusOptionSelected(opt.value)"
+                [class.text-foreground]="isStatusOptionSelected(opt.value)"
+                [class.text-muted-foreground]="!isStatusOptionSelected(opt.value)"
+                (click)="setStatus(opt.value)"
+              >
+                <span
+                  class="h-2 w-2 rounded-full"
+                  [class]="opt.color"
+                ></span>
+                <span class="flex-1">{{ opt.label }}</span>
+                @if (isStatusOptionSelected(opt.value)) {
+                  <ng-icon
+                    name="lucideCheck"
+                    class="h-4 w-4 text-primary"
+                  />
+                }
+              </button>
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="mt-2 inline-flex items-center gap-1.5 rounded-full bg-secondary/40 px-2.5 py-1 text-xs text-muted-foreground">
+        <span
+          class="h-2 w-2 rounded-full"
+          [class]="statusColor"
+        ></span>
+        <span>{{ statusLabel }}</span>
+      </div>
+    }
+  </div>
+
+  <div class="mt-4 space-y-3 px-6 pb-2">
+    @if (isEditable) {
+      @if (activeField === 'description') {
+        <textarea
+          rows="3"
+          class="w-full resize-none rounded-lg border border-border bg-background/70 px-3 py-2 text-sm leading-5 text-foreground outline-none focus:border-primary/70"
+          [value]="descriptionDraft()"
+          placeholder="Add a description"
+          (input)="onDescriptionInput($event)"
+          (blur)="finishEdit('description')"
+        ></textarea>
+      } @else {
+        <button
+          type="button"
+          class="block w-full rounded-lg border border-dashed border-border/70 bg-background/30 px-3 py-2 text-left text-sm leading-5"
+          (click)="startEdit('description')"
+        >
+          @if (profileUser.description) {
+            <span class="whitespace-pre-line text-muted-foreground">{{ profileUser.description }}</span>
+          } @else {
+            <span class="text-muted-foreground/70">Add a description</span>
+          }
+        </button>
+      }
+    } @else if (profileUser.description) {
+      <p class="whitespace-pre-line text-center text-sm leading-5 text-muted-foreground">
+        {{ profileUser.description }}
+      </p>
+    }
+
+    @if (avatarError()) {
+      <div class="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-xs text-red-200">
+        {{ avatarError() }}
+      </div>
+    }
+
+    @if (profileUser.gameActivity; as activity) {
+      <button
+        type="button"
+        class="flex w-full items-center gap-3 rounded-xl border border-border bg-background/40 px-3 py-2 text-left"
+        [disabled]="!activity.store?.url"
+        (click)="openGameStore($event)"
+      >
+        @if (activity.iconUrl) {
+          <img
+            class="h-10 w-10 shrink-0 rounded-md object-cover"
+            [src]="activity.iconUrl"
+            alt=""
+          />
+        } @else {
+          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+            <ng-icon
+              name="lucideGamepad2"
+              class="h-5 w-5"
+            />
+          </div>
+        }
+        <div class="min-w-0 flex-1">
+          <p class="truncate text-sm font-medium text-foreground">Playing {{ activity.name }}</p>
+          <p class="truncate text-xs text-muted-foreground">{{ gameActivityElapsed() }}</p>
+        </div>
+      </button>
+    }
+  </div>
+
+  @if (!self) {
+    <div class="grid grid-cols-1 gap-2 px-6 pb-6 pt-4">
+      <button
+        type="button"
+        class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60"
+        [disabled]="busy()"
+        (click)="startChat()"
+      >
+        <ng-icon
+          name="lucideMessageCircle"
+          class="h-5 w-5"
+        />
+        <span>Start chat</span>
+      </button>
+
+      <button
+        type="button"
+        class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-border bg-secondary/40 px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+        [disabled]="busy()"
+        (click)="startCall()"
+      >
+        <ng-icon
+          name="lucidePhone"
+          class="h-5 w-5"
+        />
+        <span>Call</span>
+      </button>
+
+      <button
+        type="button"
+        class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-border bg-secondary/20 px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+        [disabled]="busy()"
+        (click)="toggleFriend()"
+      >
+        @if (friend) {
+          <ng-icon
+            name="lucideUserMinus"
+            class="h-5 w-5"
+          />
+          <span>Remove friend</span>
+        } @else {
+          <ng-icon
+            name="lucideUserPlus"
+            class="h-5 w-5"
+          />
+          <span>Add friend</span>
+        }
+      </button>
+    </div>
+  } @else {
+    <div class="px-6 pb-6 pt-2"></div>
+  }
+</div>
--- a/toju-app/src/app/shared/components/profile-card/profile-card-mobile.component.ts
+++ b/toju-app/src/app/shared/components/profile-card/profile-card-mobile.component.ts
@@ -0,0 +1,378 @@
+/* eslint-disable @typescript-eslint/member-ordering */
+import {
+  Component,
+  computed,
+  effect,
+  inject,
+  OnDestroy,
+  output,
+  signal
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  lucideCamera,
+  lucideCheck,
+  lucideChevronDown,
+  lucideGamepad2,
+  lucideMessageCircle,
+  lucidePhone,
+  lucideUserMinus,
+  lucideUserPlus
+} from '@ng-icons/lucide';
+import { UserAvatarComponent } from '../user-avatar/user-avatar.component';
+import { ThemeNodeDirective } from '../../../domains/theme';
+import { User, UserStatus } from '../../../shared-kernel';
+import { selectCurrentUser, selectUsersEntities } from '../../../store/users/users.selectors';
+import { UsersActions } from '../../../store/users/users.actions';
+import { DirectMessageService } from '../../../domains/direct-message/application/services/direct-message.service';
+import { FriendService } from '../../../domains/direct-message/application/services/friend.service';
+import { DirectCallService } from '../../../domains/direct-call/application/services/direct-call.service';
+import { formatGameActivityElapsed } from '../../../domains/game-activity';
+import { ExternalLinkService } from '../../../core/platform/external-link.service';
+import { UserStatusService } from '../../../core/services/user-status.service';
+import {
+  EditableProfileAvatarSource,
+  PROFILE_AVATAR_ACCEPT_ATTRIBUTE,
+  ProcessedProfileAvatar,
+  ProfileAvatarEditorService,
+  ProfileAvatarFacade
+} from '../../../domains/profile-avatar';
+
+@Component({
+  selector: 'app-profile-card-mobile',
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgIcon,
+    UserAvatarComponent,
+    ThemeNodeDirective
+  ],
+  viewProviders: [
+    provideIcons({
+      lucideCamera,
+      lucideCheck,
+      lucideChevronDown,
+      lucideGamepad2,
+      lucideMessageCircle,
+      lucidePhone,
+      lucideUserMinus,
+      lucideUserPlus
+    })
+  ],
+  templateUrl: './profile-card-mobile.component.html'
+})
+export class ProfileCardMobileComponent implements OnDestroy {
+  readonly user = signal<User>({ id: '', oderId: '', username: '', displayName: '', status: 'offline', role: 'member', joinedAt: 0 });
+  readonly editable = signal(false);
+  readonly closed = output<undefined>();
+
+  readonly avatarAccept = PROFILE_AVATAR_ACCEPT_ATTRIBUTE;
+  readonly avatarError = signal<string | null>(null);
+  readonly avatarSaving = signal(false);
+  readonly editingField = signal<'displayName' | 'description' | null>(null);
+  readonly displayNameDraft = signal('');
+  readonly descriptionDraft = signal('');
+  readonly showStatusMenu = signal(false);
+
+  readonly statusOptions: { value: UserStatus | null; label: string; color: string }[] = [
+    { value: null, label: 'Online', color: 'bg-green-500' },
+    { value: 'away', label: 'Away', color: 'bg-yellow-500' },
+    { value: 'busy', label: 'Do Not Disturb', color: 'bg-red-500' },
+    { value: 'offline', label: 'Invisible', color: 'bg-gray-500' }
+  ];
+
+  private readonly store = inject(Store);
+  private readonly router = inject(Router);
+  private readonly directMessages = inject(DirectMessageService);
+  private readonly directCalls = inject(DirectCallService);
+  private readonly friendsService = inject(FriendService);
+  private readonly externalLinks = inject(ExternalLinkService);
+  private readonly userStatus = inject(UserStatusService);
+  private readonly profileAvatar = inject(ProfileAvatarFacade);
+  private readonly profileAvatarEditor = inject(ProfileAvatarEditorService);
+  private readonly users = this.store.selectSignal(selectUsersEntities);
+  private readonly currentUser = this.store.selectSignal(selectCurrentUser);
+
+  readonly displayedUser = computed(() => {
+    const snapshot = this.user();
+    const entities = this.users();
+    const liveUser = entities[snapshot.id] ?? entities[snapshot.oderId];
+
+    return liveUser ? { ...snapshot, ...liveUser } : snapshot;
+  });
+
+  readonly isSelf = computed(() => {
+    const me = this.currentUser();
+    const them = this.displayedUser();
+
+    if (!me)
+      return false;
+
+    return me.id === them.id || me.oderId === them.oderId;
+  });
+
+  readonly isFriend = computed(() => this.friendsService.friendIds().has(this.displayedUser().id));
+  readonly activityNow = signal(Date.now());
+  readonly busy = signal(false);
+
+  private readonly activityTimer = setInterval(() => this.activityNow.set(Date.now()), 1_000);
+  private readonly syncProfileDrafts = effect(
+    () => {
+      const user = this.displayedUser();
+      const editingField = this.editingField();
+
+      if (editingField !== 'displayName') {
+        this.displayNameDraft.set(user.displayName || '');
+      }
+
+      if (editingField !== 'description') {
+        this.descriptionDraft.set(user.description || '');
+      }
+    },
+    { allowSignalWrites: true }
+  );
+
+  ngOnDestroy(): void {
+    clearInterval(this.activityTimer);
+  }
+
+  currentStatusColor(): string {
+    switch (this.displayedUser().status) {
+      case 'online':
+        return 'bg-green-500';
+      case 'away':
+        return 'bg-yellow-500';
+      case 'busy':
+        return 'bg-red-500';
+      default:
+        return 'bg-gray-500';
+    }
+  }
+
+  currentStatusLabel(): string {
+    switch (this.displayedUser().status) {
+      case 'online':
+        return 'Online';
+      case 'away':
+        return 'Away';
+      case 'busy':
+        return 'Do Not Disturb';
+      case 'offline':
+        return 'Invisible';
+      case 'disconnected':
+        return 'Offline';
+      default:
+        return 'Online';
+    }
+  }
+
+  gameActivityElapsed(): string {
+    const activity = this.displayedUser().gameActivity;
+
+    return activity ? formatGameActivityElapsed(activity.startedAt, this.activityNow()) : '';
+  }
+
+  openGameStore(event: Event): void {
+    event.stopPropagation();
+    const url = this.displayedUser().gameActivity?.store?.url;
+
+    if (url) {
+      this.externalLinks.open(url);
+    }
+  }
+
+  toggleStatusMenu(): void {
+    this.showStatusMenu.update((open) => !open);
+  }
+
+  setStatus(status: UserStatus | null): void {
+    this.userStatus.setManualStatus(status);
+    this.showStatusMenu.set(false);
+  }
+
+  isStatusOptionSelected(status: UserStatus | null): boolean {
+    const currentStatus = this.displayedUser().status;
+
+    return status === null ? currentStatus === 'online' : currentStatus === status;
+  }
+
+  onDisplayNameInput(event: Event): void {
+    this.displayNameDraft.set((event.target as HTMLInputElement).value);
+  }
+
+  onDescriptionInput(event: Event): void {
+    this.descriptionDraft.set((event.target as HTMLTextAreaElement).value);
+  }
+
+  startEdit(field: 'displayName' | 'description'): void {
+    if (!this.editable() || this.editingField() === field) {
+      return;
+    }
+
+    this.editingField.set(field);
+  }
+
+  finishEdit(field: 'displayName' | 'description'): void {
+    if (this.editingField() !== field) {
+      return;
+    }
+
+    this.commitProfileDrafts();
+    this.editingField.set(null);
+  }
+
+  pickAvatar(fileInput: HTMLInputElement): void {
+    if (!this.editable() || this.avatarSaving()) {
+      return;
+    }
+
+    this.avatarError.set(null);
+    fileInput.click();
+  }
+
+  async onAvatarSelected(event: Event): Promise<void> {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+
+    let source: EditableProfileAvatarSource | null = null;
+
+    input.value = '';
+
+    if (!file) {
+      return;
+    }
+
+    const validationError = this.profileAvatar.validateFile(file);
+
+    if (validationError) {
+      this.avatarError.set(validationError);
+      return;
+    }
+
+    try {
+      source = await this.profileAvatar.prepareEditableSource(file);
+      const avatar = await this.profileAvatarEditor.open(source);
+
+      if (!avatar) {
+        return;
+      }
+
+      await this.applyAvatar(avatar);
+    } catch {
+      this.avatarError.set('Failed to open selected image.');
+    } finally {
+      this.profileAvatar.releaseEditableSource(source);
+    }
+  }
+
+  async applyAvatar(avatar: ProcessedProfileAvatar): Promise<void> {
+    const currentUser = this.displayedUser();
+
+    this.avatarSaving.set(true);
+    this.avatarError.set(null);
+
+    try {
+      await this.profileAvatar.persistProcessedAvatar(currentUser, avatar);
+
+      const updates = this.profileAvatar.buildAvatarUpdates(avatar);
+
+      this.store.dispatch(UsersActions.updateCurrentUserAvatar({ avatar: updates }));
+      this.user.update((user) => ({
+        ...user,
+        ...updates
+      }));
+    } catch {
+      this.avatarError.set('Failed to save profile image.');
+    } finally {
+      this.avatarSaving.set(false);
+    }
+  }
+
+  async startChat(): Promise<void> {
+    if (this.busy() || this.isSelf())
+      return;
+
+    this.busy.set(true);
+
+    try {
+      const conversation = await this.directMessages.createConversation(this.displayedUser());
+
+      await this.router.navigate(['/dm', conversation.id]);
+      this.closed.emit(undefined);
+    } finally {
+      this.busy.set(false);
+    }
+  }
+
+  async startCall(): Promise<void> {
+    if (this.busy() || this.isSelf())
+      return;
+
+    this.busy.set(true);
+
+    try {
+      await this.directCalls.startCall(this.displayedUser());
+      this.closed.emit(undefined);
+    } finally {
+      this.busy.set(false);
+    }
+  }
+
+  async toggleFriend(): Promise<void> {
+    if (this.busy() || this.isSelf())
+      return;
+
+    this.busy.set(true);
+
+    try {
+      await this.friendsService.toggleFriend(this.displayedUser().id);
+    } finally {
+      this.busy.set(false);
+    }
+  }
+
+  private commitProfileDrafts(): void {
+    if (!this.editable()) {
+      return;
+    }
+
+    const displayName = this.normalizeDisplayName(this.displayNameDraft());
+
+    if (!displayName) {
+      this.displayNameDraft.set(this.user().displayName || '');
+      return;
+    }
+
+    const user = this.displayedUser();
+    const description = this.normalizeDescription(this.descriptionDraft());
+
+    if (displayName === this.normalizeDisplayName(user.displayName) && description === this.normalizeDescription(user.description)) {
+      return;
+    }
+
+    const profile = {
+      displayName,
+      description,
+      profileUpdatedAt: Date.now()
+    };
+
+    this.store.dispatch(UsersActions.updateCurrentUserProfile({ profile }));
+    this.user.update((user) => ({
+      ...user,
+      ...profile
+    }));
+  }
+
+  private normalizeDisplayName(value: string | undefined): string {
+    return value?.trim().replace(/\s+/g, ' ') || '';
+  }
+
+  private normalizeDescription(value: string | undefined): string | undefined {
+    const normalized = value?.trim();
+
+    return normalized || undefined;
+  }
+}
--- a/toju-app/src/app/shared/components/profile-card/profile-card.service.ts
+++ b/toju-app/src/app/shared/components/profile-card/profile-card.service.ts
@@ -15,7 +15,9 @@ import {
  fromEvent
 } from 'rxjs';
 import { ProfileCardComponent } from './profile-card.component';
+import { ProfileCardMobileComponent } from './profile-card-mobile.component';
 import { PROFILE_AVATAR_EDITOR_OVERLAY_CLASS } from '../../../domains/profile-avatar';
+import { ViewportService } from '../../../core/platform';
 import { User } from '../../../shared-kernel';

 export type ProfileCardPlacement = 'above' | 'left' | 'auto';
@@ -57,6 +59,7 @@ function positionsFor(placement: ProfileCardPlacement): ConnectedPosition[] {
@Injectable({ providedIn: 'root' })
 export class ProfileCardService {
  private readonly overlay = inject(Overlay);
+  private readonly viewport = inject(ViewportService);
  private overlayRef: OverlayRef | null = null;
  private currentOrigin: HTMLElement | null = null;
  private outsideClickSub: Subscription | null = null;
@@ -76,23 +79,57 @@ export class ProfileCardService {

    const elementRef = origin instanceof ElementRef ? origin : new ElementRef(origin);
    const placement = options.placement ?? 'auto';
+    const isMobile = this.viewport.isMobile();

    this.currentOrigin = rawEl;

-    const positionStrategy = this.overlay
-      .position()
-      .flexibleConnectedTo(elementRef)
-      .withPositions(positionsFor(placement))
-      .withViewportMargin(VIEWPORT_MARGIN)
-      .withPush(true);
+    if (isMobile) {
+      const positionStrategy = this.overlay
+        .position()
+        .global()
+        .left('0')
+        .right('0')
+        .bottom('0');

-    this.overlayRef = this.overlay.create({
-      positionStrategy,
-      scrollStrategy: this.overlay.scrollStrategies.noop()
-    });
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.block(),
+        hasBackdrop: true,
+        backdropClass: 'cdk-overlay-dark-backdrop',
+        panelClass: 'metoyou-bottom-sheet-panel'
+      });
+    } else {
+      const positionStrategy = this.overlay
+        .position()
+        .flexibleConnectedTo(elementRef)
+        .withPositions(positionsFor(placement))
+        .withViewportMargin(VIEWPORT_MARGIN)
+        .withPush(true);
+
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.noop()
+      });
+    }

    this.syncThemeVars();

+    if (isMobile) {
+      const portal = new ComponentPortal(ProfileCardMobileComponent);
+      const ref = this.overlayRef.attach(portal);
+
+      ref.instance.user.set(user);
+      ref.instance.editable.set(options.editable ?? false);
+
+      const subscription = new Subscription();
+
+      subscription.add(ref.instance.closed.subscribe(() => this.close()));
+      subscription.add(this.overlayRef.backdropClick().subscribe(() => this.close()));
+      this.outsideClickSub = subscription;
+
+      return;
+    }
+
    const portal = new ComponentPortal(ProfileCardComponent);
    const ref = this.overlayRef.attach(portal);

--- a/toju-app/src/app/shared/index.ts
+++ b/toju-app/src/app/shared/index.ts
@@ -2,6 +2,7 @@
 * Shared reusable UI components barrel.
 */
 export { ContextMenuComponent } from './components/context-menu/context-menu.component';
+export { BottomSheetComponent } from './components/bottom-sheet/bottom-sheet.component';
 export { UserAvatarComponent } from './components/user-avatar/user-avatar.component';
 export { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
 export { LeaveServerDialogComponent } from './components/leave-server-dialog/leave-server-dialog.component';
--- a/toju-app/src/main.ts
+++ b/toju-app/src/main.ts
@@ -1,4 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
+import { register as registerSwiperElements } from 'swiper/element/bundle';
 import { appConfig } from './app/app.config';
 import { App } from './app/app';
 import mermaid from 'mermaid';
@@ -9,6 +10,9 @@ declare global {
  }
 }

+// Register Swiper custom elements (<swiper-container>, <swiper-slide>) globally.
+registerSwiperElements();
+
 // Expose mermaid globally for ngx-remark's MermaidComponent
 window.mermaid = mermaid;
 mermaid.initialize({
--- a/toju-app/src/styles.scss
+++ b/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;