/**
 * Front-end chat widget CSS.
 *
 * @package MyBot
 */

/*
 * Typography is pinned inside the widget, and pinned hard.
 *
 * Vietnamese needs glyphs from the Latin Extended Additional block. A theme whose body font is
 * a webfont loaded with only the "latin" subset has none of them, so the browser fills those
 * characters from a different font: one sentence then comes out in two typefaces and the
 * diacritics look wrong — which is what "the Vietnamese font is broken" usually turns out to
 * be. A rule that targets elements directly (for example `.fl-page-content p`) beats a
 * font-family inherited from an ancestor, so every descendant is named here, and the form
 * controls separately because a browser gives <button> and <input> their own default font
 * instead of inheriting one. The stack ends in families that always carry Vietnamese, so it
 * degrades safely. Scoped to the widget: nothing outside it is affected.
 */
.mybot-widget,
.mybot-widget *,
.mybot-widget button,
.mybot-widget input,
.mybot-widget textarea,
.mybot-widget select {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif !important;
}

.mybot-widget {
	--mybot-color: #2563eb;
	--mybot-height: 480px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	font-size: 14px;
	line-height: 1.55;
	/*
	 * The composer grows with the question, so the widget has to have a ceiling of its own. The
	 * floating panel is anchored a fixed distance from the bottom of the screen, so without this a
	 * five-line question on a phone would push the widget's own header — and its close button — off
	 * the top of the viewport. The message list is the part that gives way; see below.
	 */
	max-height: calc(100vh - 110px);
	overflow: hidden;
	width: 380px;
}

.mybot-widget--inline {
	margin: 20px auto;
	max-width: 100%;
	width: 100%;
}

/* ===== Widget header ===== */
.mybot-widget__header {
	align-items: center;
	background: var(--mybot-color);
	color: #fff;
	display: flex;
	gap: 8px;
	padding: 12px 14px;
}

/*
 * The brand mark in the widget header and on the launcher.
 *
 * Both sit on the plugin's own primary colour, which a site owner can change — so the mark rides on
 * a white circle rather than directly on the colour. The logo is blue on white, and blue-on-blue at
 * 26px is unreadable; a white badge keeps it legible whatever colour is configured.
 */
.mybot-widget__avatar img {
	background: #fff;
	border-radius: 50%;
	display: block;
	height: 26px;
	padding: 1px;
	width: 26px;
}

.mybot-widget__title {
	flex: 1 1 auto;
	font-weight: 600;
}

.mybot-widget__minimize {
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	opacity: 0.85;
	padding: 0 4px;
}

.mybot-widget__minimize:hover {
	opacity: 1;
}

/* ===== Language switch buttons ===== */
.mybot-lang {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	display: flex;
	flex: 0 0 auto;
	gap: 2px;
	padding: 2px;
}

.mybot-lang__btn {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	opacity: 0.75;
	padding: 5px 8px;
	transition: background 0.15s ease, opacity 0.15s ease;
	white-space: nowrap;
}

.mybot-lang__btn:hover {
	opacity: 1;
}

.mybot-lang__btn.is-active {
	background: #fff;
	color: var(--mybot-color);
	opacity: 1;
}

.mybot-widget--dark .mybot-lang {
	background: rgba(255, 255, 255, 0.12);
}

