@neo4j-ndl/base 4.1.5 → 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 {
@@ -8924,6 +8924,799 @@ button.ndl-avatar:focus-visible {
         )
       );
     }
+.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;
+  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-ai-suggestion.ndl-disabled {
+  cursor:not-allowed;
+  color:var(--theme-color-neutral-text-weakest);
+}
+.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;
+  -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-color:var(--theme-color-neutral-border-weak);
+  background-color:var(--theme-color-neutral-bg-weak);
+  color:var(--theme-color-neutral-text-default);
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-header {
+  display:flex;
+  min-height:52px;
+  align-items:center;
+  gap:12px;
+  padding:12px;
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-header:focus-visible {
+  outline-width:2px;
+  outline-offset:0px;
+  outline-color:var(--theme-color-primary-focus);
+}
+.ndl-ai-reasoning .ndl-ai-reasoning-header .ndl-ai-reasoning-header-text {
+  color:var(--theme-color-neutral-text-default);
+
+      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-ai-reasoning .ndl-ai-reasoning-expand-button {
+  margin-left:auto;
+}
+.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;
 }
@@ -9005,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;
 }
@@ -9026,6 +9825,9 @@ button.ndl-avatar:focus-visible {
 .n-flex {
   display:flex;
 }
+.n-inline-flex {
+  display:inline-flex;
+}
 .n-table {
   display:table;
 }
@@ -9054,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;
@@ -9113,6 +9919,9 @@ button.ndl-avatar:focus-visible {
 .n-h-full {
   height:100%;
 }
+.n-h-screen {
+  height:100vh;
+}
 .n-h-token-12 {
   height:12px;
 }
@@ -9152,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;
@@ -9187,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;
@@ -9200,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;
 }
@@ -9262,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;
 }
@@ -9274,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;
 }
@@ -9304,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;
 }
@@ -9342,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;
 }
@@ -28416,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;
 }
@@ -28474,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;
 }
@@ -28514,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;
 }