/* ============================================================
   Cosmos Pumps Chatbot (iDEWA) widget styles
   All classes prefixed with .cpbot- so they cannot collide with
   the WordPress theme. Do NOT remove the prefix.
   ============================================================ */

   /* Box-sizing reset for the entire widget, so padding and borders are
   included in width/height and the layout doesn't break if the user
   customizes the CSS variables for padding, border thickness, etc. */
   

.cpbot-root,
.cpbot-root *,
.cpbot-root *::before,
.cpbot-root *::after { box-sizing: border-box; }

.cpbot-root {
  --cpbot-steel-950: #080e09;
  --cpbot-steel-900: #0f1811;
  --cpbot-steel-800: #162019;
  --cpbot-steel-700: #1e2e21;
  --cpbot-steel-600: #2a3e2d;
  --cpbot-steel-500: #3d4559;
  --cpbot-steel-400: #5a6480;
  --cpbot-steel-300: #8892a8;
  --cpbot-steel-200: #b8c0d0;
  --cpbot-steel-100: #e2e6ee;
  /* Brand palette (2026-05-25): green #006933, yellow #FBC217, white #fff.
     --cpbot-copper / -light keep their old variable names so existing rules
     don't need a rewrite — only the values changed. -light is a slightly
     brighter shade of the brand green for gradients and hover states. */
  --cpbot-copper: #006933;
  --cpbot-copper-light: #008a44;
  --cpbot-copper-pale: #b8e6c8;
  --cpbot-amber: #FBC217;
  --cpbot-white: #f8f9fc;
  --cpbot-success: #3db87a;
  --cpbot-radius: 16px;
  --cpbot-shadow-xl: 0 24px 80px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.4);
  --cpbot-shadow-copper: 0 0 40px rgba(45,122,58,0.18);
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Toggle button — copper circle with mascot peeking out the top.
   When chat is open, the mascot fades and an X icon shows. */
.cpbot-toggle {
  position: fixed; bottom: 149px !important; left: 13px; right:auto;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(145deg, var(--cpbot-copper), var(--cpbot-copper-light));
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(45,122,58,0.45), 0 2px 8px rgba(0,0,0,0.4);
  z-index: 2147483000;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  overflow: visible;
}
.cpbot-toggle:hover { transform: scale(1.08) rotate(4deg); }
.cpbot-toggle svg.cpbot-icon-chat  { display: none; }    /* hidden when mascot loads */
.cpbot-toggle svg.cpbot-icon-close { width: 28px; height: 28px; fill: #fff; display: none; }
.cpbot-toggle.cpbot-open svg.cpbot-icon-close { display: block; }
.cpbot-toggle.cpbot-open .cpbot-toggle-mascot { opacity: 0; transform: translateX(-50%) translateY(8px); }
.cpbot-toggle .cpbot-toggle-mascot {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 88px; height: 88px;
  object-fit: contain; object-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
  transition: opacity .25s ease, transform .25s ease;
}
.cpbot-toggle .cpbot-icon-close { display: none; }
.cpbot-toggle.cpbot-open .cpbot-icon-chat { display: none; }
.cpbot-toggle.cpbot-open .cpbot-icon-close { display: block; }
.cpbot-toggle::before {
  content:''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--cpbot-copper); opacity: 0;
  animation: cpbot-pulse 3s ease-out infinite;
}
@keyframes cpbot-pulse {
  0%{ transform: scale(.9); opacity: .8; }
  70%{ transform: scale(1.3); opacity: 0; }
  100%{ opacity: 0; }
}

