/**
 * MyBot admin page CSS.
 *
 * @package MyBot
 */

/*
 * The brand header at the top of every MyBot screen.
 *
 * The logo file is built from `Logo Demo/Main Logo.png` by tools/make-plugin-logo.mjs and ships
 * inside the plugin, so nothing here depends on a build step or on a remote asset.
 */
.mybot-brand {
	align-items: center;
	display: flex;
	gap: 12px;
	margin: 8px 0 14px;
}

.mybot-brand__logo {
	display: block;
	flex: 0 0 auto;
	height: 40px;
	width: 40px;
}

.mybot-brand__title {
	font-size: 22px;
	line-height: 1.25;
	margin: 0;
	padding: 0;
}

.mybot-brand__lead {
	color: #50575e;
	font-size: 13px;
	margin: 3px 0 0;
	max-width: 780px;
}

.mybot-admin__lead {
	color: #50575e;
	font-size: 14px;
	margin-bottom: 18px;
	max-width: 780px;
}

.mybot-admin__grid {
	align-items: flex-start;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

/* ===== Questions waiting for a human ===== */
.mybot-request {
	background: #fff;
	border: 1px solid #dcdcde;
	border-left-width: 4px;
	border-radius: 4px;
	margin-bottom: 10px;
	padding: 10px 12px;
}

.mybot-request--new {
	border-left-color: #d63638;
}

.mybot-request--answered {
	border-left-color: #dba617;
}

.mybot-request--closed {
	border-left-color: #00a32a;
	opacity: 0.75;
}

.mybot-request__head {
	margin: 0 0 6px;
}

.mybot-request__head .mybot-muted {
	display: block;
	font-size: 12px;
	margin-top: 2px;
}

.mybot-request__question {
	background: #f6f7f7;
	border-radius: 4px;
	margin: 0 0 6px;
	padding: 8px 10px;
	white-space: pre-wrap;
}

.mybot-request .mybot-actions {
	margin-bottom: 0;
}

@media screen and (max-width: 1100px) {
	.mybot-admin__grid {
		grid-template-columns: 1fr;
	}
}

.mybot-admin__main {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	padding: 8px 20px 4px;
}

/*
 * ===== Settings: a sidebar of sections (1.11.0) =====
 *
 * The sections used to be WordPress's horizontal `nav-tab` strip above one long form. Two things
 * pushed it over: the strip grew past the width of the screen once add-ons could contribute a tab,
 * and the dashboard next door already navigates with a left sidebar — so the plugin had two
 * different shapes for "where am I", one of them wrapping onto a second line.
 *
 * The sidebar is `position: sticky` so the section list stays reachable while a long form scrolls,
 * and it is a plain <nav> of links: the same `data-mybot-tab` attribute as before, so the script
 * that switches sections did not have to change which attribute it reads.
 */
.mybot-settings {
	align-items: flex-start;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(180px, 210px) minmax(0, 1fr);
}

.mybot-nav {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: sticky;
	top: 46px;
}

.mybot-nav__item {
	border-left: 4px solid transparent;
	color: #1d2327;
	display: block;
	font-size: 13px;
	line-height: 1.4;
	padding: 10px 14px;
	text-decoration: none;
}

.mybot-nav__item:hover,
.mybot-nav__item:focus {
	background: #f6f7f7;
	color: #2271b1;
}

.mybot-nav__item:focus {
	box-shadow: inset 0 0 0 2px #2271b1;
	outline: 2px solid transparent;
}

.mybot-nav__item.is-active {
	background: #f0f6fc;
	border-left-color: #2271b1;
	font-weight: 600;
}

/* Separates the sections that configure MyBot from the ones that extend and report on it. */
.mybot-nav__rule {
	border: 0;
	border-top: 1px solid #e5e7eb;
	margin: 6px 0;
}

.mybot-tab-panel {
	padding-top: 4px;
}

@media screen and (max-width: 960px) {
	.mybot-settings {
		grid-template-columns: 1fr;
	}

	.mybot-nav {
		flex-direction: row;
		flex-wrap: wrap;
		position: static;
	}

	.mybot-nav__item {
		border-bottom: 4px solid transparent;
		border-left: 0;
	}

	.mybot-nav__item.is-active {
		border-bottom-color: #2271b1;
	}

	.mybot-nav__rule {
		display: none;
	}
}

.mybot-lang-heading {
	align-items: center;
	border-top: 1px solid #e5e7eb;
	display: flex;
	font-size: 14px;
	gap: 8px;
	margin: 22px 0 0;
	padding-top: 16px;
}

.mybot-lang-heading:first-of-type {
	border-top: 0;
}

.mybot-lang-heading code {
	background: #f0f0f1;
	border-radius: 3px;
	font-size: 11px;
	padding: 2px 6px;
}

.mybot-badge {
	background: #dbeafe;
	border-radius: 999px;
	color: #1d4ed8;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 9px;
}

.mybot-alert {
	background: #fef2f2;
	border-left: 4px solid #dc2626;
	border-radius: 3px;
	font-size: 12px;
	line-height: 1.6;
	margin: 12px 0 4px;
	padding: 8px 10px;
}

/*
 * The same box reports a knowledge lookup, which is not always bad news: a lookup that worked
 * and one that simply found nothing are different readings, and painting all three red would
 * repeat the mistake of 6.20 — a label that contradicts what it sits next to.
 */
.mybot-alert--ok {
	background: #f0fdf4;
	border-left-color: #16a34a;
}

.mybot-alert--info {
	background: #f8fafc;
	border-left-color: #94a3b8;
}

.mybot-muted {
	color: #6b7280;
	font-size: 11px;
}

/* ===== Failed background jobs, on the Status card (1.6.7) ===== */
.mybot-failed {
	list-style: none;
	margin: 8px 0 4px;
	padding: 0;
}

.mybot-failed li {
	border-top: 1px solid #f0f0f1;
	font-size: 12px;
	padding: 6px 0;
}

.mybot-failed li:first-child {
	border-top: 0;
}

.mybot-failed code {
	background: #f0f0f1;
	border-radius: 3px;
	font-size: 11px;
	padding: 1px 5px;
}

.mybot-failed__reason {
	color: #b91c1c;
	word-break: break-word;
}

.mybot-admin .form-table th {
	width: 220px;
}

/*
 * The report cards moved from a right-hand column into the "Status" section (1.11.0), so these
 * three rules follow them into the panel. `.mybot-admin__side` is kept in the selector list because
 * the Requests screen still uses that column.
 */
.mybot-admin__side .card,
.mybot-tab-panel .card {
	margin-bottom: 16px;
	max-width: none;
	padding: 8px 16px 14px;
}

.mybot-admin__side .card h2,
.mybot-tab-panel .card h2 {
	font-size: 14px;
	margin: 8px 0 10px;
}

.mybot-admin__side code,
.mybot-tab-panel .card code {
	background: #f0f0f1;
	border-radius: 3px;
	display: inline-block;
	font-size: 12px;
	padding: 3px 6px;
	word-break: break-all;
}

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

.mybot-stats li {
	border-bottom: 1px solid #f0f0f1;
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
}

.mybot-stats li:last-child {
	border-bottom: 0;
}

.mybot-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
}

