multi chat and history, oob swap

assets/style.css

@@ -828,6 +828,63 @@
       }
     }
   }
+  .\!tooltip {
+    position: relative !important;
+    display: inline-block !important;
+    --tt-bg: var(--color-neutral) !important;
+    --tt-off: calc(100% + 0.5rem) !important;
+    --tt-tail: calc(100% + 1px + 0.25rem) !important;
+    > :where(.tooltip-content), &[data-tip]:before {
+      position: absolute !important;
+      max-width: 20rem !important;
+      border-radius: var(--radius-field) !important;
+      padding-inline: calc(0.25rem * 2) !important;
+      padding-block: calc(0.25rem * 1) !important;
+      text-align: center !important;
+      white-space: normal !important;
+      color: var(--color-neutral-content) !important;
+      opacity: 0% !important;
+      font-size: 0.875rem !important;
+      line-height: 1.25em !important;
+      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
+      background-color: var(--tt-bg) !important;
+      width: max-content !important;
+      pointer-events: none !important;
+      z-index: 1 !important;
+      --tw-content: attr(data-tip) !important;
+      content: var(--tw-content) !important;
+    }
+    &:after {
+      position: absolute !important;
+      position: absolute !important;
+      opacity: 0% !important;
+      background-color: var(--tt-bg) !important;
+      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
+      content: "" !important;
+      pointer-events: none !important;
+      width: 0.625rem !important;
+      height: 0.25rem !important;
+      display: block !important;
+      mask-repeat: no-repeat !important;
+      mask-position: -1px 0 !important;
+      mask-image: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A") !important;
+    }
+    &.tooltip-open, &[data-tip]:hover, &:hover, &:has(:focus-visible) {
+      > .tooltip-content, &[data-tip]:before, &:after {
+        opacity: 100% !important;
+        --tt-pos: 0rem !important;
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
+      }
+    }
+    > .tooltip-content, &[data-tip]:before {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important;
+      inset: auto auto var(--tt-off) 50% !important;
+    }
+    &:after {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important;
+      inset: auto auto var(--tt-tail) 50% !important;
+    }
+  }
   .tooltip {
     position: relative;
     display: inline-block;
@@ -2544,12 +2601,21 @@
       }
     }
   }
+  .z-5 {
+    z-index: 5;
+  }
+  .z-10 {
+    z-index: 10;
+  }
   .z-20 {
     z-index: 20;
   }
   .z-50 {
     z-index: 50;
   }
+  .z-\[9999\] {
+    z-index: 9999;
+  }
   .modal-box {
     grid-column-start: 1;
     grid-row-start: 1;
@@ -2639,6 +2705,12 @@
       max-width: 96rem;
     }
   }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .m-9 {
+    margin: calc(var(--spacing) * 9);
+  }
   .filter {
     display: flex;
     flex-wrap: wrap;
@@ -4072,6 +4144,9 @@
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
+  .h-\[calc\(100vh-160px\)\] {
+    height: calc(100vh - 160px);
+  }
   .min-h-\[100dvh\] {
     min-height: 100dvh;
   }
@@ -4126,6 +4201,9 @@
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .min-w-72 {
     min-width: calc(var(--spacing) * 72);
   }
@@ -4320,6 +4398,9 @@
   .overflow-x-auto {
     overflow-x: auto;
   }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
@@ -4378,6 +4459,9 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
+  .border-neutral-700 {
+    border-color: var(--color-neutral-700);
+  }
   .bg-accent {
     background-color: var(--color-accent);
   }
@@ -4393,6 +4477,9 @@
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
+  .bg-neutral-800 {
+    background-color: var(--color-neutral-800);
+  }
   .bg-secondary {
     background-color: var(--color-secondary);
   }
@@ -4429,12 +4516,18 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
+  .p-7 {
+    padding: calc(var(--spacing) * 7);
+  }
   .menu-title {
     padding-inline: calc(0.25rem * 3);
     padding-block: calc(0.25rem * 2);
@@ -4506,6 +4599,18 @@
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
+  .pb-32 {
+    padding-bottom: calc(var(--spacing) * 32);
+  }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
   .text-center {
     text-align: center;
   }
@@ -4646,6 +4751,9 @@
   .text-transparent {
     color: transparent;
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .lowercase {
     text-transform: lowercase;
   }
@@ -4672,6 +4780,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -4693,6 +4804,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4790,6 +4905,13 @@
       --tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, transparent);
     }
   }
+  .hover\:bg-gray-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-200);
+      }
+    }
+  }
   .hover\:text-blue-700 {
     &:hover {
       @media (hover: hover) {
@@ -5128,6 +5250,15 @@
       display: none;
     }
   }
+  .dark\:hover\:bg-gray-700 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-700);
+        }
+      }
+    }
+  }
   .prose-h1\:mb-2 {
     & :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
       margin-bottom: calc(var(--spacing) * 2);