/*!
 * KEBS Assist — chat widget styles.
 *
 * Scoped under .kebs-assist-root so it neither inherits junk from the theme nor
 * leaks into it. Every selector begins with that class, and the button reset
 * uses :where() so it carries ZERO specificity — an ID or class in the reset
 * would otherwise beat the component rules below it and silently strip the
 * background and colour off the launcher and send button.
 */

.kebs-assist-root {
	/* KEBS brand blue, measured from kebs.go.ke's own stylesheets rather than
	   guessed: #0166b1 is the site's most-used colour (467 occurrences), with
	   #013989 as the natural darker shade for hover/active states and #f1b209
	   as the KEBS gold used for secondary emphasis. */
	--ke-accent: #0166b1;
	--ke-accent-dark: #013989;
	--ke-accent-soft: #eff6fc;
	--ke-bg: #ffffff;
	--ke-surface: #f7f8fa;
	--ke-text: #1a1d21;
	--ke-muted: #6b7280;
	--ke-border: #e3e6ea;
	--ke-radius: 14px;
	--ke-shadow: 0 12px 36px rgba(16, 24, 40, 0.18);

	position: fixed;
	inset: auto 0 0 auto;
	z-index: 2147483000;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ke-text);
	-webkit-font-smoothing: antialiased;
}

.kebs-assist-root.ke-left { inset: auto auto 0 0; }

.kebs-assist-root *,
.kebs-assist-root *::before,
.kebs-assist-root *::after { box-sizing: border-box; }

/* Zero-specificity reset. Do not add an ID or class here. */
:where(.kebs-assist-root) :where(button) {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
	margin: 0;
}

/* ------------------------------------------------------------ launcher */

.kebs-assist-root .ke-launcher {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--ke-accent);
	color: #fff;
	box-shadow: var(--ke-shadow);
	display: grid;
	place-items: center;
	transition: transform .18s ease, background .18s ease;
}
.kebs-assist-root.ke-left .ke-launcher { right: auto; left: 22px; }
.kebs-assist-root .ke-launcher:hover { transform: scale(1.06); background: var(--ke-accent-dark); }
.kebs-assist-root .ke-launcher:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kebs-assist-root .ke-launcher svg { width: 28px; height: 28px; display: block; }
.kebs-assist-root .ke-launcher .ke-launcher-close { display: none; }
.kebs-assist-root .ke-launcher[aria-expanded="true"] .ke-launcher-open { display: none; }
.kebs-assist-root .ke-launcher[aria-expanded="true"] .ke-launcher-close { display: block; }

/* --------------------------------------------------------------- panel */

