/* Custom Chatbot Widget styles.
 *
 * Everything is scoped under .cbw-widget. Because this drops into
 * unknown themes, there's a hard reset below that strips inherited
 * button/link/heading styling (borders, pill shapes, uppercase, theme
 * colors) that would otherwise leak in. Every component rule is written
 * as `.cbw-widget .cbw-thing` so it outranks the reset AND most theme
 * rules. If you're customising, keep that two-class pattern.
 *
 * Colors come from the CSS variables below; --cbw-primary and
 * --cbw-panel-bg are overwritten from the plugin settings. */

.cbw-widget {
	--cbw-primary: #2563EB;
	--cbw-primary-ink: #ffffff;
	--cbw-panel-bg: #EFF6FF;
	--cbw-surface: #ffffff;
	--cbw-border: #E3E8EF;
	--cbw-text: #1F2430;
	--cbw-text-muted: #6B7280;
	--cbw-danger: #B3261E;
	--cbw-radius: 16px;
	--cbw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--cbw-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--cbw-text);
	box-sizing: border-box;
	text-align: left;
}

.cbw-widget *,
.cbw-widget *::before,
.cbw-widget *::after {
	box-sizing: border-box;
}

/* ---------- Reset: block theme styles from leaking in ---------- */
.cbw-widget div,
.cbw-widget span,
.cbw-widget p,
.cbw-widget ol,
.cbw-widget ul,
.cbw-widget li,
.cbw-widget img,
.cbw-widget svg,
.cbw-widget a,
.cbw-widget form,
.cbw-widget button,
.cbw-widget input,
.cbw-widget textarea {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	border-radius: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	font-style: normal;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-align: inherit;
	list-style: none;
	float: none;
	position: static;
	min-width: 0;
	min-height: 0;
	max-width: none;
	width: auto;
	height: auto;
	transform: none;
	transition: none;
	animation: none;
	vertical-align: baseline;
	-webkit-appearance: none;
	appearance: none;
}

/* Armor: some themes style buttons/inputs/links with !important, which
 * no amount of specificity can beat — only !important can. These are
 * properties the widget never varies per component, so forcing them
 * here is safe. Components that legitimately need a border or a
 * background re-declare it with !important below. */
