/* Color Tokens Light Theme */
:root,
:root[data-theme=light] {
  --bolt-elements-borderColor: #1717171a;
  --bolt-elements-borderColorActive: #8A5FFF;
  --bolt-elements-bg-depth-1: #FFFFFF;
  --bolt-elements-bg-depth-2: #FAFAFA;
  --bolt-elements-bg-depth-3: #E5E5E5;
  --bolt-elements-bg-depth-4: #1717170d;
  --bolt-elements-textPrimary: #0A0A0A;
  --bolt-elements-textSecondary: #525252;
  --bolt-elements-textTertiary: #737373;
  --bolt-elements-code-background: #F5F5F5;
  --bolt-elements-code-text: #0A0A0A;
  --bolt-elements-button-primary-background: #9C7DFF1a;
  --bolt-elements-button-primary-backgroundHover: #9C7DFF33;
  --bolt-elements-button-primary-text: #9C7DFF;
  --bolt-elements-button-secondary-background: #1717170d;
  --bolt-elements-button-secondary-backgroundHover: #1717171a;
  --bolt-elements-button-secondary-text: #0A0A0A;
  --bolt-elements-button-danger-background: #EF44441a;
  --bolt-elements-button-danger-backgroundHover: #EF444433;
  --bolt-elements-button-danger-text: #EF4444;
  --bolt-elements-item-contentDefault: #17171780;
  --bolt-elements-item-contentActive: #0A0A0A;
  --bolt-elements-item-contentAccent: #7645E8;
  --bolt-elements-item-contentDanger: #EF4444;
  --bolt-elements-item-backgroundDefault: rgba(0, 0, 0, 0);
  --bolt-elements-item-backgroundActive: #1717170d;
  --bolt-elements-item-backgroundAccent: #9C7DFF1a;
  --bolt-elements-item-backgroundDanger: #EF44441a;
  --bolt-elements-loader-background: #1717171a;
  --bolt-elements-loader-progress: #9C7DFF;
  --bolt-elements-artifacts-background: #FFFFFF;
  --bolt-elements-artifacts-backgroundHover: #17171705;
  --bolt-elements-artifacts-borderColor: var(--bolt-elements-borderColor);
  --bolt-elements-artifacts-inlineCode-background: #F5F5F5;
  --bolt-elements-artifacts-inlineCode-text: var(--bolt-elements-textPrimary);
  --bolt-elements-actions-background: #FFFFFF;
  --bolt-elements-actions-code-background: #262626;
  --bolt-elements-messages-background: #F5F5F5;
  --bolt-elements-messages-linkColor: #9C7DFF;
  --bolt-elements-messages-code-background: #262626;
  --bolt-elements-messages-inlineCode-background: #E5E5E5;
  --bolt-elements-messages-inlineCode-text: #262626;
  --bolt-elements-icon-success: #22C55E;
  --bolt-elements-icon-error: #EF4444;
  --bolt-elements-icon-primary: #0A0A0A;
  --bolt-elements-icon-secondary: #525252;
  --bolt-elements-icon-tertiary: #737373;
  --bolt-elements-dividerColor: #F5F5F5;
  --bolt-elements-prompt-background: #FFFFFFcc;
  --bolt-elements-sidebar-dropdownShadow: #1717171a;
  --bolt-elements-sidebar-buttonBackgroundDefault: #9C7DFF1a;
  --bolt-elements-sidebar-buttonBackgroundHover: #9C7DFF33;
  --bolt-elements-sidebar-buttonText: #7645E8;
  --bolt-elements-preview-addressBar-background: #F5F5F5;
  --bolt-elements-preview-addressBar-backgroundHover: #1717170d;
  --bolt-elements-preview-addressBar-backgroundActive: #FFFFFF;
  --bolt-elements-preview-addressBar-text: var(--bolt-elements-textSecondary);
  --bolt-elements-preview-addressBar-textActive: var(--bolt-elements-textPrimary);
  --bolt-elements-terminals-background: #FFFFFF;
  --bolt-elements-terminals-buttonBackground: var(--bolt-elements-bg-depth-4);
  --bolt-elements-cta-background: #F5F5F5;
  --bolt-elements-cta-text: #0A0A0A;
  /* Terminal Colors */
  --bolt-terminal-background: var(--bolt-elements-terminals-background);
  --bolt-terminal-foreground: #333333;
  --bolt-terminal-selection-background: #00000040;
  --bolt-terminal-black: #000000;
  --bolt-terminal-red: #cd3131;
  --bolt-terminal-green: #00bc00;
  --bolt-terminal-yellow: #949800;
  --bolt-terminal-blue: #0451a5;
  --bolt-terminal-magenta: #bc05bc;
  --bolt-terminal-cyan: #0598bc;
  --bolt-terminal-white: #555555;
  --bolt-terminal-brightBlack: #686868;
  --bolt-terminal-brightRed: #cd3131;
  --bolt-terminal-brightGreen: #00bc00;
  --bolt-terminal-brightYellow: #949800;
  --bolt-terminal-brightBlue: #0451a5;
  --bolt-terminal-brightMagenta: #bc05bc;
  --bolt-terminal-brightCyan: #0598bc;
  --bolt-terminal-brightWhite: #a5a5a5;
  --modern-scrollbar-thumb-background: rgba(100, 100, 100, 0.3);
  --modern-scrollbar-thumb-backgroundHover: rgba(74, 74, 74, 0.8);
}

