@neo4j-ndl/base 4.1.4 → 4.2.0

package/lib/neo4j-ds-styles.css

@@ -6439,7 +6439,7 @@ button.ndl-avatar:focus-visible {
     transition:transform var(--motion-transition-quick);
 }
 .ndl-dropdown-btn .ndl-dropdown-button-icon.ndl-dropdown-button-icon-open{
-      transform:rotate(180deg);
+      transform:scaleY(-1);
     }
 .ndl-dropdown-btn .ndl-dropdown-btn-leading-wrapper {
   display:flex;
@@ -6492,10 +6492,10 @@ button.ndl-avatar:focus-visible {
   outline-offset:-2px;
   outline-color:var(--theme-color-primary-focus);
 }
-.ndl-code:hover:not(.ndl-disabled) {
+.ndl-code:is(button):hover:not(.ndl-disabled) {
   background-color:var(--theme-color-neutral-hover);
 }
-.ndl-code:active:not(.ndl-disabled) {
+.ndl-code:is(button):active:not(.ndl-disabled) {
   background-color:var(--theme-color-neutral-pressed);
 }
 .ndl-code.ndl-disabled {
@@ -7918,13 +7918,20 @@ button.ndl-avatar:focus-visible {
 .ndl-ai-presence{
   --animation-duration:1.5s;
 }
+.ndl-ai-presence.ndl-icon-svg path,
+  .ndl-ai-presence.ndl-icon-svg polygon,
+  .ndl-ai-presence.ndl-icon-svg rect,
+  .ndl-ai-presence.ndl-icon-svg circle,
+  .ndl-ai-presence.ndl-icon-svg line,
+  .ndl-ai-presence.ndl-icon-svg polyline,
+  .ndl-ai-presence.ndl-icon-svg ellipse{
+    vector-effect:none;
+  }
 .ndl-ai-presence path:nth-of-type(2){
-    stroke-dasharray:134;
-    stroke-dashoffset:0;
+    stroke-dasharray:100%;
   }
 .ndl-ai-presence path:nth-of-type(3){
-    stroke-dasharray:134;
-    stroke-dashoffset:0;
+    stroke-dasharray:100%;
   }
 .ndl-ai-presence.ndl-thinking path:nth-of-type(2){
       animation:draw var(--animation-duration) linear infinite;
@@ -7940,42 +7947,42 @@ button.ndl-avatar:focus-visible {
     }
 @keyframes draw{
     0%{
-      stroke-dashoffset:134;
+      stroke-dashoffset:100%;
     }
     10%{
-      stroke-dashoffset:67;
+      stroke-dashoffset:50%;
     }
     25%{
-      stroke-dashoffset:0;
+      stroke-dashoffset:0%;
     }
     40%{
-      stroke-dashoffset:-54;
+      stroke-dashoffset:-40%;
     }
     50%{
-      stroke-dashoffset:-134;
+      stroke-dashoffset:-100%;
     }
     100%{
-      stroke-dashoffset:-134;
+      stroke-dashoffset:-100%;
     }
   }
 @keyframes draw-reverse{
     0%{
-      stroke-dashoffset:134;
+      stroke-dashoffset:100%;
     }
     50%{
-      stroke-dashoffset:134;
+      stroke-dashoffset:100%;
     }
     60%{
-      stroke-dashoffset:67;
+      stroke-dashoffset:50%;
     }
     75%{
-      stroke-dashoffset:0;
+      stroke-dashoffset:0%;
     }
     90%{
-      stroke-dashoffset:-54;
+      stroke-dashoffset:-40%;
     }
     100%{
-      stroke-dashoffset:-134;
+      stroke-dashoffset:-100%;
     }
   }
 @keyframes pulse{
@@ -8779,144 +8786,937 @@ button.ndl-avatar:focus-visible {
   letter-spacing:var(--typography-body-medium-letter-spacing);
   font-family:var(--typography-body-medium-font-family), sans-serif;
 }
-.ndl-switch-label.ndl-fluid {
+.ndl-switch-label.ndl-fluid {
+  display:flex;
+  width:100%;
+}
+.ndl-switch-label:has(.ndl-switch:disabled) .ndl-switch-label-text {
+  cursor:not-allowed;
+  color:var(--theme-color-neutral-text-weakest);
+}
+.ndl-switch{
+  --thumb-size:12px;
+  --track-height:20px;
+  --track-width:36px;
+  --track-padding-left:3px;
+  --track-padding-right:1px;
+  --switch-checkmark-color:var(--theme-color-primary-text);
+  position:relative;
+  display:grid;
+  width:16px;
+  height:16px;
+  flex-shrink:0;
+  cursor:pointer;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  align-items:center;
+  border-radius:9999px;
+  border-width:1px;
+  border-style:solid;
+  border-color:var(--theme-color-neutral-border-strongest);
+  background-color:var(--theme-color-neutral-bg-weak);
+
+  grid:[track] 1fr / [track] 1fr;
+  padding-left:var(--track-padding-left);
+  padding-right:var(--track-padding-right);
+  touch-action:pan-y;
+  pointer-events:auto;
+  box-sizing:border-box;
+  transition:background-color var(--motion-transition-quick), box-shadow var(--motion-transition-quick);
+  box-shadow:0 0 0 0 transparent;
+
+  inline-size:var(--track-width);
+  block-size:var(--track-width);
+  height:var(--track-height);
+}
+.ndl-switch:disabled {
+  cursor:not-allowed;
+  border-color:var(--theme-color-neutral-bg-strong);
+  background-color:var(--theme-color-neutral-bg-strong);
+  outline-width:0px;
+}
+.ndl-switch:not(:disabled):hover:checked{
+      box-shadow:0 0 0 4px var(--theme-color-primary-hover-weak);
+    }
+.ndl-switch:not(:disabled):hover:not(:checked){
+      box-shadow:0 0 0 4px var(--theme-color-neutral-hover);
+    }
+.ndl-switch:not(:disabled):hover:active:not(:checked){
+      box-shadow:0 0 0 4px var(--theme-color-neutral-pressed);
+    }
+.ndl-switch:not(:disabled):hover:active:checked{
+      box-shadow:0 0 0 4px var(--theme-color-primary-pressed-weak);
+    }
+.ndl-switch:not(:disabled):hover:focus-visible {
+  outline-style:solid;
+  outline-width:2px;
+  outline-offset:0px;
+  outline-color:var(--theme-color-primary-focus);
+}
+.ndl-switch::before{
+    inline-size:var(--thumb-size);
+    block-size:var(--thumb-size);
+
+    transition:transform var(--motion-transition-quick), width var(--motion-transition-quick), height var(--motion-transition-quick), background-color var(--motion-transition-quick);
+    content:'';
+    grid-area:track;
+    transform:translateX(0);
+    border-radius:9999px;
+    background-color:var(--theme-color-neutral-bg-weak);
+  }
+.ndl-switch:not(:disabled):not(:checked)::before {
+  background-color:var(--theme-color-neutral-bg-stronger);
+}
+.ndl-switch:disabled::before{
+    box-shadow:none;
+  }
+.ndl-switch::after{
+    content:'';
+    opacity:0;
+  }
+.ndl-switch:checked::after{
+    content:'';
+    opacity:1;
+    position:absolute;
+    top:50%;
+    left:calc(
+      var(--track-padding-left) + var(--track-width) - var(--thumb-size) -
+        (var(--track-padding-left) + 1px) - (var(--track-padding-right) + 1px) +
+        var(--thumb-size) / 2
+    );
+    transform:translate(-50%, -50%);
+    transition:opacity var(--motion-transition-quick);
+    width:12px;
+    height:12px;
+    background-color:var(--switch-checkmark-color);
+    -webkit-mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+            mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    -webkit-mask-repeat:no-repeat;
+            mask-repeat:no-repeat;
+    -webkit-mask-size:12px;
+            mask-size:12px;
+    -webkit-mask-position:center;
+            mask-position:center;
+  }
+.ndl-switch:checked {
+  border-color:var(--theme-color-primary-icon);
+  background-color:var(--theme-color-primary-icon);
+    --thumb-size:16px;
+}
+.ndl-switch:checked::before{
+      transform:translateX(
+        calc(
+          var(--track-width) - var(--thumb-size) -
+            (var(--track-padding-left) + 1px) -
+            (var(--track-padding-right) + 1px)
+        )
+      );
+    }
+.ndl-switch:indeterminate::before{
+      transform:translateX(
+        calc(
+          (
+              var(--track-width) - var(--thumb-size) -
+                (var(--track-padding-left) + 1px) * 2
+            ) *
+            0.5
+        )
+      );
+    }
+.ndl-ai-prompt {
+  display:flex;
+  width:100%;
+  flex-direction:column;
+  align-items:center;
+  gap:4px;
+
+  max-width:var(--content-extra-light-max-width);
+}
+.ndl-ai-prompt .ndl-ai-prompt-wrapper {
+  width:100%;
+  border-radius:14px;
+  border-width:1px;
+  border-style:solid;
+  border-color:var(--theme-color-neutral-border-weak);
+  background-color:var(--theme-color-primary-bg-weak);
+  padding:3px;
+}
+.ndl-ai-prompt .ndl-ai-prompt-wrapper-inner {
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+  border-radius:12px;
+  padding:6px;
+
+    border:solid 1px transparent;
+    background:conic-gradient(var(--theme-color-neutral-bg-weak) 0 0) padding-box, linear-gradient(
+          var(--palette-baltic-40),
+          var(--theme-color-neutral-bg-weak)
+        ) border-box;
+}
+.ndl-ai-prompt .ndl-ai-prompt-textarea {
+  box-sizing:border-box;
+  resize:none;
+  background-color:transparent;
+  padding-left:6px;
+  padding-right:6px;
+  padding-top:6px;
+  font:var(--typography-body-medium);
+  letter-spacing:var(--typography-body-medium-letter-spacing);
+  font-family:var(--typography-body-medium-font-family), sans-serif;
+}
+.ndl-ai-prompt .ndl-ai-prompt-textarea:focus {
+  outline:2px solid transparent;
+  outline-offset:2px;
+}
+.ndl-ai-prompt:has(.ndl-ai-prompt-textarea-above) .ndl-ai-prompt-textarea{
+    padding-top:0px;
+  }
+.ndl-ai-prompt .ndl-ai-prompt-textarea-above {
+  display:flex;
+  flex-direction:row;
+  flex-wrap:wrap;
+  gap:6px;
+    max-height:calc(2 * 56px + 2 * var(--space-6));
+    overflow-y:hidden;
+    align-content:flex-start;
+    min-height:0;
+}
+.ndl-ai-prompt .ndl-ai-prompt-textarea-above.ndl-can-scroll{
+      overflow-y:auto;
+    }
+.ndl-ai-prompt .ndl-ai-prompt-textarea-below {
+  display:flex;
+  align-items:flex-end;
+  justify-content:space-between;
+  gap:4px;
+}
+.ndl-ai-prompt .ndl-ai-prompt-textarea-below .ndl-ai-prompt-textarea-below-leading {
+  display:flex;
+  flex-wrap:wrap;
+  align-items:center;
+  gap:8px;
+}
+.ndl-ai-prompt .ndl-ai-prompt-footer {
+  color:var(--theme-color-neutral-text-weaker);
+}
+.ndl-ai-prompt .ndl-ai-prompt-submit-button {
+  position:relative;
+  margin-left:auto;
+}
+.ndl-ai-prompt .ndl-ai-prompt-submit-button:not(:disabled):not(.ndl-loading) {
+  background-color:var(--theme-color-primary-bg-weak);
+}
+.ndl-ai-prompt .ndl-ai-prompt-submit-button:not(:disabled):not(.ndl-loading):hover:not(.ndl-floating) {
+  background-color:var(--theme-color-primary-hover-weak);
+}
+.ndl-ai-prompt .ndl-ai-prompt-submit-button:not(:disabled):not(.ndl-loading):active:not(.ndl-floating) {
+  background-color:var(--theme-color-primary-pressed-weak);
+}
+.ndl-ai-prompt .ndl-ai-prompt-submit-button:not(:disabled):not(.ndl-loading) .ndl-icon-svg {
+  color:var(--theme-color-primary-text);
+}
+.ndl-ai-prompt .ndl-ai-prompt-submit-button .ndl-icon-svg {
+  transition-duration:250ms;
+  transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1);
+      transition-property:opacity, transform;
+}
+.ndl-ai-prompt .ndl-ai-prompt-dropdown-button {
+  border-color:transparent;
+  background-color:var(--theme-color-neutral-bg-on-bg-weak);
+}
+.ndl-ai-prompt .ndl-ai-prompt-dropdown-button:hover {
+  background-color:var(--theme-color-neutral-hover);
+}
+.ndl-ai-prompt .ndl-ai-prompt-dropdown-button:active {
+  background-color:var(--theme-color-neutral-pressed);
+}
+.ndl-ai-prompt .ndl-ai-prompt-file-tag {
+  display:flex;
+  height:56px;
+  width:100%;
+  max-width:240px;
+  align-items:flex-start;
+  border-radius:12px;
+  border-width:1px;
+  border-color:var(--theme-color-neutral-border-strong);
+}
+.ndl-ai-prompt .ndl-ai-prompt-file-tag .ndl-ai-prompt-file-tag-content {
+  display:flex;
+  min-width:0px;
+  flex-direction:column;
+  padding:8px;
+  font:var(--typography-body-medium);
+  letter-spacing:var(--typography-body-medium-letter-spacing);
+  font-family:var(--typography-body-medium-font-family), sans-serif;
+}
+.ndl-ai-prompt .ndl-ai-prompt-file-tag .ndl-ai-prompt-file-tag-content .ndl-ai-prompt-file-tag-content-title {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  color:var(--theme-color-neutral-text-default);
+}
+.ndl-ai-prompt .ndl-ai-prompt-file-tag .ndl-ai-prompt-file-tag-content .ndl-ai-prompt-file-tag-content-type {
+  color:var(--theme-color-neutral-text-weaker);
+}
+.ndl-ai-prompt .ndl-ai-prompt-file-tag .ndl-ai-prompt-file-tag-remove {
+  margin-left:auto;
+  margin-right:2px;
+  margin-top:2px;
+  flex-shrink:0;
+}
+.ndl-ai-prompt .ndl-ai-prompt-file-tag .ndl-ai-prompt-file-tag-leading {
+  margin-left:8px;
+  display:flex;
+  width:40px;
+  height:40px;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  align-self:center;
+  border-radius:10px;
+  background-color:var(--theme-color-neutral-bg-strong);
+  padding:10px;
+  color:var(--theme-color-neutral-icon);
+}
+.ndl-ai-prompt .ndl-ai-prompt-image-tag {
+  position:relative;
+  width:56px;
+  height:56px;
+  overflow:hidden;
+  border-radius:12px;
+}
+.ndl-ai-prompt .ndl-ai-prompt-image-tag img {
+  height:100%;
+  width:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+  -o-object-position:center;
+     object-position:center;
+}
+.ndl-ai-prompt .ndl-ai-prompt-image-tag .ndl-ai-prompt-image-tag-loading-overlay {
+  position:absolute;
+  inset:0px;
+  z-index:10;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background-color:var(--theme-color-neutral-bg-default);
+  opacity:0.8;
+}
+.ndl-ai-prompt .ndl-ai-prompt-image-tag .ndl-ai-prompt-image-tag-remove {
+  position:absolute;
+  top:2px;
+  right:2px;
+}
+.ndl-ai-prompt .ndl-ai-prompt-image-tag .ndl-ai-prompt-image-tag-remove-wrapper {
+  position:absolute;
+  top:2px;
+  right:2px;
+  width:28px;
+  height:28px;
+  border-radius:6px;
+  background-color:var(--theme-color-neutral-bg-default);
+  opacity:0.7;
+}
+.ndl-ai-code-preview {
+  display:flex;
+  flex-direction:column;
+  overflow:hidden;
+  border-radius:8px;
+  border-width:2px;
+  border-color:var(--theme-color-neutral-border-weak);
+  background-color:var(--theme-color-neutral-bg-on-bg-weak);
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-header {
+  display:flex;
+  min-height:44px;
+  align-items:center;
+  justify-content:space-between;
+  padding:12px;
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-header .ndl-ai-code-preview-title {
+  display:flex;
+  align-items:center;
+  gap:8px;
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-header .ndl-ai-code-preview-title span {
+  text-transform:uppercase;
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-header .ndl-ai-code-preview-title .ndl-status-label {
+  height:auto !important;
+  padding-top:2px !important;
+  padding-bottom:2px !important;
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-header .ndl-ai-code-preview-actions {
+  display:flex;
+  align-items:center;
+  gap:4px;
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-content {
+  position:relative;
+  border-top-width:1px;
+  border-color:var(--theme-color-neutral-border-weak);
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-content .ndl-code-content-container {
+  display:flex;
+  flex-shrink:0;
+  flex-grow:1;
+      width:calc(100% - 4px);
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-footer {
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  border-top-width:1px;
+  border-color:var(--theme-color-neutral-border-weak);
+  padding-left:16px;
+  padding-right:16px;
+  padding-top:8px;
+  padding-bottom:8px;
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-footer.ndl-executed {
+  justify-content:flex-end;
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-footer .ndl-text {
+  font-size:0.875rem;
+  line-height:1.25rem;
+  color:var(--theme-color-neutral-text-default);
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-footer .ndl-success {
+  display:flex;
+  align-items:center;
+  gap:8px;
+  color:var(--theme-color-success-text);
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-footer .ndl-success span {
+  font-size:0.875rem;
+  line-height:1.25rem;
+  font-weight:500;
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-footer .ndl-actions {
+  display:flex;
+  align-items:center;
+  gap:8px;
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-footer .ndl-actions .ndl-run-query-btn {
+  cursor:pointer;
+  border-style:none;
+  background-color:transparent;
+  padding:0px;
+}
+.ndl-ai-code-preview .ndl-ai-code-preview-footer .ndl-actions .ndl-run-query-btn .ndl-status-label:hover {
+  opacity:0.9;
+}
+.ndl-ai-response ul {
+  margin-top:16px;
+  margin-bottom:16px;
+  list-style-type:none;
+  padding-left:20px;
+}
+.ndl-ai-response ul > li {
+  position:relative;
+  padding-left:16px;
+}
+.ndl-ai-response ul > li::before{
+        content:'';
+        position:absolute;
+        left:0px;
+        top:0.6em;
+        height:6px;
+        width:6px;
+        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23212325' stroke='%235E636A' stroke-width='2'/%3E%3C/svg%3E");
+        background-repeat:no-repeat;
+        background-size:contain;
+      }
+.ndl-ai-response ol {
+  margin-top:16px;
+  margin-bottom:16px;
+  list-style-type:none;
+  padding-left:20px;
+}
+.ndl-ai-response ol > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse:0;
+  margin-top:calc(24px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom:calc(24px * var(--tw-space-y-reverse));
+}
+.ndl-ai-response ol{
+    counter-reset:item;
+  }
+.ndl-ai-response ol > li {
+  position:relative;
+  padding-left:32px;
+  line-height:1.75rem;
+      counter-increment:item;
+}
+.ndl-ai-response ol > li::before{
+        content:counter(item);
+        position:absolute;
+        left:0px;
+        top:0px;
+        display:flex;
+        align-items:center;
+        justify-content:center;
+        height:28px;
+        padding-left:8px;
+        padding-right:8px;
+        border-radius:4px;
+        border-width:1px;
+        border-style:solid;
+        border-color:var(--theme-color-neutral-border-weak);
+        background-color:#81879014;
+  font:var(--typography-body-medium);
+  letter-spacing:var(--typography-body-medium-letter-spacing);
+  font-family:var(--typography-body-medium-font-family), sans-serif;
+      }
+.ndl-ai-response .ndl-ai-code-block {
+  margin-top:16px;
+  margin-bottom:16px;
+}
+.ndl-ai-response table {
+  margin-top:16px;
+  margin-bottom:16px;
+  border-collapse:separate;
+  --tw-border-spacing-x:0px;
+  --tw-border-spacing-y:0px;
+  border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+.ndl-ai-response table th {
+  border-top-width:1px;
+  border-bottom-width:1px;
+  border-style:solid;
+  border-color:var(--theme-color-neutral-border-weak);
+  background-color:var(--theme-color-neutral-bg-default);
+  padding-left:16px;
+  padding-right:16px;
+  padding-top:10px;
+  padding-bottom:10px;
+  color:var(--theme-color-neutral-text-weaker);
+}
+.ndl-ai-response table th:first-child {
+  border-top-left-radius:8px;
+  border-width:1px;
+  border-style:solid;
+  border-color:var(--theme-color-neutral-border-weak);
+}
+.ndl-ai-response table th:last-child {
+  border-top-right-radius:8px;
+  border-width:1px;
+  border-style:solid;
+  border-color:var(--theme-color-neutral-border-weak);
+}
+.ndl-ai-response table tr td {
+  border-left-width:1px;
+  border-top-width:1px;
+  border-bottom-width:1px;
+  border-style:solid;
+  border-color:var(--theme-color-neutral-border-weak);
+  background-color:var(--theme-color-neutral-bg-weak);
+  padding-left:16px;
+  padding-right:16px;
+  padding-top:10px;
+  padding-bottom:10px;
+  color:var(--theme-color-neutral-text-default);
+}
+.ndl-ai-response table tr td:last-child {
+  border-right-width:1px;
+  border-style:solid;
+  border-color:var(--theme-color-neutral-border-weak);
+}
+.ndl-ai-response table tr:last-child td:first-child {
+  border-bottom-left-radius:8px;
+  border-width:1px;
+  border-style:solid;
+  border-color:var(--theme-color-neutral-border-weak);
+}
+.ndl-ai-response table tr:last-child td:last-child {
+  border-bottom-right-radius:8px;
+  border-width:1px;
+  border-style:solid;
+  border-color:var(--theme-color-neutral-border-weak);
+}
+.ndl-ai-user-bubble {
+  margin-left:auto;
+  display:flex;
+  width:-moz-fit-content;
+  width:fit-content;
+  flex-direction:row;
+  align-items:flex-start;
+  gap:12px;
+  border-radius:12px;
+  border-top-right-radius:4px;
+  background-color:var(--theme-color-neutral-bg-strong);
+  padding-top:8px;
+  padding-bottom:8px;
+  padding-left:12px;
+  padding-right:8px;
+  color:var(--theme-color-neutral-text-default);
+  max-width:540px;
+}
+.ndl-ai-user-bubble .ndl-ai-user-bubble-avatar {
+  margin-top:2px;
+  margin-bottom:2px;
+  flex-shrink:0;
+  align-self:flex-start;
+}
+.ndl-ai-user-bubble .ndl-ai-user-bubble-content {
+  margin-top:4px;
+  margin-bottom:4px;
+}
+.ndl-ai-user-bubble .ndl-ai-user-bubble-trailing {
+  margin-left:auto;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  align-self:flex-start;
+}
+.ndl-ai-user-bubble .ndl-ai-user-bubble-trailing .ndl-icon-btn{
+      --icon-button-size:28px;
+      --icon-button-icon-size:var(--space-16);
+      --icon-button-border-radius:6px;
+    }
+.ndl-ai-more-files {
+  display:flex;
+  width:-moz-fit-content;
+  width:fit-content;
+  align-items:center;
+  justify-content:center;
+  border-radius:8px;
+  border-width:1px;
+  border-color:var(--theme-color-neutral-border-weak);
+  background-color:var(--theme-color-neutral-bg-weak);
+  padding-left:8px;
+  padding-right:8px;
+  padding-top:6px;
+  padding-bottom:6px;
+  color:var(--theme-color-neutral-text-default);
+  font:var(--typography-body-medium);
+  letter-spacing:var(--typography-body-medium-letter-spacing);
+  font-family:var(--typography-body-medium-font-family), sans-serif;
+}
+.ndl-ai-more-files:hover {
+  background-color:var(--theme-color-neutral-hover);
+}
+.ndl-ai-more-files:active {
+  background-color:var(--theme-color-neutral-pressed);
+}
+.ndl-ai-more-files{
+  min-width:var(--space-32);
+}
+.ndl-ai-more-files.ndl-active {
+  background-color:var(--theme-color-neutral-pressed);
+}
+.ndl-ai-file-tag {
+  display:flex;
+  height:56px;
+  width:100%;
+  max-width:240px;
+  align-items:flex-start;
+  border-radius:12px;
+  border-width:1px;
+  border-color:var(--theme-color-neutral-border-strong);
+  text-align:start;
+}
+.ndl-ai-file-tag .ndl-ai-file-tag-content {
+  display:flex;
+  min-width:0px;
+  flex-direction:column;
+  align-self:center;
+  padding-left:8px;
+  padding-right:8px;
+  font:var(--typography-body-medium);
+  letter-spacing:var(--typography-body-medium-letter-spacing);
+  font-family:var(--typography-body-medium-font-family), sans-serif;
+}
+.ndl-ai-file-tag .ndl-ai-file-tag-content .ndl-ai-file-tag-content-title {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  color:var(--theme-color-neutral-text-default);
+}
+.ndl-ai-file-tag .ndl-ai-file-tag-content .ndl-ai-file-tag-content-type {
+  color:var(--theme-color-neutral-text-weaker);
+}
+.ndl-ai-file-tag .ndl-ai-file-tag-remove {
+  margin-left:auto;
+  margin-right:2px;
+  margin-top:2px;
+  flex-shrink:0;
+}
+.ndl-ai-file-tag .ndl-ai-file-tag-leading {
+  margin-left:8px;
+  display:flex;
+  width:40px;
+  height:40px;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  align-self:center;
+  border-radius:10px;
+  background-color:var(--theme-color-neutral-bg-strong);
+  padding:10px;
+  color:var(--theme-color-neutral-icon);
+}
+.ndl-ai-file-tag .ndl-ai-file-tag-leading .ndl-icon-svg {
+  width:20px;
+  height:20px;
+}
+.ndl-ai-image-tag {
+  position:relative;
+  width:56px;
+  height:56px;
+  overflow:hidden;
+  border-radius:12px;
+}
+.ndl-ai-image-tag img {
+  height:100%;
+  width:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+  -o-object-position:center;
+     object-position:center;
+}
+.ndl-ai-image-tag .ndl-ai-image-tag-loading-overlay {
+  position:absolute;
+  inset:0px;
+  z-index:10;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background-color:var(--theme-color-neutral-bg-default);
+  opacity:0.6;
+}
+.ndl-ai-image-tag .ndl-ai-image-tag-remove {
+  position:absolute;
+  top:2px;
+  right:2px;
+  z-index:20;
+}
+.ndl-ai-image-tag .ndl-ai-image-tag-remove-wrapper {
+  position:absolute;
+  top:2px;
+  right:2px;
+  z-index:20;
+  width:28px;
+  height:28px;
+  border-radius:6px;
+  background-color:var(--theme-color-neutral-bg-default);
+  opacity:0.8;
+}
+@property --ndl-ai-suggestion-angle{
+  syntax:'<angle>';
+  initial-value:0deg;
+  inherits:false;
+}
+.ndl-ai-suggestion {
+  position:relative;
+  height:-moz-fit-content;
+  height:fit-content;
+  width:-moz-fit-content;
+  width:fit-content;
+  overflow:hidden;
+  border-radius:6px;
+  border-width:1px;
+  border-color:var(--theme-color-neutral-border-weak);
+  background-color:var(--theme-color-neutral-bg-weak);
+  text-align:start;
+  color:var(--theme-color-neutral-text-default);
+  font:var(--typography-body-medium);
+  letter-spacing:var(--typography-body-medium-letter-spacing);
+  font-family:var(--typography-body-medium-font-family), sans-serif;
+
+  --ndl-ai-suggestion-background:var(--theme-color-neutral-bg-weak);
+  --ndl-ai-suggestion-padding-x:var(--space-8);
+  --ndl-ai-suggestion-padding-y:var(--space-4);
+  background:var(theme-color-neutral-bg-weak);
+}
+.ndl-ai-suggestion:not(.ndl-disabled):hover{
+      --ndl-ai-suggestion-background:var(--theme-color-neutral-hover);
+    }
+.ndl-ai-suggestion:not(.ndl-disabled):active{
+      --ndl-ai-suggestion-background:var(--theme-color-neutral-pressed);
+    }
+.ndl-ai-suggestion .ndl-ai-suggestion-inner {
   display:flex;
-  width:100%;
+  align-items:center;
+  gap:6px;
+    padding-left:var(--ndl-ai-suggestion-padding-x);
+    padding-right:var(--ndl-ai-suggestion-padding-x);
+    padding-top:var(--ndl-ai-suggestion-padding-y);
+    padding-bottom:var(--ndl-ai-suggestion-padding-y);
+    background:var(--ndl-ai-suggestion-background);
 }
-.ndl-switch-label:has(.ndl-switch:disabled) .ndl-switch-label-text {
+.ndl-ai-suggestion.ndl-disabled {
   cursor:not-allowed;
   color:var(--theme-color-neutral-text-weakest);
 }
-.ndl-switch{
-  --thumb-size:12px;
-  --track-height:20px;
-  --track-width:36px;
-  --track-padding-left:3px;
-  --track-padding-right:1px;
-  --switch-checkmark-color:var(--theme-color-primary-text);
-  position:relative;
-  display:grid;
+.ndl-ai-suggestion.ndl-large{
+    --ndl-ai-suggestion-padding-x:var(--space-12);
+    --ndl-ai-suggestion-padding-y:var(--space-6);
+  }
+.ndl-ai-suggestion.ndl-small{
+    --ndl-ai-suggestion-padding-x:var(--space-8);
+    --ndl-ai-suggestion-padding-y:var(--space-4);
+  }
+.ndl-ai-suggestion .ndl-ai-suggestion-leading {
   width:16px;
   height:16px;
   flex-shrink:0;
-  cursor:pointer;
-  -webkit-appearance:none;
-     -moz-appearance:none;
-          appearance:none;
-  align-items:center;
-  border-radius:9999px;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  color:var(--theme-color-neutral-icon);
+}
+.ndl-ai-suggestion.ndl-ai-suggestion-special{
+    border-color:transparent;
+
+    background:linear-gradient(var(--theme-color-neutral-bg-weak)) padding-box, conic-gradient(
+          from var(--ndl-ai-suggestion-angle),
+          var(--theme-color-neutral-border-weak) 0%,
+          var(--theme-color-primary-border-strong) 15%,
+          var(--theme-color-primary-border-strong) 45%,
+          var(--theme-color-neutral-border-weak) 60%
+        ) border-box;
+    animation:ndl-ai-suggestion-border-rotate 3.5s linear infinite;
+  }
+@keyframes ndl-ai-suggestion-border-rotate{
+  0%{
+    --ndl-ai-suggestion-angle:0deg;
+  }
+  100%{
+    --ndl-ai-suggestion-angle:360deg;
+  }
+}
+@keyframes ndl-ai-reasoning-text-wave{
+  0%{
+    background-position:100% 0;
+  }
+  100%{
+    background-position:-100% 0;
+  }
+}
+.ndl-ai-reasoning {
+  overflow:hidden;
+  border-radius:8px;
   border-width:1px;
-  border-style:solid;
-  border-color:var(--theme-color-neutral-border-strongest);
+  border-color:var(--theme-color-neutral-border-weak);
   background-color:var(--theme-color-neutral-bg-weak);
-
-  grid:[track] 1fr / [track] 1fr;
-  padding-left:var(--track-padding-left);
-  padding-right:var(--track-padding-right);
-  touch-action:pan-y;
-  pointer-events:auto;
-  box-sizing:border-box;
-  transition:background-color var(--motion-transition-quick), box-shadow var(--motion-transition-quick);
-  box-shadow:0 0 0 0 transparent;
-
-  inline-size:var(--track-width);
-  block-size:var(--track-width);
-  height:var(--track-height);
+  color:var(--theme-color-neutral-text-default);
 }
-.ndl-switch:disabled {
-  cursor:not-allowed;
-  border-color:var(--theme-color-neutral-bg-strong);
-  background-color:var(--theme-color-neutral-bg-strong);
-  outline-width:0px;
+.ndl-ai-reasoning .ndl-ai-reasoning-header {
+  display:flex;
+  min-height:52px;
+  align-items:center;
+  gap:12px;
+  padding:12px;
 }
-.ndl-switch:not(:disabled):hover:checked{
-      box-shadow:0 0 0 4px var(--theme-color-primary-hover-weak);
-    }
-.ndl-switch:not(:disabled):hover:not(:checked){
-      box-shadow:0 0 0 4px var(--theme-color-neutral-hover);
-    }
-.ndl-switch:not(:disabled):hover:active:not(:checked){
-      box-shadow:0 0 0 4px var(--theme-color-neutral-pressed);
-    }
-.ndl-switch:not(:disabled):hover:active:checked{
-      box-shadow:0 0 0 4px var(--theme-color-primary-pressed-weak);
-    }
-.ndl-switch:not(:disabled):hover:focus-visible {
-  outline-style:solid;
+.ndl-ai-reasoning .ndl-ai-reasoning-header:focus-visible {
   outline-width:2px;
   outline-offset:0px;
   outline-color:var(--theme-color-primary-focus);
 }
-.ndl-switch::before{
-    inline-size:var(--thumb-size);
-    block-size:var(--thumb-size);
+.ndl-ai-reasoning .ndl-ai-reasoning-header .ndl-ai-reasoning-header-text {
+  color:var(--theme-color-neutral-text-default);
 
-    transition:transform var(--motion-transition-quick), width var(--motion-transition-quick), height var(--motion-transition-quick), background-color var(--motion-transition-quick);
-    content:'';
-    grid-area:track;
-    transform:translateX(0);
-    border-radius:9999px;
-    background-color:var(--theme-color-neutral-bg-weak);
-  }
-.ndl-switch:not(:disabled):not(:checked)::before {
-  background-color:var(--theme-color-neutral-bg-stronger);
+      background:linear-gradient(
+        90deg,
+        var(--theme-color-neutral-text-default) 0%,
+        var(--theme-color-neutral-text-default) 37%,
+        var(--theme-color-neutral-bg-stronger) 50%,
+        var(--theme-color-neutral-text-default) 63%,
+        var(--theme-color-neutral-text-default) 100%
+      );
+      background-size:200% 100%;
+      background-clip:text;
+      -webkit-background-clip:text;
+      color:transparent;
+      animation:ndl-ai-reasoning-text-wave 2s linear infinite;
 }
-.ndl-switch:disabled::before{
-    box-shadow:none;
-  }
-.ndl-switch::after{
-    content:'';
-    opacity:0;
-  }
-.ndl-switch:checked::after{
-    content:'';
-    opacity:1;
-    position:absolute;
-    top:50%;
-    left:calc(
-      var(--track-padding-left) + var(--track-width) - var(--thumb-size) -
-        (var(--track-padding-left) + 1px) - (var(--track-padding-right) + 1px) +
-        var(--thumb-size) / 2
-    );
-    transform:translate(-50%, -50%);
-    transition:opacity var(--motion-transition-quick);
-    width:12px;
-    height:12px;
-    background-color:var(--switch-checkmark-color);
-    -webkit-mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-            mask-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-    -webkit-mask-repeat:no-repeat;
-            mask-repeat:no-repeat;
-    -webkit-mask-size:12px;
-            mask-size:12px;
-    -webkit-mask-position:center;
-            mask-position:center;
-  }
-.ndl-switch:checked {
-  border-color:var(--theme-color-primary-icon);
-  background-color:var(--theme-color-primary-icon);
-    --thumb-size:16px;
+.ndl-ai-reasoning .ndl-ai-reasoning-expand-button {
+  margin-left:auto;
 }
-.ndl-switch:checked::before{
-      transform:translateX(
-        calc(
-          var(--track-width) - var(--thumb-size) -
-            (var(--track-padding-left) + 1px) -
-            (var(--track-padding-right) + 1px)
-        )
-      );
-    }
-.ndl-switch:indeterminate::before{
-      transform:translateX(
-        calc(
-          (
-              var(--track-width) - var(--thumb-size) -
-                (var(--track-padding-left) + 1px) * 2
-            ) *
-            0.5
-        )
-      );
+.ndl-ai-reasoning .ndl-ai-reasoning-expand-button.ndl-expanded .ndl-icon-svg{
+        transform:scaleY(-1);
+        transition:transform var(--motion-transition-quick);
+      }
+.ndl-ai-reasoning .ndl-ai-reasoning-content {
+  display:grid;
+    grid-template-rows:0fr;
+    transition:grid-template-rows var(--motion-transition-quick);
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-content.ndl-expanded{
+      grid-template-rows:1fr;
+      border-top-width:1px;
+      border-style:solid;
+      border-color:var(--theme-color-neutral-border-weak);
     }
+.ndl-ai-reasoning .ndl-ai-reasoning-content .ndl-ai-reasoning-content-inner {
+  overflow:hidden;
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-content .ndl-ai-reasoning-content-inner .ndl-ai-reasoning-content-inner-2 {
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+  padding:12px;
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-section {
+  width:100%;
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-section .ndl-ai-reasoning-section-header {
+  display:flex;
+  width:100%;
+  align-items:center;
+  gap:12px;
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-section .ndl-ai-reasoning-section-header .ndl-ai-reasoning-section-leading {
+  width:16px;
+  height:16px;
+  flex-shrink:0;
+  color:var(--theme-color-neutral-icon);
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-section .ndl-ai-reasoning-section-header .ndl-ai-reasoning-section-icon {
+  margin-left:auto;
+  flex-shrink:0;
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-section .ndl-ai-reasoning-section-content {
+  display:grid;
+      grid-template-rows:0fr;
+      transition:grid-template-rows var(--motion-transition-quick);
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-section .ndl-ai-reasoning-section-content.ndl-expanded{
+        grid-template-rows:1fr;
+      }
+.ndl-ai-reasoning .ndl-ai-reasoning-section .ndl-ai-reasoning-section-content .ndl-ai-reasoning-section-content-inner {
+  overflow:hidden;
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-section .ndl-ai-reasoning-section-content .ndl-ai-reasoning-section-content-inner .ndl-ai-reasoning-section-content-inner-2 {
+  display:flex;
+  gap:12px;
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-section .ndl-ai-reasoning-section-content .ndl-ai-reasoning-section-content-inner .ndl-ai-reasoning-section-content-inner-2 .ndl-ai-reasoning-section-content-line-container {
+  display:flex;
+  width:16px;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-section .ndl-ai-reasoning-section-content .ndl-ai-reasoning-section-content-inner .ndl-ai-reasoning-section-content-inner-2 .ndl-ai-reasoning-section-content-line-container .ndl-ai-reasoning-section-content-line {
+  height:100%;
+  width:1px;
+  background-color:var(--theme-color-neutral-border-weak);
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-section .ndl-ai-reasoning-section-content .ndl-ai-reasoning-section-content-inner .ndl-ai-reasoning-section-content-inner-2 .ndl-ai-reasoning-section-content-children {
+  flex:1 1 0%;
+  padding-top:12px;
+  padding-bottom:12px;
+  color:var(--theme-color-neutral-text-weak);
+  font:var(--typography-body-small);
+  letter-spacing:var(--typography-body-small-letter-spacing);
+  font-family:var(--typography-body-small-font-family), sans-serif;
+}
 .n-fixed {
   position:fixed;
 }
@@ -8998,12 +9798,18 @@ button.ndl-avatar:focus-visible {
 .n-ml-7 {
   margin-left:28px;
 }
+.n-ml-auto {
+  margin-left:auto;
+}
 .n-mr-token-8 {
   margin-right:8px;
 }
 .n-mt-5 {
   margin-top:20px;
 }
+.n-mt-auto {
+  margin-top:auto;
+}
 .n-mt-token-16 {
   margin-top:16px;
 }
@@ -9019,6 +9825,9 @@ button.ndl-avatar:focus-visible {
 .n-flex {
   display:flex;
 }
+.n-inline-flex {
+  display:inline-flex;
+}
 .n-table {
   display:table;
 }
@@ -9047,6 +9856,10 @@ button.ndl-avatar:focus-visible {
   width:100%;
   height:100%;
 }
+.n-size-token-16 {
+  width:16px;
+  height:16px;
+}
 .n-size-token-24 {
   width:24px;
   height:24px;
@@ -9106,6 +9919,9 @@ button.ndl-avatar:focus-visible {
 .n-h-full {
   height:100%;
 }
+.n-h-screen {
+  height:100vh;
+}
 .n-h-token-12 {
   height:12px;
 }
@@ -9145,6 +9961,9 @@ button.ndl-avatar:focus-visible {
 .n-w-\[300px\] {
   width:300px;
 }
+.n-w-\[440px\] {
+  width:440px;
+}
 .n-w-fit {
   width:-moz-fit-content;
   width:fit-content;
@@ -9180,6 +9999,9 @@ button.ndl-avatar:focus-visible {
 .n-max-w-\[600px\] {
   max-width:600px;
 }
+.n-max-w-\[85\%\] {
+  max-width:85%;
+}
 .n-max-w-max {
   max-width:-moz-max-content;
   max-width:max-content;
@@ -9193,6 +10015,9 @@ button.ndl-avatar:focus-visible {
 .n-shrink-0 {
   flex-shrink:0;
 }
+.n-grow {
+  flex-grow:1;
+}
 .n-table-auto {
   table-layout:auto;
 }
@@ -9255,6 +10080,12 @@ button.ndl-avatar:focus-visible {
 .n-items-center {
   align-items:center;
 }
+.n-justify-start {
+  justify-content:flex-start;
+}
+.n-justify-end {
+  justify-content:flex-end;
+}
 .n-justify-center {
   justify-content:center;
 }
@@ -9267,6 +10098,12 @@ button.ndl-avatar:focus-visible {
 .n-gap-1 {
   gap:4px;
 }
+.n-gap-1\.5 {
+  gap:6px;
+}
+.n-gap-12 {
+  gap:48px;
+}
 .n-gap-2 {
   gap:8px;
 }
@@ -9297,6 +10134,9 @@ button.ndl-avatar:focus-visible {
 .n-gap-token-48 {
   gap:48px;
 }
+.n-gap-token-6 {
+  gap:6px;
+}
 .n-gap-token-64 {
   gap:64px;
 }
@@ -9335,6 +10175,9 @@ button.ndl-avatar:focus-visible {
 .n-overflow-hidden {
   overflow:hidden;
 }
+.n-overflow-y-auto {
+  overflow-y:auto;
+}
 .n-overflow-x-scroll {
   overflow-x:scroll;
 }
@@ -28409,6 +29252,12 @@ button.ndl-avatar:focus-visible {
 .n-p-2 {
   padding:8px;
 }
+.n-p-3 {
+  padding:12px;
+}
+.n-p-4 {
+  padding:16px;
+}
 .n-p-8 {
   padding:32px;
 }
@@ -28467,6 +29316,9 @@ button.ndl-avatar:focus-visible {
   padding-top:8px;
   padding-bottom:8px;
 }
+.n-pb-4 {
+  padding-bottom:16px;
+}
 .n-pb-token-16 {
   padding-bottom:16px;
 }
@@ -28507,6 +29359,9 @@ button.ndl-avatar:focus-visible {
 .n-font-light {
   font-weight:300;
 }
+.n-font-normal {
+  font-weight:400;
+}
 .n-font-semibold {
   font-weight:600;
 }