.kebs-assist-root .ke-panel {
	position: fixed;
	right: 22px;
	bottom: 94px;
	width: min(400px, calc(100vw - 32px));
	height: min(620px, calc(100vh - 130px));
	background: var(--ke-bg);
	border-radius: var(--ke-radius);
	box-shadow: var(--ke-shadow);
	border: 1px solid var(--ke-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: ke-in .18s ease-out;
}
.kebs-assist-root.ke-left .ke-panel { right: auto; left: 22px; }
.kebs-assist-root .ke-panel.ke-closed { display: none; }

.kebs-assist-root .ke-panel-inline {
	position: relative;
	right: auto;
	bottom: auto;
	left: auto;
	width: 100%;
	height: 560px;
	box-shadow: none;
	animation: none;
}
.kebs-assist-root.is-inline { position: relative; inset: auto; z-index: 1; }

@keyframes ke-in {
	from { opacity: 0; transform: translateY(10px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kebs-assist-root .ke-panel { animation: none; }
	.kebs-assist-root .ke-launcher { transition: none; }
}

/* -------------------------------------------------------------- header */

.kebs-assist-root .ke-header {
	background: var(--ke-accent);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 11px;
	flex: none;
}
.kebs-assist-root .ke-header-mark {
	width: 34px; height: 34px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .16);
	display: grid; place-items: center;
	font-weight: 800; font-size: 11px; letter-spacing: .03em;
	flex: none;
}
.kebs-assist-root .ke-header-text { flex: 1; min-width: 0; }

/* Official logo on a white plate. The mark's own colours (blue wordmark, blue
   oval) are designed for a light ground, so the plate supplies one instead of
   the logo being recoloured to sit directly on the blue header. */
.kebs-assist-root .ke-logo {
	flex: none;
	background: #fff;
	border-radius: 7px;
	padding: 4px 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 36px;
}
.kebs-assist-root .ke-logo img {
	display: block;
	height: 26px;
	width: auto;
	max-width: 118px;
	object-fit: contain;
}
.kebs-assist-root .ke-header-title { font-weight: 650; font-size: 15px; line-height: 1.25; }
.kebs-assist-root .ke-header-sub {
	font-size: 11.5px; opacity: .86;
	display: flex; align-items: center; gap: 5px;
}
.kebs-assist-root .ke-dot { width: 6px; height: 6px; border-radius: 50%; background: #5ddb8f; flex: none; }
.kebs-assist-root .ke-icon-btn {
	width: 30px; height: 30px; border-radius: 7px;
	display: grid; place-items: center;
	color: #fff; opacity: .85; flex: none;
}
.kebs-assist-root .ke-icon-btn:hover { background: rgba(255,255,255,.16); opacity: 1; }
.kebs-assist-root .ke-icon-btn svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------ messages */

.kebs-assist-root .ke-log {
	flex: 1; overflow-y: auto; overscroll-behavior: contain;
	padding: 16px 14px 6px;
	background: var(--ke-bg);
	display: flex; flex-direction: column; gap: 12px;
}
.kebs-assist-root .ke-log::-webkit-scrollbar { width: 8px; }
.kebs-assist-root .ke-log::-webkit-scrollbar-thumb { background: #d6dade; border-radius: 4px; }

.kebs-assist-root .ke-row { display: flex; gap: 9px; max-width: 100%; }
.kebs-assist-root .ke-row.ke-user { justify-content: flex-end; }

.kebs-assist-root .ke-avatar {
	width: 27px; height: 27px; border-radius: 7px;
	background: var(--ke-accent-soft);
	color: var(--ke-accent);
	display: grid; place-items: center;
	font-size: 9px; font-weight: 800;
	flex: none; margin-top: 2px;
}

.kebs-assist-root .ke-bubble {
	max-width: 82%;
	padding: 10px 13px;
	border-radius: 12px;
	background: var(--ke-surface);
	border: 1px solid var(--ke-border);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.kebs-assist-root .ke-user .ke-bubble {
	background: var(--ke-accent);
	border-color: var(--ke-accent);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.kebs-assist-root .ke-bot .ke-bubble { border-bottom-left-radius: 4px; }
.kebs-assist-root .ke-bubble p { margin: 0 0 8px; }
.kebs-assist-root .ke-bubble p:last-child { margin-bottom: 0; }
.kebs-assist-root .ke-bubble ul,
.kebs-assist-root .ke-bubble ol { margin: 6px 0; padding-left: 20px; }
.kebs-assist-root .ke-bubble li { margin: 3px 0; }
.kebs-assist-root .ke-bubble strong { font-weight: 650; }
.kebs-assist-root .ke-bubble a { color: var(--ke-accent); text-decoration: underline; }
.kebs-assist-root .ke-user .ke-bubble a { color: #fff; }

/* ------------------------------------------------------------- sources */

.kebs-assist-root .ke-sources {
	margin-top: 10px; padding-top: 9px;
	border-top: 1px dashed var(--ke-border);
	font-size: 12px;
}
.kebs-assist-root .ke-sources-label {
	color: var(--ke-muted); font-weight: 620;
	text-transform: uppercase; letter-spacing: .04em;
	font-size: 10px; margin-bottom: 5px;
}
.kebs-assist-root .ke-source {
	display: flex; align-items: baseline; gap: 5px;
	color: var(--ke-muted); padding: 2px 0;
}
.kebs-assist-root .ke-source a { color: var(--ke-accent); }
.kebs-assist-root .ke-src-dept { font-size: 11px; opacity: .8; }
.kebs-assist-root .ke-src-kind { font-size: 11px; opacity: .85; font-style: italic; }

/* ------------------------------------------------------------- actions */

.kebs-assist-root .ke-actions {
	display: flex; align-items: center; gap: 6px;
	margin-top: 9px; padding-top: 8px;
	border-top: 1px dashed var(--ke-border);
}
.kebs-assist-root .ke-action {
	font-size: 11.5px; color: var(--ke-muted);
	padding: 4px 8px; border-radius: 7px;
	border: 1px solid transparent;
	display: inline-flex; align-items: center; gap: 4px;
}
.kebs-assist-root .ke-action:hover { background: var(--ke-surface); border-color: var(--ke-border); }
.kebs-assist-root .ke-action.ke-on { color: var(--ke-accent); font-weight: 650; }
.kebs-assist-root .ke-action svg { width: 13px; height: 13px; }
.kebs-assist-root .ke-spacer { flex: 1; }

/* --------------------------------------------------------- suggestions */

.kebs-assist-root .ke-suggest { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.kebs-assist-root .ke-suggest-btn {
	text-align: left; padding: 9px 12px;
	border-radius: 10px; border: 1px solid var(--ke-border);
	background: var(--ke-bg); color: var(--ke-text);
	font-size: 13.5px;
	transition: border-color .15s ease, background .15s ease;
}
.kebs-assist-root .ke-suggest-btn:hover { border-color: var(--ke-accent); background: var(--ke-accent-soft); }

/* ---------------------------------------------------------- escalation */

.kebs-assist-root .ke-escalate {
	margin-top: 10px; padding: 11px 13px;
	border-radius: 10px;
	background: var(--ke-accent-soft);
	border: 1px solid #cfe3f4;
	font-size: 13px;
}
.kebs-assist-root .ke-escalate-title { font-weight: 650; margin-bottom: 5px; }
.kebs-assist-root .ke-escalate a { color: var(--ke-accent); }
.kebs-assist-root .ke-escalate-actions { margin-top: 9px; display: flex; gap: 7px; flex-wrap: wrap; }
.kebs-assist-root .ke-escalate-actions button {
	font-size: 12px; padding: 6px 11px; border-radius: 7px;
	border: 1px solid var(--ke-accent); color: var(--ke-accent); background: #fff;
}
.kebs-assist-root .ke-escalate-actions button:hover { background: var(--ke-accent); color: #fff; }

/* -------------------------------------------------------------- typing */

.kebs-assist-root .ke-typing { display: flex; gap: 4px; padding: 3px 0; }
.kebs-assist-root .ke-typing span {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ke-muted);
	animation: ke-blink 1.3s infinite ease-in-out;
}
.kebs-assist-root .ke-typing span:nth-child(2) { animation-delay: .18s; }
.kebs-assist-root .ke-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes ke-blink {
	0%, 60%, 100% { opacity: .28; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
	.kebs-assist-root .ke-typing span { animation: none; opacity: .55; }
}

/* ------------------------------------------------------------ composer */

.kebs-assist-root .ke-composer {
	flex: none;
	border-top: 1px solid var(--ke-border);
	padding: 10px 12px 12px;
	background: var(--ke-bg);
}
.kebs-assist-root .ke-input-row {
	display: flex; align-items: flex-end; gap: 8px;
	border: 1px solid var(--ke-border);
	border-radius: 11px;
	padding: 7px 7px 7px 12px;
	background: var(--ke-bg);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.kebs-assist-root .ke-input-row:focus-within {
	border-color: var(--ke-accent);
	box-shadow: 0 0 0 3px rgba(1, 102, 177, .12);
}
.kebs-assist-root .ke-input {
	flex: 1; border: 0; outline: 0; resize: none;
	font: inherit; color: var(--ke-text); background: transparent;
	max-height: 120px; min-height: 22px; line-height: 1.5; padding: 0;
	box-shadow: none;
}
.kebs-assist-root .ke-input:focus { outline: 0; box-shadow: none; border: 0; }
.kebs-assist-root .ke-input::placeholder { color: #9aa1a9; }
.kebs-assist-root .ke-send {
	width: 34px; height: 34px; border-radius: 9px;
	background: var(--ke-accent); color: #fff;
	display: grid; place-items: center; flex: none;
	transition: background .15s ease, opacity .15s ease;
}
.kebs-assist-root .ke-send:hover:not(:disabled) { background: var(--ke-accent-dark); }
.kebs-assist-root .ke-send:disabled { opacity: .38; cursor: not-allowed; }
.kebs-assist-root .ke-send svg { width: 17px; height: 17px; }

.kebs-assist-root .ke-foot {
	margin-top: 8px; font-size: 10.5px;
	color: var(--ke-muted); text-align: center; line-height: 1.45;
}
.kebs-assist-root .ke-foot a { color: var(--ke-muted); text-decoration: underline; }

@media (max-width: 480px) {
	.kebs-assist-root .ke-panel {
		right: 0; left: 0; bottom: 0;
		width: 100vw; height: 100vh; height: 100dvh;
		border-radius: 0; border: 0;
	}
	.kebs-assist-root .ke-launcher { right: 16px; bottom: 16px; }
	.kebs-assist-root .ke-bubble { max-width: 88%; }
}