.cbw-widget button,
.cbw-widget input,
.cbw-widget textarea,
.cbw-widget a,
.cbw-widget img,
.cbw-widget svg {
	border: 0 !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	font-family: inherit !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	float: none !important;
	outline: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.cbw-widget button,
.cbw-widget input,
.cbw-widget textarea,
.cbw-widget a {
	background-color: transparent !important;
}

.cbw-widget button,
.cbw-widget input,
.cbw-widget textarea {
	cursor: pointer;
}
.cbw-widget input,
.cbw-widget textarea {
	cursor: text;
}
.cbw-widget svg {
	display: block;
	flex-shrink: 0;
}
.cbw-widget img {
	display: block;
	max-width: 100%;
}

/* Some themes animate button/link interactive states by fading,
 * hiding, or color-matching inner text and icons to the background
 * (a "reveal" or "swap" effect). That's what makes text vanish on
 * hover — and, just as often, what leaves a button's icon invisible
 * after it's clicked: the click leaves the button focused/active, the
 * theme's own styling hides it in that state, and only :hover (which
 * this already overrides) makes it reappear — so moving the cursor
 * away without re-hovering leaves it looking gone. Covering
 * :focus and :active here as well as :hover closes that gap. */
.cbw-widget button:hover,
.cbw-widget a:hover,
.cbw-widget button:focus,
.cbw-widget a:focus,
.cbw-widget button:active,
.cbw-widget a:active,
.cbw-widget button:hover *,
.cbw-widget a:hover *,
.cbw-widget button:focus *,
.cbw-widget a:focus *,
.cbw-widget button:active *,
.cbw-widget a:active * {
	color: inherit !important;
	opacity: 1 !important;
	visibility: visible !important;
	text-shadow: none !important;
	background-image: none !important;
}

/* ---------- Floating shell + launcher ---------- */
.cbw-widget--floating {
	position: fixed;
	bottom: 24px;
	z-index: 999999;
	width: var(--cbw-launcher-size, 56px);
	height: var(--cbw-launcher-size, 56px);
}
.cbw-widget--floating.cbw-pos-bottom-right { right: 24px; }
.cbw-widget--floating.cbw-pos-bottom-left { left: 24px; }

/* Once dragged, left/top drive position instead of the preset corner. */
.cbw-widget--floating.cbw-dragged {
	right: auto;
	bottom: auto;
}

.cbw-widget .cbw-launcher {
	width: var(--cbw-launcher-size, 56px);
	height: var(--cbw-launcher-size, 56px);
	border-radius: 50%;
	background-color: var(--cbw-primary) !important;
	color: var(--cbw-primary-ink);
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
	transition: transform 0.15s ease;
}
/* "Rounded (curved) square" shape option — same box, softer corners
 * instead of a full circle. */
.cbw-widget--floating.cbw-launcher-shape-rounded-square .cbw-launcher {
	border-radius: 22%;
}
.cbw-widget--floating.cbw-launcher-shape-rounded-square .cbw-launcher-avatar {
	border-radius: 22%;
}
.cbw-widget .cbw-launcher:hover { transform: scale(1.05); }
.cbw-widget .cbw-launcher svg { width: 24px; height: 24px; }
.cbw-widget .cbw-launcher-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.cbw-widget .cbw-launcher .cbw-icon-close { display: none; }
/* While the panel is open, the header's own Close button handles
 * dismissing it, so the floating bubble is hidden entirely instead
 * of swapping to a redundant close icon. */
.cbw-widget--floating.cbw-open .cbw-launcher { display: none; }
.cbw-widget.cbw-dragging .cbw-launcher { transform: none; cursor: grabbing; }

/* Hover popup: a small card that appears next to the floating icon
 * on hover, when enabled in Settings > Appearance. Hidden entirely
 * while the panel is open or while the icon is being dragged. */
.cbw-widget .cbw-launcher-popup {
	position: absolute;
	bottom: 0;
	width: 220px;
	max-width: calc(100vw - 96px);
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.16);
	padding: 14px 16px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.cbw-widget--floating.cbw-pos-bottom-right .cbw-launcher-popup { right: calc(100% + 16px); left: auto; }
.cbw-widget--floating.cbw-pos-bottom-left .cbw-launcher-popup { left: calc(100% + 16px); right: auto; }
.cbw-widget--floating:not(.cbw-open):not(.cbw-dragging):hover .cbw-launcher-popup {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.cbw-widget .cbw-launcher-popup-title {
	font-weight: 700;
	font-size: 14px;
	color: var(--cbw-text);
	margin-bottom: 4px;
}
.cbw-widget .cbw-launcher-popup-desc {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cbw-text-muted);
}

/* ---------- Panel ---------- */
.cbw-widget .cbw-panel {
	display: flex;
	flex-direction: column;
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	border-radius: var(--cbw-radius);
	box-shadow: 0 12px 32px rgba(0,0,0,0.16);
	overflow: hidden;
}
.cbw-widget .cbw-panel[hidden] { display: none; }

.cbw-widget--floating .cbw-panel {
	position: absolute;
	bottom: 72px;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 140px);
}
.cbw-widget--floating.cbw-pos-bottom-right .cbw-panel { right: 0; left: auto; }
.cbw-widget--floating.cbw-pos-bottom-left .cbw-panel { left: 0; right: auto; }

/* Placement overrides applied by JS after a drag, so the panel always
 * opens into whatever space is actually available. */
.cbw-widget--floating.cbw-anchor-left .cbw-panel { left: 0; right: auto; }
.cbw-widget--floating.cbw-anchor-right .cbw-panel { right: 0; left: auto; }
.cbw-widget--floating.cbw-flip-down .cbw-panel { top: 72px; bottom: auto; }

