/* Barweb Chat — front-end widget
   Everything themeable comes in as a CSS custom property from the settings,
   so this file stays static and cacheable.

   The widget drops into whatever theme the site runs, and themes style bare
   `button`, `input` and `textarea` elements freely — borders, radii, padding,
   uppercase text. So every rule here is scoped under .bwc-root for specificity,
   the reset block below neutralises inherited styling, and the properties
   themes most often set carry !important on the interactive elements. Without
   that the launcher picks up the theme's button border and stops being round. */

/* ------------------------------------------------------------- container */

.bwc-root {
	--bwc-font: inherit;
	position: fixed;
	z-index: 999999;
	bottom: var(--bwc-offset-y, 24px);
	font-family: var(--bwc-font);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	direction: ltr;
}

.bwc-root[data-position="right"] { right: var(--bwc-offset-x, 24px); }
.bwc-root[data-position="left"]  { left:  var(--bwc-offset-x, 24px); }

/* --------------------------------------------------------------- reset */

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

.bwc-root div,
.bwc-root span,
.bwc-root p,
.bwc-root form,
.bwc-root label,
.bwc-root button,
.bwc-root input,
.bwc-root textarea,
.bwc-root a,
.bwc-root img,
.bwc-root svg,
.bwc-root code,
.bwc-root strong,
.bwc-root em {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	text-indent: 0;
	text-shadow: none;
	text-decoration: none;
	float: none;
	min-width: 0;
	min-height: 0;
	max-width: none;
	max-height: none;
	border-radius: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
	vertical-align: baseline;
	transform: none;
	transition: none;
	animation: none;
}

.bwc-root button,
.bwc-root input,
.bwc-root textarea {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.bwc-root textarea,
.bwc-root input {
	cursor: auto;
}

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

.bwc-root .bwc-launcher-wrap {
	position: relative;
	display: inline-block;
}

.bwc-root .bwc-launcher {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 60px !important;
	height: 60px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--bwc-primary, #2563eb) !important;
	background-image: none !important;
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-transform: none !important;
	cursor: pointer;
	box-shadow: 0 8px 28px rgba(15, 23, 42, .28) !important;
	transition: transform .18s ease, box-shadow .18s ease;
}

.bwc-root .bwc-launcher:hover  { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(15, 23, 42, .34) !important; }
.bwc-root .bwc-launcher:active { transform: translateY(0); }
.bwc-root .bwc-launcher:focus  { outline: 0 !important; }
.bwc-root .bwc-launcher:focus-visible { outline: 3px solid var(--bwc-primary) !important; outline-offset: 3px; }

.bwc-root .bwc-launcher.has-label {
	width: auto !important;
	height: 56px !important;
	padding: 0 22px 0 18px !important;
}

.bwc-root .bwc-launcher svg { width: 26px; height: 26px; flex: 0 0 auto; }
.bwc-root .bwc-launcher img { width: 30px; height: 30px; border-radius: 50% !important; object-fit: cover; }

.bwc-root .bwc-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px !important;
	background: #ef4444 !important;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: none;
	align-items: center;
	justify-content: center;
}

.bwc-root .bwc-launcher-wrap.has-unread .bwc-badge { display: inline-flex; }

/* --------------------------------------------------------------- teaser */

.bwc-root .bwc-teaser {
	position: absolute;
	bottom: 74px;
	width: max-content;
	max-width: 260px !important;
	padding: 12px 34px 12px 14px !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: #fff !important;
	color: #0f172a;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .2) !important;
	font-size: 14px;
	line-height: 1.45;
	white-space: normal !important;
	word-break: normal;
	cursor: pointer;
	animation: bwc-pop .28s ease;
}

.bwc-root[data-position="right"] .bwc-teaser { right: 0; }
.bwc-root[data-position="left"]  .bwc-teaser { left: 0; }