/* Color Tokens Dark Theme */
:root,
:root[data-theme=dark] {
  --bolt-elements-borderColor: #FFFFFF1a;
  --bolt-elements-borderColorActive: #9C7DFF;
  --bolt-elements-bg-depth-1: #0A0A0A;
  --bolt-elements-bg-depth-2: #171717;
  --bolt-elements-bg-depth-3: #262626;
  --bolt-elements-bg-depth-4: #FFFFFF0d;
  --bolt-elements-textPrimary: #FFFFFF;
  --bolt-elements-textSecondary: #A3A3A3;
  --bolt-elements-textTertiary: #737373;
  --bolt-elements-code-background: #262626;
  --bolt-elements-code-text: #FFFFFF;
  --bolt-elements-button-primary-background: #9C7DFF1a;
  --bolt-elements-button-primary-backgroundHover: #9C7DFF33;
  --bolt-elements-button-primary-text: #9C7DFF;
  --bolt-elements-button-secondary-background: #FFFFFF0d;
  --bolt-elements-button-secondary-backgroundHover: #FFFFFF1a;
  --bolt-elements-button-secondary-text: #FFFFFF;
  --bolt-elements-button-danger-background: #EF44441a;
  --bolt-elements-button-danger-backgroundHover: #EF444433;
  --bolt-elements-button-danger-text: #EF4444;
  --bolt-elements-item-contentDefault: #FFFFFF80;
  --bolt-elements-item-contentActive: #FFFFFF;
  --bolt-elements-item-contentAccent: #9C7DFF;
  --bolt-elements-item-contentDanger: #EF4444;
  --bolt-elements-item-backgroundDefault: rgba(255, 255, 255, 0);
  --bolt-elements-item-backgroundActive: #FFFFFF1a;
  --bolt-elements-item-backgroundAccent: #9C7DFF1a;
  --bolt-elements-item-backgroundDanger: #EF44441a;
  --bolt-elements-loader-background: #1717171a;
  --bolt-elements-loader-progress: #9C7DFF;
  --bolt-elements-artifacts-background: #171717;
  --bolt-elements-artifacts-backgroundHover: #FFFFFF0d;
  --bolt-elements-artifacts-borderColor: var(--bolt-elements-borderColor);
  --bolt-elements-artifacts-inlineCode-background: #262626;
  --bolt-elements-artifacts-inlineCode-text: #FFFFFF;
  --bolt-elements-actions-background: #171717;
  --bolt-elements-actions-code-background: #262626;
  --bolt-elements-messages-background: #262626;
  --bolt-elements-messages-linkColor: #9C7DFF;
  --bolt-elements-messages-code-background: #171717;
  --bolt-elements-messages-inlineCode-background: #404040;
  --bolt-elements-messages-inlineCode-text: var(--bolt-elements-textPrimary);
  --bolt-elements-icon-success: #4ADE80;
  --bolt-elements-icon-error: #F87171;
  --bolt-elements-icon-primary: #0A0A0A;
  --bolt-elements-icon-secondary: #525252;
  --bolt-elements-icon-tertiary: #737373;
  --bolt-elements-dividerColor: #F5F5F5;
  --bolt-elements-prompt-background: #171717cc;
  --bolt-elements-sidebar-dropdownShadow: #1717174d;
  --bolt-elements-sidebar-buttonBackgroundDefault: #9C7DFF1a;
  --bolt-elements-sidebar-buttonBackgroundHover: #9C7DFF33;
  --bolt-elements-sidebar-buttonText: #9C7DFF;
  --bolt-elements-preview-addressBar-background: var(--bolt-elements-bg-depth-1);
  --bolt-elements-preview-addressBar-backgroundHover: #FFFFFF0d;
  --bolt-elements-preview-addressBar-backgroundActive: var(--bolt-elements-bg-depth-1);
  --bolt-elements-preview-addressBar-text: var(--bolt-elements-textSecondary);
  --bolt-elements-preview-addressBar-textActive: var(--bolt-elements-textPrimary);
  --bolt-elements-terminals-background: var(--bolt-elements-bg-depth-1);
  --bolt-elements-terminals-buttonBackground: var(--bolt-elements-bg-depth-3);
  --bolt-elements-cta-background: #FFFFFF1a;
  --bolt-elements-cta-text: #FFFFFF;
  /* Terminal Colors */
  --bolt-terminal-background: var(--bolt-elements-terminals-background);
  --bolt-terminal-foreground: #eff0eb;
  --bolt-terminal-selection-background: #97979b33;
  --bolt-terminal-black: #000000;
  --bolt-terminal-red: #ff5c57;
  --bolt-terminal-green: #5af78e;
  --bolt-terminal-yellow: #f3f99d;
  --bolt-terminal-blue: #57c7ff;
  --bolt-terminal-magenta: #ff6ac1;
  --bolt-terminal-cyan: #9aedfe;
  --bolt-terminal-white: #f1f1f0;
  --bolt-terminal-brightBlack: #686868;
  --bolt-terminal-brightRed: #ff5c57;
  --bolt-terminal-brightGreen: #5af78e;
  --bolt-terminal-brightYellow: #f3f99d;
  --bolt-terminal-brightBlue: #57c7ff;
  --bolt-terminal-brightMagenta: #ff6ac1;
  --bolt-terminal-brightCyan: #9aedfe;
  --bolt-terminal-brightWhite: #f1f1f0;
  --modern-scrollbar-thumb-background: rgba(100, 100, 100, 0.3);
  --modern-scrollbar-thumb-backgroundHover: rgba(10, 10, 10, 0.8);
}

