/* Hallmark · component: chat widget · genre: modern-minimal · theme: brand (spec 2026-11-11, japserviceparts.co.uk) · redesign: full
 * paper: oklch(98.6% 0.004 27) · accent: oklch(56.6% 0.22 28) · display: Hong Kong Hustle (panel title only) · body: Barlow
 * signature: the fitment ledger – results as a parts list ruled like a counter ticket, each row saying whether it fits the car on the job line
 * states: 8 on send, stop, add, change, chips, icon buttons, launcher, input · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: P, a chat window is a familiar object; argued it as a parts counter (job line, ruled ledger, one red signal) instead of bubbles and cards */
/* Hallmark · scoped: tokens live on the widget's own [data-theme="jsp-ai"] root and base rules on .jsp-ai, so the widget never restyles the host store's html, body or headings */

/* Hallmark · dismissed 23 · .jsp-ai__busy::before is a 2px loader line under the header, 40% of a 416px panel wide, shown only while an answer streams */

/* ---------------------------------------------------------------- tokens */
[data-theme="jsp-ai"] {
  --color-paper: oklch(98.6% 0.004 27);
  --color-paper-2: oklch(96.2% 0.006 27);
  --color-paper-3: oklch(92.8% 0.008 27);
  --color-rule: oklch(88% 0.01 27);
  --color-muted: oklch(48% 0.012 27);
  --color-ink-2: oklch(32% 0.012 27);
  --color-ink: oklch(17% 0.01 27);
  --color-on-ink: oklch(98.6% 0.004 27);
  --color-on-ink-muted: oklch(78% 0.01 27);
  --color-accent: oklch(56.6% 0.22 28);
  --color-accent-2: oklch(49% 0.19 28);
  --color-accent-ink: oklch(98.6% 0.004 27);
  --color-focus: oklch(56.6% 0.22 28);
  --color-success: oklch(46% 0.12 150);
  --color-error: oklch(50% 0.19 27);
  --color-shadow: oklch(20% 0.01 27 / 0.18);
  --color-shadow-edge: oklch(20% 0.01 27 / 0.08);
  --color-selection: oklch(56.6% 0.22 28 / 0.18);

  --font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Hong Kong Hustle", "Barlow", ui-sans-serif, system-ui, sans-serif;

  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.266rem;
  --radius: 4px; --radius-pill: 999px; --rule-hair: 1px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --z-widget: 99990;
  --control: 40px; --hit: 44px;
  --panel-w: 416px; --panel-h: min(704px, calc(100dvh - 48px));
}

/* ------------------------------------------------------------ scoped base */
.jsp-ai, .jsp-ai *, .jsp-ai *::before, .jsp-ai *::after { box-sizing: border-box; }
/* Resets use :where() so they carry no specificity and every component class below wins. */
.jsp-ai {
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.5; font-weight: 400;
  color: var(--color-ink); -webkit-font-smoothing: antialiased; font-synthesis: none;
  text-align: left; letter-spacing: 0; text-transform: none;
}
.jsp-ai ::selection { background: var(--color-selection); color: var(--color-ink); }
.jsp-ai :where(button, textarea) { font: inherit; color: inherit; margin: 0; }
.jsp-ai :where(button) { cursor: pointer; background: none; border: 0; padding: 0; text-transform: none; letter-spacing: 0; box-shadow: none; min-height: 0; }
.jsp-ai :where(p, ul, ol) { margin: 0; }
.jsp-ai :where(p) { text-wrap: pretty; }
.jsp-ai :where(svg) { display: block; flex-shrink: 0; }
.jsp-ai :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.jsp-ai :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.jsp-ai .jsp-ai__visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------------ panel */
.jsp-ai .jsp-ai__panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--color-paper); border-radius: var(--radius); overflow: hidden;
}
.jsp-ai--inline .jsp-ai__panel {
  height: 640px; max-width: 760px; margin: var(--space-lg) auto;
  border: var(--rule-hair) solid var(--color-rule);
}

/* Header: the counter */
.jsp-ai .jsp-ai__head {
  position: relative; display: flex; align-items: center; gap: var(--space-sm);
  min-height: 64px; padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-md);
  background: var(--color-ink); color: var(--color-on-ink);
}
.jsp-ai .jsp-ai__titles { flex: 1; min-width: 0; }
.jsp-ai .jsp-ai__title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.1;
  color: var(--color-on-ink); overflow-wrap: break-word; min-width: 0;
}
.jsp-ai .jsp-ai__subtitle { font-size: var(--text-sm); color: var(--color-on-ink-muted); }
.jsp-ai .jsp-ai__head-actions { display: flex; gap: var(--space-2xs); }