.bwc-root .bwc-teaser-close {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 22px !important;
	height: 22px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: none !important;
	color: #94a3b8;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.bwc-root .bwc-teaser-close:hover { background: rgba(15, 23, 42, .07) !important; }

@keyframes bwc-pop {
	from { opacity: 0; transform: translateY(8px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

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

.bwc-root .bwc-panel {
	position: absolute;
	bottom: 76px;
	width: var(--bwc-width, 380px);
	height: var(--bwc-height, 560px);
	max-height: calc(100vh - 120px);
	border: 0 !important;
	border-radius: var(--bwc-radius, 16px) !important;
	background: var(--bwc-panel-bg, #fff) !important;
	color: var(--bwc-panel-text, #0f172a);
	box-shadow: 0 24px 60px rgba(15, 23, 42, .28) !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: bwc-pop .22s ease;
}

.bwc-root[data-position="right"] .bwc-panel { right: 0; }
.bwc-root[data-position="left"]  .bwc-panel { left: 0; }

/* The hidden attribute has to beat display:flex. */
.bwc-root .bwc-panel[hidden] { display: none; }

.bwc-root .bwc-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px !important;
	background: var(--bwc-header-bg, #2563eb) !important;
	color: var(--bwc-header-text, #fff);
	flex: 0 0 auto;
}

.bwc-root .bwc-header img {
	width: 38px;
	height: 38px;
	border-radius: 50% !important;
	object-fit: cover;
	flex: 0 0 auto;
}

.bwc-root .bwc-header-text { flex: 1 1 auto; min-width: 0; }
.bwc-root .bwc-header-title { font-weight: 650; font-size: 15px; }
.bwc-root .bwc-header-sub { font-size: 12.5px; opacity: .85; }

.bwc-root .bwc-header-btn {
	width: 30px !important;
	height: 30px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, .16) !important;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	flex: 0 0 auto;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.bwc-root .bwc-header-btn:hover { background: rgba(255, 255, 255, .28) !important; }

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

.bwc-root .bwc-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}

.bwc-root .bwc-msg {
	/* flex-shrink defaults to 1, so once the transcript outgrows the panel
	   the browser squashes each bubble below its content height and the text
	   spills over the bubble below it. Pinning shrink to 0 makes the column
	   scroll instead, which is what the overflow-y on .bwc-messages is for. */
	flex: 0 0 auto;
	max-width: 84% !important;
	height: auto !important;
	min-height: 0;
	padding: 10px 13px !important;
	border: 0 !important;
	border-radius: 14px !important;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 14.5px;
	line-height: 1.5;
	animation: bwc-pop .18s ease;
}

.bwc-root .bwc-cta,
.bwc-root .bwc-typing { flex: 0 0 auto; }

.bwc-root .bwc-msg a { color: inherit; text-decoration: underline !important; }
.bwc-root .bwc-msg strong { font-weight: 700; }
.bwc-root .bwc-msg em { font-style: italic; }

.bwc-root .bwc-msg code {
	background: rgba(15, 23, 42, .08) !important;
	padding: 1px 5px !important;
	border-radius: 5px !important;
	font-family: Consolas, Monaco, monospace;
	font-size: .92em;
}

.bwc-root .bwc-msg-assistant {
	align-self: flex-start;
	background: var(--bwc-bot-bg, #f1f5f9) !important;
	color: var(--bwc-bot-text, #0f172a);
	border-bottom-left-radius: 5px !important;
}

.bwc-root .bwc-msg-user {
	align-self: flex-end;
	background: var(--bwc-user-bg, #2563eb) !important;
	color: var(--bwc-user-text, #fff);
	border-bottom-right-radius: 5px !important;
}

.bwc-root .bwc-msg-agent {
	align-self: flex-start;
	background: var(--bwc-agent-bg, #ecfdf5) !important;
	color: var(--bwc-agent-text, #064e3b);
	border-bottom-left-radius: 5px !important;
}

.bwc-root .bwc-msg-system {
	align-self: center;
	max-width: 95% !important;
	background: none !important;
	color: inherit;
	opacity: .65;
	font-size: 13px;
	text-align: center;
	padding: 4px 8px !important;
}

.bwc-root .bwc-author {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	opacity: .7;
	margin-bottom: 3px;
	text-transform: uppercase !important;
	letter-spacing: .3px;
}

.bwc-root .bwc-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(15, 23, 42, .1) !important;
}

.bwc-root .bwc-sources a {
	background: rgba(15, 23, 42, .07) !important;
	padding: 3px 9px !important;
	border-radius: 999px !important;
	color: inherit;
	font-size: 12px;
	text-decoration: none !important;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bwc-root .bwc-sources a:hover { background: rgba(15, 23, 42, .14) !important; }

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

.bwc-root .bwc-typing { display: flex; gap: 4px; align-items: center; padding: 13px !important; }

.bwc-root .bwc-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50% !important;
	background: currentColor !important;
	opacity: .45;
	animation: bwc-blink 1.3s infinite ease-in-out;
}

.bwc-root .bwc-typing span:nth-child(2) { animation-delay: .18s; }
.bwc-root .bwc-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes bwc-blink {
	0%, 60%, 100% { opacity: .25; transform: translateY(0); }
	30%           { opacity: .9;  transform: translateY(-3px); }
}

/* ------------------------------------------------------- handover / cta */

.bwc-root .bwc-cta { align-self: flex-start; }

.bwc-root .bwc-cta button {
	border: 1px solid var(--bwc-primary, #2563eb) !important;
	background: none !important;
	color: var(--bwc-primary, #2563eb);
	padding: 7px 14px !important;
	border-radius: 999px !important;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-transform: none !important;
	cursor: pointer;
	width: auto !important;
}

.bwc-root .bwc-cta button:hover { background: var(--bwc-primary, #2563eb) !important; color: #fff; }

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

.bwc-root .bwc-foot { flex: 0 0 auto; }

.bwc-root .bwc-composer {
	border-top: 1px solid rgba(15, 23, 42, .1) !important;
	padding: 10px !important;
	display: flex;
	gap: 8px;
	align-items: flex-end;
	background: var(--bwc-panel-bg, #fff) !important;
}

.bwc-root .bwc-composer textarea {
	flex: 1 1 auto;
	width: 100% !important;
	min-height: 0 !important;
	max-height: 120px !important;
	resize: none !important;
	border: 1px solid rgba(15, 23, 42, .16) !important;
	border-radius: 12px !important;
	padding: 9px 12px !important;
	background: none !important;
	color: inherit;
	font: inherit;
	font-size: 14.5px;
	line-height: 1.45;
	box-shadow: none !important;
}

.bwc-root .bwc-composer textarea:focus {
	outline: 2px solid var(--bwc-primary, #2563eb) !important;
	outline-offset: -1px;
	box-shadow: none !important;
}

.bwc-root .bwc-send {
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--bwc-primary, #2563eb) !important;
	color: #fff;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.bwc-root .bwc-send:disabled { opacity: .45; cursor: default; }
.bwc-root .bwc-send svg { width: 19px; height: 19px; }

.bwc-root .bwc-footer {
	text-align: center;
	font-size: 11.5px;
	opacity: .55;
	padding: 0 0 8px !important;
}

/* -------------------------------------------------------------- restart */

.bwc-root .bwc-restart {
	padding: 18px 16px !important;
	text-align: center;
	border-top: 1px solid rgba(15, 23, 42, .1) !important;
}

.bwc-root .bwc-restart p { margin: 0 0 10px !important; font-size: 13.5px; opacity: .75; }

.bwc-root .bwc-restart button,
.bwc-root .bwc-prechat button {
	width: auto !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--bwc-primary, #2563eb) !important;
	color: #fff;
	padding: 10px 20px !important;
	font: inherit;
	font-weight: 600;
	text-transform: none !important;
	cursor: pointer;
}

/* -------------------------------------------------------------- prechat */

.bwc-root .bwc-prechat {
	padding: 18px 16px !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bwc-root .bwc-prechat p { margin: 0 0 4px !important; font-size: 14px; }

.bwc-root .bwc-prechat input {
	width: 100% !important;
	border: 1px solid rgba(15, 23, 42, .18) !important;
	border-radius: 10px !important;
	padding: 9px 12px !important;
	background: none !important;
	color: inherit;
	font: inherit;
	box-shadow: none !important;
}

.bwc-root .bwc-prechat input:focus {
	outline: 2px solid var(--bwc-primary, #2563eb) !important;
	outline-offset: -1px;
}

.bwc-root .bwc-prechat button { padding: 10px !important; }

/* --------------------------------------------------------------- mobile */

@media (max-width: 520px) {
	.bwc-root .bwc-panel {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100dvh;
		max-height: none;
		border-radius: 0 !important;
	}
}

/* ------------------------------------------------------------ dark mode */

@media (prefers-color-scheme: dark) {
	.bwc-root[data-theme="auto"] .bwc-teaser {
		background: #1e293b !important;
		color: #e2e8f0;
	}
	.bwc-root[data-theme="auto"] .bwc-msg code,
	.bwc-root[data-theme="auto"] .bwc-sources a {
		background: rgba(255, 255, 255, .12) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bwc-root .bwc-panel,
	.bwc-root .bwc-msg,
	.bwc-root .bwc-teaser { animation: none; }
	.bwc-root .bwc-messages { scroll-behavior: auto; }
	.bwc-root .bwc-typing span { animation: none; opacity: .5; }
}