/*
 * Element Tokens
 *
 * Hierarchy: Element Token -> (Element Token | Color Tokens) -> Primitives
 */
:root {
  --header-height: 54px;
  --chat-max-width: 35rem;
  --chat-min-width: 575px;
  --workbench-width: min(calc(100% - var(--chat-min-width)), 2536px);
  --workbench-inner-width: var(--workbench-width);
  --workbench-left: calc(100% - var(--workbench-width));
  /* Toasts */
  --toastify-color-progress-success: var(--bolt-elements-icon-success);
  --toastify-color-progress-error: var(--bolt-elements-icon-error);
  /* Terminal */
  --bolt-elements-terminal-backgroundColor: var(--bolt-terminal-background);
  --bolt-elements-terminal-textColor: var(--bolt-terminal-foreground);
  --bolt-elements-terminal-cursorColor: var(--bolt-terminal-foreground);
  --bolt-elements-terminal-selection-backgroundColor: var(--bolt-terminal-selection-background);
  --bolt-elements-terminal-color-black: var(--bolt-terminal-black);
  --bolt-elements-terminal-color-red: var(--bolt-terminal-red);
  --bolt-elements-terminal-color-green: var(--bolt-terminal-green);
  --bolt-elements-terminal-color-yellow: var(--bolt-terminal-yellow);
  --bolt-elements-terminal-color-blue: var(--bolt-terminal-blue);
  --bolt-elements-terminal-color-magenta: var(--bolt-terminal-magenta);
  --bolt-elements-terminal-color-cyan: var(--bolt-terminal-cyan);
  --bolt-elements-terminal-color-white: var(--bolt-terminal-white);
  --bolt-elements-terminal-color-brightBlack: var(--bolt-terminal-brightBlack);
  --bolt-elements-terminal-color-brightRed: var(--bolt-terminal-brightRed);
  --bolt-elements-terminal-color-brightGreen: var(--bolt-terminal-brightGreen);
  --bolt-elements-terminal-color-brightYellow: var(--bolt-terminal-brightYellow);
  --bolt-elements-terminal-color-brightBlue: var(--bolt-terminal-brightBlue);
  --bolt-elements-terminal-color-brightMagenta: var(--bolt-terminal-brightMagenta);
  --bolt-elements-terminal-color-brightCyan: var(--bolt-terminal-brightCyan);
  --bolt-elements-terminal-color-brightWhite: var(--bolt-terminal-brightWhite);
}

