/* ShipEasy Bot on the marketing site — the chat widget's styles.
   Its OWN file rather than a section of styles.css: the widget is an add-on,
   and keeping it separate means it can be added or removed in one place. */

/* ── ShipEasy Bot · the chat widget ──────────────────────────────────────────
   Mounted by /assets/ask.js. Everything it renders is textContent — no answer
   or question is ever parsed as HTML. */

.ask-root {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.ask-launcher {
	order: 2;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--blue);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 12px 20px;
	min-height: 44px;
	cursor: pointer;
	box-shadow: 0 6px 20px var(--blue-glow);
}

.ask-launcher:hover {
	background: var(--blue-hover);
}

.ask-robot {
	width: 20px;
	height: 20px;
	flex: none;
}

.ask-panel {
	order: 1;
	display: none;
	flex-direction: column;
	/* Roomier than it started: at 380x520 a normal three-paragraph answer
	   became a ~296px column that scrolled for most of its length. */
	width: min(440px, calc(100vw - 40px));
	/* dvh so a collapsing mobile URL bar or an open keyboard shortens the panel
	   rather than pushing its composer out of reach. */
	height: min(640px, calc(100dvh - 120px));
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(7, 26, 60, 0.18);
	overflow: hidden;
}

.ask-root[data-open="true"] .ask-panel {
	display: flex;
}

.ask-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var(--c-border);
}

.ask-title {
	font-weight: 700;
	color: var(--navy);
}


/* "New chat" is the only control that discards the conversation, so it reads as
   a word rather than a glyph — the two glyphs beside it both preserve it. */

.ask-close {
	appearance: none;
	border: 0;
	background: transparent;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--c-fg-soft);
	cursor: pointer;
	min-width: 32px;
	min-height: 32px;
}

.ask-log {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ---------------------------------------------------------- the tab strip */
/* One tab per conversation, plus a +. Scrolls sideways rather than wrapping:
   a strip that grows to two rows moves the log down as you open tabs. */
.ask-tabs {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--c-border);
	overflow-x: auto;
	scrollbar-width: none;
}
.ask-tabs::-webkit-scrollbar {
	display: none;
}

.ask-tab {
	appearance: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 11rem;
	padding: 4px 6px 4px 9px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 0.78rem;
	color: var(--c-fg-soft);
	cursor: pointer;
}
.ask-tab:hover {
	background: var(--c-bg);
	color: var(--c-fg);
}

/* The active tab is the one whose conversation is on screen, so it reads as
   attached to the log below rather than as a selected button. */
.ask-tab[data-active="true"] {
	background: var(--blue-softer);
	border-color: var(--blue-softer);
	color: var(--blue);
	font-weight: 600;
}

.ask-tab-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ask-tab-close,
.ask-tab-new {
	appearance: none;
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	font: inherit;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	border-radius: 999px;
}

.ask-tab-close {
	width: 16px;
	height: 16px;
	font-size: 0.95rem;
	opacity: 0.55;
}
.ask-tab-close:hover {
	opacity: 1;
	background: rgba(7, 26, 60, 0.1);
}

.ask-tab-new {
	width: 26px;
	height: 26px;
	font-size: 1.05rem;
	color: var(--c-fg-soft);
}
.ask-tab-new:hover {
	background: var(--c-bg);
	color: var(--c-fg);
}

/* ------------------------------------------------------------ the dialogue */
/* Two parties: the bot on the left, the visitor on the right, both avatars at
   the bubble's BOTTOM so a tall bubble stays anchored to its speaker. Same
   shape as the operator console's transcript. */
.ask-msg {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}

.ask-msg.ask-you {
	justify-content: flex-end;
}

.ask-msg.ask-bot {
	justify-content: flex-start;
}

/* The bot reads in the accent, the visitor neutral, so the two speakers are
   distinguishable before a word is read. */
.ask-avatar {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--blue-softer);
	color: var(--blue);
}

.ask-msg.ask-you .ask-avatar {
	background: var(--c-bg);
	color: var(--c-fg-soft);
}

.ask-bubble {
	margin: 0;
	/* 80%, not the full width: a bubble that spans the panel stops reading as
	   one side of a conversation and starts reading as a document. */
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 0.875rem;
	line-height: 1.65;
	/* The shape of what was written, without any of it being interpreted. */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	background: var(--c-bg);
	color: var(--c-fg);
	/* The tail: one corner tightened towards the speaker's avatar. */
	border-bottom-left-radius: 6px;
}

/* Chrome navy, not the saturated accent: a bright blue at bubble size shouts,
   and this panel already spends its blue on the launcher and the Ask button. */
.ask-msg.ask-you .ask-bubble {
	background: var(--navy);
	color: #fff;
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 6px;
}

/* Three bouncing dots while the answer is still empty. */
.ask-typing {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 0;
}

.ask-typing i {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--c-fg-soft);
	animation: ask-typing 1.3s ease-in-out infinite;
}

.ask-typing i:nth-child(2) {
	animation-delay: 0.18s;
}

.ask-typing i:nth-child(3) {
	animation-delay: 0.36s;
}

@keyframes ask-typing {
	0%,
	70%,
	100% {
		transform: translateY(0);
		opacity: 0.4;
	}
	35% {
		transform: translateY(-4px);
		opacity: 1;
	}
}

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

