@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 min-w-0 flex-1 overflow-hidden border-l border-border">
          <app-dm-conversations-panel
            (conversationSelected)="setMobilePage('chat')"
            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"
            [attr.aria-label]="'dm.workspace.backToConversations' | translate"
          >
            <ng-icon
              name="lucideChevronLeft"
              class="h-5 w-5"
            />
          </button>
          <p class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">{{ 'dm.workspace.directMessages' | translate }}</p>
          @if (activeCall()) {
            <button
              type="button"
              (click)="openActiveCall()"
              class="grid h-11 w-11 place-items-center rounded-lg text-emerald-600 transition-colors hover:bg-emerald-500/10 hover:text-emerald-500"
              [attr.aria-label]="'dm.workspace.returnToCall' | translate"
              [title]="'dm.workspace.returnToCall' | translate"
            >
              <ng-icon
                name="lucidePhoneCall"
                class="h-5 w-5"
              />
            </button>
          }
        </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>
}