/* Ask Buddy widget styles. Vanilla CSS, no build step.
   Layer values: the defaults below (button 900, panel 950) sit below every
   modal, dialog, and banner layer found on bitebacktick.com on 2026-10-22
   (menu panel 99996, stuck quote button 99997, review bar 99998, help panel
   99999, desktop area menu 100005, mobile call bar 999999, homepage mobile
   sticky bar 2147482000). Set the two variables per site from that site's
   furniture inventory (spec 2.2 rule 5).
   Bottom band: on widths under 1024px the live site shows a fixed mobile
   call bar about 72px tall. The widget JS measures any fixed bottom band
   (call bar, consent banner) and raises --buddy-band-h to match, so the
   button and panel always rest above the band. The 72px CSS fallback here
   covers the first paint before JS measures. The band measurement only
   sees direct children of body, and the homepage sticky bar is not one
   (and reports 0), which used to drop the button behind the bar on
   phones; the max-width 640px block at the end of this file therefore
   enforces a hard floor of 84px plus the safe-area inset on small
   screens, whatever the measurement says.
   Insulation: the host theme's base stylesheet styles every bare button
   and textarea (its global rule paints [type=button], [type=submit] and
   button with a #cc3366 crimson border and text, and textareas with a
   dark border and a black focus outline). Widget rules are therefore
   scoped one level deeper (.buddy-panel .buddy-x, button.buddy-button)
   and set border, background, color, outline and shadow explicitly, so
   the theme cannot bleed in regardless of stylesheet order. */
:root {
  --buddy-button-z: 900;
  --buddy-panel-z: 950;
  --buddy-band-h: 0px;
  --buddy-rise-btn: 0px;
  --buddy-rise-panel: 0px;
  --buddy-safe-b: env(safe-area-inset-bottom, 0px);
  --buddy-navy: #0a3147;
  --buddy-blue: #066aab;
  --buddy-blue-dark: #055a91;
  --buddy-sky: #48a7d9;
  --buddy-green: #5aa63f;
  --buddy-ink: #15374e;
  --buddy-chip-bg: #eef4f8;
  --buddy-chip-border: #c7d8e3;
  --buddy-field-border: #b9cdd9;
}
@media (max-width: 1023px) {
  :root { --buddy-band-h: 72px; }
}

/* Insulation reset: box sizing and form-control appearance for everything
   the widget renders, so host rules start from a known state. */
.buddy-panel, .buddy-panel *, .buddy-panel *::before, .buddy-panel *::after,
button.buddy-button, button.buddy-button * {
  box-sizing: border-box;
}
.buddy-panel button, .buddy-panel textarea, .buddy-panel input,
button.buddy-button {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  -webkit-tap-highlight-color: transparent;
}

button.buddy-button {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(max(1rem, var(--buddy-safe-b)) + var(--buddy-band-h) + var(--buddy-rise-btn));
  z-index: var(--buddy-button-z);
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2, 12, 27, 0.30);
}
button.buddy-button:hover, button.buddy-button:focus {
  background: transparent;
  border: none;
}
button.buddy-button img { display: block; width: 56px; height: 56px; border-radius: 50%; border: none; }
button.buddy-button:focus-visible { outline: 3px solid var(--buddy-sky); outline-offset: 3px; }

