.cw-wrapper {
--cw-primary: var(--dg-chat-primary, #2563eb);
--cw-primary-hover: var(--dg-chat-primary-hover, #1d4ed8);
--cw-on-primary: var(--dg-chat-on-primary, #ffffff);
--cw-text: var(--dg-chat-text, #1e293b);
--cw-text-muted: var(--dg-chat-text-muted, #64748b);
--cw-bg: var(--dg-chat-bg, #f8fafc);
--cw-surface: var(--dg-chat-surface, #ffffff);
--cw-border: var(--dg-chat-border, #e2e8f0);
--cw-success: var(--dg-chat-success, #16a34a);
--cw-success-bg: var(--dg-chat-success-bg, #f0fdf4);
--cw-success-border: var(--dg-chat-success-border, var(--cw-border));
--cw-success-text: var(--dg-chat-success-text, var(--cw-success));
--cw-error: var(--dg-chat-error, #dc2626);
--cw-warning: var(--dg-chat-warning, #d97706);
--cw-bubble-user: var(--dg-chat-bubble-user, var(--cw-primary));
--cw-bubble-user-text: var(--dg-chat-bubble-user-text, var(--cw-on-primary));
--cw-bubble-assistant: var(--dg-chat-bubble-assistant, var(--cw-surface));
--cw-bubble-assistant-text: var(--dg-chat-bubble-assistant-text, var(--cw-text));
--cw-bubble-line-height: var(--dg-chat-bubble-line-height, 1.55);
--cw-bubble-collapse-lines: var(--dg-chat-bubble-collapse-lines, 2);
--cw-bubble-toggle-space: var(--dg-chat-bubble-toggle-space, 28px);
--cw-bubble-font-size-mobile: var(--dg-chat-bubble-font-size-mobile, 0.9375rem);
--cw-bubble-font-size: var(--dg-chat-bubble-font-size, 0.8rem);
--cw-input-font-size-mobile: var(--dg-chat-input-font-size-mobile, 1rem);
--cw-input-font-size: var(--dg-chat-input-font-size, 0.85rem);
--cw-placeholder-font-size: var(--dg-chat-placeholder-font-size, 1em);
--cw-placeholder-font-size-mobile: var(--dg-chat-placeholder-font-size-mobile, 0.875rem);
--cw-bubble-p-gap: var(--dg-chat-bubble-p-gap, 1em);
--cw-bubble-list-indent: var(--dg-chat-bubble-list-indent, 1.4em);
--cw-bubble-li-gap: var(--dg-chat-bubble-li-gap, 0.15em);
--cw-bubble-heading-line-height: var(--dg-chat-bubble-heading-line-height, 1.3);
--cw-bubble-heading-weight: var(--dg-chat-bubble-heading-weight, 600);
--cw-bubble-heading-margin: var(--dg-chat-bubble-heading-margin, 0.6em 0 0.3em);
--cw-bubble-h1-size: var(--dg-chat-bubble-h1-size, 1.25em);
--cw-bubble-h2-size: var(--dg-chat-bubble-h2-size, 1.15em);
--cw-bubble-h3-size: var(--dg-chat-bubble-h3-size, 1.05em);
--cw-lead-reason-size: var(--dg-chat-lead-reason-size, 0.85rem);
--cw-lead-reason-gap: var(--dg-chat-lead-reason-gap, 10px);
--cw-overlay: var(--dg-chat-overlay, rgba(0, 0, 0, 0.12));
--cw-overlay-bg: var(--dg-chat-overlay-bg, var(--cw-surface));
--cw-overlay-border: var(--dg-chat-overlay-border, var(--cw-border));
--cw-overlay-shadow: var(--dg-chat-overlay-shadow, none);
--cw-overlay-radius: var(--dg-chat-overlay-radius, var(--cw-radius-panel));
--cw-overlay-max-height: var(--dg-chat-overlay-max-height, var(--cw-panel-max-height));
--cw-overlay-duration: var(--dg-chat-overlay-duration, 250ms);
--cw-overlay-easing: var(--dg-chat-overlay-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
--cw-overlay-header-padding: var(--dg-chat-overlay-header-padding, 0.25rem 0.5rem 0.25rem 1rem);
--cw-overlay-body-padding: var(--dg-chat-overlay-body-padding, 0.6rem 1rem 0.75rem);
--cw-lead-label-width: var(--dg-chat-lead-label-width, 7rem);
--cw-lead-gap: var(--dg-chat-lead-gap, 0.4rem 0.75rem);
--cw-lead-input-padding: var(--dg-chat-lead-input-padding, 0.35rem 0.5rem);
--cw-lead-input-line-height: var(--dg-chat-lead-input-line-height, 1.25);
--cw-overlay-close-size: var(--dg-chat-overlay-close-size, 2.25rem);
--cw-lead-check-size: var(--dg-chat-lead-check-size, 1rem);
--cw-ele-flash-duration: var(--dg-chat-ele-flash-duration, 450ms);
--cw-icon-close: var(--dg-chat-icon-close, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"));
--cw-icon-plus: var(--dg-chat-icon-plus, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E"));
--cw-icon-menu: var(--dg-chat-icon-menu, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z'/%3E%3C/svg%3E"));
--cw-icon-download: var(--dg-chat-icon-download, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2z'/%3E%3C/svg%3E"));
--cw-header-btn-size: var(--dg-chat-header-btn-size, 1.75rem);
--cw-header-icon-size: var(--dg-chat-header-icon-size, 1.25rem);
--cw-header-close-icon-size: var(--dg-chat-header-close-icon-size, 1.125rem);
--cw-panel-header-padding: var(--dg-chat-panel-header-padding, 0.25rem 0.5rem);
--cw-panel-header-bg: var(--dg-chat-panel-header-bg, transparent);
--cw-panel-header-min-height: var(--dg-chat-panel-header-min-height, auto);
--cw-sidebar-header-border: var(--dg-chat-sidebar-header-border, 1px solid var(--cw-border));
--cw-panel-header-fg: var(--dg-chat-panel-header-fg, var(--cw-text));
--cw-panel-header-fg-muted: var(--dg-chat-panel-header-fg-muted, var(--cw-text-muted));
--cw-conversation-list-padding: var(--dg-chat-conversation-list-padding, 0.25rem 0);
--cw-conversation-gap: var(--dg-chat-conversation-gap, 0);
--cw-conversation-padding: var(--dg-chat-conversation-padding, 0.5rem 0.75rem);
--cw-conversation-radius: var(--dg-chat-conversation-radius, 0);
--cw-conversation-border: var(--dg-chat-conversation-border, 1px solid var(--cw-border));
--cw-overlay-close-icon-size: var(--dg-chat-overlay-close-icon-size, 1.125rem);
--cw-overlay-close-size-touch: var(--dg-chat-overlay-close-size-touch, 2.75rem);
--cw-ele-dismiss-icon-size: var(--dg-chat-ele-dismiss-icon-size, 0.875rem);
--cw-ele-font-weight: var(--dg-chat-ele-font-weight, 600);
--cw-ele-gap: var(--dg-chat-ele-gap, 0.25rem);
--cw-ele-max-height: var(--dg-chat-ele-max-height, 6.5rem);
--cw-ele-max-height-mobile: var(--dg-chat-ele-max-height-mobile, 4.5rem);
--cw-ele-bg: var(--dg-chat-ele-bg, var(--cw-surface));
--cw-ele-text: var(--dg-chat-ele-text, var(--cw-text));
--cw-ele-border: var(--dg-chat-ele-border, var(--cw-border));
--cw-ele-radius: var(--dg-chat-ele-radius, var(--cw-radius-lg));
--cw-ele-font-size: var(--dg-chat-ele-font-size, 0.85rem);
--cw-ele-link: var(--dg-chat-ele-link, var(--cw-primary));
--cw-handoff-max-height: var(--dg-chat-handoff-max-height, 8rem);
--cw-handoff-max-height-mobile: var(--dg-chat-handoff-max-height-mobile, 6.5rem);
--cw-handoff-bg: var(--dg-chat-handoff-bg, var(--cw-surface));
--cw-handoff-text: var(--dg-chat-handoff-text, var(--cw-text));
--cw-handoff-border: var(--dg-chat-handoff-border, var(--cw-primary));
--cw-handoff-radius: var(--dg-chat-handoff-radius, var(--cw-radius-lg));
--cw-handoff-font-size: var(--dg-chat-handoff-font-size, 0.85rem);
--cw-panel-border: var(--dg-chat-panel-border, 1px solid var(--cw-border));
--cw-messages-padding: var(--dg-chat-messages-padding, 0.3rem 0.75rem);
--cw-messages-gap: var(--dg-chat-messages-gap, 0.4rem);
--cw-bubble-padding: var(--dg-chat-bubble-padding, 0.4rem 0.7rem);
--cw-bubble-avatar-gap: var(--dg-chat-bubble-avatar-gap, 0.45rem);
--cw-input-bg: var(--dg-chat-input-bg, var(--cw-surface));
--cw-input-border: var(--dg-chat-input-border, #848fa0);
--cw-input-radius: var(--dg-chat-input-radius, var(--cw-radius));
--cw-input-control-size: var(--dg-chat-input-control-size, 2rem);
--cw-input-avatar-size: var(--dg-chat-input-avatar-size, var(--cw-input-control-size));
--cw-send-bg: var(--dg-chat-send-bg, var(--cw-primary));
--cw-stop-icon-size: var(--dg-chat-stop-icon-size, 0.75rem);
--cw-stage-avatar-width: var(--dg-chat-stage-avatar-width, 8rem);
--cw-stage-avatar-max-height: var(--dg-chat-stage-avatar-max-height, 12rem);
--cw-radius: var(--dg-chat-radius, 0.5rem);
--cw-radius-lg: var(--dg-chat-radius-lg, 0.75rem);
--cw-radius-panel: var(--dg-chat-radius-panel, 1.25rem);
--cw-radius-capsule: var(--dg-chat-radius-capsule, 2rem);
--cw-panel-max-width: var(--dg-chat-panel-max-width, 32rem);
--cw-panel-max-height: var(--dg-chat-panel-max-height, 32rem);
--cw-panel-viewport-max: calc(var(--cw-dock-vh, 100vh) - var(--cw-dock-band, 0px) - 0.75rem);
--cw-content-max-width: var(--dg-chat-content-max-width, 36rem);
--cw-panel-dock-overlap: max(var(--cw-dock-height, 4.5rem), 4.5rem);
--cw-focus-ring-color: var(--dg-chat-focus-ring-color, #2563eb);
--cw-focus-ring-width: var(--dg-chat-focus-ring-width, 3px);
--cw-focus-ring: var(--dg-chat-focus-ring, 0 0 0 var(--cw-focus-ring-width) var(--cw-focus-ring-color));
--cw-input-border-focus-mobile: var(--dg-chat-input-border-focus-mobile, #848fa0);
--cw-shadow-xs: var(--dg-chat-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.06));
--cw-shadow-sm: var(--dg-chat-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
--cw-shadow-panel: var(--dg-chat-shadow-panel, 0 -4px 16px rgba(0, 0, 0, 0.08));
--cw-transition: var(--dg-chat-transition, 0.2s);
--cw-transition-fast: var(--dg-chat-transition-fast, 0.15s);
--cw-typing-bg: var(--dg-chat-typing-bg, var(--cw-surface));
--cw-typing-padding: var(--dg-chat-typing-padding, 0.4rem 0.7rem);
--cw-typing-radius: var(--dg-chat-typing-radius, var(--cw-radius-lg));
--cw-typing-shadow: var(--dg-chat-typing-shadow, var(--cw-shadow-xs));
--cw-typing-gap: var(--dg-chat-typing-gap, 0.25rem);
--cw-typing-dot-size: var(--dg-chat-typing-dot-size, 0.4rem);
--cw-typing-dot-color: var(--dg-chat-typing-dot-color, var(--cw-text-muted));
--cw-typing-dot-display: var(--dg-chat-typing-dot-display, block);
--cw-typing-animation: var(--dg-chat-typing-animation, cw-bounce 1.2s infinite);
--cw-typing-delay-2: var(--dg-chat-typing-delay-2, 0.15s);
--cw-typing-delay-3: var(--dg-chat-typing-delay-3, 0.3s);
--cw-typing-media: var(--dg-chat-typing-media, none);
--cw-typing-media-display: var(--dg-chat-typing-media-display, none);
--cw-typing-media-size: var(--dg-chat-typing-media-size, 1.75rem);
--cw-tool-status-gap: var(--dg-chat-tool-status-gap, 0.4rem);
--cw-tool-status-indicator-display: var(--dg-chat-tool-status-indicator-display, block);
--cw-tool-status-indicator-size: var(--dg-chat-tool-status-indicator-size, 0.85rem);
--cw-tool-status-indicator-radius: var(--dg-chat-tool-status-indicator-radius, 50%);
--cw-tool-status-ring-width: var(--dg-chat-tool-status-ring-width, 2px);
--cw-tool-status-ring-color: var(--dg-chat-tool-status-ring-color, var(--cw-border));
--cw-tool-status-ring-accent: var(--dg-chat-tool-status-ring-accent, var(--cw-text-muted));
--cw-tool-status-media: var(--dg-chat-tool-status-media, none);
--cw-tool-status-animation: var(--dg-chat-tool-status-animation, cw-spin 0.9s linear infinite);
--cw-arrive-delay: var(--dg-chat-arrive-delay, 0.6s);
--cw-arrive-duration: var(--dg-chat-arrive-duration, 0.42s);
--cw-arrive-easing: var(--dg-chat-arrive-easing, cubic-bezier(0.33, 0, 0.2, 1));
--cw-arrive-travel: var(--dg-chat-arrive-travel, calc(100% + var(--cw-dock-bottom, 0px)));
--cw-arrive-overshoot: var(--dg-chat-arrive-overshoot, 9px);
--cw-arrive-shadow: var(--dg-chat-arrive-shadow, 0 8px 28px rgba(0, 0, 0, 0.28));
--cw-arrive-flash-delay: var(--dg-chat-arrive-flash-delay, 0.28s);
--cw-arrive-flash-duration: var(--dg-chat-arrive-flash-duration, 0.7s);
--cw-arrive-flash-count: var(--dg-chat-arrive-flash-count, 2);
--cw-z: var(--dg-chat-z, 50);
}
.cw-hidden {
display: none !important;
}
.cw-wrapper .cw-history-btn,
.cw-wrapper .cw-panel-new-btn,
.cw-wrapper .cw-panel-save-btn,
.cw-wrapper .cw-close-btn,
.cw-wrapper .cw-sidebar-close,
.cw-wrapper .cw-overlay-close,
.cw-wrapper .cw-ele-action,
.cw-wrapper .cw-ele-dismiss,
.cw-wrapper .cw-input-action,
.cw-wrapper .cw-view-prev,
.cw-wrapper .cw-view-next,
.cw-wrapper .cw-view-reopen,
.cw-wrapper .cw-send-btn,
.cw-wrapper .cw-knowledge-more,
.cw-wrapper .cw-disclosure__trigger,
.cw-wrapper .cw-bubble-toggle,
.cw-wrapper .cw-launcher,
.cw-wrapper .cw-agent-card__toggle,
.cw-wrapper .cw-handoff__btn,
.cw-lead-form button {
-webkit-appearance: none;
appearance: none;
margin: 0;
box-shadow: none;
}
.cw-wrapper {
position: fixed;
bottom: max(var(--cw-dock-kb, 0px), var(--cw-dock-offset, 0px));
left: 0;
right: 0;
z-index: var(--cw-z);
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.cw-wrapper:not([data-cw-mode="embed"]) > .cw-panel,
.cw-wrapper:not([data-cw-mode="embed"]) > .cw-input-row,
.cw-wrapper:not([data-cw-mode="embed"]) > .cw-launcher {
translate: 0 calc(-1 * max(0px, var(--cw-dock-auto, 0px) - var(--cw-dock-kb, 0px)));
}
.cw-wrapper.cw-active::before {
content: '';
position: fixed;
inset: 0;
background: var(--cw-overlay);
pointer-events: auto;
z-index: -1;
}
.cw-wrapper.cw-arriving {
animation: cw-arrive-dock var(--cw-arrive-duration) var(--cw-arrive-easing) var(--cw-arrive-delay) backwards;
}
@keyframes cw-arrive-dock {
0%   { transform: translateY(var(--cw-arrive-travel)); opacity: 0; }
55%  { opacity: 1; }
70%  { transform: translateY(calc(-1 * var(--cw-arrive-overshoot))); }
100% { transform: translateY(0); }
}
.cw-wrapper.cw-arriving .cw-input-inner {
animation: cw-arrive-landing-shadow var(--cw-arrive-duration) ease-out var(--cw-arrive-delay) backwards;
}
@keyframes cw-arrive-landing-shadow {
from { box-shadow: var(--cw-arrive-shadow); }
to   { box-shadow: var(--cw-shadow-sm); }
}
.cw-wrapper .cw-send-btn.cw-arrive-flash {
animation: cw-arrive-flash var(--cw-arrive-flash-duration) ease-in-out var(--cw-arrive-flash-delay) var(--cw-arrive-flash-count);
}
@keyframes cw-arrive-flash {
0%, 100% {
background-color: var(--cw-send-bg);
color: var(--cw-on-primary);
opacity: 1;
}
50% {
background-color: var(--cw-on-primary);
color: var(--cw-send-bg);
opacity: 1;
}
}
.cw-input-row {
pointer-events: auto;
width: 100%;
max-width: var(--cw-panel-max-width);
padding: 0 0.75rem 0.75rem;
box-sizing: border-box;
position: relative;
z-index: 2;
}
.cw-input-inner {
display: flex;
gap: 0.4rem;
align-items: flex-end;
background: var(--cw-surface);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-capsule);
padding: 0.45rem 0.5rem 0.45rem 0.9rem;
box-shadow: var(--cw-shadow-sm);
transition: box-shadow var(--cw-transition), border-color var(--cw-transition);
}
.cw-input-avatar {
flex: 0 0 auto;
align-self: center;
width: var(--cw-input-avatar-size);
height: var(--cw-input-avatar-size);
object-fit: contain;
}
.cw-wrapper.cw-active .cw-input-avatar {
display: none;
}
.cw-actionbar {
display: flex;
flex-direction: column;
gap: var(--cw-ele-gap);
margin: 0 0 var(--cw-ele-gap);
max-height: var(--cw-ele-max-height);
overflow-y: auto;
}
.cw-actionbar[hidden] {
display: none;
}
.cw-wrapper:not(.cw-active):not([data-cw-mode="embed"]) .cw-actionbar {
display: none;
}
.cw-ele {
display: flex;
align-items: center;
gap: 0.25rem;
width: 100%;
box-sizing: border-box;
min-height: 1.9rem;
padding: 0.1rem 0.25rem 0.1rem 0.75rem;
background: var(--cw-ele-bg);
color: var(--cw-ele-text);
border: 1px solid var(--cw-ele-border);
border-radius: var(--cw-ele-radius);
font-size: var(--cw-ele-font-size);
line-height: 1.3;
}
.cw-ele--flash {
animation: cw-ele-rise var(--cw-ele-flash-duration) cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}
@keyframes cw-ele-rise {
from { transform: translateY(100%); opacity: 0; }
to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
.cw-actionbar:has(> .cw-ele--flash) {
overflow-y: hidden;
}
}
.cw-ele-body {
flex: 1 1 auto;
min-width: 0;
}
.cw-wrapper .cw-ele-body > .cw-ele-action,
.cw-wrapper .cw-ele-body > .cw-ele-value {
display: inline-block;
max-width: 100%;
box-sizing: border-box;
vertical-align: baseline;
}
.cw-ele-label {
color: var(--cw-text-muted);
}
.cw-ele-value {
padding: 0.2rem 0.3rem;
overflow-wrap: anywhere;
}
.cw-ele > .cw-ele-dismiss {
margin-left: auto;
}
.cw-wrapper .cw-ele-action {
appearance: none;
background: none;
border: 0;
padding: 0.2rem 0.3rem;
font: inherit;
font-weight: var(--cw-ele-font-weight);
color: var(--cw-ele-link);
text-decoration: none;
cursor: pointer;
border-radius: var(--cw-radius);
overflow-wrap: anywhere;
}
.cw-wrapper .cw-ele-action:hover {
text-decoration: underline;
}
.cw-wrapper .cw-ele-action:focus-visible,
.cw-wrapper .cw-ele-dismiss:focus-visible {
outline: none;
box-shadow: var(--cw-focus-ring);
}
.cw-wrapper .cw-ele-dismiss {
appearance: none;
flex: 0 0 auto;
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--cw-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0;
line-height: 1;
cursor: pointer;
--cw-icon: var(--cw-icon-close);
--cw-icon-box: var(--cw-ele-dismiss-icon-size);
}
.cw-wrapper .cw-ele-dismiss:hover {
background: var(--cw-bg);
color: var(--cw-text);
}
.cw-input-inner:focus-within {
box-shadow: var(--cw-focus-ring), var(--cw-shadow-sm);
}
.cw-textarea {
flex: 1;
border: none;
outline: none;
box-shadow: none;
font-size: var(--cw-input-font-size);
font-family: inherit;
background: transparent;
color: var(--cw-text);
padding: 0.15rem 0;
margin: 0;
resize: none;
min-height: 1.4rem;
max-height: 5rem;
line-height: 1.4;
align-self: center;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
.cw-textarea::placeholder {
font-size: var(--cw-placeholder-font-size);
}
.cw-input-inner .cw-textarea:focus,
.cw-input-inner .cw-textarea:focus-visible {
border: none;
outline: none !important;
box-shadow: none !important;
--pico-border-color: transparent;
}
.cw-wrapper .cw-send-btn {
background: var(--cw-send-bg);
color: var(--cw-on-primary);
border: none;
width: var(--cw-input-control-size);
height: var(--cw-input-control-size);
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
font-size: 1rem;
line-height: 1;
opacity: 0.4;
transition: opacity var(--cw-transition);
align-self: flex-end;
}
.cw-wrapper .cw-input-inner:focus-within .cw-send-btn {
opacity: 1;
}
.cw-wrapper .cw-send-btn:hover {
opacity: 1;
}
.cw-wrapper .cw-send-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.cw-wrapper .cw-send-btn:focus-visible {
box-shadow: var(--cw-focus-ring);
}
.cw-wrapper .cw-send-btn.cw-send-btn--stop {
font-size: 0;
opacity: 1;
}
.cw-wrapper .cw-send-btn.cw-send-btn--stop::before {
content: '';
display: block;
width: var(--cw-stop-icon-size);
height: var(--cw-stop-icon-size);
background: currentColor;
border-radius: 2px;
}
.cw-wrapper .cw-input-action {
background: none;
border: none;
cursor: pointer;
color: var(--cw-text-muted);
font-size: 1.1rem;
line-height: 1;
padding: 0.25rem;
flex-shrink: 0;
min-width: 2rem;
min-height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background var(--cw-transition-fast), color var(--cw-transition-fast);
align-self: flex-end;
margin-bottom: 0.1rem;
}
.cw-wrapper .cw-input-action:hover {
background: var(--cw-bg);
color: var(--cw-text);
}
.cw-wrapper .cw-input-action:focus-visible {
box-shadow: var(--cw-focus-ring);
}
.cw-panel {
pointer-events: auto;
width: 100%;
max-width: var(--cw-panel-max-width);
max-height: min(var(--cw-panel-max-height), var(--cw-panel-viewport-max));
background: var(--cw-surface);
border: var(--cw-panel-border);
border-bottom: none;
border-radius: var(--cw-radius-panel) var(--cw-radius-panel) 0 0;
box-shadow: var(--cw-shadow-panel);
display: flex;
flex-direction: column;
margin: 0 0.75rem;
margin-bottom: calc(-1 * var(--cw-panel-dock-overlap));
padding-bottom: var(--cw-panel-dock-overlap);
box-sizing: border-box;
position: relative;
z-index: 1;
}
.cw-wrapper:not([data-cw-mode="embed"]) .cw-panel--full {
height: min(var(--cw-panel-max-height), var(--cw-panel-viewport-max));
}
.cw-panel-header {
display: flex;
align-items: center;
gap: 0.15rem;
padding: var(--cw-panel-header-padding);
min-height: var(--cw-panel-header-min-height);
background: var(--cw-panel-header-bg);
flex-shrink: 0;
}
.cw-history-btn::before,
.cw-panel-new-btn::before,
.cw-close-btn::before,
.cw-sidebar-close::before,
.cw-overlay-close::before,
.cw-ele-dismiss::before {
content: "";
display: block;
flex: none;
width: var(--cw-icon-box);
height: var(--cw-icon-box);
background-color: currentColor;
-webkit-mask: var(--cw-icon) center / contain no-repeat;
mask: var(--cw-icon) center / contain no-repeat;
}
.cw-wrapper .cw-history-btn,
.cw-wrapper .cw-panel-new-btn,
.cw-wrapper .cw-close-btn,
.cw-wrapper .cw-sidebar-close {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 var(--cw-header-btn-size);
width: var(--cw-header-btn-size);
height: var(--cw-header-btn-size);
margin: 0;
padding: 0;
font-size: 0;
line-height: 1;
border-radius: var(--cw-radius);
--cw-icon-box: var(--cw-header-icon-size);
}
.cw-wrapper .cw-history-btn { --cw-icon: var(--cw-icon-menu); }
.cw-wrapper .cw-panel-new-btn { --cw-icon: var(--cw-icon-plus); }
.cw-wrapper .cw-close-btn {
--cw-icon: var(--cw-icon-close);
--cw-icon-box: var(--cw-header-close-icon-size);
}
.cw-panel-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8rem;
font-weight: 600;
color: var(--cw-panel-header-fg);
line-height: 1.4;
}
.cw-wrapper .cw-panel-new-btn {
margin-left: auto;
background: none;
border: none;
cursor: pointer;
color: var(--cw-panel-header-fg-muted);
}
.cw-wrapper .cw-panel-new-btn:hover {
color: var(--cw-panel-header-fg);
}
.cw-wrapper .cw-panel-new-btn:focus-visible {
box-shadow: var(--cw-focus-ring);
border-radius: var(--cw-radius);
}
.cw-wrapper .cw-panel-save-btn {
--cw-icon: var(--cw-icon-download);
--cw-icon-box: var(--cw-header-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 var(--cw-header-btn-size);
width: var(--cw-header-btn-size);
height: var(--cw-header-btn-size);
margin: 0;
padding: 0;
font-size: 0;
line-height: 1;
background: none;
border: none;
border-radius: var(--cw-radius);
cursor: pointer;
color: var(--cw-panel-header-fg-muted);
}
.cw-panel-save-btn::before {
content: "";
display: block;
flex: none;
width: var(--cw-icon-box);
height: var(--cw-icon-box);
background-color: currentColor;
-webkit-mask: var(--cw-icon) center / contain no-repeat;
mask: var(--cw-icon) center / contain no-repeat;
}
.cw-wrapper .cw-panel-save-btn:hover {
color: var(--cw-panel-header-fg);
}
.cw-wrapper .cw-panel-save-btn:focus-visible {
box-shadow: var(--cw-focus-ring);
}
.cw-wrapper .cw-close-btn {
background: none;
border: none;
cursor: pointer;
color: var(--cw-panel-header-fg-muted);
}
.cw-wrapper .cw-close-btn:hover {
color: var(--cw-panel-header-fg);
}
.cw-wrapper .cw-close-btn:focus-visible {
box-shadow: var(--cw-focus-ring);
border-radius: var(--cw-radius);
}
.cw-wrapper .cw-history-btn {
background: none;
border: none;
cursor: pointer;
color: var(--cw-panel-header-fg-muted);
}
.cw-wrapper .cw-history-btn:hover {
color: var(--cw-panel-header-fg);
}
.cw-wrapper .cw-history-btn:focus-visible {
box-shadow: var(--cw-focus-ring);
border-radius: var(--cw-radius);
}
.cw-sidebar {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--cw-surface);
z-index: 10;
display: flex;
flex-direction: column;
border-radius: inherit;
}
.cw-sidebar-header {
display: flex;
align-items: center;
gap: 0.15rem;
padding: var(--cw-panel-header-padding);
min-height: var(--cw-panel-header-min-height);
background: var(--cw-panel-header-bg);
border-bottom: var(--cw-sidebar-header-border);
flex-shrink: 0;
}
.cw-sidebar-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8rem;
font-weight: 600;
color: var(--cw-panel-header-fg);
line-height: 1.4;
}
.cw-wrapper .cw-sidebar-close {
margin-left: auto;
background: none;
border: none;
border-radius: 0;
cursor: pointer;
color: var(--cw-panel-header-fg-muted);
--cw-icon: var(--cw-icon-close);
--cw-icon-box: var(--cw-header-close-icon-size);
}
.cw-wrapper .cw-sidebar-close:hover {
color: var(--cw-panel-header-fg);
}
.cw-conversation-list {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--cw-conversation-list-padding);
}
.cw-conversation-item + .cw-conversation-item {
margin-top: var(--cw-conversation-gap);
}
.cw-conversation-item {
padding: var(--cw-conversation-padding);
border-radius: var(--cw-conversation-radius);
cursor: pointer;
border-bottom: var(--cw-conversation-border);
transition: background var(--cw-transition-fast);
}
.cw-conversation-item:hover {
background: var(--cw-bg);
}
.cw-conversation-item.cw-conversation-active {
background: var(--cw-bg);
border-left: 3px solid var(--cw-primary);
padding-left: calc(0.75rem - 3px);
}
.cw-conversation-title {
font-size: 0.8rem;
color: var(--cw-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.cw-conversation-meta {
font-size: 0.7rem;
color: var(--cw-text-muted);
margin-top: 0.1rem;
}
.cw-conversation-empty {
padding: 1.5rem 0.75rem;
text-align: center;
color: var(--cw-text-muted);
font-size: 0.8rem;
}
.cw-messages {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--cw-messages-padding);
display: flex;
flex-direction: column;
gap: var(--cw-messages-gap);
}
.cw-bottom-spacer {
flex: 0 0 auto;
min-height: 0;
height: 0;
pointer-events: none;
}
.cw-bubble {
max-width: 85%;
padding: 0.6rem 0.9rem;
border-radius: var(--cw-radius-lg);
font-size: 0.9rem;
line-height: var(--cw-bubble-line-height);
word-break: break-word;
}
.cw-bubble-user {
align-self: flex-end;
background: var(--cw-bubble-user);
color: var(--cw-bubble-user-text);
border-bottom-right-radius: 0.2rem;
}
.cw-bubble-assistant {
align-self: flex-start;
background: var(--cw-bubble-assistant);
color: var(--cw-bubble-assistant-text);
border-bottom-left-radius: 0.2rem;
box-shadow: var(--cw-shadow-xs);
}
.cw-bubble-system {
align-self: center;
background: var(--cw-success-bg);
color: var(--cw-success);
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
border-radius: 1rem;
}
.cw-messages .cw-bubble {
font-size: var(--cw-bubble-font-size);
padding: var(--cw-bubble-padding);
}
.cw-bubble-agent,
.cw-bubble--avatar {
display: flex;
align-items: flex-start;
gap: var(--cw-bubble-avatar-gap);
}
.cw-bubble-agent .cw-bubble-body,
.cw-bubble--avatar .cw-bubble-body {
min-width: 0;
}
.cw-bubble-assistant.cw-bubble--avatar,
.cw-bubble-assistant.cw-bubble-agent {
background: none;
box-shadow: none;
border-radius: 0;
padding: 0;
}
.cw-messages .cw-bubble-assistant.cw-bubble--avatar,
.cw-messages .cw-bubble-assistant.cw-bubble-agent {
padding: 0;
}
.cw-bubble-assistant.cw-bubble--avatar > .cw-bubble-body,
.cw-bubble-assistant.cw-bubble-agent > .cw-bubble-body {
background: var(--cw-bubble-assistant);
border-radius: var(--cw-radius-lg);
border-bottom-left-radius: 0.2rem;
box-shadow: var(--cw-shadow-xs);
padding: 0.6rem 0.9rem;
}
.cw-messages .cw-bubble-assistant.cw-bubble--avatar > .cw-bubble-body,
.cw-messages .cw-bubble-assistant.cw-bubble-agent > .cw-bubble-body {
padding: var(--cw-bubble-padding);
}
.cw-bubble-who {
font-size: 0.7rem;
font-weight: 600;
color: var(--cw-text-muted);
margin-bottom: 0.1rem;
}
.cw-bubble-avatar {
flex: 0 0 auto;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
overflow: hidden;
background: var(--cw-primary);
color: var(--cw-on-primary);
font-size: 0.7rem;
font-weight: 600;
line-height: 1.4rem;
text-align: center;
display: block;
}
.cw-bubble-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cw-bubble-avatar--spacer {
background: transparent;
visibility: hidden;
}
.cw-messages .cw-bubble p,
.cw-messages .cw-bubble ul,
.cw-messages .cw-bubble ol,
.cw-messages .cw-bubble li {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
font-style: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-align: inherit !important;
letter-spacing: inherit !important;
text-transform: none !important;
}
.cw-messages .cw-bubble :is(p, ul, ol, li, h1, h2, h3, strong, em, a) {
text-indent: inherit !important;
word-spacing: inherit !important;
text-shadow: inherit !important;
word-break: inherit !important;
overflow-wrap: inherit !important;
hyphens: inherit !important;
white-space: inherit !important;
font-variant-caps: inherit !important;
font-stretch: inherit !important;
letter-spacing: inherit !important;
}
.cw-messages .cw-bubble :is(strong, em, a) {
text-transform: none !important;
}
.cw-messages .cw-bubble :is(ul, ol) {
list-style-type: revert !important;
}
.cw-messages .cw-bubble p {
margin: 0 0 var(--cw-bubble-p-gap) !important;
padding: 0 !important;
}
.cw-messages .cw-bubble ul,
.cw-messages .cw-bubble ol {
padding-left: var(--cw-bubble-list-indent) !important;
margin: var(--cw-bubble-p-gap) 0 !important;
list-style-position: outside !important;
}
.cw-messages .cw-bubble li {
margin-bottom: var(--cw-bubble-li-gap) !important;
padding: 0 !important;
list-style-type: inherit !important;
list-style-position: inherit !important;
}
.cw-messages .cw-bubble h1,
.cw-messages .cw-bubble h2,
.cw-messages .cw-bubble h3 {
font-family: inherit !important;
line-height: var(--cw-bubble-heading-line-height) !important;
color: inherit !important;
letter-spacing: inherit !important;
text-transform: none !important;
font-weight: var(--cw-bubble-heading-weight) !important;
margin: var(--cw-bubble-heading-margin) !important;
padding: 0 !important;
}
.cw-messages .cw-bubble h1 { font-size: var(--cw-bubble-h1-size) !important; }
.cw-messages .cw-bubble h2 { font-size: var(--cw-bubble-h2-size) !important; }
.cw-messages .cw-bubble h3 { font-size: var(--cw-bubble-h3-size) !important; }
.cw-messages .cw-bubble > *:last-child,
.cw-messages .cw-bubble-body > *:last-child {
margin-bottom: 0 !important;
}
.cw-messages .cw-bubble > *:first-child,
.cw-messages .cw-bubble-body > *:first-child {
margin-top: 0 !important;
}
.cw-messages .cw-bubble strong {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
font-weight: 700;
}
.cw-messages .cw-bubble em {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
font-style: italic;
}
.cw-messages .cw-bubble a {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
text-decoration: underline;
}
.cw-bubble-user.cw-bubble--collapsed {
position: relative;
overflow: hidden;
box-sizing: content-box;
max-height: calc(var(--cw-bubble-collapse-lines) * var(--cw-bubble-line-height) * 1em);
flex-shrink: 0;
}
.cw-bubble-user.cw-bubble--collapsed::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: calc(var(--cw-bubble-line-height) * 1.5em + var(--cw-bubble-toggle-space));
background: linear-gradient(to bottom, transparent, var(--cw-bubble-user) calc(100% - var(--cw-bubble-toggle-space) + 0.25em));
pointer-events: none;
}
.cw-messages .cw-bubble-user:has(+ .cw-bubble-toggle) {
padding-bottom: var(--cw-bubble-toggle-space);
}
.cw-wrapper .cw-bubble-toggle {
align-self: flex-end;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
padding: 0;
position: relative;
margin: calc(-1 * (var(--cw-bubble-toggle-space) + var(--cw-messages-gap))) 0.4rem calc(var(--cw-bubble-toggle-space) - 24px) 0;
background: none;
border: none;
border-radius: 0;
font-size: inherit;
line-height: 0;
color: var(--cw-text-muted);
cursor: pointer;
}
.cw-bubble-toggle-icon {
width: 1rem;
height: 1rem;
display: block;
}
.cw-wrapper .cw-bubble-toggle:hover {
color: var(--cw-text);
}
.cw-wrapper .cw-bubble-toggle:focus-visible {
box-shadow: var(--cw-focus-ring);
border-radius: var(--cw-radius);
outline: none;
}
.cw-welcome {
text-align: center;
padding: 1rem 0.5rem;
color: var(--cw-text-muted);
}
.cw-welcome:empty {
display: none;
}
.cw-welcome-avatar {
display: block;
margin: 0 auto 0.6rem;
max-width: 8rem;
max-height: 8rem;
object-fit: contain;
}
.cw-welcome--avatar {
display: flex;
align-items: flex-end;
gap: 0.75rem;
text-align: start;
padding: 0.5rem 0;
}
.cw-welcome--avatar .cw-welcome-avatar {
flex: 0 0 auto;
margin: 0;
}
.cw-welcome-bubble {
min-width: 0;
background: var(--cw-bubble-assistant);
color: var(--cw-bubble-assistant-text);
border-radius: var(--cw-radius-lg);
border-bottom-left-radius: 0.2rem;
box-shadow: var(--cw-shadow-xs);
padding: 0.6rem 0.9rem;
}
.cw-stage {
display: flex;
align-items: stretch;
flex: 1 1 auto;
min-height: 0;
}
.cw-stage > .cw-messages {
min-width: 0;
}
.cw-stage-avatar {
flex: 0 0 auto;
align-self: flex-end;
max-width: var(--cw-stage-avatar-width);
max-height: var(--cw-stage-avatar-max-height);
margin: 0 0 0.3rem 0.75rem;
object-fit: contain;
pointer-events: none;
}
@media (min-width: 576px) {
.cw-stage {
position: relative;
}
.cw-stage > .cw-messages {
margin-inline-start: calc(var(--cw-stage-avatar-width) + 0.75rem);
}
.cw-stage-avatar {
position: absolute;
inset-inline-start: 0;
bottom: 0.3rem;
margin: 0;
margin-inline-start: 0.75rem;
max-height: min(var(--cw-stage-avatar-max-height), calc(100% - 0.6rem));
width: auto;
}
}
.cw-welcome-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--cw-text);
margin-bottom: 0.3rem;
}
.cw-welcome-text {
font-size: 0.8rem;
line-height: 1.6;
}
.cw-disclosure {
flex-shrink: 0;
padding: 0.35rem 0.75rem;
font-size: 0.7rem;
line-height: 1.3;
color: var(--cw-text-muted);
border-top: 1px solid var(--cw-border);
}
.cw-disclosure:empty {
display: none;
}
.cw-wrapper .cw-disclosure__trigger {
display: inline;
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
font: inherit;
line-height: inherit;
color: inherit;
text-align: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
cursor: pointer;
}
.cw-wrapper .cw-disclosure__trigger:focus-visible {
box-shadow: var(--cw-focus-ring);
}
.cw-disclosure__trigger > .cw-disclosure {
display: inline;
padding: 0;
border-top: 0;
}
.cw-disclosure-row > .cw-disclosure {
display: inline;
padding: 0;
border-top: 0;
}
.cw-disclosure__trigger > .cw-disclosure:empty {
display: none;
}
.cw-disclosure__trigger > .cw-disclosure:not(:empty) + .cw-disclosure__fallback {
display: none;
}
.cw-disclosure__sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.cw-disclosure__detail {
flex-shrink: 0;
padding: 0 0.75rem 0.35rem;
font-size: 0.7rem;
line-height: 1.3;
color: var(--cw-text-muted);
white-space: pre-line;
}
.cw-wrapper[data-cw-launcher="1"]:not(.cw-active) .cw-input-row {
display: none;
}
.cw-wrapper .cw-launcher {
display: block;
margin: 0 0.75rem 0.75rem auto;
padding: 0.5rem 0.9rem;
border: 1px solid var(--cw-border);
border-radius: 999px;
background: var(--cw-send-bg);
color: #fff;
font: inherit;
cursor: pointer;
}
.cw-wrapper .cw-launcher:focus-visible {
box-shadow: var(--cw-focus-ring);
}
.cw-launcher__image {
display: block;
width: 96px;
height: auto;
}
.cw-wrapper.cw-active .cw-launcher {
display: none;
}
.cw-bubble--fallback {
font-style: italic;
}
.cw-msg-edit {
display: block;
margin-top: 0.4rem;
font-size: 0.75rem;
color: var(--cw-text-muted);
text-decoration: underline;
}
.cw-disclosure-row {
flex-shrink: 0;
padding: 0 0.75rem 0.35rem;
font-size: 0.7rem;
line-height: 1.3;
color: var(--cw-text-muted);
}
.cw-disclosure-row:has(.cw-disclosure:not(:empty)) {
padding-top: 0.35rem;
border-top: 1px solid var(--cw-border);
}
.cw-disclosure__privacy {
color: inherit;
text-decoration: underline;
white-space: nowrap;
}
.cw-disclosure__privacy:focus-visible {
box-shadow: var(--cw-focus-ring);
}
.cw-disclosure__disclaimer {
display: block;
}
.cw-disclosure__disclaimer + .cw-disclosure__privacy {
display: inline-block;
margin-top: 0.2rem;
}
.cw-disclosure__disclaimer[hidden],
.cw-disclosure__detail[hidden] {
display: none;
}
.cw-connection {
flex-shrink: 0;
padding: 0.35rem 0.75rem;
font-size: 0.7rem;
line-height: 1.3;
color: var(--cw-error);
border-top: 1px solid var(--cw-border);
}
.cw-connection:empty {
display: none;
}
.cw-agent-card {
flex-shrink: 0;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--cw-border);
background: var(--cw-surface);
}
.cw-agent-card[hidden] {
display: none;
}
.cw-agent-card__head {
display: flex;
align-items: center;
gap: 0.5rem;
}
.cw-agent-card__id {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
.cw-agent-card__name {
font-size: 0.8rem;
font-weight: 600;
color: var(--cw-text);
}
.cw-agent-card__title {
font-size: 0.7rem;
color: var(--cw-text-muted);
}
.cw-wrapper .cw-agent-card__toggle {
flex: 0 0 auto;
background: none;
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
color: var(--cw-text-muted);
font-size: 0.7rem;
font-family: inherit;
line-height: normal;
padding: 0.2rem 0.5rem;
cursor: pointer;
}
.cw-wrapper .cw-agent-card__toggle:hover {
color: var(--cw-text);
}
.cw-agent-card__details {
margin-top: 0.4rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.cw-agent-card__details[hidden] {
display: none;
}
.cw-agent-card__row {
display: flex;
gap: 0.4rem;
font-size: 0.75rem;
}
.cw-agent-card__label {
color: var(--cw-text-muted);
flex: 0 0 4.5rem;
}
.cw-agent-card__link {
color: var(--cw-primary);
text-decoration: none;
word-break: break-all;
}
.cw-agent-card__link:hover {
text-decoration: underline;
}
.cw-agent-card__value {
color: var(--cw-text);
word-break: break-all;
}
.cw-handoff {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.6rem;
margin: 0 0 var(--cw-ele-gap);
padding: 0.4rem 0.5rem 0.4rem 0.6rem;
box-sizing: border-box;
width: 100%;
max-height: var(--cw-handoff-max-height);
overflow-y: auto;
background: var(--cw-handoff-bg);
color: var(--cw-handoff-text);
border: 1px solid var(--cw-handoff-border);
border-radius: var(--cw-handoff-radius);
font-size: var(--cw-handoff-font-size);
line-height: 1.3;
}
.cw-wrapper:not(.cw-active):not([data-cw-mode="embed"]) .cw-handoff {
display: none;
}
.cw-handoff__who {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1 1 12rem;
min-width: 0;
}
.cw-handoff__id {
display: flex;
flex-wrap: wrap;
column-gap: 0.3rem;
min-width: 0;
}
.cw-handoff__name {
font-weight: 600;
}
.cw-handoff__title {
color: var(--cw-text-muted);
}
.cw-handoff__actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
flex: 0 0 auto;
}
.cw-wrapper .cw-handoff__btn {
background: var(--cw-surface);
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius-lg);
color: var(--cw-text);
font-size: 0.8rem;
font-family: inherit;
line-height: normal;
padding: 0.4rem 0.8rem;
cursor: pointer;
}
.cw-wrapper .cw-handoff__btn:hover {
border-color: var(--cw-primary);
}
.cw-wrapper .cw-handoff__btn--yes {
background: var(--cw-primary);
border-color: var(--cw-primary);
color: var(--cw-on-primary);
}
.cw-agent-typing__dots {
display: flex;
gap: var(--cw-typing-gap);
padding: 0.15rem 0;
}
.cw-agent-typing__dot {
display: var(--cw-typing-dot-display);
width: var(--cw-typing-dot-size);
height: var(--cw-typing-dot-size);
background: var(--cw-typing-dot-color);
border-radius: 50%;
animation: var(--cw-typing-animation);
}
.cw-agent-typing__dot:nth-child(2) {
animation-delay: var(--cw-typing-delay-2);
}
.cw-agent-typing__dot:nth-child(3) {
animation-delay: var(--cw-typing-delay-3);
}
.cw-stream-loader {
display: flex;
gap: var(--cw-typing-gap);
padding: 0.15rem 0;
}
.cw-stream-loader span {
display: var(--cw-typing-dot-display);
width: var(--cw-typing-dot-size);
height: var(--cw-typing-dot-size);
background: var(--cw-typing-dot-color);
border-radius: 50%;
animation: var(--cw-typing-animation);
}
.cw-stream-loader span:nth-child(2) {
animation-delay: var(--cw-typing-delay-2);
}
.cw-stream-loader span:nth-child(3) {
animation-delay: var(--cw-typing-delay-3);
}
.cw-typing {
align-self: flex-start;
display: flex;
gap: var(--cw-typing-gap);
padding: var(--cw-typing-padding);
background: var(--cw-typing-bg);
border-radius: var(--cw-typing-radius);
border-bottom-left-radius: 0.2rem;
box-shadow: var(--cw-typing-shadow);
}
.cw-typing::before {
content: '';
display: var(--cw-typing-media-display);
flex: none;
width: var(--cw-typing-media-size);
height: var(--cw-typing-media-size);
background-image: var(--cw-typing-media);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.cw-typing span {
display: var(--cw-typing-dot-display);
width: var(--cw-typing-dot-size);
height: var(--cw-typing-dot-size);
background: var(--cw-typing-dot-color);
border-radius: 50%;
animation: var(--cw-typing-animation);
}
.cw-typing span:nth-child(2) {
animation-delay: var(--cw-typing-delay-2);
}
.cw-typing span:nth-child(3) {
animation-delay: var(--cw-typing-delay-3);
}
@keyframes cw-bounce {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-0.35rem); }
}
.cw-tool-status {
display: flex;
align-items: center;
gap: var(--cw-tool-status-gap);
font-size: inherit;
color: var(--cw-text-muted);
font-style: normal;
padding: 4px 0;
}
.cw-tool-status::before {
content: '';
flex: none;
display: var(--cw-tool-status-indicator-display);
box-sizing: border-box;
width: var(--cw-tool-status-indicator-size);
height: var(--cw-tool-status-indicator-size);
border: var(--cw-tool-status-ring-width) solid var(--cw-tool-status-ring-color);
border-top-color: var(--cw-tool-status-ring-accent);
border-radius: var(--cw-tool-status-indicator-radius);
background-image: var(--cw-tool-status-media);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: var(--cw-tool-status-animation);
}
.cw-tool-status .cw-tool-status-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@keyframes cw-spin {
to { transform: rotate(360deg); }
}
.cw-messages .cw-tool-result {
align-self: flex-start;
max-width: 85%;
font-size: 0.8rem;
line-height: var(--cw-bubble-line-height);
color: var(--cw-text);
}
.cw-messages .cw-knowledge-list,
.cw-overlay .cw-knowledge-list {
list-style: none;
margin: 0;
padding: 0;
}
.cw-messages .cw-knowledge-item,
.cw-overlay .cw-knowledge-item {
list-style: none;
margin: 0 0 0.5em;
padding: 0;
}
.cw-messages .cw-knowledge-item:last-child,
.cw-overlay .cw-knowledge-item:last-child {
margin-bottom: 0;
}
.cw-messages .cw-knowledge-item--overflow,
.cw-overlay .cw-knowledge-item--overflow {
display: none;
}
.cw-messages .cw-knowledge-link,
.cw-overlay .cw-knowledge-link {
color: inherit;
text-decoration: underline;
font-weight: 600;
}
.cw-messages .cw-knowledge-title,
.cw-overlay .cw-knowledge-title {
font-weight: 600;
}
.cw-messages .cw-knowledge-snippet,
.cw-overlay .cw-knowledge-snippet {
margin-top: 0.15em;
color: var(--cw-text-muted);
}
.cw-messages .cw-knowledge-more,
.cw-overlay .cw-knowledge-more {
display: inline-block;
min-height: 24px;
min-width: 24px;
margin-top: 0.35em;
padding: 0.2rem 0.4rem;
background: none;
border: none;
border-radius: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: var(--cw-text-muted);
cursor: pointer;
text-decoration: underline;
}
.cw-messages .cw-knowledge-more:hover,
.cw-overlay .cw-knowledge-more:hover {
color: var(--cw-text);
}
.cw-messages .cw-knowledge-more:focus-visible,
.cw-overlay .cw-knowledge-more:focus-visible {
box-shadow: var(--cw-focus-ring);
border-radius: var(--cw-radius);
outline: none;
}
.cw-lead-form {
padding: 12px;
background: var(--cw-bg);
border: 1px solid var(--cw-success-border);
border-radius: var(--cw-radius-lg);
margin: 8px 0;
max-width: var(--cw-content-max-width);
}
.cw-lead-form label {
display: block;
font-size: 0.85rem;
color: var(--cw-text);
margin-bottom: 4px;
font-weight: 500;
}
.cw-lead-form input[type="email"],
.cw-lead-form input[type="tel"],
.cw-lead-form input[type="text"] {
display: block;
width: 100%;
height: auto;
padding: 8px;
background: var(--cw-input-bg);
border: 1px solid var(--cw-input-border);
border-radius: var(--cw-input-radius);
color: var(--cw-text);
-webkit-appearance: none;
appearance: none;
font-size: 0.9rem;
line-height: var(--cw-lead-input-line-height);
margin-bottom: 10px;
box-sizing: border-box;
}
.cw-lead-form input[type="email"]:focus,
.cw-lead-form input[type="tel"]:focus,
.cw-lead-form input[type="text"]:focus {
outline: none;
box-shadow: var(--cw-focus-ring);
border-color: var(--cw-primary);
}
.cw-wrapper p {
margin: 0 0 var(--cw-bubble-p-gap) !important;
padding: 0 !important;
font-size: inherit !important;
line-height: inherit !important;
}
.cw-wrapper .cw-lead-reason {
font-size: var(--cw-lead-reason-size) !important;
color: var(--cw-text-muted);
margin: 0 0 var(--cw-lead-reason-gap) !important;
}
.cw-lead-ainote {
font-size: 0.8rem;
line-height: 1.4;
color: var(--cw-text-muted);
margin-bottom: 10px;
}
.cw-lead-prefill {
font-size: var(--cw-lead-reason-size);
line-height: 1.4;
color: var(--cw-text-muted);
margin-bottom: var(--cw-lead-reason-gap);
}
.cw-lead-prefill-label {
font-weight: 600;
}
.cw-lead-checkbox {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 10px;
}
.cw-wrapper .cw-lead-checkbox input[type="checkbox"] {
-webkit-appearance: auto;
appearance: auto;
width: var(--cw-lead-check-size);
height: var(--cw-lead-check-size);
min-width: var(--cw-lead-check-size);
margin: 3px 0 0;
padding: 0;
background-color: transparent;
color: inherit;
font-size: inherit;
vertical-align: baseline;
accent-color: var(--cw-primary);
flex-shrink: 0;
}
.cw-lead-checkbox label {
display: inline;
font-weight: 400;
margin-bottom: 0;
}
.cw-lead-checkbox a {
color: var(--cw-primary);
text-decoration: underline;
}
.cw-lead-form button {
padding: 8px 16px;
background: var(--cw-primary);
color: var(--cw-on-primary);
border: none;
border-radius: var(--cw-radius);
cursor: pointer;
font-size: 0.9rem;
line-height: var(--cw-lead-input-line-height);
margin: 4px 0 0;
}
.cw-lead-form button:hover {
background: var(--cw-primary-hover);
}
.cw-lead-form button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.cw-lead-success {
color: var(--cw-success-text);
font-weight: 500;
padding: 8px 0;
}
.cw-lead-error {
color: var(--cw-error);
font-size: 0.85em;
min-height: 1.2em;
}
.cw-wrapper:not([data-cw-mode="embed"]) .cw-panel--overlay {
height: min(var(--cw-overlay-max-height), 85vh, var(--cw-panel-viewport-max));
max-height: min(var(--cw-overlay-max-height), 85vh, var(--cw-panel-viewport-max));
}
.cw-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: var(--cw-panel-dock-overlap);
z-index: 3;
display: flex;
flex-direction: column;
background: var(--cw-overlay-bg);
border: 1px solid var(--cw-overlay-border);
border-bottom: none;
border-radius: var(--cw-overlay-radius) var(--cw-overlay-radius) 0 0;
box-shadow: var(--cw-overlay-shadow);
box-sizing: border-box;
overflow: hidden;
}
.cw-overlay-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.5rem 0.6rem 1rem;
border-bottom: 1px solid var(--cw-overlay-border);
flex: 0 0 auto;
}
.cw-overlay-title {
flex: 1 1 auto;
margin: 0;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--cw-text);
line-height: 1.3;
}
.cw-wrapper .cw-overlay-close {
margin: 0 0 0 auto;
padding: 0;
flex: 0 0 auto;
min-width: var(--cw-overlay-close-size-touch);
min-height: var(--cw-overlay-close-size-touch);
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: var(--cw-radius);
color: var(--cw-text-muted);
font-size: 0;
line-height: 1;
cursor: pointer;
font-family: inherit;
--cw-icon: var(--cw-icon-close);
--cw-icon-box: var(--cw-overlay-close-icon-size);
}
.cw-wrapper .cw-overlay-close:hover {
color: var(--cw-text);
}
.cw-wrapper .cw-overlay-close:focus-visible {
outline: none;
box-shadow: var(--cw-focus-ring);
}
.cw-overlay-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.75rem 1rem 1rem;
}
.cw-overlay .cw-view {
font-size: 0.8rem;
line-height: var(--cw-bubble-line-height);
color: var(--cw-text);
}
.cw-overlay .cw-view-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.cw-overlay .cw-view-counter {
color: var(--cw-text-muted);
}
.cw-wrapper .cw-view-prev,
.cw-wrapper .cw-view-next {
min-width: 32px;
min-height: 32px;
padding: 0 0.5rem;
background: none;
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
font-family: inherit;
font-size: 1rem;
line-height: 1;
color: var(--cw-text);
cursor: pointer;
}
.cw-wrapper .cw-view-prev:disabled,
.cw-wrapper .cw-view-next:disabled {
opacity: 0.4;
cursor: default;
}
.cw-wrapper .cw-view-prev:focus-visible,
.cw-wrapper .cw-view-next:focus-visible,
.cw-wrapper .cw-view-reopen:focus-visible {
outline: none;
box-shadow: var(--cw-focus-ring);
}
.cw-overlay .cw-view-slide-title {
margin: 0 0 0.5rem;
font-size: 0.9rem;
font-weight: 600;
}
.cw-overlay .cw-view-html > :first-child {
margin-top: 0;
}
.cw-overlay .cw-view-html > :last-child {
margin-bottom: 0;
}
.cw-overlay .cw-view-empty {
margin: 0;
color: var(--cw-text-muted);
}
.cw-wrapper .cw-view-reopen {
display: inline-block;
margin-top: 0.4em;
min-height: 24px;
padding: 0.2rem 0.5rem;
background: none;
border: 1px solid var(--cw-border);
border-radius: var(--cw-radius);
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: var(--cw-text);
cursor: pointer;
}
.cw-wrapper .cw-view-reopen:hover {
border-color: var(--cw-text-muted);
}
.cw-overlay .cw-lead-form {
padding: 0;
margin: 0;
background: transparent;
border: none;
max-width: none;
}
@media (min-width: 768px) {
.cw-overlay .cw-overlay-header {
padding: var(--cw-overlay-header-padding);
}
.cw-overlay .cw-overlay-close {
min-width: var(--cw-overlay-close-size);
min-height: var(--cw-overlay-close-size);
}
.cw-overlay .cw-overlay-body {
padding: var(--cw-overlay-body-padding);
}
.cw-overlay .cw-lead-form {
display: grid;
grid-template-columns: var(--cw-lead-label-width) minmax(0, 1fr);
gap: var(--cw-lead-gap);
align-items: center;
}
.cw-overlay .cw-lead-form > * {
grid-column: 1 / -1;
}
.cw-overlay .cw-lead-form > label,
.cw-overlay .cw-lead-form > input {
grid-column: auto;
margin: 0;
}
.cw-overlay .cw-lead-form input[type="email"],
.cw-overlay .cw-lead-form input[type="tel"],
.cw-overlay .cw-lead-form input[type="text"] {
padding: var(--cw-lead-input-padding);
line-height: var(--cw-lead-input-line-height);
}
.cw-overlay .cw-lead-error {
min-height: 0;
}
.cw-overlay .cw-lead-ainote,
.cw-overlay .cw-lead-checkbox {
margin-bottom: 0;
}
.cw-overlay .cw-lead-form button {
justify-self: start;
margin-top: 0;
line-height: var(--cw-lead-input-line-height);
}
.cw-wrapper.cw-overlay-open:not([data-cw-mode="embed"]) .cw-actionbar {
display: none;
}
}
.cw-panel--overlay {
overflow: hidden;
}
.cw-overlay--opening {
animation: cw-overlay-rise var(--cw-overlay-duration) var(--cw-overlay-easing) both;
}
.cw-overlay--closing {
animation: cw-overlay-fall var(--cw-overlay-duration) var(--cw-overlay-easing) both;
pointer-events: none;
}
@keyframes cw-overlay-rise {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes cw-overlay-fall {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
.cw-wrapper[data-cw-mode="embed"] .cw-overlay {
bottom: 0;
border-bottom: 1px solid var(--cw-overlay-border);
border-radius: var(--cw-overlay-radius);
}
.cw-wrapper[data-cw-mode="embed"] {
position: relative;
bottom: auto;
left: auto;
right: auto;
z-index: auto;
width: 100%;
height: 100%;
pointer-events: auto;
}
.cw-wrapper[data-cw-mode="embed"] .cw-panel {
max-width: none;
max-height: none;
flex: 1 1 auto;
min-height: 0;
margin: 0;
padding-bottom: 0;
border-bottom: var(--cw-panel-border);
border-radius: var(--cw-radius-panel);
}
.cw-wrapper[data-cw-mode="embed"] .cw-input-row {
max-width: none;
padding: 0.5rem 0 0;
}
@media (max-width: 575.98px) {
.cw-stage-avatar {
display: none;
}
.cw-actionbar {
max-height: var(--cw-ele-max-height-mobile);
}
.cw-handoff {
max-height: var(--cw-handoff-max-height-mobile);
}
.cw-handoff__actions {
flex: 1 1 100%;
}
.cw-wrapper {
bottom: max(var(--cw-dock-kb, 0px), var(--cw-dock-offset, 0px));
}
.cw-input-row {
max-width: none;
padding: 0 0.5rem 0.5rem;
}
.cw-messages .cw-bubble {
font-size: var(--cw-bubble-font-size-mobile);
}
.cw-textarea {
font-size: var(--cw-input-font-size-mobile);
}
.cw-textarea::placeholder {
font-size: var(--cw-placeholder-font-size-mobile);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cw-input-inner:focus-within {
box-shadow: var(--cw-shadow-sm);
border-color: var(--cw-input-border-focus-mobile);
}
.cw-wrapper .cw-input-action {
min-width: 2.75rem;
min-height: 2.75rem;
font-size: 1.2rem;
}
.cw-panel {
max-width: none;
margin-left: 0;
margin-right: 0;
border-radius: 0;
border-left: none;
border-right: none;
}
.cw-overlay {
border-left: none;
border-right: none;
border-radius: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.cw-wrapper,
.cw-input-inner,
.cw-send-btn,
.cw-input-action,
.cw-conversation-item,
.cw-typing span,
.cw-agent-typing__dot,
.cw-stream-loader span,
.cw-overlay--opening,
.cw-overlay--closing,
.cw-ele--flash,
.cw-image-progress-bar,
.cw-tool-status::before {
transition: none !important;
animation: none !important;
}
}
@media (forced-colors: active) {
.cw-input-inner:focus-within,
.cw-wrapper .cw-ele-action:focus-visible,
.cw-wrapper .cw-ele-dismiss:focus-visible,
.cw-wrapper .cw-bubble-toggle:focus-visible,
.cw-messages .cw-knowledge-more:focus-visible,
.cw-overlay .cw-knowledge-more:focus-visible,
.cw-lead-form input[type="email"]:focus,
.cw-lead-form input[type="tel"]:focus,
.cw-lead-form input[type="text"]:focus,
.cw-wrapper .cw-overlay-close:focus-visible,
.cw-wrapper .cw-view-prev:focus-visible,
.cw-wrapper .cw-view-next:focus-visible,
.cw-wrapper .cw-view-reopen:focus-visible {
outline: 2px solid CanvasText;
outline-offset: 2px;
}
.cw-history-btn::before,
.cw-panel-new-btn::before,
.cw-close-btn::before,
.cw-sidebar-close::before,
.cw-overlay-close::before,
.cw-ele-dismiss::before,
.cw-panel-save-btn::before,
.cw-wrapper .cw-send-btn.cw-send-btn--stop::before {
forced-color-adjust: none;
background-color: ButtonText;
}
}
[data-chatcore-unmounted] {
display: none !important;
}
.cw-image-result {
line-height: 1.5;
}
.cw-image-result strong {
font-weight: 600;
}
.cw-image-confirmed {
border-left: 3px solid var(--cw-success);
padding-left: 0.6rem;
}
.cw-image-pending {
border-left: 3px solid var(--cw-warning);
padding-left: 0.6rem;
}
.cw-image-error {
border-left: 3px solid var(--cw-error);
padding-left: 0.6rem;
}
.cw-image-uploading,
.cw-image-processing {
border-left: 3px solid var(--cw-border);
padding-left: 0.6rem;
}
.cw-image-progress {
height: 3px;
background: var(--cw-border);
border-radius: 2px;
margin-top: 0.4rem;
overflow: hidden;
}
.cw-image-progress-bar {
height: 100%;
background: var(--cw-primary);
border-radius: 2px;
width: var(--progress, 0%);
transition: width 0.3s;
}
.cw-image-progress-bar.cw-indeterminate {
width: 30% !important;
animation: cw-indeterminate 1.2s ease-in-out infinite;
}
@keyframes cw-indeterminate {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}
.cw-image-filename {
font-size: 0.8rem;
color: var(--cw-text-muted);
}
.cw-image-check { color: var(--cw-success); }
.cw-image-error-icon { color: var(--cw-error); }
.cw-image-warn-icon { color: var(--cw-warning); }
.cw-image-photo-icon { color: var(--cw-text-muted); }
.cw-image-uncertain {
color: var(--cw-warning);
font-style: italic;
}
.cw-image-backfill-info {
margin-top: 0.4rem;
font-size: 0.75rem;
color: var(--cw-text-muted);
padding: 0.3rem 0.5rem;
background: var(--cw-success-bg);
border-radius: var(--cw-radius);
}
.cw-image-gaps-info {
margin-top: 0.3rem;
font-size: 0.75rem;
color: var(--cw-warning);
}
.cw-image-warning {
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--cw-warning);
}
.cw-image-actions {
margin-top: 0.5rem;
display: flex;
gap: 0.4rem;
}
.cw-image-action {
color: var(--cw-text-muted);
text-decoration: underline;
cursor: pointer;
font-size: 0.75rem;
}
.cw-image-action:hover {
color: var(--cw-text);
}
.cw-image-error-summary {
margin-top: 0.3rem;
font-size: 0.75rem;
color: var(--cw-error);
}
.cw-highlight {
outline: 3px solid var(--dg-chat-primary, currentColor);
outline-offset: 2px;
}
.cw-card {
padding: 0.75rem 1rem;
margin: 0 0 0.5rem;
border: 1px solid var(--dg-chat-border, rgba(0, 0, 0, 0.12));
border-radius: 0.5rem;
}