<app-context-menu
  [x]="x()"
  [y]="y()"
  [widthPx]="240"
  (closed)="closed.emit(undefined)"
>
  <!-- Header -->
  <p class="text-xs font-medium text-muted-foreground mb-2 px-2 truncate">{{ displayName() }}</p>

  <!-- Mute button + slider + percentage in one row -->
  <div class="flex items-center gap-2 px-2 pb-1">
    <!-- Mute toggle button -->
    <button
      type="button"
      (click)="toggleMute()"
      class="shrink-0 w-7 h-7 inline-flex items-center justify-center rounded transition-colors"
      [class]="muteButtonClass()"
      [title]="isMuted() ? 'Unmute' : 'Mute'"
    >
      <ng-icon
        [name]="isMuted() ? 'lucideVolumeX' : 'lucideVolume2'"
        class="w-4 h-4"
      />
    </button>

    <!-- Slider -->
    <input
      type="range"
      min="0"
      max="200"
      step="1"
      [value]="volume()"
      (input)="onSliderInput($event)"
      class="volume-slider flex-1"
      [class.opacity-40]="isMuted()"
      [disabled]="isMuted()"
    />

    <!-- Percentage label -->
    <span
      class="text-xs w-10 text-right tabular-nums shrink-0"
      [class]="isMuted() ? 'text-muted-foreground line-through' : 'text-foreground'"
      >{{ volume() }}%</span
    >
  </div>
</app-context-menu>