@media screen and (max-width: 400px) {
	.mybot-lang__btn {
		font-size: 10px;
		padding: 5px 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mybot-lang__btn {
		transition: none;
	}
}

/* ===== Message area ===== */
.mybot-widget__messages {
	background: #f7f8fa;
	display: flex;
	/*
	 * `height` is the size this area asks for and `flex-shrink` is what lets it give way when the
	 * composer grows past the widget's ceiling. It is also a scroll container, which is what makes
	 * shrinking it safe: a flex item with `overflow-y: auto` may shrink below its content height,
	 * so the messages scroll instead of overflowing the widget.
	 */
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	height: var(--mybot-height);
	overflow-y: auto;
	padding: 14px;
}

.mybot-message {
	border-radius: 12px;
	max-width: 84%;
	padding: 9px 13px;
	word-wrap: break-word;
}

.mybot-message__text {
	white-space: pre-wrap;
}

.mybot-message--bot {
	align-self: flex-start;
	background: #fff;
	border: 1px solid #e5e7eb;
	color: #1f2937;
}

.mybot-message--user {
	align-self: flex-end;
	background: var(--mybot-color);
	color: #fff;
}

.mybot-message--pending {
	align-self: flex-start;
	color: #6b7280;
	font-style: italic;
}

/* ===== Reference sources ===== */
.mybot-sources {
	border-top: 1px solid #e5e7eb;
	font-size: 12px;
	margin-top: 8px;
	padding-top: 6px;
}

.mybot-sources__title {
	color: #6b7280;
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.mybot-sources__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mybot-sources__list li {
	margin-bottom: 3px;
}

.mybot-sources__list a {
	color: var(--mybot-color);
	text-decoration: none;
}

.mybot-sources__list a:hover {
	text-decoration: underline;
}

/* ===== Feedback ===== */
.mybot-feedback {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}

.mybot-feedback button {
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 12px;
	color: #4b5563;
	cursor: pointer;
	font-size: 11px;
	padding: 3px 9px;
}

.mybot-feedback button:hover {
	border-color: var(--mybot-color);
	color: var(--mybot-color);
}

.mybot-feedback button[disabled] {
	cursor: default;
	opacity: 0.55;
}

.mybot-feedback__done {
	color: #6b7280;
	font-size: 11px;
	margin-top: 6px;
}

/*
 * ===== Hand over to a human =====
 *
 * Sits inside the bot bubble, under the answer, because that is where the dead end happened.
 * A separate box elsewhere in the panel would read as a different conversation.
 */
.mybot-support {
	border-top: 1px solid #e5e7eb;
	margin-top: 10px;
	padding-top: 10px;
}

.mybot-support__title {
	color: #111827;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

.mybot-support__intro {
	color: #4b5563;
	font-size: 12px;
	line-height: 1.5;
	margin: 0 0 9px;
}

.mybot-support__field {
	display: block;
	margin-bottom: 7px;
}

.mybot-support__field span {
	color: #6b7280;
	display: block;
	font-size: 11px;
	margin-bottom: 2px;
}

.mybot-support__field input,
.mybot-support__field textarea {
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 12px;
	padding: 6px 9px;
	width: 100%;
}

.mybot-support__field textarea {
	min-height: 54px;
	resize: vertical;
}

.mybot-support__field input:focus,
.mybot-support__field textarea:focus {
	border-color: var(--mybot-color);
	outline: 2px solid rgba(37, 99, 235, 0.15);
}

.mybot-support__actions {
	display: flex;
	gap: 6px;
	margin-top: 9px;
}

.mybot-support__send {
	background: var(--mybot-color);
	border: 0;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	padding: 7px 13px;
}

.mybot-support__send[disabled] {
	cursor: default;
	opacity: 0.6;
}

.mybot-support__later {
	background: transparent;
	border: 0;
	color: #6b7280;
	cursor: pointer;
	font-size: 12px;
	padding: 7px 6px;
	text-decoration: underline;
}

.mybot-support__status {
	color: #6b7280;
	font-size: 11px;
	margin: 7px 0 0;
	min-height: 14px;
}

.mybot-support__status--error {
	color: #b91c1c;
}

.mybot-support__done {
	color: #065f46;
	font-size: 12px;
	margin: 0;
}

.mybot-widget--dark .mybot-support {
	border-top-color: #374151;
}

.mybot-widget--dark .mybot-support__title {
	color: #f9fafb;
}

.mybot-widget--dark .mybot-support__intro,
.mybot-widget--dark .mybot-support__field span,
.mybot-widget--dark .mybot-support__status {
	color: #9ca3af;
}

.mybot-widget--dark .mybot-support__field input,
.mybot-widget--dark .mybot-support__field textarea {
	background: #1f2937;
	border-color: #4b5563;
	color: #f9fafb;
}

.mybot-widget--dark .mybot-support__done {
	color: #6ee7b7;
}


/* ===== Input field ===== */
.mybot-widget__form {
	background: #fff;
	border-top: 1px solid #e5e7eb;
	display: flex;
	gap: 8px;
	/* The composer grows upwards, so the Send button sits on the last line of the text instead of
	   floating in the middle of a tall box. */
	align-items: flex-end;
	padding: 10px;
}

.mybot-widget__input {
	border: 1px solid #d1d5db;
	border-radius: 20px;
	/*
	 * Declared, not inherited: the script sets this element's height from its content, and that only
	 * lands on the intended size if the box model is known. A theme with a global `content-box` rule
	 * would otherwise add 18px of padding on top of every measurement.
	 */
	box-sizing: border-box;
	flex: 1 1 auto;
	font-size: 14px;
	/*
	 * A fixed line height, because the script that grows this box measures `scrollHeight` and
	 * compares it with `max-height`: the two only agree if a line is a known number of pixels.
	 * `max-height` is the ceiling that script reads — it is deliberately the only place this number
	 * lives (docs/08 muc 6.34), so it can be changed here without touching the JavaScript.
	 * `overflow-y` is `auto` from the start so the field is still usable with JavaScript disabled,
	 * where it never grows and simply scrolls.
	 */
	line-height: 20px;
	max-height: 132px;
	min-width: 0;
	overflow-wrap: break-word;
	overflow-y: auto;
	padding: 9px 14px;
	resize: none;
}

.mybot-widget__input:focus {
	border-color: var(--mybot-color);
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
	outline: none;
}

.mybot-widget__send {
	background: var(--mybot-color);
	border: 0;
	border-radius: 20px;
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	padding: 9px 18px;
}

.mybot-widget__send:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* ===== Dark theme ===== */
.mybot-widget--dark {
	background: #111827;
}

.mybot-widget--dark .mybot-widget__messages {
	background: #1f2937;
}

.mybot-widget--dark .mybot-message--bot {
	background: #374151;
	border-color: #4b5563;
	color: #f9fafb;
}

.mybot-widget--dark .mybot-widget__form {
	background: #111827;
	border-top-color: #374151;
}

.mybot-widget--dark .mybot-widget__input {
	background: #1f2937;
	border-color: #4b5563;
	color: #f9fafb;
}

.mybot-widget--dark .mybot-feedback button {
	background: #1f2937;
	border-color: #4b5563;
	color: #d1d5db;
}

/* ===== Floating launcher ===== */
.mybot-launcher {
	bottom: 22px;
	position: fixed;
	z-index: 999998;
}

.mybot-launcher--bottom-right {
	right: 22px;
}

.mybot-launcher--bottom-left {
	left: 22px;
}

.mybot-launcher__button {
	align-items: center;
	background: var(--mybot-color);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	display: flex;
	height: 58px;
	justify-content: center;
	transition: transform 0.15s ease;
	width: 58px;
}

.mybot-launcher__button:hover {
	transform: translateY(-2px);
}

.mybot-launcher__icon {
	align-items: center;
	display: flex;
	justify-content: center;
}

.mybot-launcher__icon img {
	background: #fff;
	border-radius: 50%;
	display: block;
	height: 36px;
	padding: 2px;
	width: 36px;
}

/* Open: the mark gives way to the close glyph, painted over the button colour. */
.mybot-launcher__icon.is-open img {
	display: none;
}

.mybot-launcher__icon.is-open::after {
	color: #fff;
	content: '\2715';
	font-size: 24px;
	line-height: 1;
}

/* ===== Floating panel ===== */
.mybot-floating-panel {
	bottom: 92px;
	position: fixed;
	z-index: 999999;
}

.mybot-floating-panel[data-mybot-panel="bottom-right"] {
	right: 22px;
}

.mybot-floating-panel[data-mybot-panel="bottom-left"] {
	left: 22px;
}

.mybot-floating-panel .mybot-widget {
	width: min(380px, calc(100vw - 44px));
}

@media screen and (max-width: 480px) {
	.mybot-floating-panel {
		bottom: 84px;
		left: 12px;
		right: 12px;
	}

	.mybot-floating-panel .mybot-widget {
		width: 100%;
	}

	.mybot-widget__messages {
		height: min(var(--mybot-height), 60vh);
	}

	.mybot-launcher {
		bottom: 16px;
	}

	.mybot-launcher--bottom-right {
		right: 16px;
	}

	.mybot-launcher--bottom-left {
		left: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mybot-launcher__button {
		transition: none;
	}

	.mybot-launcher__button:hover {
		transform: none;
	}
}