.cbw-widget--inline .cbw-panel {
	width: 100%;
	max-width: 440px;
	height: 560px;
}

/* Inline minimized state collapses to just the header bar. */
.cbw-widget--inline.cbw-minimized .cbw-panel { height: auto; }
.cbw-widget--inline.cbw-minimized .cbw-panel-body,
.cbw-widget--inline.cbw-minimized .cbw-panel-footer { display: none; }

.cbw-widget .cbw-reopen {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--cbw-primary) !important;
	color: var(--cbw-primary-ink);
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Header ---------- */
.cbw-widget .cbw-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--cbw-surface);
	border-bottom: 1px solid var(--cbw-border);
	flex-shrink: 0;
}
.cbw-widget--floating .cbw-header {
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.cbw-widget--floating.cbw-dragging .cbw-header { cursor: grabbing; }

.cbw-widget .cbw-header-avatar-wrap { position: relative; flex-shrink: 0; }
.cbw-widget .cbw-header-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}
.cbw-widget .cbw-header-dot {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #22C55E;
	border: 2px solid var(--cbw-surface);
}
.cbw-widget .cbw-header-text { flex: 1 1 auto; min-width: 0; }
.cbw-widget .cbw-header-name {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: var(--cbw-text);
}
.cbw-widget .cbw-header-status {
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--cbw-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cbw-widget .cbw-header-actions {
	display: flex;
	align-items: center;
	gap: 1px;
	flex-shrink: 0;
}
.cbw-widget .cbw-icon-btn {
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: transparent;
	color: var(--cbw-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cbw-widget .cbw-icon-btn:hover { background-color: var(--cbw-panel-bg) !important; color: var(--cbw-text) !important; }
.cbw-widget .cbw-icon-btn.cbw-active { background-color: var(--cbw-panel-bg) !important; color: var(--cbw-primary); }
.cbw-widget .cbw-icon-btn svg { width: 16px; height: 16px; }

/* Hover tooltip showing the icon's name (Search, Past conversations,
 * New chat, Minimize, Close). Anchored per-button so it never spills
 * outside the panel, which clips overflow. */
.cbw-widget .cbw-icon-btn::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--cbw-text);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.12s ease, visibility 0.12s ease;
	z-index: 5;
}
.cbw-widget .cbw-icon-btn:hover::after,
.cbw-widget .cbw-icon-btn:focus-visible::after {
	opacity: 1;
	visibility: visible;
}
/* Rightmost two icons (Minimize, Close) sit close to the panel's edge,
 * so anchor their tooltip to the right instead of centering it. */
.cbw-widget .cbw-header-actions .cbw-icon-btn:nth-last-child(-n+2)::after {
	left: auto;
	right: 0;
	transform: none;
}

/* ---------- Body ---------- */
.cbw-widget .cbw-panel-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior-y: contain; /* Stop scroll from chaining into the host page once the chat body hits its top/bottom edge. */
	background: var(--cbw-panel-bg);
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* ---------- Search ("Find in conversation" bar) ---------- */
.cbw-widget .cbw-search-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: var(--cbw-surface);
	border-bottom: 1px solid var(--cbw-border);
	flex-shrink: 0;
	/* Stays pinned at the top of the scrollable list while searching,
	 * so it never scrolls out of view as matches are stepped through
	 * or the visitor scrolls the conversation/history themselves. */
	position: sticky;
	top: 0;
	z-index: 3;
}
.cbw-widget .cbw-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0 !important;
	border-radius: 0;
	padding: 4px 2px;
	font-size: 13px;
	background-color: transparent !important;
	color: var(--cbw-text);
}
.cbw-widget .cbw-search-input:focus { outline: 0; }
.cbw-widget .cbw-search-count {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--cbw-text-muted);
	white-space: nowrap;
}
.cbw-widget .cbw-search-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	padding-left: 8px;
	border-left: 1px solid var(--cbw-border);
	flex-shrink: 0;
}
.cbw-widget .cbw-search-nav-btn {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: transparent;
	color: var(--cbw-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cbw-widget .cbw-search-nav-btn:hover { background-color: var(--cbw-panel-bg) !important; color: var(--cbw-text) !important; }
.cbw-widget .cbw-search-nav-btn svg { width: 14px; height: 14px; }
/* Matches found while searching. The active one (the match currently
 * navigated to via the up/down buttons) is a deeper amber so it's
 * easy to tell apart from the rest. */
.cbw-widget mark.cbw-search-hit {
	background-color: #FDE68A;
	color: #1F2430;
	border-radius: 2px;
	padding: 0 1px;
}
.cbw-widget mark.cbw-search-hit--active {
	background-color: #F59E0B;
	color: #1F2430;
}

/* ---------- Welcome ---------- */
.cbw-widget .cbw-welcome { padding: 18px 16px; }
.cbw-widget .cbw-welcome-card {
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	border-radius: 14px;
	padding: 16px;
}
.cbw-widget .cbw-welcome-title {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	color: var(--cbw-text);
	margin-bottom: 6px;
}
.cbw-widget .cbw-welcome-message {
	font-size: 14px;
	line-height: 1.55;
	color: var(--cbw-text);
	white-space: pre-wrap;
}

.cbw-widget .cbw-try-asking {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cbw-text-muted);
	margin: 18px 0 10px;
}
.cbw-widget .cbw-starter-list { display: flex; flex-direction: column; gap: 8px; }
.cbw-widget .cbw-starter-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	background-color: var(--cbw-surface) !important;
	border: 1px solid var(--cbw-border) !important;
	border-radius: 10px;
	padding: 11px 13px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--cbw-primary);
	text-align: left;
	cursor: pointer;
}
.cbw-widget .cbw-starter-pill:hover { border-color: var(--cbw-primary) !important; }
.cbw-widget .cbw-starter-pill span {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}
.cbw-widget .cbw-starter-pill svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.65; }