.buddy-panel {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(max(1rem, var(--buddy-safe-b)) + var(--buddy-band-h) + var(--buddy-rise-panel));
  z-index: var(--buddy-panel-z);
  width: 380px;
  max-width: 92vw;
  height: min(70vh, 640px);
  height: min(70dvh, 640px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: var(--buddy-ink);
  border: 1px solid rgba(10, 49, 71, 0.18);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: left;
}
.buddy-panel[hidden] { display: none; }
/* The panel top never rises into the fixed top furniture zone: its height
   is capped so the top edge stays at or below 76px from the viewport top
   (below the 38px review bar and the header block) at any band height. */
.buddy-panel {
  max-height: calc(100vh - var(--buddy-band-h) - 160px);
  max-height: calc(100dvh - var(--buddy-band-h) - 160px);
}
@media (max-width: 640px) {
  .buddy-panel {
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    max-width: none;
    height: min(78vh, 720px);
    height: min(78dvh, 720px);
  }
}

/* Header: the full banner art on white at proper size, the close button
   overlaid at the top right, then a brand band with the call line. */
.buddy-panel .buddy-header {
  position: relative;
  background: #ffffff;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(10, 49, 71, 0.10);
}
.buddy-panel img.buddy-banner {
  display: block;
  height: 116px;
  width: auto;
  max-width: 82%;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  background: transparent;
}
.buddy-panel .buddy-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(10, 49, 71, 0.14);
  border-radius: 50%;
  background: rgba(10, 49, 71, 0.06);
  color: var(--buddy-navy);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.buddy-panel .buddy-close:hover { background: rgba(10, 49, 71, 0.14); color: var(--buddy-navy); }
.buddy-panel .buddy-close:focus-visible { outline: 2px solid var(--buddy-sky); outline-offset: 2px; }
.buddy-panel .buddy-subbar {
  background: linear-gradient(155deg, #0a3147, #066aab);
  color: #ffffff;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 8px 16px;
}
.buddy-panel .buddy-subbar a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }

.buddy-panel .buddy-privacy {
  padding: 12px 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  background: #eef6fb;
  color: var(--buddy-ink);
  border-bottom: 1px solid rgba(10, 49, 71, 0.10);
}

.buddy-panel .buddy-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.buddy-panel .buddy-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; }
.buddy-panel .buddy-msg-visitor { align-self: flex-end; background: var(--buddy-blue); color: #ffffff; border-bottom-right-radius: 4px; }
.buddy-panel .buddy-msg-assistant { align-self: flex-start; background: #f1f5f8; color: var(--buddy-ink); border-bottom-left-radius: 4px; }
.buddy-panel .buddy-msg-error { align-self: flex-start; background: #fdf6e9; color: #7c4a03; border: 1px solid #ecd9ae; }
.buddy-panel .buddy-thinking { align-self: flex-start; font-size: 0.85rem; color: #46687e; font-style: italic; }
.buddy-panel .buddy-citation { display: block; margin-top: 6px; font-size: 0.78rem; }
.buddy-panel .buddy-citation a { color: var(--buddy-blue); }

.buddy-panel .buddy-feedback { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.buddy-panel .buddy-thumb {
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--buddy-field-border);
  border-radius: 50%;
  background: #ffffff;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.buddy-panel .buddy-thumb:hover { background: var(--buddy-chip-bg); }
.buddy-panel .buddy-thumb:focus-visible { outline: 2px solid var(--buddy-sky); outline-offset: 2px; }
.buddy-panel .buddy-thumb[aria-pressed="true"] { background: var(--buddy-sky); border-color: var(--buddy-blue); }
.buddy-panel .buddy-feedback-note { font-size: 0.75rem; color: #7c4a03; }

.buddy-panel .buddy-starters { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.buddy-panel .buddy-starters[hidden] { display: none; }
.buddy-panel .buddy-starter {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 10px 16px;
  border: 1px solid var(--buddy-chip-border);
  border-radius: 999px;
  background: var(--buddy-chip-bg);
  color: var(--buddy-navy);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  cursor: pointer;
}
.buddy-panel .buddy-starter:hover { background: #e1edf5; border-color: #9fc3da; color: var(--buddy-navy); }
.buddy-panel .buddy-starter:focus-visible { outline: 2px solid var(--buddy-sky); outline-offset: 2px; background: #e1edf5; color: var(--buddy-navy); }

.buddy-panel .buddy-lead {
  margin: 0 16px 16px;
  padding: 12px;
  border: 1px solid rgba(90, 166, 63, 0.55);
  border-radius: 12px;
  background: #f4faf1;
  font-size: 0.88rem;
  line-height: 1.4;
}
.buddy-panel .buddy-lead label { display: block; margin-top: 8px; font-size: 0.8rem; font-weight: 700; }
.buddy-panel .buddy-lead input {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(10, 49, 71, 0.3);
  border-radius: 8px;
  background: #ffffff;
  color: var(--buddy-ink);
  font-size: 0.92rem;
  box-sizing: border-box;
}
.buddy-panel .buddy-lead input:focus { border-color: var(--buddy-blue); outline: none; box-shadow: 0 0 0 3px rgba(72, 167, 217, 0.35); }
.buddy-panel .buddy-lead-send, .buddy-panel .buddy-send {
  border: 1px solid var(--buddy-blue);
  border-radius: 10px;
  background: var(--buddy-blue);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.buddy-panel .buddy-lead-send:hover, .buddy-panel .buddy-send:hover { background: var(--buddy-blue-dark); border-color: var(--buddy-blue-dark); color: #ffffff; }
.buddy-panel .buddy-lead-send:focus-visible, .buddy-panel .buddy-send:focus-visible { outline: 2px solid var(--buddy-sky); outline-offset: 2px; }
.buddy-panel .buddy-lead-send { margin-top: 10px; width: 100%; min-height: 44px; padding: 0 16px; }
.buddy-panel .buddy-lead-send:disabled, .buddy-panel .buddy-send:disabled { opacity: 0.65; cursor: default; }
.buddy-panel .buddy-lead-status { margin-top: 8px; font-size: 0.82rem; }

.buddy-panel .buddy-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 16px calc(12px + var(--buddy-safe-b));
  border-top: 1px solid rgba(10, 49, 71, 0.12);
  background: #ffffff;
}
.buddy-panel .buddy-input-wrap { flex: 1 1 auto; min-width: 0; }
.buddy-panel .buddy-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  max-height: 110px;
  padding: 10px 12px;
  border: 1px solid var(--buddy-field-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--buddy-ink);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
}
.buddy-panel .buddy-input:focus, .buddy-panel .buddy-input:focus-visible {
  border-color: var(--buddy-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(72, 167, 217, 0.35);
}
.buddy-panel .buddy-send {
  flex: 0 0 auto;
  min-width: 64px;
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
}
.buddy-panel .buddy-counter { font-size: 0.72rem; color: #5c7a8d; text-align: right; margin-top: 2px; }

/* Small screens: hard clearance floor over the site sticky bottom bar
   (Call Now / Text Us, about 72px plus the phone safe area). The button
   and the panel anchor above the floor even when the band measurement
   reports 0, and the panel height is capped from 100dvh so its input row
   can never slide under the bar. Desktop anchoring is unchanged. */
@media (max-width: 640px) {
  button.buddy-button {
    bottom: calc(max(84px + var(--buddy-safe-b), max(1rem, var(--buddy-safe-b)) + var(--buddy-band-h)) + var(--buddy-rise-btn));
  }
  .buddy-panel {
    bottom: calc(max(84px + var(--buddy-safe-b), max(1rem, var(--buddy-safe-b)) + var(--buddy-band-h)) + var(--buddy-rise-panel));
    /* Bottom offset when open is the 84px floor plus the 68px panel
       rise; the cap also keeps a 76px clear zone at the top. */
    max-height: calc(100dvh - 84px - var(--buddy-safe-b) - 68px - 76px);
  }
}