feat: implement offline queue, background sync and AI robustness

.next/static/css/app/layout.css

@@ -619,12 +619,21 @@ video {
 .left-2\/3 {
   left: 66.666667%;
 }
+.bottom-6 {
+  bottom: 1.5rem;
+}
+.right-6 {
+  right: 1.5rem;
+}
 .z-10 {
   z-index: 10;
 }
 .z-\[9999\] {
   z-index: 9999;
 }
+.z-50 {
+  z-index: 50;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -728,6 +737,9 @@ video {
 .h-1\.5 {
   height: 0.375rem;
 }
+.h-6 {
+  height: 1.5rem;
+}
 .min-h-screen {
   min-height: 100vh;
 }
@@ -752,6 +764,12 @@ video {
 .w-px {
   width: 1px;
 }
+.w-6 {
+  width: 1.5rem;
+}
+.min-w-\[280px\] {
+  min-width: 280px;
+}
 .max-w-5xl {
   max-width: 64rem;
 }
@@ -767,6 +785,9 @@ video {
 .max-w-4xl {
   max-width: 56rem;
 }
+.max-w-\[120px\] {
+  max-width: 120px;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -951,6 +972,9 @@ video {
 .border-t {
   border-top-width: 1px;
 }
+.border-b {
+  border-bottom-width: 1px;
+}
 .border-dashed {
   border-style: dashed;
 }
@@ -1029,6 +1053,10 @@ video {
 .border-amber-200\/50 {
   border-color: rgb(253 230 138 / 0.5);
 }
+.border-purple-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));
+}
 .bg-amber-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
@@ -1129,6 +1157,18 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
 }
+.bg-purple-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
+}
+.bg-zinc-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
+}
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
@@ -1228,6 +1268,10 @@ video {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
 }
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .pl-10 {
   padding-left: 2.5rem;
 }
@@ -1249,6 +1293,9 @@ video {
 .pb-3 {
   padding-bottom: 0.75rem;
 }
+.pt-1 {
+  padding-top: 0.25rem;
+}
 .text-center {
   text-align: center;
 }
@@ -1296,6 +1343,9 @@ video {
 .text-\[9px\] {
   font-size: 9px;
 }
+.text-\[8px\] {
+  font-size: 8px;
+}
 .font-bold {
   font-weight: 700;
 }
@@ -1417,6 +1467,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(212 212 216 / var(--tw-text-opacity, 1));
 }
+.text-purple-500 {
+  --tw-text-opacity: 1;
+  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
+}
 .accent-amber-600 {
   accent-color: #d97706;
 }
@@ -1426,6 +1480,9 @@ video {
 .opacity-70 {
   opacity: 0.7;
 }
+.opacity-50 {
+  opacity: 0.5;
+}
 .shadow-2xl {
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
@@ -1817,6 +1874,10 @@ body {
     border-color: rgb(63 63 70 / 0.5);
   }
 
+  .dark\:border-purple-800\/30 {
+    border-color: rgb(107 33 168 / 0.3);
+  }
+
   .dark\:bg-green-900\/10 {
     background-color: rgb(20 83 45 / 0.1);
   }
@@ -1895,6 +1956,10 @@ body {
     background-color: rgb(120 53 15 / 0.2);
   }
 
+  .dark\:bg-purple-900\/10 {
+    background-color: rgb(88 28 135 / 0.1);
+  }
+
   .dark\:text-zinc-100 {
     --tw-text-opacity: 1;
     color: rgb(244 244 245 / var(--tw-text-opacity, 1));