/* Notification badge */
.cpbot-badge {
  position: fixed; bottom: 105px; right: 24px;
  background: var(--cpbot-steel-800);
  border: 1px solid var(--cpbot-steel-600);
  color: var(--cpbot-steel-100);
  font-size: 12px; font-weight: 500;
  padding: 8px 14px; border-radius: 20px;
  z-index: 2147482999; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  display: none;
}
.cpbot-badge.cpbot-show { display: block; animation: cpbot-badge-in .5s cubic-bezier(.34,1.56,.64,1); }
.cpbot-badge::after {
  content:''; position: absolute; bottom: -6px; right: 20px;
  width: 10px; height: 6px; background: var(--cpbot-steel-800);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: 1px solid var(--cpbot-steel-600);
}
@keyframes cpbot-badge-in {
  from { transform: translateY(10px) scale(.9); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Chat window */
.cpbot-window {
  position: fixed; bottom: 42px; left: 92px; right: auto;
  width: 550px; height: 670px; max-height: calc(100vh - 134px);
  border-radius: var(--cpbot-radius); overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--cpbot-steel-700);
  box-shadow: var(--cpbot-shadow-xl), var(--cpbot-shadow-copper);
  z-index: 2147482998;
  transform: scale(.85) translateY(24px); opacity: 0; pointer-events: none;
  transform-origin: bottom right;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.cpbot-window.cpbot-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }

/* ── Header (2026-05-25 redesign) ─────────────────────────────────
   Brand-green gradient panel with a swooping cyan-green glow that
   sweeps in from the upper-right corner, recreated entirely in CSS
   (no extra image asset). The header now holds three things only:
     [mascot]  Ask iDEWA / AI Dewatering Advisor             [ X ]
   The WhatsApp + trash buttons were removed; WhatsApp still surfaces
   inside bot replies via the prompt's closing standard, and the
   trash button's clearChat() function is still defined and callable
   from other code paths — only the header trigger was dropped. */
.cpbot-header {
  background:
    linear-gradient(90deg, #004d24 0%, #006933 55%, #00803f 100%);
  /* Solid brand-yellow stripe at the very bottom of the header (matches
     the mockup at .../Screenshots/header.png). 3px reads as a definite
     accent line, not a hairline border. */
  border-bottom: 3px solid var(--cpbot-amber);
  padding: 0 14px 0 16px; height: 72px;
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  position: relative; overflow: hidden;
}
/* Cyan-green wave/glow swooping in from the upper-right.
   Three layered radial gradients: a soft halo, a tighter highlight,
   and a faint amber kiss to suggest the wave's leading edge. */
.cpbot-header::before {
  content:''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 140% at 95% -20%, rgba(120,255,180,0.42) 0%, rgba(60,200,120,0.18) 35%, transparent 65%),
    radial-gradient(ellipse 50% 90% at 80% 120%, rgba(0,200,110,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 30% 60% at 100% 50%, rgba(180,255,200,0.22) 0%, transparent 70%);
  filter: blur(2px);
  z-index: 0;
}
/* A thin diagonal "wave streak" added on top so the glow reads as a
   sweeping arc rather than a uniform smear. */
.cpbot-header::after {
  content:''; position: absolute; top: -40%; right: -10%;
  width: 70%; height: 200%;
  background: linear-gradient(115deg, transparent 40%, rgba(140,255,190,0.18) 50%, transparent 60%);
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 0;
}
/* Header mascot — transparent PNG sticker framed by a circular backdrop
   that pops the mascot against the green header. The frame is built with
   two pseudo-elements on .cpbot-avatar:
     ::before → the solid white/pale-green disc with brand-green ring +
                amber outer kiss. Sits behind the mascot via z-index: 0.
     ::after  → online status indicator (bottom-right green dot, pulsing).
   A third element (.cpbot-avatar-halo) provides the soft pulsing halo
   without clipping the mascot. The mascot img is raised to z-index: 2
   so it always sits above the disc. */
.cpbot-avatar {
  width: 46px; height: 46px;
  display: flex; align-items: flex-end; justify-content: center;
  flex-shrink: 0; position: relative; overflow: visible;
  background: transparent; z-index: 1;
}
/* The circular backdrop disc. Slightly oversized vs the avatar box so it
   frames the mascot (whose img is 64px and overflows the 56px container).
   Layered gradient: deep brand-green core lifts toward primary brand-green
   at the rim, then a 2px brand-green ring, then a soft amber + green outer
   glow to echo the header's swooping glow aesthetic. Dark fill so the
   mascot reads as a luminous sticker on a rich green badge. */
.cpbot-avatar::before {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 50px; height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #006933 0%, #004d25 55%, #003d1f 100%);
  border: 2px solid var(--cpbot-copper);
  box-shadow:
    0 0 0 1px rgba(251,194,23,0.35),                /* thin amber ring */
    0 0 14px 2px rgba(120,255,180,0.55),            /* soft green glow */
    0 2px 6px rgba(0,0,0,0.35),                     /* drop shadow      */
    inset 0 1px 2px rgba(255,255,255,0.18),         /* subtle top sheen */
    inset 0 -3px 6px rgba(0,0,0,0.35);              /* bottom shading   */
  z-index: 0;
}
/* Soft pulsing halo behind the disc — same shape, no fill, just a
   diffused ring that gently breathes to keep the header feeling alive.
   Sits behind everything via z-index: 0 + appears via animation. */
.cpbot-avatar-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 50px; height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(120,255,180,0.55);
  animation: cpbot-avatar-pulse 2.8s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes cpbot-avatar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(120,255,180,0.55); opacity: .9; }
  70%  { box-shadow: 0 0 0 12px rgba(120,255,180,0);  opacity: 0; }
  100% { box-shadow: 0 0 0 0 rgba(120,255,180,0);     opacity: 0; }
}
.cpbot-avatar img {
  width: 54px; height: 54px;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
  position: relative; z-index: 2;
}
/* Online status indicator — small green dot at bottom-right of the disc.
   Brand green core with a white outer ring (separation against the green
   header) and an inner highlight for a glossy bead feel. A separate
   gentle glow pulse via the box-shadow keyframes signals "active". */
