/**
 * Ask Coplus — front-end styles.
 *
 * Colours come from the theme's tokens where they exist, with the brand values
 * as fallbacks so the widget still looks right if it is ever loaded somewhere
 * the theme is not.
 */

.ask-coplus {
	--ac-navy:    var(--secondary, #032a40);
	--ac-teal:    var(--primary, #177591);
	--ac-gold:    var(--tertiary, #f9b000);
	--ac-ink:     var(--text, #010d14);
	--ac-surface: var(--background, #fff);
	--ac-tint:    var(--primary-accent, #e5f7f8);
	--ac-font:    var(--font-heading, 'Jost', system-ui, sans-serif);

	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: stretch;
	justify-content: center;
	background: linear-gradient(140deg, #b9c9cd 0%, #93aab2 40%, #6f8f9b 100%);
	font-family: var(--ac-font);
	color: var(--ac-ink);
}

.ask-coplus[hidden] { display: none; }

/* The page behind must not scroll while the overlay is up — otherwise a phone
   scrolls the page rather than the conversation. */
body.ask-coplus-open { overflow: hidden; }

.ask-coplus__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1204px;
	padding: 20px;
}

/* --- bar ---------------------------------------------------------------- */

.ask-coplus__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 0 20px;
}

.ask-coplus__brand { font-size: 1.25rem; }
.ask-coplus__brand strong { color: var(--ac-gold); font-weight: 600; }

/* A drawn cross, centred by flex: the × character sat off-centre, wherever
   the font put its glyph in the line box. */
.ask-coplus__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .12);
	color: var(--ac-ink);
	cursor: pointer;
}

.ask-coplus__close svg { display: block; }

.ask-coplus__close:hover { background: rgba(0, 0, 0, .2); }

/* --- thread ------------------------------------------------------------- */

.ask-coplus__thread {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 4px 0 20px;
}

.ask-coplus__msg { display: flex; }
.ask-coplus__msg--user { justify-content: flex-end; }

.ask-coplus__bubble {
	max-width: 62ch;
	padding: 14px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .55);
	backdrop-filter: blur(6px);
	line-height: 1.5;
}

.ask-coplus__msg--user .ask-coplus__bubble {
	background: var(--ac-navy);
	color: #fff;
}

.ask-coplus__bubble p { margin: 0 0 .6em; }
.ask-coplus__bubble p:last-child { margin-bottom: 0; }

/* Three dots, so a 4-second wait reads as thinking rather than as broken. */
.ask-coplus__msg--typing .ask-coplus__bubble { display: flex; gap: 5px; }

.ask-coplus__msg--typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ac-navy);
	opacity: .4;
	animation: ask-coplus-blink 1.3s infinite;
}

.ask-coplus__msg--typing span:nth-child(2) { animation-delay: .2s; }
.ask-coplus__msg--typing span:nth-child(3) { animation-delay: .4s; }

@keyframes ask-coplus-blink {
	0%, 60%, 100% { opacity: .25; }
	30%           { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
	.ask-coplus__msg--typing span { animation: none; }
}

/* --- components --------------------------------------------------------- */

.ask-coplus__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.ask-coplus__action {
	padding: 9px 16px;
	border: 1.5px solid var(--ac-navy);
	border-radius: 100px;
	background: transparent;
	color: var(--ac-navy);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.ask-coplus__action:hover { background: var(--ac-navy); color: #fff; }

/* Multi-select. Same pill as .ask-coplus__action deliberately — it behaves
   differently, but it should not look like a different system. The filled state
   is what a tapped action would look like mid-hover, so selecting reads as
   "this one is on" rather than as a new control. */
.ask-coplus__choices {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin-top: 12px;
}

.ask-coplus__choice-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.ask-coplus__choice {
	padding: 9px 16px;
	border: 1.5px solid var(--ac-navy);
	border-radius: 100px;
	background: transparent;
	color: var(--ac-navy);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}

.ask-coplus__choice:hover { background: rgba(10, 35, 66, 0.08); }

.ask-coplus__choice.is-selected,
.ask-coplus__choice.is-selected:hover {
	background: var(--ac-navy);
	color: #fff;
}

.ask-coplus__choice-send {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: none;
	border-radius: 100px;
	background: var(--ac-gold);
	color: var(--ac-navy);
	cursor: pointer;
	transition: opacity 120ms ease;
}

.ask-coplus__choice-send svg { width: 20px; height: 20px; }

/* Disabled rather than hidden: a control that appears once something is ticked
   moves the pills as it arrives, and the visitor loses their place. */
.ask-coplus__choice-send:disabled {
	opacity: 0.35;
	cursor: default;
}

.ask-coplus__card {
	margin-top: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--ac-tint);
}

.ask-coplus__card-label {
	display: block;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ac-teal);
	margin-bottom: 6px;
}

.ask-coplus__card-phone {
	display: block;
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--ac-navy);
	text-decoration: none;
}

