fix(machine): mobile UI polish and shadcn-vue ScrollArea

- Use h-dvh instead of h-screen for mobile browser viewport
- Add ScrollArea component (shadcn-vue) to replace native scrollbars
- Move Hide Debug into debug bar row, show Show Debug only when off
- Responsive cash-out denomination grid (single col on mobile)
- Add safe-area padding for mobile gesture bar
- Add business model documentation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/machine/src/App.vue

@@ -31,9 +31,7 @@ function toggleLiveServices() {
 </script>
 
 <template>
-  <div
-    class="flex h-screen w-screen flex-col overflow-hidden bg-background font-sans text-foreground"
-  >
+  <div class="flex h-dvh w-screen flex-col overflow-hidden bg-background font-sans text-foreground">
     <router-view />
 
     <!-- Connection status + balance (top right) -->
@@ -73,7 +71,7 @@ function toggleLiveServices() {
     <!-- Debug overlay (dev only) -->
     <div
       v-if="atmStore.debugMode"
-      class="shrink-0 bg-popover font-mono text-xs text-popover-foreground"
+      class="shrink-0 bg-popover pb-[env(safe-area-inset-bottom)] font-mono text-xs text-popover-foreground"
     >
       <div class="flex flex-wrap items-center gap-2 px-4 py-2 sm:gap-4">
         <Button
@@ -100,6 +98,14 @@ function toggleLiveServices() {
             {{ theme.label }}
           </Button>
         </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          class="ml-auto h-6 text-xs text-muted-foreground"
+          @click="atmStore.toggleDebug"
+        >
+          Hide Debug
+        </Button>
       </div>
       <div v-if="debugExpanded" class="max-h-48 overflow-auto px-4 pb-4">
         <pre class="text-muted-foreground">{{ JSON.stringify(atmStore.context, null, 2) }}</pre>

apps/machine/src/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import ScrollBar from './ScrollBar.vue'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
+    <ScrollAreaViewport
+      data-slot="scroll-area-viewport"
+      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+    >
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

apps/machine/src/components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    orientation: 'vertical',
+  }
+)
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+        props.class
+      )
+    "
+  >
+    <ScrollAreaThumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
+  </ScrollAreaScrollbar>
+</template>

apps/machine/src/components/ui/scroll-area/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'

apps/machine/src/views/CashInView.vue

@@ -8,6 +8,7 @@ import { Badge } from '@/components/ui/badge'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import QRCode from '@/components/QRCode.vue'
 import BitcoinIcon from '@/components/BitcoinIcon.vue'
 
@@ -196,324 +197,338 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
     </header>
 
     <!-- Content -->
-    <main
-      class="flex min-h-0 flex-1 items-start justify-center overflow-auto p-4 sm:items-center sm:p-8"
-    >
-      <!-- Fetching Rate -->
-      <Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-white/5">
-        <CardContent class="flex flex-col items-center gap-4 p-8">
-          <Skeleton class="h-10 w-10 rounded-full" />
-          <p class="text-muted-foreground">Fetching exchange rate...</p>
-        </CardContent>
-      </Card>
+    <ScrollArea class="min-h-0 flex-1">
+      <main class="flex min-h-0 flex-1 items-start justify-center p-4 sm:items-center sm:p-8">
+        <!-- Fetching Rate -->
+        <Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-white/5">
+          <CardContent class="flex flex-col items-center gap-4 p-8">
+            <Skeleton class="h-10 w-10 rounded-full" />
+            <p class="text-muted-foreground">Fetching exchange rate...</p>
+          </CardContent>
+        </Card>
 