.cpbot-avatar::after {
  content: ''; position: absolute;
  width: 13px; height: 13px;
  right: -2px; bottom: 2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #5be398 0%, #1fb866 55%, #006933 100%);
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.15),
    0 0 8px rgba(34,197,94,0.85),
    inset 0 1px 1px rgba(255,255,255,0.6);
  z-index: 3;
  animation: cpbot-status-pulse 2s ease-in-out infinite;
}
@keyframes cpbot-status-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 0 6px  rgba(34,197,94,0.65), inset 0 1px 1px rgba(255,255,255,0.6); }
  50%      { box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 0 12px rgba(34,197,94,1.00), inset 0 1px 1px rgba(255,255,255,0.6); }
}
.cpbot-header-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.cpbot-header-name {
  /* Oswald italic gives the bold display-italic feel of the mockup
     while keeping mixed case so the iDEWA brand mark renders properly.
     "Ask" is white, the brand mark is amber. */
  font-family: 'Oswald', 'Bebas Neue', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 26px; letter-spacing: 0.5px;
  color: var(--cpbot-white); line-height: 1.05;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.cpbot-header-name-brand {
  color: var(--cpbot-amber);
  font-style: italic;
}
.cpbot-header-sub {
  font-size: 12px; color: rgba(255,255,255,0.92);
  letter-spacing: .04em; margin-top: 2px;
  font-weight: 400;
}

/* Close (X) button on the right of the header. White outline, white
   icon, transparent fill — bright enough to stand out against the
   green panel and the glow without competing with the headline. */
.cpbot-header-close {
  width: 36px; height: 36px; border-radius: 8px; padding: initial;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.75);
  color: #fff; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.cpbot-header-close:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  transform: scale(1.05);
}
.cpbot-header-close:active { transform: scale(0.96); }
.cpbot-header-close svg { width: 18px; height: 18px; fill: currentColor; }

/* Used by the streaming-bubble cursor (.cpbot-streaming::after). Lived
   inside the old header rules; preserved here after the header redesign
   removed the status dot that previously shared it. */
