/*
 * Toolcat theme skin for the WPBot Pro AI chatbot (active skin: template-04).
 *
 * The chatbot is a third-party plugin whose own stylesheets can't be edited
 * safely (unlicensed build, no update channel — edits would be lost). This
 * file is a SCOPED override, enqueued AFTER the plugin's CSS (see
 * toolcat_enqueue_chatbot_skin() in functions.php), so it wins the cascade
 * without touching the plugin. Everything is namespaced to the widget's own
 * containers/classes, so nothing here can leak onto the rest of the page.
 *
 * Colours come from the theme's CSS custom properties (--blue is the orange
 * accent, --card/--soft/--ink/--border the surfaces and text), so the widget
 * automatically follows the site's light/dark mode with no extra rules.
 *
 * NOTE: the launcher-bubble colour is ALSO settable in WPBot → Appearance;
 * that path emits an inline `.wp-chatbot-ball{background:… !important}`, which
 * is why the launcher rules below need ID scope + !important to override it.
 * Setting it in the plugin's own settings is equally valid and avoids the
 * fight — this rule just guarantees a themed default either way.
 */

/* ── Typography: match the site (Montserrat) across the whole widget ── */
#wp-chatbot-ball-container,
#wp-chatbot-ball-container input,
#wp-chatbot-ball-container button,
#wp-chatbot-ball-container textarea,
.wp-chatbot-board-container,
.wp-chatbot-ball {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Floating launcher → theme accent ── */
#wp-chatbot-ball-container .wp-chatbot-ball,
#wp-chatbot-ball-container .qc_wpbot_floating_main,
#wp-chatbot-ball-container .wp-chatbot-ball:hover,
#wp-chatbot-ball-container .wp-chatbot-ball:focus,
#wp-chatbot-ball-container .qc_wpbot_floating_main:hover,
#wp-chatbot-ball-container .qc_wpbot_floating_main:focus {
	background: var(--blue) !important;
	box-shadow: 0 8px 24px rgba(234, 88, 12, .34) !important;
	border-radius: 14px !important;
}
/* If the launcher shows the plugin's icon glyph, keep it legible on orange. */
#wp-chatbot-ball-container .wp-chatbot-ball i,
#wp-chatbot-ball-container .qc_wpbot_floating_main i,
#wp-chatbot-ball-container .wp-chatbot-ball svg {
	color: #fff !important;
	fill: #fff !important;
}

/* ── Panel ── */
.wp-chatbot-board-container.active-chat-board {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(14, 26, 43, .22);
	overflow: hidden;
}
/* The skin paints a white→transparent gradient veil over the top of the
   board; it reads as a grey smear on a themed/dark panel. Remove it. */
.wp-chatbot-board-container:before {
	display: none !important;
}

/* ── Header ── */
.qcchatbot-template-04 .wp-chatbot-header,
.wp-chatbot-header-style04 {
	background: var(--card) !important;
	border-bottom: 1px solid var(--border) !important;
}
.wp-chatbot-header h3,
.wp-chatbot-header-style04 h3 {
	color: var(--heading) !important;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -.01em;
}
/* Header control chips (back / reload / close) — neutral on the card. */
.wp-chatbot-header-style04 span,
.wp-chatbot-header-style04 .qcld_back_to_start_menu {
	color: var(--muted) !important;
}
.wp-chatbot-header-style04 .qcld_back_to_start_menu {
	background: var(--soft) !important;
}

/* ── Message bubbles ── */
/* Bot bubble: soft surface, ink text. */
ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph,
.wp-chatbot-bubble {
	background-color: var(--soft) !important;
	color: var(--ink) !important;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.55;
}
/* User bubble: theme accent. */
ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
	background-color: var(--blue) !important;
	color: #fff !important;
	border-radius: 14px;
}
/* Links inside a bot message pick up the accent instead of the plugin blue. */
ul.wp-chatbot-messages-container .wp-chatbot-paragraph a {
	color: var(--blue);
	font-weight: 600;
}
/* Keep links on the accent-coloured user bubble readable. */
ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph a {
	color: #fff;
	text-decoration: underline;
}

/* ── Input row + send button ── */
.wp-chatbot-editor-container {
	background: var(--card) !important;
	border-top: 1px solid var(--border) !important;
}
.wp-chatbot-editor-container input {
	color: var(--ink) !important;
	background: transparent !important;
	font-family: inherit;
}
.wp-chatbot-editor-container input::placeholder,
.wp-chatbot-editor-container input::-webkit-input-placeholder,
.wp-chatbot-editor-container input::-moz-placeholder,
.wp-chatbot-editor-container input:-ms-input-placeholder {
	color: var(--muted) !important;
}
/* Send button → accent, squared to echo the theme's button language. */
.wp-chatbot-editor-container button {
	background: var(--blue) !important;
	box-shadow: 0 4px 14px rgba(234, 88, 12, .28) !important;
	border-radius: 10px !important;
}
.wp-chatbot-editor-container button:hover {
	background: var(--blue-deep) !important;
}
.wp-chatbot-editor-container button i,
.wp-chatbot-editor-container button svg {
	color: #fff !important;
	fill: #fff !important;
}

/* ── In-chat product cards (bot can surface products) ── */
#wp-chatbot-product-cart-button,
.wp-chatbot-product-cart-button {
	background: var(--blue) !important;
	color: #fff !important;
	border-radius: 0 !important;
	font-weight: 700 !important;
}
#wp-chatbot-product-price,
.wp-chatbot-product-price {
	color: var(--blue) !important;
	font-weight: 800 !important;
}