/* ---------- Messages ---------- */
.cbw-widget .cbw-messages {
	flex: 1 1 auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Inside a fixed-height scrolling panel, flex children will happily
 * shrink below their content and let text spill out of its own card.
 * Nothing in a scrolling list should ever shrink. */
.cbw-widget .cbw-messages > *,
.cbw-widget .cbw-row > *,
.cbw-widget .cbw-cards-list > *,
.cbw-widget .cbw-starter-list > *,
.cbw-widget .cbw-history-list > *,
.cbw-widget .cbw-steps-list > *,
.cbw-widget .cbw-reason-list > * {
	flex-shrink: 0;
}

.cbw-widget .cbw-row { display: flex; flex-direction: column; max-width: 88%; }
.cbw-widget .cbw-row--user { align-self: flex-end; align-items: flex-end; }
.cbw-widget .cbw-row--bot { align-self: flex-start; align-items: flex-start; }

.cbw-widget .cbw-bubble {
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: break-word;
}
.cbw-widget .cbw-row--user .cbw-bubble {
	background: var(--cbw-primary);
	color: var(--cbw-primary-ink);
	border-bottom-right-radius: 4px;
}
.cbw-widget .cbw-row--bot .cbw-bubble {
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	color: var(--cbw-text);
	border-bottom-left-radius: 4px;
}
.cbw-widget .cbw-panel-body a {
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	color: var(--cbw-primary);
	transition: text-decoration-thickness 0.12s ease;
}
/* A global reset earlier in this file forces color:inherit !important
 * on every hovered/focused/active link or button (to stop themes
 * hiding that content in those states) — without this override that
 * reset would flip message links to the bubble's plain text color
 * instead of keeping them blue. Re-assert the link color for all
 * three states so the only visible change is a thicker underline. */
.cbw-widget .cbw-panel-body a:hover,
.cbw-widget .cbw-panel-body a:focus,
.cbw-widget .cbw-panel-body a:active {
	color: var(--cbw-primary) !important;
	text-decoration-thickness: 2px;
}
.cbw-widget .cbw-row--user .cbw-bubble a { color: inherit; }
.cbw-widget .cbw-row--user .cbw-bubble a:hover,
.cbw-widget .cbw-row--user .cbw-bubble a:focus,
.cbw-widget .cbw-row--user .cbw-bubble a:active {
	color: inherit !important;
	text-decoration-thickness: 2px;
}
.cbw-widget .cbw-bubble--error {
	background: transparent;
	border: 0;
	color: var(--cbw-danger);
	font-size: 13px;
}

/* Bullet lists built from "- " lines in a plain-text reply. */
.cbw-widget .cbw-richtext-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 6px 0;
	padding: 0;
	list-style: none;
}
.cbw-widget .cbw-richtext-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.cbw-widget .cbw-richtext-bullet {
	flex-shrink: 0;
	font-weight: 700;
}
.cbw-widget .cbw-panel-body strong { font-weight: 700; }
.cbw-widget .cbw-panel-body strong.cbw-richtext-heading { font-weight: 600; }