.ask-coplus__card-email { font-size: .9rem; color: var(--ac-teal); }

.ask-coplus__sources {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, .1);
	font-size: .8rem;
}

.ask-coplus__sources-label { opacity: .6; }
.ask-coplus__source { color: var(--ac-teal); }

/* A knowledge base citation has nowhere to go, so it must not look like a
   link — same line, plainly styled, and not offering a click that does
   nothing. Shown only while show_kb_references is on. */
.ask-coplus__source--plain {
	color: inherit;
	opacity: .6;
	cursor: default;
	text-decoration: none;
}

.ask-coplus__notice {
	margin-top: 10px;
	font-size: .85rem;
	opacity: .75;
}

/* --- product slider ------------------------------------------------------ */

/* How many cards are on screen. The JS reads the rendered result rather than
   the breakpoint, so this is the only place the number lives. */
.ask-coplus__slider {
	--ac-per-view: 2.5;
	--ac-card-gap: 10px;
	margin-top: 14px;
}

.ask-coplus__slider-track {
	display: flex;
	gap: var(--ac-card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* The track is the bubble's width; the cards inside it are what scroll. */
	margin-inline: 0;
	padding-bottom: 2px;
}

.ask-coplus__slider-track::-webkit-scrollbar { display: none; }

.ask-coplus__pcard {
	flex: 0 0 calc(
		(100% - (var(--ac-per-view) - 1) * var(--ac-card-gap)) / var(--ac-per-view)
	);
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	min-height: 68px;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, .19);
	border-radius: 16px;
	background: rgba(255, 255, 255, .13);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ask-coplus__pcard:hover { background: rgba(255, 255, 255, .28); }

.ask-coplus__pcard.is-selected,
.ask-coplus__pcard.is-selected:hover {
	background: var(--ac-navy);
	border-color: var(--ac-navy);
	color: #fff;
}

.ask-coplus__pcard-name {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
}

/* Three tracks, so the paging sits in the true centre of the slider rather than
   centred in whatever room the submit leaves. The empty first column is what
   makes that work. */
.ask-coplus__slider-bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-top: 12px;
}

.ask-coplus__slider-nav {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ask-coplus__slider-arrow {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1.5px solid var(--ac-navy);
	border-radius: 100px;
	background: transparent;
	color: var(--ac-navy);
	cursor: pointer;
}

.ask-coplus__slider-arrow.is-back { transform: rotate(180deg); }
.ask-coplus__slider-arrow svg { width: 16px; height: 16px; }

/* Disabled rather than hidden — an arrow that disappears at the end of the
   track shifts the dots sideways and loses the reader's place. */
.ask-coplus__slider-arrow:disabled { opacity: .3; cursor: default; }

.ask-coplus__slider-dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ask-coplus__slider-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: var(--ac-navy);
	opacity: .25;
	cursor: pointer;
	transition: opacity 140ms ease, width 140ms ease;
}

.ask-coplus__slider-dot.is-on { opacity: 1; width: 18px; }

/* Pushed to the far end, away from the paging controls: moving through the
   cards and committing to a selection are different acts, and a submit sitting
   next to a next arrow gets hit by somebody who meant to keep looking. */
.ask-coplus__slider-send {
	grid-column: 3;
	justify-self: end;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: none;
	border-radius: 100px;
	background: var(--ac-gold);
	color: var(--ac-navy);
	cursor: pointer;
	transition: opacity 120ms ease;
}

.ask-coplus__slider-send svg { width: 20px; height: 20px; }
.ask-coplus__slider-send:disabled { opacity: .35; cursor: default; }