/* Busy bar: a 2px indeterminate loader along the header's bottom edge */
.jsp-ai .jsp-ai__busy { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.jsp-ai .jsp-ai__busy::before {
  content: ""; position: absolute; inset: 0; width: 40%; background: var(--color-accent);
  transform: translateX(-100%); animation: jsp-ai-busy 1.2s var(--ease-in-out) infinite;
}
.jsp-ai.is-busy .jsp-ai__busy { opacity: 1; }
@keyframes jsp-ai-busy { to { transform: translateX(250%); } }

/* Icon buttons (new conversation, close) */
.jsp-ai .jsp-ai__icon-btn {
  position: relative; display: grid; place-items: center; width: var(--control); height: var(--control);
  border-radius: var(--radius); color: var(--color-on-ink-muted);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.jsp-ai .jsp-ai__icon-btn::before { content: ""; position: absolute; inset: -2px; }
.jsp-ai .jsp-ai__icon-btn:active { transform: translateY(1px); }
.jsp-ai .jsp-ai__icon-btn:focus-visible { outline-color: var(--color-on-ink); outline-offset: -2px; color: var(--color-on-ink); }
.jsp-ai .jsp-ai__icon-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
@media (hover: hover) { .jsp-ai .jsp-ai__icon-btn:hover { background: var(--color-ink-2); color: var(--color-on-ink); } }

/* Job line: the vehicle the conversation is about */
.jsp-ai .jsp-ai__job {
  display: flex; align-items: center; gap: var(--space-sm);
  min-height: 48px; padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-md);
  background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule);
}
.jsp-ai .jsp-ai__job-label { font-size: var(--text-sm); color: var(--color-muted); }
.jsp-ai .jsp-ai__job-value { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jsp-ai .jsp-ai__job-value.is-empty { font-weight: 400; color: var(--color-muted); }
.jsp-ai .jsp-ai__text-btn {
  position: relative; min-height: var(--control); padding: 0 var(--space-xs); border-radius: var(--radius);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.jsp-ai .jsp-ai__text-btn::before { content: ""; position: absolute; inset: -2px 0; }
.jsp-ai .jsp-ai__text-btn:active { transform: translateY(1px); }
.jsp-ai .jsp-ai__text-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
@media (hover: hover) { .jsp-ai .jsp-ai__text-btn:hover { background: var(--color-paper-3); } }

/* -------------------------------------------------------------------- log */
.jsp-ai .jsp-ai__log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-lg);
  padding: var(--space-md) var(--space-md) var(--space-lg);
}
.jsp-ai .jsp-ai__log:focus-visible { outline-offset: -2px; }

