{
  "version": 1,
  "exportedAt": "2026-05-29T18:09:55.545Z",
  "project": {
    "id": "f0b984f8-eb83-4202-8d4d-fe04b5891e4e",
    "name": "Restaurant roulette.",
    "createdAt": "2026-05-29T15:34:40.496Z",
    "updatedAt": "2026-05-29T18:05:01.733Z",
    "screenCount": 5
  },
  "settings": {
    "designMd": "Restaurant Roulette is a mobile application that allows users to set a preference for the type of food that they like and restaurants that they like to visit. They have the ability to swipe through different restaurant options, sort of like a social media feed, and then they're able to favorite their favorite restaurant options. \n\nColor palette. \n--background-color: #1A1A2E;\n--surface-color: #25253A;\n--primary-color: #FF6B35;\n--secondary-color: #2E2E4A;\n--accent-color: #FFD166;\n--text-color: #F5F5F5;\n--subtext-color: #9494B2;\n--success-color: #4CAF82;\n",
    "deviceTarget": "mobile",
    "designMode": "high-fidelity",
    "modelFamily": "sonnet"
  },
  "workspace": {
    "screens": [
      {
        "id": "d19e938e-ccea-4760-ba9d-22d06d81d644",
        "name": "Restaurant Roulette – Recommendations (Light Palette)",
        "hasCustomName": false,
        "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Recommendations</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            bg:        '#1A1A2E',\n            surface:   '#25253A',\n            primary:   '#FF6B35',\n            secondary: '#2E2E4A',\n            accent:    '#FFD166',\n            text:      '#F5F5F5',\n            subtext:   '#9494B2',\n            success:   '#4CAF82',\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; }\n    body { margin: 0; background: #0f0f1f; font-family: 'Inter', sans-serif; }\n    .phone-shell {\n      width: 375px;\n      height: 840px;\n      overflow: hidden;\n      position: relative;\n      background: #1A1A2E;\n    }\n    .hide-scrollbar::-webkit-scrollbar { display: none; }\n    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n    .card-stack {\n      position: relative;\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .card-behind {\n      position: absolute;\n      width: 308px;\n      height: 510px;\n      background: #2E2E4A;\n      border-radius: 20px;\n      top: 12px;\n      z-index: 0;\n    }\n    .card-behind-2 {\n      position: absolute;\n      width: 296px;\n      height: 510px;\n      background: #25253A;\n      border-radius: 20px;\n      top: 22px;\n      z-index: -1;\n    }\n    .main-card {\n      position: relative;\n      z-index: 1;\n      width: 320px;\n      background: #25253A;\n      border-radius: 20px;\n      overflow: hidden;\n      border: 1.5px solid #2E2E4A;\n    }\n  </style>\n</head>\n<body class=\"flex items-center justify-center min-h-screen\">\n\n<div class=\"phone-shell flex flex-col\">\n\n  <!-- Status Bar -->\n  <div class=\"flex items-center justify-between px-5 pt-3 pb-1 shrink-0\" style=\"background:#1A1A2E;\">\n    <span class=\"text-xs font-semibold\" style=\"color:#F5F5F5;\">9:41</span>\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-signal text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-wifi text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-battery-three-quarters text-xs\" style=\"color:#F5F5F5;\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"flex items-center justify-between px-5 py-3 shrink-0 border-b\" style=\"background:#1A1A2E; border-color:#2E2E4A;\">\n    <div>\n      <p class=\"text-xs font-medium tracking-wide uppercase\" style=\"color:#9494B2;\">Today's Pick</p>\n      <h1 class=\"text-lg font-extrabold leading-tight\" style=\"color:#F5F5F5;\">Discover</h1>\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <button class=\"w-8 h-8 rounded-full flex items-center justify-center border\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-sliders text-sm\" style=\"color:#9494B2;\"></i>\n      </button>\n      <button class=\"w-8 h-8 rounded-full flex items-center justify-center border\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-bell text-sm\" style=\"color:#9494B2;\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Swipe Hint -->\n  <div class=\"flex items-center justify-between px-5 py-2 shrink-0\" style=\"background:#1A1A2E;\">\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-arrow-left text-xs\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Skip</span>\n    </div>\n    <div class=\"flex items-center gap-1.5\">\n      <div class=\"w-2 h-2 rounded-full\" style=\"background:#FF6B35;\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#2E2E4A;\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#2E2E4A;\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#2E2E4A;\"></div>\n    </div>\n    <div class=\"flex items-center gap-1.5\">\n      <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Save</span>\n      <i class=\"fa fa-arrow-right text-xs\" style=\"color:#9494B2;\"></i>\n    </div>\n  </div>\n\n  <!-- Card Stack Area -->\n  <div class=\"flex-1 flex flex-col items-center px-4 pt-1 pb-2 overflow-y-auto hide-scrollbar\" style=\"background:#1A1A2E;\">\n\n    <div class=\"card-stack mb-4\" style=\"height:538px; width:100%;\">\n      <!-- Behind cards -->\n      <div class=\"card-behind-2\"></div>\n      <div class=\"card-behind\"></div>\n\n      <!-- Main Card -->\n      <div class=\"main-card\">\n\n        <!-- Food Images Row -->\n        <div class=\"flex gap-0 w-full\" style=\"height:170px;\">\n          <!-- Primary food image -->\n          <div class=\"w-2/3 relative flex items-center justify-center border-r\" style=\"height:170px; background:#2E2E4A; border-color:#3a3a58;\">\n            <div class=\"absolute inset-0 flex flex-col items-center justify-center gap-1\">\n              <i class=\"fa fa-utensils text-3xl\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Signature Dish</span>\n            </div>\n            <!-- Tag badge -->\n            <div class=\"absolute top-2 left-2 text-xs font-semibold px-2 py-0.5 rounded-full\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              Italian\n            </div>\n          </div>\n          <!-- Secondary food image -->\n          <div class=\"w-1/3 flex flex-col\" style=\"height:170px;\">\n            <div class=\"flex-1 flex flex-col items-center justify-center gap-1 border-b\" style=\"background:#25253A; border-color:#3a3a58;\">\n              <i class=\"fa fa-wine-glass text-xl\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs\" style=\"color:#9494B2;\">Drinks</span>\n            </div>\n            <div class=\"flex-1 flex flex-col items-center justify-center gap-1\" style=\"background:#2E2E4A;\">\n              <i class=\"fa fa-ice-cream text-xl\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs\" style=\"color:#9494B2;\">Dessert</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Restaurant Info -->\n        <div class=\"px-4 pt-3 pb-2\">\n\n          <!-- Name + Favorite -->\n          <div class=\"flex items-start justify-between mb-1\">\n            <div>\n              <h2 class=\"text-base font-bold leading-tight\" style=\"color:#F5F5F5;\">Bella Napoli Trattoria</h2>\n              <p class=\"text-xs mt-0.5\" style=\"color:#9494B2;\">Italian · Pasta · Wood-fired Pizza</p>\n            </div>\n            <button class=\"w-8 h-8 rounded-full flex items-center justify-center shrink-0 ml-2 border\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n              <i class=\"fa-regular fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n\n          <!-- Rating + Distance Row -->\n          <div class=\"flex items-center gap-3 mt-2 flex-wrap\">\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <i class=\"fa fa-star-half-stroke text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.5</span>\n              <span class=\"text-xs\" style=\"color:#9494B2;\">(312 reviews)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#FF6B35;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">1.2 mi away</span>\n            </div>\n          </div>\n\n          <!-- Price Range + Open Status -->\n          <div class=\"flex items-center gap-3 mt-1.5 flex-wrap\">\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-dollar-sign text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">$$  ·  $14–$32</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#4CAF82;\"></div>\n              <span class=\"text-xs font-semibold\" style=\"color:#4CAF82;\">Open Now</span>\n              <span class=\"text-xs\" style=\"color:#9494B2;\">· Closes 10 PM</span>\n            </div>\n          </div>\n\n          <!-- Divider -->\n          <div class=\"border-t mt-3 mb-3\" style=\"border-color:#2E2E4A;\"></div>\n\n          <!-- CTA Buttons -->\n          <div class=\"flex gap-2 mb-3\">\n            <button class=\"flex-1 flex items-center justify-center gap-1.5 text-xs font-semibold py-2.5 rounded-xl\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n            <button class=\"flex-1 flex items-center justify-center gap-1.5 text-xs font-semibold py-2.5 rounded-xl border\" style=\"background:#2E2E4A; border-color:#3a3a58; color:#F5F5F5;\">\n              <i class=\"fa fa-clock text-xs\"></i>\n              Hours\n            </button>\n          </div>\n\n          <!-- Hours Dropdown (collapsed preview) -->\n          <div class=\"rounded-xl px-3 py-2 mb-2 border\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-1.5\">\n                <i class=\"fa fa-clock text-xs\" style=\"color:#9494B2;\"></i>\n                <span class=\"text-xs font-semibold\" style=\"color:#F5F5F5;\">Hours of Operation</span>\n              </div>\n              <i class=\"fa fa-chevron-down text-xs\" style=\"color:#9494B2;\"></i>\n            </div>\n            <div class=\"mt-1.5 flex flex-col gap-0.5\">\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs\" style=\"color:#9494B2;\">Mon – Thu</span>\n                <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 10:00 PM</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs\" style=\"color:#9494B2;\">Fri – Sat</span>\n                <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 11:30 PM</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs\" style=\"color:#9494B2;\">Sunday</span>\n                <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">12:00 PM – 9:00 PM</span>\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"shrink-0 flex items-center justify-around px-2 pt-2 pb-4 border-t\" style=\"background:#1A1A2E; border-color:#2E2E4A;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-base\" style=\"color:#FF6B35;\"></i>\n      <span class=\"text-xs font-semibold\" style=\"color:#FF6B35;\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Favorite</span>\n    </button>\n  </div>\n\n</div>\n\n</body>\n</html>",
        "deviceTarget": "mobile",
        "isPalette": false,
        "status": "ready",
        "isEditing": false,
        "x": 1164.5762186899433,
        "y": 3.6575625321217444,
        "isSelected": false,
        "version": 4,
        "activeRevisionIndex": 3,
        "history": [
          {
            "id": "2fbf41f0-b156-45f0-849a-1c2fbeea1e8f",
            "prompt": "Go ahead and generate me the recommendation screen. This screen should be like a social media feed but it's going to work horizontally. Users are going to swipe when they want to see different food recommendations and then users are going to swipe towards the right whenever they have a recommendation that they actually want to save. So users are going to get a restaurant recommendation on a card that has your listings, like the restaurant's name, the star ratings, and how far it is from them. And ideally it should surface maybe one or two pictures of the food that's on the menu. Users should also see multiple CTAs:\n- Users should see a CTA that says \"View menu\".\n- Users should also see a CTA that says \"Hours of operation\". And then again there's the swipe right feature where users can swipe right to basically save the recommendations.",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Recommendations</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            gray: {\n              50:  '#fafafa',\n              100: '#f4f4f5',\n              150: '#eeeeef',\n              200: '#e4e4e7',\n              300: '#d1d1d6',\n              400: '#a1a1aa',\n              500: '#71717a',\n              600: '#52525b',\n              700: '#3f3f46',\n              800: '#27272a',\n              900: '#18181b',\n            }\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; }\n    body { margin: 0; background: #e4e4e7; font-family: 'Inter', sans-serif; }\n    .phone-shell {\n      width: 375px;\n      height: 840px;\n      overflow: hidden;\n      position: relative;\n      background: #f4f4f5;\n    }\n    .hide-scrollbar::-webkit-scrollbar { display: none; }\n    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n    .card-stack {\n      position: relative;\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    /* Subtle card-behind effect */\n    .card-behind {\n      position: absolute;\n      width: 308px;\n      height: 510px;\n      background: #e4e4e7;\n      border-radius: 20px;\n      top: 12px;\n      z-index: 0;\n    }\n    .card-behind-2 {\n      position: absolute;\n      width: 296px;\n      height: 510px;\n      background: #d1d1d6;\n      border-radius: 20px;\n      top: 22px;\n      z-index: -1;\n    }\n    .main-card {\n      position: relative;\n      z-index: 1;\n      width: 320px;\n      background: #fff;\n      border-radius: 20px;\n      overflow: hidden;\n      border: 1.5px solid #d1d1d6;\n    }\n  </style>\n</head>\n<body class=\"flex items-center justify-center min-h-screen\">\n\n<div class=\"phone-shell flex flex-col\">\n\n  <!-- Status Bar -->\n  <div class=\"flex items-center justify-between px-5 pt-3 pb-1 bg-gray-50 shrink-0\">\n    <span class=\"text-xs font-semibold text-gray-800\">9:41</span>\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-signal text-gray-800 text-xs\"></i>\n      <i class=\"fa fa-wifi text-gray-800 text-xs\"></i>\n      <i class=\"fa fa-battery-three-quarters text-gray-800 text-xs\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"flex items-center justify-between px-5 py-3 bg-gray-50 border-b border-gray-200 shrink-0\">\n    <div>\n      <p class=\"text-xs text-gray-400 font-medium tracking-wide uppercase\">Today's Pick</p>\n      <h1 class=\"text-lg font-extrabold text-gray-900 leading-tight\">Discover</h1>\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <button class=\"w-8 h-8 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n        <i class=\"fa fa-sliders text-gray-600 text-sm\"></i>\n      </button>\n      <button class=\"w-8 h-8 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n        <i class=\"fa fa-bell text-gray-600 text-sm\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Swipe Hint -->\n  <div class=\"flex items-center justify-between px-5 py-2 shrink-0\">\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-arrow-left text-gray-400 text-xs\"></i>\n      <span class=\"text-xs text-gray-400 font-medium\">Skip</span>\n    </div>\n    <div class=\"flex items-center gap-1.5\">\n      <div class=\"w-2 h-2 rounded-full bg-gray-800\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full bg-gray-300\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full bg-gray-300\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full bg-gray-300\"></div>\n    </div>\n    <div class=\"flex items-center gap-1.5\">\n      <span class=\"text-xs text-gray-400 font-medium\">Save</span>\n      <i class=\"fa fa-arrow-right text-gray-400 text-xs\"></i>\n    </div>\n  </div>\n\n  <!-- Card Stack Area -->\n  <div class=\"flex-1 flex flex-col items-center px-4 pt-1 pb-2 overflow-y-auto hide-scrollbar\">\n\n    <div class=\"card-stack mb-4\" style=\"height:538px; width:100%;\">\n      <!-- Behind cards -->\n      <div class=\"card-behind-2\"></div>\n      <div class=\"card-behind\"></div>\n\n      <!-- Main Card -->\n      <div class=\"main-card\">\n\n        <!-- Food Images Row -->\n        <div class=\"flex gap-0 w-full\" style=\"height:170px;\">\n          <!-- Primary food image -->\n          <div class=\"w-2/3 bg-gray-200 relative flex items-center justify-center border-r border-gray-100\" style=\"height:170px;\">\n            <div class=\"absolute inset-0 flex flex-col items-center justify-center gap-1\">\n              <i class=\"fa fa-utensils text-gray-400 text-3xl\"></i>\n              <span class=\"text-gray-400 text-xs font-medium\">Signature Dish</span>\n            </div>\n            <!-- Tag badge -->\n            <div class=\"absolute top-2 left-2 bg-gray-800 text-white text-xs font-semibold px-2 py-0.5 rounded-full\">\n              Italian\n            </div>\n          </div>\n          <!-- Secondary food image -->\n          <div class=\"w-1/3 flex flex-col\" style=\"height:170px;\">\n            <div class=\"flex-1 bg-gray-150 flex flex-col items-center justify-center border-b border-gray-100 gap-1\">\n              <i class=\"fa fa-wine-glass text-gray-400 text-xl\"></i>\n              <span class=\"text-gray-400 text-xs\">Drinks</span>\n            </div>\n            <div class=\"flex-1 bg-gray-200 flex flex-col items-center justify-center gap-1\">\n              <i class=\"fa fa-ice-cream text-gray-400 text-xl\"></i>\n              <span class=\"text-gray-400 text-xs\">Dessert</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Restaurant Info -->\n        <div class=\"px-4 pt-3 pb-2\">\n\n          <!-- Name + Favorite -->\n          <div class=\"flex items-start justify-between mb-1\">\n            <div>\n              <h2 class=\"text-base font-bold text-gray-900 leading-tight\">Bella Napoli Trattoria</h2>\n              <p class=\"text-xs text-gray-500 mt-0.5\">Italian · Pasta · Wood-fired Pizza</p>\n            </div>\n            <button class=\"w-8 h-8 rounded-full border border-gray-200 bg-gray-50 flex items-center justify-center shrink-0 ml-2\">\n              <i class=\"fa-regular fa-heart text-gray-400 text-sm\"></i>\n            </button>\n          </div>\n\n          <!-- Rating + Distance Row -->\n          <div class=\"flex items-center gap-3 mt-2 flex-wrap\">\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star-half-stroke text-gray-400 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.5</span>\n              <span class=\"text-xs text-gray-400\">(312 reviews)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-500 text-xs\"></i>\n              <span class=\"text-xs text-gray-600 font-medium\">1.2 mi away</span>\n            </div>\n          </div>\n\n          <!-- Price Range + Open Status -->\n          <div class=\"flex items-center gap-3 mt-1.5 flex-wrap\">\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-dollar-sign text-gray-500 text-xs\"></i>\n              <span class=\"text-xs text-gray-600 font-medium\">$$  ·  $14–$32</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <div class=\"w-1.5 h-1.5 rounded-full bg-gray-700\"></div>\n              <span class=\"text-xs text-gray-700 font-semibold\">Open Now</span>\n              <span class=\"text-xs text-gray-400\">· Closes 10 PM</span>\n            </div>\n          </div>\n\n          <!-- Divider -->\n          <div class=\"border-t border-gray-100 mt-3 mb-3\"></div>\n\n          <!-- CTA Buttons -->\n          <div class=\"flex gap-2 mb-3\">\n            <button class=\"flex-1 flex items-center justify-center gap-1.5 bg-gray-900 text-white text-xs font-semibold py-2.5 rounded-xl\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n            <button class=\"flex-1 flex items-center justify-center gap-1.5 bg-gray-100 border border-gray-200 text-gray-800 text-xs font-semibold py-2.5 rounded-xl\">\n              <i class=\"fa fa-clock text-xs\"></i>\n              Hours\n            </button>\n          </div>\n\n          <!-- Hours Dropdown (collapsed preview) -->\n          <div class=\"bg-gray-50 border border-gray-200 rounded-xl px-3 py-2 mb-2\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-1.5\">\n                <i class=\"fa fa-clock text-gray-400 text-xs\"></i>\n                <span class=\"text-xs font-semibold text-gray-700\">Hours of Operation</span>\n              </div>\n              <i class=\"fa fa-chevron-down text-gray-400 text-xs\"></i>\n            </div>\n            <div class=\"mt-1.5 flex flex-col gap-0.5\">\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs text-gray-500\">Mon – Thu</span>\n                <span class=\"text-xs font-medium text-gray-700\">11:00 AM – 10:00 PM</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs text-gray-500\">Fri – Sat</span>\n                <span class=\"text-xs font-medium text-gray-700\">11:00 AM – 11:30 PM</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs text-gray-500\">Sunday</span>\n                <span class=\"text-xs font-medium text-gray-700\">12:00 PM – 9:00 PM</span>\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n\n    <!-- Swipe Action Buttons -->\n    <div class=\"flex items-center justify-center gap-6 mt-1 mb-4\">\n      <!-- Skip -->\n      <button class=\"w-14 h-14 rounded-full bg-white border-2 border-gray-300 flex flex-col items-center justify-center gap-0.5 shadow-sm\">\n        <i class=\"fa fa-xmark text-gray-500 text-lg\"></i>\n        <span class=\"text-gray-400 text-xs leading-none\">Skip</span>\n      </button>\n      <!-- Info -->\n      <button class=\"w-11 h-11 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n        <i class=\"fa fa-info text-gray-500 text-sm\"></i>\n      </button>\n      <!-- Save / Swipe Right -->\n      <button class=\"w-14 h-14 rounded-full bg-gray-900 border-2 border-gray-900 flex flex-col items-center justify-center gap-0.5\">\n        <i class=\"fa fa-heart text-white text-lg\"></i>\n        <span class=\"text-white text-xs leading-none\">Save</span>\n      </button>\n    </div>\n\n    <!-- Saved Count -->\n    <div class=\"flex items-center gap-1.5 mb-2\">\n      <i class=\"fa fa-bookmark text-gray-400 text-xs\"></i>\n      <span class=\"text-xs text-gray-400\">3 restaurants saved this week</span>\n    </div>\n\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"shrink-0 bg-gray-50 border-t border-gray-200 flex items-center justify-around px-2 pt-2 pb-4\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-shuffle text-gray-900 text-base\"></i>\n      <span class=\"text-xs text-gray-900 font-semibold\">Discover</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-gray-400 text-base\"></i>\n      <span class=\"text-xs text-gray-400\">Saved</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-map-location-dot text-gray-400 text-base\"></i>\n      <span class=\"text-xs text-gray-400\">Nearby</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-circle-user text-gray-400 text-base\"></i>\n      <span class=\"text-xs text-gray-400\">Profile</span>\n    </button>\n  </div>\n\n</div>\n\n</body>\n</html>",
            "timestamp": "2026-05-29T15:37:53.069Z"
          },
          {
            "id": "39e3e911-87e3-4819-9bbd-180fad93cd20",
            "prompt": "I like this style. Go ahead and just remove the Save, Skip, and Information buttons on the bottom of the card. The card should basically fill up the entire amount of the screen. Leave everything else.",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Recommendations</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            gray: {\n              50:  '#fafafa',\n              100: '#f4f4f5',\n              150: '#eeeeef',\n              200: '#e4e4e7',\n              300: '#d1d1d6',\n              400: '#a1a1aa',\n              500: '#71717a',\n              600: '#52525b',\n              700: '#3f3f46',\n              800: '#27272a',\n              900: '#18181b',\n            }\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; }\n    body { margin: 0; background: #e4e4e7; font-family: 'Inter', sans-serif; }\n    .phone-shell {\n      width: 375px;\n      height: 840px;\n      overflow: hidden;\n      position: relative;\n      background: #f4f4f5;\n    }\n    .hide-scrollbar::-webkit-scrollbar { display: none; }\n    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n    .card-stack {\n      position: relative;\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    /* Subtle card-behind effect */\n    .card-behind {\n      position: absolute;\n      width: 308px;\n      height: 510px;\n      background: #e4e4e7;\n      border-radius: 20px;\n      top: 12px;\n      z-index: 0;\n    }\n    .card-behind-2 {\n      position: absolute;\n      width: 296px;\n      height: 510px;\n      background: #d1d1d6;\n      border-radius: 20px;\n      top: 22px;\n      z-index: -1;\n    }\n    .main-card {\n      position: relative;\n      z-index: 1;\n      width: 320px;\n      background: #fff;\n      border-radius: 20px;\n      overflow: hidden;\n      border: 1.5px solid #d1d1d6;\n    }\n  </style>\n</head>\n<body class=\"flex items-center justify-center min-h-screen\">\n\n<div class=\"phone-shell flex flex-col\">\n\n  <!-- Status Bar -->\n  <div class=\"flex items-center justify-between px-5 pt-3 pb-1 bg-gray-50 shrink-0\">\n    <span class=\"text-xs font-semibold text-gray-800\">9:41</span>\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-signal text-gray-800 text-xs\"></i>\n      <i class=\"fa fa-wifi text-gray-800 text-xs\"></i>\n      <i class=\"fa fa-battery-three-quarters text-gray-800 text-xs\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"flex items-center justify-between px-5 py-3 bg-gray-50 border-b border-gray-200 shrink-0\">\n    <div>\n      <p class=\"text-xs text-gray-400 font-medium tracking-wide uppercase\">Today's Pick</p>\n      <h1 class=\"text-lg font-extrabold text-gray-900 leading-tight\">Discover</h1>\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <button class=\"w-8 h-8 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n        <i class=\"fa fa-sliders text-gray-600 text-sm\"></i>\n      </button>\n      <button class=\"w-8 h-8 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n        <i class=\"fa fa-bell text-gray-600 text-sm\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Swipe Hint -->\n  <div class=\"flex items-center justify-between px-5 py-2 shrink-0\">\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-arrow-left text-gray-400 text-xs\"></i>\n      <span class=\"text-xs text-gray-400 font-medium\">Skip</span>\n    </div>\n    <div class=\"flex items-center gap-1.5\">\n      <div class=\"w-2 h-2 rounded-full bg-gray-800\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full bg-gray-300\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full bg-gray-300\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full bg-gray-300\"></div>\n    </div>\n    <div class=\"flex items-center gap-1.5\">\n      <span class=\"text-xs text-gray-400 font-medium\">Save</span>\n      <i class=\"fa fa-arrow-right text-gray-400 text-xs\"></i>\n    </div>\n  </div>\n\n  <!-- Card Stack Area -->\n  <div class=\"flex-1 flex flex-col items-center px-4 pt-1 pb-2 overflow-y-auto hide-scrollbar\">\n\n    <div class=\"card-stack mb-4\" style=\"height:538px; width:100%;\">\n      <!-- Behind cards -->\n      <div class=\"card-behind-2\"></div>\n      <div class=\"card-behind\"></div>\n\n      <!-- Main Card -->\n      <div class=\"main-card\">\n\n        <!-- Food Images Row -->\n        <div class=\"flex gap-0 w-full\" style=\"height:170px;\">\n          <!-- Primary food image -->\n          <div class=\"w-2/3 bg-gray-200 relative flex items-center justify-center border-r border-gray-100\" style=\"height:170px;\">\n            <div class=\"absolute inset-0 flex flex-col items-center justify-center gap-1\">\n              <i class=\"fa fa-utensils text-gray-400 text-3xl\"></i>\n              <span class=\"text-gray-400 text-xs font-medium\">Signature Dish</span>\n            </div>\n            <!-- Tag badge -->\n            <div class=\"absolute top-2 left-2 bg-gray-800 text-white text-xs font-semibold px-2 py-0.5 rounded-full\">\n              Italian\n            </div>\n          </div>\n          <!-- Secondary food image -->\n          <div class=\"w-1/3 flex flex-col\" style=\"height:170px;\">\n            <div class=\"flex-1 bg-gray-150 flex flex-col items-center justify-center border-b border-gray-100 gap-1\">\n              <i class=\"fa fa-wine-glass text-gray-400 text-xl\"></i>\n              <span class=\"text-gray-400 text-xs\">Drinks</span>\n            </div>\n            <div class=\"flex-1 bg-gray-200 flex flex-col items-center justify-center gap-1\">\n              <i class=\"fa fa-ice-cream text-gray-400 text-xl\"></i>\n              <span class=\"text-gray-400 text-xs\">Dessert</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Restaurant Info -->\n        <div class=\"px-4 pt-3 pb-2\">\n\n          <!-- Name + Favorite -->\n          <div class=\"flex items-start justify-between mb-1\">\n            <div>\n              <h2 class=\"text-base font-bold text-gray-900 leading-tight\">Bella Napoli Trattoria</h2>\n              <p class=\"text-xs text-gray-500 mt-0.5\">Italian · Pasta · Wood-fired Pizza</p>\n            </div>\n            <button class=\"w-8 h-8 rounded-full border border-gray-200 bg-gray-50 flex items-center justify-center shrink-0 ml-2\">\n              <i class=\"fa-regular fa-heart text-gray-400 text-sm\"></i>\n            </button>\n          </div>\n\n          <!-- Rating + Distance Row -->\n          <div class=\"flex items-center gap-3 mt-2 flex-wrap\">\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star-half-stroke text-gray-400 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.5</span>\n              <span class=\"text-xs text-gray-400\">(312 reviews)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-500 text-xs\"></i>\n              <span class=\"text-xs text-gray-600 font-medium\">1.2 mi away</span>\n            </div>\n          </div>\n\n          <!-- Price Range + Open Status -->\n          <div class=\"flex items-center gap-3 mt-1.5 flex-wrap\">\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-dollar-sign text-gray-500 text-xs\"></i>\n              <span class=\"text-xs text-gray-600 font-medium\">$$  ·  $14–$32</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <div class=\"w-1.5 h-1.5 rounded-full bg-gray-700\"></div>\n              <span class=\"text-xs text-gray-700 font-semibold\">Open Now</span>\n              <span class=\"text-xs text-gray-400\">· Closes 10 PM</span>\n            </div>\n          </div>\n\n          <!-- Divider -->\n          <div class=\"border-t border-gray-100 mt-3 mb-3\"></div>\n\n          <!-- CTA Buttons -->\n          <div class=\"flex gap-2 mb-3\">\n            <button class=\"flex-1 flex items-center justify-center gap-1.5 bg-gray-900 text-white text-xs font-semibold py-2.5 rounded-xl\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n            <button class=\"flex-1 flex items-center justify-center gap-1.5 bg-gray-100 border border-gray-200 text-gray-800 text-xs font-semibold py-2.5 rounded-xl\">\n              <i class=\"fa fa-clock text-xs\"></i>\n              Hours\n            </button>\n          </div>\n\n          <!-- Hours Dropdown (collapsed preview) -->\n          <div class=\"bg-gray-50 border border-gray-200 rounded-xl px-3 py-2 mb-2\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-1.5\">\n                <i class=\"fa fa-clock text-gray-400 text-xs\"></i>\n                <span class=\"text-xs font-semibold text-gray-700\">Hours of Operation</span>\n              </div>\n              <i class=\"fa fa-chevron-down text-gray-400 text-xs\"></i>\n            </div>\n            <div class=\"mt-1.5 flex flex-col gap-0.5\">\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs text-gray-500\">Mon – Thu</span>\n                <span class=\"text-xs font-medium text-gray-700\">11:00 AM – 10:00 PM</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs text-gray-500\">Fri – Sat</span>\n                <span class=\"text-xs font-medium text-gray-700\">11:00 AM – 11:30 PM</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs text-gray-500\">Sunday</span>\n                <span class=\"text-xs font-medium text-gray-700\">12:00 PM – 9:00 PM</span>\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n\n\n\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"shrink-0 bg-gray-50 border-t border-gray-200 flex items-center justify-around px-2 pt-2 pb-4\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-shuffle text-gray-900 text-base\"></i>\n      <span class=\"text-xs text-gray-900 font-semibold\">Discover</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-gray-400 text-base\"></i>\n      <span class=\"text-xs text-gray-400\">Saved</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-map-location-dot text-gray-400 text-base\"></i>\n      <span class=\"text-xs text-gray-400\">Nearby</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-circle-user text-gray-400 text-base\"></i>\n      <span class=\"text-xs text-gray-400\">Profile</span>\n    </button>\n  </div>\n\n</div>\n\n</body>\n</html>",
            "timestamp": "2026-05-29T15:39:50.243Z"
          },
          {
            "id": "ebce6ccf-dfc4-423f-b0dc-b1e5b723bd74",
            "prompt": "Go ahead and update the footer menu so that it's only just three options:\n1. The first icon to the very left should say \"Preferences\".\n2. The middle icon should say \"Recommendations\".\n3. The icon to the very right should say \"Favorite\". Go ahead and also apply appropriate icons as well.",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Recommendations</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            gray: {\n              50:  '#fafafa',\n              100: '#f4f4f5',\n              150: '#eeeeef',\n              200: '#e4e4e7',\n              300: '#d1d1d6',\n              400: '#a1a1aa',\n              500: '#71717a',\n              600: '#52525b',\n              700: '#3f3f46',\n              800: '#27272a',\n              900: '#18181b',\n            }\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; }\n    body { margin: 0; background: #e4e4e7; font-family: 'Inter', sans-serif; }\n    .phone-shell {\n      width: 375px;\n      height: 840px;\n      overflow: hidden;\n      position: relative;\n      background: #f4f4f5;\n    }\n    .hide-scrollbar::-webkit-scrollbar { display: none; }\n    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n    .card-stack {\n      position: relative;\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    /* Subtle card-behind effect */\n    .card-behind {\n      position: absolute;\n      width: 308px;\n      height: 510px;\n      background: #e4e4e7;\n      border-radius: 20px;\n      top: 12px;\n      z-index: 0;\n    }\n    .card-behind-2 {\n      position: absolute;\n      width: 296px;\n      height: 510px;\n      background: #d1d1d6;\n      border-radius: 20px;\n      top: 22px;\n      z-index: -1;\n    }\n    .main-card {\n      position: relative;\n      z-index: 1;\n      width: 320px;\n      background: #fff;\n      border-radius: 20px;\n      overflow: hidden;\n      border: 1.5px solid #d1d1d6;\n    }\n  </style>\n</head>\n<body class=\"flex items-center justify-center min-h-screen\">\n\n<div class=\"phone-shell flex flex-col\">\n\n  <!-- Status Bar -->\n  <div class=\"flex items-center justify-between px-5 pt-3 pb-1 bg-gray-50 shrink-0\">\n    <span class=\"text-xs font-semibold text-gray-800\">9:41</span>\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-signal text-gray-800 text-xs\"></i>\n      <i class=\"fa fa-wifi text-gray-800 text-xs\"></i>\n      <i class=\"fa fa-battery-three-quarters text-gray-800 text-xs\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"flex items-center justify-between px-5 py-3 bg-gray-50 border-b border-gray-200 shrink-0\">\n    <div>\n      <p class=\"text-xs text-gray-400 font-medium tracking-wide uppercase\">Today's Pick</p>\n      <h1 class=\"text-lg font-extrabold text-gray-900 leading-tight\">Discover</h1>\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <button class=\"w-8 h-8 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n        <i class=\"fa fa-sliders text-gray-600 text-sm\"></i>\n      </button>\n      <button class=\"w-8 h-8 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n        <i class=\"fa fa-bell text-gray-600 text-sm\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Swipe Hint -->\n  <div class=\"flex items-center justify-between px-5 py-2 shrink-0\">\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-arrow-left text-gray-400 text-xs\"></i>\n      <span class=\"text-xs text-gray-400 font-medium\">Skip</span>\n    </div>\n    <div class=\"flex items-center gap-1.5\">\n      <div class=\"w-2 h-2 rounded-full bg-gray-800\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full bg-gray-300\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full bg-gray-300\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full bg-gray-300\"></div>\n    </div>\n    <div class=\"flex items-center gap-1.5\">\n      <span class=\"text-xs text-gray-400 font-medium\">Save</span>\n      <i class=\"fa fa-arrow-right text-gray-400 text-xs\"></i>\n    </div>\n  </div>\n\n  <!-- Card Stack Area -->\n  <div class=\"flex-1 flex flex-col items-center px-4 pt-1 pb-2 overflow-y-auto hide-scrollbar\">\n\n    <div class=\"card-stack mb-4\" style=\"height:538px; width:100%;\">\n      <!-- Behind cards -->\n      <div class=\"card-behind-2\"></div>\n      <div class=\"card-behind\"></div>\n\n      <!-- Main Card -->\n      <div class=\"main-card\">\n\n        <!-- Food Images Row -->\n        <div class=\"flex gap-0 w-full\" style=\"height:170px;\">\n          <!-- Primary food image -->\n          <div class=\"w-2/3 bg-gray-200 relative flex items-center justify-center border-r border-gray-100\" style=\"height:170px;\">\n            <div class=\"absolute inset-0 flex flex-col items-center justify-center gap-1\">\n              <i class=\"fa fa-utensils text-gray-400 text-3xl\"></i>\n              <span class=\"text-gray-400 text-xs font-medium\">Signature Dish</span>\n            </div>\n            <!-- Tag badge -->\n            <div class=\"absolute top-2 left-2 bg-gray-800 text-white text-xs font-semibold px-2 py-0.5 rounded-full\">\n              Italian\n            </div>\n          </div>\n          <!-- Secondary food image -->\n          <div class=\"w-1/3 flex flex-col\" style=\"height:170px;\">\n            <div class=\"flex-1 bg-gray-150 flex flex-col items-center justify-center border-b border-gray-100 gap-1\">\n              <i class=\"fa fa-wine-glass text-gray-400 text-xl\"></i>\n              <span class=\"text-gray-400 text-xs\">Drinks</span>\n            </div>\n            <div class=\"flex-1 bg-gray-200 flex flex-col items-center justify-center gap-1\">\n              <i class=\"fa fa-ice-cream text-gray-400 text-xl\"></i>\n              <span class=\"text-gray-400 text-xs\">Dessert</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Restaurant Info -->\n        <div class=\"px-4 pt-3 pb-2\">\n\n          <!-- Name + Favorite -->\n          <div class=\"flex items-start justify-between mb-1\">\n            <div>\n              <h2 class=\"text-base font-bold text-gray-900 leading-tight\">Bella Napoli Trattoria</h2>\n              <p class=\"text-xs text-gray-500 mt-0.5\">Italian · Pasta · Wood-fired Pizza</p>\n            </div>\n            <button class=\"w-8 h-8 rounded-full border border-gray-200 bg-gray-50 flex items-center justify-center shrink-0 ml-2\">\n              <i class=\"fa-regular fa-heart text-gray-400 text-sm\"></i>\n            </button>\n          </div>\n\n          <!-- Rating + Distance Row -->\n          <div class=\"flex items-center gap-3 mt-2 flex-wrap\">\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <i class=\"fa fa-star-half-stroke text-gray-400 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.5</span>\n              <span class=\"text-xs text-gray-400\">(312 reviews)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-500 text-xs\"></i>\n              <span class=\"text-xs text-gray-600 font-medium\">1.2 mi away</span>\n            </div>\n          </div>\n\n          <!-- Price Range + Open Status -->\n          <div class=\"flex items-center gap-3 mt-1.5 flex-wrap\">\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-dollar-sign text-gray-500 text-xs\"></i>\n              <span class=\"text-xs text-gray-600 font-medium\">$$  ·  $14–$32</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <div class=\"w-1.5 h-1.5 rounded-full bg-gray-700\"></div>\n              <span class=\"text-xs text-gray-700 font-semibold\">Open Now</span>\n              <span class=\"text-xs text-gray-400\">· Closes 10 PM</span>\n            </div>\n          </div>\n\n          <!-- Divider -->\n          <div class=\"border-t border-gray-100 mt-3 mb-3\"></div>\n\n          <!-- CTA Buttons -->\n          <div class=\"flex gap-2 mb-3\">\n            <button class=\"flex-1 flex items-center justify-center gap-1.5 bg-gray-900 text-white text-xs font-semibold py-2.5 rounded-xl\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n            <button class=\"flex-1 flex items-center justify-center gap-1.5 bg-gray-100 border border-gray-200 text-gray-800 text-xs font-semibold py-2.5 rounded-xl\">\n              <i class=\"fa fa-clock text-xs\"></i>\n              Hours\n            </button>\n          </div>\n\n          <!-- Hours Dropdown (collapsed preview) -->\n          <div class=\"bg-gray-50 border border-gray-200 rounded-xl px-3 py-2 mb-2\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-1.5\">\n                <i class=\"fa fa-clock text-gray-400 text-xs\"></i>\n                <span class=\"text-xs font-semibold text-gray-700\">Hours of Operation</span>\n              </div>\n              <i class=\"fa fa-chevron-down text-gray-400 text-xs\"></i>\n            </div>\n            <div class=\"mt-1.5 flex flex-col gap-0.5\">\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs text-gray-500\">Mon – Thu</span>\n                <span class=\"text-xs font-medium text-gray-700\">11:00 AM – 10:00 PM</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs text-gray-500\">Fri – Sat</span>\n                <span class=\"text-xs font-medium text-gray-700\">11:00 AM – 11:30 PM</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs text-gray-500\">Sunday</span>\n                <span class=\"text-xs font-medium text-gray-700\">12:00 PM – 9:00 PM</span>\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n\n\n\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"shrink-0 bg-gray-50 border-t border-gray-200 flex items-center justify-around px-2 pt-2 pb-4\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-gray-400 text-base\"></i>\n      <span class=\"text-xs text-gray-400\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-gray-900 text-base\"></i>\n      <span class=\"text-xs text-gray-900 font-semibold\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-gray-400 text-base\"></i>\n      <span class=\"text-xs text-gray-400\">Favorite</span>\n    </button>\n  </div>\n\n</div>\n\n</body>\n</html>",
            "timestamp": "2026-05-29T15:41:02.146Z"
          },
          {
            "id": "51ea0e42-6bcb-448f-87e0-085ac03cbdb6",
            "prompt": "--background-color: #1A1A2E;\n--surface-color: #25253A;\n--primary-color: #FF6B35;\n--secondary-color: #2E2E4A;\n--accent-color: #FFD166;\n--text-color: #F5F5F5;\n--subtext-color: #9494B2;\n--success-color: #4CAF82;\nPlease apply this color palette.",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Recommendations</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            bg:        '#1A1A2E',\n            surface:   '#25253A',\n            primary:   '#FF6B35',\n            secondary: '#2E2E4A',\n            accent:    '#FFD166',\n            text:      '#F5F5F5',\n            subtext:   '#9494B2',\n            success:   '#4CAF82',\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; }\n    body { margin: 0; background: #0f0f1f; font-family: 'Inter', sans-serif; }\n    .phone-shell {\n      width: 375px;\n      height: 840px;\n      overflow: hidden;\n      position: relative;\n      background: #1A1A2E;\n    }\n    .hide-scrollbar::-webkit-scrollbar { display: none; }\n    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n    .card-stack {\n      position: relative;\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .card-behind {\n      position: absolute;\n      width: 308px;\n      height: 510px;\n      background: #2E2E4A;\n      border-radius: 20px;\n      top: 12px;\n      z-index: 0;\n    }\n    .card-behind-2 {\n      position: absolute;\n      width: 296px;\n      height: 510px;\n      background: #25253A;\n      border-radius: 20px;\n      top: 22px;\n      z-index: -1;\n    }\n    .main-card {\n      position: relative;\n      z-index: 1;\n      width: 320px;\n      background: #25253A;\n      border-radius: 20px;\n      overflow: hidden;\n      border: 1.5px solid #2E2E4A;\n    }\n  </style>\n</head>\n<body class=\"flex items-center justify-center min-h-screen\">\n\n<div class=\"phone-shell flex flex-col\">\n\n  <!-- Status Bar -->\n  <div class=\"flex items-center justify-between px-5 pt-3 pb-1 shrink-0\" style=\"background:#1A1A2E;\">\n    <span class=\"text-xs font-semibold\" style=\"color:#F5F5F5;\">9:41</span>\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-signal text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-wifi text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-battery-three-quarters text-xs\" style=\"color:#F5F5F5;\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"flex items-center justify-between px-5 py-3 shrink-0 border-b\" style=\"background:#1A1A2E; border-color:#2E2E4A;\">\n    <div>\n      <p class=\"text-xs font-medium tracking-wide uppercase\" style=\"color:#9494B2;\">Today's Pick</p>\n      <h1 class=\"text-lg font-extrabold leading-tight\" style=\"color:#F5F5F5;\">Discover</h1>\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <button class=\"w-8 h-8 rounded-full flex items-center justify-center border\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-sliders text-sm\" style=\"color:#9494B2;\"></i>\n      </button>\n      <button class=\"w-8 h-8 rounded-full flex items-center justify-center border\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-bell text-sm\" style=\"color:#9494B2;\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Swipe Hint -->\n  <div class=\"flex items-center justify-between px-5 py-2 shrink-0\" style=\"background:#1A1A2E;\">\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-arrow-left text-xs\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Skip</span>\n    </div>\n    <div class=\"flex items-center gap-1.5\">\n      <div class=\"w-2 h-2 rounded-full\" style=\"background:#FF6B35;\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#2E2E4A;\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#2E2E4A;\"></div>\n      <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#2E2E4A;\"></div>\n    </div>\n    <div class=\"flex items-center gap-1.5\">\n      <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Save</span>\n      <i class=\"fa fa-arrow-right text-xs\" style=\"color:#9494B2;\"></i>\n    </div>\n  </div>\n\n  <!-- Card Stack Area -->\n  <div class=\"flex-1 flex flex-col items-center px-4 pt-1 pb-2 overflow-y-auto hide-scrollbar\" style=\"background:#1A1A2E;\">\n\n    <div class=\"card-stack mb-4\" style=\"height:538px; width:100%;\">\n      <!-- Behind cards -->\n      <div class=\"card-behind-2\"></div>\n      <div class=\"card-behind\"></div>\n\n      <!-- Main Card -->\n      <div class=\"main-card\">\n\n        <!-- Food Images Row -->\n        <div class=\"flex gap-0 w-full\" style=\"height:170px;\">\n          <!-- Primary food image -->\n          <div class=\"w-2/3 relative flex items-center justify-center border-r\" style=\"height:170px; background:#2E2E4A; border-color:#3a3a58;\">\n            <div class=\"absolute inset-0 flex flex-col items-center justify-center gap-1\">\n              <i class=\"fa fa-utensils text-3xl\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Signature Dish</span>\n            </div>\n            <!-- Tag badge -->\n            <div class=\"absolute top-2 left-2 text-xs font-semibold px-2 py-0.5 rounded-full\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              Italian\n            </div>\n          </div>\n          <!-- Secondary food image -->\n          <div class=\"w-1/3 flex flex-col\" style=\"height:170px;\">\n            <div class=\"flex-1 flex flex-col items-center justify-center gap-1 border-b\" style=\"background:#25253A; border-color:#3a3a58;\">\n              <i class=\"fa fa-wine-glass text-xl\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs\" style=\"color:#9494B2;\">Drinks</span>\n            </div>\n            <div class=\"flex-1 flex flex-col items-center justify-center gap-1\" style=\"background:#2E2E4A;\">\n              <i class=\"fa fa-ice-cream text-xl\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs\" style=\"color:#9494B2;\">Dessert</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Restaurant Info -->\n        <div class=\"px-4 pt-3 pb-2\">\n\n          <!-- Name + Favorite -->\n          <div class=\"flex items-start justify-between mb-1\">\n            <div>\n              <h2 class=\"text-base font-bold leading-tight\" style=\"color:#F5F5F5;\">Bella Napoli Trattoria</h2>\n              <p class=\"text-xs mt-0.5\" style=\"color:#9494B2;\">Italian · Pasta · Wood-fired Pizza</p>\n            </div>\n            <button class=\"w-8 h-8 rounded-full flex items-center justify-center shrink-0 ml-2 border\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n              <i class=\"fa-regular fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n\n          <!-- Rating + Distance Row -->\n          <div class=\"flex items-center gap-3 mt-2 flex-wrap\">\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <i class=\"fa fa-star-half-stroke text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.5</span>\n              <span class=\"text-xs\" style=\"color:#9494B2;\">(312 reviews)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#FF6B35;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">1.2 mi away</span>\n            </div>\n          </div>\n\n          <!-- Price Range + Open Status -->\n          <div class=\"flex items-center gap-3 mt-1.5 flex-wrap\">\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-dollar-sign text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">$$  ·  $14–$32</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#4CAF82;\"></div>\n              <span class=\"text-xs font-semibold\" style=\"color:#4CAF82;\">Open Now</span>\n              <span class=\"text-xs\" style=\"color:#9494B2;\">· Closes 10 PM</span>\n            </div>\n          </div>\n\n          <!-- Divider -->\n          <div class=\"border-t mt-3 mb-3\" style=\"border-color:#2E2E4A;\"></div>\n\n          <!-- CTA Buttons -->\n          <div class=\"flex gap-2 mb-3\">\n            <button class=\"flex-1 flex items-center justify-center gap-1.5 text-xs font-semibold py-2.5 rounded-xl\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n            <button class=\"flex-1 flex items-center justify-center gap-1.5 text-xs font-semibold py-2.5 rounded-xl border\" style=\"background:#2E2E4A; border-color:#3a3a58; color:#F5F5F5;\">\n              <i class=\"fa fa-clock text-xs\"></i>\n              Hours\n            </button>\n          </div>\n\n          <!-- Hours Dropdown (collapsed preview) -->\n          <div class=\"rounded-xl px-3 py-2 mb-2 border\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-1.5\">\n                <i class=\"fa fa-clock text-xs\" style=\"color:#9494B2;\"></i>\n                <span class=\"text-xs font-semibold\" style=\"color:#F5F5F5;\">Hours of Operation</span>\n              </div>\n              <i class=\"fa fa-chevron-down text-xs\" style=\"color:#9494B2;\"></i>\n            </div>\n            <div class=\"mt-1.5 flex flex-col gap-0.5\">\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs\" style=\"color:#9494B2;\">Mon – Thu</span>\n                <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 10:00 PM</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs\" style=\"color:#9494B2;\">Fri – Sat</span>\n                <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 11:30 PM</span>\n              </div>\n              <div class=\"flex justify-between\">\n                <span class=\"text-xs\" style=\"color:#9494B2;\">Sunday</span>\n                <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">12:00 PM – 9:00 PM</span>\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"shrink-0 flex items-center justify-around px-2 pt-2 pb-4 border-t\" style=\"background:#1A1A2E; border-color:#2E2E4A;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-base\" style=\"color:#FF6B35;\"></i>\n      <span class=\"text-xs font-semibold\" style=\"color:#FF6B35;\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Favorite</span>\n    </button>\n  </div>\n\n</div>\n\n</body>\n</html>",
            "timestamp": "2026-05-29T15:50:01.594Z"
          }
        ]
      },
      {
        "id": "e75c73d5-98de-41a4-8ad1-c2e1380ea04f",
        "name": "Restaurant Roulette – Favorites (Dark Theme)",
        "hasCustomName": false,
        "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Favorites</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            background: '#1A1A2E',\n            surface: '#25253A',\n            primary: '#FF6B35',\n            secondary: '#2E2E4A',\n            accent: '#FFD166',\n            textColor: '#F5F5F5',\n            subtext: '#9494B2',\n            success: '#4CAF82',\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; }\n    body { margin: 0; background: #111122; font-family: 'Inter', sans-serif; }\n    .phone-shell {\n      width: 375px;\n      height: 840px;\n      overflow: hidden;\n      position: relative;\n      background: #1A1A2E;\n    }\n    .hide-scrollbar::-webkit-scrollbar { display: none; }\n    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n  </style>\n</head>\n<body class=\"flex items-center justify-center min-h-screen\">\n\n<div class=\"phone-shell flex flex-col\">\n\n  <!-- Status Bar -->\n  <div class=\"flex items-center justify-between px-5 pt-3 pb-1 shrink-0\" style=\"background:#1A1A2E;\">\n    <span class=\"text-xs font-semibold\" style=\"color:#F5F5F5;\">9:41</span>\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-signal text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-wifi text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-battery-three-quarters text-xs\" style=\"color:#F5F5F5;\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"flex items-center justify-between px-5 py-3 shrink-0\" style=\"background:#1A1A2E; border-bottom: 1px solid #2E2E4A;\">\n    <div>\n      <p class=\"text-xs font-medium tracking-wide uppercase\" style=\"color:#9494B2;\">Saved</p>\n      <h1 class=\"text-lg font-extrabold leading-tight\" style=\"color:#F5F5F5;\">My Favorites</h1>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <!-- Sort button -->\n      <button class=\"w-8 h-8 rounded-full flex items-center justify-center\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n        <i class=\"fa fa-arrow-up-wide-short text-sm\" style=\"color:#9494B2;\"></i>\n      </button>\n      <!-- Search button -->\n      <button class=\"w-8 h-8 rounded-full flex items-center justify-center\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n        <i class=\"fa fa-magnifying-glass text-sm\" style=\"color:#9494B2;\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Count pill -->\n  <div class=\"px-5 pt-3 pb-2 shrink-0 flex items-center gap-2\" style=\"background:#1A1A2E;\">\n    <div class=\"text-xs font-semibold px-2.5 py-1 rounded-full\" style=\"background:#FF6B35; color:#F5F5F5;\">8 saved</div>\n    <!-- Filter chips -->\n    <div class=\"flex gap-1.5 overflow-x-auto hide-scrollbar\">\n      <button class=\"shrink-0 text-xs font-medium px-3 py-1 rounded-full\" style=\"background:#FF6B35; color:#F5F5F5; border: 1px solid #FF6B35;\">All</button>\n      <button class=\"shrink-0 text-xs font-medium px-3 py-1 rounded-full\" style=\"background:#25253A; color:#9494B2; border: 1px solid #2E2E4A;\">Italian</button>\n      <button class=\"shrink-0 text-xs font-medium px-3 py-1 rounded-full\" style=\"background:#25253A; color:#9494B2; border: 1px solid #2E2E4A;\">Asian</button>\n      <button class=\"shrink-0 text-xs font-medium px-3 py-1 rounded-full\" style=\"background:#25253A; color:#9494B2; border: 1px solid #2E2E4A;\">American</button>\n    </div>\n  </div>\n\n  <!-- Favorites List -->\n  <div class=\"flex-1 overflow-y-auto hide-scrollbar px-4 pb-4 flex flex-col gap-3\" style=\"background:#1A1A2E;\">\n\n    <!-- Card 1 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-utensils text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Italian</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Bella Napoli Trattoria</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.5</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(312)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">1.2 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 2 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-bowl-rice text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Asian</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Tokyo Garden Ramen</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.8</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(540)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">0.7 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 3 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-burger text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">American</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">The Griddle House</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.3</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(198)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">2.1 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 4 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-pepper-hot text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Mexican</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Casa Fuego Cantina</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.6</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(421)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">1.8 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 5 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-fish text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Seafood</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">The Harbor Catch</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.7</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(289)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">3.4 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 6 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-leaf text-xl\" style=\"color:#4CAF82;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Vegan</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Green Roots Kitchen</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.4</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(156)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">0.9 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 7 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-drumstick-bite text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">BBQ</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Smoke &amp; Ember BBQ</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.9</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(617)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">4.0 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 8 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-cheese text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">French</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Maison Brasserie</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.6</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(374)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">2.6 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"shrink-0 flex items-center justify-around px-2 pt-2 pb-4\" style=\"background:#25253A; border-top: 1px solid #2E2E4A;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-base\" style=\"color:#FF6B35;\"></i>\n      <span class=\"text-xs font-semibold\" style=\"color:#FF6B35;\">Favorites</span>\n    </button>\n  </div>\n\n</div>\n\n</body>\n</html>",
        "deviceTarget": "mobile",
        "isPalette": false,
        "status": "ready",
        "isEditing": false,
        "x": 1595.1304081525325,
        "y": -9.564168258864242,
        "isSelected": false,
        "version": 2,
        "activeRevisionIndex": 1,
        "history": [
          {
            "id": "93fb4122-2ac1-4211-b58c-61e5a68737c1",
            "prompt": "Go ahead and generate me a screen where users can see in a more kind of collapsed and compressed way all of their favorite restaurants that they have saved. The design that is referenced is the screen that they're coming from. We don't need to show all of that information right there, right away but we definitely do want to show:\n- the name of the restaurant\n- the rating\n- how far it is\n- a quick CTA for viewing the menu",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Favorites</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            gray: {\n              50:  '#fafafa',\n              100: '#f4f4f5',\n              150: '#eeeeef',\n              200: '#e4e4e7',\n              300: '#d1d1d6',\n              400: '#a1a1aa',\n              500: '#71717a',\n              600: '#52525b',\n              700: '#3f3f46',\n              800: '#27272a',\n              900: '#18181b',\n            }\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; }\n    body { margin: 0; background: #e4e4e7; font-family: 'Inter', sans-serif; }\n    .phone-shell {\n      width: 375px;\n      height: 840px;\n      overflow: hidden;\n      position: relative;\n      background: #f4f4f5;\n    }\n    .hide-scrollbar::-webkit-scrollbar { display: none; }\n    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n  </style>\n</head>\n<body class=\"flex items-center justify-center min-h-screen\">\n\n<div class=\"phone-shell flex flex-col\">\n\n  <!-- Status Bar -->\n  <div class=\"flex items-center justify-between px-5 pt-3 pb-1 bg-gray-50 shrink-0\">\n    <span class=\"text-xs font-semibold text-gray-800\">9:41</span>\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-signal text-gray-800 text-xs\"></i>\n      <i class=\"fa fa-wifi text-gray-800 text-xs\"></i>\n      <i class=\"fa fa-battery-three-quarters text-gray-800 text-xs\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"flex items-center justify-between px-5 py-3 bg-gray-50 border-b border-gray-200 shrink-0\">\n    <div>\n      <p class=\"text-xs text-gray-400 font-medium tracking-wide uppercase\">Saved</p>\n      <h1 class=\"text-lg font-extrabold text-gray-900 leading-tight\">My Favorites</h1>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <!-- Sort button -->\n      <button class=\"w-8 h-8 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n        <i class=\"fa fa-arrow-up-wide-short text-gray-600 text-sm\"></i>\n      </button>\n      <!-- Search button -->\n      <button class=\"w-8 h-8 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n        <i class=\"fa fa-magnifying-glass text-gray-600 text-sm\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Count pill -->\n  <div class=\"px-5 pt-3 pb-2 shrink-0 flex items-center gap-2\">\n    <div class=\"bg-gray-800 text-white text-xs font-semibold px-2.5 py-1 rounded-full\">8 saved</div>\n    <!-- Filter chips -->\n    <div class=\"flex gap-1.5 overflow-x-auto hide-scrollbar\">\n      <button class=\"shrink-0 border border-gray-800 bg-gray-800 text-white text-xs font-medium px-3 py-1 rounded-full\">All</button>\n      <button class=\"shrink-0 border border-gray-200 bg-gray-100 text-gray-600 text-xs font-medium px-3 py-1 rounded-full\">Italian</button>\n      <button class=\"shrink-0 border border-gray-200 bg-gray-100 text-gray-600 text-xs font-medium px-3 py-1 rounded-full\">Asian</button>\n      <button class=\"shrink-0 border border-gray-200 bg-gray-100 text-gray-600 text-xs font-medium px-3 py-1 rounded-full\">American</button>\n    </div>\n  </div>\n\n  <!-- Favorites List -->\n  <div class=\"flex-1 overflow-y-auto hide-scrollbar px-4 pb-4 flex flex-col gap-3\">\n\n    <!-- Card 1 -->\n    <div class=\"bg-white border border-gray-200 rounded-2xl overflow-hidden\">\n      <div class=\"flex items-stretch\">\n        <!-- Thumbnail -->\n        <div class=\"w-20 shrink-0 bg-gray-200 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px;\">\n          <i class=\"fa fa-utensils text-gray-400 text-xl\"></i>\n          <span class=\"text-gray-400 text-xs\">Italian</span>\n        </div>\n        <!-- Info -->\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold text-gray-900 leading-tight\">Bella Napoli Trattoria</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-gray-700 text-sm\"></i>\n            </button>\n          </div>\n          <!-- Rating + Distance -->\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.5</span>\n              <span class=\"text-xs text-gray-400 ml-0.5\">(312)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-400 text-xs\"></i>\n              <span class=\"text-xs text-gray-500 font-medium\">1.2 mi</span>\n            </div>\n          </div>\n          <!-- CTA -->\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 bg-gray-900 text-white text-xs font-semibold px-3 py-1.5 rounded-lg\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 2 -->\n    <div class=\"bg-white border border-gray-200 rounded-2xl overflow-hidden\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 bg-gray-150 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px;\">\n          <i class=\"fa fa-bowl-rice text-gray-400 text-xl\"></i>\n          <span class=\"text-gray-400 text-xs\">Asian</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold text-gray-900 leading-tight\">Tokyo Garden Ramen</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-gray-700 text-sm\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.8</span>\n              <span class=\"text-xs text-gray-400 ml-0.5\">(540)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-400 text-xs\"></i>\n              <span class=\"text-xs text-gray-500 font-medium\">0.7 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 bg-gray-900 text-white text-xs font-semibold px-3 py-1.5 rounded-lg\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 3 -->\n    <div class=\"bg-white border border-gray-200 rounded-2xl overflow-hidden\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 bg-gray-200 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px;\">\n          <i class=\"fa fa-burger text-gray-400 text-xl\"></i>\n          <span class=\"text-gray-400 text-xs\">American</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold text-gray-900 leading-tight\">The Griddle House</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-gray-700 text-sm\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.3</span>\n              <span class=\"text-xs text-gray-400 ml-0.5\">(198)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-400 text-xs\"></i>\n              <span class=\"text-xs text-gray-500 font-medium\">2.1 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 bg-gray-900 text-white text-xs font-semibold px-3 py-1.5 rounded-lg\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 4 -->\n    <div class=\"bg-white border border-gray-200 rounded-2xl overflow-hidden\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 bg-gray-150 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px;\">\n          <i class=\"fa fa-pepper-hot text-gray-400 text-xl\"></i>\n          <span class=\"text-gray-400 text-xs\">Mexican</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold text-gray-900 leading-tight\">Casa Fuego Cantina</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-gray-700 text-sm\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.6</span>\n              <span class=\"text-xs text-gray-400 ml-0.5\">(421)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-400 text-xs\"></i>\n              <span class=\"text-xs text-gray-500 font-medium\">1.8 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 bg-gray-900 text-white text-xs font-semibold px-3 py-1.5 rounded-lg\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 5 -->\n    <div class=\"bg-white border border-gray-200 rounded-2xl overflow-hidden\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 bg-gray-200 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px;\">\n          <i class=\"fa fa-fish text-gray-400 text-xl\"></i>\n          <span class=\"text-gray-400 text-xs\">Seafood</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold text-gray-900 leading-tight\">The Harbor Catch</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-gray-700 text-sm\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.7</span>\n              <span class=\"text-xs text-gray-400 ml-0.5\">(289)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-400 text-xs\"></i>\n              <span class=\"text-xs text-gray-500 font-medium\">3.4 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 bg-gray-900 text-white text-xs font-semibold px-3 py-1.5 rounded-lg\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 6 -->\n    <div class=\"bg-white border border-gray-200 rounded-2xl overflow-hidden\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 bg-gray-150 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px;\">\n          <i class=\"fa fa-leaf text-gray-400 text-xl\"></i>\n          <span class=\"text-gray-400 text-xs\">Vegan</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold text-gray-900 leading-tight\">Green Roots Kitchen</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-gray-700 text-sm\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.4</span>\n              <span class=\"text-xs text-gray-400 ml-0.5\">(156)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-400 text-xs\"></i>\n              <span class=\"text-xs text-gray-500 font-medium\">0.9 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 bg-gray-900 text-white text-xs font-semibold px-3 py-1.5 rounded-lg\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 7 -->\n    <div class=\"bg-white border border-gray-200 rounded-2xl overflow-hidden\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 bg-gray-200 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px;\">\n          <i class=\"fa fa-drumstick-bite text-gray-400 text-xl\"></i>\n          <span class=\"text-gray-400 text-xs\">BBQ</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold text-gray-900 leading-tight\">Smoke & Ember BBQ</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-gray-700 text-sm\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.9</span>\n              <span class=\"text-xs text-gray-400 ml-0.5\">(617)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-400 text-xs\"></i>\n              <span class=\"text-xs text-gray-500 font-medium\">4.0 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 bg-gray-900 text-white text-xs font-semibold px-3 py-1.5 rounded-lg\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 8 -->\n    <div class=\"bg-white border border-gray-200 rounded-2xl overflow-hidden\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 bg-gray-150 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px;\">\n          <i class=\"fa fa-cheese text-gray-400 text-xl\"></i>\n          <span class=\"text-gray-400 text-xs\">French</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold text-gray-900 leading-tight\">Maison Brasserie</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-gray-700 text-sm\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-gray-700 text-xs\"></i>\n              <span class=\"text-xs font-semibold text-gray-800 ml-0.5\">4.6</span>\n              <span class=\"text-xs text-gray-400 ml-0.5\">(374)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-gray-400 text-xs\"></i>\n              <span class=\"text-xs text-gray-500 font-medium\">2.6 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 bg-gray-900 text-white text-xs font-semibold px-3 py-1.5 rounded-lg\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"shrink-0 bg-gray-50 border-t border-gray-200 flex items-center justify-around px-2 pt-2 pb-4\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-gray-400 text-base\"></i>\n      <span class=\"text-xs text-gray-400\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-gray-400 text-base\"></i>\n      <span class=\"text-xs text-gray-400\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-gray-900 text-base\"></i>\n      <span class=\"text-xs text-gray-900 font-semibold\">Favorites</span>\n    </button>\n  </div>\n\n</div>\n\n</body>\n</html>",
            "timestamp": "2026-05-29T15:42:52.994Z"
          },
          {
            "id": "4e9f9a7c-7527-4069-a905-a7ca5fd5e375",
            "prompt": "--background-color: #1A1A2E;\n--surface-color: #25253A;\n--primary-color: #FF6B35;\n--secondary-color: #2E2E4A;\n--accent-color: #FFD166;\n--text-color: #F5F5F5;\n--subtext-color: #9494B2;\n--success-color: #4CAF82;\nGo ahead and apply this color palette to the screen.",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Favorites</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            background: '#1A1A2E',\n            surface: '#25253A',\n            primary: '#FF6B35',\n            secondary: '#2E2E4A',\n            accent: '#FFD166',\n            textColor: '#F5F5F5',\n            subtext: '#9494B2',\n            success: '#4CAF82',\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; }\n    body { margin: 0; background: #111122; font-family: 'Inter', sans-serif; }\n    .phone-shell {\n      width: 375px;\n      height: 840px;\n      overflow: hidden;\n      position: relative;\n      background: #1A1A2E;\n    }\n    .hide-scrollbar::-webkit-scrollbar { display: none; }\n    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n  </style>\n</head>\n<body class=\"flex items-center justify-center min-h-screen\">\n\n<div class=\"phone-shell flex flex-col\">\n\n  <!-- Status Bar -->\n  <div class=\"flex items-center justify-between px-5 pt-3 pb-1 shrink-0\" style=\"background:#1A1A2E;\">\n    <span class=\"text-xs font-semibold\" style=\"color:#F5F5F5;\">9:41</span>\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-signal text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-wifi text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-battery-three-quarters text-xs\" style=\"color:#F5F5F5;\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"flex items-center justify-between px-5 py-3 shrink-0\" style=\"background:#1A1A2E; border-bottom: 1px solid #2E2E4A;\">\n    <div>\n      <p class=\"text-xs font-medium tracking-wide uppercase\" style=\"color:#9494B2;\">Saved</p>\n      <h1 class=\"text-lg font-extrabold leading-tight\" style=\"color:#F5F5F5;\">My Favorites</h1>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <!-- Sort button -->\n      <button class=\"w-8 h-8 rounded-full flex items-center justify-center\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n        <i class=\"fa fa-arrow-up-wide-short text-sm\" style=\"color:#9494B2;\"></i>\n      </button>\n      <!-- Search button -->\n      <button class=\"w-8 h-8 rounded-full flex items-center justify-center\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n        <i class=\"fa fa-magnifying-glass text-sm\" style=\"color:#9494B2;\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- Count pill -->\n  <div class=\"px-5 pt-3 pb-2 shrink-0 flex items-center gap-2\" style=\"background:#1A1A2E;\">\n    <div class=\"text-xs font-semibold px-2.5 py-1 rounded-full\" style=\"background:#FF6B35; color:#F5F5F5;\">8 saved</div>\n    <!-- Filter chips -->\n    <div class=\"flex gap-1.5 overflow-x-auto hide-scrollbar\">\n      <button class=\"shrink-0 text-xs font-medium px-3 py-1 rounded-full\" style=\"background:#FF6B35; color:#F5F5F5; border: 1px solid #FF6B35;\">All</button>\n      <button class=\"shrink-0 text-xs font-medium px-3 py-1 rounded-full\" style=\"background:#25253A; color:#9494B2; border: 1px solid #2E2E4A;\">Italian</button>\n      <button class=\"shrink-0 text-xs font-medium px-3 py-1 rounded-full\" style=\"background:#25253A; color:#9494B2; border: 1px solid #2E2E4A;\">Asian</button>\n      <button class=\"shrink-0 text-xs font-medium px-3 py-1 rounded-full\" style=\"background:#25253A; color:#9494B2; border: 1px solid #2E2E4A;\">American</button>\n    </div>\n  </div>\n\n  <!-- Favorites List -->\n  <div class=\"flex-1 overflow-y-auto hide-scrollbar px-4 pb-4 flex flex-col gap-3\" style=\"background:#1A1A2E;\">\n\n    <!-- Card 1 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-utensils text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Italian</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Bella Napoli Trattoria</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.5</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(312)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">1.2 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 2 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-bowl-rice text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Asian</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Tokyo Garden Ramen</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.8</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(540)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">0.7 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 3 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-burger text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">American</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">The Griddle House</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.3</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(198)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">2.1 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 4 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-pepper-hot text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Mexican</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Casa Fuego Cantina</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.6</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(421)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">1.8 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 5 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-fish text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Seafood</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">The Harbor Catch</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.7</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(289)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">3.4 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 6 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-leaf text-xl\" style=\"color:#4CAF82;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Vegan</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Green Roots Kitchen</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.4</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(156)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">0.9 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 7 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-drumstick-bite text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">BBQ</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Smoke &amp; Ember BBQ</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.9</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(617)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">4.0 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Card 8 -->\n    <div class=\"rounded-2xl overflow-hidden\" style=\"background:#25253A; border: 1px solid #2E2E4A;\">\n      <div class=\"flex items-stretch\">\n        <div class=\"w-20 shrink-0 flex flex-col items-center justify-center gap-1\" style=\"min-height: 88px; background:#2E2E4A;\">\n          <i class=\"fa fa-cheese text-xl\" style=\"color:#9494B2;\"></i>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">French</span>\n        </div>\n        <div class=\"flex-1 px-3 py-2.5 flex flex-col justify-between\">\n          <div class=\"flex items-start justify-between gap-1\">\n            <h3 class=\"text-sm font-bold leading-tight\" style=\"color:#F5F5F5;\">Maison Brasserie</h3>\n            <button class=\"shrink-0 mt-0.5\">\n              <i class=\"fa-solid fa-heart text-sm\" style=\"color:#FF6B35;\"></i>\n            </button>\n          </div>\n          <div class=\"flex items-center gap-2 mt-1 flex-wrap\">\n            <div class=\"flex items-center gap-0.5\">\n              <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n              <span class=\"text-xs font-semibold ml-0.5\" style=\"color:#F5F5F5;\">4.6</span>\n              <span class=\"text-xs ml-0.5\" style=\"color:#9494B2;\">(374)</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n              <i class=\"fa fa-location-dot text-xs\" style=\"color:#9494B2;\"></i>\n              <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">2.6 mi</span>\n            </div>\n          </div>\n          <div class=\"mt-2\">\n            <button class=\"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n              <i class=\"fa fa-book-open text-xs\"></i>\n              View Menu\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"shrink-0 flex items-center justify-around px-2 pt-2 pb-4\" style=\"background:#25253A; border-top: 1px solid #2E2E4A;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-base\" style=\"color:#FF6B35;\"></i>\n      <span class=\"text-xs font-semibold\" style=\"color:#FF6B35;\">Favorites</span>\n    </button>\n  </div>\n\n</div>\n\n</body>\n</html>",
            "timestamp": "2026-05-29T15:52:39.394Z"
          }
        ]
      },
      {
        "id": "cac75009-44e1-4e6a-b16d-e0570cd8c9af",
        "name": "Food Preferences – Restaurant Roulette (Refined) copy",
        "hasCustomName": true,
        "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Food Preferences – Restaurant Roulette</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            zinc: {\n              50:  '#fafafa',\n              100: '#f4f4f5',\n              200: '#e4e4e7',\n              300: '#d4d4d8',\n              400: '#a1a1aa',\n              500: '#71717a',\n              600: '#52525b',\n              700: '#3f3f46',\n              800: '#27272a',\n              900: '#18181b',\n            }\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    :root {\n      --background-color: #1A1A2E;\n      --surface-color: #25253A;\n      --primary-color: #FF6B35;\n      --secondary-color: #2E2E4A;\n      --accent-color: #FFD166;\n      --text-color: #F5F5F5;\n      --subtext-color: #9494B2;\n      --success-color: #4CAF82;\n    }\n    * { box-sizing: border-box; }\n    body { margin: 0; padding: 0; background: #0f0f1e; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }\n    .phone { width: 375px; min-height: 840px; background: var(--background-color); font-family: 'Inter', sans-serif; overflow-x: hidden; position: relative; }\n    .scroll-area { overflow-y: auto; overflow-x: hidden; }\n    .scroll-area::-webkit-scrollbar { display: none; }\n\n    .chip-selected {\n      background: var(--primary-color);\n      color: #ffffff;\n      border-color: var(--primary-color);\n    }\n    .chip-unselected {\n      background: var(--surface-color);\n      color: var(--text-color);\n      border-color: var(--secondary-color);\n    }\n  </style>\n</head>\n<body>\n<div class=\"phone\">\n\n  <!-- Status Bar -->\n  <div class=\"flex justify-between items-center px-5 pt-4 pb-1\">\n    <span class=\"text-xs font-semibold\" style=\"color: var(--subtext-color);\">9:41</span>\n    <div class=\"flex items-center gap-2\">\n      <i class=\"fa-solid fa-signal text-xs\" style=\"color: var(--subtext-color);\"></i>\n      <i class=\"fa-solid fa-wifi text-xs\" style=\"color: var(--subtext-color);\"></i>\n      <i class=\"fa-solid fa-battery-three-quarters text-xs\" style=\"color: var(--subtext-color);\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"px-5 pt-3 pb-2 flex items-center gap-3\">\n    <button class=\"w-8 h-8 flex items-center justify-center rounded-full border\" style=\"border-color: var(--secondary-color); background: var(--surface-color);\">\n      <i class=\"fa-solid fa-arrow-left text-sm\" style=\"color: var(--text-color);\"></i>\n    </button>\n    <span class=\"text-base font-semibold\" style=\"color: var(--text-color);\">My Food Preferences</span>\n  </div>\n\n  <!-- Subheader -->\n  <div class=\"px-5 pb-4\">\n    <p class=\"text-sm leading-snug\" style=\"color: var(--subtext-color);\">Select the cuisines and dining styles you love. We'll use these to serve up your perfect restaurant matches.</p>\n  </div>\n\n  <!-- Selected count bar -->\n  <div class=\"mx-5 mb-4 px-4 py-3 rounded-xl border flex items-center justify-between\" style=\"background: var(--surface-color); border-color: var(--secondary-color);\">\n    <div class=\"flex items-center gap-2\">\n      <i class=\"fa-solid fa-heart text-sm\" style=\"color: var(--primary-color);\"></i>\n      <span class=\"text-sm font-medium\" style=\"color: var(--text-color);\">5 preferences selected</span>\n    </div>\n    <button class=\"text-xs font-semibold underline\" style=\"color: var(--subtext-color);\">Clear all</button>\n  </div>\n\n  <!-- Scrollable content -->\n  <div class=\"scroll-area px-5 pb-28\" style=\"max-height: 680px;\">\n\n    <!-- Section: Cuisine Types -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-utensils text-sm\" style=\"color: var(--primary-color);\"></i>\n        <h2 class=\"text-sm font-bold uppercase tracking-widest\" style=\"color: var(--text-color);\">Cuisine Types</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <!-- Selected chips -->\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Asian\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Mexican\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Italian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          American\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Mediterranean\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Indian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Thai\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Japanese\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Chinese\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          French\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Greek\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Korean\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Middle Eastern\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Spanish\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vietnamese\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t mb-6\" style=\"border-color: var(--secondary-color);\"></div>\n\n    <!-- Section: Restaurant Type -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-store text-sm\" style=\"color: var(--primary-color);\"></i>\n        <h2 class=\"text-sm font-bold uppercase tracking-widest\" style=\"color: var(--text-color);\">Restaurant Type</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Casual Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fine Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fast Casual\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fast Food\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Food Trucks\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Buffet\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Cafe &amp; Bistro\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Pop-Up\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t mb-6\" style=\"border-color: var(--secondary-color);\"></div>\n\n    <!-- Section: Dining Experience -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--primary-color);\"></i>\n        <h2 class=\"text-sm font-bold uppercase tracking-widest\" style=\"color: var(--text-color);\">Dining Experience</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Romantic\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Family-Friendly\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Solo Friendly\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Group Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Outdoor Seating\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Late Night\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Brunch Spot\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Sports Bar\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Live Music\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t mb-6\" style=\"border-color: var(--secondary-color);\"></div>\n\n    <!-- Section: Dietary Needs -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-leaf text-sm\" style=\"color: var(--primary-color);\"></i>\n        <h2 class=\"text-sm font-bold uppercase tracking-widest\" style=\"color: var(--text-color);\">Dietary Needs</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vegetarian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vegan\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Gluten-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Halal\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Kosher\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Dairy-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Nut-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Low-Carb\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t mb-6\" style=\"border-color: var(--secondary-color);\"></div>\n\n    <!-- Section: Price Range -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-1\">\n        <i class=\"fa-solid fa-dollar-sign text-sm\" style=\"color: var(--primary-color);\"></i>\n        <h2 class=\"text-sm font-bold uppercase tracking-widest\" style=\"color: var(--text-color);\">Price Range</h2>\n      </div>\n      <p class=\"text-xs mb-3\" style=\"color: var(--subtext-color);\">Select all price ranges you're comfortable with.</p>\n      <div class=\"flex flex-col gap-3\">\n\n        <!-- Range 1 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl flex items-center justify-center\" style=\"background: var(--secondary-color);\">\n              <span class=\"text-sm font-bold\" style=\"color: var(--text-color);\">$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold\" style=\"color: var(--text-color);\">Budget</p>\n              <p class=\"text-xs\" style=\"color: var(--subtext-color);\">Under $15 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 flex items-center justify-center\" style=\"border-color: var(--subtext-color); background: transparent;\">\n          </div>\n        </div>\n\n        <!-- Range 2 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl flex items-center justify-center\" style=\"background: var(--secondary-color);\">\n              <span class=\"text-sm font-bold\" style=\"color: var(--text-color);\">$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold\" style=\"color: var(--text-color);\">Moderate</p>\n              <p class=\"text-xs\" style=\"color: var(--subtext-color);\">$15 – $30 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 flex items-center justify-center\" style=\"border-color: var(--subtext-color); background: transparent;\">\n          </div>\n        </div>\n\n        <!-- Range 3 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl flex items-center justify-center\" style=\"background: var(--secondary-color);\">\n              <span class=\"text-sm font-bold\" style=\"color: var(--text-color);\">$$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold\" style=\"color: var(--text-color);\">Upscale</p>\n              <p class=\"text-xs\" style=\"color: var(--subtext-color);\">$30 – $60 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 flex items-center justify-center\" style=\"border-color: var(--subtext-color); background: transparent;\">\n          </div>\n        </div>\n\n        <!-- Range 4 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl flex items-center justify-center\" style=\"background: var(--secondary-color);\">\n              <span class=\"text-sm font-bold\" style=\"color: var(--text-color);\">$$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold\" style=\"color: var(--text-color);\">Fine Dining</p>\n              <p class=\"text-xs\" style=\"color: var(--subtext-color);\">$60+ per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 flex items-center justify-center\" style=\"border-color: var(--subtext-color); background: transparent;\">\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n  </div><!-- end scroll area -->\n\n  <!-- Floating Save Preferences Button -->\n  <div class=\"absolute left-0 w-full px-5\" style=\"bottom: 72px; z-index: 20;\">\n    <button class=\"w-full text-white text-sm font-semibold py-3.5 rounded-xl flex items-center justify-center gap-2 shadow-lg\" style=\"background: var(--primary-color);\">\n      <i class=\"fa-solid fa-check text-sm\"></i>\n      Save Preferences\n    </button>\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"absolute bottom-0 left-0 w-full flex items-center justify-around px-2 pt-2 pb-4 border-t\" style=\"z-index: 10; background:#1A1A2E; border-color:#2E2E4A;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-base\" style=\"color:#FF6B35;\"></i>\n      <span class=\"text-xs font-semibold\" style=\"color:#FF6B35;\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Favorites</span>\n    </button>\n  </div>\n\n</div>\n</body>\n</html>",
        "deviceTarget": "mobile",
        "isPalette": false,
        "status": "ready",
        "isEditing": false,
        "x": 697.1056844465379,
        "y": -15.17985158253805,
        "isSelected": false,
        "version": 4,
        "activeRevisionIndex": 3,
        "history": [
          {
            "id": "f7f06a8a-51e6-4dd1-b602-b85e6258780f",
            "prompt": "Duplicated from Food Preferences – Restaurant Roulette (Refined)",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Food Preferences – Restaurant Roulette</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            zinc: {\n              50:  '#fafafa',\n              100: '#f4f4f5',\n              200: '#e4e4e7',\n              300: '#d4d4d8',\n              400: '#a1a1aa',\n              500: '#71717a',\n              600: '#52525b',\n              700: '#3f3f46',\n              800: '#27272a',\n              900: '#18181b',\n            }\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; }\n    body { margin: 0; padding: 0; background: #e5e7eb; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }\n    .phone { width: 375px; min-height: 840px; background: #fafafa; font-family: 'Inter', sans-serif; overflow-x: hidden; position: relative; }\n    .scroll-area { overflow-y: auto; overflow-x: hidden; }\n    .scroll-area::-webkit-scrollbar { display: none; }\n\n    .chip-selected {\n      background: #27272a;\n      color: #fafafa;\n      border-color: #27272a;\n    }\n    .chip-unselected {\n      background: #ffffff;\n      color: #3f3f46;\n      border-color: #d4d4d8;\n    }\n  </style>\n</head>\n<body>\n<div class=\"phone\">\n\n  <!-- Status Bar -->\n  <div class=\"flex justify-between items-center px-5 pt-4 pb-1\">\n    <span class=\"text-xs font-semibold text-zinc-700\">9:41</span>\n    <div class=\"flex items-center gap-2\">\n      <i class=\"fa-solid fa-signal text-zinc-700 text-xs\"></i>\n      <i class=\"fa-solid fa-wifi text-zinc-700 text-xs\"></i>\n      <i class=\"fa-solid fa-battery-three-quarters text-zinc-700 text-xs\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"px-5 pt-3 pb-2 flex items-center gap-3\">\n    <button class=\"w-8 h-8 flex items-center justify-center rounded-full border border-zinc-300 bg-white\">\n      <i class=\"fa-solid fa-arrow-left text-zinc-700 text-sm\"></i>\n    </button>\n    <span class=\"text-base font-semibold text-zinc-800\">My Food Preferences</span>\n  </div>\n\n  <!-- Subheader -->\n  <div class=\"px-5 pb-4\">\n    <p class=\"text-sm text-zinc-500 leading-snug\">Select the cuisines and dining styles you love. We'll use these to serve up your perfect restaurant matches.</p>\n  </div>\n\n  <!-- Selected count bar -->\n  <div class=\"mx-5 mb-4 px-4 py-3 bg-zinc-100 rounded-xl border border-zinc-200 flex items-center justify-between\">\n    <div class=\"flex items-center gap-2\">\n      <i class=\"fa-solid fa-heart text-zinc-500 text-sm\"></i>\n      <span class=\"text-sm font-medium text-zinc-700\">5 preferences selected</span>\n    </div>\n    <button class=\"text-xs font-semibold text-zinc-500 underline\">Clear all</button>\n  </div>\n\n  <!-- Scrollable content -->\n  <div class=\"scroll-area px-5 pb-28\" style=\"max-height: 680px;\">\n\n    <!-- Section: Cuisine Types -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-utensils text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Cuisine Types</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <!-- Selected chips -->\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Asian\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Mexican\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Italian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          American\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Mediterranean\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Indian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Thai\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Japanese\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Chinese\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          French\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Greek\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Korean\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Middle Eastern\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Spanish\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vietnamese\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Restaurant Type -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-store text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Restaurant Type</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Casual Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fine Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fast Casual\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fast Food\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Food Trucks\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Buffet\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Cafe &amp; Bistro\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Pop-Up\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Dining Experience -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-star text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Dining Experience</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Romantic\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Family-Friendly\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Solo Friendly\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Group Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Outdoor Seating\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Late Night\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Brunch Spot\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Sports Bar\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Live Music\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Dietary Needs -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-leaf text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Dietary Needs</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vegetarian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vegan\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Gluten-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Halal\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Kosher\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Dairy-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Nut-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Low-Carb\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Price Range -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-1\">\n        <i class=\"fa-solid fa-dollar-sign text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Price Range</h2>\n      </div>\n      <p class=\"text-xs text-zinc-400 mb-3\">Select all price ranges you're comfortable with.</p>\n      <div class=\"flex flex-col gap-3\">\n\n        <!-- Range 1 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Budget</p>\n              <p class=\"text-xs text-zinc-400\">Under $15 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n        <!-- Range 2 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Moderate</p>\n              <p class=\"text-xs text-zinc-400\">$15 – $30 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n        <!-- Range 3 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Upscale</p>\n              <p class=\"text-xs text-zinc-400\">$30 – $60 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n        <!-- Range 4 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Fine Dining</p>\n              <p class=\"text-xs text-zinc-400\">$60+ per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n  </div><!-- end scroll area -->\n\n  <!-- Floating Save Preferences Button -->\n  <div class=\"absolute left-0 w-full px-5\" style=\"bottom: 72px; z-index: 20;\">\n    <button class=\"w-full bg-zinc-900 text-white text-sm font-semibold py-3.5 rounded-xl flex items-center justify-center gap-2 shadow-lg\">\n      <i class=\"fa-solid fa-check text-sm\"></i>\n      Save Preferences\n    </button>\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"absolute bottom-0 left-0 w-full bg-zinc-50 border-t border-zinc-200 flex items-center justify-around px-2 pt-2 pb-4\" style=\"z-index: 10;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-zinc-900 text-base\"></i>\n      <span class=\"text-xs text-zinc-900 font-semibold\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-zinc-400 text-base\"></i>\n      <span class=\"text-xs text-zinc-400\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-zinc-400 text-base\"></i>\n      <span class=\"text-xs text-zinc-400\">Favorites</span>\n    </button>\n  </div>\n\n</div>\n</body>\n</html>",
            "timestamp": "2026-05-29T15:46:33.899Z"
          },
          {
            "id": "c65bf0d8-8588-44c4-a5f9-6314ab280eb1",
            "prompt": "--background-color: #1A1A2E;\n--surface-color: #25253A;\n--primary-color: #FF6B35;\n--secondary-color: #2E2E4A;\n--accent-color: #FFD166;\n--text-color: #F5F5F5;\n--subtext-color: #9494B2;\n--success-color: #4CAF82;\nGo ahead and apply this color palette to the screen.",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Food Preferences – Restaurant Roulette</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            zinc: {\n              50:  '#fafafa',\n              100: '#f4f4f5',\n              200: '#e4e4e7',\n              300: '#d4d4d8',\n              400: '#a1a1aa',\n              500: '#71717a',\n              600: '#52525b',\n              700: '#3f3f46',\n              800: '#27272a',\n              900: '#18181b',\n            }\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    :root {\n      --background-color: #1A1A2E;\n      --surface-color: #25253A;\n      --primary-color: #FF6B35;\n      --secondary-color: #2E2E4A;\n      --accent-color: #FFD166;\n      --text-color: #F5F5F5;\n      --subtext-color: #9494B2;\n      --success-color: #4CAF82;\n    }\n    * { box-sizing: border-box; }\n    body { margin: 0; padding: 0; background: #0f0f1e; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }\n    .phone { width: 375px; min-height: 840px; background: var(--background-color); font-family: 'Inter', sans-serif; overflow-x: hidden; position: relative; }\n    .scroll-area { overflow-y: auto; overflow-x: hidden; }\n    .scroll-area::-webkit-scrollbar { display: none; }\n\n    .chip-selected {\n      background: var(--primary-color);\n      color: #ffffff;\n      border-color: var(--primary-color);\n    }\n    .chip-unselected {\n      background: var(--surface-color);\n      color: var(--text-color);\n      border-color: var(--secondary-color);\n    }\n  </style>\n</head>\n<body>\n<div class=\"phone\">\n\n  <!-- Status Bar -->\n  <div class=\"flex justify-between items-center px-5 pt-4 pb-1\">\n    <span class=\"text-xs font-semibold text-zinc-700\">9:41</span>\n    <div class=\"flex items-center gap-2\">\n      <i class=\"fa-solid fa-signal text-zinc-700 text-xs\"></i>\n      <i class=\"fa-solid fa-wifi text-zinc-700 text-xs\"></i>\n      <i class=\"fa-solid fa-battery-three-quarters text-zinc-700 text-xs\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"px-5 pt-3 pb-2 flex items-center gap-3\">\n    <button class=\"w-8 h-8 flex items-center justify-center rounded-full border border-zinc-300 bg-white\">\n      <i class=\"fa-solid fa-arrow-left text-zinc-700 text-sm\"></i>\n    </button>\n    <span class=\"text-base font-semibold text-zinc-800\">My Food Preferences</span>\n  </div>\n\n  <!-- Subheader -->\n  <div class=\"px-5 pb-4\">\n    <p class=\"text-sm text-zinc-500 leading-snug\">Select the cuisines and dining styles you love. We'll use these to serve up your perfect restaurant matches.</p>\n  </div>\n\n  <!-- Selected count bar -->\n  <div class=\"mx-5 mb-4 px-4 py-3 bg-zinc-100 rounded-xl border border-zinc-200 flex items-center justify-between\">\n    <div class=\"flex items-center gap-2\">\n      <i class=\"fa-solid fa-heart text-zinc-500 text-sm\"></i>\n      <span class=\"text-sm font-medium text-zinc-700\">5 preferences selected</span>\n    </div>\n    <button class=\"text-xs font-semibold text-zinc-500 underline\">Clear all</button>\n  </div>\n\n  <!-- Scrollable content -->\n  <div class=\"scroll-area px-5 pb-28\" style=\"max-height: 680px;\">\n\n    <!-- Section: Cuisine Types -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-utensils text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Cuisine Types</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <!-- Selected chips -->\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Asian\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Mexican\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Italian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          American\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Mediterranean\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Indian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Thai\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Japanese\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Chinese\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          French\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Greek\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Korean\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Middle Eastern\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Spanish\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vietnamese\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Restaurant Type -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-store text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Restaurant Type</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Casual Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fine Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fast Casual\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fast Food\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Food Trucks\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Buffet\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Cafe &amp; Bistro\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Pop-Up\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Dining Experience -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-star text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Dining Experience</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Romantic\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Family-Friendly\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Solo Friendly\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Group Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Outdoor Seating\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Late Night\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Brunch Spot\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Sports Bar\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Live Music\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Dietary Needs -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-leaf text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Dietary Needs</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vegetarian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vegan\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Gluten-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Halal\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Kosher\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Dairy-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Nut-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Low-Carb\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Price Range -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-1\">\n        <i class=\"fa-solid fa-dollar-sign text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Price Range</h2>\n      </div>\n      <p class=\"text-xs text-zinc-400 mb-3\">Select all price ranges you're comfortable with.</p>\n      <div class=\"flex flex-col gap-3\">\n\n        <!-- Range 1 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Budget</p>\n              <p class=\"text-xs text-zinc-400\">Under $15 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n        <!-- Range 2 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Moderate</p>\n              <p class=\"text-xs text-zinc-400\">$15 – $30 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n        <!-- Range 3 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Upscale</p>\n              <p class=\"text-xs text-zinc-400\">$30 – $60 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n        <!-- Range 4 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Fine Dining</p>\n              <p class=\"text-xs text-zinc-400\">$60+ per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n  </div><!-- end scroll area -->\n\n  <!-- Floating Save Preferences Button -->\n  <div class=\"absolute left-0 w-full px-5\" style=\"bottom: 72px; z-index: 20;\">\n    <button class=\"w-full bg-zinc-900 text-white text-sm font-semibold py-3.5 rounded-xl flex items-center justify-center gap-2 shadow-lg\">\n      <i class=\"fa-solid fa-check text-sm\"></i>\n      Save Preferences\n    </button>\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"absolute bottom-0 left-0 w-full bg-zinc-50 border-t border-zinc-200 flex items-center justify-around px-2 pt-2 pb-4\" style=\"z-index: 10;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-zinc-900 text-base\"></i>\n      <span class=\"text-xs text-zinc-900 font-semibold\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-zinc-400 text-base\"></i>\n      <span class=\"text-xs text-zinc-400\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-zinc-400 text-base\"></i>\n      <span class=\"text-xs text-zinc-400\">Favorites</span>\n    </button>\n  </div>\n\n</div>\n</body>\n</html>",
            "timestamp": "2026-05-29T15:51:48.495Z"
          },
          {
            "id": "0215c99c-6bb2-4cee-a3ad-747b50f9ea0b",
            "prompt": "Apply the color to the footer just like the reference design.",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Food Preferences – Restaurant Roulette</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            zinc: {\n              50:  '#fafafa',\n              100: '#f4f4f5',\n              200: '#e4e4e7',\n              300: '#d4d4d8',\n              400: '#a1a1aa',\n              500: '#71717a',\n              600: '#52525b',\n              700: '#3f3f46',\n              800: '#27272a',\n              900: '#18181b',\n            }\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    :root {\n      --background-color: #1A1A2E;\n      --surface-color: #25253A;\n      --primary-color: #FF6B35;\n      --secondary-color: #2E2E4A;\n      --accent-color: #FFD166;\n      --text-color: #F5F5F5;\n      --subtext-color: #9494B2;\n      --success-color: #4CAF82;\n    }\n    * { box-sizing: border-box; }\n    body { margin: 0; padding: 0; background: #0f0f1e; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }\n    .phone { width: 375px; min-height: 840px; background: var(--background-color); font-family: 'Inter', sans-serif; overflow-x: hidden; position: relative; }\n    .scroll-area { overflow-y: auto; overflow-x: hidden; }\n    .scroll-area::-webkit-scrollbar { display: none; }\n\n    .chip-selected {\n      background: var(--primary-color);\n      color: #ffffff;\n      border-color: var(--primary-color);\n    }\n    .chip-unselected {\n      background: var(--surface-color);\n      color: var(--text-color);\n      border-color: var(--secondary-color);\n    }\n  </style>\n</head>\n<body>\n<div class=\"phone\">\n\n  <!-- Status Bar -->\n  <div class=\"flex justify-between items-center px-5 pt-4 pb-1\">\n    <span class=\"text-xs font-semibold text-zinc-700\">9:41</span>\n    <div class=\"flex items-center gap-2\">\n      <i class=\"fa-solid fa-signal text-zinc-700 text-xs\"></i>\n      <i class=\"fa-solid fa-wifi text-zinc-700 text-xs\"></i>\n      <i class=\"fa-solid fa-battery-three-quarters text-zinc-700 text-xs\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"px-5 pt-3 pb-2 flex items-center gap-3\">\n    <button class=\"w-8 h-8 flex items-center justify-center rounded-full border border-zinc-300 bg-white\">\n      <i class=\"fa-solid fa-arrow-left text-zinc-700 text-sm\"></i>\n    </button>\n    <span class=\"text-base font-semibold text-zinc-800\">My Food Preferences</span>\n  </div>\n\n  <!-- Subheader -->\n  <div class=\"px-5 pb-4\">\n    <p class=\"text-sm text-zinc-500 leading-snug\">Select the cuisines and dining styles you love. We'll use these to serve up your perfect restaurant matches.</p>\n  </div>\n\n  <!-- Selected count bar -->\n  <div class=\"mx-5 mb-4 px-4 py-3 bg-zinc-100 rounded-xl border border-zinc-200 flex items-center justify-between\">\n    <div class=\"flex items-center gap-2\">\n      <i class=\"fa-solid fa-heart text-zinc-500 text-sm\"></i>\n      <span class=\"text-sm font-medium text-zinc-700\">5 preferences selected</span>\n    </div>\n    <button class=\"text-xs font-semibold text-zinc-500 underline\">Clear all</button>\n  </div>\n\n  <!-- Scrollable content -->\n  <div class=\"scroll-area px-5 pb-28\" style=\"max-height: 680px;\">\n\n    <!-- Section: Cuisine Types -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-utensils text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Cuisine Types</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <!-- Selected chips -->\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Asian\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Mexican\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Italian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          American\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Mediterranean\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Indian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Thai\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Japanese\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Chinese\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          French\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Greek\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Korean\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Middle Eastern\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Spanish\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vietnamese\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Restaurant Type -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-store text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Restaurant Type</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Casual Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fine Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fast Casual\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fast Food\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Food Trucks\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Buffet\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Cafe &amp; Bistro\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Pop-Up\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Dining Experience -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-star text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Dining Experience</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Romantic\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Family-Friendly\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Solo Friendly\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Group Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Outdoor Seating\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Late Night\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Brunch Spot\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Sports Bar\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Live Music\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Dietary Needs -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-leaf text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Dietary Needs</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vegetarian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vegan\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Gluten-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Halal\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Kosher\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Dairy-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Nut-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Low-Carb\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t border-zinc-200 mb-6\"></div>\n\n    <!-- Section: Price Range -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-1\">\n        <i class=\"fa-solid fa-dollar-sign text-zinc-600 text-sm\"></i>\n        <h2 class=\"text-sm font-bold text-zinc-800 uppercase tracking-widest\">Price Range</h2>\n      </div>\n      <p class=\"text-xs text-zinc-400 mb-3\">Select all price ranges you're comfortable with.</p>\n      <div class=\"flex flex-col gap-3\">\n\n        <!-- Range 1 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Budget</p>\n              <p class=\"text-xs text-zinc-400\">Under $15 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n        <!-- Range 2 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Moderate</p>\n              <p class=\"text-xs text-zinc-400\">$15 – $30 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n        <!-- Range 3 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Upscale</p>\n              <p class=\"text-xs text-zinc-400\">$30 – $60 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n        <!-- Range 4 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl bg-zinc-100 flex items-center justify-center\">\n              <span class=\"text-sm font-bold text-zinc-700\">$$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold text-zinc-800\">Fine Dining</p>\n              <p class=\"text-xs text-zinc-400\">$60+ per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 border-zinc-300 bg-white flex items-center justify-center\">\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n  </div><!-- end scroll area -->\n\n  <!-- Floating Save Preferences Button -->\n  <div class=\"absolute left-0 w-full px-5\" style=\"bottom: 72px; z-index: 20;\">\n    <button class=\"w-full bg-zinc-900 text-white text-sm font-semibold py-3.5 rounded-xl flex items-center justify-center gap-2 shadow-lg\">\n      <i class=\"fa-solid fa-check text-sm\"></i>\n      Save Preferences\n    </button>\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"absolute bottom-0 left-0 w-full flex items-center justify-around px-2 pt-2 pb-4 border-t\" style=\"z-index: 10; background:#1A1A2E; border-color:#2E2E4A;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-base\" style=\"color:#FF6B35;\"></i>\n      <span class=\"text-xs font-semibold\" style=\"color:#FF6B35;\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Favorites</span>\n    </button>\n  </div>\n\n</div>\n</body>\n</html>",
            "timestamp": "2026-05-29T15:52:23.315Z"
          },
          {
            "id": "ce2d8daa-439e-4b81-a3de-9474423d7533",
            "prompt": "Go ahead and turn the dark text, like the section headings, white please so that they stand out against the dark background.",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Food Preferences – Restaurant Roulette</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            zinc: {\n              50:  '#fafafa',\n              100: '#f4f4f5',\n              200: '#e4e4e7',\n              300: '#d4d4d8',\n              400: '#a1a1aa',\n              500: '#71717a',\n              600: '#52525b',\n              700: '#3f3f46',\n              800: '#27272a',\n              900: '#18181b',\n            }\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    :root {\n      --background-color: #1A1A2E;\n      --surface-color: #25253A;\n      --primary-color: #FF6B35;\n      --secondary-color: #2E2E4A;\n      --accent-color: #FFD166;\n      --text-color: #F5F5F5;\n      --subtext-color: #9494B2;\n      --success-color: #4CAF82;\n    }\n    * { box-sizing: border-box; }\n    body { margin: 0; padding: 0; background: #0f0f1e; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }\n    .phone { width: 375px; min-height: 840px; background: var(--background-color); font-family: 'Inter', sans-serif; overflow-x: hidden; position: relative; }\n    .scroll-area { overflow-y: auto; overflow-x: hidden; }\n    .scroll-area::-webkit-scrollbar { display: none; }\n\n    .chip-selected {\n      background: var(--primary-color);\n      color: #ffffff;\n      border-color: var(--primary-color);\n    }\n    .chip-unselected {\n      background: var(--surface-color);\n      color: var(--text-color);\n      border-color: var(--secondary-color);\n    }\n  </style>\n</head>\n<body>\n<div class=\"phone\">\n\n  <!-- Status Bar -->\n  <div class=\"flex justify-between items-center px-5 pt-4 pb-1\">\n    <span class=\"text-xs font-semibold\" style=\"color: var(--subtext-color);\">9:41</span>\n    <div class=\"flex items-center gap-2\">\n      <i class=\"fa-solid fa-signal text-xs\" style=\"color: var(--subtext-color);\"></i>\n      <i class=\"fa-solid fa-wifi text-xs\" style=\"color: var(--subtext-color);\"></i>\n      <i class=\"fa-solid fa-battery-three-quarters text-xs\" style=\"color: var(--subtext-color);\"></i>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"px-5 pt-3 pb-2 flex items-center gap-3\">\n    <button class=\"w-8 h-8 flex items-center justify-center rounded-full border\" style=\"border-color: var(--secondary-color); background: var(--surface-color);\">\n      <i class=\"fa-solid fa-arrow-left text-sm\" style=\"color: var(--text-color);\"></i>\n    </button>\n    <span class=\"text-base font-semibold\" style=\"color: var(--text-color);\">My Food Preferences</span>\n  </div>\n\n  <!-- Subheader -->\n  <div class=\"px-5 pb-4\">\n    <p class=\"text-sm leading-snug\" style=\"color: var(--subtext-color);\">Select the cuisines and dining styles you love. We'll use these to serve up your perfect restaurant matches.</p>\n  </div>\n\n  <!-- Selected count bar -->\n  <div class=\"mx-5 mb-4 px-4 py-3 rounded-xl border flex items-center justify-between\" style=\"background: var(--surface-color); border-color: var(--secondary-color);\">\n    <div class=\"flex items-center gap-2\">\n      <i class=\"fa-solid fa-heart text-sm\" style=\"color: var(--primary-color);\"></i>\n      <span class=\"text-sm font-medium\" style=\"color: var(--text-color);\">5 preferences selected</span>\n    </div>\n    <button class=\"text-xs font-semibold underline\" style=\"color: var(--subtext-color);\">Clear all</button>\n  </div>\n\n  <!-- Scrollable content -->\n  <div class=\"scroll-area px-5 pb-28\" style=\"max-height: 680px;\">\n\n    <!-- Section: Cuisine Types -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-utensils text-sm\" style=\"color: var(--primary-color);\"></i>\n        <h2 class=\"text-sm font-bold uppercase tracking-widest\" style=\"color: var(--text-color);\">Cuisine Types</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <!-- Selected chips -->\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Asian\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Mexican\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Italian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          American\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Mediterranean\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Indian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Thai\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Japanese\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Chinese\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          French\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Greek\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Korean\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Middle Eastern\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Spanish\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vietnamese\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t mb-6\" style=\"border-color: var(--secondary-color);\"></div>\n\n    <!-- Section: Restaurant Type -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-store text-sm\" style=\"color: var(--primary-color);\"></i>\n        <h2 class=\"text-sm font-bold uppercase tracking-widest\" style=\"color: var(--text-color);\">Restaurant Type</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Casual Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fine Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fast Casual\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Fast Food\n        </button>\n        <button class=\"chip-selected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          <i class=\"fa-solid fa-check text-xs\"></i> Food Trucks\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Buffet\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Cafe &amp; Bistro\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Pop-Up\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t mb-6\" style=\"border-color: var(--secondary-color);\"></div>\n\n    <!-- Section: Dining Experience -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-star text-sm\" style=\"color: var(--primary-color);\"></i>\n        <h2 class=\"text-sm font-bold uppercase tracking-widest\" style=\"color: var(--text-color);\">Dining Experience</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Romantic\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Family-Friendly\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Solo Friendly\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Group Dining\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Outdoor Seating\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Late Night\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Brunch Spot\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Sports Bar\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Live Music\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t mb-6\" style=\"border-color: var(--secondary-color);\"></div>\n\n    <!-- Section: Dietary Needs -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa-solid fa-leaf text-sm\" style=\"color: var(--primary-color);\"></i>\n        <h2 class=\"text-sm font-bold uppercase tracking-widest\" style=\"color: var(--text-color);\">Dietary Needs</h2>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vegetarian\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Vegan\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Gluten-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Halal\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Kosher\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Dairy-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Nut-Free\n        </button>\n        <button class=\"chip-unselected flex items-center gap-2 px-3 py-2 rounded-full border text-sm font-medium\">\n          Low-Carb\n        </button>\n      </div>\n    </div>\n\n    <!-- Divider -->\n    <div class=\"border-t mb-6\" style=\"border-color: var(--secondary-color);\"></div>\n\n    <!-- Section: Price Range -->\n    <div class=\"mb-6\">\n      <div class=\"flex items-center gap-2 mb-1\">\n        <i class=\"fa-solid fa-dollar-sign text-sm\" style=\"color: var(--primary-color);\"></i>\n        <h2 class=\"text-sm font-bold uppercase tracking-widest\" style=\"color: var(--text-color);\">Price Range</h2>\n      </div>\n      <p class=\"text-xs mb-3\" style=\"color: var(--subtext-color);\">Select all price ranges you're comfortable with.</p>\n      <div class=\"flex flex-col gap-3\">\n\n        <!-- Range 1 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl flex items-center justify-center\" style=\"background: var(--secondary-color);\">\n              <span class=\"text-sm font-bold\" style=\"color: var(--text-color);\">$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold\" style=\"color: var(--text-color);\">Budget</p>\n              <p class=\"text-xs\" style=\"color: var(--subtext-color);\">Under $15 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 flex items-center justify-center\" style=\"border-color: var(--subtext-color); background: transparent;\">\n          </div>\n        </div>\n\n        <!-- Range 2 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl flex items-center justify-center\" style=\"background: var(--secondary-color);\">\n              <span class=\"text-sm font-bold\" style=\"color: var(--text-color);\">$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold\" style=\"color: var(--text-color);\">Moderate</p>\n              <p class=\"text-xs\" style=\"color: var(--subtext-color);\">$15 – $30 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 flex items-center justify-center\" style=\"border-color: var(--subtext-color); background: transparent;\">\n          </div>\n        </div>\n\n        <!-- Range 3 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl flex items-center justify-center\" style=\"background: var(--secondary-color);\">\n              <span class=\"text-sm font-bold\" style=\"color: var(--text-color);\">$$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold\" style=\"color: var(--text-color);\">Upscale</p>\n              <p class=\"text-xs\" style=\"color: var(--subtext-color);\">$30 – $60 per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 flex items-center justify-center\" style=\"border-color: var(--subtext-color); background: transparent;\">\n          </div>\n        </div>\n\n        <!-- Range 4 -->\n        <div class=\"chip-unselected flex items-center justify-between px-4 py-3 rounded-2xl border cursor-pointer\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"w-9 h-9 rounded-xl flex items-center justify-center\" style=\"background: var(--secondary-color);\">\n              <span class=\"text-sm font-bold\" style=\"color: var(--text-color);\">$$</span>\n            </div>\n            <div>\n              <p class=\"text-sm font-semibold\" style=\"color: var(--text-color);\">Fine Dining</p>\n              <p class=\"text-xs\" style=\"color: var(--subtext-color);\">$60+ per person</p>\n            </div>\n          </div>\n          <div class=\"w-5 h-5 rounded-full border-2 flex items-center justify-center\" style=\"border-color: var(--subtext-color); background: transparent;\">\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n  </div><!-- end scroll area -->\n\n  <!-- Floating Save Preferences Button -->\n  <div class=\"absolute left-0 w-full px-5\" style=\"bottom: 72px; z-index: 20;\">\n    <button class=\"w-full text-white text-sm font-semibold py-3.5 rounded-xl flex items-center justify-center gap-2 shadow-lg\" style=\"background: var(--primary-color);\">\n      <i class=\"fa-solid fa-check text-sm\"></i>\n      Save Preferences\n    </button>\n  </div>\n\n  <!-- Bottom Nav -->\n  <div class=\"absolute bottom-0 left-0 w-full flex items-center justify-around px-2 pt-2 pb-4 border-t\" style=\"z-index: 10; background:#1A1A2E; border-color:#2E2E4A;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-base\" style=\"color:#FF6B35;\"></i>\n      <span class=\"text-xs font-semibold\" style=\"color:#FF6B35;\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Recommendations</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Favorites</span>\n    </button>\n  </div>\n\n</div>\n</body>\n</html>",
            "timestamp": "2026-05-29T16:04:36.635Z"
          }
        ]
      },
      {
        "id": "c1a385e5-93c9-48c5-a1f3-bd892772f8e6",
        "name": "Restaurant Roulette",
        "hasCustomName": false,
        "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Color Palette</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <style>\n    :root {\n      --background-color: #1A1A2E;\n      --surface-color: #25253A;\n      --primary-color: #FF6B35;\n      --secondary-color: #2E2E4A;\n      --accent-color: #FFD166;\n      --text-color: #F5F5F5;\n      --subtext-color: #9494B2;\n      --success-color: #4CAF82;\n    }\n\n    * { box-sizing: border-box; margin: 0; padding: 0; }\n\n    body {\n      background: #111122;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100vh;\n      font-family: 'Inter', sans-serif;\n    }\n\n    .phone {\n      width: 375px;\n      height: 840px;\n      background: var(--background-color);\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      position: relative;\n    }\n\n    .swatch-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 14px;\n      padding: 0 20px 24px 20px;\n    }\n\n    .swatch-card {\n      background: var(--surface-color);\n      border-radius: 16px;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      box-shadow: 0 4px 16px rgba(0,0,0,0.35);\n    }\n\n    .swatch-block {\n      height: 88px;\n      width: 100%;\n    }\n\n    .swatch-info {\n      padding: 10px 12px 12px;\n    }\n\n    .swatch-role {\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--subtext-color);\n      margin-bottom: 3px;\n    }\n\n    .swatch-hex {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--text-color);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .header-bar {\n      background: var(--background-color);\n      padding: 20px 20px 14px;\n      border-bottom: 1px solid rgba(148,148,178,0.12);\n      flex-shrink: 0;\n    }\n\n    .badge {\n      display: inline-block;\n      background: var(--primary-color);\n      color: #fff;\n      font-size: 9px;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      padding: 3px 9px;\n      border-radius: 20px;\n      margin-bottom: 8px;\n    }\n\n    .palette-title {\n      font-size: 22px;\n      font-weight: 800;\n      color: var(--text-color);\n      line-height: 1.2;\n      margin-bottom: 4px;\n    }\n\n    .palette-subtitle {\n      font-size: 12px;\n      font-weight: 400;\n      color: var(--subtext-color);\n      line-height: 1.5;\n    }\n\n    .scroll-area {\n      flex: 1;\n      overflow-y: auto;\n      padding-top: 20px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .scroll-area::-webkit-scrollbar { display: none; }\n\n    .section-label {\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: var(--subtext-color);\n      padding: 0 20px 12px;\n    }\n\n    .footer-strip {\n      flex-shrink: 0;\n      background: var(--secondary-color);\n      border-top: 1px solid rgba(148,148,178,0.1);\n      padding: 12px 20px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .footer-label {\n      font-size: 10px;\n      color: var(--subtext-color);\n      font-weight: 500;\n    }\n\n    .footer-dots {\n      display: flex;\n      gap: 5px;\n      align-items: center;\n    }\n\n    .dot {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"phone\">\n\n    <!-- Header -->\n    <div class=\"header-bar\">\n      <div class=\"badge\">🍽 Restaurant Roulette</div>\n      <div class=\"palette-title\">Midnight Feast</div>\n      <div class=\"palette-subtitle\">Warm, bold flavors on a deep night canvas — inviting discovery one swipe at a time.</div>\n    </div>\n\n    <!-- Swatch Grid -->\n    <div class=\"scroll-area\">\n      <div class=\"section-label\">Color Roles · 8 Tokens</div>\n      <div class=\"swatch-grid\">\n\n        <!-- Background -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #1A1A2E;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Background</div>\n            <div class=\"swatch-hex\">#1A1A2E</div>\n          </div>\n        </div>\n\n        <!-- Surface -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #25253A;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Surface</div>\n            <div class=\"swatch-hex\">#25253A</div>\n          </div>\n        </div>\n\n        <!-- Primary -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #FF6B35;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Primary</div>\n            <div class=\"swatch-hex\">#FF6B35</div>\n          </div>\n        </div>\n\n        <!-- Secondary -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #2E2E4A;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Secondary</div>\n            <div class=\"swatch-hex\">#2E2E4A</div>\n          </div>\n        </div>\n\n        <!-- Accent -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #FFD166;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Accent</div>\n            <div class=\"swatch-hex\">#FFD166</div>\n          </div>\n        </div>\n\n        <!-- Success -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #4CAF82;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Success</div>\n            <div class=\"swatch-hex\">#4CAF82</div>\n          </div>\n        </div>\n\n        <!-- Text -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #F5F5F5; border-bottom: 1px solid rgba(0,0,0,0.08);\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Text</div>\n            <div class=\"swatch-hex\">#F5F5F5</div>\n          </div>\n        </div>\n\n        <!-- Subtext -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #9494B2;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Subtext</div>\n            <div class=\"swatch-hex\">#9494B2</div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer-strip\">\n      <div class=\"footer-label\">8 color roles defined</div>\n      <div class=\"footer-dots\">\n        <div class=\"dot\" style=\"background:#FF6B35;\"></div>\n        <div class=\"dot\" style=\"background:#FFD166;\"></div>\n        <div class=\"dot\" style=\"background:#4CAF82;\"></div>\n        <div class=\"dot\" style=\"background:#9494B2;\"></div>\n        <div class=\"dot\" style=\"background:#F5F5F5;\"></div>\n      </div>\n    </div>\n\n  </div>\n</body>\n</html>",
        "deviceTarget": "mobile",
        "isPalette": true,
        "status": "ready",
        "x": 200.8757241500191,
        "y": 18.69595423444389,
        "isSelected": false,
        "version": 1,
        "activeRevisionIndex": 0,
        "history": [
          {
            "id": "81f6541b-2216-4387-91d3-463f29247cc6",
            "prompt": "Help me generate a color palette for my application.",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Color Palette</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <style>\n    :root {\n      --background-color: #1A1A2E;\n      --surface-color: #25253A;\n      --primary-color: #FF6B35;\n      --secondary-color: #2E2E4A;\n      --accent-color: #FFD166;\n      --text-color: #F5F5F5;\n      --subtext-color: #9494B2;\n      --success-color: #4CAF82;\n    }\n\n    * { box-sizing: border-box; margin: 0; padding: 0; }\n\n    body {\n      background: #111122;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100vh;\n      font-family: 'Inter', sans-serif;\n    }\n\n    .phone {\n      width: 375px;\n      height: 840px;\n      background: var(--background-color);\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      position: relative;\n    }\n\n    .swatch-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 14px;\n      padding: 0 20px 24px 20px;\n    }\n\n    .swatch-card {\n      background: var(--surface-color);\n      border-radius: 16px;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      box-shadow: 0 4px 16px rgba(0,0,0,0.35);\n    }\n\n    .swatch-block {\n      height: 88px;\n      width: 100%;\n    }\n\n    .swatch-info {\n      padding: 10px 12px 12px;\n    }\n\n    .swatch-role {\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--subtext-color);\n      margin-bottom: 3px;\n    }\n\n    .swatch-hex {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--text-color);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .header-bar {\n      background: var(--background-color);\n      padding: 20px 20px 14px;\n      border-bottom: 1px solid rgba(148,148,178,0.12);\n      flex-shrink: 0;\n    }\n\n    .badge {\n      display: inline-block;\n      background: var(--primary-color);\n      color: #fff;\n      font-size: 9px;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      padding: 3px 9px;\n      border-radius: 20px;\n      margin-bottom: 8px;\n    }\n\n    .palette-title {\n      font-size: 22px;\n      font-weight: 800;\n      color: var(--text-color);\n      line-height: 1.2;\n      margin-bottom: 4px;\n    }\n\n    .palette-subtitle {\n      font-size: 12px;\n      font-weight: 400;\n      color: var(--subtext-color);\n      line-height: 1.5;\n    }\n\n    .scroll-area {\n      flex: 1;\n      overflow-y: auto;\n      padding-top: 20px;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .scroll-area::-webkit-scrollbar { display: none; }\n\n    .section-label {\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: var(--subtext-color);\n      padding: 0 20px 12px;\n    }\n\n    .footer-strip {\n      flex-shrink: 0;\n      background: var(--secondary-color);\n      border-top: 1px solid rgba(148,148,178,0.1);\n      padding: 12px 20px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .footer-label {\n      font-size: 10px;\n      color: var(--subtext-color);\n      font-weight: 500;\n    }\n\n    .footer-dots {\n      display: flex;\n      gap: 5px;\n      align-items: center;\n    }\n\n    .dot {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"phone\">\n\n    <!-- Header -->\n    <div class=\"header-bar\">\n      <div class=\"badge\">🍽 Restaurant Roulette</div>\n      <div class=\"palette-title\">Midnight Feast</div>\n      <div class=\"palette-subtitle\">Warm, bold flavors on a deep night canvas — inviting discovery one swipe at a time.</div>\n    </div>\n\n    <!-- Swatch Grid -->\n    <div class=\"scroll-area\">\n      <div class=\"section-label\">Color Roles · 8 Tokens</div>\n      <div class=\"swatch-grid\">\n\n        <!-- Background -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #1A1A2E;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Background</div>\n            <div class=\"swatch-hex\">#1A1A2E</div>\n          </div>\n        </div>\n\n        <!-- Surface -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #25253A;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Surface</div>\n            <div class=\"swatch-hex\">#25253A</div>\n          </div>\n        </div>\n\n        <!-- Primary -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #FF6B35;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Primary</div>\n            <div class=\"swatch-hex\">#FF6B35</div>\n          </div>\n        </div>\n\n        <!-- Secondary -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #2E2E4A;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Secondary</div>\n            <div class=\"swatch-hex\">#2E2E4A</div>\n          </div>\n        </div>\n\n        <!-- Accent -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #FFD166;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Accent</div>\n            <div class=\"swatch-hex\">#FFD166</div>\n          </div>\n        </div>\n\n        <!-- Success -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #4CAF82;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Success</div>\n            <div class=\"swatch-hex\">#4CAF82</div>\n          </div>\n        </div>\n\n        <!-- Text -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #F5F5F5; border-bottom: 1px solid rgba(0,0,0,0.08);\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Text</div>\n            <div class=\"swatch-hex\">#F5F5F5</div>\n          </div>\n        </div>\n\n        <!-- Subtext -->\n        <div class=\"swatch-card\">\n          <div class=\"swatch-block\" style=\"background: #9494B2;\"></div>\n          <div class=\"swatch-info\">\n            <div class=\"swatch-role\">Subtext</div>\n            <div class=\"swatch-hex\">#9494B2</div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"footer-strip\">\n      <div class=\"footer-label\">8 color roles defined</div>\n      <div class=\"footer-dots\">\n        <div class=\"dot\" style=\"background:#FF6B35;\"></div>\n        <div class=\"dot\" style=\"background:#FFD166;\"></div>\n        <div class=\"dot\" style=\"background:#4CAF82;\"></div>\n        <div class=\"dot\" style=\"background:#9494B2;\"></div>\n        <div class=\"dot\" style=\"background:#F5F5F5;\"></div>\n      </div>\n    </div>\n\n  </div>\n</body>\n</html>",
            "timestamp": "2026-05-29T15:47:19.896Z"
          }
        ]
      },
      {
        "id": "8a47c2b4-f627-423c-9a69-39eed7c21162",
        "name": "Restaurant Detail – Bella Napoli Trattoria",
        "hasCustomName": false,
        "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Restaurant Detail</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            bg:        '#1A1A2E',\n            surface:   '#25253A',\n            primary:   '#FF6B35',\n            secondary: '#2E2E4A',\n            accent:    '#FFD166',\n            text:      '#F5F5F5',\n            subtext:   '#9494B2',\n            success:   '#4CAF82',\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; margin: 0; padding: 0; }\n    body { font-family: 'Inter', sans-serif; background: #0f0f1f; display: flex; align-items: center; justify-content: center; min-height: 100vh; }\n    .phone-shell {\n      width: 375px;\n      height: 840px;\n      background: #1A1A2E;\n      overflow: hidden;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    }\n    .scrollable {\n      overflow-y: auto;\n      flex: 1;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .scrollable::-webkit-scrollbar { display: none; }\n\n    /* Busyness bar animation */\n    .busy-bar {\n      border-radius: 3px;\n      transition: height 0.3s ease;\n    }\n\n    /* Affinity ring */\n    @keyframes ringFill {\n      from { stroke-dashoffset: 220; }\n      to   { stroke-dashoffset: 28; }\n    }\n    .ring-fill {\n      stroke-dasharray: 220;\n      stroke-dashoffset: 220;\n      animation: ringFill 1.4s ease forwards 0.3s;\n    }\n\n    /* Image swipe dots */\n    .dot-active { background: #FF6B35; }\n    .dot-inactive { background: #2E2E4A; }\n  </style>\n</head>\n<body>\n<div class=\"phone-shell\">\n\n  <!-- Status Bar -->\n  <div class=\"flex items-center justify-between px-5 pt-3 pb-1 shrink-0\" style=\"background:#1A1A2E;\">\n    <span class=\"text-xs font-semibold\" style=\"color:#F5F5F5;\">9:41</span>\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-signal text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-wifi text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-battery-three-quarters text-xs\" style=\"color:#F5F5F5;\"></i>\n    </div>\n  </div>\n\n  <!-- Top Nav Bar -->\n  <div class=\"flex items-center justify-between px-4 py-2.5 shrink-0 border-b\" style=\"background:#1A1A2E; border-color:#2E2E4A;\">\n    <button class=\"w-8 h-8 rounded-full flex items-center justify-center border\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n      <i class=\"fa fa-chevron-left text-sm\" style=\"color:#F5F5F5;\"></i>\n    </button>\n    <div class=\"text-center\">\n      <p class=\"text-xs font-medium tracking-wide uppercase\" style=\"color:#9494B2;\">Restaurant Detail</p>\n      <h1 class=\"text-sm font-extrabold leading-tight\" style=\"color:#F5F5F5;\">Bella Napoli Trattoria</h1>\n    </div>\n    <button class=\"w-8 h-8 rounded-full flex items-center justify-center border\" style=\"background:#FF6B35; border-color:#FF6B35;\">\n      <i class=\"fa-solid fa-heart text-sm\" style=\"color:#F5F5F5;\"></i>\n    </button>\n  </div>\n\n  <!-- Scrollable Content -->\n  <div class=\"scrollable\">\n\n    <!-- ── IMAGE GALLERY ── -->\n    <div class=\"relative w-full shrink-0\" style=\"height:220px; background:#2E2E4A;\">\n      <!-- Main hero image placeholder -->\n      <div class=\"absolute inset-0 flex flex-col items-center justify-center\" style=\"background: linear-gradient(135deg,#2E2E4A 0%,#1A1A2E 100%);\">\n        <i class=\"fa fa-utensils text-5xl mb-2\" style=\"color:#3a3a58;\"></i>\n        <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Bella Napoli Interior</span>\n      </div>\n      <!-- Gradient overlay bottom -->\n      <div class=\"absolute bottom-0 left-0 right-0 h-20\" style=\"background: linear-gradient(to top, #1A1A2E, transparent);\"></div>\n\n      <!-- Category badge -->\n      <div class=\"absolute top-3 left-3 text-xs font-bold px-3 py-1 rounded-full\" style=\"background:#FF6B35; color:#F5F5F5;\">\n        Italian\n      </div>\n      <!-- Open badge -->\n      <div class=\"absolute top-3 right-3 flex items-center gap-1.5 text-xs font-bold px-3 py-1 rounded-full\" style=\"background:#1A1A2E; color:#4CAF82; border:1px solid #4CAF82;\">\n        <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#4CAF82;\"></div>\n        Open Now\n      </div>\n\n      <!-- Image pagination dots -->\n      <div class=\"absolute bottom-4 left-0 right-0 flex items-center justify-center gap-1.5\">\n        <div class=\"w-2 h-2 rounded-full dot-active\"></div>\n        <div class=\"w-1.5 h-1.5 rounded-full dot-inactive\"></div>\n        <div class=\"w-1.5 h-1.5 rounded-full dot-inactive\"></div>\n        <div class=\"w-1.5 h-1.5 rounded-full dot-inactive\"></div>\n        <div class=\"w-1.5 h-1.5 rounded-full dot-inactive\"></div>\n      </div>\n    </div>\n\n    <!-- ── THUMBNAIL STRIP ── -->\n    <div class=\"flex gap-2 px-4 pt-3 pb-1 shrink-0\" style=\"overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;\">\n      <!-- Thumb 1 – active -->\n      <div class=\"shrink-0 w-16 h-14 rounded-lg border-2 flex flex-col items-center justify-center gap-0.5\" style=\"background:#2E2E4A; border-color:#FF6B35;\">\n        <i class=\"fa fa-utensils text-base\" style=\"color:#FF6B35;\"></i>\n        <span class=\"text-xs\" style=\"color:#FF6B35; font-size:9px;\">Interior</span>\n      </div>\n      <!-- Thumb 2 -->\n      <div class=\"shrink-0 w-16 h-14 rounded-lg border-2 flex flex-col items-center justify-center gap-0.5\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-pizza-slice text-base\" style=\"color:#9494B2;\"></i>\n        <span style=\"color:#9494B2; font-size:9px;\">Pizza</span>\n      </div>\n      <!-- Thumb 3 -->\n      <div class=\"shrink-0 w-16 h-14 rounded-lg border-2 flex flex-col items-center justify-center gap-0.5\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-bowl-food text-base\" style=\"color:#9494B2;\"></i>\n        <span style=\"color:#9494B2; font-size:9px;\">Pasta</span>\n      </div>\n      <!-- Thumb 4 -->\n      <div class=\"shrink-0 w-16 h-14 rounded-lg border-2 flex flex-col items-center justify-center gap-0.5\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-wine-glass text-base\" style=\"color:#9494B2;\"></i>\n        <span style=\"color:#9494B2; font-size:9px;\">Drinks</span>\n      </div>\n      <!-- Thumb 5 -->\n      <div class=\"shrink-0 w-16 h-14 rounded-lg border-2 flex flex-col items-center justify-center gap-0.5\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-ice-cream text-base\" style=\"color:#9494B2;\"></i>\n        <span style=\"color:#9494B2; font-size:9px;\">Dessert</span>\n      </div>\n    </div>\n\n    <!-- ── NAME & META ── -->\n    <div class=\"px-4 pt-3 pb-1\">\n      <h2 class=\"text-xl font-extrabold leading-tight\" style=\"color:#F5F5F5;\">Bella Napoli Trattoria</h2>\n      <p class=\"text-sm mt-0.5\" style=\"color:#9494B2;\">Italian · Pasta · Wood-fired Pizza</p>\n\n      <!-- Rating + Distance + Price -->\n      <div class=\"flex items-center flex-wrap gap-x-4 gap-y-1 mt-2\">\n        <div class=\"flex items-center gap-1\">\n          <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n          <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n          <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n          <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n          <i class=\"fa fa-star-half-stroke text-xs\" style=\"color:#FFD166;\"></i>\n          <span class=\"text-xs font-bold ml-0.5\" style=\"color:#F5F5F5;\">4.5</span>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">(312 reviews)</span>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <i class=\"fa fa-location-dot text-xs\" style=\"color:#FF6B35;\"></i>\n          <span class=\"text-xs font-semibold\" style=\"color:#F5F5F5;\">1.2 mi away</span>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">$$  ·  $14–$32</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- ── AFFINITY SCORE ── -->\n    <div class=\"mx-4 mt-3 rounded-2xl p-4 border\" style=\"background:#25253A; border-color:#3a3a58;\">\n      <div class=\"flex items-center gap-3\">\n        <!-- Ring -->\n        <div class=\"relative shrink-0\" style=\"width:72px; height:72px;\">\n          <svg width=\"72\" height=\"72\" viewBox=\"0 0 72 72\" style=\"transform:rotate(-90deg);\">\n            <!-- Track -->\n            <circle cx=\"36\" cy=\"36\" r=\"30\" fill=\"none\" stroke=\"#2E2E4A\" stroke-width=\"7\"/>\n            <!-- Fill: dasharray=2π*30≈188, offset for 87% = 188*(1-0.87)≈24 -->\n            <circle cx=\"36\" cy=\"36\" r=\"30\" fill=\"none\" stroke=\"#FF6B35\" stroke-width=\"7\"\n                    stroke-linecap=\"round\"\n                    stroke-dasharray=\"188\"\n                    stroke-dashoffset=\"24\"\n                    style=\"transition: stroke-dashoffset 1.2s ease;\" />\n          </svg>\n          <div class=\"absolute inset-0 flex flex-col items-center justify-center\" style=\"margin-top:2px;\">\n            <span class=\"font-extrabold text-lg leading-none\" style=\"color:#FF6B35;\">87</span>\n            <span style=\"color:#9494B2; font-size:9px; font-weight:600;\">/ 100</span>\n          </div>\n        </div>\n        <!-- Text -->\n        <div class=\"flex-1\">\n          <div class=\"flex items-center gap-2 mb-1\">\n            <span class=\"text-sm font-bold\" style=\"color:#F5F5F5;\">Affinity Score</span>\n            <span class=\"text-xs font-bold px-2 py-0.5 rounded-full\" style=\"background:rgba(255,107,53,0.18); color:#FF6B35;\">Great Match</span>\n          </div>\n          <p class=\"text-xs leading-relaxed\" style=\"color:#9494B2;\">Based on your taste for Italian cuisine, pasta dishes, and cozy atmospheres, we think you'll love this spot.</p>\n        </div>\n      </div>\n\n      <!-- Affinity breakdown bars -->\n      <div class=\"mt-3 flex flex-col gap-2\">\n        <div>\n          <div class=\"flex justify-between mb-0.5\">\n            <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Cuisine Match</span>\n            <span class=\"text-xs font-bold\" style=\"color:#FF6B35;\">95%</span>\n          </div>\n          <div class=\"w-full rounded-full h-1.5\" style=\"background:#2E2E4A;\">\n            <div class=\"h-1.5 rounded-full\" style=\"background:#FF6B35; width:95%;\"></div>\n          </div>\n        </div>\n        <div>\n          <div class=\"flex justify-between mb-0.5\">\n            <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Price Fit</span>\n            <span class=\"text-xs font-bold\" style=\"color:#FFD166;\">82%</span>\n          </div>\n          <div class=\"w-full rounded-full h-1.5\" style=\"background:#2E2E4A;\">\n            <div class=\"h-1.5 rounded-full\" style=\"background:#FFD166; width:82%;\"></div>\n          </div>\n        </div>\n        <div>\n          <div class=\"flex justify-between mb-0.5\">\n            <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Vibe &amp; Ambiance</span>\n            <span class=\"text-xs font-bold\" style=\"color:#4CAF82;\">78%</span>\n          </div>\n          <div class=\"w-full rounded-full h-1.5\" style=\"background:#2E2E4A;\">\n            <div class=\"h-1.5 rounded-full\" style=\"background:#4CAF82; width:78%;\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- ── BUSYNESS CHART ── -->\n    <div class=\"mx-4 mt-3 rounded-2xl p-4 border\" style=\"background:#25253A; border-color:#3a3a58;\">\n      <div class=\"flex items-center justify-between mb-3\">\n        <div class=\"flex items-center gap-2\">\n          <i class=\"fa fa-chart-bar text-sm\" style=\"color:#FFD166;\"></i>\n          <span class=\"text-sm font-bold\" style=\"color:#F5F5F5;\">Busyness</span>\n        </div>\n        <!-- Day selector -->\n        <div class=\"flex gap-1\">\n          <button class=\"text-xs font-bold px-2.5 py-1 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">Fri</button>\n          <button class=\"text-xs font-medium px-2 py-1 rounded-lg\" style=\"background:#2E2E4A; color:#9494B2;\">Sat</button>\n          <button class=\"text-xs font-medium px-2 py-1 rounded-lg\" style=\"background:#2E2E4A; color:#9494B2;\">Sun</button>\n        </div>\n      </div>\n\n      <!-- Bar chart -->\n      <div class=\"flex items-end gap-1.5 justify-between\" style=\"height:70px;\">\n        <!-- 11am -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:22%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">11a</span>\n        </div>\n        <!-- 12pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:55%; background:#FFD166;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">12p</span>\n        </div>\n        <!-- 1pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:75%; background:#FFD166;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">1p</span>\n        </div>\n        <!-- 2pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:40%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">2p</span>\n        </div>\n        <!-- 3pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:22%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">3p</span>\n        </div>\n        <!-- 4pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:30%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">4p</span>\n        </div>\n        <!-- 5pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:60%; background:#FFD166;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">5p</span>\n        </div>\n        <!-- 6pm – current, busiest -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar relative\" style=\"height:100%; background:#FF6B35;\">\n            <div class=\"absolute -top-4 left-1/2 -translate-x-1/2 whitespace-nowrap text-xs font-bold px-1 py-0.5 rounded\" style=\"background:#FF6B35; color:#F5F5F5; font-size:8px;\">Now</div>\n          </div>\n          <span style=\"font-size:8px; color:#FF6B35; font-weight:700;\">6p</span>\n        </div>\n        <!-- 7pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:88%; background:#FF6B35; opacity:0.7;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">7p</span>\n        </div>\n        <!-- 8pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:70%; background:#FFD166;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">8p</span>\n        </div>\n        <!-- 9pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:48%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">9p</span>\n        </div>\n        <!-- 10pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:20%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">10p</span>\n        </div>\n      </div>\n\n      <!-- Legend + best time tip -->\n      <div class=\"flex items-center gap-3 mt-3 flex-wrap\">\n        <div class=\"flex items-center gap-1\">\n          <div class=\"w-2.5 h-2.5 rounded-sm\" style=\"background:#4CAF82;\"></div>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Not Busy</span>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <div class=\"w-2.5 h-2.5 rounded-sm\" style=\"background:#FFD166;\"></div>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Moderate</span>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <div class=\"w-2.5 h-2.5 rounded-sm\" style=\"background:#FF6B35;\"></div>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Very Busy</span>\n        </div>\n      </div>\n      <div class=\"mt-2 flex items-center gap-2 px-3 py-2 rounded-xl\" style=\"background:#2E2E4A;\">\n        <i class=\"fa fa-lightbulb text-xs\" style=\"color:#FFD166;\"></i>\n        <span class=\"text-xs\" style=\"color:#9494B2;\">Best time to visit: <span style=\"color:#4CAF82; font-weight:700;\">3:00 – 4:30 PM</span> or after 9:30 PM</span>\n      </div>\n    </div>\n\n    <!-- ── HOURS OF OPERATION ── -->\n    <div class=\"mx-4 mt-3 rounded-2xl p-4 border\" style=\"background:#25253A; border-color:#3a3a58;\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa fa-clock text-sm\" style=\"color:#FF6B35;\"></i>\n        <span class=\"text-sm font-bold\" style=\"color:#F5F5F5;\">Hours of Operation</span>\n        <div class=\"ml-auto flex items-center gap-1\">\n          <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#4CAF82;\"></div>\n          <span class=\"text-xs font-semibold\" style=\"color:#4CAF82;\">Open Now</span>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">· Closes 11:30 PM</span>\n        </div>\n      </div>\n      <!-- Day rows -->\n      <div class=\"flex flex-col gap-0\" style=\"border-radius:12px; overflow:hidden; border:1px solid #2E2E4A;\">\n        <!-- Monday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#2E2E4A; border-bottom:1px solid #3a3a58;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Mon</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Monday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 10:00 PM</span>\n        </div>\n        <!-- Tuesday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#25253A; border-bottom:1px solid #2E2E4A;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Tue</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Tuesday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 10:00 PM</span>\n        </div>\n        <!-- Wednesday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#2E2E4A; border-bottom:1px solid #3a3a58;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Wed</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Wednesday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 10:00 PM</span>\n        </div>\n        <!-- Thursday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#25253A; border-bottom:1px solid #2E2E4A;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Thu</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Thursday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 10:00 PM</span>\n        </div>\n        <!-- Friday – today -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#2E2E4A; border-bottom:1px solid #3a3a58; border-left:3px solid #FF6B35;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-bold w-7\" style=\"color:#FF6B35;\">Fri</span>\n            <span class=\"text-xs font-bold\" style=\"color:#FF6B35;\">Friday</span>\n            <span class=\"text-xs font-bold px-1.5 py-0.5 rounded-md\" style=\"background:rgba(255,107,53,0.18); color:#FF6B35; font-size:9px;\">Today</span>\n          </div>\n          <span class=\"text-xs font-bold\" style=\"color:#FF6B35;\">11:00 AM – 11:30 PM</span>\n        </div>\n        <!-- Saturday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#25253A; border-bottom:1px solid #2E2E4A;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Sat</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Saturday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 11:30 PM</span>\n        </div>\n        <!-- Sunday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#2E2E4A;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Sun</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Sunday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">12:00 PM – 9:00 PM</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- ── QUICK INFO CHIPS ── -->\n    <div class=\"mx-4 mt-3\">\n      <p class=\"text-xs font-bold mb-2\" style=\"color:#9494B2; text-transform:uppercase; letter-spacing:0.05em;\">Highlights</p>\n      <div class=\"flex flex-wrap gap-2\">\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-fire text-xs\" style=\"color:#FF6B35;\"></i> Wood-fired Oven\n        </div>\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-wine-bottle text-xs\" style=\"color:#9494B2;\"></i> Full Bar\n        </div>\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-wheelchair text-xs\" style=\"color:#9494B2;\"></i> Accessible\n        </div>\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-dog text-xs\" style=\"color:#9494B2;\"></i> Pet-Friendly\n        </div>\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-credit-card text-xs\" style=\"color:#9494B2;\"></i> Card Accepted\n        </div>\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-leaf text-xs\" style=\"color:#4CAF82;\"></i> Vegetarian Options\n        </div>\n      </div>\n    </div>\n\n    <!-- ── LOCATION ── -->\n    <div class=\"mx-4 mt-3 rounded-2xl border overflow-hidden\" style=\"background:#25253A; border-color:#3a3a58;\">\n      <div class=\"px-4 py-3 flex items-center justify-between border-b\" style=\"border-color:#2E2E4A;\">\n        <div class=\"flex items-center gap-2\">\n          <i class=\"fa fa-map-location-dot text-sm\" style=\"color:#FF6B35;\"></i>\n          <span class=\"text-sm font-bold\" style=\"color:#F5F5F5;\">Location</span>\n        </div>\n        <button class=\"text-xs font-semibold px-3 py-1 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n          <i class=\"fa fa-diamond-turn-right mr-1\"></i> Directions\n        </button>\n      </div>\n      <!-- Map placeholder -->\n      <div class=\"flex flex-col items-center justify-center\" style=\"height:90px; background:linear-gradient(135deg,#2E2E4A,#1A1A2E);\">\n        <i class=\"fa fa-map text-3xl mb-1\" style=\"color:#3a3a58;\"></i>\n        <span class=\"text-xs\" style=\"color:#9494B2;\">482 Via Roma, Little Italy, NY 10002</span>\n      </div>\n    </div>\n\n    <!-- ── CTA BUTTONS ── -->\n    <div class=\"mx-4 mt-4 mb-4 flex gap-3\">\n      <button class=\"flex-1 flex items-center justify-center gap-2 font-bold py-3.5 rounded-2xl text-sm\" style=\"background:#FF6B35; color:#F5F5F5;\">\n        <i class=\"fa fa-book-open\"></i> View Menu\n      </button>\n      <button class=\"flex-1 flex items-center justify-center gap-2 font-bold py-3.5 rounded-2xl text-sm border\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n        <i class=\"fa fa-calendar-check\" style=\"color:#FF6B35;\"></i> Reserve\n      </button>\n    </div>\n\n    <!-- Bottom spacer -->\n    <div style=\"height:8px;\"></div>\n\n  </div><!-- end scrollable -->\n\n  <!-- Bottom Nav -->\n  <div class=\"shrink-0 flex items-center justify-around px-2 pt-2 pb-4 border-t\" style=\"background:#1A1A2E; border-color:#2E2E4A;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-base\" style=\"color:#FF6B35;\"></i>\n      <span class=\"text-xs font-semibold\" style=\"color:#FF6B35;\">Discover</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Favorites</span>\n    </button>\n  </div>\n\n</div>\n</body>\n</html>",
        "deviceTarget": "mobile",
        "isPalette": false,
        "status": "ready",
        "x": 2050.256903202885,
        "y": 42.32689411726017,
        "isSelected": false,
        "version": 1,
        "activeRevisionIndex": 0,
        "history": [
          {
            "id": "489c4b92-f13a-448a-933a-716526605f2b",
            "prompt": "Go ahead and design me an inner screen where when a user selects a restaurant it's able to show what's on the referenced screen design but just a lot more information. So users will see more images. They'll have the full hours of operation. Users will also have an affinity score for how much our system thinks they will like this restaurant. We should also show a busyness timer so we can show the user at what hours the restaurant gets really busy and what hours it is not as busy so that the user can make a decision if they want to visit there or not.",
            "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Restaurant Roulette – Restaurant Detail</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\" />\n  <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\" />\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            bg:        '#1A1A2E',\n            surface:   '#25253A',\n            primary:   '#FF6B35',\n            secondary: '#2E2E4A',\n            accent:    '#FFD166',\n            text:      '#F5F5F5',\n            subtext:   '#9494B2',\n            success:   '#4CAF82',\n          }\n        }\n      }\n    }\n  </script>\n  <style>\n    * { box-sizing: border-box; margin: 0; padding: 0; }\n    body { font-family: 'Inter', sans-serif; background: #0f0f1f; display: flex; align-items: center; justify-content: center; min-height: 100vh; }\n    .phone-shell {\n      width: 375px;\n      height: 840px;\n      background: #1A1A2E;\n      overflow: hidden;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    }\n    .scrollable {\n      overflow-y: auto;\n      flex: 1;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n    .scrollable::-webkit-scrollbar { display: none; }\n\n    /* Busyness bar animation */\n    .busy-bar {\n      border-radius: 3px;\n      transition: height 0.3s ease;\n    }\n\n    /* Affinity ring */\n    @keyframes ringFill {\n      from { stroke-dashoffset: 220; }\n      to   { stroke-dashoffset: 28; }\n    }\n    .ring-fill {\n      stroke-dasharray: 220;\n      stroke-dashoffset: 220;\n      animation: ringFill 1.4s ease forwards 0.3s;\n    }\n\n    /* Image swipe dots */\n    .dot-active { background: #FF6B35; }\n    .dot-inactive { background: #2E2E4A; }\n  </style>\n</head>\n<body>\n<div class=\"phone-shell\">\n\n  <!-- Status Bar -->\n  <div class=\"flex items-center justify-between px-5 pt-3 pb-1 shrink-0\" style=\"background:#1A1A2E;\">\n    <span class=\"text-xs font-semibold\" style=\"color:#F5F5F5;\">9:41</span>\n    <div class=\"flex items-center gap-1.5\">\n      <i class=\"fa fa-signal text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-wifi text-xs\" style=\"color:#F5F5F5;\"></i>\n      <i class=\"fa fa-battery-three-quarters text-xs\" style=\"color:#F5F5F5;\"></i>\n    </div>\n  </div>\n\n  <!-- Top Nav Bar -->\n  <div class=\"flex items-center justify-between px-4 py-2.5 shrink-0 border-b\" style=\"background:#1A1A2E; border-color:#2E2E4A;\">\n    <button class=\"w-8 h-8 rounded-full flex items-center justify-center border\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n      <i class=\"fa fa-chevron-left text-sm\" style=\"color:#F5F5F5;\"></i>\n    </button>\n    <div class=\"text-center\">\n      <p class=\"text-xs font-medium tracking-wide uppercase\" style=\"color:#9494B2;\">Restaurant Detail</p>\n      <h1 class=\"text-sm font-extrabold leading-tight\" style=\"color:#F5F5F5;\">Bella Napoli Trattoria</h1>\n    </div>\n    <button class=\"w-8 h-8 rounded-full flex items-center justify-center border\" style=\"background:#FF6B35; border-color:#FF6B35;\">\n      <i class=\"fa-solid fa-heart text-sm\" style=\"color:#F5F5F5;\"></i>\n    </button>\n  </div>\n\n  <!-- Scrollable Content -->\n  <div class=\"scrollable\">\n\n    <!-- ── IMAGE GALLERY ── -->\n    <div class=\"relative w-full shrink-0\" style=\"height:220px; background:#2E2E4A;\">\n      <!-- Main hero image placeholder -->\n      <div class=\"absolute inset-0 flex flex-col items-center justify-center\" style=\"background: linear-gradient(135deg,#2E2E4A 0%,#1A1A2E 100%);\">\n        <i class=\"fa fa-utensils text-5xl mb-2\" style=\"color:#3a3a58;\"></i>\n        <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Bella Napoli Interior</span>\n      </div>\n      <!-- Gradient overlay bottom -->\n      <div class=\"absolute bottom-0 left-0 right-0 h-20\" style=\"background: linear-gradient(to top, #1A1A2E, transparent);\"></div>\n\n      <!-- Category badge -->\n      <div class=\"absolute top-3 left-3 text-xs font-bold px-3 py-1 rounded-full\" style=\"background:#FF6B35; color:#F5F5F5;\">\n        Italian\n      </div>\n      <!-- Open badge -->\n      <div class=\"absolute top-3 right-3 flex items-center gap-1.5 text-xs font-bold px-3 py-1 rounded-full\" style=\"background:#1A1A2E; color:#4CAF82; border:1px solid #4CAF82;\">\n        <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#4CAF82;\"></div>\n        Open Now\n      </div>\n\n      <!-- Image pagination dots -->\n      <div class=\"absolute bottom-4 left-0 right-0 flex items-center justify-center gap-1.5\">\n        <div class=\"w-2 h-2 rounded-full dot-active\"></div>\n        <div class=\"w-1.5 h-1.5 rounded-full dot-inactive\"></div>\n        <div class=\"w-1.5 h-1.5 rounded-full dot-inactive\"></div>\n        <div class=\"w-1.5 h-1.5 rounded-full dot-inactive\"></div>\n        <div class=\"w-1.5 h-1.5 rounded-full dot-inactive\"></div>\n      </div>\n    </div>\n\n    <!-- ── THUMBNAIL STRIP ── -->\n    <div class=\"flex gap-2 px-4 pt-3 pb-1 shrink-0\" style=\"overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;\">\n      <!-- Thumb 1 – active -->\n      <div class=\"shrink-0 w-16 h-14 rounded-lg border-2 flex flex-col items-center justify-center gap-0.5\" style=\"background:#2E2E4A; border-color:#FF6B35;\">\n        <i class=\"fa fa-utensils text-base\" style=\"color:#FF6B35;\"></i>\n        <span class=\"text-xs\" style=\"color:#FF6B35; font-size:9px;\">Interior</span>\n      </div>\n      <!-- Thumb 2 -->\n      <div class=\"shrink-0 w-16 h-14 rounded-lg border-2 flex flex-col items-center justify-center gap-0.5\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-pizza-slice text-base\" style=\"color:#9494B2;\"></i>\n        <span style=\"color:#9494B2; font-size:9px;\">Pizza</span>\n      </div>\n      <!-- Thumb 3 -->\n      <div class=\"shrink-0 w-16 h-14 rounded-lg border-2 flex flex-col items-center justify-center gap-0.5\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-bowl-food text-base\" style=\"color:#9494B2;\"></i>\n        <span style=\"color:#9494B2; font-size:9px;\">Pasta</span>\n      </div>\n      <!-- Thumb 4 -->\n      <div class=\"shrink-0 w-16 h-14 rounded-lg border-2 flex flex-col items-center justify-center gap-0.5\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-wine-glass text-base\" style=\"color:#9494B2;\"></i>\n        <span style=\"color:#9494B2; font-size:9px;\">Drinks</span>\n      </div>\n      <!-- Thumb 5 -->\n      <div class=\"shrink-0 w-16 h-14 rounded-lg border-2 flex flex-col items-center justify-center gap-0.5\" style=\"background:#2E2E4A; border-color:#3a3a58;\">\n        <i class=\"fa fa-ice-cream text-base\" style=\"color:#9494B2;\"></i>\n        <span style=\"color:#9494B2; font-size:9px;\">Dessert</span>\n      </div>\n    </div>\n\n    <!-- ── NAME & META ── -->\n    <div class=\"px-4 pt-3 pb-1\">\n      <h2 class=\"text-xl font-extrabold leading-tight\" style=\"color:#F5F5F5;\">Bella Napoli Trattoria</h2>\n      <p class=\"text-sm mt-0.5\" style=\"color:#9494B2;\">Italian · Pasta · Wood-fired Pizza</p>\n\n      <!-- Rating + Distance + Price -->\n      <div class=\"flex items-center flex-wrap gap-x-4 gap-y-1 mt-2\">\n        <div class=\"flex items-center gap-1\">\n          <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n          <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n          <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n          <i class=\"fa fa-star text-xs\" style=\"color:#FFD166;\"></i>\n          <i class=\"fa fa-star-half-stroke text-xs\" style=\"color:#FFD166;\"></i>\n          <span class=\"text-xs font-bold ml-0.5\" style=\"color:#F5F5F5;\">4.5</span>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">(312 reviews)</span>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <i class=\"fa fa-location-dot text-xs\" style=\"color:#FF6B35;\"></i>\n          <span class=\"text-xs font-semibold\" style=\"color:#F5F5F5;\">1.2 mi away</span>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">$$  ·  $14–$32</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- ── AFFINITY SCORE ── -->\n    <div class=\"mx-4 mt-3 rounded-2xl p-4 border\" style=\"background:#25253A; border-color:#3a3a58;\">\n      <div class=\"flex items-center gap-3\">\n        <!-- Ring -->\n        <div class=\"relative shrink-0\" style=\"width:72px; height:72px;\">\n          <svg width=\"72\" height=\"72\" viewBox=\"0 0 72 72\" style=\"transform:rotate(-90deg);\">\n            <!-- Track -->\n            <circle cx=\"36\" cy=\"36\" r=\"30\" fill=\"none\" stroke=\"#2E2E4A\" stroke-width=\"7\"/>\n            <!-- Fill: dasharray=2π*30≈188, offset for 87% = 188*(1-0.87)≈24 -->\n            <circle cx=\"36\" cy=\"36\" r=\"30\" fill=\"none\" stroke=\"#FF6B35\" stroke-width=\"7\"\n                    stroke-linecap=\"round\"\n                    stroke-dasharray=\"188\"\n                    stroke-dashoffset=\"24\"\n                    style=\"transition: stroke-dashoffset 1.2s ease;\" />\n          </svg>\n          <div class=\"absolute inset-0 flex flex-col items-center justify-center\" style=\"margin-top:2px;\">\n            <span class=\"font-extrabold text-lg leading-none\" style=\"color:#FF6B35;\">87</span>\n            <span style=\"color:#9494B2; font-size:9px; font-weight:600;\">/ 100</span>\n          </div>\n        </div>\n        <!-- Text -->\n        <div class=\"flex-1\">\n          <div class=\"flex items-center gap-2 mb-1\">\n            <span class=\"text-sm font-bold\" style=\"color:#F5F5F5;\">Affinity Score</span>\n            <span class=\"text-xs font-bold px-2 py-0.5 rounded-full\" style=\"background:rgba(255,107,53,0.18); color:#FF6B35;\">Great Match</span>\n          </div>\n          <p class=\"text-xs leading-relaxed\" style=\"color:#9494B2;\">Based on your taste for Italian cuisine, pasta dishes, and cozy atmospheres, we think you'll love this spot.</p>\n        </div>\n      </div>\n\n      <!-- Affinity breakdown bars -->\n      <div class=\"mt-3 flex flex-col gap-2\">\n        <div>\n          <div class=\"flex justify-between mb-0.5\">\n            <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Cuisine Match</span>\n            <span class=\"text-xs font-bold\" style=\"color:#FF6B35;\">95%</span>\n          </div>\n          <div class=\"w-full rounded-full h-1.5\" style=\"background:#2E2E4A;\">\n            <div class=\"h-1.5 rounded-full\" style=\"background:#FF6B35; width:95%;\"></div>\n          </div>\n        </div>\n        <div>\n          <div class=\"flex justify-between mb-0.5\">\n            <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Price Fit</span>\n            <span class=\"text-xs font-bold\" style=\"color:#FFD166;\">82%</span>\n          </div>\n          <div class=\"w-full rounded-full h-1.5\" style=\"background:#2E2E4A;\">\n            <div class=\"h-1.5 rounded-full\" style=\"background:#FFD166; width:82%;\"></div>\n          </div>\n        </div>\n        <div>\n          <div class=\"flex justify-between mb-0.5\">\n            <span class=\"text-xs font-medium\" style=\"color:#9494B2;\">Vibe &amp; Ambiance</span>\n            <span class=\"text-xs font-bold\" style=\"color:#4CAF82;\">78%</span>\n          </div>\n          <div class=\"w-full rounded-full h-1.5\" style=\"background:#2E2E4A;\">\n            <div class=\"h-1.5 rounded-full\" style=\"background:#4CAF82; width:78%;\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- ── BUSYNESS CHART ── -->\n    <div class=\"mx-4 mt-3 rounded-2xl p-4 border\" style=\"background:#25253A; border-color:#3a3a58;\">\n      <div class=\"flex items-center justify-between mb-3\">\n        <div class=\"flex items-center gap-2\">\n          <i class=\"fa fa-chart-bar text-sm\" style=\"color:#FFD166;\"></i>\n          <span class=\"text-sm font-bold\" style=\"color:#F5F5F5;\">Busyness</span>\n        </div>\n        <!-- Day selector -->\n        <div class=\"flex gap-1\">\n          <button class=\"text-xs font-bold px-2.5 py-1 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">Fri</button>\n          <button class=\"text-xs font-medium px-2 py-1 rounded-lg\" style=\"background:#2E2E4A; color:#9494B2;\">Sat</button>\n          <button class=\"text-xs font-medium px-2 py-1 rounded-lg\" style=\"background:#2E2E4A; color:#9494B2;\">Sun</button>\n        </div>\n      </div>\n\n      <!-- Bar chart -->\n      <div class=\"flex items-end gap-1.5 justify-between\" style=\"height:70px;\">\n        <!-- 11am -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:22%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">11a</span>\n        </div>\n        <!-- 12pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:55%; background:#FFD166;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">12p</span>\n        </div>\n        <!-- 1pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:75%; background:#FFD166;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">1p</span>\n        </div>\n        <!-- 2pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:40%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">2p</span>\n        </div>\n        <!-- 3pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:22%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">3p</span>\n        </div>\n        <!-- 4pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:30%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">4p</span>\n        </div>\n        <!-- 5pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:60%; background:#FFD166;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">5p</span>\n        </div>\n        <!-- 6pm – current, busiest -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar relative\" style=\"height:100%; background:#FF6B35;\">\n            <div class=\"absolute -top-4 left-1/2 -translate-x-1/2 whitespace-nowrap text-xs font-bold px-1 py-0.5 rounded\" style=\"background:#FF6B35; color:#F5F5F5; font-size:8px;\">Now</div>\n          </div>\n          <span style=\"font-size:8px; color:#FF6B35; font-weight:700;\">6p</span>\n        </div>\n        <!-- 7pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:88%; background:#FF6B35; opacity:0.7;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">7p</span>\n        </div>\n        <!-- 8pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:70%; background:#FFD166;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">8p</span>\n        </div>\n        <!-- 9pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:48%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">9p</span>\n        </div>\n        <!-- 10pm -->\n        <div class=\"flex flex-col items-center gap-1 flex-1\">\n          <div class=\"w-full rounded-t-md busy-bar\" style=\"height:20%; background:#4CAF82;\"></div>\n          <span style=\"font-size:8px; color:#9494B2;\">10p</span>\n        </div>\n      </div>\n\n      <!-- Legend + best time tip -->\n      <div class=\"flex items-center gap-3 mt-3 flex-wrap\">\n        <div class=\"flex items-center gap-1\">\n          <div class=\"w-2.5 h-2.5 rounded-sm\" style=\"background:#4CAF82;\"></div>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Not Busy</span>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <div class=\"w-2.5 h-2.5 rounded-sm\" style=\"background:#FFD166;\"></div>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Moderate</span>\n        </div>\n        <div class=\"flex items-center gap-1\">\n          <div class=\"w-2.5 h-2.5 rounded-sm\" style=\"background:#FF6B35;\"></div>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">Very Busy</span>\n        </div>\n      </div>\n      <div class=\"mt-2 flex items-center gap-2 px-3 py-2 rounded-xl\" style=\"background:#2E2E4A;\">\n        <i class=\"fa fa-lightbulb text-xs\" style=\"color:#FFD166;\"></i>\n        <span class=\"text-xs\" style=\"color:#9494B2;\">Best time to visit: <span style=\"color:#4CAF82; font-weight:700;\">3:00 – 4:30 PM</span> or after 9:30 PM</span>\n      </div>\n    </div>\n\n    <!-- ── HOURS OF OPERATION ── -->\n    <div class=\"mx-4 mt-3 rounded-2xl p-4 border\" style=\"background:#25253A; border-color:#3a3a58;\">\n      <div class=\"flex items-center gap-2 mb-3\">\n        <i class=\"fa fa-clock text-sm\" style=\"color:#FF6B35;\"></i>\n        <span class=\"text-sm font-bold\" style=\"color:#F5F5F5;\">Hours of Operation</span>\n        <div class=\"ml-auto flex items-center gap-1\">\n          <div class=\"w-1.5 h-1.5 rounded-full\" style=\"background:#4CAF82;\"></div>\n          <span class=\"text-xs font-semibold\" style=\"color:#4CAF82;\">Open Now</span>\n          <span class=\"text-xs\" style=\"color:#9494B2;\">· Closes 11:30 PM</span>\n        </div>\n      </div>\n      <!-- Day rows -->\n      <div class=\"flex flex-col gap-0\" style=\"border-radius:12px; overflow:hidden; border:1px solid #2E2E4A;\">\n        <!-- Monday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#2E2E4A; border-bottom:1px solid #3a3a58;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Mon</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Monday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 10:00 PM</span>\n        </div>\n        <!-- Tuesday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#25253A; border-bottom:1px solid #2E2E4A;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Tue</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Tuesday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 10:00 PM</span>\n        </div>\n        <!-- Wednesday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#2E2E4A; border-bottom:1px solid #3a3a58;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Wed</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Wednesday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 10:00 PM</span>\n        </div>\n        <!-- Thursday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#25253A; border-bottom:1px solid #2E2E4A;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Thu</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Thursday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 10:00 PM</span>\n        </div>\n        <!-- Friday – today -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#2E2E4A; border-bottom:1px solid #3a3a58; border-left:3px solid #FF6B35;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-bold w-7\" style=\"color:#FF6B35;\">Fri</span>\n            <span class=\"text-xs font-bold\" style=\"color:#FF6B35;\">Friday</span>\n            <span class=\"text-xs font-bold px-1.5 py-0.5 rounded-md\" style=\"background:rgba(255,107,53,0.18); color:#FF6B35; font-size:9px;\">Today</span>\n          </div>\n          <span class=\"text-xs font-bold\" style=\"color:#FF6B35;\">11:00 AM – 11:30 PM</span>\n        </div>\n        <!-- Saturday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#25253A; border-bottom:1px solid #2E2E4A;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Sat</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Saturday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">11:00 AM – 11:30 PM</span>\n        </div>\n        <!-- Sunday -->\n        <div class=\"flex items-center justify-between px-3 py-2.5\" style=\"background:#2E2E4A;\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-xs font-semibold w-7\" style=\"color:#9494B2;\">Sun</span>\n            <span class=\"text-xs\" style=\"color:#F5F5F5;\">Sunday</span>\n          </div>\n          <span class=\"text-xs font-medium\" style=\"color:#F5F5F5;\">12:00 PM – 9:00 PM</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- ── QUICK INFO CHIPS ── -->\n    <div class=\"mx-4 mt-3\">\n      <p class=\"text-xs font-bold mb-2\" style=\"color:#9494B2; text-transform:uppercase; letter-spacing:0.05em;\">Highlights</p>\n      <div class=\"flex flex-wrap gap-2\">\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-fire text-xs\" style=\"color:#FF6B35;\"></i> Wood-fired Oven\n        </div>\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-wine-bottle text-xs\" style=\"color:#9494B2;\"></i> Full Bar\n        </div>\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-wheelchair text-xs\" style=\"color:#9494B2;\"></i> Accessible\n        </div>\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-dog text-xs\" style=\"color:#9494B2;\"></i> Pet-Friendly\n        </div>\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-credit-card text-xs\" style=\"color:#9494B2;\"></i> Card Accepted\n        </div>\n        <div class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n          <i class=\"fa fa-leaf text-xs\" style=\"color:#4CAF82;\"></i> Vegetarian Options\n        </div>\n      </div>\n    </div>\n\n    <!-- ── LOCATION ── -->\n    <div class=\"mx-4 mt-3 rounded-2xl border overflow-hidden\" style=\"background:#25253A; border-color:#3a3a58;\">\n      <div class=\"px-4 py-3 flex items-center justify-between border-b\" style=\"border-color:#2E2E4A;\">\n        <div class=\"flex items-center gap-2\">\n          <i class=\"fa fa-map-location-dot text-sm\" style=\"color:#FF6B35;\"></i>\n          <span class=\"text-sm font-bold\" style=\"color:#F5F5F5;\">Location</span>\n        </div>\n        <button class=\"text-xs font-semibold px-3 py-1 rounded-lg\" style=\"background:#FF6B35; color:#F5F5F5;\">\n          <i class=\"fa fa-diamond-turn-right mr-1\"></i> Directions\n        </button>\n      </div>\n      <!-- Map placeholder -->\n      <div class=\"flex flex-col items-center justify-center\" style=\"height:90px; background:linear-gradient(135deg,#2E2E4A,#1A1A2E);\">\n        <i class=\"fa fa-map text-3xl mb-1\" style=\"color:#3a3a58;\"></i>\n        <span class=\"text-xs\" style=\"color:#9494B2;\">482 Via Roma, Little Italy, NY 10002</span>\n      </div>\n    </div>\n\n    <!-- ── CTA BUTTONS ── -->\n    <div class=\"mx-4 mt-4 mb-4 flex gap-3\">\n      <button class=\"flex-1 flex items-center justify-center gap-2 font-bold py-3.5 rounded-2xl text-sm\" style=\"background:#FF6B35; color:#F5F5F5;\">\n        <i class=\"fa fa-book-open\"></i> View Menu\n      </button>\n      <button class=\"flex-1 flex items-center justify-center gap-2 font-bold py-3.5 rounded-2xl text-sm border\" style=\"background:#25253A; border-color:#3a3a58; color:#F5F5F5;\">\n        <i class=\"fa fa-calendar-check\" style=\"color:#FF6B35;\"></i> Reserve\n      </button>\n    </div>\n\n    <!-- Bottom spacer -->\n    <div style=\"height:8px;\"></div>\n\n  </div><!-- end scrollable -->\n\n  <!-- Bottom Nav -->\n  <div class=\"shrink-0 flex items-center justify-around px-2 pt-2 pb-4 border-t\" style=\"background:#1A1A2E; border-color:#2E2E4A;\">\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-sliders text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Preferences</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-utensils text-base\" style=\"color:#FF6B35;\"></i>\n      <span class=\"text-xs font-semibold\" style=\"color:#FF6B35;\">Discover</span>\n    </button>\n    <button class=\"flex flex-col items-center gap-0.5 px-3\">\n      <i class=\"fa fa-heart text-base\" style=\"color:#9494B2;\"></i>\n      <span class=\"text-xs\" style=\"color:#9494B2;\">Favorites</span>\n    </button>\n  </div>\n\n</div>\n</body>\n</html>",
            "timestamp": "2026-05-29T15:56:33.459Z"
          }
        ]
      }
    ],
    "chatMessages": []
  }
}