/* C&L Fuel chat — purple brand (0.3.2; 0.3.5: theme-proof button selectors, mobile launcher in the theme's bottom bar, full-screen mobile sheet).
   Very Peri #6667AB = primary (white text, 5.13:1). Charcoal #2A2627 = text (14.9:1 on white).
   Tints behind text always carry charcoal text. Neon green #C7EC53 is reserved for charcoal/black
   backgrounds only and is not used in this widget. */
.clf-chat-root{--clf-purple:#6667AB;--clf-purple-dark:#4F5090;--clf-charcoal:#2A2627;--clf-tint:#F3F3F8;--clf-line:#DCDCEA;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;color:var(--clf-charcoal);box-sizing:border-box;z-index:99998}
.clf-chat-root *{box-sizing:border-box}
.clf-chat-root [hidden]{display:none!important}
.clf-icon{flex-shrink:0;display:block}
.clf-chat-root button.clf-launcher{position:fixed;bottom:22px;right:22px;z-index:99998;display:inline-flex;align-items:center;gap:8px;background:var(--clf-purple);color:#fff;border:0;border-radius:50px;padding:13px 20px 13px 16px;box-shadow:0 7px 25px rgba(42,38,39,.28);font-weight:700;font-size:15px;line-height:1;cursor:pointer}
.clf-chat-root button.clf-launcher:hover,.clf-chat-root button.clf-launcher:focus{background:var(--clf-purple-dark);color:#fff}
.clf-l-short{display:none}
.clf-chat-root button.clf-launcher:focus-visible,#mobile-action-bar button.clf-launcher:focus-visible,.clf-chat-root button:focus-visible,.clf-chat-root a:focus-visible{outline:3px solid var(--clf-charcoal);outline-offset:2px}
.clf-chat-window{position:fixed;bottom:83px;right:22px;width:min(390px,calc(100vw - 32px));height:min(600px,calc(100dvh - 105px));background:#fff;border:1px solid var(--clf-line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 45px rgba(42,38,39,.28);z-index:99999}
.clf-chat-header{background:var(--clf-purple);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.clf-header-title{display:flex;align-items:center;gap:10px}
.clf-chat-header strong,.clf-chat-header small{display:block;color:#fff}.clf-chat-header strong{font-size:16px}.clf-chat-header small{font-size:12px;margin-top:2px}
.clf-chat-root button.clf-close{border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer;line-height:1;padding:0 5px;border-radius:8px}
.clf-chat-root button.clf-close:hover,.clf-chat-root button.clf-close:focus{background:rgba(255,255,255,.18);color:#fff}
.clf-chat-messages{padding:14px;background:#fff;overflow-y:auto;min-height:100px;flex:1 1 auto;display:flex;flex-direction:column;gap:9px}
.clf-bubble{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;border-radius:13px;padding:11px 12px;max-width:92%;font-size:14px}
.clf-bubble-assistant{align-self:flex-start;background:var(--clf-tint);color:var(--clf-charcoal);border:1px solid #E6E6F0}
.clf-bubble-user{align-self:flex-end;background:var(--clf-purple);color:#fff}
.clf-chat-actions{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--clf-line);flex-wrap:wrap;flex-shrink:0}
.clf-chat-actions button{color:var(--clf-purple-dark)!important;background:#fff!important;border:1px solid var(--clf-purple)!important;border-radius:8px!important;padding:7px 9px!important;cursor:pointer;font-size:12px!important;font-weight:600!important;line-height:1.2!important}
.clf-chat-actions button:hover{background:var(--clf-purple)!important;color:#fff!important}
.clf-message-form{display:flex;gap:7px;padding:9px 12px;border-top:1px solid var(--clf-line);flex-shrink:0;margin:0!important}
.clf-message-form input{min-width:0;flex:1;padding:11px;border:1px solid #B9B9CC;border-radius:9px;font-size:14px;margin:0!important;background:#fff!important;color:var(--clf-charcoal)}
.clf-chat-root .clf-message-form button{display:flex;align-items:center;justify-content:center;background:var(--clf-purple);border:0;border-radius:9px;color:#fff;min-width:42px;cursor:pointer}
.clf-chat-root .clf-message-form button:hover,.clf-chat-root .clf-message-form button:focus{background:var(--clf-purple-dark)}
.clf-chat-root footer{text-align:center;padding:7px 5px;background:#fff;color:var(--clf-charcoal);font-size:12px;border-top:1px solid var(--clf-line);flex-shrink:0}
.clf-chat-root footer a{color:var(--clf-purple-dark);text-decoration:underline;font-weight:600}
.clf-chat-form-wrap{overflow-y:auto;flex:1 1 auto;min-height:0;padding:14px 15px;background:#fff}
/* Form open: the conversation shrinks to a short strip so the form starts right under it (no empty gap). */
.clf-form-open .clf-chat-messages{flex:0 0 auto;min-height:0;max-height:22%;padding:10px 14px}
.clf-oil-form{margin:0!important;display:flex;flex-direction:column;gap:9px}
.clf-oil-form h3{color:var(--clf-charcoal);font-size:18px;line-height:1.2;margin:0!important}.clf-oil-form p{font-size:12px;line-height:1.5;margin:2px 0 6px!important;color:var(--clf-charcoal)}
.clf-oil-form label{font-size:12px;font-weight:600;display:flex;flex-direction:column;gap:4px;color:var(--clf-charcoal)}
.clf-oil-form input:not([type=checkbox]),.clf-oil-form select,.clf-oil-form textarea{width:100%;padding:9px!important;border:1px solid #B9B9CC!important;background:#fff!important;color:var(--clf-charcoal)!important;border-radius:7px!important;font-size:14px!important;min-height:34px!important;margin:0!important}
.clf-oil-form input:focus,.clf-oil-form select:focus,.clf-oil-form textarea:focus,.clf-message-form input:focus{outline:2px solid var(--clf-purple);outline-offset:0;border-color:var(--clf-purple)!important}
.clf-oil-form textarea{resize:vertical}.clf-two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.clf-oil-form .clf-consent{flex-direction:row;align-items:flex-start;font-weight:400;font-size:12px;gap:8px;line-height:1.4}
.clf-consent input{margin:2px 0 0;accent-color:var(--clf-purple)}.clf-trap{position:absolute;left:-10000px;opacity:0;pointer-events:none}
.clf-chat-root .clf-form-buttons{display:flex;gap:10px}.clf-form-buttons button{cursor:pointer;border:1px solid var(--clf-purple);border-radius:7px;padding:10px 12px;background:#fff;color:var(--clf-purple-dark);font-weight:600}
.clf-chat-root .clf-form-buttons button[type=submit],.clf-chat-root .clf-form-buttons .clf-send-btn{background:var(--clf-purple);color:#fff;flex:1}.clf-form-buttons button[type=submit]:hover,.clf-form-buttons .clf-send-btn:hover{background:var(--clf-purple-dark)}
.clf-chat-root .clf-form-buttons button:disabled{opacity:.6;cursor:default}
.clf-form-status{min-height:14px;font-size:12px;color:#9C2F1D}.clf-sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.clf-step-details,.clf-step-review{display:flex;flex-direction:column;gap:9px}
.clf-oil-form .clf-summary{background:var(--clf-tint);border:1px solid var(--clf-line);border-radius:8px;padding:10px 12px!important;font-size:13px!important;line-height:1.5;color:var(--clf-charcoal);margin:0!important}
.clf-turnstile:empty{display:none}.clf-turnstile-chat{padding:0 12px}
.clf-oil-form .clf-hint{font-size:11.5px;color:#4a4a5e;margin:0!important}.clf-oil-form .clf-last4-field[hidden]{display:none}.clf-oil-form .clf-last4-field input{max-width:110px;letter-spacing:.2em;text-align:center}

/* Typing indicator (shown only while the AI chat is answering) */
.clf-typing{display:inline-flex;align-items:center;gap:4px;min-width:46px}
.clf-typing span{width:7px;height:7px;border-radius:50%;background:#7a8594;display:inline-block;animation:clf-typing 1.2s infinite ease-in-out}
.clf-typing span:nth-child(2){animation-delay:.15s}
.clf-typing span:nth-child(3){animation-delay:.3s}
@keyframes clf-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.clf-typing span{animation:none;opacity:.7}}

/* ===== 0.3.5: mobile launcher + full-screen mobile sheet ===== */
/* Launcher in the theme's sticky bottom bar (#mobile-action-bar). chat.js moves the button into the bar as a 4th equal slot when
   all four slots fit (labels on one line, each slot >= 44px wide); otherwise it stays in the chat root as a compact pill docked above
   the bar (bottom = measured bar height + 10px, variable --clf-bar-h). With no bar it stays the floating button. Literal colours here:
   once moved, the button is outside .clf-chat-root and does not inherit its variables. Neon #C7EC53 is used only on the bar's #111 ground. */
#mobile-action-bar.clf-has-chat{grid-template-columns:repeat(4,minmax(0,1fr))}
#mobile-action-bar button.clf-launcher.clf-in-bar{position:static;inset:auto;z-index:auto;width:auto;min-width:0;min-height:52px;padding:0 2px;margin:0;border:0;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:#C7EC53;color:#111;box-shadow:none;font:700 14px/1 'Barlow Semi Condensed','Arial Narrow',system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;cursor:pointer}
#mobile-action-bar button.clf-launcher.clf-in-bar:hover,#mobile-action-bar button.clf-launcher.clf-in-bar:focus{background:#B3D63F;color:#111}
#mobile-action-bar button.clf-launcher.clf-in-bar svg{width:22px;height:22px}
#mobile-action-bar button.clf-launcher.clf-in-bar .clf-l-full{display:none}
#mobile-action-bar button.clf-launcher.clf-in-bar .clf-l-short{display:inline}
#mobile-action-bar button.clf-launcher.clf-in-bar:focus-visible{outline:2px solid #fff;outline-offset:2px}
.clf-chat-root button.clf-launcher.clf-pill{bottom:calc(var(--clf-bar-h,0px) + 10px);right:12px;min-height:44px;padding:11px 16px 11px 13px;background:#111;color:#fff;border:2px solid #C7EC53;box-shadow:0 6px 20px rgba(17,17,17,.35)}
.clf-chat-root button.clf-launcher.clf-pill:hover,.clf-chat-root button.clf-launcher.clf-pill:focus{background:#2A2627;color:#fff}
.clf-chat-root button.clf-launcher.clf-pill .clf-icon{color:#C7EC53}
.clf-chat-root button.clf-launcher.clf-pill .clf-l-full{display:none}
.clf-chat-root button.clf-launcher.clf-pill .clf-l-short{display:inline}
/* One-time attention pulse (class added once per browser session by chat.js; none for reduced motion) */
#mobile-action-bar button.clf-launcher.clf-pulse,.clf-chat-root button.clf-launcher.clf-pulse{animation:clf-pulse 1.4s ease-out .6s 2}
@keyframes clf-pulse{0%{box-shadow:0 0 0 0 rgba(199,236,83,.75)}100%{box-shadow:0 0 0 14px rgba(199,236,83,0)}}
@media (prefers-reduced-motion:reduce){#mobile-action-bar button.clf-launcher.clf-pulse,.clf-chat-root button.clf-launcher.clf-pulse{animation:none}}
/* Floating button with no bar: keep clear of the iPhone home indicator */
.clf-chat-root button.clf-launcher:not(.clf-pill){bottom:calc(22px + env(safe-area-inset-bottom,0px))}
/* Tablet widths where the theme bar still shows (641-767px): the floating window sits above the bar */
.clf-chat-root[data-clf-bar] .clf-chat-window{bottom:calc(var(--clf-bar-h,0px) + 12px);height:min(600px,calc(100dvh - var(--clf-bar-h,0px) - 40px))}
/* Scroll lock while the mobile sheet is open (chat.js sets body top to -scrollY and restores it on close) */
html.clf-scroll-lock{overflow:hidden!important}
html.clf-scroll-lock body{position:fixed!important;left:0;right:0;width:100%;overflow:hidden!important}
@media(max-width:640px){
  .clf-chat-root button.clf-launcher:not(.clf-pill){right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  /* Full-screen sheet. chat.js sets top/height inline from window.visualViewport so the header stays at the top and the input row sits
     just above the keyboard; these are the no-JS / no-visualViewport defaults (100vh, then 100dvh where supported). */
  .clf-chat-root .clf-chat-window,.clf-chat-root[data-clf-bar] .clf-chat-window{position:fixed;top:0;left:0;right:0;bottom:auto;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;background:#fff;box-shadow:none;z-index:100002;overscroll-behavior:contain}
  .clf-chat-header{padding:calc(10px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 10px calc(14px + env(safe-area-inset-left,0px))}
  .clf-chat-root button.clf-close{width:44px;height:44px;font-size:32px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0}
  .clf-chat-messages{min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .clf-chat-actions{padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px))}
  .clf-chat-root .clf-message-form{display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;padding:9px calc(12px + env(safe-area-inset-right,0px)) 9px calc(12px + env(safe-area-inset-left,0px))}
  .clf-chat-root .clf-message-form input{flex:1 1 auto;min-width:0;width:auto;min-height:44px;font-size:16px}
  .clf-chat-root .clf-message-form button{flex:0 0 48px;width:48px;min-width:48px;min-height:44px}
  .clf-chat-root footer{padding-bottom:calc(7px + env(safe-area-inset-bottom,0px))}
  .clf-chat-window.clf-kb footer{padding-bottom:7px}
  .clf-chat-root .clf-oil-form input:not([type=checkbox]),.clf-chat-root .clf-oil-form select,.clf-chat-root .clf-oil-form textarea{font-size:16px!important}
  .clf-chat-form-wrap{padding:12px calc(12px + env(safe-area-inset-right,0px)) 12px calc(12px + env(safe-area-inset-left,0px))}
  /* On phones the form takes the whole body; the conversation is hidden while it is open. */
  .clf-form-open .clf-chat-messages{display:none}
}

/* 0.4.0: quote buttons, quote notes and the "Email me this quote" form */
.clf-bubble-actions{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.clf-bubble-actions button{color:var(--clf-purple-dark)!important;background:#fff!important;border:1px solid var(--clf-purple)!important;border-radius:8px!important;padding:7px 10px!important;cursor:pointer;font-size:12px!important;font-weight:600!important;line-height:1.2!important}
.clf-bubble-actions button:hover{background:var(--clf-purple)!important;color:#fff!important}
.clf-bubble-actions a.clf-order-link{display:inline-block;color:var(--clf-purple-dark)!important;background:#fff!important;border:1px solid var(--clf-purple)!important;border-radius:8px!important;padding:7px 10px!important;font-size:12px!important;font-weight:600!important;line-height:1.2!important;text-decoration:none!important}
.clf-bubble-actions a.clf-order-link:hover{background:var(--clf-purple)!important;color:#fff!important}
.clf-oil-form .clf-quote-note,.clf-oil-form .clf-quote-review{background:var(--clf-tint);border:1px solid var(--clf-line);border-radius:8px;padding:8px 10px!important;font-size:12.5px!important;line-height:1.45;margin:0!important}
.clf-oil-form .clf-quote-note[hidden],.clf-oil-form .clf-quote-review[hidden]{display:none}
.clf-followup-wrap{overflow-y:auto;flex:1 1 auto;min-height:0;padding:14px 15px;background:#fff}
.clf-followup-form{margin:0!important;display:flex;flex-direction:column;gap:9px}
.clf-followup-form h3{color:var(--clf-charcoal);font-size:18px;line-height:1.2;margin:0!important}.clf-followup-form p{font-size:12px;line-height:1.5;margin:2px 0 6px!important;color:var(--clf-charcoal)}
.clf-followup-form label{font-size:12px;font-weight:600;display:flex;flex-direction:column;gap:4px;color:var(--clf-charcoal)}
.clf-followup-form input:not([type=checkbox]){width:100%;padding:9px!important;border:1px solid #B9B9CC!important;background:#fff!important;color:var(--clf-charcoal)!important;border-radius:7px!important;font-size:14px!important;min-height:34px!important;margin:0!important}
.clf-followup-form input:focus{outline:2px solid var(--clf-purple);outline-offset:0;border-color:var(--clf-purple)!important}
.clf-followup-form .clf-consent{flex-direction:row;align-items:flex-start;font-weight:400;font-size:12px;gap:8px;line-height:1.4}
.clf-followup-form .clf-hint{font-size:11.5px;color:#4a4a5e;margin:0!important}
.clf-followup-status{min-height:14px;font-size:12px;color:#9C2F1D}
@media (max-width:640px){.clf-chat-root .clf-followup-form input:not([type=checkbox]){font-size:16px!important}.clf-followup-wrap{padding:12px calc(12px + env(safe-area-inset-right,0px)) 12px calc(12px + env(safe-area-inset-left,0px))}}