.mybot-log {
	background: #1f2937;
	border-radius: 4px;
	color: #e5e7eb;
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
	line-height: 1.6;
	margin-top: 10px;
	max-height: 220px;
	overflow-y: auto;
	padding: 10px 12px;
	white-space: pre-wrap;
	word-break: break-word;
}

.mybot-log:empty {
	display: none;
}

.mybot-log__line--ok {
	color: #86efac;
}

.mybot-log__line--error {
	color: #fca5a5;
}

.mybot-log__line--info {
	color: #93c5fd;
}

/*
 * The Get started steps.
 *
 * A step is a card with a number, a title, a status light and a note. The light carries a word as well
 * as a colour, because colour alone is not a status for anyone who cannot separate red from green.
 */
.mybot-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 14px 0;
}

.mybot-step {
	background: #fff;
	border: 1px solid #dcdcde;
	border-left: 4px solid #c3c4c7;
	border-radius: 4px;
	padding: 12px 16px;
}

.mybot-step--ok {
	border-left-color: #00a32a;
}

.mybot-step--todo {
	border-left-color: #dba617;
}

.mybot-step--warn {
	border-left-color: #d63638;
}

.mybot-step__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mybot-step__no {
	align-items: center;
	background: #f0f0f1;
	border-radius: 50%;
	color: #50575e;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	height: 22px;
	justify-content: center;
	width: 22px;
}

.mybot-step__title {
	flex: 1 1 auto;
	font-size: 14px;
}

.mybot-step__light {
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	white-space: nowrap;
}

/*
 * Colour AND a word. `:empty` keeps a step with no state quiet instead of drawing an empty pill, and the
 * `::before` markers mean the meaning survives when the colour does not.
 */
.mybot-step__light:empty {
	display: none;
}

.mybot-step--ok .mybot-step__light {
	background: #edfaef;
	color: #007017;
}

.mybot-step--ok .mybot-step__light::before {
	content: "\2713\00a0";
}

.mybot-step--todo .mybot-step__light {
	background: #fcf9e8;
	color: #8a6116;
}

.mybot-step--todo .mybot-step__light::before {
	content: "\2022\00a0";
}

.mybot-step--warn .mybot-step__light {
	background: #fcf0f1;
	color: #8a2424;
}

.mybot-step--warn .mybot-step__light::before {
	content: "\0021\00a0";
}

.mybot-step__note {
	color: #50575e;
	margin: 6px 0 0;
}

.mybot-step > .form-table {
	margin-top: 4px;
}