/* Steps */
.cbw-widget .cbw-steps-card {
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	padding: 14px 16px;
}
.cbw-widget .cbw-steps-intro { font-size: 14px; line-height: 1.5; color: var(--cbw-text); margin-bottom: 10px; }
.cbw-widget .cbw-steps-list { display: flex; flex-direction: column; gap: 10px; }
.cbw-widget .cbw-step {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--cbw-text);
}
.cbw-widget .cbw-step-num {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--cbw-panel-bg);
	color: var(--cbw-primary);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cbw-widget .cbw-steps-footnote {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--cbw-border);
	font-size: 12px;
	color: var(--cbw-text-muted);
}
.cbw-widget .cbw-steps-footnote svg { width: 13px; height: 13px; }

.cbw-widget .cbw-path-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	align-self: flex-start;
	margin-top: 6px;
	padding: 5px 10px;
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	border-radius: 999px;
	font-size: 12px;
	color: var(--cbw-primary);
}
.cbw-widget .cbw-path-chip svg { width: 12px; height: 12px; }

/* Plan / pricing cards */
.cbw-widget .cbw-cards-intro {
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	padding: 12px 14px;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cbw-text);
}
.cbw-widget .cbw-cards-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cbw-widget .cbw-plan-card {
	position: relative;
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	border-radius: 14px;
	padding: 14px 16px;
}
.cbw-widget .cbw-plan-card--featured { border-color: var(--cbw-primary); border-width: 2px; }
.cbw-widget .cbw-plan-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cbw-primary);
}
.cbw-widget .cbw-plan-title { font-weight: 700; font-size: 13.5px; color: var(--cbw-primary); margin-bottom: 4px; }
.cbw-widget .cbw-plan-price { display: flex; align-items: baseline; gap: 4px; }
.cbw-widget .cbw-plan-price-amount { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--cbw-text); }
.cbw-widget .cbw-plan-price-period { font-size: 12px; color: var(--cbw-text-muted); }
.cbw-widget .cbw-plan-note { font-size: 11.5px; color: var(--cbw-text-muted); margin-top: 2px; }
.cbw-widget .cbw-plan-then { font-size: 12.5px; font-weight: 600; color: var(--cbw-text); margin-top: 4px; }
.cbw-widget .cbw-plan-desc { font-size: 12.5px; line-height: 1.5; color: var(--cbw-text-muted); margin-top: 8px; }

/* Follow-ups */
.cbw-widget .cbw-followup-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cbw-text-muted);
	margin: 10px 0 6px;
}
.cbw-widget .cbw-followup-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cbw-widget .cbw-followup-pill {
	background-color: var(--cbw-surface) !important;
	border: 1px solid var(--cbw-border) !important;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--cbw-primary);
	text-align: left;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	cursor: pointer;
}
.cbw-widget .cbw-followup-pill:hover { border-color: var(--cbw-primary) !important; }

