@openviking/react 0.1.2 → 0.1.4

package/dist/components/viking-bot/style.css

@@ -1,7 +1,11 @@
-.ov-agent-connect, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__interaction {
+.ov-directory-tour, .ov-agent-connect, .ov-console, .ov-divider, .ov-file-browser-entries, .ov-drawer, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-popover, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__popover, .ov-viking-bot__reference-picker--mention, .ov-viking-bot__interaction {
+  --ov-ui-tour-shadow-default: 0 15px 35px #0000000d, 0 5px 15px #0000000d;
+  --ov-ui-tour-highlight-default: #5252ff14;
   --ov-ui-primary-default: #5252ff;
   --ov-ui-primary-hover-default: #7075ff;
   --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-disabled-default: #acb4ff;
+  --ov-ui-text-on-primary-default: #fff;
   --ov-ui-primary-light-default: #f5f7ff;
   --ov-ui-connect-glow-warm-default: #ff952b0a;
   --ov-ui-connect-glow-pink-default: #fb4fbc0f;
@@ -19,18 +23,21 @@
   --ov-ui-bg-3-default: #f7f8fd;
   --ov-ui-bg-4-default: #f6f7fa;
   --ov-ui-bg-5-default: #f1f2f9;
+  --ov-ui-code-bg-default: #fbfbfc;
   --ov-ui-status-success-default: #1f9d55;
   --ov-ui-shadow-default: #0f172a;
+  --ov-ui-shadow-control-default: #0000000d;
   --ov-ui-focus-default: #5252ff;
   --ov-ui-fill-hover-default: #f1f2f9;
   --ov-ui-status-error-default: #c43838;
   --ov-ui-warning-default: #b26a00;
   --ov-ui-warning-light-default: #fff0b3;
+  --ov-ui-overlay-default: #0006;
   --ov-ui-tooltip-bg-default: #1f2329;
   --ov-ui-tooltip-text-default: #fff;
 }
 
-.dark .ov-agent-connect, .dark .ov-file-browser, .dark .ov-file-preview, .dark .ov-file-tree, .dark .ov-module-placeholder, .dark .ov-scope-switcher, .dark .ov-tooltip, .dark .ov-tui, .dark .ov-viking-bot, .dark .ov-viking-bot__interaction {
+.dark .ov-directory-tour, .dark .ov-agent-connect, .dark .ov-console, .dark .ov-divider, .dark .ov-file-browser-entries, .dark .ov-drawer, .dark .ov-file-browser, .dark .ov-file-preview, .dark .ov-file-tree, .dark .ov-module-placeholder, .dark .ov-popover, .dark .ov-scope-switcher, .dark .ov-tooltip, .dark .ov-tui, .dark .ov-viking-bot, .dark .ov-viking-bot__popover, .dark .ov-viking-bot__reference-picker--mention, .dark .ov-viking-bot__interaction {
   --ov-ui-primary-default: #5f5fff;
   --ov-ui-primary-hover-default: #7075ff;
   --ov-ui-primary-active-default: #4242ba;
@@ -56,9 +63,14 @@
   --ov-ui-warning-default: #e0a04a;
   --ov-ui-warning-light-default: #3a2f14;
   --ov-ui-tooltip-bg-default: #2a2d33;
+  --ov-ui-overlay-default: #000000a3;
   --ov-ui-tooltip-text-default: #f0f1f3;
 }
 
+.dark .ov-viking-bot {
+  --ov-ui-code-bg-default: var(--ov-ui-bg-3-default);
+}
+
 .ov-agent-connect {
   --ov-ui-connect-card-default: #fbfbfc;
   --ov-ui-connect-tabs-default: #f7f7f9;
@@ -85,7 +97,7 @@
   --ov-viking-bot-text-muted: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default, #6e718c));
   --ov-viking-bot-accent: var(--ov-ui-color-primary, var(--ov-ui-primary-default, #5252ff));
   --ov-viking-bot-accent-hover: var(--ov-ui-color-primary-hover, var(--ov-ui-primary-hover-default, #7075ff));
-  --ov-viking-bot-on-accent: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default, #fff));
+  --ov-viking-bot-on-accent: var(--ov-ui-color-text-on-primary, var(--ov-ui-text-on-primary-default));
   --ov-viking-bot-border: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, #e1e4f2));
   --ov-viking-bot-border-strong: var(--ov-ui-color-border-3, var(--ov-ui-border-3-default, #d7daea));
   --ov-viking-bot-surface: var(--ov-ui-color-bg-4, var(--ov-ui-bg-4-default, #f6f7fa));
@@ -154,14 +166,18 @@
 }
 
 .ov-viking-bot__body {
+  flex-direction: column;
   flex: 1;
   min-height: 0;
+  display: flex;
   overflow: auto;
 }
 
 .ov-viking-bot__list {
   flex-direction: column;
+  flex: 1;
   gap: 12px;
+  min-height: 0;
   padding: 12px;
   display: flex;
 }
@@ -367,7 +383,42 @@
   font-size: 12px;
 }
 
-.ov-viking-bot__empty, .ov-viking-bot__unavailable {
+.ov-viking-bot__empty {
+  text-align: center;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+  padding: 32px 16px;
+  display: flex;
+}
+
+.ov-viking-bot__welcome {
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  display: flex;
+}
+
+.ov-viking-bot__welcome h2 {
+  color: var(--ov-viking-bot-text);
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.ov-viking-bot__welcome p {
+  max-width: 360px;
+  color: var(--ov-viking-bot-text-muted);
+  letter-spacing: .04px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-viking-bot__unavailable {
   color: var(--ov-viking-bot-text-muted);
   justify-content: center;
   align-items: center;
@@ -410,14 +461,54 @@
 
 .ov-viking-bot__composer {
   box-sizing: border-box;
-  border-top: 1px solid var(--ov-viking-bot-border);
   flex-direction: column;
   flex: none;
   gap: 6px;
-  padding: 8px 12px 12px;
+  width: 100%;
+  min-width: 0;
+  padding: 0 16px 16px;
   display: flex;
 }
 
+.ov-viking-bot__composer .ov-viking-bot__sender {
+  box-sizing: border-box;
+  border: .5px solid var(--ov-viking-bot-border-strong);
+  background: var(--ov-viking-bot-bg);
+  width: 100%;
+  min-width: 0;
+  box-shadow: 0 2px 6px
+    color-mix(in srgb,
+      var(--ov-ui-color-shadow, var(--ov-ui-shadow-default)) 5%,
+      transparent);
+  border-radius: 20px;
+  padding: 12px;
+}
+
+.ov-viking-bot__sender .ark-agentic-sender-richTextArea {
+  --ark-sender-rich-textarea-line-height: 22px;
+  margin: 0;
+  padding-top: 0;
+}
+
+.ov-viking-bot__sender .tiptap.ProseMirror {
+  color: var(--ov-viking-bot-text);
+  letter-spacing: .3px;
+  outline: none;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.ov-viking-bot__sender .tiptap p {
+  margin: 0;
+}
+
+.ov-viking-bot__sender .tiptap p.is-editor-empty:first-child:before {
+  color: var(--ov-viking-bot-text-muted);
+  font: inherit;
+}
+
 .ov-viking-bot__composer--compact {
   padding: 6px 8px 8px;
 }
@@ -469,78 +560,89 @@
   color: var(--ov-viking-bot-danger);
 }
 
-.ov-viking-bot__input {
-  box-sizing: border-box;
-  border: 1px solid var(--ov-viking-bot-border);
-  border-radius: var(--ov-viking-bot-radius);
+.ov-viking-bot__composer-actions {
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
   width: 100%;
-  min-height: 64px;
-  max-height: 200px;
-  color: inherit;
-  font: inherit;
-  resize: vertical;
-  padding: 8px;
-  line-height: 1.6;
-}
-
-.ov-viking-bot__input::placeholder {
-  color: var(--ov-viking-bot-text-muted);
-}
-
-.ov-viking-bot__input:focus-visible {
-  outline: 2px solid var(--ov-viking-bot-focus);
-  outline-offset: -1px;
-}
-
-.ov-viking-bot__input:disabled {
-  background: var(--ov-viking-bot-surface);
-  color: var(--ov-viking-bot-text-muted);
-  cursor: not-allowed;
+  min-height: 32px;
+  margin-top: 10px;
+  display: flex;
 }
 
-.ov-viking-bot__composer-actions {
-  justify-content: flex-end;
+.ov-viking-bot__composer-tools {
   align-items: center;
   gap: 8px;
+  min-width: 0;
   display: flex;
 }
 
-.ov-viking-bot__composer-actions > button {
-  border: 1px solid var(--ov-viking-bot-border);
-  border-radius: var(--ov-viking-bot-radius);
-  color: var(--ov-viking-bot-text);
-  font: inherit;
+.ov-viking-bot__attach, .ov-viking-bot__submit {
   cursor: pointer;
+  border: 0;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: inline-flex;
+}
+
+.ov-viking-bot__attach {
+  color: var(--ov-viking-bot-text);
   background: none;
-  padding: 4px 12px;
-  font-size: 12px;
+  border-radius: 6px;
 }
 
-.ov-viking-bot__composer-actions > button:last-child {
-  border-color: var(--ov-viking-bot-accent);
+.ov-viking-bot__submit {
   background: var(--ov-viking-bot-accent);
   color: var(--ov-viking-bot-on-accent);
+  border-radius: 50%;
 }
 
-.ov-viking-bot__composer-actions > button:hover:not(:disabled) {
+.ov-viking-bot__attach:hover:not(:disabled) {
   background: var(--ov-viking-bot-surface-hover);
 }
 
-.ov-viking-bot__composer-actions > button:last-child:hover:not(:disabled) {
-  border-color: var(--ov-viking-bot-accent-hover);
+.ov-viking-bot__submit:hover:not(:disabled) {
   background: var(--ov-viking-bot-accent-hover);
 }
 
-.ov-viking-bot__composer-actions > button:focus-visible {
+.ov-viking-bot__attach:focus-visible, .ov-viking-bot__submit:focus-visible {
   outline: 2px solid var(--ov-viking-bot-focus);
   outline-offset: 2px;
 }
 
-.ov-viking-bot__composer-actions > button:disabled {
+.ov-viking-bot__attach:disabled {
   opacity: .5;
   cursor: not-allowed;
 }
 
+.ov-viking-bot__submit:disabled {
+  background: var(--ov-ui-color-primary-disabled, var(--ov-ui-primary-disabled-default));
+  cursor: not-allowed;
+}
+
+.ov-viking-bot__submit > svg {
+  width: 9px;
+  height: 10.3334px;
+  display: block;
+}
+
+.ov-viking-bot__attach > svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.ov-viking-bot__stop-icon {
+  background: currentColor;
+  border-radius: 1px;
+  width: 10px;
+  height: 10px;
+}
+
 .ov-viking-bot__interaction {
   box-sizing: border-box;
   border-top: 1px solid var(--ov-viking-bot-border);
@@ -7131,5 +7233,1341 @@ textarea.ov-viking-bot__interaction-input {
   line-height: 20px;
 }
 
+.ov-directory-tour, .ov-agent-connect, .ov-console, .ov-divider, .ov-file-browser-entries, .ov-drawer, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-popover, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__popover, .ov-viking-bot__reference-picker--mention, .ov-viking-bot__interaction {
+  --ov-ui-tour-shadow-default: 0 15px 35px #0000000d, 0 5px 15px #0000000d;
+  --ov-ui-tour-highlight-default: #5252ff14;
+  --ov-ui-primary-default: #5252ff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-disabled-default: #acb4ff;
+  --ov-ui-text-on-primary-default: #fff;
+  --ov-ui-primary-light-default: #f5f7ff;
+  --ov-ui-connect-glow-warm-default: #ff952b0a;
+  --ov-ui-connect-glow-pink-default: #fb4fbc0f;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc0a;
+  --ov-ui-on-primary-default: #fff;
+  --ov-ui-text-1-default: #0b0b0f;
+  --ov-ui-text-2-default: #3f3f51;
+  --ov-ui-text-3-default: #6e718c;
+  --ov-ui-text-description-default: #0006;
+  --ov-ui-text-disabled-default: #a5a7bb;
+  --ov-ui-border-1-default: #f0f2fa;
+  --ov-ui-border-2-default: #e1e4f2;
+  --ov-ui-border-3-default: #d7daea;
+  --ov-ui-bg-1-default: #fff;
+  --ov-ui-bg-3-default: #f7f8fd;
+  --ov-ui-bg-4-default: #f6f7fa;
+  --ov-ui-bg-5-default: #f1f2f9;
+  --ov-ui-code-bg-default: #fbfbfc;
+  --ov-ui-status-success-default: #1f9d55;
+  --ov-ui-shadow-default: #0f172a;
+  --ov-ui-shadow-control-default: #0000000d;
+  --ov-ui-focus-default: #5252ff;
+  --ov-ui-fill-hover-default: #f1f2f9;
+  --ov-ui-status-error-default: #c43838;
+  --ov-ui-warning-default: #b26a00;
+  --ov-ui-warning-light-default: #fff0b3;
+  --ov-ui-overlay-default: #0006;
+  --ov-ui-tooltip-bg-default: #1f2329;
+  --ov-ui-tooltip-text-default: #fff;
+}
+
+.dark .ov-directory-tour, .dark .ov-agent-connect, .dark .ov-console, .dark .ov-divider, .dark .ov-file-browser-entries, .dark .ov-drawer, .dark .ov-file-browser, .dark .ov-file-preview, .dark .ov-file-tree, .dark .ov-module-placeholder, .dark .ov-popover, .dark .ov-scope-switcher, .dark .ov-tooltip, .dark .ov-tui, .dark .ov-viking-bot, .dark .ov-viking-bot__popover, .dark .ov-viking-bot__reference-picker--mention, .dark .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5f5fff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #4242ba;
+  --ov-ui-primary-light-default: #1a1632;
+  --ov-ui-connect-glow-warm-default: #ff952b05;
+  --ov-ui-connect-glow-pink-default: #fb4fbc08;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc05;
+  --ov-ui-text-1-default: #c7ccd6;
+  --ov-ui-text-2-default: #9da3af;
+  --ov-ui-text-3-default: #737a87;
+  --ov-ui-text-description-default: #fff6;
+  --ov-ui-text-disabled-default: #42464e;
+  --ov-ui-border-1-default: #23252a;
+  --ov-ui-border-2-default: #2e3138;
+  --ov-ui-border-3-default: #3a3d45;
+  --ov-ui-bg-1-default: #131416;
+  --ov-ui-bg-3-default: #1b1d21;
+  --ov-ui-bg-4-default: #202227;
+  --ov-ui-bg-5-default: #23252a;
+  --ov-ui-focus-default: #5f5fff;
+  --ov-ui-fill-hover-default: #23252a;
+  --ov-ui-status-error-default: #ff9595;
+  --ov-ui-warning-default: #e0a04a;
+  --ov-ui-warning-light-default: #3a2f14;
+  --ov-ui-tooltip-bg-default: #2a2d33;
+  --ov-ui-overlay-default: #000000a3;
+  --ov-ui-tooltip-text-default: #f0f1f3;
+}
+
+.dark .ov-viking-bot {
+  --ov-ui-code-bg-default: var(--ov-ui-bg-3-default);
+}
+
+.ov-agent-connect {
+  --ov-ui-connect-card-default: #fbfbfc;
+  --ov-ui-connect-tabs-default: #f7f7f9;
+  --ov-ui-connect-selected-default: #f3f4f7;
+  --ov-ui-connect-border-default: #edeef2;
+  --ov-ui-connect-outline-default: #e1e3ea;
+  --ov-ui-connect-muted-default: #787c91;
+  --ov-ui-connect-notice-default: #2e2984;
+}
+
+.dark .ov-agent-connect {
+  --ov-ui-connect-card-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-tabs-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-selected-default: var(--ov-ui-bg-4-default);
+  --ov-ui-connect-border-default: var(--ov-ui-border-1-default);
+  --ov-ui-connect-outline-default: var(--ov-ui-border-2-default);
+  --ov-ui-connect-muted-default: var(--ov-ui-text-3-default);
+  --ov-ui-connect-notice-default: var(--ov-ui-text-2-default);
+}
+
+.ov-popover {
+  --ov-ui-popover-bg: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default, #fff));
+  --ov-ui-popover-text: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default, #0b0b0f));
+  --ov-ui-popover-border: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, #e1e4f2));
+  z-index: 1000;
+  box-sizing: border-box;
+  border: 1px solid var(--ov-ui-popover-border);
+  background: var(--ov-ui-popover-bg);
+  max-width: 320px;
+  color: var(--ov-ui-popover-text);
+  overflow-wrap: break-word;
+  border-radius: 8px;
+  padding: 12px;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  animation: .12s ease-out ov-popover-enter;
+  position: fixed;
+  box-shadow: 0 15px 35px -2px #0000000d, 0 5px 15px #0000000d;
+}
+
+@keyframes ov-popover-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ov-popover {
+    animation: none;
+  }
+}
+
+.ov-file-tree {
+  --ov-ui-file-tree-row-height: 32px;
+  --ov-ui-file-tree-row-radius: 4px;
+  --ov-ui-file-tree-indent: 20px;
+  --ov-ui-file-tree-text: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  --ov-ui-file-tree-text-muted: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default));
+  --ov-ui-file-tree-icon: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default));
+  --ov-ui-file-tree-row-hover: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+  --ov-ui-file-tree-row-selected: var(--ov-ui-color-primary-light, var(--ov-ui-primary-light-default));
+  --ov-ui-file-tree-guide: var(--ov-ui-color-border-1, var(--ov-ui-border-1-default));
+  --ov-ui-file-tree-spinner-track: var(--ov-ui-color-border-3, var(--ov-ui-border-3-default));
+  --ov-ui-file-tree-spinner: var(--ov-ui-color-primary, var(--ov-ui-primary-default));
+  --ov-ui-file-tree-action: var(--ov-ui-color-primary, var(--ov-ui-primary-default));
+  --ov-ui-file-tree-warning: var(--ov-ui-color-warning, var(--ov-ui-warning-default));
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  height: 100%;
+  min-height: 0;
+  color: var(--ov-ui-file-tree-text);
+  flex-direction: column;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+}
+
+.ov-file-tree__toolbar {
+  flex: none;
+  padding: 4px 0 8px;
+}
+
+.ov-file-tree__body {
+  flex: auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+.ov-file-tree__rows {
+  flex-direction: column;
+  width: max-content;
+  min-width: 100%;
+  display: flex;
+}
+
+.ov-file-tree__row, .ov-file-tree__state-row {
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+  height: var(--ov-ui-file-tree-row-height);
+  min-height: var(--ov-ui-file-tree-row-height);
+  border-radius: var(--ov-ui-file-tree-row-radius);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  outline: none;
+  flex: none;
+  align-items: center;
+  gap: 2px;
+  padding-right: 8px;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+  position: relative;
+}
+
+.ov-file-tree__row {
+  transition: background-color .12s;
+}
+
+.ov-file-tree__row:hover {
+  background-color: var(--ov-ui-file-tree-row-hover);
+}
+
+.ov-file-tree__row[data-selected] {
+  background-color: var(--ov-ui-file-tree-row-selected);
+}
+
+.ov-file-tree__row:focus-visible, .ov-file-tree__state-row:focus-visible {
+  outline: 2px solid var(--ov-ui-file-tree-action);
+  outline-offset: -2px;
+}
+
+.ov-file-tree__row[data-disabled] {
+  color: var(--ov-ui-file-tree-text-muted);
+  cursor: not-allowed;
+}
+
+.ov-file-tree__guide {
+  background-color: var(--ov-ui-file-tree-guide);
+  pointer-events: none;
+  width: 1px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.ov-file-tree__toggle, .ov-file-tree__toggle-spacer {
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+}
+
+.ov-file-tree__toggle svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+
+.ov-file-tree__toggle {
+  color: var(--ov-ui-file-tree-text-muted);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  padding: 0;
+}
+
+.ov-file-tree__toggle:hover:not(:disabled) {
+  background-color: var(--ov-ui-file-tree-row-hover);
+}
+
+.ov-file-tree__toggle:disabled {
+  cursor: default;
+}
+
+.ov-file-tree__chevron {
+  transition: transform .15s cubic-bezier(.22, 1, .36, 1);
+}
+
+.ov-file-tree__chevron[data-expanded] {
+  transform: rotate(90deg);
+}
+
+.ov-file-tree__icon-slot {
+  width: 16px;
+  height: 16px;
+  color: var(--ov-ui-file-tree-icon);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.ov-file-tree__folder {
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  position: relative;
+}
+
+.ov-file-tree__folder-layer {
+  opacity: 0;
+  width: 14px;
+  height: 14px;
+  transition: opacity .22s cubic-bezier(.22, 1, .36, 1);
+  position: absolute;
+  inset: 0;
+}
+
+.ov-file-tree__folder-layer[data-open="true"] {
+  opacity: 1;
+}
+
+.ov-file-tree__file-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.ov-file-tree__label-group {
+  flex: none;
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.ov-file-tree__label {
+  white-space: nowrap;
+  flex: none;
+}
+
+.ov-file-tree__description {
+  max-width: 200px;
+  color: var(--ov-ui-file-tree-text-muted);
+  letter-spacing: .03px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: none;
+  font-size: 10px;
+  line-height: 20px;
+  overflow: hidden;
+}
+
+.ov-file-tree__level {
+  color: var(--ov-ui-file-tree-text-muted);
+  flex: none;
+  margin-left: auto;
+  font-size: 14px;
+}
+
+.ov-file-tree__expiry {
+  color: var(--ov-ui-file-tree-warning);
+  flex: none;
+  font-size: 12px;
+}
+
+.ov-file-tree__expiry-action {
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+  text-decoration: underline;
+}
+
+.ov-file-tree__dashboard {
+  flex: none;
+  align-items: center;
+  display: inline-flex;
+}
+
+.ov-file-tree__info {
+  flex-direction: column;
+  gap: 8px;
+  display: flex;
+}
+
+.ov-file-tree__info-title {
+  color: var(--ov-ui-file-tree-text);
+  word-break: break-all;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.ov-file-tree__info-row {
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-file-tree__info-label {
+  color: var(--ov-ui-file-tree-text-muted);
+  flex: none;
+}
+
+.ov-file-tree__info-value {
+  min-width: 0;
+  color: var(--ov-ui-file-tree-text);
+  word-break: break-word;
+}
+
+.ov-file-tree__info-path {
+  min-width: 0;
+  color: var(--ov-ui-file-tree-text-muted);
+  word-break: break-all;
+}
+
+.ov-file-tree__state-row {
+  color: var(--ov-ui-file-tree-text-muted);
+}
+
+.ov-file-tree__state-row[data-tone="error"] {
+  color: var(--ov-ui-color-status-error, var(--ov-ui-status-error-default));
+}
+
+.ov-file-tree__state {
+  box-sizing: border-box;
+  min-height: 120px;
+  color: var(--ov-ui-file-tree-text-muted);
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  display: flex;
+}
+
+.ov-file-tree__muted {
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.ov-file-tree__spinner {
+  box-sizing: border-box;
+  border: 1px solid var(--ov-ui-file-tree-spinner-track);
+  border-top-color: var(--ov-ui-file-tree-spinner);
+  border-radius: 50%;
+  flex: none;
+  width: 12px;
+  height: 12px;
+  animation: .9s linear infinite ov-file-tree-spin;
+  display: inline-block;
+}
+
+@keyframes ov-file-tree-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ov-file-tree__action {
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+  transition: color .12s;
+}
+
+.ov-file-tree__action:hover:not(:disabled) {
+  color: var(--ov-ui-file-tree-action);
+}
+
+.ov-file-tree__action:disabled {
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ov-file-tree__chevron, .ov-file-tree__folder-layer {
+    transition: none;
+  }
+
+  .ov-file-tree__spinner {
+    animation-duration: 2s;
+  }
+}
+
+.ov-file-tree__file-type-icon {
+  color: var(--ov-file-tree-icon-light, var(--ov-ui-file-tree-icon));
+}
+
+.dark .ov-file-tree__file-type-icon {
+  color: var(--ov-file-tree-icon-dark, var(--ov-ui-file-tree-icon));
+}
+
+.ov-file-tree__controls {
+  flex: none;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 1px 1px 7px;
+  display: flex;
+}
+
+.ov-file-tree__search, .ov-file-tree__refresh {
+  box-sizing: border-box;
+  border: 1px solid var(--ov-ui-color-border-2, var(--ov-ui-border-2-default));
+  background: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default));
+  height: 32px;
+  color: var(--ov-ui-file-tree-icon);
+  box-shadow: 0 1px 1px
+    var(--ov-ui-color-shadow-control, var(--ov-ui-shadow-control-default));
+  cursor: pointer;
+  border-radius: 6px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 22px;
+  transition: border-color .16s, background-color .16s;
+  display: inline-flex;
+}
+
+.ov-file-tree__search {
+  min-width: 0;
+  color: var(--ov-ui-file-tree-text-muted);
+  text-align: left;
+  flex: auto;
+  justify-content: flex-start;
+  gap: 4px;
+  padding: 4px 12px;
+}
+
+.ov-file-tree__search svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.ov-file-tree__search-label {
+  letter-spacing: .036px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ov-file-tree__refresh {
+  width: 32px;
+}
+
+.ov-file-tree__refresh svg {
+  flex: none;
+  display: block;
+}
+
+.ov-file-tree__search:hover:not(:disabled), .ov-file-tree__refresh:hover:not(:disabled) {
+  border-color: var(--ov-ui-color-border-3, var(--ov-ui-border-3-default));
+}
+
+.ov-file-tree__refresh:hover:not(:disabled) {
+  background: var(--ov-ui-file-tree-row-hover);
+}
+
+.ov-file-tree__search:focus-visible, .ov-file-tree__refresh:focus-visible {
+  outline: 2px solid var(--ov-ui-file-tree-action);
+  outline-offset: 2px;
+}
+
+.ov-file-tree__search:disabled, .ov-file-tree__refresh:disabled {
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+.ov-file-tree__refresh[aria-busy="true"] {
+  cursor: wait;
+  opacity: 1;
+}
+
+.ov-file-tree__refresh-spinning {
+  animation: .9s linear infinite ov-file-tree-spin;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ov-file-tree__search, .ov-file-tree__refresh {
+    transition: none;
+  }
+
+  .ov-file-tree__refresh-spinning {
+    animation-duration: 2s;
+  }
+}
+
+
+
+.ov-directory-tour, .ov-agent-connect, .ov-console, .ov-divider, .ov-file-browser-entries, .ov-drawer, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-popover, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__popover, .ov-viking-bot__reference-picker--mention, .ov-viking-bot__interaction {
+  --ov-ui-tour-shadow-default: 0 15px 35px #0000000d, 0 5px 15px #0000000d;
+  --ov-ui-tour-highlight-default: #5252ff14;
+  --ov-ui-primary-default: #5252ff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-disabled-default: #acb4ff;
+  --ov-ui-text-on-primary-default: #fff;
+  --ov-ui-primary-light-default: #f5f7ff;
+  --ov-ui-connect-glow-warm-default: #ff952b0a;
+  --ov-ui-connect-glow-pink-default: #fb4fbc0f;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc0a;
+  --ov-ui-on-primary-default: #fff;
+  --ov-ui-text-1-default: #0b0b0f;
+  --ov-ui-text-2-default: #3f3f51;
+  --ov-ui-text-3-default: #6e718c;
+  --ov-ui-text-description-default: #0006;
+  --ov-ui-text-disabled-default: #a5a7bb;
+  --ov-ui-border-1-default: #f0f2fa;
+  --ov-ui-border-2-default: #e1e4f2;
+  --ov-ui-border-3-default: #d7daea;
+  --ov-ui-bg-1-default: #fff;
+  --ov-ui-bg-3-default: #f7f8fd;
+  --ov-ui-bg-4-default: #f6f7fa;
+  --ov-ui-bg-5-default: #f1f2f9;
+  --ov-ui-code-bg-default: #fbfbfc;
+  --ov-ui-status-success-default: #1f9d55;
+  --ov-ui-shadow-default: #0f172a;
+  --ov-ui-shadow-control-default: #0000000d;
+  --ov-ui-focus-default: #5252ff;
+  --ov-ui-fill-hover-default: #f1f2f9;
+  --ov-ui-status-error-default: #c43838;
+  --ov-ui-warning-default: #b26a00;
+  --ov-ui-warning-light-default: #fff0b3;
+  --ov-ui-overlay-default: #0006;
+  --ov-ui-tooltip-bg-default: #1f2329;
+  --ov-ui-tooltip-text-default: #fff;
+}
+
+.dark .ov-directory-tour, .dark .ov-agent-connect, .dark .ov-console, .dark .ov-divider, .dark .ov-file-browser-entries, .dark .ov-drawer, .dark .ov-file-browser, .dark .ov-file-preview, .dark .ov-file-tree, .dark .ov-module-placeholder, .dark .ov-popover, .dark .ov-scope-switcher, .dark .ov-tooltip, .dark .ov-tui, .dark .ov-viking-bot, .dark .ov-viking-bot__popover, .dark .ov-viking-bot__reference-picker--mention, .dark .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5f5fff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #4242ba;
+  --ov-ui-primary-light-default: #1a1632;
+  --ov-ui-connect-glow-warm-default: #ff952b05;
+  --ov-ui-connect-glow-pink-default: #fb4fbc08;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc05;
+  --ov-ui-text-1-default: #c7ccd6;
+  --ov-ui-text-2-default: #9da3af;
+  --ov-ui-text-3-default: #737a87;
+  --ov-ui-text-description-default: #fff6;
+  --ov-ui-text-disabled-default: #42464e;
+  --ov-ui-border-1-default: #23252a;
+  --ov-ui-border-2-default: #2e3138;
+  --ov-ui-border-3-default: #3a3d45;
+  --ov-ui-bg-1-default: #131416;
+  --ov-ui-bg-3-default: #1b1d21;
+  --ov-ui-bg-4-default: #202227;
+  --ov-ui-bg-5-default: #23252a;
+  --ov-ui-focus-default: #5f5fff;
+  --ov-ui-fill-hover-default: #23252a;
+  --ov-ui-status-error-default: #ff9595;
+  --ov-ui-warning-default: #e0a04a;
+  --ov-ui-warning-light-default: #3a2f14;
+  --ov-ui-tooltip-bg-default: #2a2d33;
+  --ov-ui-overlay-default: #000000a3;
+  --ov-ui-tooltip-text-default: #f0f1f3;
+}
+
+.dark .ov-viking-bot {
+  --ov-ui-code-bg-default: var(--ov-ui-bg-3-default);
+}
+
+.ov-agent-connect {
+  --ov-ui-connect-card-default: #fbfbfc;
+  --ov-ui-connect-tabs-default: #f7f7f9;
+  --ov-ui-connect-selected-default: #f3f4f7;
+  --ov-ui-connect-border-default: #edeef2;
+  --ov-ui-connect-outline-default: #e1e3ea;
+  --ov-ui-connect-muted-default: #787c91;
+  --ov-ui-connect-notice-default: #2e2984;
+}
+
+.dark .ov-agent-connect {
+  --ov-ui-connect-card-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-tabs-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-selected-default: var(--ov-ui-bg-4-default);
+  --ov-ui-connect-border-default: var(--ov-ui-border-1-default);
+  --ov-ui-connect-outline-default: var(--ov-ui-border-2-default);
+  --ov-ui-connect-muted-default: var(--ov-ui-text-3-default);
+  --ov-ui-connect-notice-default: var(--ov-ui-text-2-default);
+}
+
+.ov-tooltip {
+  --ov-ui-tooltip-bg: var(--ov-ui-color-tooltip-bg, var(--ov-ui-tooltip-bg-default, #1f2329));
+  --ov-ui-tooltip-text: var(--ov-ui-color-tooltip-text, var(--ov-ui-tooltip-text-default, #fff));
+  --ov-ui-tooltip-border: transparent;
+  --ov-ui-tooltip-radius: var(--ov-ui-radius, 6px);
+  --ov-ui-tooltip-offset: 6px;
+  z-index: 1000;
+  box-sizing: border-box;
+  border: 1px solid var(--ov-ui-tooltip-border);
+  border-radius: var(--ov-ui-tooltip-radius);
+  background: var(--ov-ui-tooltip-bg);
+  max-width: 320px;
+  color: var(--ov-ui-tooltip-text);
+  overflow-wrap: break-word;
+  padding: 6px 8px;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  animation: .12s ease-out ov-tooltip-enter;
+  position: fixed;
+  box-shadow: 0 4px 12px #0000001f;
+}
+
+.ov-tooltip[role="dialog"] {
+  --ov-ui-tooltip-bg: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default, #fff));
+  --ov-ui-tooltip-text: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default, #0b0b0f));
+  --ov-ui-tooltip-border: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, #e1e4f2));
+  min-width: 120px;
+  max-width: 360px;
+  padding: 4px;
+  box-shadow: 0 6px 16px #0000001f;
+}
+
+@keyframes ov-tooltip-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ov-tooltip {
+    animation: none;
+  }
+}
+
+
+
+.ov-viking-bot__empty--welcome {
+  justify-content: normal;
+  align-items: stretch;
+  padding: 0;
+}
+
+.ov-viking-bot__home {
+  text-align: center;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+  min-height: 0;
+  padding: 0 16px 12px;
+  display: flex;
+  overflow-y: auto;
+}
+
+.ov-viking-bot__home-intro {
+  box-sizing: border-box;
+  flex-direction: column;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  max-width: 328px;
+  padding: 160px 8px 0;
+  display: flex;
+}
+
+.ov-viking-bot__home-illustration {
+  flex-shrink: 0;
+  width: 128px;
+  height: 80px;
+  position: relative;
+}
+
+.ov-viking-bot__home-illustration > span {
+  background: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  position: absolute;
+}
+
+.ov-viking-bot__home-illustration svg {
+  display: block;
+}
+
+.ov-viking-bot__home-bulb {
+  top: 28px;
+  inset-inline-start: 0;
+  transform: rotate(-6deg);
+}
+
+.ov-viking-bot__home-book {
+  top: 0;
+  inset-inline-start: 44px;
+}
+
+.ov-viking-bot__home-book path {
+  stroke-width: 1.5px;
+  vector-effect: non-scaling-stroke;
+}
+
+.ov-viking-bot__home-video {
+  top: 28px;
+  inset-inline-end: 0;
+  transform: rotate(6deg);
+}
+
+.ov-viking-bot__home-text {
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  display: flex;
+}
+
+.ov-viking-bot__home-text h2 {
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  font: inherit;
+  margin: 0;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 32px;
+}
+
+.ov-viking-bot__home-text p {
+  color: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default));
+  letter-spacing: .039px;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.ov-viking-bot__quick-inputs {
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  gap: 6px;
+  width: 100%;
+  padding-inline: 4px;
+  display: flex;
+}
+
+.ov-viking-bot__quick-inputs button {
+  border: .5px solid var(--ov-ui-color-border-3, var(--ov-ui-border-3-default));
+  background: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default));
+  min-height: 32px;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  border-radius: 20px;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  font-size: 13px;
+  display: inline-flex;
+}
+
+.ov-viking-bot__quick-inputs svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+
+.ov-viking-bot__session-actions {
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  margin-inline-start: auto;
+  display: flex;
+}
+
+.ov-viking-bot__header-action {
+  width: 28px;
+  height: 28px;
+  color: var(--ov-ui-color-text-2, var(--ov-ui-text-2-default));
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.ov-viking-bot__header-action:hover, .ov-viking-bot__header-action[aria-expanded="true"], .ov-viking-bot__quick-inputs button:hover:not(:disabled) {
+  background: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+}
+
+.ov-viking-bot__header-action > svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+
+.ov-viking-bot__header-action svg path {
+  stroke-width: 1.25px;
+  vector-effect: non-scaling-stroke;
+}
+
+.ov-viking-bot__header {
+  padding: 8px 16px;
+}
+
+.ov-viking-bot__popover-anchor {
+  display: inline-flex;
+}
+
+.ov-viking-bot__popover {
+  z-index: 1000;
+  box-sizing: border-box;
+  border: 1px solid var(--ov-ui-color-border-3, var(--ov-ui-border-3-default));
+  background: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default));
+  width: min(352px, 100vw - 16px);
+  max-height: min(480px, 100vh - 32px);
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  box-shadow: 0 12px 32px
+    color-mix(in srgb,
+      var(--ov-ui-color-shadow, var(--ov-ui-shadow-default)) 12%,
+      transparent);
+  border-radius: 12px;
+  margin: 0;
+  padding: 12px;
+  font-family: inherit;
+  font-size: 13px;
+  position: fixed;
+  inset: auto;
+  overflow: auto;
+}
+
+.ov-viking-bot__popover--top {
+  width: min(288px, 100vw - 16px);
+}
+
+.ov-viking-bot__session-history ul {
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.ov-viking-bot__session-history li > button {
+  width: 100%;
+  color: inherit;
+  text-align: start;
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  display: flex;
+}
+
+.ov-viking-bot__session-history li > button:hover, .ov-viking-bot__session-history button[aria-current="true"] {
+  background: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+}
+
+.ov-viking-bot__session-history li span {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+}
+
+.ov-viking-bot__session-history time {
+  color: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default));
+  font-variant-numeric: tabular-nums;
+}
+
+.ov-viking-bot__empty-history {
+  min-height: 180px;
+  color: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default));
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.ov-viking-bot__reference-picker {
+  min-width: 0;
+}
+
+.ov-viking-bot__reference-picker--mention {
+  box-sizing: border-box;
+  border: 1px solid var(--ov-ui-color-border-3, var(--ov-ui-border-3-default));
+  background: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default));
+  width: min(288px, 100vw - 16px);
+  max-height: min(368px, 100vh - 32px);
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  box-shadow: 0 8px 24px
+    color-mix(in srgb,
+      var(--ov-ui-color-shadow, var(--ov-ui-shadow-default)) 12%,
+      transparent);
+  border-radius: 12px;
+  padding: 12px;
+  overflow: auto;
+}
+
+.ov-viking-bot__reference-picker label {
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 8px;
+  display: flex;
+}
+
+.ov-viking-bot__reference-picker input {
+  box-sizing: border-box;
+  border: 1px solid var(--ov-ui-color-border-3, var(--ov-ui-border-3-default));
+  background: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default));
+  width: 100%;
+  color: inherit;
+  font: inherit;
+  border-radius: 6px;
+  padding: 6px 8px;
+}
+
+.ov-viking-bot__reference-picker input:focus {
+  border-color: var(--ov-ui-color-focus, var(--ov-ui-focus-default));
+  outline: none;
+}
+
+.ov-viking-bot__reference-tags {
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0 0 8px;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.ov-viking-bot__reference-tags li {
+  background: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+  border-radius: 6px;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+  padding: 4px 6px;
+  display: inline-flex;
+}
+
+.ov-viking-bot__reference-tags li > span {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ov-viking-bot__reference-tags button {
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0 2px;
+}
+
+.ov-viking-bot__quick-inputs button:focus-visible, .ov-viking-bot__header-action:focus-visible, .ov-viking-bot__session-history button:focus-visible, .ov-viking-bot__reference-tags button:focus-visible {
+  outline: 2px solid var(--ov-ui-color-focus, var(--ov-ui-focus-default));
+  outline-offset: 2px;
+}
+
+.ov-viking-bot__quick-inputs button:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.ov-viking-bot__attach > svg {
+  width: 10.208px;
+  height: 10.208px;
+}
+
+.ov-viking-bot__list {
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+}
+
+.ov-viking-bot__message {
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+}
+
+.ov-viking-bot__message--user {
+  box-sizing: border-box;
+  padding-left: 32px;
+}
+
+.ov-viking-bot__user-bubble {
+  --agentic-bubble-content-max-width: 100%;
+  --agentic-bubble-content-filled-bg: var(--ov-ui-color-bg-3, var(--ov-ui-bg-3-default));
+  --agentic-bubble-content-padding-block: 12px;
+  --agentic-bubble-content-padding-inline: 16px;
+  --agentic-bubble-content-radius-default: 16px;
+  --agentic-bubble-content-font-size: 14px;
+  --agentic-bubble-content-line-height: 22px;
+  width: min(88%, 960px);
+  max-width: 100%;
+}
+
+.ov-viking-bot__user-bubble .ark-agentic-bubble__content {
+  inline-size: max-content;
+  max-inline-size: 100%;
+}
+
+.ov-viking-bot__user-bubble .ov-viking-bot__text {
+  letter-spacing: .3px;
+  font-family: PingFang SC, Noto Sans SC, sans-serif;
+  font-size: 14px;
+}
+
+.ov-viking-bot__text.ov-viking-bot__text--markdown {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-viking-bot__text--markdown :is(p, .ark-agentic-markdown__paragraph) {
+  margin: 0;
+}
+
+.ov-viking-bot__text--markdown :is(p, .ark-agentic-markdown__paragraph) + :is(p, .ark-agentic-markdown__paragraph) {
+  margin-top: 8px;
+}
+
+.ov-viking-bot__text--markdown .ark-agentic-markdown__paragraph:last-child, .ov-viking-bot__text--markdown .ark-agentic-markdown__list:last-child {
+  margin-bottom: 0;
+}
+
+.ov-viking-bot__message-footer {
+  min-height: 20px;
+  color: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default));
+  opacity: 0;
+  pointer-events: none;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 20px;
+  transition: opacity .16s;
+  display: inline-flex;
+}
+
+.ov-viking-bot__message:hover .ov-viking-bot__message-footer, .ov-viking-bot__message:focus-within .ov-viking-bot__message-footer {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ov-viking-bot__message-footer time {
+  white-space: nowrap;
+}
+
+.ov-viking-bot__message-actions {
+  margin-top: 10px;
+}
+
+.ov-viking-bot__message-action {
+  background: var(--ov-ui-color-bg-3, var(--ov-ui-bg-3-default));
+  height: 36px;
+  color: var(--ov-ui-color-text-2, var(--ov-ui-text-2-default));
+  border: 0;
+  border-radius: 24px;
+  padding: 0 16px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 22px;
+}
+
+.ov-viking-bot__activity {
+  width: min(88%, 960px);
+}
+
+.ov-viking-bot__tool-details {
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 4px;
+  display: flex;
+}
+
+.ov-viking-bot__tool-payload-section {
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-viking-bot__tool-payload-label {
+  color: var(--ov-ui-color-text-2, var(--ov-ui-text-2-default));
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.ov-viking-bot__tool-payload {
+  max-height: 240px;
+  overflow: auto;
+}
+
+.ov-viking-bot__tool-results {
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-viking-bot__tool-result {
+  border: .4px solid var(--ov-ui-color-border-3, var(--ov-ui-border-3-default));
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border-radius: 6px;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  display: flex;
+  overflow: hidden;
+}
+
+.ov-viking-bot__tool-result:hover, .ov-viking-bot__tool-result:focus-visible {
+  background: var(--ov-ui-color-bg-3, var(--ov-ui-bg-3-default));
+}
+
+.ov-viking-bot__tool-result:disabled {
+  cursor: default;
+}
+
+.ov-viking-bot__tool-result-score {
+  background: var(--ov-ui-color-bg-3, var(--ov-ui-bg-3-default));
+  border-radius: 6px;
+  flex-shrink: 0;
+  align-items: center;
+  height: 24px;
+  padding: 2px 4px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  display: inline-flex;
+}
+
+.ov-viking-bot__tool-result-score strong {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.ov-viking-bot__tool-result svg {
+  flex-shrink: 0;
+}
+
+.ov-viking-bot__tool-result-name {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+  max-width: 40%;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 22px;
+  overflow: hidden;
+}
+
+.ov-viking-bot__tool-result-uri {
+  min-width: 0;
+  color: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  overflow: hidden;
+}
+
+.ov-viking-bot__activity .ark-agentic-activity-toolBlock[data-status="failed"] .ark-agentic-activity-toolRow__status {
+  display: none;
+}
+
+.ov-viking-bot__activity .ark-agentic-activity-toolBlock[data-status="failed"] .ark-agentic-activity-toolRow__icon, .ov-viking-bot__activity .ark-agentic-activity-toolBlock[data-status="failed"] .ark-agentic-activity-toolRow__title, .ov-viking-bot__activity .ark-agentic-activity-toolBlock[data-status="failed"] .ark-agentic-activity-toolRow__chevron {
+  color: var(--ov-ui-color-status-error, var(--ov-ui-status-error-default));
+}
+
+.ov-viking-bot__code {
+  background: var(--ov-ui-color-code-bg, var(--ov-ui-code-bg-default));
+  border-radius: 8px;
+  min-width: 0;
+  max-width: 100%;
+  margin: 12px 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.ov-viking-bot__code .ark-agentic-markdown__code-block {
+  background: none;
+  border: 0;
+  margin: 0;
+}
+
+.ov-viking-bot__code .ov-viking-bot__code-copy {
+  z-index: 1;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+
+.ov-viking-bot__code-copy .ark-agentic-bubble-tools__button {
+  background: var(--ov-ui-color-bg-4, var(--ov-ui-bg-4-default));
+  border-radius: 6px;
+  width: 32px;
+  height: 32px;
+  padding: 10px;
+}
+
+.ov-viking-bot__code pre {
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  margin: 0 56px 0 0;
+  padding: 16px 8px 16px 20px;
+  font-family: Menlo, Monaco, Consolas, Courier New, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.ov-viking-bot__code--wrap pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.ov-viking-bot__code a, .ov-viking-bot__text--markdown a {
+  color: var(--ov-ui-color-primary, var(--ov-ui-primary-default));
+}
+
+@media (hover: none) {
+  .ov-viking-bot__message-footer {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+