.jsp-ai .jsp-ai__msg--user {
  align-self: flex-end; max-width: 85%;
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius);
  background: var(--color-paper-3); color: var(--color-ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.jsp-ai .jsp-ai__msg--bot { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }

.jsp-ai .jsp-ai__text { max-width: 60ch; overflow-wrap: break-word; }
.jsp-ai .jsp-ai__text p + p, .jsp-ai .jsp-ai__text p + ul, .jsp-ai .jsp-ai__text ul + p { margin-top: var(--space-xs); }
.jsp-ai .jsp-ai__text ul { padding-left: var(--space-md); }
.jsp-ai .jsp-ai__text li { margin-top: var(--space-2xs); padding-left: var(--space-3xs); }
.jsp-ai .jsp-ai__text li::marker { color: var(--color-accent); }
.jsp-ai .jsp-ai__text strong { font-weight: 600; }
.jsp-ai .jsp-ai__text a { color: var(--color-ink); font-weight: 600; }
@media (hover: hover) { .jsp-ai .jsp-ai__text a:hover { color: var(--color-accent-2); } }

.jsp-ai .jsp-ai__status { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.jsp-ai .jsp-ai__spinner {
  width: 14px; height: 14px; border-radius: var(--radius-pill);
  border: 2px solid var(--color-rule); border-top-color: var(--color-accent);
  animation: jsp-ai-spin 0.8s linear infinite;
}
@keyframes jsp-ai-spin { to { transform: rotate(360deg); } }

.jsp-ai .jsp-ai__error { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--text-sm); color: var(--color-error); }
.jsp-ai .jsp-ai__error svg { margin-top: var(--space-3xs); }

/* Welcome + suggestions */
.jsp-ai .jsp-ai__welcome { display: flex; flex-direction: column; gap: var(--space-md); }
.jsp-ai .jsp-ai__suggest-label { font-size: var(--text-sm); color: var(--color-muted); }
.jsp-ai .jsp-ai__suggest { display: flex; flex-direction: column; border-top: var(--rule-hair) solid var(--color-rule); }
.jsp-ai .jsp-ai__suggestion {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-height: var(--hit); padding: var(--space-xs) var(--space-2xs); width: 100%;
  border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; color: var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.jsp-ai .jsp-ai__suggestion svg { color: var(--color-muted); }
.jsp-ai .jsp-ai__suggestion:active { background: var(--color-paper-3); }
.jsp-ai .jsp-ai__suggestion:focus-visible { outline-offset: -2px; }
.jsp-ai .jsp-ai__suggestion:disabled { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) {
  .jsp-ai .jsp-ai__suggestion:hover { background: var(--color-paper-2); }
  .jsp-ai .jsp-ai__suggestion:hover svg { color: var(--color-accent); }
}

/* ---------------------------------------------------------- fitment ledger */
.jsp-ai .jsp-ai__parts {
  list-style: none; padding: 0;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper);
}
.jsp-ai .jsp-ai__parts:empty { display: none; }
.jsp-ai .jsp-ai__part {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-sm);
  padding: var(--space-sm); align-items: start;
}
.jsp-ai .jsp-ai__part.is-new { animation: jsp-ai-in var(--dur-long) var(--ease-out) both; }
.jsp-ai .jsp-ai__part + .jsp-ai__part { border-top: var(--rule-hair) solid var(--color-rule); }
@keyframes jsp-ai-in { from { opacity: 0; transform: translateY(4px); } }

.jsp-ai .jsp-ai__thumb { display: block; width: 56px; height: 56px; border-radius: 2px; overflow: hidden; background: var(--color-paper-2); }
.jsp-ai .jsp-ai__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.jsp-ai .jsp-ai__part-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3xs); }
.jsp-ai .jsp-ai__brand { font-size: var(--text-sm); color: var(--color-muted); }
.jsp-ai a.jsp-ai__name {
  font-weight: 600; line-height: 1.3; text-decoration: none; color: var(--color-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  border-radius: 2px;
}
@media (hover: hover) { .jsp-ai a.jsp-ai__name:hover { text-decoration: underline; } }
.jsp-ai .jsp-ai__fit { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-success); font-weight: 600; }
.jsp-ai .jsp-ai__fit.is-unconfirmed { color: var(--color-muted); font-weight: 400; }
.jsp-ai .jsp-ai__stock { font-size: var(--text-sm); color: var(--color-muted); }
.jsp-ai .jsp-ai__stock.is-instock { color: var(--color-success); }
.jsp-ai .jsp-ai__stock.is-outofstock, .jsp-ai .jsp-ai__stock.is-discontinued { color: var(--color-error); }

.jsp-ai .jsp-ai__part-buy { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); }
.jsp-ai .jsp-ai__price { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.jsp-ai .jsp-ai__price del { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); text-align: right; }
.jsp-ai .jsp-ai__basket-link { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }

/* Secondary button: add to basket, view part */
.jsp-ai .jsp-ai__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius);
  border: var(--rule-hair) solid var(--color-ink); background: var(--color-paper); color: var(--color-ink);
  font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.jsp-ai .jsp-ai__btn::before { content: ""; position: absolute; inset: -4px -2px; }
.jsp-ai .jsp-ai__btn:active { transform: translateY(1px); }
.jsp-ai .jsp-ai__btn:disabled, .jsp-ai .jsp-ai__btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.jsp-ai .jsp-ai__btn[aria-busy="true"] { cursor: progress; opacity: 1; }
.jsp-ai .jsp-ai__btn.is-done { border-color: var(--color-success); color: var(--color-success); background: var(--color-paper); opacity: 1; cursor: default; }
.jsp-ai .jsp-ai__btn.is-error { border-color: var(--color-error); color: var(--color-error); }
@media (hover: hover) { .jsp-ai .jsp-ai__btn:not(:disabled):not(.is-done):hover { background: var(--color-ink); color: var(--color-on-ink); } }