/* Feedback */
.cbw-widget .cbw-feedback-row { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.cbw-widget .cbw-feedback-btn {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: transparent;
	color: var(--cbw-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cbw-widget .cbw-feedback-btn:hover { background-color: var(--cbw-surface) !important; }
.cbw-widget .cbw-feedback-btn.cbw-active { color: var(--cbw-primary); background-color: var(--cbw-surface) !important; }
.cbw-widget .cbw-feedback-btn svg { width: 15px; height: 15px; }

.cbw-widget .cbw-reason-picker {
	width: 100%;
	margin-top: 8px;
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	border-radius: 12px;
	padding: 12px;
}
.cbw-widget .cbw-reason-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cbw-text-muted);
	margin-bottom: 8px;
}
.cbw-widget .cbw-reason-list { display: flex; flex-direction: column; gap: 6px; }
.cbw-widget .cbw-reason-option {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background-color: var(--cbw-panel-bg) !important;
	border-radius: 8px;
	padding: 9px 11px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--cbw-text);
	text-align: left;
	cursor: pointer;
}
.cbw-widget .cbw-reason-option:hover { background-color: var(--cbw-border) !important; }
.cbw-widget .cbw-reason-option svg { width: 15px; height: 15px; color: var(--cbw-primary); }
.cbw-widget .cbw-feedback-thanks { font-size: 12px; color: var(--cbw-text-muted); margin-top: 6px; }

.cbw-widget .cbw-reason-text-box { display: flex; flex-direction: column; }
.cbw-widget .cbw-reason-textarea {
	width: 100%;
	resize: none;
	background-color: var(--cbw-panel-bg) !important;
	border: 1px solid var(--cbw-border);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	line-height: 1.4;
	color: var(--cbw-text);
	max-height: 96px;
}
.cbw-widget .cbw-reason-textarea:focus { outline: 2px solid var(--cbw-primary); outline-offset: 1px; }
.cbw-widget .cbw-reason-text-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.cbw-widget .cbw-reason-text-btn {
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.cbw-widget .cbw-reason-text-cancel { background: transparent !important; color: var(--cbw-text-muted); }
.cbw-widget .cbw-reason-text-cancel:hover { background-color: var(--cbw-border) !important; }
.cbw-widget .cbw-reason-text-send { background-color: var(--cbw-primary) !important; color: #fff; }
.cbw-widget .cbw-reason-text-send:hover { filter: brightness(0.95); }

/* Typing */
.cbw-widget .cbw-typing-row { align-self: flex-start; }
.cbw-widget .cbw-typing {
	display: flex;
	gap: 4px;
	padding: 12px 13px;
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	border-radius: 14px;
	border-bottom-left-radius: 4px;
}
.cbw-widget .cbw-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cbw-text-muted);
	animation: cbw-bounce 1.2s infinite ease-in-out;
}
.cbw-widget .cbw-typing span:nth-child(2) { animation-delay: 0.15s; }
.cbw-widget .cbw-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cbw-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- History ---------- */
.cbw-widget .cbw-history { padding: 12px 14px; }
.cbw-widget .cbw-history-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.cbw-widget .cbw-history-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cbw-text-muted);
}
.cbw-widget .cbw-clear-all {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--cbw-danger);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.cbw-widget .cbw-clear-all svg { width: 13px; height: 13px; }
.cbw-widget .cbw-history-list { display: flex; flex-direction: column; gap: 8px; }
.cbw-widget .cbw-history-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--cbw-surface);
	border: 1px solid var(--cbw-border);
	border-radius: 12px;
	padding: 12px;
	cursor: pointer;
}
.cbw-widget .cbw-history-item:hover { border-color: var(--cbw-primary) !important; }
.cbw-widget .cbw-history-icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--cbw-panel-bg);
	color: var(--cbw-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cbw-widget .cbw-history-icon svg { width: 15px; height: 15px; }
.cbw-widget .cbw-history-meta { flex: 1 1 auto; min-width: 0; }
.cbw-widget .cbw-history-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--cbw-text); }
.cbw-widget .cbw-history-date { font-size: 11.5px; color: var(--cbw-text-muted); margin-top: 2px; }
.cbw-widget .cbw-history-delete {
	flex-shrink: 0;
	padding: 4px;
	color: var(--cbw-text-muted);
	cursor: pointer;
}
.cbw-widget .cbw-history-delete:hover { color: var(--cbw-danger) !important; }
.cbw-widget .cbw-history-delete svg { width: 15px; height: 15px; }
.cbw-widget .cbw-history-empty {
	text-align: center;
	color: var(--cbw-text-muted);
	font-size: 13px;
	padding: 32px 12px;
}