@media (max-width: 767px) {
	.ask-coplus__slider { --ac-per-view: 2; }
}

/* --- welcome ------------------------------------------------------------ */

/* Heading only now — the opening message sits under it as a normal bubble, so
   this no longer needs to fill the panel or hold anything below it. */
.ask-coplus__welcome {
	text-align: center;
	padding: 24px 0 20px;
}

.ask-coplus__welcome-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 14px;
}

.ask-coplus__welcome-mark { width: 26px; height: 26px; }

.ask-coplus__welcome-brand .ask-coplus__brand { font-size: 1.5rem; font-weight: 600; }

.ask-coplus__welcome-title {
	margin: 0 0 10px;
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 600;
}

.ask-coplus__welcome-sub {
	margin: 0 auto 36px;
	max-width: 60ch;
	opacity: .8;
}

.ask-coplus__entry {
	display: grid;
	margin-top: 22px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	max-width: 860px;
	margin: 0 auto;
}

.ask-coplus__entry-card {
	padding: 22px 18px;
	border: 0;
	border-radius: 14px;
	background: rgba(255, 255, 255, .45);
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: center;
}

.ask-coplus__entry-card:hover { background: rgba(255, 255, 255, .7); }

.ask-coplus__entry-label {
	display: block;
	font-size: 1.15rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.ask-coplus__entry-prompt { display: block; font-size: .85rem; opacity: .7; }


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

.ask-coplus__composer {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 7px 7px 7px 20px;
	border-radius: 100px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}

.ask-coplus__input {
	flex: 1;
	border: 0;
	background: none;
	font: inherit;
	padding: 12px 0;
	color: var(--ac-ink);
}

.ask-coplus__input:focus { outline: none; }

.ask-coplus__send {
	padding: 12px 24px;
	border: 0;
	border-radius: 100px;
	background: var(--ac-gold);
	color: var(--ac-navy);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Full strength, unlike the disclaimer: it has to be read before typing */
.ask-coplus__warning {
	margin: 10px 0 0;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
}

.ask-coplus__disclaimer {
	margin: 4px 0 0;
	text-align: center;
	font-size: .75rem;
	opacity: .65;
}

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

.ask-coplus-launcher {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 6px 6px 6px 18px;
	border-radius: 100px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
	max-width: 560px;
}

.ask-coplus-launcher__input {
	flex: 1;
	border: 0;
	background: none;
	font: inherit;
	padding: 10px 0;
}

.ask-coplus-launcher__input:focus { outline: none; }

.ask-coplus-launcher__button {
	padding: 10px 20px;
	border: 0;
	border-radius: 100px;
	background: var(--ac-gold);
	color: var(--ac-navy, #032a40);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

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

@media (max-width: 767px) {
	.ask-coplus__panel { padding: 12px; }
	.ask-coplus__bubble { max-width: 88%; }
	.ask-coplus__send { padding: 12px 16px; }
	.ask-coplus__entry { grid-template-columns: 1fr; }
	.ask-coplus__welcome { padding-top: 10px; }
}

/* Focus states are not optional — the whole thing is operable by keyboard.
 *
 * The text inputs are excluded and handled below. They sit inside a pill, so a
 * rectangular ring is drawn *inside* a rounded box and looks like a rendering
 * fault. Their own `outline: none` further up never actually applied: it is
 * :focus at the same specificity as this :focus-visible, so this rule won.
 * Nothing is lost by excluding them — the ring moves to the pill itself, and a
 * focused text field also shows a caret. */
.ask-coplus :focus-visible:not(.ask-coplus__input),
.ask-coplus-fab:focus-visible,
.ask-coplus-launcher :focus-visible:not(.ask-coplus-launcher__input) {
	outline: 2px solid var(--ac-teal);
	outline-offset: 2px;
}

/* The search pill takes the focus ring on behalf of the input inside it.
 *
 * The overlay's composer deliberately gets none: its input is focused the
 * moment the overlay opens and stays focused, so a ring there is on
 * permanently. An indicator that is always showing indicates nothing — it
 * just reads as a stray border around the box. The caret is the signal. */
.ask-coplus-launcher:focus-within {
	outline: 2px solid var(--ac-teal);
	outline-offset: 2px;
}

/* --- the capture form ---------------------------------------------------- */

/*
 * Sits inside the reply bubble, so it reads as part of what the assistant said
 * rather than as a thing the page has done. Wider than the other cards because
 * inputs at card width are cramped, and cramped inputs on a phone are where
 * people give up.
 */
.ask-coplus__card--form {
	padding: 18px 20px;
	border: 1px solid rgba(3, 42, 64, .10);
}

.ask-coplus__form-reason {
	margin: 0 0 14px;
	font-size: .95rem;
	color: var(--ac-navy);
}

/*
 * What the conversation already established, shown back rather than asked for
 * again. Muted on purpose: it is confirmation, not work to do.
 */
.ask-coplus__form-known {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .55);
	font-size: .85rem;
}

.ask-coplus__form-known dt {
	color: var(--ac-teal);
	font-weight: 500;
}

.ask-coplus__form-known dd {
	margin: 0;
	color: var(--ac-ink);
}

.ask-coplus__form-row {
	display: block;
	margin-bottom: 12px;
}

.ask-coplus__form-label {
	display: block;
	margin-bottom: 4px;
	font-size: .8rem;
	font-weight: 500;
	color: var(--ac-navy);
}

.ask-coplus__form-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1.5px solid rgba(3, 42, 64, .18);
	border-radius: 8px;
	background: var(--ac-surface);
	font-family: inherit;
	font-size: 1rem; /* 16px minimum, or iOS zooms the page on focus */
	color: var(--ac-ink);
}

.ask-coplus__form-input:focus {
	outline: none;
	border-color: var(--ac-teal);
	box-shadow: 0 0 0 3px rgba(23, 117, 145, .15);
}

.ask-coplus__form-input:user-invalid {
	border-color: #b32d2e;
}

.ask-coplus__form-submit {
	width: 100%;
	margin-top: 4px;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--ac-gold);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	color: var(--ac-navy);
	cursor: pointer;
	transition: filter 150ms ease;
}

.ask-coplus__form-submit:hover:not(:disabled) { filter: brightness(1.06); }
.ask-coplus__form-submit:disabled { opacity: .6; cursor: default; }

.ask-coplus__form-privacy {
	margin: 0 0 12px;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--ac-ink);
	opacity: .75;
}