/* --------------------------------------------------------------- composer */
.jsp-ai .jsp-ai__composer {
  display: flex; align-items: flex-end; gap: var(--space-xs); margin: 0;
  padding: var(--space-sm) var(--space-sm) var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper);
}
.jsp-ai .jsp-ai__input {
  flex: 1; min-width: 0; resize: none; min-height: var(--hit); max-height: 128px;
  padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius);
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); line-height: 1.4;
  transition: border-color var(--dur-short) var(--ease-out);
}
.jsp-ai .jsp-ai__input::placeholder { color: var(--color-muted); opacity: 1; }
.jsp-ai .jsp-ai__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.jsp-ai .jsp-ai__input:disabled { opacity: 0.55; cursor: not-allowed; }
.jsp-ai .jsp-ai__input[aria-invalid="true"] { border-color: var(--color-error); }

/* The one filled primary */
.jsp-ai .jsp-ai__send {
  flex: none; display: grid; place-items: center; width: var(--hit); height: var(--hit); border-radius: var(--radius);
  background: var(--color-accent); color: var(--color-accent-ink);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.jsp-ai .jsp-ai__send:active { transform: translateY(1px); }
.jsp-ai .jsp-ai__send:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.jsp-ai .jsp-ai__send.is-stop { background: var(--color-ink); color: var(--color-on-ink); }
@media (hover: hover) {
  .jsp-ai .jsp-ai__send:not(:disabled):hover { background: var(--color-accent-2); }
  .jsp-ai .jsp-ai__send.is-stop:hover { background: var(--color-ink-2); }
}
.jsp-ai .jsp-ai__foot { padding: 0 var(--space-sm) var(--space-sm); background: var(--color-paper); font-size: var(--text-xs); color: var(--color-muted); }

/* -------------------------------------------------------------- floating */
.jsp-ai--floating { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-widget); }
.jsp-ai--floating .jsp-ai__panel {
  position: absolute; right: 0; bottom: 0; width: var(--panel-w); height: var(--panel-h);
  box-shadow: 0 0 0 1px var(--color-shadow-edge), 0 24px 48px -12px var(--color-shadow);
  opacity: 0; transform: translateY(12px); transform-origin: bottom right;
  visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-in), transform var(--dur-short) var(--ease-in), visibility 0s linear var(--dur-short);
}
.jsp-ai--floating.is-open .jsp-ai__panel {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out), visibility 0s;
}

.jsp-ai .jsp-ai__launcher {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg) 0 var(--space-md); border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-on-ink); font-weight: 600;
  box-shadow: 0 12px 24px -8px var(--color-shadow);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.jsp-ai .jsp-ai__launcher svg { color: var(--color-accent); }
.jsp-ai .jsp-ai__launcher:active { transform: translateY(1px); }
.jsp-ai .jsp-ai__launcher:disabled { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) { .jsp-ai .jsp-ai__launcher:hover { background: var(--color-ink-2); } }
.jsp-ai--floating.is-open .jsp-ai__launcher { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* ---------------------------------------------------------------- phone */
@media (max-width: 32.5rem) {
  .jsp-ai--floating { right: var(--space-md); bottom: var(--space-md); }
  .jsp-ai--floating .jsp-ai__panel { position: fixed; inset: 0; width: auto; height: 100dvh; border-radius: 0; }
  .jsp-ai .jsp-ai__launcher { padding: 0 var(--space-md); }
  .jsp-ai .jsp-ai__launcher-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .jsp-ai--inline .jsp-ai__panel { height: 75dvh; margin: var(--space-sm) 0; }
  .jsp-ai .jsp-ai__part { grid-template-columns: 48px minmax(0, 1fr); }
  .jsp-ai .jsp-ai__thumb { width: 48px; height: 48px; }
  .jsp-ai .jsp-ai__part-buy { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .jsp-ai *, .jsp-ai *::before, .jsp-ai *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .jsp-ai .jsp-ai__busy::before { transform: none; width: 100%; }
  .jsp-ai .jsp-ai__spinner { border-top-color: var(--color-rule); border-right-color: var(--color-accent); }
}