@keyframes cpbot-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Messages */
.cpbot-messages {
  flex: 1; overflow-y: auto; padding: 0px 16px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
  background: #fff; /* light-theme scroll surface matches white window */
}
.cpbot-messages::-webkit-scrollbar { width: 6px; }
/* Light-theme scrollbar — pale gray thumb reads on the white surface */
.cpbot-messages::-webkit-scrollbar-track { background: #f3f4f6; }
.cpbot-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.cpbot-messages::-webkit-scrollbar-thumb:hover { background: #b8c0cc; }

/* ── Pre-chat surface (welcome card + quick-questions) ────────────
   The pre-chat area lives on a unified WHITE surface per the bb.png
   mockup. .cpbot-messages stays transparent/dark so subsequent bot &
   user message bubbles render on the original dark theme; only the
   welcome + chips wrapper gets the white skin.

   IMPORTANT: when the user sends the first message, sendMessage()
   removes #cpbot-suggestions and .cpbot-sug-label but the welcome
   card itself stays (existing UX — the marketing card sits above
   the conversation). The wrapper merely shrinks. */
.cpbot-prechat {
  background: #fff;
  /* border-radius: var(--cpbot-radius); */
  padding: 18px 9px 14px;
  margin: -4px 0 4px;
  display: flex; flex-direction: column; gap: 14px;
  /* box-shadow: 0 4px 14px rgba(0,0,0,0.18); */
}

/* ── Welcome card ────────────────────────────────────────────────
   bb.png composition:
     [mascot + faint green pad]  Hi, I'm iDEWA (large, mixed case)
                                 World's 1st AI-Powered Dewatering Advisor
                                 ┃ description with green left bar ┃
   Card itself is just the white background of the wrapper — no
   inner border, no shadow. Below the body sit 3 value-prop pills.
   ────────────────────────────────────────────────────────────────── */
.cpbot-welcome {
  background: transparent;
  padding: 0; position: relative;
  text-align: left;
}

/* Body row — mascot on the left (on a green radial-glow pad), copy
   stack on the right. */
.cpbot-welcome-body {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 0;
}
.cpbot-welcome-copy { flex: 1; min-width: 0; }

/* Exemption for the iDEWA brand mark — inside containers that uppercase
   everything else, keep the brand in its proper mixed case. */
.cpbot-brand { text-transform: none; }

/* Mascot pad — recreates the faint green circular "glow base" under
   the mascot in the mockup. Pure CSS radial gradient, no new image. */
.cpbot-welcome-mascot-pad {
  position: relative; flex-shrink: 0;
  width: 120px; height: 120px;
  display: flex; align-items: flex-end; justify-content: center;
}
.cpbot-welcome-mascot-pad::before {
  content: ''; position: absolute;
  left: 50%; bottom: 4px;
  transform: translateX(-50%);
  width: 104px; height: 26px;
  background: radial-gradient(ellipse at center,
              rgba(0,105,51,0.22) 0%,
              rgba(0,105,51,0.12) 45%,
              rgba(0,105,51,0) 75%);
  filter: blur(2px);
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}
/* Hero mascot inside the welcome card. */
.cpbot-welcome-hero {
  position: relative; z-index: 1;
  display: block;
  width: 120px; height: 120px;
  object-fit: contain; object-position: center bottom;
  /* filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18)); */
}

/* "Hi, I'm iDEWA" — heavy sans, mixed case, large display headline.
   Oswald-700 reads as the bb.png mockup feel (display weight, slight
   compression). 'i' stays lowercase, 'DEWA' is whatever the source
   string says — we don't transform case. */
.cpbot-welcome-title {
  font-family: 'Oswald', 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.2px;
  color: #0f1811;
  line-height: 1.1;
  margin: 0 0 4px;
}
/* Subtitle — small, gray-ish regular weight, sits directly below the
   headline as in the mockup. */
.cpbot-welcome-sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 400;
  color: #6b7280; line-height: 1.4;
  margin: 0 0 10px;
}
/* Description box with the brand-green left bar (blockquote feel). */
.cpbot-welcome-quote {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 500;
  color: #1f2a23; line-height: 1.5;
  padding: 6px 10px 6px 12px;
  border-left: 3px solid var(--cpbot-copper);
  background: #f6f8f6;
  border-radius: 0 6px 6px 0;
}

/* Value-prop pills at the bottom of the welcome card. Three equal-width
   cards on white with a subtle gray border and a green icon. */
.cpbot-welcome-pills {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin-top: 12px;
}
.cpbot-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 10.5px; color: #0f1811;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  min-width: 0;
}
.cpbot-pill-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--cpbot-copper);
}
.cpbot-pill-icon svg { width: 20px; height: 20px; }
.cpbot-pill-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400; line-height: 1.25;
  color: #4b5563;
  letter-spacing: 0.1px;
}
.cpbot-pill-label strong {
  display: inline-block;
  color: #0f1811; font-weight: 700;
}

