/* PlotBot widget — theme-token driven, self-contained. */

.pp-plotbot-launcher {
	position: fixed;
	right: 1.1rem;
	bottom: 1.1rem;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.05rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--navy, #16324f);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(10, 30, 50, .35);
	transition: transform .15s ease, box-shadow .15s ease;
}
.pp-plotbot-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10, 30, 50, .4); }
.pp-plotbot-launcher svg { display: block; }

.pp-pb {
	display: none;
	flex-direction: column;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid rgba(22, 50, 79, .14);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(10, 30, 50, .28);
}
.pp-pb.is-open { display: flex; }
.pp-pb--float {
	position: fixed;
	right: 1.1rem;
	bottom: 4.6rem;
	z-index: 9999;
	width: min(400px, calc(100vw - 1.6rem));
	height: min(600px, calc(100vh - 6.5rem));
}
.pp-pb--embed {
	position: relative;
	width: 100%;
	height: min(72vh, 760px);
	box-shadow: none;
}

.pp-pb-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .85rem 1rem;
	background: var(--wp--preset--color--navy, #16324f);
	color: #fff;
}
.pp-pb-head strong { font-size: 1.05rem; letter-spacing: .02em; }
.pp-pb-tag { display: block; font-size: .72rem; opacity: .75; margin-top: .1rem; }
.pp-pb-close {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: .2rem .45rem;
}

