/**
 * Turbo360 Ask - front end widget.
 *
 * Every colour comes from a --t360ask-* variable. Each one falls back to the
 * Turbo360 theme token from essentials-min.css, so the widget matches the site
 * with no configuration. The design is set in this file only: there are no
 * appearance settings and no inline style block to override it.
 */

.t360ask {
	/* Turbo360 theme tokens, with a hard fallback for each one. */
	--t360ask-accent:        var(--link-color, #0065FF);
	--t360ask-accent-rgb:    var(--primary-color, 0, 98, 249);
	--t360ask-dark:          var(--primary-color-dark, #091E42);

	/*
	 * The deep end of the brand blue. It used to read --primary-color-dark-2,
	 * but that token is not defined anywhere on turbo360.com, so every page
	 * fell through to a purple that belongs to no part of the brand.
	 */
	--t360ask-violet:        #0B3FA8;

	/*
	 * Built from the accent rather than read from --primary-color-gradient.
	 * That token is the pink wash the site uses behind hero cards; each
	 * template sets its own, which is why the panel header changed colour
	 * from page to page.
	 */
	--t360ask-head-grad:     linear-gradient(135deg, rgba(var(--t360ask-accent-rgb), 1) 0%, var(--t360ask-violet) 100%);
	--t360ask-head-text:     #ffffff;
	--t360ask-text:          var(--text-color, #111827);
	--t360ask-muted:         #6b7280;
	--t360ask-surface:       #ffffff;
	--t360ask-soft:          var(--bg-grey-light, #F3F4F6);
	--t360ask-tint:          var(--primary-color-light, #E5ECF9);
	--t360ask-border:        #e5e7eb;
	--t360ask-font:          var(--content-font, 'Inter', sans-serif);

	/* Shape and placement. The admin screen can change all of these. */
	--t360ask-radius:        16px;
	--t360ask-bar-radius:    999px;
	--t360ask-width:         600px;
	--t360ask-offset:        22px;
	--t360ask-ring:          linear-gradient(90deg, rgba(var(--t360ask-accent-rgb), 1), var(--t360ask-violet), rgba(var(--t360ask-accent-rgb), 1));
	--t360ask-shadow:        0 10px 34px rgba(9, 30, 66, .18);
	--t360ask-panel-shadow:  0 18px 50px rgba(9, 30, 66, .22);
	--t360ask-z:             99990;

	position: fixed;
	bottom: var(--t360ask-offset);
	width: min(var(--t360ask-width), calc(100vw - 32px));
	z-index: var(--t360ask-z);
	font-family: var(--t360ask-font);
}

/* Placement. The widget template sets one of these on the wrapper. */
.t360ask--center { left: 50%; transform: translateX(-50%); }
.t360ask--left   { left: var(--t360ask-offset); }
.t360ask--right  { right: var(--t360ask-offset); }

/*
 * Reveal on scroll. The widget waits out of sight until the visitor scrolls
 * a little, slides up, and slides back down before the footer. widget.js
 * adds and removes --away.
 *
 * The slide uses the translate property, not transform, because transform
 * already centres the widget. The two combine instead of replacing each
 * other. Visibility switches only after the slide has finished, so a hidden
 * widget cannot be reached with the Tab key.
 */
.t360ask {
	transition:
		opacity .45s cubic-bezier(.22, .7, .24, 1),
		translate .6s cubic-bezier(.22, .7, .24, 1),
		visibility 0s linear 0s;
}

.t360ask--away {
	opacity: 0;
	translate: 0 calc(100% + var(--t360ask-offset) + 24px);
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity .45s cubic-bezier(.22, .7, .24, 1),
		translate .6s cubic-bezier(.22, .7, .24, 1),
		visibility 0s linear .6s;
}

@media (prefers-reduced-motion: reduce) {
	.t360ask { transition: opacity .2s linear, visibility 0s linear 0s; }
	.t360ask--away { translate: none; transition: opacity .2s linear, visibility 0s linear .2s; }
}

/* ---------- the bar ---------- */
.t360ask__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--t360ask-surface);
	border-radius: var(--t360ask-bar-radius);
	padding: 8px 8px 8px 18px;
	box-shadow: var(--t360ask-shadow);
	position: relative;
}

/* The gradient ring. .t360ask--plain removes it. */
.t360ask__bar::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: var(--t360ask-ring);
	z-index: -1;
}
.t360ask--plain .t360ask__bar::before { display: none; }
.t360ask--plain .t360ask__bar { border: 1px solid var(--t360ask-border); }

/* A solid slate magnifier: darker than the placeholder, so it reads as the control. */
.t360ask__icon { color: #475569; display: flex; }
.t360ask__icon svg { fill: currentColor !important; stroke: none !important; }

.t360ask__input {
	flex: 1;
	border: 0;
	outline: none;
	font-size: 15px;
	font-family: inherit;
	color: var(--t360ask-text);
	background: transparent;
	min-width: 0;
	outline: none !important;
    border: none !important;
}
.t360ask__input::placeholder { color: #9ca3af; }
.t360ask__input[type=text]:focus:not([readonly]):focus{
	outline: none !important;
    border: none !important;
}

/* The send button. It is a real control, so it looks pressable. */
.t360ask__send {
	width: 38px; height: 38px;
	flex: 0 0 auto;
	border: 0; border-radius: 50%;
	padding: 0;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	background: var(--t360ask-send-bg, linear-gradient(135deg, rgba(var(--t360ask-accent-rgb), 1) 0%, var(--t360ask-violet) 100%));
	box-shadow: 0 2px 8px rgba(var(--t360ask-accent-rgb), .34);
	transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease, filter .14s ease;
}
.t360ask__send:hover {
	filter: brightness(1.07);
	box-shadow: 0 4px 13px rgba(var(--t360ask-accent-rgb), .44);
	transform: translateY(-1px);
}
.t360ask__send:active { transform: translateY(0) scale(.96); box-shadow: 0 2px 6px rgba(var(--t360ask-accent-rgb), .3); }
.t360ask__send:focus-visible { outline: 2px solid var(--t360ask-accent); outline-offset: 2px; }
.t360ask__send:disabled { opacity: .5; cursor: default; transform: none; filter: none; }
.t360ask__send svg { display: block; }

/* While the answer is loading the button shows a soft pulse. */
.t360ask__send:disabled { animation: t360ask-pulse 1.3s ease-in-out infinite; }
@keyframes t360ask-pulse {
	0%, 100% { opacity: .5; }
	50%      { opacity: .78; }
}

/* The original flat dot, kept as an option. */
.t360ask__send--dot {
	background: var(--t360ask-tint);
	box-shadow: none;
	animation: none;
}
.t360ask__send--dot:hover { background: rgba(var(--t360ask-accent-rgb), .18); filter: none; transform: none; box-shadow: none; }
.t360ask__send-dot {
	width: 16px; height: 16px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--t360ask-violet), var(--t360ask-dark));
	display: block;
}

/* The AI sparkle. The star breathes slowly so the button reads as "ask AI". */
.t360ask__send--sparkle svg {
	animation: t360ask-spark 3.4s ease-in-out infinite;
	transform-origin: 50% 50%;
	fill:#fff;
}
.t360ask__send--sparkle:hover svg { animation-duration: 1.7s; }

/* While the answer loads the whole button pulses, so stop the star as well. */
.t360ask__send--sparkle:disabled svg { animation: none; }

@keyframes t360ask-spark {
	0%, 62%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
	18%           { transform: scale(1.12) rotate(8deg); opacity: .88; }
	38%           { transform: scale(.97) rotate(-4deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.t360ask__send, .t360ask__send:hover, .t360ask__send:active { transition: none; transform: none; }
	.t360ask__send:disabled { animation: none; }
	.t360ask__send--sparkle svg,
	.t360ask__send--sparkle:hover svg { animation: none; }
}

/* ---------- the panel ---------- */
.t360ask__panel {
	background: var(--t360ask-surface);
	border: 1px solid var(--t360ask-border);
	border-radius: var(--t360ask-radius);
	box-shadow: var(--t360ask-panel-shadow);
	margin-bottom: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: min(56vh, 500px);
}
.t360ask__panel-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 13px 16px;
	background: var(--t360ask-head-grad);
	border-bottom: 0;
}
.t360ask__brand {
	font-weight: 600; font-size: 13px; color: var(--t360ask-head-text);
	display: flex; align-items: center; gap: 7px;
}
.t360ask__spark { color: var(--t360ask-head-text); }
.t360ask__close {
	border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .16);
	color: var(--t360ask-head-text);
	width: 28px; height: 28px; border-radius: 50%;
	font-size: 17px; line-height: 1; cursor: pointer;
	display: grid; place-items: center;
}
.t360ask__close:hover { background: rgba(255, 255, 255, .3); color: var(--t360ask-head-text); }

.t360ask__body { padding: 18px; overflow-y: auto; scrollbar-width: thin; }
.t360ask__body::-webkit-scrollbar { width: 4px; }
.t360ask__body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }

.t360ask__try {
	margin: 0 0 10px; font-size: 11px; font-weight: 700;
	letter-spacing: .09em; color: #9ca3af;
}
.t360ask__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t360ask__chip {
	border: 1px solid var(--t360ask-border); background: var(--t360ask-surface);
	color: #374151; font-family: inherit;
	border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.t360ask__chip:hover { border-color: var(--t360ask-accent); color: var(--t360ask-accent); }

/* ---------- the current question and answer ---------- */
.t360ask__turn { margin: 0; }

/* The question sits on one line with the search icon, like the reference. */
.t360ask__q {
	margin: 0 0 14px;
	display: flex; align-items: flex-start; gap: 9px;
	font-weight: 600; font-size: 14.5px; line-height: 1.45;
	color: var(--t360ask-dark);
}
.t360ask__q-icon { color: var(--t360ask-accent); flex: 0 0 auto; margin-top: 2px; }

.t360ask__resp { min-height: 20px; }

.t360ask__wait {
	margin: 0; color: var(--t360ask-muted); font-size: 14px;
	display: flex; align-items: center; gap: 9px;
}

/* Three dots that fade in turn while the answer is fetched. */
.t360ask__dots { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.t360ask__dots i {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--t360ask-violet);
	display: block; opacity: .35;
	animation: t360ask-dot 1.1s infinite ease-in-out;
}
.t360ask__dots i:nth-child(2) { animation-delay: .18s; }
.t360ask__dots i:nth-child(3) { animation-delay: .36s; }

@keyframes t360ask-dot {
	0%, 70%, 100% { opacity: .3; transform: translateY(0); }
	35%           { opacity: 1;  transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
	.t360ask__dots i { animation: none; opacity: .6; }
}
.t360ask__err { margin: 0; color: #b42318; font-size: 14px; }
.t360ask__a { font-size: 14px; line-height: 1.65; color: var(--t360ask-text); }
.t360ask__a p { margin: 0 0 10px; }
.t360ask__a p:last-child { margin-bottom: 0; }
.t360ask__a ul, .t360ask__a ol { margin: 0 0 10px; padding-left: 20px; }
.t360ask__a li { margin: 0 0 5px; }

/* The theme sizes headings for pages, which is far too big inside the panel. */
.t360ask .t360ask__a h3,
.t360ask .t360ask__a h4 {
	margin: 12px 0 6px; padding: 0;
	font-family: inherit; font-size: 14px; font-weight: 600;
	line-height: 1.4; letter-spacing: 0; text-transform: none;
	color: var(--t360ask-text);
}
.t360ask__a code { background: var(--t360ask-soft); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.t360ask__a table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.t360ask__a th, .t360ask__a td { border: 1px solid var(--t360ask-border); padding: 6px 8px; text-align: left; }

.t360ask__src-label {
	margin: 12px 0 6px; font-size: 11px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: #9ca3af;
}
/* The source list is styled further down. It is a row of pills now, not a
   bulleted list, so the rules that dressed the old markup have gone. */

@media (max-width: 600px) {
	.t360ask { bottom: 12px; }
	.t360ask--left, .t360ask--right { left: 16px; right: 16px; }
	.t360ask--center { left: 50%; }
	.t360ask__panel { max-height: 62vh; }
	.t360ask__bar { padding-left: 14px; }
}

/* The magnifier is a solid shape. The theme's SVG rules must not empty it. */
.t360ask__q svg {
	fill: currentColor !important;
	stroke: none !important;
}
/* ---------- sources ---------- */

.t360ask {
	/*
	 * The pill colours, so a theme can move them without touching the rules.
	 * The accent is a set of RGB numbers, so it can be made see-through here.
	 * The violet is a colour, so it cannot, and these are the fallback.
	 */
	--t360ask-src-bg:           rgba(var(--t360ask-accent-rgb), .055);
	--t360ask-src-bg-hover:     rgba(var(--t360ask-accent-rgb), .11);
	--t360ask-src-border:       rgba(var(--t360ask-accent-rgb), .20);
	--t360ask-src-border-hover: rgba(var(--t360ask-accent-rgb), .38);
	--t360ask-src-text:         var(--t360ask-violet);
}

/* Where colours can be mixed, tint the pill with the violet instead, so it
   matches the text rather than sitting on a blue wash. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.t360ask {
		--t360ask-src-bg:           color-mix(in srgb, var(--t360ask-violet) 7%, transparent);
		--t360ask-src-bg-hover:     color-mix(in srgb, var(--t360ask-violet) 14%, transparent);
		--t360ask-src-border:       color-mix(in srgb, var(--t360ask-violet) 26%, transparent);
		--t360ask-src-border-hover: color-mix(in srgb, var(--t360ask-violet) 45%, transparent);
	}
}

.t360ask__a + .t360ask__src-label { margin-top: 16px; }

/* One row of pills that wraps, rather than a bulleted list per group. */
.t360ask__src {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t360ask__src-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	/* A flex item will not shrink below its content by default, so a long
	   title would push the pill past the panel however narrow the panel got.
	   min-width releases that floor and lets the title clip instead. */
	max-width: 100%;
	min-width: 0;

	padding: 7px 14px;
	border: 1px solid var(--t360ask-src-border);
	border-radius: 999px;
	background: var(--t360ask-src-bg);
	color: var(--t360ask-src-text);
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.35;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.t360ask__src-item:hover {
	background: var(--t360ask-src-bg-hover);
	border-color: var(--t360ask-src-border-hover);
	color: var(--t360ask-src-text);
	text-decoration: none;
}
.t360ask__src-item:focus-visible {
	outline: 2px solid var(--t360ask-accent);
	outline-offset: 2px;
}

/* The site theme paints a fill onto every SVG it can reach, which floods an
   outline icon into a solid blob. These two are drawn with strokes. */
.t360ask__src-item svg {
	flex: 0 0 auto;
	display: block;
	fill: none;
}

/* The play mark is a solid shape, so it needs its fill back. */
.t360ask__src-item--video svg { fill: currentColor; }

/* A long post title would otherwise push the pill past the panel. */
.t360ask__src-item span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- citations inside a blended answer ---------- */
.t360ask__a sup { line-height: 0; }
.t360ask__a a:not(.t360ask__cite) { color: var(--t360ask-accent); }
.t360ask__cite {
	display: inline-block;
	min-width: 15px; padding: 0 4px; margin-left: 2px;
	border-radius: 4px;
	background: var(--t360ask-tint);
	color: var(--t360ask-accent);
	font-size: 10px; font-weight: 600; line-height: 15px;
	text-align: center; text-decoration: none;
	transition: background .14s ease, color .14s ease;
}
.t360ask__cite:hover {
	background: var(--t360ask-accent);
	color: #fff;
	text-decoration: none;
}

/* Sources were found but no answer was written. This is not an error, so it
   is not styled as one. */
.t360ask__none {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--t360ask-muted);
}

/* The line that says where the answer came from. */
.t360ask__from {
	margin: 16px 0 0;
	padding-top: 13px;
	border-top: 1px solid var(--t360ask-border);
	font-size: 12px;
	line-height: 1.4;
	color: var(--t360ask-muted);
	text-align: center;
}

/* ---------- which screens the widget appears on ---------- */

/*
 * The settings screen puts one of these on the wrapper for each size that is
 * switched off. Hiding here rather than leaving the markup out is deliberate:
 * the site sits behind a full page cache, so the HTML a phone receives may
 * have been generated for a desktop visitor. Only the browser knows how wide
 * the window actually is.
 */
@media (max-width: 767px) {
	.t360ask--no-mobile { display: none; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.t360ask--no-tablet { display: none; }
}

@media (min-width: 1025px) {
	.t360ask--no-desktop { display: none; }
}

/* ---------- a conversation, not a single question ---------- */

/*
 * Turns stack up rather than replacing one another, so each needs a little
 * air and a rule to separate it from the one before.
 */
.t360ask__turn + .t360ask__turn {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--t360ask-border);
}

/* ---------- the optional offer to email a resource ---------- */

/*
 * It sits inside the turn it belongs to, so the offer stays attached to the
 * answer that prompted it as the conversation grows.
 */
.t360ask__offer {
	position: relative;
	margin-top: 14px;
	padding: 13px 34px 13px 14px;
	border: 1px solid var(--t360ask-src-border);
	border-radius: 10px;
	background: var(--t360ask-src-bg);
}

.t360ask__offer-q { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--t360ask-text); }
.t360ask__offer-lead { color: var(--t360ask-muted); }

.t360ask__offer-row { display: flex; gap: 8px; align-items: center; }

.t360ask__offer-input {
	flex: 1; min-width: 0;
	border: 1px solid var(--t360ask-border);
	border-radius: 8px;
	padding: 8px 11px;
	font-size: 13px; font-family: inherit;
	background: var(--t360ask-surface);
	color: var(--t360ask-text);
	outline: none;
}
.t360ask__offer-input:focus { border-color: var(--t360ask-accent); }

.t360ask__offer-send {
	flex: 0 0 auto;
	border: 0; border-radius: 8px;
	padding: 9px 15px;
	font-size: 13px; font-family: inherit; font-weight: 600;
	color: #fff; cursor: pointer;
	background: linear-gradient(135deg, rgba(var(--t360ask-accent-rgb), 1) 0%, var(--t360ask-violet) 100%);
}
.t360ask__offer-send:hover { filter: brightness(1.07); }

/*
 * Declining is a quiet control, not a second call to action.
 *
 * The theme styles every button as a filled blue circle, and its rule wins
 * over a single class. Each property the theme touches is pinned here, so
 * the control stays a plain grey cross inside the box's corner.
 */
.t360ask .t360ask__offer .t360ask__offer-x {
	position: absolute !important;
	top: 8px !important; right: 8px !important;
	left: auto !important; bottom: auto !important;
	display: inline-flex !important;
	align-items: center; justify-content: center;
	width: 24px !important; height: 24px !important;
	min-width: 0 !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important;
	border: 0 !important; border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	color: var(--t360ask-muted) !important;
	font-size: 18px !important; font-weight: 400 !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer;
}
.t360ask .t360ask__offer .t360ask__offer-x:hover,
.t360ask .t360ask__offer .t360ask__offer-x:focus-visible {
	background: rgba(var(--t360ask-accent-rgb), .08) !important;
	color: var(--t360ask-text) !important;
}

.t360ask__offer-note { margin: 8px 0 0; font-size: 11.5px; color: var(--t360ask-muted); }

.t360ask__offer--bad .t360ask__offer-input { border-color: #b42318; }
.t360ask__offer-err { margin: 6px 0 0; font-size: 12px; color: #b42318; }
.t360ask__offer--busy { opacity: .6; pointer-events: none; }
.t360ask__offer--done { padding-right: 14px; }
.t360ask__offer--done .t360ask__offer-q { margin: 0; color: var(--t360ask-muted); }

/* The label for the field is read out but not drawn. */
.t360ask .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap;
}

@media (max-width: 600px) {
	.t360ask__offer-row { flex-wrap: wrap; }
	.t360ask__offer-send { width: 100%; }
}