.z-logo {
  z-index: 998;
}

.z-sidebar {
  z-index: 997;
}

.z-port-dropdown {
  z-index: 996;
}

.z-iframe-overlay {
  z-index: 995;
}

.z-prompt {
  z-index: 2;
}

.z-workbench {
  z-index: 3;
}

.z-file-tree-breadcrumb {
  z-index: 998;
}

.z-max {
  z-index: 999;
}

.animated {
  animation-fill-mode: both;
  animation-duration: var(--animate-duration, 0.2s);
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.animated.fadeInRight {
  animation-name: fadeInRight;
}
.animated.fadeOutRight {
  animation-name: fadeOutRight;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
.dropdown-animation {
  opacity: 0;
  animation: fadeMoveDown 0.15s forwards;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeMoveDown {
  to {
    opacity: 1;
    transform: translateY(6px);
  }
}
.xterm {
  padding: 1rem;
}

[data-resize-handle] {
  position: relative;
}
[data-resize-handle][data-panel-group-direction=horizontal]:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -5px;
  z-index: 999;
}
[data-resize-handle][data-panel-group-direction=vertical]:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  bottom: -6px;
  z-index: 999;
}
[data-resize-handle][data-resize-handle-state=hover]:after, [data-resize-handle][data-resize-handle-state=drag]:after {
  background-color: rgba(136, 136, 136, 0.1333333333);
}

.actions .shiki {
  background-color: var(--bolt-elements-actions-code-background) !important;
}

.shiki:not(:has(.actions), .actions *) {
  background-color: var(--bolt-elements-messages-code-background) !important;
}

:root {
  --cm-backgroundColor: var(--bolt-elements-editor-backgroundColor, var(--bolt-elements-bg-depth-1));
  --cm-textColor: var(--bolt-elements-editor-textColor, var(--bolt-elements-textPrimary));
  /* Gutter */
  --cm-gutter-backgroundColor: var(--bolt-elements-editor-gutter-backgroundColor, var(--cm-backgroundColor));
  --cm-gutter-textColor: var(--bolt-elements-editor-gutter-textColor, var(--bolt-elements-textSecondary));
  --cm-gutter-activeLineTextColor: var(--bolt-elements-editor-gutter-activeLineTextColor, var(--cm-gutter-textColor));
  /* Fold Gutter */
  --cm-foldGutter-textColor: var(--bolt-elements-editor-foldGutter-textColor, var(--cm-gutter-textColor));
  --cm-foldGutter-textColorHover: var(--bolt-elements-editor-foldGutter-textColorHover, var(--cm-gutter-textColor));
  /* Active Line */
  --cm-activeLineBackgroundColor: var(--bolt-elements-editor-activeLineBackgroundColor, rgb(224 231 235 / 30%));
  /* Cursor */
  --cm-cursor-width: 2px;
  --cm-cursor-backgroundColor: var(--bolt-elements-editor-cursorColor, var(--bolt-elements-textSecondary));
  /* Matching Brackets */
  --cm-matching-bracket: var(--bolt-elements-editor-matchingBracketBackgroundColor, rgb(50 140 130 / 0.3));
  /* Selection */
  --cm-selection-backgroundColorFocused: var(--bolt-elements-editor-selection-backgroundColor, #42b4ff);
  --cm-selection-backgroundOpacityFocused: var(--bolt-elements-editor-selection-backgroundOpacity, 0.3);
  --cm-selection-backgroundColorBlured: var(--bolt-elements-editor-selection-inactiveBackgroundColor, #c9e9ff);
  --cm-selection-backgroundOpacityBlured: var(--bolt-elements-editor-selection-inactiveBackgroundOpacity, 0.3);
  /* Panels */
  --cm-panels-borderColor: var(--bolt-elements-editor-panels-borderColor, var(--bolt-elements-borderColor));
  /* Search */
  --cm-search-backgroundColor: var(--bolt-elements-editor-search-backgroundColor, var(--cm-backgroundColor));
  --cm-search-textColor: var(--bolt-elements-editor-search-textColor, var(--bolt-elements-textSecondary));
  --cm-search-closeButton-backgroundColor: var(--bolt-elements-editor-search-closeButton-backgroundColor, transparent);
  --cm-search-closeButton-backgroundColorHover: var(
    --bolt-elements-editor-search-closeButton-backgroundColorHover,
    var(--bolt-elements-item-backgroundActive)
  );
  --cm-search-closeButton-textColor: var(
    --bolt-elements-editor-search-closeButton-textColor,
    var(--bolt-elements-item-contentDefault)
  );
  --cm-search-closeButton-textColorHover: var(
    --bolt-elements-editor-search-closeButton-textColorHover,
    var(--bolt-elements-item-contentActive)
  );
  --cm-search-button-backgroundColor: var(
    --bolt-elements-editor-search-button-backgroundColor,
    var(--bolt-elements-item-backgroundDefault)
  );
  --cm-search-button-backgroundColorHover: var(
    --bolt-elements-editor-search-button-backgroundColorHover,
    var(--bolt-elements-item-backgroundActive)
  );
  --cm-search-button-textColor: var(--bolt-elements-editor-search-button-textColor, var(--bolt-elements-textSecondary));
  --cm-search-button-textColorHover: var(
    --bolt-elements-editor-search-button-textColorHover,
    var(--bolt-elements-textPrimary)
  );
  --cm-search-button-borderColor: var(--bolt-elements-editor-search-button-borderColor, transparent);
  --cm-search-button-borderColorHover: var(--bolt-elements-editor-search-button-borderColorHover, transparent);
  --cm-search-button-borderColorFocused: var(
    --bolt-elements-editor-search-button-borderColorFocused,
    var(--bolt-elements-borderColorActive)
  );
  --cm-search-input-backgroundColor: var(--bolt-elements-editor-search-input-backgroundColor, transparent);
  --cm-search-input-textColor: var(--bolt-elements-editor-search-input-textColor, var(--bolt-elements-textPrimary));
  --cm-search-input-borderColor: var(--bolt-elements-editor-search-input-borderColor, var(--bolt-elements-borderColor));
  --cm-search-input-borderColorFocused: var(
    --bolt-elements-editor-search-input-borderColorFocused,
    var(--bolt-elements-borderColorActive)
  );
  /* Tooltip */
  --cm-tooltip-backgroundColor: var(--bolt-elements-editor-tooltip-backgroundColor, var(--cm-backgroundColor));
  --cm-tooltip-textColor: var(--bolt-elements-editor-tooltip-textColor, var(--bolt-elements-textPrimary));
  --cm-tooltip-backgroundColorSelected: var(
    --bolt-elements-editor-tooltip-backgroundColorSelected,
    #9C7DFF4d
  );
  --cm-tooltip-textColorSelected: var(
    --bolt-elements-editor-tooltip-textColorSelected,
    var(--bolt-elements-textPrimary)
  );
  --cm-tooltip-borderColor: var(--bolt-elements-editor-tooltip-borderColor, var(--bolt-elements-borderColor));
  --cm-searchMatch-backgroundColor: var(--bolt-elements-editor-searchMatch-backgroundColor, rgba(234, 92, 0, 0.33));
}

html[data-theme=light] {
  --bolt-elements-editor-gutter-textColor: #237893;
  --bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-elements-textPrimary);
  --bolt-elements-editor-foldGutter-textColorHover: var(--bolt-elements-textPrimary);
  --bolt-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 5%);
  --bolt-elements-editor-tooltip-backgroundColorSelected: #9C7DFF33;
  --bolt-elements-editor-search-button-backgroundColor: #F5F5F5;
  --bolt-elements-editor-search-button-backgroundColorHover: #1717171a;
}

html[data-theme=dark] {
  --cm-backgroundColor: var(--bolt-elements-bg-depth-2);
  --bolt-elements-editor-gutter-textColor: var(--bolt-elements-textTertiary);
  --bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-elements-textSecondary);
  --bolt-elements-editor-selection-inactiveBackgroundOpacity: 0.3;
  --bolt-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
  --bolt-elements-editor-foldGutter-textColorHover: var(--bolt-elements-textPrimary);
  --bolt-elements-editor-matchingBracketBackgroundColor: rgba(66, 180, 255, 0.3);
  --bolt-elements-editor-search-button-backgroundColor: #262626;
  --bolt-elements-editor-search-button-backgroundColorHover: #FFFFFF1a;
}

.Toastify__toast {
  --un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
  background-color: var(--bolt-elements-bg-depth-2);
  color: var(--bolt-elements-textPrimary);
  border: 1px solid var(--bolt-elements-borderColor);
}

.Toastify__close-button {
  color: var(--bolt-elements-item-contentDefault);
  opacity: 1;
  transition: none;
}
.Toastify__close-button:hover {
  color: var(--bolt-elements-item-contentActive);
}

html,
body {
  height: 100%;
  width: 100%;
}

:root {
  --gradient-opacity: 0.8;
  --primary-color: rgba(158, 117, 240, var(--gradient-opacity));
  --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
  --accent-color: rgba(128, 59, 239, var(--gradient-opacity));
}

.modern-scrollbar {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--modern-scrollbar-thumb-backgroundHover) transparent;
}
.modern-scrollbar::-webkit-scrollbar {
  width: 2px;
  height: 4px;
}
.modern-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.modern-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--modern-scrollbar-thumb-background);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease-in-out;
}
.modern-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--modern-scrollbar-thumb-backgroundHover);
}

.modern-scrollbar-invert {
  scrollbar-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%) transparent;
}
.modern-scrollbar-invert::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 70%);
}
.modern-scrollbar-invert::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%);
}