-      <!-- Inserting Bills -->
-      <Card
-        v-else-if="nestedState === 'insertingBills'"
-        class="w-full max-w-96 border-0 bg-white/5"
-      >
-        <CardHeader class="text-center">
-          <CardTitle>Insert Cash</CardTitle>
-          <CardDescription v-if="context">
-            Rate: {{ formatSats(context.exchangeRate) }} sats/$
-          </CardDescription>
-        </CardHeader>
-        <CardContent class="space-y-6">
-          <!-- Bill Status -->
-          <div v-if="context" class="rounded-lg bg-white/5 p-4">
-            <div class="mb-2 flex justify-between">
-              <span class="text-muted-foreground">Inserted:</span>
-              <span class="text-2xl font-bold text-green-400">${{ context.fiatAmount / 100 }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-muted-foreground">You'll receive:</span>
-              <span class="font-semibold text-orange-400"
-                >{{ formatSats(context.satsAmount) }} sats</span
-              >
-            </div>
-          </div>
-
-          <!-- Available balance indicator -->
-          <div v-if="context && context.availableBalance > 0" class="flex justify-between text-sm">
-            <span class="text-muted-foreground">Available:</span>
-            <span :class="balanceLimitReached ? 'text-foreground' : 'text-muted-foreground'">
-              {{ formatSats(context.availableBalance) }} sats
-            </span>
-          </div>
-
-          <!-- Bill Acceptor Status -->
-          <p v-if="balanceLimitReached" class="text-center text-sm text-muted-foreground">
-            Maximum amount reached — press Done to continue
-          </p>
-          <p v-else class="text-center text-sm text-muted-foreground">
-            💵 Insert bills into the acceptor
-          </p>
-
-          <!-- Dev: Simulate bill insertion -->
-          <Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10">
-            <AlertDescription>
-              <p class="mb-2 text-xs text-red-400">Dev: Simulate bills</p>
-              <div class="flex flex-wrap justify-center gap-2">
-                <Button
-                  v-for="denom in [1, 5, 10, 20, 50, 100]"
-                  :key="denom"
-                  variant="outline"
-                  size="sm"
-                  class="h-8"
-                  :disabled="!canAcceptBill(denom)"
-                  @click="simulateBill(denom)"
+        <!-- Inserting Bills -->
+        <Card
+          v-else-if="nestedState === 'insertingBills'"
+          class="w-full max-w-96 border-0 bg-white/5"
+        >
+          <CardHeader class="text-center">
+            <CardTitle>Insert Cash</CardTitle>
+            <CardDescription v-if="context">
+              Rate: {{ formatSats(context.exchangeRate) }} sats/$
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-6">
+            <!-- Bill Status -->
+            <div v-if="context" class="rounded-lg bg-white/5 p-4">
+              <div class="mb-2 flex justify-between">
+                <span class="text-muted-foreground">Inserted:</span>
+                <span class="text-2xl font-bold text-green-400"
+                  >${{ context.fiatAmount / 100 }}</span
                 >
-                  ${{ denom }}
-                </Button>
               </div>
-            </AlertDescription>
-          </Alert>
-
-          <Button
-            class="w-full bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
-            size="lg"
-            :disabled="!context || context.billsInserted.length === 0"
-            @click="finishInserting"
-          >
-            Done Inserting
-          </Button>
-        </CardContent>
-      </Card>
-
-      <!-- Generating NDebit -->
-      <Card
-        v-else-if="nestedState === 'generatingNdebit'"
-        class="w-full max-w-80 border-0 bg-white/5"
-      >
-        <CardContent class="flex flex-col items-center gap-4 p-8">
-          <Skeleton class="h-10 w-10 rounded-full" />
-          <p class="text-muted-foreground">Preparing payment code...</p>
-        </CardContent>
-      </Card>
-
-      <!-- Display QR (unified lightning + clink) -->
-      <Card
-        v-else-if="nestedState === 'displayingQR'"
-        class="w-full max-w-[420px] border-0 bg-white/5"
-      >
-        <CardContent class="pt-6 space-y-5">
-          <!-- Amount Display -->
-          <div class="text-center">
-            <p class="text-sm text-muted-foreground">Withdraw</p>
-            <p class="text-3xl font-bold text-orange-400">
-              {{ formatSats(context?.satsAmount || 0) }} sats
-            </p>
-            <p class="text-sm text-muted-foreground">
-              ${{ ((context?.fiatAmount || 0) / 100).toFixed(2) }}
-            </p>
-          </div>
-
-          <!-- Scan with selector -->
-          <div class="text-center">
-            <p class="text-xs text-muted-foreground mb-2">Scan with</p>
-            <div class="flex flex-wrap gap-2 justify-center">
-              <Button
-                :variant="qrMode === 'unified' ? 'default' : 'outline'"
-                size="sm"
-                class="rounded-full px-4"
-                @click="qrMode = 'unified'"
-              >
-                Universal
-              </Button>
-              <Button
-                :variant="qrMode === 'lnurl' ? 'default' : 'outline'"
-                size="sm"
-                class="rounded-full px-4"
-                @click="qrMode = 'lnurl'"
-              >
-                LNURL
-              </Button>
-              <Button
-                :variant="qrMode === 'clink' ? 'default' : 'outline'"
-                size="sm"
-                class="rounded-full px-4"
-                @click="qrMode = 'clink'"
-              >
-                CLINK
-              </Button>
-            </div>
-          </div>
-
-          <!-- QR Code -->
-          <div class="flex flex-col items-center">
-            <div class="relative">
-              <Skeleton
-                v-if="isGeneratingLnurl && !context?.ndebitUri"
-                class="h-[240px] w-[240px] rounded-xl"
-              />
-              <div v-else-if="currentQrValue" class="rounded-xl overflow-hidden bg-white p-3">
-                <QRCode :value="currentQrValue" :size="216" />
-              </div>
-              <div
-                v-else
-                class="flex h-[240px] w-[240px] items-center justify-center rounded-xl bg-white/10"
-              >
-                <p class="text-sm text-muted-foreground">Generating...</p>
-              </div>
-              <!-- Lightning bolt overlay -->
-              <div
-                v-if="currentQrValue"
-                class="absolute inset-0 flex items-center justify-center pointer-events-none"
-              >
-                <div
-                  class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center shadow-lg"
+              <div class="flex justify-between">
+                <span class="text-muted-foreground">You'll receive:</span>
+                <span class="font-semibold text-orange-400"
+                  >{{ formatSats(context.satsAmount) }} sats</span
                 >
-                  <span class="text-2xl">⚡</span>
-                </div>
               </div>
             </div>
-          </div>
 
-          <!-- Mode label + truncated URI -->
-          <div class="text-center space-y-1">
-            <p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-              {{
-                qrMode === 'unified'
-                  ? 'Universal'
-                  : qrMode === 'lnurl'
-                    ? 'LNURL-withdraw'
-                    : 'CLINK ndebit'
-              }}
-            </p>
-            <div v-if="currentQrValue" class="flex items-center justify-center gap-2">
-              <code class="text-xs text-muted-foreground truncate max-w-[280px]">
-                {{ currentQrValue.split('\n')[0]?.slice(0, 32) }}...
-              </code>
-              <Button variant="ghost" size="sm" class="h-6 w-6 p-0" @click="copyQrValue">
-                <span v-if="copied">✓</span>
-                <span v-else class="text-muted-foreground">📋</span>
-              </Button>
+            <!-- Available balance indicator -->
+            <div
+              v-if="context && context.availableBalance > 0"
+              class="flex justify-between text-sm"
+            >
+              <span class="text-muted-foreground">Available:</span>
+              <span :class="balanceLimitReached ? 'text-foreground' : 'text-muted-foreground'">
+                {{ formatSats(context.availableBalance) }} sats
+              </span>
             </div>
-          </div>
 
-          <!-- Alternative: Manual Options (collapsed) -->
-          <details class="rounded-lg bg-white/5 p-3">
-            <summary class="cursor-pointer text-sm text-muted-foreground">
-              Alternative: Manual payment options
-            </summary>
-            <div class="mt-4 space-y-4">
-              <!-- CLINK Debit by pubkey -->
-              <div class="space-y-2">
-                <p class="text-xs font-medium text-blue-400">Enter your npub/pubkey:</p>
-                <div class="flex gap-2">
-                  <Input
-                    v-model="pubkeyInput"
-                    placeholder="npub1... or hex pubkey"
-                    class="flex-1 font-mono text-xs"
-                    :disabled="isProcessing"
-                  />
+            <!-- Bill Acceptor Status -->
+            <p v-if="balanceLimitReached" class="text-center text-sm text-muted-foreground">
+              Maximum amount reached — press Done to continue
+            </p>
+            <p v-else class="text-center text-sm text-muted-foreground">
+              💵 Insert bills into the acceptor
+            </p>
+
+            <!-- Dev: Simulate bill insertion -->
+            <Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10">
+              <AlertDescription>
+                <p class="mb-2 text-xs text-red-400">Dev: Simulate bills</p>
+                <div class="flex flex-wrap justify-center gap-2">
                   <Button
+                    v-for="denom in [1, 5, 10, 20, 50, 100]"
+                    :key="denom"
                     variant="outline"
                     size="sm"
-                    :disabled="!pubkeyInput.trim() || isProcessing"
-                    @click="submitDebitRequest"
+                    class="h-8"
+                    :disabled="!canAcceptBill(denom)"
+                    @click="simulateBill(denom)"
                   >
-                    {{ atmStore.isRequestingDebit ? '...' : 'Send' }}
+                    ${{ denom }}
                   </Button>
                 </div>
-              </div>
+              </AlertDescription>
+            </Alert>
 
-              <!-- Invoice paste -->
-              <div class="space-y-2">
-                <p class="text-xs font-medium text-orange-400">Or paste your invoice:</p>
-                <div class="flex gap-2">
-                  <Input
-                    v-model="invoiceInput"
-                    placeholder="lnbc... or lntb..."
-                    class="flex-1 font-mono text-xs"
-                    :disabled="isProcessing"
-                  />
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    :disabled="!invoiceInput.trim() || isProcessing"
-                    @click="submitInvoice"
-                  >
-                    {{ atmStore.isPayingInvoice ? '...' : 'Pay' }}
-                  </Button>
-                </div>
-              </div>
+            <Button
+              class="w-full bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
+              size="lg"
+              :disabled="!context || context.billsInserted.length === 0"
+              @click="finishInserting"
+            >
+              Done Inserting
+            </Button>
+          </CardContent>
+        </Card>
 
-              <p v-if="atmStore.paymentError" class="text-xs text-red-400">
-                Error: {{ atmStore.paymentError }}
+        <!-- Generating NDebit -->
+        <Card
+          v-else-if="nestedState === 'generatingNdebit'"
+          class="w-full max-w-80 border-0 bg-white/5"
+        >
+          <CardContent class="flex flex-col items-center gap-4 p-8">
+            <Skeleton class="h-10 w-10 rounded-full" />
+            <p class="text-muted-foreground">Preparing payment code...</p>
+          </CardContent>
+        </Card>
+
+        <!-- Display QR (unified lightning + clink) -->
+        <Card
+          v-else-if="nestedState === 'displayingQR'"
+          class="w-full max-w-[420px] border-0 bg-white/5"
+        >
+          <CardContent class="pt-6 space-y-5">
+            <!-- Amount Display -->
+            <div class="text-center">
+              <p class="text-sm text-muted-foreground">Withdraw</p>
+              <p class="text-3xl font-bold text-orange-400">
+                {{ formatSats(context?.satsAmount || 0) }} sats
+              </p>
+              <p class="text-sm text-muted-foreground">
+                ${{ ((context?.fiatAmount || 0) / 100).toFixed(2) }}
               </p>
             </div>
-          </details>
 
-          <!-- Debug: Simulate payment button -->
-          <div v-if="atmStore.debugMode" class="pt-2 text-center">
+            <!-- Scan with selector -->
+            <div class="text-center">
+              <p class="text-xs text-muted-foreground mb-2">Scan with</p>
+              <div class="flex flex-wrap gap-2 justify-center">
+                <Button
+                  :variant="qrMode === 'unified' ? 'default' : 'outline'"
+                  size="sm"
+                  class="rounded-full px-4"
+                  @click="qrMode = 'unified'"
+                >
+                  Universal
+                </Button>
+                <Button
+                  :variant="qrMode === 'lnurl' ? 'default' : 'outline'"
+                  size="sm"
+                  class="rounded-full px-4"
+                  @click="qrMode = 'lnurl'"
+                >
+                  LNURL
+                </Button>
+                <Button
+                  :variant="qrMode === 'clink' ? 'default' : 'outline'"
+                  size="sm"
+                  class="rounded-full px-4"
+                  @click="qrMode = 'clink'"
+                >
+                  CLINK
+                </Button>
+              </div>
+            </div>
+
+            <!-- QR Code -->
+            <div class="flex flex-col items-center">
+              <div class="relative">
+                <Skeleton
+                  v-if="isGeneratingLnurl && !context?.ndebitUri"
+                  class="h-[240px] w-[240px] rounded-xl"
+                />
+                <div v-else-if="currentQrValue" class="rounded-xl overflow-hidden bg-white p-3">
+                  <QRCode :value="currentQrValue" :size="216" />
+                </div>
+                <div
+                  v-else
+                  class="flex h-[240px] w-[240px] items-center justify-center rounded-xl bg-white/10"
+                >
+                  <p class="text-sm text-muted-foreground">Generating...</p>
+                </div>
+                <!-- Lightning bolt overlay -->
+                <div
+                  v-if="currentQrValue"
+                  class="absolute inset-0 flex items-center justify-center pointer-events-none"
+                >
+                  <div
+                    class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center shadow-lg"
+                  >
+                    <span class="text-2xl">⚡</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Mode label + truncated URI -->
+            <div class="text-center space-y-1">
+              <p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                {{
+                  qrMode === 'unified'
+                    ? 'Universal'
+                    : qrMode === 'lnurl'
+                      ? 'LNURL-withdraw'
+                      : 'CLINK ndebit'
+                }}
+              </p>
+              <div v-if="currentQrValue" class="flex items-center justify-center gap-2">
+                <code class="text-xs text-muted-foreground truncate max-w-[280px]">
+                  {{ currentQrValue.split('\n')[0]?.slice(0, 32) }}...
+                </code>
+                <Button variant="ghost" size="sm" class="h-6 w-6 p-0" @click="copyQrValue">
+                  <span v-if="copied">✓</span>
+                  <span v-else class="text-muted-foreground">📋</span>
+                </Button>
+              </div>
+            </div>
+
+            <!-- Alternative: Manual Options (collapsed) -->
+            <details class="rounded-lg bg-white/5 p-3">
+              <summary class="cursor-pointer text-sm text-muted-foreground">
+                Alternative: Manual payment options
+              </summary>
+              <div class="mt-4 space-y-4">
+                <!-- CLINK Debit by pubkey -->
+                <div class="space-y-2">
+                  <p class="text-xs font-medium text-blue-400">Enter your npub/pubkey:</p>
+                  <div class="flex gap-2">
+                    <Input
+                      v-model="pubkeyInput"
+                      placeholder="npub1... or hex pubkey"
+                      class="flex-1 font-mono text-xs"
+                      :disabled="isProcessing"
+                    />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      :disabled="!pubkeyInput.trim() || isProcessing"
+                      @click="submitDebitRequest"
+                    >
+                      {{ atmStore.isRequestingDebit ? '...' : 'Send' }}
+                    </Button>
+                  </div>
+                </div>
+
+                <!-- Invoice paste -->
+                <div class="space-y-2">
+                  <p class="text-xs font-medium text-orange-400">Or paste your invoice:</p>
+                  <div class="flex gap-2">
+                    <Input
+                      v-model="invoiceInput"
+                      placeholder="lnbc... or lntb..."
+                      class="flex-1 font-mono text-xs"
+                      :disabled="isProcessing"
+                    />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      :disabled="!invoiceInput.trim() || isProcessing"
+                      @click="submitInvoice"
+                    >
+                      {{ atmStore.isPayingInvoice ? '...' : 'Pay' }}
+                    </Button>
+                  </div>
+                </div>
+
+                <p v-if="atmStore.paymentError" class="text-xs text-red-400">
+                  Error: {{ atmStore.paymentError }}
+                </p>
+              </div>
+            </details>
+
+            <!-- Debug: Simulate payment button -->
+            <div v-if="atmStore.debugMode" class="pt-2 text-center">
+              <Button
+                variant="ghost"
+                size="sm"
+                class="text-xs text-muted-foreground"
+                @click="atmStore.paymentReceived('mock-preimage-' + Date.now())"
+              >
+                Dev: Skip to Success
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <!-- Ask for Receipt -->
+        <Card
+          v-else-if="nestedState === 'askForReceipt'"
+          class="w-full max-w-80 border-0 bg-white/5"
+        >
+          <CardContent class="flex flex-col items-center gap-4 p-8">
+            <div class="text-6xl text-green-400">✅</div>
+            <CardTitle>Payment Sent!</CardTitle>
+            <p class="text-muted-foreground">Would you like a receipt?</p>
+            <div class="flex h-32 w-32 items-center justify-center rounded-lg bg-white">
+              <p class="text-black">📱 Scan npub</p>
+            </div>
+            <Button variant="outline" @click="skipReceipt">No Thanks</Button>
+          </CardContent>
+        </Card>
+
+        <!-- Sending Receipt -->
+        <Card
+          v-else-if="nestedState === 'sendingReceipt'"
+          class="w-full max-w-80 border-0 bg-white/5"
+        >
+          <CardContent class="flex flex-col items-center gap-4 p-8">
+            <Skeleton class="h-10 w-10 rounded-full" />
+            <p class="text-muted-foreground">Sending receipt...</p>
+          </CardContent>
+        </Card>
+
+        <!-- Complete -->
+        <Card
+          v-else-if="nestedState === 'complete'"
+          class="w-full max-w-80 border-0 bg-green-900/30"
+        >
+          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
+            <div class="text-6xl">🎉</div>
+            <CardTitle class="text-green-400">Transaction Complete!</CardTitle>
+            <p v-if="context">
+              You received
+              <Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge>
+            </p>
+            <p class="text-muted-foreground">Thank you!</p>
+          </CardContent>
+        </Card>
+
+        <!-- Error -->
+        <Card v-else-if="nestedState === 'error'" class="w-full max-w-80 border-0 bg-red-900/30">
+          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
+            <div class="text-6xl">⚠️</div>
+            <CardTitle class="text-red-400">Error</CardTitle>
+            <p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
             <Button
-              variant="ghost"
-              size="sm"
-              class="text-xs text-muted-foreground"
-              @click="atmStore.paymentReceived('mock-preimage-' + Date.now())"
+              class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black"
+              @click="cancel"
             >
-              Dev: Skip to Success
+              Return to Start
             </Button>
-          </div>
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
 
-      <!-- Ask for Receipt -->
-      <Card v-else-if="nestedState === 'askForReceipt'" class="w-full max-w-80 border-0 bg-white/5">
-        <CardContent class="flex flex-col items-center gap-4 p-8">
-          <div class="text-6xl text-green-400">✅</div>
-          <CardTitle>Payment Sent!</CardTitle>
-          <p class="text-muted-foreground">Would you like a receipt?</p>
-          <div class="flex h-32 w-32 items-center justify-center rounded-lg bg-white">
-            <p class="text-black">📱 Scan npub</p>
-          </div>
-          <Button variant="outline" @click="skipReceipt">No Thanks</Button>
-        </CardContent>
-      </Card>
-
-      <!-- Sending Receipt -->
-      <Card
-        v-else-if="nestedState === 'sendingReceipt'"
-        class="w-full max-w-80 border-0 bg-white/5"
-      >
-        <CardContent class="flex flex-col items-center gap-4 p-8">
-          <Skeleton class="h-10 w-10 rounded-full" />
-          <p class="text-muted-foreground">Sending receipt...</p>
-        </CardContent>
-      </Card>
-
-      <!-- Complete -->
-      <Card v-else-if="nestedState === 'complete'" class="w-full max-w-80 border-0 bg-green-900/30">
-        <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-          <div class="text-6xl">🎉</div>
-          <CardTitle class="text-green-400">Transaction Complete!</CardTitle>
-          <p v-if="context">
-            You received
-            <Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge>
-          </p>
-          <p class="text-muted-foreground">Thank you!</p>
-        </CardContent>
-      </Card>
-
-      <!-- Error -->
-      <Card v-else-if="nestedState === 'error'" class="w-full max-w-80 border-0 bg-red-900/30">
-        <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-          <div class="text-6xl">⚠️</div>
-          <CardTitle class="text-red-400">Error</CardTitle>
-          <p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
-          <Button class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black" @click="cancel">
-            Return to Start
-          </Button>
-        </CardContent>
-      </Card>
-
-      <!-- Fallback -->
-      <Card v-else class="w-full max-w-80 border-0 bg-white/5">
-        <CardContent class="p-8 text-center">
-          <p class="text-muted-foreground">State: {{ nestedState }}</p>
-        </CardContent>
-      </Card>
-    </main>
+        <!-- Fallback -->
+        <Card v-else class="w-full max-w-80 border-0 bg-white/5">
+          <CardContent class="p-8 text-center">
+            <p class="text-muted-foreground">State: {{ nestedState }}</p>
+          </CardContent>
+        </Card>
+      </main>
+    </ScrollArea>
   </div>
 </template>

apps/machine/src/views/CashOutView.vue

@@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
 import { Badge } from '@/components/ui/badge'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Skeleton } from '@/components/ui/skeleton'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import QRCode from '@/components/QRCode.vue'
 
 const router = useRouter()
