/* BC-065: the help button, the chat window and the help-centre answer card. Built on the braai-culture theme's tokens
   (tokens.css); the fallbacks only matter if a token is missing. Charcoal for the help button and the chat header (the
   theme's dark bar), brand red only for the primary action, WhatsApp green only for the WhatsApp action. */
.bch-launcher {
	--bch-ink: var(--color-ink-strong, #242427);
	position: fixed; z-index: 58; right: 20px; bottom: calc(20px + var(--bch-lift, 0px));
	display: inline-flex; align-items: center; gap: var(--space-2, 8px);
	min-height: 48px; padding: 0 var(--space-5, 24px) 0 var(--space-4, 16px);
	border: 0; border-radius: var(--radius-pill, 99px);
	background: var(--bch-ink); color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
	font: var(--weight-bold, 700) var(--text-sm, 13.2px)/1 var(--font-sans, Montserrat, Arial, sans-serif);
	letter-spacing: .4px; text-transform: uppercase; cursor: pointer;
	transition: background-color .15s, transform .15s, bottom .2s;
}
.bch-launcher:hover { background: var(--color-dark-bar, #202023); transform: translateY(-1px); }
.bch-launcher:focus-visible { outline: 3px solid var(--color-red, #d3303b); outline-offset: 3px; }
.bch-launcher svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bch-open .bch-launcher { display: none; }

/* The chat window: a panel above the button on wide screens, the whole screen on phones. */
.bch-panel {
	position: fixed; z-index: 90; right: 20px; bottom: 20px;
	display: flex; flex-direction: column;
	width: min(400px, calc(100vw - 40px)); height: min(640px, calc(100dvh - 40px));
	overflow: hidden; border: var(--line, 1px solid #e6e5e3); border-radius: 12px;
	background: var(--color-surface, #fff); color: var(--color-ink, #333);
	box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
	font: var(--weight-regular, 400) var(--text-base, 15px)/var(--leading-base, 1.6) var(--font-sans, Montserrat, Arial, sans-serif);
}
.bch-panel[hidden] { display: none; }
.bch-panel a { color: var(--color-red-dark, #ad202a); }
.bch-panel :focus-visible, .bch-answer :focus-visible { outline: 2px solid var(--color-focus, #ad202a); outline-offset: 2px; }

.bch-head {
	display: flex; align-items: center; gap: var(--space-2, 8px);
	padding: var(--space-4, 16px) var(--space-3, 12px) var(--space-4, 16px) var(--space-5, 24px);
	background: var(--color-dark-bar, #202023); color: #fff;
}
.bch-head__text { flex: 1 1 auto; min-width: 0; }
.bch-title { margin: 0; font-size: var(--text-md, 17px); font-weight: var(--weight-bold, 700); line-height: var(--leading-tight, 1.23); }
.bch-sub { margin: 2px 0 0; color: var(--color-dark-text, #d4d4d4); font-size: var(--text-xs, 12.2px); }
.bch-icon-btn {
	flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
}
.bch-icon-btn:hover { background: rgba(255, 255, 255, .12); }
.bch-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.bch-icon-btn[hidden] { display: none; }
.bch-icon-btn svg, .bch-send svg, .bch-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.bch-log {
	flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
	display: flex; flex-direction: column; gap: var(--space-3, 12px);
	padding: var(--space-5, 24px) var(--space-4, 16px) var(--space-3, 12px);
	background: var(--color-cream, #f6f5f2);
}
.bch-msg { display: flex; flex-direction: column; gap: var(--space-2, 8px); max-width: 92%; }
.bch-msg__body { padding: var(--space-3, 12px) var(--space-4, 16px); border-radius: 12px; overflow-wrap: anywhere; }
.bch-msg__body p { margin: 0; }
.bch-msg__body p + p { margin-top: var(--space-2, 8px); }
.bch-msg--bot { align-self: flex-start; }
.bch-msg--bot .bch-msg__body { border: var(--line, 1px solid #e6e5e3); border-top-left-radius: 4px; background: var(--color-surface, #fff); }
.bch-msg--user { align-self: flex-end; }
.bch-msg--user .bch-msg__body { border-top-right-radius: 4px; background: var(--color-ink-strong, #242427); color: #fff; }
.bch-link { font-weight: var(--weight-semibold, 600); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }

.bch-thinking { display: flex; align-items: center; gap: var(--space-2, 8px); margin: 0; color: var(--color-muted, #6e6e70); font-size: var(--text-sm, 13.2px); }
.bch-dots { display: inline-flex; gap: 4px; }
.bch-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: bch-dot 1.2s infinite ease-in-out; }
.bch-dots span:nth-child(2) { animation-delay: .15s; }
.bch-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bch-dot { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .bch-dots span { animation: none; opacity: .7; } .bch-launcher { transition: none; } }

/* Links to products and help pages under a reply. */
.bch-extras { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.bch-chip {
	display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
	padding: 7px 12px; border: var(--line, 1px solid #e6e5e3); border-radius: var(--radius-pill, 99px);
	background: var(--color-surface, #fff); color: var(--color-ink-strong, #242427);
	font-size: var(--text-sm, 13.2px); font-weight: var(--weight-semibold, 600); line-height: 1.3; text-decoration: none;
}
.bch-panel a.bch-chip, .bch-answer a.bch-chip { color: var(--color-ink-strong, #242427); text-decoration: none; }
.bch-chip:hover { border-color: var(--color-red, #d3303b); }
.bch-chip span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bch-chip__kicker { flex: 0 0 auto; color: var(--color-red-dark, #ad202a); font-size: 10.5px; font-weight: var(--weight-bold, 700); letter-spacing: 1px; text-transform: uppercase; }

/* The way to a person. */
.bch-handover { padding: var(--space-3, 12px) var(--space-4, 16px); border: 1px solid var(--color-free-line, #d6e2cf); border-radius: 12px; background: var(--color-free-tint, #f2f7ef); }
.bch-handover__title { margin: 0; color: var(--color-ink-strong, #242427); font-size: var(--text-sm, 13.2px); font-weight: var(--weight-bold, 700); }
.bch-handover__hours { margin: 2px 0 0; color: var(--color-muted, #6e6e70); font-size: var(--text-xs, 12.2px); }
.bch-handover__actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); }
.bch-action {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
	border: 1px solid var(--color-line, #e6e5e3); border-radius: var(--radius, 5px);
	background: var(--color-surface, #fff); color: var(--color-ink-strong, #242427);
	font-size: var(--text-sm, 13.2px); font-weight: var(--weight-bold, 700); text-decoration: none; white-space: nowrap;
}
.bch-panel a.bch-action, .bch-answer a.bch-action { color: var(--color-ink-strong, #242427); text-decoration: none; }
.bch-action:hover { border-color: var(--color-ink-strong, #242427); }
.bch-panel a.bch-action--whatsapp, .bch-answer a.bch-action--whatsapp { border-color: var(--color-whatsapp, #25d366); background: var(--color-whatsapp, #25d366); color: var(--color-whatsapp-ink, #073b2a); }
.bch-panel a.bch-action--whatsapp:hover, .bch-answer a.bch-action--whatsapp:hover { background: var(--color-whatsapp-dark, #1ebe57); }

/* Suggested questions before the first message. */
.bch-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); padding: 0 var(--space-4, 16px) var(--space-3, 12px); background: var(--color-cream, #f6f5f2); }
.bch-suggestions[hidden] { display: none; }
.bch-suggest {
	padding: 8px 12px; border: 1px solid var(--color-ink-strong, #242427); border-radius: var(--radius-pill, 99px);
	background: var(--color-surface, #fff); color: var(--color-ink-strong, #242427);
	font-size: var(--text-sm, 13.2px); font-weight: var(--weight-semibold, 600); line-height: 1.3; text-align: left; cursor: pointer;
}
.bch-suggest:hover { background: var(--color-ink-strong, #242427); color: #fff; }

.bch-form { display: flex; align-items: flex-end; gap: var(--space-2, 8px); padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-2, 8px) var(--space-4, 16px); border-top: var(--line, 1px solid #e6e5e3); }
.bch-panel .bch-input {
	flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 120px; resize: none;
	padding: 11px var(--space-3, 12px); border: 1px solid var(--color-line, #e6e5e3); border-radius: 10px;
	font-size: 16px; line-height: 1.4;
}
.bch-send {
	flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 50%; background: var(--color-red, #d3303b); color: var(--color-on-red, #fff); cursor: pointer;
}
.bch-send:hover { background: var(--color-red-dark, #ad202a); }
.bch-send:disabled { opacity: .5; cursor: wait; }
.bch-note { margin: 0; padding: 0 var(--space-4, 16px) var(--space-3, 12px); color: var(--color-muted, #6e6e70); font-size: 11.5px; line-height: 1.45; }
.bch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones: the help button is a round icon; the chat fills the screen. */
@media (max-width: 600px) {
	.bch-launcher { right: 16px; bottom: calc(16px + var(--bch-lift, 0px)); width: 52px; height: 52px; min-height: 0; padding: 0; justify-content: center; }
	.bch-launcher__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.bch-launcher svg { width: 24px; height: 24px; }
	.bch-panel { inset: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; }
	.bch-open, .bch-open body { overflow: hidden; }
	.bch-msg { max-width: 96%; }
}

/* The help hub (/help/): the page's search field asks for a written answer. */
.bch-hub-row { display: flex; gap: var(--space-2, 8px); align-items: stretch; }
.bch-hub-row .info-search__field { flex: 1 1 auto; min-width: 0; }
.bch-hub-row .bch-hub-ask { flex: 0 0 auto; }
.bch-hub-ask:disabled { opacity: .6; cursor: wait; }
.bch-answer {
	max-width: var(--measure, 900px); margin: 0 0 var(--space-6, 32px);
	padding: var(--space-5, 24px); border: var(--line, 1px solid #e6e5e3); border-left: 4px solid var(--color-red, #d3303b);
	border-radius: var(--radius, 5px); background: var(--color-surface, #fff);
	display: flex; flex-direction: column; gap: var(--space-3, 12px);
}
.bch-answer[hidden] { display: none; }
.bch-answer a { color: var(--color-red-dark, #ad202a); }
.bch-answer__eyebrow { margin: 0; color: var(--color-red, #d3303b); font-size: var(--text-xs, 12.2px); font-weight: var(--weight-bold, 700); letter-spacing: var(--tracking-eyebrow, 1.6px); text-transform: uppercase; }
.bch-answer__question { margin: 0; color: var(--color-ink-strong, #242427); font-size: var(--text-md, 17px); font-weight: var(--weight-bold, 700); line-height: var(--leading-tight, 1.23); }
.bch-answer__text p { margin: 0; }
.bch-answer__text p + p { margin-top: var(--space-2, 8px); }
.bch-answer__more { align-self: flex-start; }
.bch-answer__note { margin: 0; color: var(--color-muted, #6e6e70); font-size: var(--text-xs, 12.2px); }
@media (max-width: 600px) {
	.bch-hub-row { flex-direction: column; }
	.bch-hub-row .bch-hub-ask { width: 100%; }
	.bch-answer { padding: var(--space-4, 16px); }
}
@media print { .bch-launcher, .bch-panel { display: none !important; } }

/* The theme's "button.button { background: none }" wins over .button--primary on <button> elements (known issue #142):
   these two buttons set their colours themselves. */
.bch-hub-row button.button.bch-hub-ask { border-color: var(--color-red, #d3303b); background: var(--color-red, #d3303b); color: var(--color-on-red, #fff); }
.bch-hub-row button.button.bch-hub-ask:hover { border-color: var(--color-red-dark, #ad202a); background: var(--color-red-dark, #ad202a); }
.bch-answer button.button.bch-answer__more { border-color: var(--color-ink-strong, #242427); background: var(--color-surface, #fff); color: var(--color-ink-strong, #242427); }
.bch-answer button.button.bch-answer__more:hover { background: var(--color-cream, #f6f5f2); }

/* One focus mark on the question box (the theme's field shadow), and even contact buttons. */
.bch-panel .bch-input:focus-visible { outline: none; }
.bch-handover__actions .bch-action { flex: 1 1 auto; justify-content: center; }

/* "Send a message" form inside the chat (D8). */
.bch-form-card { gap: var(--space-3, 12px); width: 100%; max-width: 100%; padding: var(--space-4, 16px); border: var(--line, 1px solid #e6e5e3); border-radius: 12px; background: var(--color-surface, #fff); }
.bch-form-card__title { margin: 0; color: var(--color-ink-strong, #242427); font-weight: var(--weight-bold, 700); }
.bch-form-card__text, .bch-form-card__note { margin: 0; color: var(--color-muted, #6e6e70); font-size: var(--text-xs, 12.2px); }
.bch-field { display: flex; flex-direction: column; gap: 4px; }
.bch-field label { color: var(--color-ink-strong, #242427); font-size: var(--text-sm, 13.2px); font-weight: var(--weight-semibold, 600); }
.bch-panel .bch-field input, .bch-panel .bch-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-line, #e6e5e3); border-radius: 8px; font-size: 16px; line-height: 1.4; }
.bch-panel .bch-field textarea { min-height: 84px; resize: vertical; }
.bch-form-card__error { margin: 0; color: var(--color-red-dark, #ad202a); font-size: var(--text-sm, 13.2px); font-weight: var(--weight-semibold, 600); }
.bch-form-card__error[hidden] { display: none; }
.bch-form-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.bch-panel .bch-form-send { min-height: 44px; padding: 0 var(--space-5, 24px); border: 0; border-radius: var(--radius, 5px); background: var(--color-red, #d3303b); color: var(--color-on-red, #fff); font-weight: var(--weight-bold, 700); cursor: pointer; }
.bch-panel .bch-form-send:hover { background: var(--color-red-dark, #ad202a); }
.bch-panel .bch-form-send:disabled { opacity: .6; cursor: wait; }
.bch-panel .bch-form-cancel { min-height: 44px; padding: 0 var(--space-4, 16px); border: 1px solid var(--color-line, #e6e5e3); border-radius: var(--radius, 5px); background: var(--color-surface, #fff); color: var(--color-ink-strong, #242427); font-weight: var(--weight-semibold, 600); cursor: pointer; }
button.bch-action { cursor: pointer; font-family: inherit; }
.bch-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Funnel (session 2): Buddy's answers as buttons, the quote step and the small "Talk to a person" link. */
.bch-choices { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-2, 8px); }
.bch-choice {
	min-height: 40px; padding: 8px 14px; border: 1px solid var(--color-ink-strong, #242427); border-radius: var(--radius-pill, 99px);
	background: var(--color-surface, #fff); color: var(--color-ink-strong, #242427); font-family: inherit;
	font-size: var(--text-sm, 13.2px); font-weight: var(--weight-semibold, 600); line-height: 1.25; text-align: left; cursor: pointer;
}
.bch-choice:hover, .bch-choice:focus-visible { background: var(--color-ink-strong, #242427); color: #fff; }
.bch-quote { margin-top: var(--space-2, 8px); padding: var(--space-3, 12px) var(--space-4, 16px); border: 1px solid var(--color-line, #e6e5e3); border-radius: 12px; background: var(--color-surface, #fff); }
.bch-quote__title { margin: 0; color: var(--color-ink-strong, #242427); font-size: var(--text-sm, 13.2px); font-weight: var(--weight-bold, 700); }
.bch-quote__summary { margin: 2px 0 0; color: var(--color-muted, #6e6e70); font-size: var(--text-xs, 12.2px); }
.bch-quote__actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); }
.bch-quote-go { min-height: 40px; padding: 0 var(--space-5, 24px); border: 0; border-radius: var(--radius, 5px); background: var(--color-red, #d3303b); color: var(--color-on-red, #fff); font-family: inherit; font-size: var(--text-sm, 13.2px); font-weight: var(--weight-bold, 700); cursor: pointer; }
.bch-quote-go:hover { background: var(--color-red-dark, #ad202a); }
.bch-quote__actions > * { flex: 1 1 auto; justify-content: center; }
.bch-person { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.bch-answer .bch-choices, .bch-answer .bch-quote { margin-top: var(--space-3, 12px); }