/* Generated by tools/integrate_assistant.py from integration/assistant/jbugs-assistant-widget.html; edit upstream, not here. body sha256:b227c11a3eec */
    #jba-root {
      --jba-ink: #000;
      --jba-blue: #0066CC;       /* primary / interactive */
      --jba-blue-dark: #2a527a;  /* accents / hover */
      --jba-bg: #ffffff;
      --jba-surface: #f5f7fa;
      --jba-line: #e2e6ea;
      --jba-muted: #5a6672;
      --jba-danger: #b3261e;
      --jba-ok: #1a7f43;
      --jba-ok-text: #157347;
      --jba-warn: #c47f00;
      --jba-warn-text: #8a5300;
      --jba-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      --jba-radius: 14px;
      --jba-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
      --jba-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 2147483000;
      font-family: var(--jba-font);
      color: var(--jba-ink);
      font-size: 14px;
      line-height: 1.45;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    #jba-root *, #jba-root *::before, #jba-root *::after { box-sizing: border-box; }

    /* ---- Launcher ---- */
    .jba-launcher {
      width: 60px; height: 60px;
      border: none; border-radius: 50%;
      background: var(--jba-blue);
      color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: var(--jba-shadow);
      transition: transform .15s ease, background .15s ease;
      padding: 0;
    }
    .jba-launcher:hover { background: var(--jba-blue-dark); transform: translateY(-1px); }
    .jba-launcher:focus-visible { outline: 3px solid var(--jba-blue-dark); outline-offset: 2px; }
    .jba-launcher svg { width: 28px; height: 28px; }

    /* ---- Panel ---- */
    .jba-panel {
      display: none;
      flex-direction: column;
      width: 380px;
      height: 600px;
      max-height: calc(100vh - 40px);
      max-height: calc(100dvh - 40px);
      background: var(--jba-bg);
      border-radius: var(--jba-radius);
      box-shadow: var(--jba-shadow);
      overflow: hidden;
    }
    #jba-root[data-jba-state="open"] .jba-panel { display: flex; }
    #jba-root[data-jba-state="open"] .jba-launcher { display: none; }

    .jba-header {
      background: var(--jba-blue-dark);
      color: #fff;
      padding: 14px 16px;
      display: flex; align-items: center; gap: 10px;
      flex: 0 0 auto;
    }
    .jba-header .jba-title { font-weight: 600; font-size: 15px; margin: 0; }
    .jba-header .jba-sub { font-size: 12px; opacity: .85; margin: 1px 0 0; }
    .jba-header-text { flex: 1; min-width: 0; }
    .jba-min {
      background: transparent; border: none; color: #fff; cursor: pointer;
      padding: 6px 8px; border-radius: 6px; display: flex; align-items: center; gap: 6px;
      flex: 0 0 auto; font-family: inherit; font-size: 13px; font-weight: 600;
      line-height: 1; white-space: nowrap;
    }
    .jba-min:hover { background: rgba(255,255,255,.15); }
    .jba-min:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

    .jba-body {
      flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 16px;
      overscroll-behavior: contain;
      background: var(--jba-surface);
      display: flex; flex-direction: column; gap: 12px;
    }

    /* ---- Messages ---- */
    .jba-msg { max-width: 88%; padding: 10px 13px; border-radius: 12px; white-space: normal; word-wrap: break-word; }
    .jba-msg.bot { background: #fff; border: 1px solid var(--jba-line); align-self: flex-start; border-bottom-left-radius: 4px; }
    .jba-msg.user { background: var(--jba-blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; white-space: pre-wrap; }
    /* The product/category a message was about, shown as a pill in front of the text. Its own
       class: .jba-tag is the order card's "Special order" badge. */
    .jba-msg-tag {
      display: inline-block; max-width: 100%; margin-right: 6px; padding: 0 8px; border-radius: 999px;
      background: rgba(255,255,255,.22); font-size: 12px; font-weight: 600; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
    }
    .jba-msg.error { border: 1px solid var(--jba-danger); color: var(--jba-danger); background: #fff; align-self: flex-start; }
    .jba-msg p { margin: 0 0 8px; } .jba-msg p:last-child { margin-bottom: 0; }
    .jba-msg ul, .jba-msg ol { margin: 0 0 8px; padding-left: 20px; }
    .jba-msg li { margin: 2px 0; }
    .jba-msg a { color: var(--jba-blue); }
    .jba-return-link { font-weight: 600; white-space: nowrap; }
    .jba-divider {
      align-self: center; font-size: 11px; font-weight: 600; color: var(--jba-muted);
      text-transform: uppercase; letter-spacing: .05em;
    }

    /* ---- Thinking indicator: a Beetle driving in place, plus a verb that changes every few
       seconds. The drawing is chat_widget/vw-bug-detail.svg, inlined by the script with its
       classes prefixed (jbb-) and its styles moved here, since the widget keeps one style block.
       At this size (about the old typing dots) lines are thicker and the bounce bigger than in
       the source file, so the motion still reads. */
    .jba-thinking { display: inline-flex; align-items: center; gap: 8px; color: var(--jba-muted); font-size: 13px; }
    .jba-thinking-verb { white-space: nowrap; }
    .jba-thinking-verb.is-new { animation: jba-verb-in .25s ease-out; }
    @keyframes jba-verb-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
    .jba-bug {
      flex: 0 0 auto; width: 44px; height: 14px; overflow: visible;
      --jbb-line: var(--jba-blue-dark); --jbb-body: #6f95c2; --jbb-glass: #e8f0fa;
    }
    .jba-bug .jbb-body  { fill: var(--jbb-body); stroke: var(--jbb-line); stroke-width: 2.6; stroke-linejoin: round; }
    .jba-bug .jbb-ln    { fill: none; stroke: var(--jbb-line); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .jba-bug .jbb-glass { fill: var(--jbb-glass); stroke: var(--jbb-line); stroke-width: 1.8; stroke-linejoin: round; }
    .jba-bug .jbb-lamp  { fill: var(--jbb-glass); stroke: var(--jbb-line); stroke-width: 1.8; }
    .jba-bug .jbb-tire  { fill: var(--jbb-line); }
    .jba-bug .jbb-hub   { fill: var(--jbb-glass); }
    .jba-bug .jbb-slots { fill: none; stroke: var(--jbb-line); stroke-width: 1.4; stroke-dasharray: 1.4 2.4; opacity: .5; }
    .jba-bug .jbb-pipe  { stroke-width: 3; }
    .jba-bug .jbb-puff  { fill: var(--jbb-line); opacity: 0; animation: jbb-puff 1.3s ease-out infinite; }
    .jba-bug .jbb-streak { stroke-width: 2.6; opacity: 0; animation: jbb-streak .6s ease-out infinite; }
    .jba-bug .jbb-bounce { animation: jbb-bounce .46s ease-in-out infinite; }
    .jba-bug .jbb-wheel  { animation: jbb-spin .5s linear infinite; }
    .jba-bug .jbb-p2 { animation-delay: -.43s; }
    .jba-bug .jbb-p3 { animation-delay: -.87s; }
    .jba-bug .jbb-s2 { animation-delay: -.2s; }
    .jba-bug .jbb-s3 { animation-delay: -.4s; }
    @keyframes jbb-bounce {
      0%   { transform: translate(0, 0) rotate(0deg); }
      22%  { transform: translate(0, -2.4px) rotate(1.2deg); }
      48%  { transform: translate(0, .5px) rotate(-.3deg); }
      72%  { transform: translate(0, -1.8px) rotate(-1deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }
    @keyframes jbb-spin { to { transform: rotate(360deg); } }
    @keyframes jbb-puff {
      0%   { transform: translate(0, 0) scale(.35); opacity: 0; }
      12%  { opacity: .6; }
      100% { transform: translate(-15px, -9px) scale(1.7); opacity: 0; }
    }
    @keyframes jbb-streak {
      0%   { transform: translateX(0) scaleX(.2); opacity: 0; }
      25%  { opacity: .9; }
      100% { transform: translateX(-8px) scaleX(1); opacity: 0; }
    }

    /* ---- Quick-start chips ---- */
    .jba-chips { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
    .jba-chip {
      border: 1px solid var(--jba-blue); color: var(--jba-blue); background: #fff;
      border-radius: 999px; padding: 6px 12px; font-family: inherit; font-size: 13px;
      font-weight: 600; cursor: pointer;
      max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .jba-chip:hover { background: var(--jba-surface); }
    .jba-chip:focus-visible { outline: 2px solid var(--jba-blue-dark); outline-offset: 1px; }

    /* ---- Feedback on a reply ---- */
    .jba-fb { display: flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: -6px; }
    .jba-fb-q { font-size: 12px; color: var(--jba-muted); margin-right: 2px; }
    .jba-fb button {
      background: #fff; border: 1px solid var(--jba-line); border-radius: 6px; padding: 3px 6px;
      cursor: pointer; color: var(--jba-muted); line-height: 0;
    }
    .jba-fb button:hover { border-color: var(--jba-blue); color: var(--jba-blue); }
    .jba-fb button[aria-pressed="true"] { color: #fff; background: var(--jba-blue); border-color: var(--jba-blue); }
    .jba-fb svg { width: 14px; height: 14px; }

    /* ---- Product cards (links come from the server's retrieved set, never model text) ---- */
    .jba-products { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
    .jba-product {
      display: block; border: 1px solid var(--jba-line); border-radius: 8px; padding: 7px 10px;
      text-decoration: none; color: var(--jba-ink); background: var(--jba-surface);
    }
    .jba-product:hover { border-color: var(--jba-blue); }
    .jba-product .jba-sku { display: block; }
    .jba-product .jba-pname { display: block; font-size: 13px; color: var(--jba-ink); }

    /* ---- Sign-in prompt (tech and parts answers can need a storefront account) ---- */
    .jba-login { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .jba-login-btn {
      flex: 1 1 auto; padding: 8px 12px; border: 1px solid var(--jba-blue); border-radius: 8px;
      background: var(--jba-blue); color: #fff; font-family: inherit; font-size: 13px;
      font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    .jba-login-btn:hover { background: var(--jba-blue-dark); border-color: var(--jba-blue-dark); }
    .jba-login-btn.is-alt { background: #fff; color: var(--jba-blue); }
    .jba-login-btn.is-alt:hover { background: var(--jba-surface); border-color: var(--jba-blue); }
    .jba-login-btn:focus-visible { outline: 2px solid var(--jba-blue-dark); outline-offset: 1px; }

    /* ---- Structured order reply (ported from the order-status widget) ---- */
    .jba-msg.jba-rich { max-width: 96%; padding: 13px 15px; }
    .jba-reply { line-height: 1.55; }
    .jba-reply > * + * { margin-top: 18px; }
    .jba-reply p { margin: 0; }
    .jba-lead { color: var(--jba-muted); font-size: 13px; }
    .jba-summary { font-weight: 600; font-size: 14.5px; color: var(--jba-ink); }
    .jba-group { border-left: 3px solid var(--jba-line); padding: 2px 0 2px 14px; }
    .jba-group.is-ok { border-left-color: var(--jba-ok); }
    .jba-group.is-warn { border-left-color: var(--jba-warn); }
    .jba-group-head {
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
      color: var(--jba-muted); margin-bottom: 10px; line-height: 1.4;
    }
    .jba-group.is-ok .jba-group-head { color: var(--jba-ok-text); }
    .jba-group.is-warn .jba-group-head { color: var(--jba-warn-text); }
    .jba-group-head .jba-sep { color: var(--jba-muted); opacity: .45; margin: 0 6px; font-weight: 400; }
    .jba-eta { font-size: 12.5px; color: var(--jba-muted); margin-bottom: 10px; }
    .jba-eta strong { color: var(--jba-ink); font-weight: 600; }
    .jba-gline { margin-bottom: 8px; }
    .jba-track { margin-bottom: 12px; }
    .jba-track-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--jba-muted); margin-bottom: 6px; }
    .jba-track-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px 0; }
    .jba-track-no { font-family: var(--jba-mono); font-size: 12.5px; color: var(--jba-ink); word-break: break-all; }
    .jba-track-copy {
      font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; line-height: 1.3;
      border: 1px solid var(--jba-line); background: var(--jba-surface); color: var(--jba-blue);
      border-radius: 6px; padding: 3px 9px;
    }
    .jba-track-copy:hover { background: #fff; border-color: var(--jba-blue); }
    .jba-track-copy.copied { color: var(--jba-ok-text); border-color: var(--jba-ok); background: #fff; }
    .jba-track-link { font-size: 11px; font-weight: 600; color: var(--jba-blue); text-decoration: none; }
    .jba-track-link:hover { text-decoration: underline; }
    .jba-items { display: flex; flex-direction: column; }
    .jba-item { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; border-top: 1px solid var(--jba-line); }
    .jba-item:first-child { border-top: none; padding-top: 2px; }
    .jba-item.is-sub { padding-left: 18px; }
    .jba-item-top { display: flex; align-items: center; gap: 10px; }
    .jba-sku {
      flex: 0 1 auto; min-width: 0; font-family: var(--jba-mono); font-size: 13px; font-weight: 700;
      color: #333; overflow-wrap: anywhere;
    }
    .jba-name { color: var(--jba-ink); overflow-wrap: anywhere; line-height: 1.45; }
    .jba-qty { flex: 0 0 auto; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--jba-muted); white-space: nowrap; }
    .jba-subline { font-size: 12px; color: var(--jba-muted); margin-top: 2px; }
    .jba-tag {
      display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .04em; color: var(--jba-warn-text); background: #fff4e5;
      border: 1px solid #f3d9ac; border-radius: 4px; padding: 0 5px; margin-left: 6px;
      vertical-align: middle;
    }
    .jba-eta-flag { margin-top: 5px; display: inline-flex; align-items: center; gap: 6px; }
    .jba-eta-tag {
      font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
      color: #fff; background: var(--jba-blue); border-radius: 4px; padding: 1px 6px;
    }
    .jba-eta-val { font-size: 13.5px; font-weight: 700; color: var(--jba-blue-dark); }
    .jba-eta-tbd { font-weight: 600; color: var(--jba-muted); }
    .jba-note {
      font-size: 13px; font-weight: 500; color: var(--jba-ink); line-height: 1.5;
      background: #eef3f8; border: 1px solid #a9c6e6; border-radius: 12px;
      border-bottom-left-radius: 4px; padding: 9px 12px;
    }
    .jba-reply > .jba-note + * { margin-top: 10px; }
    .jba-items-more[data-collapsed="1"] {
      max-height: 28px; overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
      mask-image: linear-gradient(to bottom, #000 35%, transparent);
    }
    .jba-more-btn {
      display: block; width: 100%; margin-top: 6px; padding: 6px 10px;
      font-family: inherit; font-size: 12px; font-weight: 600; color: var(--jba-blue);
      background: none; border: 1px solid var(--jba-line); border-radius: 6px; cursor: pointer;
    }
    .jba-more-btn:hover { background: var(--jba-surface); border-color: var(--jba-blue); }
    .jba-status {
      display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .04em; border-radius: 4px; padding: 0 5px; vertical-align: middle;
      border: 1px solid transparent; white-space: nowrap;
    }
    .jba-status.is-ok { color: var(--jba-ok-text); background: #e7f5ec; border-color: #b7e0c6; }
    .jba-status.is-warn { color: var(--jba-warn-text); background: #fff4e5; border-color: #f3d9ac; }
    .jba-status.is-muted { color: var(--jba-muted); background: var(--jba-surface); border-color: var(--jba-line); }
    .jba-kit-parts { margin-top: 2px; }
    .jba-item.jba-part { border-top: none; padding: 4px 0 4px 20px; position: relative; }
    .jba-item.jba-part::before {
      content: "\2514"; position: absolute; left: 4px; top: 6px;
      color: var(--jba-muted); font-size: 12px; line-height: 1;
    }
    .jba-part-btn { margin-left: 20px; width: auto; }
    .jba-track-btn { width: auto; margin-top: 2px; padding: 3px 8px; font-size: 11px; }
    .jba-ship-check { color: var(--jba-ok); font-weight: 700; margin-right: 5px; }
    .jba-ship-date { color: var(--jba-ink); font-weight: 700; }
    .jba-muted-row .jba-name { color: var(--jba-muted); }
    .jba-seg-count { color: var(--jba-muted); font-weight: 600; }
    .jba-items-more.jba-more-hide[data-collapsed="1"] { max-height: 0; -webkit-mask-image: none; mask-image: none; }
    .jba-items-more.jba-more-hide[data-collapsed="0"] { max-height: none; }

    /* ---- Dock: the composer, or the order verification form ----
       Shrinkable + scrollable so a short visible area (keyboard up, landscape) scrolls the
       dock instead of clipping it; the message body gives up its space first (basis 0). */
    .jba-dock {
      background: #fff; border-top: 1px solid var(--jba-line);
      flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    }
    .jba-composer { padding: 10px 12px 8px; }
    .jba-compose-row { display: flex; align-items: flex-end; gap: 8px; }
    /* The message box: an optional product/category pill in front of the text. The border and
       focus ring are on the box, so the pill sits inside it. The pill floats over the start of
       the textarea's first line and the script indents that line by the pill's width
       (text-indent), so the text and placeholder start after the pill while every later line
       wraps at the box's full width, like an inline token. The textarea's min-height plus the
       box's 2px border matches the Send button, so the box is never shorter than one line even
       before autoGrow has measured it (or if a storefront rule sets textarea heights). autoGrow
       turns the scrollbar on only once the text reaches max-height. */
    .jba-box {
      position: relative; overflow: hidden; flex: 1; min-width: 0; display: flex;
      border: 1px solid var(--jba-line); border-radius: 10px; background: #fff;
    }
    .jba-box:focus-within { border-color: var(--jba-blue); box-shadow: 0 0 0 3px rgba(0,102,204,.15); }
    .jba-input {
      flex: 1; min-width: 0; resize: none; min-height: 38px; max-height: 110px; overflow-y: hidden;
      padding: 9px 11px; font-family: inherit; font-size: 14px; line-height: 1.4;
      border: none; border-radius: 10px; color: var(--jba-ink); background: transparent;
    }
    .jba-input:focus { outline: none; }
    .jba-input:disabled { background: var(--jba-surface); }
    /* Previous-drop markup (no .jba-box): for up to an hour after a push, cached pages pair the
       old markup with this CSS, so the bare textarea keeps its own border and focus ring. */
    .jba-compose-row > .jba-input {
      min-height: 40px; border: 1px solid var(--jba-line); background: #fff;
    }
    .jba-compose-row > .jba-input:focus { border-color: var(--jba-blue); box-shadow: 0 0 0 3px rgba(0,102,204,.15); }
    .jba-pill {
      position: absolute; top: 9px; left: 8px; z-index: 1; max-width: 55%;
      display: inline-flex; align-items: center; gap: 2px;
      padding: 0 1px 0 8px; border-radius: 999px;
      background: var(--jba-surface); border: 1px solid var(--jba-line);
      font-size: 12px; font-weight: 600; line-height: 18px; color: var(--jba-blue-dark);
    }
    .jba-pill[hidden] { display: none; }
    .jba-pill-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .jba-pill-x {
      flex: 0 0 auto; width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%;
      background: none; color: var(--jba-muted); font-family: inherit; font-size: 14px;
      line-height: 18px; cursor: pointer;
    }
    .jba-pill-x:hover { background: var(--jba-line); color: var(--jba-ink); }
    /* Saved-vehicle banner over the message box ("Asking about your 1967 Beetle Sedan" + ×). */
    .jba-fitbar {
      display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 3px 3px 3px 10px;
      border: 1px solid var(--jba-line); border-radius: 8px; background: var(--jba-surface);
      font-size: 12px; line-height: 18px; color: var(--jba-muted);
    }
    .jba-fitbar[hidden] { display: none; }
    .jba-fitbar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .jba-fitbar-text strong { color: var(--jba-ink); font-weight: 600; }
    .jba-fitbar-x {
      flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%;
      background: none; color: var(--jba-muted); font-family: inherit; font-size: 15px;
      line-height: 20px; cursor: pointer;
    }
    .jba-fitbar-x:hover { background: var(--jba-line); color: var(--jba-ink); }
    .jba-send {
      flex: 0 0 auto; height: 40px; padding: 0 14px; border: none; border-radius: 10px;
      background: var(--jba-blue); color: #fff; font-family: inherit; font-size: 14px;
      font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    .jba-send:hover:not(:disabled) { background: var(--jba-blue-dark); }
    .jba-send:disabled { opacity: .55; cursor: not-allowed; }
    .jba-meta {
      display: flex; justify-content: space-between; align-items: center; gap: 8px;
      margin-top: 6px; font-size: 11px; color: var(--jba-muted);
    }
    .jba-notice { flex: 1; min-width: 0; }
    .jba-count { white-space: nowrap; }
    .jba-count.is-near { color: var(--jba-warn-text); }
    .jba-count.is-over { color: var(--jba-danger); font-weight: 600; }
    .jba-linkbtn {
      background: none; border: none; padding: 0; font-family: inherit; font-size: 11px;
      font-weight: 600; color: var(--jba-blue); cursor: pointer; white-space: nowrap;
    }
    .jba-linkbtn:hover { text-decoration: underline; }
    .jba-ended { padding: 14px 16px; text-align: center; }

    .jba-form { padding: 14px 16px; }
    .jba-form-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .jba-form-title { font-size: 13px; font-weight: 700; }
    .jba-field { margin-bottom: 10px; }
    .jba-field label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--jba-muted); margin-bottom: 4px; }
    .jba-field input {
      width: 100%; padding: 9px 11px; font-size: 14px; font-family: inherit;
      border: 1px solid var(--jba-line); border-radius: 8px; color: var(--jba-ink); background: #fff;
    }
    .jba-field input:focus { outline: none; border-color: var(--jba-blue); box-shadow: 0 0 0 3px rgba(0,102,204,.15); }
    .jba-field .jba-err { color: var(--jba-danger); font-size: 11px; margin-top: 3px; display: none; }
    .jba-field.invalid input { border-color: var(--jba-danger); }
    .jba-field.invalid .jba-err { display: block; }
    .jba-row { display: flex; gap: 10px; }
    .jba-row .jba-field { flex: 1; min-width: 0; }
    .jba-submit {
      width: 100%; padding: 11px; margin-top: 2px;
      background: var(--jba-blue); color: #fff; border: none; border-radius: 8px;
      font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
      transition: background .15s ease;
    }
    .jba-submit:hover:not(:disabled) { background: var(--jba-blue-dark); }
    .jba-submit:disabled { opacity: .55; cursor: not-allowed; }

    /* Honeypot: off-screen, unfocusable; people never fill it, form-filling bots do. */
    .jba-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

    #jba-root [hidden] { display: none !important; }

    /* ---- Touch: inputs under 16px make iOS zoom the page on focus ---- */
    @media (max-width: 900px), (pointer: coarse) {
      .jba-field input, .jba-input { font-size: 16px; }
    }

    /* ---- Floating panel follows the on-screen keyboard (see "Mobile viewport" in the script) ---- */
    #jba-root[data-jba-vv][data-jba-state="open"] {
      top: calc(var(--jba-vvt) + var(--jba-vvh) - 20px);
      bottom: auto;
      transform: translateY(-100%);
    }
    #jba-root[data-jba-vv] .jba-panel { max-height: calc(var(--jba-vvh) - 40px); }

    /* ---- Tablet ---- */
    @media (max-width: 900px) and (min-width: 601px) {
      .jba-panel { width: 400px; height: calc(100vh - 40px); height: calc(100dvh - 40px); }
      #jba-root[data-jba-vv] .jba-panel { height: calc(var(--jba-vvh) - 40px); }
    }
    /* ---- Phone: full screen. KEEP IN SYNC with PHONE_MQ in the script. ---- */
    @media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
      #jba-root { right: 0; bottom: 0; }
      #jba-root[data-jba-state="open"] {
        top: 0; left: 0; right: 0; bottom: auto;
        height: 100vh;
        height: 100dvh;
        transform: none;
      }
      #jba-root[data-jba-vv][data-jba-state="open"] {
        top: 0; bottom: auto;
        height: var(--jba-vvh);
        transform: translateY(var(--jba-vvt));
      }
      #jba-root[data-jba-state="open"] .jba-panel {
        width: 100%; height: 100%; max-height: none; border-radius: 0; border: none;
      }
      #jba-root .jba-launcher {
        position: fixed;
        right: calc(18px + env(safe-area-inset-right, 0px));
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
      }
      #jba-root .jba-header {
        padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
                 10px max(16px, env(safe-area-inset-left, 0px));
      }
      #jba-root .jba-body {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
      }
      #jba-root .jba-composer, #jba-root .jba-form {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
      }
      #jba-root .jba-min { min-height: 44px; margin-right: -8px; }
      /* Typing: the keyboard takes half the screen; hand the header's spare height to the dock. */
      #jba-root .jba-panel:has(.jba-dock input:focus, .jba-dock textarea:focus) .jba-sub { display: none; }
      #jba-root .jba-panel:has(.jba-dock input:focus, .jba-dock textarea:focus) .jba-header {
        padding-top: max(2px, env(safe-area-inset-top, 0px)); padding-bottom: 2px;
      }
      #jba-root .jba-panel:has(.jba-dock input:focus, .jba-dock textarea:focus) .jba-composer,
      #jba-root .jba-panel:has(.jba-dock input:focus, .jba-dock textarea:focus) .jba-form { padding-bottom: 10px; }
    }
    @media (prefers-reduced-motion: reduce) {
      #jba-root .jba-launcher, #jba-root .jba-submit { transition: none; }
      /* The Beetle parks: no shake, spin, exhaust or speed lines. The verbs still change. */
      .jba-bug .jbb-bounce, .jba-bug .jbb-wheel, .jba-thinking-verb.is-new { animation: none; }
      .jba-bug .jbb-puff, .jba-bug .jbb-streak { display: none; }
    }