@@ -105,247 +106,262 @@ function formatFiat(cents: number): string {
     </header>
 
     <!-- Content -->
-    <main
-      class="flex min-h-0 flex-1 items-start justify-center overflow-auto p-4 sm:items-center sm:p-8"
-    >
-      <!-- Fetching Rate -->
-      <Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-white/5">
-        <CardContent class="flex flex-col items-center gap-4 p-8">
-          <Skeleton class="h-10 w-10 rounded-full" />
-          <p class="text-muted-foreground">Fetching exchange rate...</p>
-        </CardContent>
-      </Card>
+    <ScrollArea class="min-h-0 flex-1">
+      <main class="flex min-h-0 flex-1 items-start justify-center p-4 sm:items-center sm:p-8">
+        <!-- Fetching Rate -->
+        <Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-white/5">
+          <CardContent class="flex flex-col items-center gap-4 p-8">
+            <Skeleton class="h-10 w-10 rounded-full" />
+            <p class="text-muted-foreground">Fetching exchange rate...</p>
+          </CardContent>
+        </Card>
 
-      <!-- Selecting Amount - Main cash-out screen -->
-      <Card
-        v-else-if="nestedState === 'selectingAmount'"
-        class="w-full max-w-[520px] border-0 bg-white/5"
-      >
-        <CardHeader class="text-center">
-          <CardTitle>Select Cash Amount</CardTitle>
-          <CardDescription v-if="context">
-            Rate: <Badge variant="secondary">{{ formatSats(context.exchangeRate) }} sats/$</Badge>
-          </CardDescription>
-        </CardHeader>
-        <CardContent class="space-y-6">
-          <!-- Denomination buttons -->
-          <div class="grid grid-cols-2 gap-4">
-            <div
-              v-for="denom in availableDenominations"
-              :key="denom"
-              class="flex items-center justify-between rounded-lg bg-white/5 p-4"
-            >
-              <span class="text-2xl font-bold text-green-400">${{ denom }}</span>
-              <div class="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  :disabled="!canRemove(denom)"
-                  @click="atmStore.removeDenomination(denom)"
-                >
-                  -
-                </Button>
-                <span class="w-8 text-center text-lg">{{ selectionCounts[denom] || 0 }}</span>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  :disabled="!canAdd(denom)"
-                  @click="atmStore.addDenomination(denom)"
-                >
-                  +
+        <!-- Selecting Amount - Main cash-out screen -->
+        <Card
+          v-else-if="nestedState === 'selectingAmount'"
+          class="w-full max-w-[520px] border-0 bg-white/5"
+        >
+          <CardHeader class="text-center">
+            <CardTitle>Select Cash Amount</CardTitle>
+            <CardDescription v-if="context">
+              Rate: <Badge variant="secondary">{{ formatSats(context.exchangeRate) }} sats/$</Badge>
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-6">
+            <!-- Denomination buttons -->
+            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
+              <div
+                v-for="denom in availableDenominations"
+                :key="denom"
+                class="flex items-center justify-between rounded-lg bg-white/5 px-4 py-3 sm:p-4"
+              >
+                <span class="text-xl font-bold text-green-400 sm:text-2xl">${{ denom }}</span>
+                <div class="flex items-center gap-3">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    class="h-9 w-9"
+                    :disabled="!canRemove(denom)"
+                    @click="atmStore.removeDenomination(denom)"
+                  >
+                    -
+                  </Button>
+                  <span class="w-8 text-center text-lg font-medium">{{
+                    selectionCounts[denom] || 0
+                  }}</span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    class="h-9 w-9"
+                    :disabled="!canAdd(denom)"
+                    @click="atmStore.addDenomination(denom)"
+                  >
+                    +
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <!-- Selected amount summary -->
+            <div class="rounded-lg bg-white/10 p-6 text-center">
+              <p class="text-sm text-muted-foreground">You will receive</p>
+              <p class="text-4xl font-bold text-green-400">
+                ${{ context ? formatFiat(context.fiatAmount) : '0.00' }}
+              </p>
+              <p class="mt-2 text-sm text-muted-foreground">
+                You pay:
+                <Badge variant="secondary" class="ml-1">
+                  {{ context ? formatSats(context.satsAmount) : 0 }} sats
+                </Badge>
+              </p>
+            </div>
+
+            <!-- Action buttons -->
+            <div class="flex gap-4">
+              <Button
+                variant="outline"
+                class="flex-1"
+                :disabled="!context?.cashOutSelection?.length"
+                @click="atmStore.clearSelection()"
+              >
+                Clear
+              </Button>
+              <Button
+                class="flex-1 bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
+                :disabled="!context?.cashOutSelection?.length"
+                @click="atmStore.confirmAmount()"
+              >
+                Continue
+              </Button>
+            </div>
+
+            <!-- Instructions -->
+            <Alert class="border-orange-500/50 bg-orange-500/10">
+              <AlertDescription>
+                <p class="text-sm text-muted-foreground">
+                  Select the cash amount you want to receive. You'll pay the equivalent in Bitcoin.
+                </p>
+              </AlertDescription>
+            </Alert>
+          </CardContent>
+        </Card>
+
+        <!-- Generating Invoice -->
+        <Card
+          v-else-if="nestedState === 'generatingInvoice'"
+          class="w-full max-w-80 border-0 bg-white/5"
+        >
+          <CardContent class="flex flex-col items-center gap-4 p-8">
+            <Skeleton class="h-10 w-10 rounded-full" />
+            <p class="text-muted-foreground">Creating invoice...</p>
+          </CardContent>
+        </Card>
+
+        <!-- Displaying Invoice - Show QR for payment -->
+        <Card
+          v-else-if="nestedState === 'displayingInvoice'"
+          class="w-full max-w-[480px] border-0 bg-white/5"
+        >
+          <CardHeader class="text-center">
+            <CardTitle>Scan to Pay</CardTitle>
+            <CardDescription v-if="context">
+              Pay <Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge> to
+              receive <Badge class="bg-green-600">${{ formatFiat(context.fiatAmount) }}</Badge>
+            </CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-6">
+            <!-- Invoice QR Code -->
+            <div class="flex flex-col items-center">
+              <QRCode v-if="context?.invoice" :value="context.invoice" :size="220" />
+              <p class="mt-4 text-center text-sm text-muted-foreground">
+                Scan with any Lightning wallet
+              </p>
+            </div>
+
+            <!-- Payment status -->
+            <div class="flex flex-col items-center gap-4 py-4">
+              <div class="h-12 w-12 animate-pulse rounded-full bg-orange-500/20">
+                <div class="flex h-full items-center justify-center text-2xl">⏳</div>
+              </div>
+              <p class="text-center text-muted-foreground">Waiting for payment...</p>
+            </div>
+
+            <!-- Invoice info with copy button -->
+            <div v-if="context?.invoice" class="rounded-lg bg-white/5 p-3">
+              <p class="mb-2 truncate text-center font-mono text-xs text-muted-foreground">
+                {{ context.invoice.slice(0, 50) }}...
+              </p>
+              <div class="flex justify-center">
+                <Button variant="outline" size="sm" @click="copyInvoice">
+                  {{ copyButtonText }}
                 </Button>
               </div>
             </div>
-          </div>
 
-          <!-- Selected amount summary -->
-          <div class="rounded-lg bg-white/10 p-6 text-center">
-            <p class="text-sm text-muted-foreground">You will receive</p>
-            <p class="text-4xl font-bold text-green-400">
-              ${{ context ? formatFiat(context.fiatAmount) : '0.00' }}
-            </p>
-            <p class="mt-2 text-sm text-muted-foreground">
-              You pay:
-              <Badge variant="secondary" class="ml-1">
-                {{ context ? formatSats(context.satsAmount) : 0 }} sats
-              </Badge>
-            </p>
-          </div>
+            <!-- Dev controls -->
+            <Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10">
+              <AlertDescription class="text-center">
+                <p class="mb-2 text-xs text-red-400">Dev: Use alice-pay or button below</p>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  @click="atmStore.paymentReceived('mock-preimage-' + Date.now())"
+                >
+                  Simulate Payment
+                </Button>
+              </AlertDescription>
+            </Alert>
+          </CardContent>
+        </Card>
 
-          <!-- Action buttons -->
-          <div class="flex gap-4">
+        <!-- Dispensing Cash -->
+        <Card
+          v-else-if="nestedState === 'dispensingCash'"
+          class="w-full max-w-80 border-0 bg-white/5"
+        >
+          <CardContent class="flex flex-col items-center gap-4 p-8">
+            <Skeleton class="h-10 w-10 rounded-full" />
+            <p class="text-muted-foreground">Dispensing cash...</p>
+            <p class="text-sm text-muted-foreground">Please wait</p>
+          </CardContent>
+        </Card>
+
+        <!-- Cash Ready -->
+        <Card
+          v-else-if="nestedState === 'waitingForCashTaken'"
+          class="w-full max-w-80 border-0 bg-green-900/30"
+        >
+          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
+            <div class="text-6xl text-green-400">✅</div>
+            <CardTitle class="text-green-400">Cash Ready!</CardTitle>
+            <p v-if="context">
+              Please take your
+              <Badge class="bg-green-600 text-lg">${{ formatFiat(context.fiatAmount) }}</Badge>
+            </p>
             <Button
-              variant="outline"
-              class="flex-1"
-              :disabled="!context?.cashOutSelection?.length"
-              @click="atmStore.clearSelection()"
+              class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
+              size="lg"
+              @click="confirmCashTaken"
             >
-              Clear
+              I've Taken the Cash
             </Button>
+          </CardContent>
+        </Card>
+
+        <!-- Ask for Receipt -->
+        <Card
+          v-else-if="nestedState === 'askForReceipt'"
+          class="w-full max-w-80 border-0 bg-white/5"
+        >
+          <CardContent class="flex flex-col items-center gap-4 p-8">
+            <CardTitle>Would you like a receipt?</CardTitle>
+            <p class="text-sm text-muted-foreground">
+              Scan your npub to receive a Nostr DM receipt
+            </p>
+            <div class="flex h-32 w-32 items-center justify-center rounded-lg bg-white">
+              <p class="text-black">📱 Scan npub</p>
+            </div>
+            <Button variant="outline" @click="skipReceipt">No Thanks</Button>
+          </CardContent>
+        </Card>
+
+        <!-- Complete -->
+        <Card
+          v-else-if="nestedState === 'complete'"
+          class="w-full max-w-80 border-0 bg-green-900/30"
+        >
+          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
+            <div class="text-6xl">🎉</div>
+            <CardTitle class="text-green-400">Transaction Complete!</CardTitle>
+            <p class="text-muted-foreground">Thank you!</p>
+          </CardContent>
+        </Card>
+
+        <!-- Error -->
+        <Card
+          v-else-if="nestedState === 'error' || nestedState === 'dispenseError'"
+          class="w-full max-w-80 border-0 bg-red-900/30"
+        >
+          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
+            <div class="text-6xl">⚠️</div>
+            <CardTitle class="text-red-400">Error</CardTitle>
+            <p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
             <Button
-              class="flex-1 bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
-              :disabled="!context?.cashOutSelection?.length"
-              @click="atmStore.confirmAmount()"
+              class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black"
+              @click="cancel"
             >
-              Continue
+              Return to Start
             </Button>
-          </div>
+          </CardContent>
+        </Card>
 
-          <!-- Instructions -->
-          <Alert class="border-orange-500/50 bg-orange-500/10">
-            <AlertDescription>
-              <p class="text-sm text-muted-foreground">
-                Select the cash amount you want to receive. You'll pay the equivalent in Bitcoin.
-              </p>
-            </AlertDescription>
-          </Alert>
-        </CardContent>
-      </Card>
-
-      <!-- Generating Invoice -->
-      <Card
-        v-else-if="nestedState === 'generatingInvoice'"
-        class="w-full max-w-80 border-0 bg-white/5"
-      >
-        <CardContent class="flex flex-col items-center gap-4 p-8">
-          <Skeleton class="h-10 w-10 rounded-full" />
-          <p class="text-muted-foreground">Creating invoice...</p>
-        </CardContent>
-      </Card>
-
-      <!-- Displaying Invoice - Show QR for payment -->
-      <Card
-        v-else-if="nestedState === 'displayingInvoice'"
-        class="w-full max-w-[480px] border-0 bg-white/5"
-      >
-        <CardHeader class="text-center">
-          <CardTitle>Scan to Pay</CardTitle>
-          <CardDescription v-if="context">
-            Pay <Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge> to
-            receive <Badge class="bg-green-600">${{ formatFiat(context.fiatAmount) }}</Badge>
-          </CardDescription>
-        </CardHeader>
-        <CardContent class="space-y-6">
-          <!-- Invoice QR Code -->
-          <div class="flex flex-col items-center">
-            <QRCode v-if="context?.invoice" :value="context.invoice" :size="220" />
-            <p class="mt-4 text-center text-sm text-muted-foreground">
-              Scan with any Lightning wallet
-            </p>
-          </div>
-
-          <!-- Payment status -->
-          <div class="flex flex-col items-center gap-4 py-4">
-            <div class="h-12 w-12 animate-pulse rounded-full bg-orange-500/20">
-              <div class="flex h-full items-center justify-center text-2xl">⏳</div>
-            </div>
-            <p class="text-center text-muted-foreground">Waiting for payment...</p>
-          </div>
-
-          <!-- Invoice info with copy button -->
-          <div v-if="context?.invoice" class="rounded-lg bg-white/5 p-3">
-            <p class="mb-2 truncate text-center font-mono text-xs text-muted-foreground">
-              {{ context.invoice.slice(0, 50) }}...
-            </p>
-            <div class="flex justify-center">
-              <Button variant="outline" size="sm" @click="copyInvoice">
-                {{ copyButtonText }}
-              </Button>
-            </div>
-          </div>
-
-          <!-- Dev controls -->
-          <Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10">
-            <AlertDescription class="text-center">
-              <p class="mb-2 text-xs text-red-400">Dev: Use alice-pay or button below</p>
-              <Button
-                variant="outline"
-                size="sm"
-                @click="atmStore.paymentReceived('mock-preimage-' + Date.now())"
-              >
-                Simulate Payment
-              </Button>
-            </AlertDescription>
-          </Alert>
-        </CardContent>
-      </Card>
-
-      <!-- Dispensing Cash -->
-      <Card
-        v-else-if="nestedState === 'dispensingCash'"
-        class="w-full max-w-80 border-0 bg-white/5"
-      >
-        <CardContent class="flex flex-col items-center gap-4 p-8">
-          <Skeleton class="h-10 w-10 rounded-full" />
-          <p class="text-muted-foreground">Dispensing cash...</p>
-          <p class="text-sm text-muted-foreground">Please wait</p>
-        </CardContent>
-      </Card>
-
-      <!-- Cash Ready -->
-      <Card
-        v-else-if="nestedState === 'waitingForCashTaken'"
-        class="w-full max-w-80 border-0 bg-green-900/30"
-      >
-        <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-          <div class="text-6xl text-green-400">✅</div>
-          <CardTitle class="text-green-400">Cash Ready!</CardTitle>
-          <p v-if="context">
-            Please take your
-            <Badge class="bg-green-600 text-lg">${{ formatFiat(context.fiatAmount) }}</Badge>
-          </p>
-          <Button
-            class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
-            size="lg"
-            @click="confirmCashTaken"
-          >
-            I've Taken the Cash
-          </Button>
-        </CardContent>
-      </Card>
-
-      <!-- Ask for Receipt -->
-      <Card v-else-if="nestedState === 'askForReceipt'" class="w-full max-w-80 border-0 bg-white/5">
-        <CardContent class="flex flex-col items-center gap-4 p-8">
-          <CardTitle>Would you like a receipt?</CardTitle>
-          <p class="text-sm text-muted-foreground">Scan your npub to receive a Nostr DM receipt</p>
-          <div class="flex h-32 w-32 items-center justify-center rounded-lg bg-white">
-            <p class="text-black">📱 Scan npub</p>
-          </div>
-          <Button variant="outline" @click="skipReceipt">No Thanks</Button>
-        </CardContent>
-      </Card>
-
-      <!-- Complete -->
-      <Card v-else-if="nestedState === 'complete'" class="w-full max-w-80 border-0 bg-green-900/30">
-        <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-          <div class="text-6xl">🎉</div>
-          <CardTitle class="text-green-400">Transaction Complete!</CardTitle>
-          <p class="text-muted-foreground">Thank you!</p>
-        </CardContent>
-      </Card>
-
-      <!-- Error -->
-      <Card
-        v-else-if="nestedState === 'error' || nestedState === 'dispenseError'"
-        class="w-full max-w-80 border-0 bg-red-900/30"
-      >
-        <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-          <div class="text-6xl">⚠️</div>
-          <CardTitle class="text-red-400">Error</CardTitle>
-          <p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
-          <Button class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black" @click="cancel">
-            Return to Start
-          </Button>
-        </CardContent>
-      </Card>
-
-      <!-- Fallback -->
-      <Card v-else class="w-full max-w-80 border-0 bg-white/5">
-        <CardContent class="p-8 text-center">
-          <p class="text-muted-foreground">State: {{ nestedState }}</p>
-        </CardContent>
-      </Card>
-    </main>
+        <!-- Fallback -->
+        <Card v-else class="w-full max-w-80 border-0 bg-white/5">
+          <CardContent class="p-8 text-center">
+            <p class="text-muted-foreground">State: {{ nestedState }}</p>
+          </CardContent>
+        </Card>
+      </main>
+    </ScrollArea>
   </div>
 </template>

apps/machine/src/views/IdleView.vue

@@ -59,7 +59,9 @@ function handleCashOut() {
 </script>
 
 <template>
-  <div class="flex flex-1 flex-col items-center justify-center gap-4 p-4 sm:gap-6 md:gap-8 md:p-8">
+  <div
+    class="flex min-h-0 flex-1 flex-col items-center justify-center gap-4 overflow-auto p-4 sm:gap-6 md:gap-8 md:p-8"
+  >
     <!-- Logo -->
     <div class="flex flex-col items-center gap-1 sm:gap-2">
       <img
@@ -187,14 +189,15 @@ function handleCashOut() {
       </div>
     </div>
 
-    <!-- Debug toggle -->
+    <!-- Debug toggle (only visible when debug bar is hidden) -->
     <Button
+      v-if="!atmStore.debugMode"
       variant="ghost"
       size="sm"
       class="absolute bottom-4 right-4 text-xs text-muted-foreground"
       @click="atmStore.toggleDebug"
     >
-      {{ atmStore.debugMode ? 'Hide Debug' : 'Show Debug' }}
+      Show Debug
     </Button>
   </div>
 </template>

docs/business-model.md

@@ -0,0 +1,121 @@
+# Business Model
+
+How we place ATMs at locations and make them sustainable for everyone involved.
+
+## Principles
+
+- **No KYC** — more users, less friction, preserves privacy
+- **Good energy locations** — we seek places with community trust and genuine intent
+- **Bitcoin-native infrastructure** — Lightning, Nostr, Cashu — no legacy payment rails
+- **Operator sovereignty** — locations can choose how much they want to manage themselves
+
+## Deployment Models
+
+### Managed (we run it)
+
+We own the machine and handle all operations. The location provides power, internet, and floor space.
+
+| Aspect              | Details                                   |
+| ------------------- | ----------------------------------------- |
+| Machine ownership   | Us                                        |
+| Liquidity           | Our Lightning channels + cash servicing   |
+| Software updates    | Us (remote via Nostr)                     |
+| Cash management     | Us (periodic servicing visits)            |
+| Fee configuration   | Us                                        |
+| Revenue to location | Fixed monthly hosting fee OR % of tx fees |
+
+Best for locations that want passive income with zero involvement.
+
+### Self-Sovereign (they run it)
+
+The location buys (or finances) the machine and runs their own stack.
+
+| Aspect            | Details                                  |
+| ----------------- | ---------------------------------------- |
+| Machine ownership | Them                                     |
+| Liquidity         | Their own Lightning node + Lightning.Pub |
+| Software updates  | Them (we provide releases)               |
+| Cash management   | Them                                     |
+| Fee configuration | Them                                     |
+| Revenue           | 100% theirs                              |
+
+Best for bitcoiners who want to run infrastructure and keep full control. We provide the software, hardware, and support.
+
+### Machine Financing
+
+For the self-sovereign model, we can offer financing:
+
+- We purchase the machine upfront
+- Location pays it off over time (from ATM revenue)
+- Once paid off, they own it outright
+- We provide support during the financing period
+
+## Revenue Models
+
+### Fixed Hosting Fee
+
+- We pay the location a flat monthly fee for hosting
+- Simpler accounting, predictable income for location
+- We take all transaction fee revenue
+- Works well for locations that just want passive income
+
+### Profit Sharing
+
+- Location receives a % of transaction fees
+- Aligns incentives — they benefit from higher volume
+- More attractive to engaged locations
+- Requires transparent reporting (could be on-chain/Nostr-verifiable)
+
+### Foot Traffic Value
+
+Beyond direct revenue, the ATM provides:
+
+- People visit specifically to use the ATM, then browse/buy at the location
+- Bitcoin-friendly branding signals to the community
+- Conversation starter — draws curious newcomers
+- Community hub potential — meetup anchor point
+
+## Location Criteria
+
+We're selective about where we place machines. The goal is to find locations with **good energy** — places where the community is genuine and the environment discourages misuse.
+
+### Ideal locations
+
+- Coffee shops, cafes, local restaurants
+- Co-working spaces, maker spaces
+- Bitcoin meetup venues, hackerspaces
+- Surf shops, yoga studios, wellness centers
+- Local/independent businesses (not chains)
+- Places where the owner is curious about or already into Bitcoin
+
+### What we look for
+
+- Owner alignment — understands or wants to understand Bitcoin
+- Community trust — regulars know each other, self-policing
+- Foot traffic — enough people to make the machine worthwhile
+- Stable internet + power
+- Visible but not exposed — inside the business, not on the street
+
+### What we avoid
+
+- High-crime areas
+- Anonymous/transient locations (gas stations on highways, etc.)
+- Businesses with no community connection
+- Anywhere the owner is purely financially motivated with no alignment
+
+## Technical Requirements
+
+For the managed model to work at scale, we need:
+
+- **Remote monitoring** — machine status, cash levels, error alerts over [[clink-protocol|CLINK]]/Nostr
+- **Operator dashboard** — manage cassettes, view transactions, update config remotely
+- **Multi-machine support** — one Lightning.Pub instance serving multiple ATMs
+- **Fee configuration** — per-machine fee % set by operator
+- **Availability broadcast** — public Nostr events indicating cash-in/cash-out availability (see [[ndebit-cash-in-flow|cash-in flow]])
+
+## Related
+
+- [[device-configuration]] — hardware setup for different machine models
+- [[machine-installation]] — NixOS installation on ATM hardware
+- [[clink-protocol]] — CLINK protocol for ATM-wallet communication
+- [[ndebit-cash-in-flow]] — cash-in payment flow