/* chadjgardner.com chat widget, on every page. Runs with /assets/chat.js;
   bump the ?v= on every page when either changes. The colors are the site's
   own tokens, copied here so the widget looks the same on pages that do not
   define them. */
.cw{--cw-navy:oklch(.49 .165 264);--cw-ink:oklch(.27 .04 266);--cw-ink-2:oklch(.4 .03 266);--cw-quiet:oklch(.53 .022 266);--cw-muted:oklch(.64 .016 266);--cw-rule:oklch(.875 .012 95);--cw-on-navy-1:oklch(.95 .012 92);--cw-on-navy-2:oklch(.95 .012 92 / .8);font-family:'Geist',system-ui,-apple-system,sans-serif;line-height:1.4;text-align:left}
.cw *,.cw *::before,.cw *::after{box-sizing:border-box}
.cw button,.cw input{font-family:inherit}
/* The consent box as a chat message: the form's own rules, restated for pages
   that do not carry the form's styles. */
.cw .consent{display:grid;gap:14px}
.cw .consent-item{display:grid;grid-template-columns:auto 1fr;align-items:start}
.cw .consent-item input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:2px 0 0;padding:0;border:2px solid var(--cw-navy);border-radius:5px;background:#fff;cursor:pointer;position:relative}
.cw .consent-item input[type=checkbox]:checked{background:var(--cw-navy)}
.cw .consent-item input[type=checkbox]:checked:after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cw .consent-item label{display:block;margin:0;cursor:pointer}
.cw .consent-item label a{color:var(--cw-navy);text-decoration:underline;text-underline-offset:2px}
.cw .consent-tag{display:block}
.cw .form-status{font-size:13px;padding:10px 12px;border:1.5px dashed #b3261e;color:#b3261e;display:none}
.cw .form-status.show{display:block}
/* --- chat widget (Chad, 2026-09-30) ---------------------------------------
   The form stays in the hero for everyone. The chat lives behind a launcher
   in the bottom-right corner, where visitors expect one; a few seconds in, its
   first two messages pop up beside it. On a phone the open chat fills the
   screen. --- */
.cw{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.cw > *{pointer-events:auto}
.cw[hidden],.cw.cw-quiet{display:none}
.cw-launch{position:relative;display:grid;place-items:center;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:var(--cw-navy);color:#fff;cursor:pointer;box-shadow:0 8px 24px oklch(.27 .04 266 / .32);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.cw-launch svg{width:28px;height:28px;fill:currentColor}
.cw-launch .i-close{display:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.cw.is-open .cw-launch .i-chat{display:none}
.cw.is-open .cw-launch .i-close{display:block}
.cw-launch.nudge{animation:cwnudge .5s cubic-bezier(.2,.7,.2,1)}
@keyframes cwnudge{0%,100%{transform:scale(1)}40%{transform:scale(1.12)}}
.cw-badge{position:absolute;top:-3px;right:-3px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:2px solid #fff;border-radius:11px;background:#e5484d;color:#fff;font:600 12px/1 'Geist Mono',ui-monospace,monospace}
.cw-badge[hidden]{display:none}
.cw-peek{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:min(300px,calc(100vw - 32px))}
.cw-peek[hidden]{display:none}
.cw-peek-msgs{display:flex;flex-direction:column;align-items:flex-end;gap:6px;cursor:pointer}
.cw-peek .cb{max-width:100%;background:#fff;color:var(--cw-ink);border:1px solid var(--cw-rule);border-radius:18px;border-bottom-right-radius:6px;box-shadow:0 8px 24px oklch(.27 .04 266 / .16)}
.cw-peek-x{position:absolute;top:-10px;left:-10px;z-index:1;display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid var(--cw-rule);border-radius:50%;background:#fff;color:var(--cw-ink-2);cursor:pointer;box-shadow:0 2px 6px oklch(.27 .04 266 / .15)}
.cw-peek-x svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.cw-panel{display:flex;flex-direction:column;width:380px;height:min(640px,calc(100vh - 110px))}
.cw-panel[hidden]{display:none}
.cw-panel .lp-chat-box{flex:1;min-height:0;display:flex;flex-direction:column}
.cw-panel .lp-chat-log{flex:1;max-height:none}
.cw-panel .lp-chat-alt{margin:8px 4px 0;text-align:right}
.lp-chat-close{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--cw-on-navy-1);cursor:pointer}
.lp-chat-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media(hover:hover){.lp-chat-close:hover{background:oklch(1 0 0 / .12)}}
@media(max-width:560px){
  .cw-peek{max-width:250px}
  .cw-peek .cb{font-size:14px;padding:9px 12px}
  .cw-launch{width:56px;height:56px}
  .cw-panel{position:fixed;inset:0;width:auto;height:100dvh;background:#fff}
  .cw-panel .lp-chat-box{border:0;border-radius:0;box-shadow:none}
  .cw-panel .lp-chat-alt{margin:0;padding:8px 14px 12px;background:#fff}
  .cw.is-open .cw-launch{display:none}
  html.cw-lock,html.cw-lock body{overflow:hidden}
}
/* Styled after HubSpot's chat (Chad, 2026-09-30): soft rounded panel, navy
   header with who is talking, grey assistant bubbles, navy visitor bubbles,
   reply buttons stacked on the visitor's side, round send button. */
.lp-chat-box{border:1px solid var(--cw-rule);border-radius:18px;background:#fff;box-shadow:0 10px 32px oklch(.27 .04 266 / .14),0 2px 6px oklch(.27 .04 266 / .06);overflow:hidden}
.lp-chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--cw-navy);color:var(--cw-on-navy-1)}
.lp-chat-av{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--cw-navy);font-family:var(--mono);font-size:12px;font-weight:600}
.lp-chat-av:after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#3fbf6f;border:2px solid var(--cw-navy)}
.lp-chat-who{display:grid;gap:1px;line-height:1.2}
.lp-chat-who strong{font-size:1rem;font-weight:600;color:#fff}
.lp-chat-who span{font-size:.8rem;color:var(--cw-on-navy-2)}
.lp-chat-log{display:flex;flex-direction:column;gap:6px;padding:16px 14px;max-height:min(50vh,420px);overflow-y:auto;overscroll-behavior:contain;background:#fff}
.cb{max-width:85%;padding:10px 14px;border-radius:18px;font-size:15.5px;line-height:1.45;overflow-wrap:anywhere}
.cb-bot{align-self:flex-start;background:oklch(.955 .006 266);color:var(--cw-ink);border-bottom-left-radius:6px}
.cb-me{align-self:flex-end;background:var(--cw-navy);color:#fff;border-bottom-right-radius:6px}
.cb-me + .cb-bot,.cb-bot + .cb-me,.lp-chat-inline + .cb-bot{margin-top:6px}
.cb-typing{display:flex;gap:4px;padding:13px 16px}
.cb-typing i{width:7px;height:7px;border-radius:50%;background:var(--cw-muted);animation:cbdot 1s infinite ease-in-out}
.cb-typing i:nth-child(2){animation-delay:.15s}.cb-typing i:nth-child(3){animation-delay:.3s}
@keyframes cbdot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
/* Reply buttons: one per line, on the visitor's side. */
.lp-chat-chips{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:0 14px 16px;background:#fff}
.lp-chat-chips[hidden]{display:none}
.lp-chat-inline{padding:4px 0 0}
.lp-chat-chips button,.lp-chat-go{font:inherit;font-size:15px;font-weight:500;padding:8px 16px;border:1.5px solid var(--cw-navy);border-radius:999px;background:#fff;color:var(--cw-navy);cursor:pointer;text-align:right;transition:background .15s cubic-bezier(.2,.7,.2,1),color .15s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.lp-chat-chips button:hover,.lp-chat-go:hover{background:var(--cw-navy);color:#fff}}
.lp-chat-go{align-self:flex-end}
.lp-chat-go:disabled{opacity:.6;cursor:default}
.lp-chat-form{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px;border-top:1px solid var(--cw-rule);background:#fff}
.lp-chat-form[hidden]{display:none}
/* 16px or iOS zooms the page when the field is tapped. */
.lp-chat-form input{flex:1;min-width:0;font:inherit;font-size:16px;padding:8px 0;border:0;background:transparent;color:var(--cw-ink);outline:none}
.lp-chat-form input::placeholder{color:var(--cw-muted)}
.lp-chat-send{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:var(--cw-navy);color:#fff;cursor:pointer}
.lp-chat-send svg{width:18px;height:18px;fill:currentColor}
.lp-chat-form button:disabled,.lp-chat-form input:disabled{opacity:.45}
/* The opt-in is a message from the assistant: the same checkbox and the same
   wording, drawn as an assistant bubble. */
.lp-chat-consent{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lp-chat-consent[hidden]{display:none}
.cw .lp-chat-consent .consent{max-width:85%;margin:0}
.cw .lp-chat-consent .consent-item{padding:12px 14px;background:oklch(.955 .006 266);border:0;border-radius:18px;border-bottom-left-radius:6px;box-shadow:none;gap:10px}
.cw .lp-chat-consent .consent-item input[type=checkbox]{border-color:var(--cw-navy);border-radius:5px}
.cw .lp-chat-consent .consent-item label{font-size:.8rem;line-height:1.45;color:var(--cw-ink-2)}
.cw .lp-chat-consent .consent-tag{font-family:inherit;font-size:15.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--cw-ink);margin-bottom:4px}
.cw .lp-chat-consent .consent-tag .opt{font-weight:400;color:var(--cw-quiet)}
.lp-chat-consent .form-status{margin:0;font-size:.85rem}
/* Messages and their buttons slide in (Chad: the replies had no motion). */
.cb,.lp-chat-inline{animation:cbin .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes cbin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lp-chat-mute{margin-left:auto;flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--cw-on-navy-1);cursor:pointer}
.lp-chat-mute svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lp-chat-mute .off,.lp-chat-mute.is-muted .on{display:none}
.lp-chat-mute.is-muted .off{display:block}
@media(hover:hover){.lp-chat-mute:hover{background:oklch(1 0 0 / .12)}}
.lp-chat-alt{margin:12px 0 0;font-size:.85rem;color:var(--cw-quiet)}
.lp-chat-alt button{font:inherit;padding:0;border:0;background:none;color:var(--cw-ink);text-decoration:underline;cursor:pointer}
@media(prefers-reduced-motion:reduce){.cb-typing i{animation:none;opacity:.6}.cb,.lp-chat-inline{animation:none}}
/* The SMS opt-in as a message with Yes and No buttons (2026-09-30). The
   disclosure is small print but the full registered wording. */
.cw .lp-chat-terms{font-size:.8rem;line-height:1.45;color:var(--cw-ink-2)}
.cw .lp-chat-terms .consent-tag{display:block;margin-bottom:4px;font-size:15px;font-weight:600;color:var(--cw-ink)}
.cw .lp-chat-terms .consent-tag .opt{font-weight:400;color:var(--cw-quiet)}
.cw .lp-chat-terms a{color:var(--cw-navy);text-decoration:underline;text-underline-offset:2px}
.cw .lp-chat-consent #lp-chat-yn{align-self:stretch}
.cw .lp-chat-consent #lp-chat-yn[hidden]{display:none}
/* Chad's full Calendly page inside the chat, the last choice after the times. */
.cw .lp-chat-cal{flex:none;width:100%;height:600px;border:1px solid var(--cw-rule);border-radius:12px;overflow:hidden;background:#fff;animation:cbin .24s cubic-bezier(.2,.7,.2,1) both}
.cw .lp-chat-cal iframe{width:100%;height:100%;border:0}
