/* ==========================================================================
   BUDDIES CHAT WIDGET
   Values from briefing §5. Only design-system tokens — no new colours, no new
   typefaces.

   CONTRAST RULE (design system, absolute): pure white text on blue, black text
   on sand / white / gold. No rgba() tints for running text.
   ========================================================================== */

.bwc-root {
	position: fixed;
	right: 24px;
	bottom: 24px;
	/* Above the page, deliberately BELOW the cookie banner — briefing §7 says
	   the widget must not cover it. Borlabs sits at 999999. */
	z-index: 9000;
	font-family: var(--font-body, "Lato", system-ui, sans-serif);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}
.bwc-root *, .bwc-root *::before, .bwc-root *::after { box-sizing: border-box; }

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

.bwc-root .bwc-fab {
	appearance: none; -webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-height: 0;
	background: var(--brand, #2660FF);
	color: #FFFFFF;
	border: 0;
	border-radius: 999px;
	padding: 9px 20px 9px 9px;
	cursor: pointer;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
	transition: transform .16s ease, box-shadow .16s ease;
}
.bwc-root .bwc-fab:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55); }
.bwc-fab-img {
	width: 42px; height: 42px;
	border-radius: 999px;
	background: #FFFFFF;
	display: grid; place-items: center;
	flex: none;
	overflow: hidden;
}
.bwc-fab-img img { width: 34px; height: 34px; object-fit: contain; display: block; }
.bwc-fab-label {
	font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif);
	font-weight: var(--weight-heading-alt, 800);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #FFFFFF;
	white-space: nowrap;
}

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

.bwc-panel {
	width: 380px;
	height: min(600px, calc(100vh - 130px));
	background: #FFFFFF;
	border-radius: var(--radius-lg, 18px);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.bwc-panel[hidden] { display: none; }

.bwc-head {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--brand, #2660FF);
	padding: 14px 14px 14px 16px;
	flex: none;
}
.bwc-head-av {
	width: 38px; height: 38px; border-radius: 999px; background: #FFFFFF;
	display: grid; place-items: center; flex: none; overflow: hidden;
}
.bwc-head-av img { width: 30px; height: 30px; object-fit: contain; display: block; }
.bwc-head-txt { flex: 1; min-width: 0; }
.bwc-head-title {
	font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif);
	font-weight: var(--weight-heading-alt, 800);
	font-size: 15px; letter-spacing: .02em; color: #FFFFFF; margin: 0;
}
.bwc-head-sub {
	font-family: var(--font-body, "Lato", system-ui, sans-serif);
	font-weight: 300; font-size: 12.5px; color: #FFFFFF; margin: 2px 0 0;
}
.bwc-root .bwc-close {
	appearance: none; -webkit-appearance: none;
	background: none; border: 0; padding: 6px; min-height: 0;
	cursor: pointer; color: #FFFFFF; line-height: 0; flex: none; border-radius: 6px;
}

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