/* ── Quick-questions strip (light theme) ────────────────────────── */
.cpbot-sug-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #6b7280; font-weight: 700;
  padding: 0;
  margin-top: 2px;
}
.cpbot-suggestions { display: flex; flex-direction: column; gap: 6px; }
.cpbot-chip {
  /* Brand-green gradient base + circuit-pattern PNG anchored to the right
     edge of each chip. The PNG (`question-bg.png`) is a yellow circuit
     trace on a green square; the gradient picks up the same green so the
     image blends seamlessly into the chip body. The image is sized to
     the chip's full height (`auto 100%`) and pinned right; padding-right
     reserves space so text never runs underneath. */
  background:
    url('question-bg.png') right center / auto 100% no-repeat,
    linear-gradient(135deg, #004d24 0%, #006933 55%, #008a44 100%);
  border: 1px solid var(--cpbot-copper);
  text-transform: none;
  letter-spacing: normal;
  color: #fff;
  border-radius: 10px;
  padding: 12px 64px 12px 14px;
  font: 500 13px 'DM Sans', sans-serif;
  cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.cpbot-chip:hover {
  filter: brightness(1.1);
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(0,105,51,0.35);
}
.cpbot-chip-emoji {
  flex-shrink: 0;
  /* On dark green now — drop the hue-rotate that was tinting the emoji
     for the white-bg light theme. Keep the emoji's native colors. */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.cpbot-chip-text { flex: 1; min-width: 0; }

.cpbot-row { display: flex; gap: 8px; align-items: flex-end; animation: cpbot-msg-in .3s ease; }
.cpbot-row.cpbot-user { flex-direction: row-reverse; }
@keyframes cpbot-msg-in {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cpbot-msg-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; margin-bottom: 2px; overflow: hidden;
}
.cpbot-row.cpbot-bot .cpbot-msg-avatar {
  background: linear-gradient(135deg, var(--cpbot-copper), var(--cpbot-amber));
}
/* Mascot in bot bubbles — transparent, no frame, small sticker look. */
.cpbot-row.cpbot-bot .cpbot-msg-avatar:has(img) {
  background: transparent; overflow: visible; border: none;
}
.cpbot-row.cpbot-bot .cpbot-msg-avatar img {
  width: 38px; height: 38px;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
.cpbot-row.cpbot-user .cpbot-msg-avatar {
  /* Light-theme user avatar — pale chip on white */
  background: #e5e7eb; color: #374151;
}
.cpbot-msg-content { max-width: 78%; display: flex; flex-direction: column; gap: 4px; }
.cpbot-row.cpbot-user .cpbot-msg-content { align-items: flex-end; }
.cpbot-bubble {
  padding: 11px 15px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.65; word-break: break-word;
}
.cpbot-row.cpbot-bot .cpbot-bubble {
  /* Light bot bubble — pale gray fill, dark text, subtle border for definition on white */
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #1f2a23;
  border-bottom-left-radius: 4px;
}
.cpbot-row.cpbot-user .cpbot-bubble {
  background: linear-gradient(135deg, var(--cpbot-copper), var(--cpbot-copper-light));
  color: #fff; border-bottom-right-radius: 4px;
  box-shadow: 0 4px 16px rgba(45,122,58,.3);
}
.cpbot-row.cpbot-error .cpbot-bubble {
  /* Error bubble on white — soft red wash with readable dark-red text */
  background: #fef2f2; border-color: #fecaca; color: #b91c1c;
}
.cpbot-time {
  /* Bumped from steel-500 to a muted gray that reads on white */
  font-size: 10px; color: #9ca3af;
  font-family: 'DM Mono', monospace; padding: 0 4px;
}
.cpbot-bubble p { margin: 0 0 8px; }
.cpbot-bubble p:last-child { margin-bottom: 0; }
.cpbot-bubble ul { padding-left: 16px; margin: 6px 0; }
.cpbot-bubble li { margin-bottom: 4px; }
/* Bot bubble (light): strong/em/code re-tuned for dark-on-light readability */
.cpbot-row.cpbot-bot .cpbot-bubble strong { color: #0f1811; font-weight: 700; }
.cpbot-row.cpbot-bot .cpbot-bubble em { color: var(--cpbot-copper); font-style: italic; }
.cpbot-row.cpbot-bot .cpbot-bubble a { color: var(--cpbot-copper); text-decoration: underline; }
.cpbot-row.cpbot-bot .cpbot-bubble a:hover { color: var(--cpbot-copper-light); }
.cpbot-row.cpbot-bot .cpbot-bubble code {
  font-family: 'DM Mono', monospace; font-size: 12px;
  background: #fff; border: 1px solid #e5e7eb;
  color: #006933; padding: 1px 5px; border-radius: 4px;
}
/* User bubble keeps white text on green — strong/em/code stay light */
.cpbot-row.cpbot-user .cpbot-bubble strong { color: #fff; font-weight: 700; }
.cpbot-row.cpbot-user .cpbot-bubble em { color: #fff8e1; font-style: italic; }
.cpbot-row.cpbot-user .cpbot-bubble a { color: #fff; text-decoration: underline; }
.cpbot-row.cpbot-user .cpbot-bubble code {
  font-family: 'DM Mono', monospace; font-size: 12px;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; padding: 1px 5px; border-radius: 4px;
}

/* Markdown tables rendered by chatbot.js parseTables() — light theme */
.cpbot-bubble .cpbot-table {
  width: 100%; border-collapse: collapse; margin: 8px 0;
  font-size: 12px; background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px; overflow: hidden;
}
.cpbot-bubble .cpbot-table th,
.cpbot-bubble .cpbot-table td {
  border: 1px solid #e5e7eb;
  padding: 6px 9px; text-align: left; vertical-align: top;
  line-height: 1.35;
}
.cpbot-bubble .cpbot-table th {
  background: #ecfdf3; /* pale green wash so headers feel branded on white */
  color: #006933;
  font-weight: 700; letter-spacing: 0.2px;
}
.cpbot-bubble .cpbot-table tr:nth-child(even) td {
  background: #fafafa;
}

/* Streaming bubble cursor */
.cpbot-bubble.cpbot-streaming::after {
  content: '▍'; color: var(--cpbot-copper);
  margin-left: 2px; animation: cpbot-blink 0.8s ease infinite;
}

/* Typing */
.cpbot-typing-row { display: flex; gap: 8px; align-items: flex-end; animation: cpbot-msg-in .3s ease; }

/* Typing-row mascot avatar — same transparent sticker as bot messages. */
.cpbot-typing-row .cpbot-msg-avatar {
  background: transparent; overflow: visible; border: none;
  width: 38px; height: 38px;
}
.cpbot-typing-row .cpbot-msg-avatar img {
  width: 38px; height: 38px;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
.cpbot-typing-bubble {
  /* Match bot bubble light skin so the typing indicator reads as the same speaker */
  background: #f3f4f6; border: 1px solid #e5e7eb;
  border-radius: 14px 14px 14px 4px; padding: 14px 18px;
  display: flex; align-items: center; gap: 5px;
}
.cpbot-typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cpbot-copper); opacity: .4;
  animation: cpbot-dot 1.4s ease infinite;
}
.cpbot-typing-dot:nth-child(2) { animation-delay: .2s; }
.cpbot-typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes cpbot-dot {
  0%,60%,100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Input — wrap stays green to bookend the header; inner pill is a clean
   white input that sits on the green panel like the lower mockup. */
.cpbot-input-wrap {
  border-top: 3px solid var(--cpbot-amber); /* amber stripe echoes the header's bottom edge */
  background: linear-gradient(90deg, #004d24 0%, #006933 55%, #00803f 100%); padding: 14px 16px; flex-shrink: 0;
}
.cpbot-input-row {
  display: flex; align-items: flex-end; gap: 10px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 14px; padding: 8px 8px 8px 16px;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.cpbot-input-row:focus-within {
  border-color: var(--cpbot-amber);
  box-shadow: 0 0 0 3px rgba(251,194,23,0.30);
}
.cpbot-input {
  flex: 1; background: transparent; border: none; outline: none;
  /* Dark text on white input — was steel/--cpbot-white which read as invisible on white */
  color: #0f1811; font: 400 13.5px 'DM Sans', sans-serif;
  line-height: 1.5; resize: none;
  min-height: 36px; max-height: 120px; padding: 4px 0;
}
.cpbot-input::placeholder { color: #9ca3af; }
.cpbot-send {
  width: 36px; height: 36px; border-radius: 10px; padding: initial;
  background: linear-gradient(135deg, var(--cpbot-amber) 0%, #e4a800 100%); /* amber CTA pops against the green wrap */
  border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(251,194,23,.45);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cpbot-send:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(251,194,23,.55);
}
.cpbot-send:active:not(:disabled) { transform: translateY(0); }
.cpbot-send:disabled {
  background: #e5e7eb;
  box-shadow: none;
  opacity: .85;
  cursor: not-allowed;
}
.cpbot-send svg { width: 16px; height: 16px; fill: #0f1811; }
.cpbot-send:disabled svg { fill: #9ca3af; }
.cpbot-hint {
  /* Hint sits on the green wrap. Bumped to 95% white from 85% so the
     10px text clears WCAG AA Normal contrast against the brand green. */
  font-size: 10px; color: rgba(255,255,255,0.95);
  text-align: center; margin-top: 8px;
}
.cpbot-hint kbd {
  font-family: 'DM Mono', monospace; font-size: 9px;
  background: rgba(255,255,255,0.92); color: #0f1811;
  padding: 1px 5px; border-radius: 3px;
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

/* "Know More" CTA — sits below the keyboard hint on the green input
   wrap. Pure brand-green gradient button (no image), centered text,
   tight uppercase letter-spacing. Subtle inset highlight on top + soft
   inset shadow at bottom gives the surface a pressable feel without
   shouting. Whole row is a proper CTA button shape. */
.cpbot-know-more {
  /* Flex so the arrow icon sits inline with the text and the spacing
     stays consistent. Inline-flex keeps the pill width hugging content. */
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px auto 2px;
  min-width: 170px; justify-content: center;
  padding: 6px 22px;
  border-radius: 999px;        /* pill — reads as a proper button */
  background: linear-gradient(135deg, #004d24 0%, #006933 55%, #008a44 100%);
  /* Light white border traces the pill so it pops off the green
     input-wrap behind it (which is also green — without the border the
     pill bleeds into the background). */
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font: 700 12px 'DM Sans', sans-serif;
  text-decoration: none; text-align: center;
  letter-spacing: 0.8px; text-transform: uppercase;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -2px 4px rgba(0,0,0,0.20);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
  cursor: pointer;
}
.cpbot-know-more-arrow {
  width: 14px; height: 14px; flex-shrink: 0;
  color: #fff;
  /* Slight nudge down so the arrow optically centers with cap-height of
     the uppercase text. Subtle. */
  transform: translateY(-0.5px);
  transition: transform .18s ease;
}
.cpbot-know-more:hover .cpbot-know-more-arrow {
  /* Slide the arrow right a touch on hover for that classic CTA feel. */
  transform: translate(3px, -0.5px);
}
/* Center the pill horizontally inside the input-wrap. */
.cpbot-input-wrap { text-align: center; }
.cpbot-know-more:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 4px rgba(0,0,0,0.20);
  filter: brightness(1.08);
}
.cpbot-know-more:active {
  transform: translateY(0);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.35),
    inset 0 2px 4px rgba(0,0,0,0.30);
}
.cpbot-know-more:focus-visible {
  outline: 2px solid var(--cpbot-amber);
  outline-offset: 3px;
}

/* Footer — sits on the same green gradient as the input wrap. Light text
   tuned for the dark green background (was steel-300 which is dark gray
   and read as muddy on green). */
.cpbot-footer {
  background: linear-gradient(90deg, #004d24 0%, #006933 55%, #00803f 100%);
  border-top: 1px solid rgba(0,0,0,0.18);
  padding: 8px 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cpbot-footer-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cpbot-amber); opacity: .85; }
.cpbot-footer-text {
  /* 11px + 95% white was 10px + 85% — clears AA Normal on brand green
     and the size bump makes the metadata legible instead of squinty. */
  font-size: 11px; color: rgba(255,255,255,0.95);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
}
/* Build version (e.g. v2026.05.22.10 on Azure, "dev" locally). Stays in
   lowercase, monospace, slightly dimmer than the surrounding meta so it
   reads as version-stamp not branding — but bumped from 0.65 to 0.85
   so it actually clears contrast against the green. */
.cpbot-version {
  font-family: 'DM Mono', monospace;
  text-transform: none;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0;
  font-weight: 400;
}

/* Lead capture modal (inside the chat window) */
.cpbot-lead-backdrop {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(8,14,9,.78); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: cpbot-fade-in .25s ease;
}
@keyframes cpbot-fade-in { from{opacity:0} to{opacity:1} }
/* Lead modal — light theme (2026-05-25) to match the now-white widget.
   Backdrop stays dark semi-transparent to dim the chat behind it; the
   card itself is white with a yellow top accent bar to brand it. */
.cpbot-lead-card {
  width: 100%; background: #fff;
  border: 1px solid #e5e7eb;
  border-top: 3px solid var(--cpbot-amber);
  border-radius: 14px; padding: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
.cpbot-lead-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px;
  color: #0f1811; margin-bottom: 6px;
}
.cpbot-lead-sub {
  font-size: 12.5px; color: #6b7280;
  line-height: 1.55; margin-bottom: 14px;
}
.cpbot-lead-field { margin-bottom: 10px; }
.cpbot-lead-field label {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #6b7280; margin-bottom: 5px;
}
.cpbot-lead-field input {
  width: 100%; background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #0f1811; font: 400 13.5px 'DM Sans', sans-serif;
  border-radius: 10px; padding: 10px 12px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cpbot-lead-field input:focus {
  background: #fff;
  border-color: var(--cpbot-copper);
  box-shadow: 0 0 0 3px rgba(0,105,51,.15);
}
.cpbot-lead-field input::placeholder { color: #9ca3af; }
.cpbot-lead-error {
  font-size: 12px; color: #b91c1c; margin: 4px 0 8px;
  min-height: 16px;
}
.cpbot-lead-actions { display: flex; gap: 8px; margin-top: 8px; }
.cpbot-lead-submit {
  flex: 1; background: linear-gradient(135deg, var(--cpbot-copper), var(--cpbot-copper-light));
  color: #fff; border: none; cursor: pointer;
  padding: 11px 14px; border-radius: 10px;
  font: 600 13px 'DM Sans', sans-serif; letter-spacing: .03em;
  box-shadow: 0 4px 14px rgba(45,122,58,.35);
}
.cpbot-lead-submit:disabled { opacity: .6; cursor: not-allowed; }

/* Disabled chat input (while lead modal is up). The send button's
   disabled style is fully defined above (.cpbot-send:disabled — incl.
   the .55 opacity), so we only need the input rule here. */
.cpbot-input:disabled { opacity: .45; cursor: not-allowed; }

/* Accessibility — respect prefers-reduced-motion. Scoped to `.cpbot-window *`
   so we never modify the floating toggle button / notification badge
   appearance (those live on the host landing page and are sacred per
   user feedback). Inside the chat window we kill all repeating pulses
   (avatar halo, status dot, typing dots, streaming caret) and collapse
   transitions to instant — the standard WCAG pattern. Animation still
   "plays" but at 0.01ms with iteration-count 1, so layout stays sane. */
@media (prefers-reduced-motion: reduce) {
  .cpbot-window *,
  .cpbot-window *::before,
  .cpbot-window *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsive — covers most phones in portrait and landscape; widened
   from 500px to 600px so iPhone 13 landscape (~ 568px) and larger
   Android portraits get the full-width chat window instead of the
   450px desktop panel overflowing the viewport. */
@media (max-width: 600px) {
  .cpbot-window { width: calc(100vw - 24px); right: 12px; bottom: 96px; height: 78vh; }
  .cpbot-toggle { right: 16px; bottom: 20px; }
  .cpbot-badge { right: 12px; }
  /* Pre-chat card collapses to a tighter layout on phones — mascot shrinks
     and the 3 value-prop pills stack to one-per-row so the multi-line
     labels don't get cramped. */
  .cpbot-prechat { padding: 14px 12px 12px; }
  .cpbot-welcome-mascot-pad { width: 92px; height: 92px; }
  .cpbot-welcome-hero { width: 92px; height: 92px; }
  .cpbot-welcome-mascot-pad::before { width: 78px; height: 20px; }
  .cpbot-welcome-title { font-size: 22px; }
  .cpbot-welcome-body { gap: 10px; }
  .cpbot-welcome-pills { grid-template-columns: 1fr; gap: 6px; }
  .cpbot-pill { padding: 8px 10px; }
  /* Header — shrink the headline a touch and tighten the avatar so
     the X button stays comfortably reachable on narrow screens. */
  .cpbot-header { padding: 0 12px 0 12px; gap: 10px; }
  .cpbot-header-name { font-size: 22px; }
  .cpbot-header-sub { font-size: 11px; }
  .cpbot-avatar { width: 40px; height: 40px; }
  .cpbot-avatar img { width: 46px; height: 46px; }
  /* Scale the disc backdrop + halo on mobile. Status dot keeps its
     11×11 size on purpose — user wanted only the mascot+circle smaller. */
  .cpbot-avatar::before,
  .cpbot-avatar-halo { width: 44px; height: 44px; }
  .cpbot-avatar::after { width: 11px; height: 11px; right: -1px; bottom: 1px; }
  .cpbot-header-close { width: 32px; height: 32px; }
  .cpbot-header-close svg { width: 16px; height: 16px; }
}