.ask-coplus__form-privacy a {
	color: var(--ac-teal);
	text-decoration: underline;
}

.ask-coplus__form-error:empty { display: none; }

.ask-coplus__form-error {
	margin: 0 0 10px;
	font-size: .85rem;
	color: #b32d2e;
}

/* Replaces the form once it has gone, so there is nothing left to send twice. */
.ask-coplus__card--sent {
	border-color: rgba(23, 117, 145, .35);
}

.ask-coplus__form-done {
	margin: 0;
	font-size: .95rem;
	color: var(--ac-navy);
}

@media (max-width: 767px) {
	.ask-coplus__card--form { padding: 16px; }
	.ask-coplus__form-known { grid-template-columns: 1fr; gap: 2px; }
	.ask-coplus__form-known dd { margin-bottom: 6px; }
}

/*
 * Product names inside an answer, linked to their page. Underlined rather than
 * colour alone — colour on its own is not a link to anyone who cannot see the
 * difference, and these sit inside running text where there is no other cue.
 */
.ask-coplus__inline-link {
	color: var(--ac-teal);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.ask-coplus__inline-link:hover {
	color: var(--ac-navy);
	text-decoration-thickness: 2px;
}

/*
 * The stopgap launcher, until the theme header carries its own.
 *
 * Bottom-right and out of the way: it has to be reachable from any page so a
 * conversation can be resumed after following a product link, without being the
 * loudest thing on a page it has nothing to do with.
 */
.ask-coplus-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9998; /* well below the overlay's 99999 */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--ac-navy, #032a40);
	box-shadow: 0 6px 20px rgba(3, 42, 64, .28);
	font-family: var(--ac-font, 'Jost', system-ui, sans-serif);
	font-size: .9rem;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.ask-coplus-fab:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 26px rgba(3, 42, 64, .34);
}

/* Hidden while the overlay is open — there is nothing to launch. */
.ask-coplus-open .ask-coplus-fab { display: none; }

@media (max-width: 767px) {
	.ask-coplus-fab { right: 16px; bottom: 16px; padding: 11px 18px; }
}