:root { --copilot-kit-primary-color: #1c1c1c; --copilot-kit-contrast-color: #fff; --copilot-kit-background-color: #fff; --copilot-kit-input-background-color: #fbfbfb; --copilot-kit-secondary-color: #fff; --copilot-kit-secondary-contrast-color: #1c1c1c; --copilot-kit-separator-color: #c8c8c8; --copilot-kit-muted-color: #c8c8c8; --copilot-kit-error-background: #fef2f2; --copilot-kit-error-border: #fecaca; --copilot-kit-error-text: #dc2626; --copilot-kit-shadow-sm: 0 1px 2px 0 #0000000d; --copilot-kit-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f; --copilot-kit-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d; --copilot-kit-dev-console-bg: #f8f8fa; --copilot-kit-dev-console-text: black; } .dark, html.dark, body.dark, [data-theme="dark"], html[style*="color-scheme: dark"], body[style*="color-scheme: dark"] :root { --copilot-kit-primary-color: #fff; --copilot-kit-contrast-color: #1c1c1c; --copilot-kit-background-color: #111; --copilot-kit-input-background-color: #2c2c2c; --copilot-kit-secondary-color: #1c1c1c; --copilot-kit-secondary-contrast-color: #fff; --copilot-kit-separator-color: #2d2d2d; --copilot-kit-muted-color: #2d2d2d; --copilot-kit-error-background: #7f1d1d; --copilot-kit-error-border: #dc2626; --copilot-kit-error-text: #fca5a5; --copilot-kit-shadow-sm: 0 1px 2px 0 #0000004d; --copilot-kit-shadow-md: 0 4px 6px -1px #0006, 0 2px 4px -1px #0000004d; --copilot-kit-shadow-lg: 0 10px 15px -3px #0006, 0 4px 6px -2px #0000004d; } .copilotKitPopup { z-index: 30; -webkit-text-size-adjust: 100%; tab-size: 4; font-feature-settings: normal; font-variation-settings: normal; touch-action: manipulation; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; line-height: 1.5; position: fixed; bottom: 1rem; right: 1rem; } .copilotKitPopup svg { vertical-align: middle; display: inline-block; } .copilotKitSidebar { z-index: 30; -webkit-text-size-adjust: 100%; tab-size: 4; font-feature-settings: normal; font-variation-settings: normal; touch-action: manipulation; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; line-height: 1.5; position: fixed; bottom: 1rem; right: 1rem; } .copilotKitSidebar svg { vertical-align: middle; display: inline-block; } .copilotKitSidebarContentWrapper { margin-right: 0; transition: margin-right 0.3s; overflow: visible; } @media (min-width: 640px) { .copilotKitSidebarContentWrapper.sidebarExpanded { margin-right: 28rem; } } .copilotKitButton { border: 1px solid var(--copilot-kit-primary-color); background-color: var(--copilot-kit-primary-color); width: 3.5rem; height: 3.5rem; color: var(--copilot-kit-contrast-color); cursor: pointer; box-shadow: var(--copilot-kit-shadow-sm); border-radius: 50%; outline: none; justify-content: center; align-items: center; transition: all 0.2s; display: flex; position: relative; transform: scale(1); } .copilotKitButton:hover { box-shadow: var(--copilot-kit-shadow-md); transform: scale(1.05); } .copilotKitButton:active { box-shadow: var(--copilot-kit-shadow-sm); transform: scale(0.95); } .copilotKitButtonIcon { justify-content: center; align-items: center; transition: opacity 0.1s, transform 0.3s; display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .copilotKitButtonIcon svg { width: 1.5rem; height: 1.5rem; } .copilotKitButton.open .copilotKitButtonIconOpen { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(90deg); } .copilotKitButton.open .copilotKitButtonIconClose, .copilotKitButton:not(.open) .copilotKitButtonIconOpen { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } .copilotKitButton:not(.open) .copilotKitButtonIconClose { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(-90deg); } .copilotKitHeader { height: 56px; color: var(--copilot-kit-primary-color); border-bottom: 1px solid var(--copilot-kit-separator-color); background-color: var(--copilot-kit-contrast-color); z-index: 2; border-top-left-radius: 0; border-top-right-radius: 0; justify-content: space-between; align-items: center; padding-left: 1.5rem; font-weight: 500; display: flex; position: relative; } .copilotKitSidebar .copilotKitHeader { border-radius: 0; } .copilotKitHeaderControls { display: flex; } .copilotKitHeaderCloseButton { background: 0 0; border: none; } @media (min-width: 640px) { .copilotKitHeader { border-top-left-radius: 8px; border-top-right-radius: 8px; padding-left: 1.5rem; padding-right: 24px; } } .copilotKitHeader > button { color: var(--copilot-kit-muted-color); cursor: pointer; background-color: #0000; border: 0; border-radius: 50%; outline: none; justify-content: center; align-items: center; width: 35px; height: 35px; padding: 8px; transition: background-color 0.2s; display: flex; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); } .copilotKitHeader > button:hover { color: color-mix(in srgb, var(--copilot-kit-muted-color) 80%, black); } .copilotKitHeader > button:focus { outline: none; } .copilotKitInput { cursor: text; background-color: var(--copilot-kit-input-background-color); border: 1px solid var(--copilot-kit-separator-color); border-radius: 20px; width: 95%; min-height: 75px; margin: 0 auto; padding: 12px 14px; position: relative; } .copilotKitInputContainer { background: var(--copilot-kit-background-color); border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem; width: 100%; padding: 0 0 15px; } .copilotKitSidebar .copilotKitInputContainer { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .copilotKitInputControlButton { cursor: pointer; color: #00000040; appearance: button; text-transform: none; font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; text-indent: 0; text-shadow: none; text-align: center; background-color: #0000; background-image: none; border: 0; width: 24px; height: 24px; margin: 0; padding: 0; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; transform: scale(1); } .copilotKitInputControlButton:not([disabled]) { color: var(--copilot-kit-primary-color); } .copilotKitInputControlButton:not([disabled]):hover { color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black); transform: scale(1.05); } .copilotKitInputControlButton[disabled] { color: var(--copilot-kit-muted-color); cursor: default; } .copilotKitInputControls { gap: 3px; display: flex; } .copilotKitInput > textarea { outline-offset: 2px; resize: none; white-space: pre-wrap; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: text; font-family: inherit; font-size: 0.875rem; line-height: 1.5rem; font-weight: inherit; color: var(--copilot-kit-secondary-contrast-color); background-color: #0000; border: 0; outline: 2px solid #0000; flex: 1; width: 100%; margin: 0; padding: 0; } .copilotKitInput > textarea::placeholder { color: gray; opacity: 1; } .copilotKitInputControlButton.copilotKitPushToTalkRecording { color: #fff; background-color: #ec0000; border-radius: 50%; animation: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite copilotKitPulseAnimation; } .copilotKitInput textarea::-webkit-scrollbar { width: 9px; } .copilotKitInput textarea::-webkit-scrollbar-track { background: 0 0; } .copilotKitInput textarea::-webkit-scrollbar-thumb { cursor: pointer; background-color: #c8c8c8; background-clip: content-box; border: 2px solid #0000; border-radius: 10px; } .copilotKitInput textarea::-webkit-scrollbar-thumb:hover { background-color: #a0a0a0; } .poweredByContainer { padding: 0; } .poweredBy { background: var(--copilot-kit-background-color) !important; visibility: visible !important; text-align: center !important; color: #d6d6d6 !important; margin: 0 !important; padding: 3px 0 !important; font-size: 12px !important; display: block !important; position: static !important; } .dark, html.dark, body.dark, [data-theme="dark"], html[style*="color-scheme: dark"], body[style*="color-scheme: dark"] .poweredBy { color: #454545 !important; } .copilotKitMessages { background-color: var(--copilot-kit-background-color); color: var(--copilot-kit-secondary-contrast-color); z-index: 1; flex-direction: column; flex: 1; justify-content: space-between; display: flex; overflow-y: scroll; } .copilotKitMessagesContainer { flex-direction: column; padding: 1rem 24px; display: flex; } .copilotKitMessagesFooter { flex-direction: column; justify-content: flex-start; width: 97%; margin: 8px auto 0; padding: 0.5rem 0.75rem; display: flex; } .copilotKitMessages::-webkit-scrollbar { width: 6px; } .copilotKitMessages::-webkit-scrollbar-thumb { background-color: var(--copilot-kit-separator-color); border: 2px solid var(--copilot-kit-background-color); border-radius: 10rem; } .copilotKitMessages::-webkit-scrollbar-track-piece:start { background: 0 0; } .copilotKitMessages::-webkit-scrollbar-track-piece:end { background: 0 0; } .copilotKitMessage { overflow-wrap: break-word; border-radius: 15px; max-width: 80%; margin-bottom: 0.5rem; padding: 8px 12px; font-size: 1rem; line-height: 1.5; } .copilotKitMessage.copilotKitUserMessage { background: var(--copilot-kit-primary-color); color: var(--copilot-kit-contrast-color); white-space: pre-wrap; margin-left: auto; font-size: 1rem; line-height: 1.75; } .copilotKitMessage.copilotKitAssistantMessage { max-width: 100%; color: var(--copilot-kit-secondary-contrast-color); background: 0 0; margin-right: auto; padding-left: 0; position: relative; } .copilotKitMessage.copilotKitAssistantMessage .copilotKitMessageControls { opacity: 0; gap: 1rem; padding: 5px 0 0; transition: opacity 0.2s; display: flex; position: absolute; left: 0; } .copilotKitMessageControls.currentMessage { opacity: 1 !important; } .copilotKitMessage.copilotKitAssistantMessage:hover .copilotKitMessageControls { opacity: 1; } @media (max-width: 768px) { .copilotKitMessage.copilotKitAssistantMessage .copilotKitMessageControls { opacity: 1; } } .copilotKitMessageControlButton { width: 20px; height: 20px; color: var(--copilot-kit-primary-color); cursor: pointer; z-index: 10; background: 0 0; border: none; border-radius: 0.5rem; justify-content: center; align-items: center; margin: 0; padding: 0; transition: all 0.2s; display: flex; } .copilotKitMessageControlButton:hover, .copilotKitMessageControlButton:active { color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black); transform: scale(1.05); } .copilotKitMessageControlButton.active { background-color: var(--copilot-kit-primary-color); color: var(--copilot-kit-contrast-color); } .copilotKitMessageControlButton.active:hover { background-color: color-mix( in srgb, var(--copilot-kit-primary-color) 90%, black ); color: var(--copilot-kit-contrast-color); } .copilotKitMessageControlButton svg { pointer-events: none; width: 1rem; height: 1rem; display: block; } .copilotKitMessage.copilotKitAssistantMessage + .copilotKitMessage.copilotKitUserMessage { margin-top: 1.5rem; } .copilotKitCustomAssistantMessage { margin-top: 1.5rem; margin-bottom: 1.5rem; } .copilotKitMessage .inProgressLabel { opacity: 0.7; margin-left: 10px; } @keyframes copilotKitSpinAnimation { to { transform: rotate(360deg); } } .copilotKitSpinner { border: 2px solid var(--copilot-kit-contrast-color); border-top-color: var(--copilot-kit-primary-color); border-radius: 50%; width: 16px; height: 16px; animation: 1s linear infinite copilotKitSpinAnimation; display: inline-block; } @keyframes copilotKitActivityDotAnimation { 0%, 80%, to { opacity: 0.5; transform: scale(0.5); } 40% { opacity: 1; transform: scale(1); } } .copilotKitActivityDot { background-color: var(--copilot-kit-primary-color); border-radius: 50%; width: 6px; height: 6px; animation: 1.4s ease-in-out infinite both copilotKitActivityDotAnimation; display: inline-block; } .copilotKitImageRendering { flex-direction: column; gap: 8px; display: flex; } .copilotKitImageRenderingImage { max-width: 100%; height: auto; box-shadow: var(--copilot-kit-shadow-sm); border-radius: 8px; } .copilotKitImageRenderingContent { color: var(--copilot-kit-secondary-contrast-color); margin-top: 8px; padding: 0 16px; font-size: 0.875rem; line-height: 1.5; } .copilotKitImageRenderingError { border: 1px solid var(--copilot-kit-separator-color); background-color: var(--copilot-kit-input-background-color); border-radius: 8px; flex-direction: column; gap: 8px; padding: 12px; display: flex; } .copilotKitImageRenderingErrorMessage { background-color: var(--copilot-kit-error-background); border: 1px solid var(--copilot-kit-error-border); color: var(--copilot-kit-error-text); border-radius: 6px; align-items: center; gap: 8px; padding: 8px 12px; font-size: 0.875rem; font-weight: 500; display: flex; } .copilotKitImageRenderingErrorMessage:before { content: "⚠️"; font-size: 1rem; } .copilotKitWindow { transform-origin: bottom; background-color: var(--copilot-kit-background-color); opacity: 0; pointer-events: none; border-color: #e5e7eb; border-radius: 0.75rem; flex-direction: column; transition: opacity 0.1s ease-out, transform 0.2s ease-out; display: flex; position: fixed; inset: 0; transform: scale(0.95) translateY(20px); box-shadow: 0 5px 40px #00000029; } .copilotKitSidebar .copilotKitWindow { opacity: 1; border-radius: 0; transform: translate(100%); } .copilotKitWindow.open { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); } .copilotKitSidebar .copilotKitWindow.open { transform: translate(0); } @media (min-width: 640px) { .copilotKitWindow { transform-origin: 100% 100%; border-width: 0; width: 24rem; height: 600px; min-height: 200px; max-height: calc(100% - 6rem); margin-bottom: 1rem; inset: auto 1rem 5rem auto; } .copilotKitSidebar .copilotKitWindow { width: 28rem; min-height: 100%; max-height: none; margin-bottom: 0; inset: auto 0 0 auto; } } .copilotKitActivityDot1 { animation: 1.05s infinite copilotKitActivityDotsAnimation; } .copilotKitActivityDot2 { animation-delay: 0.1s; } .copilotKitActivityDot3 { animation-delay: 0.2s; } @keyframes copilotKitActivityDotsAnimation { 0%, 57.14% { animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); transform: translate(0); } 28.57% { animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); transform: translateY(-6px); } to { transform: translate(0); } } @keyframes copilotKitPulseAnimation { 50% { opacity: 0.5; } } h1.copilotKitMarkdownElement, h2.copilotKitMarkdownElement, h3.copilotKitMarkdownElement, h4.copilotKitMarkdownElement, h5.copilotKitMarkdownElement, h6.copilotKitMarkdownElement { font-weight: 700; line-height: 1.2; } h1.copilotKitMarkdownElement:not(:last-child), h2.copilotKitMarkdownElement:not(:last-child), h3.copilotKitMarkdownElement:not(:last-child), h4.copilotKitMarkdownElement:not(:last-child), h5.copilotKitMarkdownElement:not(:last-child), h6.copilotKitMarkdownElement:not(:last-child) { margin-bottom: 1rem; } h1.copilotKitMarkdownElement { font-size: 1.5em; } h2.copilotKitMarkdownElement { font-size: 1.25em; font-weight: 600; } h3.copilotKitMarkdownElement { font-size: 1.1em; } h4.copilotKitMarkdownElement { font-size: 1em; } h5.copilotKitMarkdownElement { font-size: 0.9em; } h6.copilotKitMarkdownElement { font-size: 0.8em; } a.copilotKitMarkdownElement { color: #00f; text-decoration: underline; } p.copilotKitMarkdownElement { margin: 0; padding: 0; font-size: 1rem; line-height: 1.75; } p.copilotKitMarkdownElement:not(:last-child), pre.copilotKitMarkdownElement:not(:last-child), ol.copilotKitMarkdownElement:not(:last-child), ul.copilotKitMarkdownElement:not(:last-child), blockquote.copilotKitMarkdownElement:not(:last-child) { margin-bottom: 1.25em; } blockquote.copilotKitMarkdownElement { border-color: #8e8ea0; border-left-style: solid; border-left-width: 2px; padding-left: 10px; line-height: 1.2; } blockquote.copilotKitMarkdownElement p { padding: 0.7em 0; } ul.copilotKitMarkdownElement { padding-left: 20px; list-style-type: disc; overflow: visible; } li.copilotKitMarkdownElement { list-style-type: inherit; margin-left: 0; padding-left: 0; list-style-position: outside; position: relative; overflow: visible; } .copilotKitCodeBlock { background-color: #09090b; border-radius: 0.375rem; width: 100%; position: relative; } .copilotKitCodeBlockToolbar { color: #e4e4e4; background-color: #27272a; border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; justify-content: space-between; align-items: center; width: 100%; padding-top: 0.09rem; padding-bottom: 0.09rem; padding-left: 1rem; font-family: sans-serif; display: flex; } .copilotKitCodeBlockToolbarLanguage { text-transform: lowercase; font-size: 0.75rem; line-height: 1rem; } .copilotKitCodeBlockToolbarButtons { align-items: center; margin-left: 0.25rem; margin-right: 0.25rem; display: flex; } .copilotKitCodeBlockToolbarButton { border-radius: 0.375rem; justify-content: center; align-items: center; height: 2.5rem; margin: 2px; padding: 3px; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; display: inline-flex; } .copilotKitCodeBlockToolbarButton:hover { background-color: #37373a; } .copilotKitInlineCode { background-color: var(--copilot-kit-input-background-color); border: 1px solid var(--copilot-kit-separator-color); border-radius: 0.375rem; padding: 0.05rem 0.4rem; font-size: 15px; } .copilotKitMessages footer .suggestions { flex-wrap: wrap; gap: 6px; display: flex; } .copilotKitMessages footer h6 { margin-bottom: 8px; font-size: 0.7rem; font-weight: 500; } .copilotKitMessages footer .suggestions .suggestion { border: 1px solid var(--copilot-kit-muted-color); color: var(--copilot-kit-secondary-contrast-color); border-radius: 15px; padding: 6px 10px; font-size: 0.7rem; box-shadow: 0 5px 5px #00000003, 0 2px 3px #00000005; } .copilotKitMessages footer .suggestions .suggestion.loading { color: var(--copilot-kit-secondary-contrast-color); border: none; padding: 0; font-size: 0.7rem; } .copilotKitMessages footer .suggestions button { transition: transform 0.3s; } .copilotKitMessages footer .suggestions button:not(:disabled):hover { transform: scale(1.03); } .copilotKitMessages footer .suggestions button:disabled { cursor: wait; } .copilotKitMessages footer .suggestions button svg { margin-right: 6px; } .copilotKitChat { z-index: 30; -webkit-text-size-adjust: 100%; tab-size: 4; background: var(--copilot-kit-background-color); font-feature-settings: normal; font-variation-settings: normal; touch-action: manipulation; flex-direction: column; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; line-height: 1.5; display: flex; } .copilotKitChat svg { vertical-align: middle; display: inline-block; } .copilotKitChat .copilotKitMessages { flex-grow: 1; } .copilotKitDevConsole { align-items: center; gap: 5px; margin: 0 15px; display: flex; } .copilotKitDevConsole.copilotKitDevConsoleWarnOutdated { background-color: var(--copilot-kit-dev-console-bg); } .copilotKitDevConsole .copilotKitVersionInfo { background: #ebb305; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 3px 5px; font-size: 0.8rem; display: flex; position: absolute; bottom: -25px; left: 0; } .copilotKitDevConsole .copilotKitVersionInfo button { background-color: var(--copilot-kit-dev-console-bg); text-align: left; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #979797; border-radius: 4px; width: 260px; padding: 1px 12px 1px 5px; font-family: monospace; font-size: 11px; font-weight: 400; display: inline-block; overflow: hidden; } .copilotKitDevConsole .copilotKitVersionInfo aside { color: #7f7a7a; margin-left: 5px; font-weight: 400; display: inline; } .copilotKitDevConsole .copilotKitVersionInfo svg { margin-top: -3px; margin-left: 3px; } .copilotKitDevConsole .copilotKitDebugMenuTriggerButton { border: 1px solid var(--copilot-kit-muted-color); background-color: #0000; border-radius: 20px; outline: none; justify-content: center; align-items: center; height: 30px; padding: 0 10px; font-size: 11px; font-weight: 700; display: flex; } .copilotKitDebugMenuTriggerButton.compact { width: 35px; color: var(--copilot-kit-dev-console-bg); outline: none; justify-content: center; font-size: 8px; } .copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover { background-color: color-mix( in srgb, var(--copilot-kit-dev-console-bg) 85%, black ); color: var(--copilot-kit-dev-console-text); } .dark, html.dark, body.dark, [data-theme="dark"], html[style*="color-scheme: dark"], body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTriggerButton { color: #fff; } .dark, html.dark, body.dark, [data-theme="dark"], html[style*="color-scheme: dark"], body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover { background-color: color-mix( in srgb, var(--copilot-kit-dev-console-bg) 20%, black ); } .copilotKitDevConsole .copilotKitDebugMenuTriggerButton > svg { margin-left: 10px; } .copilotKitDebugMenu { --copilot-kit-dev-console-border: color-mix( in srgb, var(--copilot-kit-dev-console-bg) 80%, black ); background-color: var(--copilot-kit-dev-console-bg); border: 1px solid var(--copilot-kit-dev-console-border); border-radius: 6px; outline: none; margin-top: 2px; padding: 0.25rem; font-size: 13px; } .copilotKitDebugMenuItem { text-align: left; cursor: pointer; width: 100%; color: var(--copilot-kit-dev-console-text); background: 0 0; border: none; padding: 3px 10px; display: block; } .copilotKitDebugMenuItem:hover { background-color: color-mix( in srgb, var(--copilot-kit-dev-console-bg) 95%, black ); border-radius: 4px; } .copilotKitDebugMenu[data-closed] { opacity: 0; transform: scale(0.95); } .copilotKitDebugMenu hr { background-color: var(--copilot-kit-dev-console-border); border: none; height: 1px; margin: 0.25rem; } .copilotKitHelpModal { background-color: var(--copilot-kit-dev-console-bg); color: var(--copilot-kit-dev-console-text); } .copilotKitHelpItemButton { text-align: center; border: 1px solid var(--copilot-kit-muted-color); width: 100%; color: var(--copilot-kit-dev-console-text); background-color: var(--copilot-kit-dev-console-bg); border-radius: 15px; padding: 4px 6px; font-size: 0.8rem; display: block; box-shadow: 0 5px 5px #00000003, 0 2px 3px #00000005; } .copilotKitHelpItemButton:hover { background-color: color-mix( in srgb, var(--copilot-kit-dev-console-bg) 95%, black ); } .copilotkit-response { text-align: right; } .copilotkit-response-content { color: #4b5563; text-align: left; background-color: #f9fafb; border-radius: 0.25rem; margin-bottom: 0.5rem; padding: 0.5rem; font-size: 0.875rem; } .copilotkit-response-actions { flex-direction: column; align-items: flex-end; display: inline-flex; } .copilotkit-response-label { color: #6b7280; align-items: center; margin-bottom: 0.25rem; font-size: 0.75rem; display: flex; } .copilotkit-toggle-button { cursor: pointer; background: 0 0; border: none; justify-content: center; align-items: center; margin-right: 0.25rem; padding: 0; display: flex; } .copilotkit-icon { color: #6b7280; width: 0.75rem; height: 0.75rem; } .copilotkit-response-buttons { gap: 0.5rem; display: flex; } .copilotkit-response-button { color: #4b5563; cursor: pointer; background-color: #f3f4f6; border: none; border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; transition: background-color 0.2s; } .copilotkit-response-button:hover { background-color: #e5e7eb; } .copilotkit-response-button:focus { outline: none; } .copilotkit-response-completed-feedback { background-color: #f9fafb; border-radius: 0.375rem; align-items: center; padding: 0.5rem; display: inline-flex; } .copilotkit-response-completed-feedback span { color: #4b5563; font-size: 0.75rem; font-weight: 500; } .copilotkit-state { margin-bottom: 1rem; font-size: 0.875rem; } .copilotkit-state-header { cursor: pointer; -webkit-user-select: none; user-select: none; align-items: center; gap: 0.25rem; margin-bottom: 0.25rem; display: flex; } .copilotkit-state-label { color: #4b5563; font-size: 0.875rem; } .copilotkit-state-label-loading { align-items: center; animation: 1.5s infinite pulse; display: inline-flex; } .copilotkit-state-content { border-left: 1px solid #e5e7eb; max-height: 250px; margin-left: 0.375rem; padding-top: 0.375rem; padding-left: 1rem; overflow: auto; } .copilotkit-state-item { margin-bottom: 0.25rem; padding: 0.25rem 0; transition: all 0.3s; } .copilotkit-state-item-newest { animation: 0.5s ease-out appear; } .copilotkit-state-item-header { opacity: 0.7; font-size: 0.75rem; } .copilotkit-state-item-thought { opacity: 0.8; margin-top: 0.125rem; font-size: 0.75rem; } .copilotkit-state-item-result { margin-top: 0.125rem; font-size: 0.75rem; } .copilotkit-state-item-description { opacity: 0.8; margin-top: 0.125rem; font-size: 0.75rem; } .copilotkit-state-empty { opacity: 0.7; padding: 0.25rem 0; font-size: 0.75rem; } .copilotkit-skeleton { padding: 0.125rem 0; animation: 1.5s infinite pulse; } .copilotkit-skeleton-header { justify-content: space-between; display: flex; } .copilotkit-skeleton-title { background-color: #e5e7eb; border-radius: 0.25rem; width: 4rem; height: 0.625rem; } .copilotkit-skeleton-subtitle { background-color: #e5e7eb; border-radius: 0.25rem; width: 2rem; height: 0.5rem; } .copilotkit-skeleton-content { background-color: #e5e7eb; border-radius: 0.25rem; height: 1.5rem; margin-top: 0.125rem; } .copilotkit-loader, .copilotkit-spinner { animation: 1.5s linear infinite spin; } @keyframes appear { 0% { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, to { opacity: 0.4; } 50% { opacity: 1; } } @keyframes spin { 0% { transform: rotate(0); } to { transform: rotate(360deg); } } @media (prefers-color-scheme: dark) { .copilotkit-response-content { color: #9ca3af; background-color: #1f2937; } .copilotkit-response-label, .copilotkit-icon { color: #9ca3af; } .copilotkit-response-button { color: #d1d5db; background-color: #1f2937; } .copilotkit-response-button:hover { background-color: #374151; } .copilotkit-response-completed-feedback { background-color: #1f2937; } .copilotkit-response-completed-feedback span { color: #e5e7eb; } .copilotkit-state-label { color: #d1d5db; } .copilotkit-state-content { border-left-color: #374151; } .copilotkit-skeleton-title, .copilotkit-skeleton-subtitle, .copilotkit-skeleton-content { background-color: #374151; } } .ChatRichInput-editor p.is-editor-empty:before { content: attr(data-placeholder); float: left; pointer-events: none; color: #ffffff59; white-space: pre-wrap; max-width: 100%; height: 0; font-size: 13px; line-height: 24px; }