/* ---------- Maintenance ---------- */
.cbw-widget .cbw-maintenance { padding: 40px 24px; text-align: center; margin: auto; }
.cbw-widget .cbw-maintenance-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 14px;
	background: var(--cbw-surface);
	color: var(--cbw-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cbw-widget .cbw-maintenance-icon svg { width: 24px; height: 24px; }
.cbw-widget .cbw-maintenance-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--cbw-text);
	margin-bottom: 8px;
	text-align: center;
}
.cbw-widget .cbw-maintenance-message {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--cbw-text-muted);
	margin-bottom: 18px;
	text-align: center;
}
.cbw-widget .cbw-maintenance-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.cbw-widget .cbw-maintenance-links a {
	background-color: var(--cbw-surface) !important;
	border: 1px solid var(--cbw-border) !important;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cbw-primary);
	text-decoration: none;
}
.cbw-widget .cbw-maintenance-links a:hover { border-color: var(--cbw-primary) !important; }

/* ---------- Footer / input ---------- */
.cbw-widget .cbw-panel-footer { flex-shrink: 0; background: var(--cbw-surface); }
.cbw-widget .cbw-input-row {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	padding: 12px;
	border-top: 1px solid var(--cbw-border);
	background: var(--cbw-surface);
}
.cbw-widget .cbw-input {
	flex: 1 1 auto;
	resize: none;
	max-height: 96px;
	border: 1px solid var(--cbw-border) !important;
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--cbw-text);
	background-color: var(--cbw-panel-bg) !important;
}
.cbw-widget .cbw-input:focus { outline: 2px solid var(--cbw-primary); outline-offset: 1px; }
.cbw-widget .cbw-mic {
	width: 34px;
	height: 38px;
	flex-shrink: 0;
	background: transparent;
	color: var(--cbw-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cbw-widget .cbw-mic:hover { color: var(--cbw-primary) !important; }
.cbw-widget .cbw-mic svg { width: 18px; height: 18px; }
/* Listening state while speech recognition is capturing audio: a red
 * pulsing ring plus a gentle icon pulse, so it's obvious the mic is
 * actively picking up sound. */
.cbw-widget .cbw-mic.cbw-mic-listening {
	position: relative;
	color: var(--cbw-danger) !important;
	animation: cbw-mic-icon-pulse 1.1s ease-in-out infinite;
}
.cbw-widget .cbw-mic.cbw-mic-listening::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.45);
	animation: cbw-mic-ring-pulse 1.1s ease-out infinite;
	pointer-events: none;
}
@keyframes cbw-mic-icon-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}
@keyframes cbw-mic-ring-pulse {
	0% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.45); }
	70% { box-shadow: 0 0 0 9px rgba(179, 38, 30, 0); }
	100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0); }
}
.cbw-widget .cbw-send {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 10px;
	background-color: var(--cbw-primary) !important;
	color: var(--cbw-primary-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cbw-widget .cbw-send:disabled { opacity: 0.5; cursor: default; }
.cbw-widget .cbw-send svg { width: 18px; height: 18px; }
.cbw-widget .cbw-disclaimer {
	text-align: center;
	font-size: 11px;
	line-height: 1.4;
	color: var(--cbw-text-muted);
	padding: 0 12px 10px;
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	.cbw-widget--floating .cbw-panel {
		width: calc(100vw - 24px);
		height: calc(100vh - 130px);
	}
}