.bwc-scroll {
	flex: 1;
	overflow-y: auto;
	background: var(--sand-100, #F7F2ED);
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bwc-row { display: flex; gap: 10px; align-items: flex-end; }
.bwc-row--me { justify-content: flex-end; }
.bwc-av {
	flex: none; width: 30px; height: 30px; border-radius: 999px;
	background: #FFFFFF; display: grid; place-items: center; margin-bottom: 2px;
}
.bwc-av img { width: 16px; height: 16px; object-fit: contain; display: block; }

.bwc-bubble {
	max-width: 82%;
	background: #FFFFFF;
	color: #000000;
	border-radius: 18px 18px 18px 4px;   /* point at the bottom-left, per §5 */
	padding: 13px 16px;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.bwc-bubble--me {
	max-width: 80%;
	background: var(--brand, #2660FF);
	color: #FFFFFF;                      /* pure white on blue — never a tint */
	border-radius: 18px 18px 4px 18px;
}

/* block, not inline-block: as an inline element it butted straight up against
   the last word of the answer with no visible break. */
.bwc-src {
	display: block;
	margin-top: 12px;
	font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif);
	font-weight: var(--weight-heading-alt, 800);
	font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--brand, #2660FF); text-decoration: none;
}
.bwc-src:hover { text-decoration: underline; text-underline-offset: 3px; }

.bwc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 40px; }
.bwc-root .bwc-chip {
	appearance: none; -webkit-appearance: none;
	border: 1px solid var(--sand-300, #E2D7CB);
	background: #FFFFFF;
	color: #000000;
	min-height: 0;
	cursor: pointer;
	border-radius: 999px;
	padding: 9px 14px;
	font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif);
	font-weight: var(--weight-heading-alt, 800);
	font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
	transition: background .18s, border-color .18s;
}
.bwc-root .bwc-chip:hover { background: var(--blue-050, #EDF2FF); border-color: var(--brand, #2660FF); }

.bwc-typing { display: flex; gap: 6px; align-items: center; padding-left: 40px; }
.bwc-typing span {
	display: block; width: 7px; height: 7px; border-radius: 999px;
	background: var(--ink-400, #6E6A66);
	animation: bwcDot 1.2s infinite;
}
@keyframes bwcDot { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

/* --- handover card ------------------------------------------------------- */

.bwc-hand {
	margin-left: 40px;
	background: var(--gold-500, #EFAB00);
	color: #000000;                      /* black on gold — never white */
	border-radius: 18px;
	padding: 18px 20px;
}
.bwc-hand-text { font-weight: 300; font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.bwc-hand-tel {
	display: block;
	font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif);
	font-weight: var(--weight-heading, 800);
	font-size: 20px; color: #000000; text-decoration: none; margin-bottom: 6px;
}
.bwc-hand-mail {
	display: block; font-weight: 300; font-size: 15px;
	color: #000000; text-decoration: underline; margin-bottom: 12px;
}
/* opacity, not a lighter colour — the design system forbids tinted body text,
   and this is a secondary line rather than running copy */
.bwc-hand-hours { font-weight: 300; font-size: 13px; opacity: .72; margin: 0; }
.bwc-root .bwc-hand-cb {
	appearance: none; -webkit-appearance: none;
	margin-top: 14px; width: 100%; min-height: 0;
	border: 2px solid #000000; background: transparent; color: #000000;
	cursor: pointer; border-radius: 999px; padding: 11px 16px;
	font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif);
	font-weight: var(--weight-heading-alt, 800);
	font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.bwc-cb-form { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.bwc-cb-form input {
	border: 0; outline: none; border-radius: 999px; padding: 13px 18px;
	font-family: var(--font-body, "Lato", sans-serif); font-weight: 300;
	font-size: 15px; color: #000000; background: #FFFFFF;
}
.bwc-root .bwc-cb-send {
	appearance: none; border: 0; cursor: pointer; border-radius: 999px;
	padding: 13px 18px; background: #000000; color: #FFFFFF; min-height: 0;
	font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif);
	font-weight: var(--weight-heading-alt, 800);
	font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.bwc-cb-hint { font-weight: 300; font-size: 11px; line-height: 1.5; opacity: .7; margin: 0; }
.bwc-cb-done {
	margin: 14px 0 0;
	font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif);
	font-weight: var(--weight-heading-alt, 800);
	font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
}

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

.bwc-foot { flex: none; background: #FFFFFF; padding: 12px 14px 14px; border-top: 1px solid var(--sand-200, #EEE6DD); }
.bwc-form { display: flex; gap: 8px; }
.bwc-input {
	flex: 1; min-width: 0;
	border: 1px solid var(--sand-300, #E2D7CB);
	border-radius: 999px; padding: 12px 16px;
	font-family: var(--font-body, "Lato", sans-serif); font-weight: 300;
	font-size: 15px; color: #000000; background: #FFFFFF;
}
.bwc-input:focus { outline: 2px solid var(--brand, #2660FF); outline-offset: 1px; border-color: transparent; }
.bwc-root .bwc-send {
	appearance: none; -webkit-appearance: none;
	flex: none; width: 44px; height: 44px; min-height: 0; padding: 0;
	border: 0; border-radius: 999px; background: var(--brand, #2660FF);
	color: #FFFFFF; cursor: pointer; display: grid; place-items: center;
}
.bwc-note {
	margin: 9px 0 0;
	font-weight: 300; font-size: 11px; line-height: 1.45;
	color: var(--ink-400, #6E6A66);
}
.bwc-note a { color: var(--ink-400, #6E6A66); text-decoration: underline; }

/* --- focus --------------------------------------------------------------- */

.bwc-root button:focus-visible, .bwc-root a:focus-visible {
	outline: 3px solid var(--brand, #2660FF);
	outline-offset: 2px;
	border-radius: 6px;
}
.bwc-head .bwc-close:focus-visible { outline-color: #FFFFFF; }

/* --- mobile: full screen below 520px, per §5 ----------------------------- */

@media (max-width: 520px) {
	.bwc-root.is-open { inset: 0; right: 0; bottom: 0; gap: 0; }
	.bwc-root.is-open .bwc-panel {
		width: 100%;
		height: 100%;
		height: 100dvh;      /* dvh so the composer stays above the keyboard */
		border-radius: 0;
	}
	.bwc-root.is-open .bwc-fab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bwc-root *, .bwc-typing span { transition: none !important; animation: none !important; }
}