.pp-pb-log {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	background: var(--wp--preset--color--surface-2, #f4f6f8);
}
.pp-pb-msg {
	max-width: 88%;
	padding: .65rem .85rem;
	border-radius: 12px;
	font-size: .92rem;
	line-height: 1.5;
	white-space: normal;
}
.pp-pb-msg p { margin: 0 0 .5em; }
.pp-pb-msg p:last-child { margin-bottom: 0; }
.pp-pb-msg--user {
	align-self: flex-end;
	background: var(--wp--preset--color--accent, #f26b1a);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.pp-pb-msg--bot {
	align-self: flex-start;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid rgba(22, 50, 79, .1);
	border-bottom-left-radius: 4px;
}
.pp-pb-msg--wait { color: var(--wp--preset--color--muted, #5a6b7b); font-style: italic; }
.pp-pb-cite {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: .68em;
	color: var(--wp--preset--color--accent, #f26b1a);
	margin-left: .15em;
}
.pp-pb-sources { margin-top: .55rem; font-size: .8rem; }
.pp-pb-sources summary { cursor: pointer; color: var(--wp--preset--color--muted, #5a6b7b); }
.pp-pb-source { display: flex; gap: .4rem; padding: .25rem 0 0 .2rem; }
.pp-pb-source-n { font-family: var(--wp--preset--font-family--mono, monospace); color: var(--wp--preset--color--accent, #f26b1a); }
.pp-pb-cta {
	display: inline-block;
	margin-top: .6rem;
	margin-right: .5rem;
	padding: .45rem .8rem;
	border-radius: 8px;
	background: var(--wp--preset--color--navy, #16324f);
	color: #fff !important;
	font-size: .84rem;
	font-weight: 700;
	text-decoration: none;
}

.pp-pb-form {
	display: flex;
	gap: .5rem;
	padding: .7rem;
	border-top: 1px solid rgba(22, 50, 79, .1);
	background: var(--wp--preset--color--surface, #fff);
}
.pp-pb-input {
	flex: 1;
	resize: none;
	border: 1px solid rgba(22, 50, 79, .18);
	border-radius: 10px;
	padding: .55rem .7rem;
	font: inherit;
	font-size: .92rem;
	max-height: 6.5rem;
}
.pp-pb-input:focus { outline: 2px solid var(--wp--preset--color--accent, #f26b1a); outline-offset: 1px; }
.pp-pb-send {
	border: 0;
	border-radius: 10px;
	padding: 0 1.1rem;
	background: var(--wp--preset--color--accent, #f26b1a);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.pp-pb-foot {
	padding: .5rem .9rem .65rem;
	font-size: .72rem;
	color: var(--wp--preset--color--muted, #5a6b7b);
	background: var(--wp--preset--color--surface, #fff);
}
.pp-pb-foot a { color: inherit; font-weight: 700; }

@media (max-width: 600px) {
	.pp-pb--float {
		right: .5rem;
		left: .5rem;
		width: auto;
		bottom: 4.4rem;
		height: min(70vh, calc(100vh - 5.6rem));
	}
}
@media (prefers-reduced-motion: reduce) {
	.pp-plotbot-launcher { transition: none; }
}

/* answer lists + product cards */
.pp-pb-list { margin: .2rem 0 .5rem; padding-left: 1.1rem; }
.pp-pb-list li { margin: .22rem 0; }
.pp-pb-products {
	display: flex;
	gap: .55rem;
	overflow-x: auto;
	padding: .6rem 0 .25rem;
	margin-top: .35rem;
	border-top: 1px dashed rgba(22, 50, 79, .14);
}
.pp-pb-product {
	flex: 0 0 168px;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .55rem;
	border: 1px solid rgba(22, 50, 79, .12);
	border-radius: 10px;
	background: var(--wp--preset--color--surface-2, #f4f6f8);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease;
}
.pp-pb-product:hover { border-color: var(--wp--preset--color--accent, #f26b1a); transform: translateY(-1px); }
.pp-pb-product img {
	width: 100%;
	height: 92px;
	object-fit: contain;
	background: #fff;
	border-radius: 7px;
}
.pp-pb-product-meta { display: flex; flex-direction: column; gap: .12rem; }
.pp-pb-product-meta strong {
	font-size: .78rem;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pp-pb-product-meta span { font-size: .74rem; color: var(--wp--preset--color--muted, #5a6b7b); }
.pp-pb-product-meta em {
	font-style: normal;
	font-size: .72rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent, #f26b1a);
}

/* ---------------------------------------------------------------------------
   ASK BOX — the open-ended door next to the supplies finder.
   The finder answers "what fits my machine"; this takes everything else. Styled
   to sit beside it as a peer, so the pair reads as one decision point rather
   than a form with an advert attached.
   --------------------------------------------------------------------------- */
.pp-ask {
  background: var(--wp--preset--color--surface, #fff);
  border: 1px solid var(--wp--preset--color--border, #D7E0EC);
  border-radius: 12px; padding: 1.15rem 1.25rem 1.1rem; min-width: 0;
}
/* Head styles are shared with the finder from the theme's pairing block; these
   stand in wherever the ask box is used on its own. */
.pp-ask-kicker {
  margin: 0 0 .35rem; font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--accent, #1B5FAD);
}
.pp-ask-h {
  margin: 0 0 .9rem; font-family: var(--wp--preset--font-family--display, sans-serif);
  font-size: 1.12rem; line-height: 1.25; color: var(--wp--preset--color--ink, #14181D);
}
.pp-ask-form { display: flex; gap: .5rem; }
.pp-ask-input {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  padding: .7em .9em; font: inherit; font-size: .95rem;
  border: 1px solid var(--wp--preset--color--border, #D7E0EC); border-radius: 8px;
  background: var(--wp--preset--color--surface, #fff); color: var(--wp--preset--color--ink, #14181D);
}
.pp-ask-input:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent, #1B5FAD); outline-offset: 1px;
  border-color: var(--wp--preset--color--accent, #1B5FAD);
}
.pp-ask-send {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-weight: 600; font-size: .95rem;
  padding: .7em 1.15em; border-radius: 8px; border: 1px solid var(--wp--preset--color--accent, #1B5FAD);
  background: var(--wp--preset--color--accent, #1B5FAD); color: #fff;
}
.pp-ask-send:hover { background: var(--wp--preset--color--accent-strong, #164E8F); }
/* Example questions: one tap straight into a real answer. */
.pp-ask-eg { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pp-ask-eg button {
  cursor: pointer; font: inherit; font-size: .8rem; text-align: left;
  padding: .35em .75em; border-radius: 999px;
  border: 1px solid var(--wp--preset--color--border, #D7E0EC);
  background: var(--wp--preset--color--surface-2, #F4F7FB);
  color: var(--wp--preset--color--ink-soft, #2C353F);
}
.pp-ask-eg button:hover {
  border-color: var(--wp--preset--color--accent, #1B5FAD);
  color: var(--wp--preset--color--accent, #1B5FAD);
}
.pp-ask-note, .pp-ask-gated {
  margin: .85rem 0 0; font-size: .78rem; line-height: 1.5;
  color: var(--wp--preset--color--muted, #5A6675);
}
.pp-ask-gated { font-size: .88rem; color: var(--wp--preset--color--ink-soft, #2C353F); }

/* The finder-band pairing (grid + panel chrome for BOTH halves) lives in the
   theme, with the band it belongs to. Splitting it across two files is what let
   the two halves drift into looking like different things. */