/* Jack's Assistant — the pop-out conversation (assets/js/ja-chat.js). V14 web palette. */
.ja-pop { position: fixed; right: 20px; bottom: 20px; z-index: 9000; display: flex; flex-direction: column; width: 400px; max-width: calc(100vw - 24px); height: 560px; max-height: calc(100vh - 40px); background: #0a1628; color: #e8f2fb; border: 1px solid rgba(205,224,240,.35); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); font-family: inherit; overflow: hidden; }
.ja-pop[hidden] { display: none; }
.ja-pop.ja-folded { height: auto; }
.ja-pop.ja-folded .ja-log, .ja-pop.ja-folded .ja-form { display: none; }
.ja-bar { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 14px; background: #0072BC; cursor: move; touch-action: none; user-select: none; }
.ja-name { flex: 1; min-width: 0; }
.ja-name b { display: block; font-size: 15px; color: #fff; line-height: 1.2; }
.ja-name small { display: block; font-size: 11px; color: #cde0f0; }
.ja-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.ja-btn:hover { background: rgba(255,255,255,.28); }
.ja-log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; overscroll-behavior: contain; }
/* The conversations column: down the left of the panel, the way the Claude app lists its chats. */
.ja-body { flex: 1; min-height: 0; display: flex; position: relative; }
.ja-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ja-pop.ja-wide { width: 640px; }
.ja-pop.ja-folded .ja-body { display: none; }
.ja-side { flex: none; width: 216px; min-height: 0; display: flex; flex-direction: column; background: #0f2038; border-right: 1px solid rgba(205,224,240,.2); }
.ja-side[hidden] { display: none; }
.ja-hist { flex: 1 1 auto; min-height: 96px; overflow-y: auto; padding: 8px 6px; overscroll-behavior: contain; }
/* The lower half of the column: the products recommended in this conversation. */
.ja-recs { flex: 0 1 auto; max-height: 60%; overflow-y: auto; padding: 0 6px 8px; border-top: 1px solid rgba(205,224,240,.2); overscroll-behavior: contain; }
.ja-recs[hidden] { display: none; }
.ja-recs-list { display: flex; flex-direction: column; gap: 6px; }
.ja-recs .ja-card { display: grid; grid-template-columns: 50px 1fr; column-gap: 8px; align-items: start; padding: 6px 8px; }
.ja-recs .ja-card:not(:has(.ja-ph)) { grid-template-columns: 1fr; }
.ja-recs .ja-card .ja-ph { grid-column: 1; grid-row: 1 / span 4; width: 50px; height: 50px; margin: 0; }
.ja-recs .ja-card b, .ja-recs .ja-card span { grid-column: -2 / -1; }
.ja-recs .ja-card .ja-s { display: none; }
.ja-hist-new, .ja-hist-item { display: block; width: 100%; min-height: 34px; padding: 6px 8px 6px 28px; border: 0; border-radius: 8px; background: transparent; color: #e8f2fb; font: inherit; font-size: 14px; line-height: 1.4; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; position: relative; }
.ja-hist-new { font-weight: 600; }
.ja-hist-new::before { content: "+"; position: absolute; left: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 15px; line-height: 17px; text-align: center; }
.ja-hist-item::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: 1px solid rgba(205,224,240,.55); border-radius: 50%; }
.ja-hist-on { background: rgba(255,255,255,.08); }
.ja-hist-on::before { background: #2f8fe6; border-color: #2f8fe6; }
.ja-hist-new:hover, .ja-hist-item:hover, .ja-hist-new:focus-visible, .ja-hist-item:focus-visible { background: rgba(255,255,255,.12); }
.ja-hist-head { margin: 10px 8px 4px; font-size: 12px; color: #9fb6cc; }
.ja-hist-note { margin: 4px 8px; font-size: 13px; color: #cde0f0; }
@media (max-width: 640px) {
  .ja-pop.ja-wide { width: 100%; }
  .ja-side { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 80%; max-width: 300px; box-shadow: 8px 0 18px rgba(0,0,0,.35); }
  .ja-recs { display: none; }
  .ja-hist-new, .ja-hist-item { min-height: 44px; }
}
.ja-msg { margin: 10px 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ja-you { margin-left: 14%; padding: 8px 12px; background: #0072BC; color: #fff; border-radius: 12px 12px 2px 12px; }
.ja-him a { color: #7fd0ff; }
.ja-wait { font-size: 14px; color: #cde0f0; }
.ja-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 0; }
.ja-card { display: block; padding: 8px 10px; background: #fff; color: #0a1628; border-radius: 8px; text-decoration: none; }
.ja-card b { display: block; font-size: 13px; color: #0072BC; overflow-wrap: anywhere; }
.ja-card span { display: block; font-size: 12px; line-height: 1.3; }
.ja-card .ja-t { margin: 2px 0 4px; }
.ja-card .ja-p { font-weight: 700; }
.ja-human { margin: 8px 0; min-height: 66px; font-size: 13px; color: #cde0f0; }
.ja-note { margin: 8px 0; padding: 6px 10px; font-size: 13px; background: rgba(205,224,240,.14); color: #e8f2fb; border-radius: 8px; }
.ja-flag { margin: 6px 0; padding: 6px 10px; font-size: 13px; background: #C8102E; color: #fff; border-radius: 8px; }
.ja-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(205,224,240,.2); }
.ja-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; border: 0; border-radius: 10px; font: inherit; font-size: 16px; color: #0a1628; background: #fff; }
.ja-form button { min-width: 64px; min-height: 44px; border: 0; border-radius: 999px; background: #C8102E; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ja-form button:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  .ja-pop { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100%; max-width: 100%; height: 72vh; border-radius: 14px 14px 0 0; }
  .ja-bar { cursor: default; }
  .ja-cards { grid-template-columns: 1fr; }
}
.ja-form .ja-mic { min-width: 60px; background: none; border: 1px solid rgba(205,224,240,.5); color: #cde0f0; font-weight: 400; font-size: 14px; }
.ja-form .ja-mic.ja-live { background: #C8102E; border-color: #C8102E; color: #fff; }
/* the box a customer asks from on a page other than the home page (includes/ja_panel.php) */
.ja-box { margin: 0 0 16px; padding: 14px 16px; background: #0a1628; border-radius: 12px; color: #e8f2fb; }
.ja-box-tag { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ja-box-mark { width: 22px; height: 28px; flex: none; }
.ja-box-tag b { display: block; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; }
.ja-box-tag small { display: block; font-size: 12px; color: #cde0f0; }
.ja-box-tag small a { color: inherit; text-decoration: none; white-space: nowrap; }
.ja-box-tag small a:hover, .ja-box-tag small a:focus-visible { text-decoration: underline; }
.ja-box-tag small img { display: inline-block; height: 9px; width: auto; max-width: none; vertical-align: baseline; margin-right: 1px; }
.ja-box-ask { display: flex; gap: 8px; margin: 0; }
.ja-box-ask input { flex: 1; min-width: 0; box-sizing: border-box; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; font: inherit; font-size: 16px; color: #0a1628; background: #fff; }
.ja-box-ask button { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #C8102E; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ja-box-ask button:hover { background: #a80d26; }
@media (max-width: 640px) { .ja-box-ask { flex-direction: column; } .ja-box-ask button { width: 100%; } }
/* a parts card leads with the part's photo and says little (owner 2026-10-12: "a hero for each of the boxes and fewer words") */
.ja-card .ja-ph { display: block; width: 100%; height: 84px; object-fit: contain; margin: 0 0 6px; background: #fff; border-radius: 6px; }
.ja-card .ja-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #475569; }
.ja-card .ja-s { color: #475569; }
/* Resume: upper right of the assistant's box, for someone with a conversation going */
.ja-resume { margin-left: auto; align-self: flex-start; min-height: 32px; padding: 0 12px; border: 1px solid rgba(205,224,240,.55); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ja-resume:hover, .ja-resume:focus-visible { background: rgba(255,255,255,.2); }

/* THE AI BAR — the header of every page but the home page (includes/header.php; owner 2026-10-13, render approved).
   The account page's box (.ja-box above) laid in one row between the logo and the cart, with the home panel's
   copper-to-blue outline. On a phone it stacks, full width, under the top bar. */
.site-ai { flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center; gap: 16px; padding: 8px 10px 8px 14px; background: #0a1628; border-radius: 12px; color: #e8f2fb; box-sizing: border-box; }
.site-ai::before { content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: 14px; pointer-events: none; background: linear-gradient(135deg, #e0916a, #2f6fbf);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.site-ai .ja-box-tag { margin: 0; flex: none; }
.site-ai .ja-box-ask { flex: 1; min-width: 0; }
.site-ai .ja-box-ask input { height: 40px; font-size: 15px; outline: 0; }
.site-ai .ja-box-ask input:focus { box-shadow: 0 0 0 2px #D97757; }
.site-ai .ja-box-ask button { height: 40px; }
@media (max-width: 767px) {
  .site-ai { flex: 1 1 100%; width: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .site-ai .ja-box-ask { flex-direction: column; }
  .site-ai .ja-box-ask input { height: 44px; font-size: 16px; }
  .site-ai .ja-box-ask button { width: 100%; height: 44px; }
}

/* The phone menu button beside the AI bar (found 2026-10-13, DOC-ISO-155 section 17): site.css draws it white for the
   dark bar it used to sit on; the row it sits in now is white, so it could not be seen. Here it is the headline navy. */
@media (max-width: 767px) {
  .site-header-inner .site-nav-toggle { color: #0a1628; }
  .site-header-inner .site-nav-toggle svg { stroke: #0a1628; }
}