@if (showFloatingControls()) {
  <div
    appThemeNode="floatingVoiceControls"
    class="fixed bottom-4 right-4 z-50 border border-border bg-card shadow-lg"
  >
    <div class="flex items-center gap-2 p-2">
      <!-- Back to server button -->
      <button
        (click)="navigateToServer()"
        type="button"
        class="flex items-center gap-1.5 rounded-md bg-secondary px-2 py-1 text-foreground transition-colors hover:bg-secondary/80"
        [title]="backToServerTitle()"
      >
        <ng-icon
          name="lucideArrowLeft"
          class="w-3.5 h-3.5"
        />
        @if (voiceSession()?.serverIcon) {
          <span
            aria-hidden="true"
            class="h-5 w-5 rounded bg-cover bg-center bg-no-repeat"
            [style.backgroundImage]="'url(' + voiceSession()!.serverIcon + ')'"
          ></span>
        } @else {
          <div class="flex h-5 w-5 items-center justify-center rounded-sm bg-muted text-[10px] font-semibold">
            {{ voiceSession()?.serverName?.charAt(0)?.toUpperCase() || '?' }}
          </div>
        }
      </button>

      <!-- Voice status indicator -->
      <div class="flex items-center gap-1 px-1">
        <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
        <span class="text-xs text-muted-foreground max-w-20 truncate">{{
          voiceSession()?.roomName || ('voice.floating.voiceFallback' | translate)
        }}</span>
      </div>

      <!-- Divider -->
      <div class="h-6 w-px bg-border"></div>

      <!-- Voice controls -->
      <div class="flex items-center gap-1">
        <button
          (click)="toggleMute()"
          type="button"
          [class]="getCompactButtonClass(isMuted())"
          [title]="'voice.floating.toggleMute' | translate"
        >
          <ng-icon
            [name]="isMuted() ? 'lucideMicOff' : 'lucideMic'"
            class="w-4 h-4"
          />
        </button>

        <button
          (click)="toggleDeafen()"
          type="button"
          [class]="getCompactButtonClass(isDeafened())"
          [title]="'voice.floating.toggleDeafen' | translate"
        >
          <ng-icon
            name="lucideHeadphones"
            class="w-4 h-4"
          />
        </button>

        @if (!isMobile()) {
          <button
            (click)="toggleScreenShare()"
            type="button"
            [class]="getCompactScreenShareClass()"
            [title]="'voice.floating.toggleScreenShare' | translate"
          >
            <ng-icon
              [name]="isScreenSharing() ? 'lucideMonitorOff' : 'lucideMonitor'"
              class="w-4 h-4"
            />
          </button>
        }

        <app-debug-console
          launcherVariant="compact"
          [showPanel]="false"
        />

        <button
          (click)="disconnect()"
          type="button"
          class="inline-flex h-7 w-7 items-center justify-center rounded-md border border-destructive/20 bg-destructive/10 text-destructive transition-colors hover:bg-destructive/15"
          [title]="'voice.floating.disconnect' | translate"
        >
          <ng-icon
            name="lucidePhoneOff"
            class="w-4 h-4"
          />
        </button>
      </div>
    </div>
  </div>
}

@if (showScreenShareQualityDialog()) {
  <app-screen-share-quality-dialog
    [selectedQuality]="screenShareQuality()"
    [includeSystemAudio]="includeSystemAudio()"
    (cancelled)="onScreenShareQualityCancelled()"
    (confirmed)="onScreenShareQualityConfirmed($event)"
  />
}