.mybot-step > .mybot-actions {
	margin: 4px 0 0;
}

/*
 * A disclosure that stays inside the form.
 *
 * `<details>` cannot be used here: the settings screen is one big `<form>`, and wrapping fields in
 * `<details>` would put the element between the form and its inputs, so those inputs would stop being
 * submitted — silently, and only for the people who saved without opening the block. A checkbox plus a
 * label keeps every field inside the form and still needs no JavaScript.
 */
.mybot-advanced > input[type="checkbox"] {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.mybot-advanced > label {
	color: #2271b1;
	cursor: pointer;
	display: inline-block;
	font-weight: 600;
	margin: 8px 0;
	text-decoration: underline;
}

.mybot-advanced > label::before {
	content: "\25B8\00a0";
	display: inline-block;
	text-decoration: none;
	transition: transform 0.1s ease-in-out;
}

.mybot-advanced > input[type="checkbox"]:checked ~ label::before {
	transform: rotate(90deg);
}

.mybot-advanced > input[type="checkbox"]:focus-visible ~ label {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.mybot-advanced__body {
	display: none;
}

.mybot-advanced > input[type="checkbox"]:checked ~ .mybot-advanced__body {
	display: block;
}

/* The React dashboard handles its own inner layout. */
.mybot-admin--app {
	margin: 0;
	max-width: none;
	padding: 0 20px 0 0;
}

@media screen and (max-width: 782px) {
	.mybot-admin--app {
		padding-right: 10px;
	}
}

/*
 * Placeholder shown while the React dashboard boots. React replaces this node when it
 * renders, and the admin JS swaps in the settings form if the bundle never mounts, so
 * the plugin page is never blank.
 */
.mybot-boot {
	background: #fff;
	border: 1px solid #e4e7ec;
	border-left: 3px solid #2563eb;
	border-radius: 8px;
	color: #475467;
	margin: 0;
	padding: 14px 18px;
}

/* ===== Requests screen (1.6.6) ===== */

/*
 * A list of people waiting for an answer is read, not configured, so this screen is a single
 * column: the widest line belongs to the visitor's question, not to a settings table.
 */
.mybot-admin--requests {
	max-width: 940px;
}

.mybot-requests__probe {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 4px;
}

.mybot-requests__probe .mybot-muted {
	max-width: 620px;
}

.mybot-requests__filters {
	margin: 14px 0 12px;
}

.mybot-requests__range {
	margin: 0 0 8px;
}

.mybot-badge--new {
	background: #fee2e2;
	color: #b91c1c;
}

.mybot-badge--answered {
	background: #fef3c7;
	color: #92400e;
}

.mybot-badge--closed {
	background: #dcfce7;
	color: #166534;
}

.mybot-request__contact {
	margin: 0 0 6px;
}

.mybot-request__answer {
	background: #fff;
	border-left: 3px solid #dcdcde;
	color: #3c434a;
	margin: 0 0 6px;
	padding: 4px 0 4px 10px;
}

.mybot-request__answer .mybot-muted {
	display: block;
}

.mybot-request__session {
	margin: 0 0 6px;
	word-break: break-all;
}

.mybot-requests__paging {
	align-items: center;
	display: flex;
	gap: 12px;
	margin: 14px 0 4px;
}

/* Pictures visitors sent (1.14.0). */
.mybot-pictures {
	margin-top: 18px;
}

.mybot-pictures > summary {
	cursor: pointer;
	font-weight: 600;
}

.mybot-pictures__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.mybot-pictures__item {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 8px;
	width: 168px;
}

.mybot-pictures__thumb {
	background: #f0f0f1;
	border-radius: 3px;
	display: block;
	height: 120px;
	object-fit: cover;
	width: 100%;
}

.mybot-pictures__item .mybot-muted {
	font-size: 11px;
	line-height: 1.4;
}

.mybot-pictures__conversation {
	word-break: break-all;
}

/* ===== The visitor cards screen (1.17.0) =====
 *
 * A table, on purpose: this screen answers "who is this and how do I reach them", which a list answers
 * better than cards — the eye can run down one column of phone numbers, and a support person is usually
 * looking for exactly that.
 */
.mybot-contacts__bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 14px 0;
}

.mybot-contacts__table {
	margin-top: 6px;
}

.mybot-contacts__table td {
	vertical-align: top;
}

/* The consent sentence is long and the column is narrow: it wraps rather than pushing the table wide. */
.mybot-contacts__table td .mybot-muted {
	display: inline-block;
	font-size: 11px;
	line-height: 1.4;
	max-width: 320px;
}

.mybot-contacts__paging {
	align-items: center;
	display: flex;
	gap: 12px;
	margin: 14px 0 4px;
}

.mybot-contacts__privacy {
	border-top: 1px solid #e5e7eb;
	margin-top: 18px;
	max-width: 780px;
	padding-top: 12px;
}