/* A bot answer is blocks now, not one pre-wrapped string: `setProse` builds
   paragraphs and lists, and the gap between them is a MARGIN rather than a blank
   line of text. `:where()` so the reset carries ZERO specificity — written as
   `.ask-bubble p` it would score (0,1,1), beat the sibling rule at (0,1,0), and
   silently zero every gap. The visitor's own question is still a bare <p>, so
   `pre-wrap` stays on the bubble itself as well as on the leaves. */
.ask-bubble :where(p, ul, li) {
	margin: 0;
}

.ask-bubble > * + * {
	margin-top: 0.7em;
}

.ask-bubble ul {
	/* Inside the text column: the panel is 440px and an outdented marker would
	   collide with the bubble's own padding. */
	padding-left: 1.15em;
	list-style: disc;
}

.ask-bubble li + li {
	margin-top: 0.3em;
}

.ask-bubble li::marker {
	color: var(--c-fg-soft);
}

/* Buttons an answer ends with. Inside the bubble, because "go here" is part of
   the answer rather than chrome beside it. Outlined in the accent so they read
   as offers, not as the page's own primary action. */
.ask-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.ask-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid var(--blue);
	border-radius: 8px;
	color: var(--blue);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.ask-link:hover {
	background: var(--blue-softer);
}

.ask-link-glyph {
	font-size: 0.9em;
}

.ask-bubble.ask-error {
	background: #fdecee;
	color: var(--c-danger);
}

.ask-form {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--c-border);
}

.ask-input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: 0.92rem;
	padding: 9px 11px;
	min-height: 40px;
	border: 1px solid var(--c-border-strong);
	border-radius: 9px;
	background: var(--c-surface);
	color: var(--c-fg);
}

.ask-send {
	appearance: none;
	border: 0;
	border-radius: 9px;
	background: var(--blue);
	color: #fff;
	font: inherit;
	font-weight: 600;
	padding: 0 16px;
	min-height: 40px;
	cursor: pointer;
}

.ask-send:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Stop is the same button doing the opposite job, so it must not read as the
   accent action it replaces. Not an error colour either: nothing has gone
   wrong. --c-fg-soft on white is 5.6:1. */
.ask-send[data-stop] {
	background: transparent;
	border: 1px solid var(--c-border-strong);
	color: var(--c-fg-soft);
}

.ask-send[data-stop]:hover {
	border-color: var(--c-fg-soft);
	background: var(--c-bg);
}

.ask-foot {
	margin: 0;
	padding: 0 14px 12px;
	font-size: 0.72rem;
	line-height: 1.45;
	color: var(--c-fg-soft);
}

@media (max-width: 600px) {
	.ask-root {
		right: 12px;
		bottom: 12px;
	}

	/* FULL SCREEN at phone width, the same rule the operator console's drawer
	   already follows. It used to be `100vw - 24px` by `100vh - 100px`, which
	   left the launcher sitting below a panel that already wanted the whole
	   screen — 60px of a phone spent on a button that reopens what is open. */
	.ask-root[data-open="true"] .ask-panel {
		position: fixed;
		inset: 0;
		width: 100%;
		/* dvh, not vh: with vh the composer sits behind the on-screen keyboard,
		   because vh is the viewport as if the keyboard were not there. */
		height: 100dvh;
		border: 0;
		border-radius: 0;
	}

	/* The launcher is the panel's toggle, and at phone width the panel covers
	   the screen — so while it is open the launcher would be a button floating
	   over its own conversation. */
	.ask-root[data-open="true"] .ask-launcher {
		display: none;
	}

	/* A CIRCLE on a phone, not a 170px pill — the same call the portal's
	   launcher already made, and now the two rails read alike. Raising it off
	   the sticky "Get started" bar stopped it covering a BUTTON, but a 170px
	   pill still lay across the trust row above ("Pay per shipment", "FMCSA
	   licensed broker"). 56px covers 3,100px² of the corner instead of
	   8,200px² across half the width. The label is hidden, not removed; the
	   button's name comes from the aria-label ask.js sets. */
	.ask-launcher {
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
		gap: 0;
	}

	.ask-launcher-label {
		display: none;
	}

	.ask-robot {
		width: 24px;
		height: 24px;
	}

	/* Smaller, not shorter. Measured at 390px it is still three lines — 44px,
	   5% of the screen — which is fine now the panel has the whole screen, and
	   the sentence is a disclaimer that is not mine to trim. */
	.ask-foot {
		font-size: 0.7rem;
	}

	/* Thumb-sized, per the same 44px floor the console's close button uses. */
	.ask-close {
		min-width: 44px;
		min-height: 44px;
	}
	.ask-tab-close,
	.ask-tab-new {
		min-width: 32px;
		min-height: 32px;
	}
}

/* ---------------------------------------------- above the sticky page CTA */
/* `.mobile-cta` in styles.css is a fixed 68px bar at `bottom: 0` carrying
   "Get started", shown at every width up to 879px. The launcher sat at
   `bottom: 20px` (12px on a phone) and covered 168x48px of it — most of the
   button, on all nine pages that load this widget, at every one of those
   widths. It is the same failure the portal's rate bar had: the floating
   button was placed against the VIEWPORT, and something else already owned
   that corner.

   879px, not 600px, because that is the width `.mobile-cta` itself stops at —
   tying this to the phone breakpoint would have left 601-879px still broken.
   64px is the height styles.css already reserves for the bar in
   `main { padding-bottom }`, so the two agree by using the same number. */
@media (max-width: 879px) {
	.ask-root {
		bottom: calc(64px + 12px + var(--safe-bottom, 0px));
	}
}

@media print {
	.ask-root {
		display: none;
	}
}