Mobile Crypto Wallet Screen with BTC Chart

<div class="relative">
          <div class="w-[393px] h-[854px] bg-black rounded-[39px] shadow-[0_8px_30px_rgba(0,0,0,0.8)] overflow-hidden relative">
            <!-- Dynamic Island -->
            <div class="absolute top-3 left-1/2 -translate-x-1/2 w-[126px] h-[37px] dynamic-island z-50"></div>
            
            <!-- Status Bar -->
            <div class="absolute top-2 left-6 text-white text-sm font-medium z-50 font-sans" style="">9:41</div>
            <div class="absolute top-2 right-6 flex items-center gap-1 z-50">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="signal" class="lucide lucide-signal w-4 h-4 text-white"><path d="M2 20h.01" class=""></path><path d="M7 20v-4" class=""></path><path d="M12 20v-8" class=""></path><path d="M17 20V8" class=""></path><path d="M22 4v16" class=""></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi w-4 h-4 text-white"><path d="M12 20h.01" class=""></path><path d="M2 8.82a15 15 0 0 1 20 0" class=""></path><path d="M5 12.859a10 10 0 0 1 14 0" class=""></path><path d="M8.5 16.429a5 5 0 0 1 7 0" class=""></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="battery" class="lucide lucide-battery w-4 h-4 text-white"><path d="M 22 14 L 22 10" class=""></path><rect x="2" y="6" width="16" height="12" rx="2" class=""></rect></svg>
            </div>

            <!-- Scrollable Content -->
            <div class="h-full scrollable-content pt-14 pb-32">
              <div class="px-4">
                <!-- Header -->
                <div class="flex items-center justify-between mb-6">
                  <button class="w-8 h-8 border border-gray-700 rounded-lg flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-left" class="lucide lucide-chevron-left w-5 h-5 text-white"><path d="m15 18-6-6 6-6" class=""></path></svg>
                  </button>
                  <h1 class="text-lg font-semibold font-inter font-sans" style="">Bitcoin</h1>
                  <button class="w-8 h-8 border border-gray-700 rounded-lg flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal w-5 h-5 text-white"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
                  </button>
                </div>

                <!-- Price Info -->
                <div class="bg-gray-900/50 border-gray-800 border rounded-xl mb-6 pt-6 pr-6 pb-6 pl-6 backdrop-blur-xl">
  <div class="flex items-center gap-3 mb-4">
    <div class="w-12 h-12 bg-orange-500 rounded-xl flex items-center justify-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bitcoin" class="lucide lucide-bitcoin w-6 h-6 text-white"><path d="M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727" class=""></path></svg>
    </div>
    <div class="">
      <p class="text-xl font-semibold font-inter font-sans" style="">$43,892.47</p>
      <div class="flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3 h-3 text-green-400"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
        <span class="text-green-400 text-sm font-inter font-sans" style="">+$1,247.23 (2.93%)</span>
      </div>
    </div>
  </div>

  <!-- Chart -->
  <div class="h-32 rounded-xl mb-4">
    <canvas id="btcTradingChart" class="w-full h-full" style="display: block; box-sizing: border-box; height: 128px; width: 311px;" width="622" height="256"></canvas>
    <script>
      // Initialize Bitcoin trading chart
      const tradingCtx = document.getElementById('btcTradingChart');
      if (tradingCtx && window.Chart) {
        new Chart(tradingCtx, {
          type: 'line',
          data: {
            labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            datasets: [{
              label: 'BTC Price',
              data: [42645, 43120, 43850, 44200, 43750, 43892, 43892],
              borderColor: '#34C759',
              backgroundColor: 'rgba(52, 199, 89, 0.1)',
              borderWidth: 2,
              fill: true,
              tension: 0.4,
              pointBackgroundColor: '#34C759',
              pointBorderColor: '#ffffff',
              pointBorderWidth: 2,
              pointRadius: 4,
              pointHoverRadius: 6
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: { 
                display: false
              },
              tooltip: {
                enabled: true,
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                titleColor: '#ffffff',
                bodyColor: '#ffffff',
                borderColor: '#374151',
                borderWidth: 1,
                cornerRadius: 8,
                displayColors: false,
                callbacks: {
                  label: function(context) {
                    return '$' + context.raw.toLocaleString();
                  }
                }
              }
            },
            scales: {
              x: { 
                display: true,
                grid: {
                  display: false
                },
                ticks: {
                  color: '#9CA3AF',
                  font: {
                    size: 10
                  }
                }
              },
              y: { 
                display: false,
                min: 42000,
                max: 45000
              }
            },
            interaction: {
              intersect: false,
              mode: 'index'
            }
          }
        });
      }
    </script>
  </div>

  <!-- Time Range -->
  <div class="flex items-center justify-between">
    <div class="flex bg-gray-800 rounded-lg p-1">
      <button class="text-sm text-gray-400 font-inter pt-1 pr-3 pb-1 pl-3 font-sans" style="">1H</button>
      <button class="px-3 py-1 text-sm bg-white text-black rounded-md font-inter font-sans" style="">24H</button>
      <button class="px-3 py-1 text-sm text-gray-400 font-inter font-sans" style="">1W</button>
      <button class="px-3 py-1 text-sm text-gray-400 font-inter font-sans" style="">1M</button>
    </div>
    <button class="text-gray-400 font-medium font-inter font-sans" style="">Full Chart</button>
  </div>
</div>

                <!-- Trade Actions -->
                <div class="grid grid-cols-2 gap-4 mb-6">
                  <button class="bg-green-500 rounded-xl py-6 flex flex-col items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-6 h-6 text-white"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                    <span class="text-white font-medium font-inter font-sans" style="">Buy BTC</span>
                  </button>
                  <button class="bg-red-500 rounded-xl py-6 flex flex-col items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-down" class="lucide lucide-trending-down w-6 h-6 text-white"><path d="M16 17h6v-6" class=""></path><path d="m22 17-8.5-8.5-5 5L2 7" class=""></path></svg>
                    <span class="text-white font-medium font-inter font-sans" style="">Sell BTC</span>
                  </button>
                </div>

                <!-- Recent Transactions -->
                <div class="mb-8">
                  <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold font-inter font-sans" style="">Recent Activity</h3>
                    <button class="text-gray-400 font-medium font-inter font-sans" style="">View All</button>
                  </div>

                  <div class="space-y-3">
                    <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm rounded-xl p-4 flex items-center gap-4">
                      <div class="w-10 h-10 bg-green-500/20 rounded-xl flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-5 h-5 text-green-400"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                      </div>
                      <div class="flex-1">
                        <p class="font-medium font-inter font-sans" style="">Purchased Bitcoin</p>
                        <p class="text-gray-400 text-sm font-inter font-sans" style="">Today, 2:15 PM</p>
                      </div>
                      <div class="text-right">
                        <p class="font-medium font-inter font-sans" style="">+0.125 BTC</p>
                        <p class="text-gray-400 text-sm font-inter font-sans" style="">$5,486.56</p>
                      </div>
                    </div>

                    <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm rounded-xl p-4 flex items-center gap-4">
                      <div class="w-10 h-10 bg-red-500/20 rounded-xl flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus w-5 h-5 text-red-400"><path d="M5 12h14" class=""></path></svg>
                      </div>
                      <div class="flex-1">
                        <p class="font-medium font-inter font-sans" style="">Sold Ethereum</p>
                        <p class="text-gray-400 text-sm font-inter font-sans" style="">Yesterday, 4:30 PM</p>
                      </div>
                      <div class="text-right">
                        <p class="font-medium font-inter font-sans" style="">-2.5 ETH</p>
                        <p class="text-gray-400 text-sm font-inter font-sans" style="">$7,125.00</p>
                      </div>
                    </div>

                    <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm rounded-xl p-4 flex items-center gap-4">
                      <div class="w-10 h-10 bg-blue-500/20 rounded-xl flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="repeat" class="lucide lucide-repeat w-5 h-5 text-blue-400"><path d="m17 2 4 4-4 4" class=""></path><path d="M3 11v-1a4 4 0 0 1 4-4h14" class=""></path><path d="m7 22-4-4 4-4" class=""></path><path d="M21 13v1a4 4 0 0 1-4 4H3" class=""></path></svg>
                      </div>
                      <div class="flex-1">
                        <p class="font-medium font-inter font-sans" style="">Swapped ADA → SOL</p>
                        <p class="text-gray-400 text-sm font-inter font-sans" style="">Dec 14, 1:20 PM</p>
                      </div>
                      <div class="text-right">
                        <p class="font-medium font-inter font-sans" style="">500 ADA</p>
                        <p class="text-gray-400 text-sm font-inter font-sans" style="">$1,650.00</p>
                      </div>
                    </div>

                    <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm rounded-xl p-4 flex items-center gap-4">
                      <div class="w-10 h-10 bg-green-500/20 rounded-xl flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-down-left" class="lucide lucide-arrow-down-left w-5 h-5 text-green-400"><path d="M17 7 7 17" class=""></path><path d="M17 17H7V7" class=""></path></svg>
                      </div>
                      <div class="flex-1">
                        <p class="font-medium font-inter font-sans" style="">Received Transfer</p>
                        <p class="text-gray-400 text-sm font-inter font-sans" style="">Dec 13, 9:45 AM</p>
                      </div>
                      <div class="text-right">
                        <p class="font-medium text-green-400 font-inter font-sans" style="">+50 MATIC</p>
                        <p class="text-gray-400 text-sm font-inter font-sans" style="">$45.00</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Fixed Tab Bar -->
            <div class="absolute bottom-8 left-2 right-2 ios-blur rounded-xl p-2">
              <div class="flex items-center justify-around py-2">
                <div class="flex flex-col items-center gap-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="home" class="lucide lucide-home w-6 h-6 text-gray-500"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path></svg>
                  <span class="text-xs text-gray-500 font-inter font-sans" style="">Wallet</span>
                </div>
                <div class="flex flex-col items-center gap-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-6 h-6 text-gray-500"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                  <span class="text-xs text-gray-500 font-inter font-sans" style="">Markets</span>
                </div>
                <div class="flex flex-col items-center gap-1">
                  <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="repeat" class="lucide lucide-repeat w-4 h-4 text-black"><path d="m17 2 4 4-4 4" class=""></path><path d="M3 11v-1a4 4 0 0 1 4-4h14" class=""></path><path d="m7 22-4-4 4-4" class=""></path><path d="M21 13v1a4 4 0 0 1-4 4H3" class=""></path></svg>
                  </div>
                  <span class="text-xs text-white font-medium font-inter font-sans" style="">Exchange</span>
                </div>
                <div class="flex flex-col items-center gap-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock w-6 h-6 text-gray-500"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                  <span class="text-xs text-gray-500 font-inter font-sans" style="">History</span>
                </div>
              </div>
            </div>

            <!-- Fixed Home Indicator -->
            <div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-32 h-1 bg-gray-600 rounded-full"></div>
          </div>
        </div>