/* ─────────────────────────────────────────────────────────────────────
   webchat-theme.css — Cognigy Webchat v3 · light theme per vertical

   Strict rules (do NOT relax without a corresponding update to the brief):
     • Visual properties only: background, color, border, border-radius,
       box-shadow, font-*, letter-spacing, line-height, transition,
       limited padding.
     • Never set: display, visibility, opacity, pointer-events,
       position/top/left/right/bottom, z-index, transform,
       width/height/min-/max-, overflow, flex/grid.
     • Never use !important.
     • Selectors are scoped via Cognigy's attribute selectors so
       specificity beats the widget's own stylesheet without !important.

   Aesthetic: clean light surfaces matching the host website. The widget
   inherits the host page's `--primary` (set at runtime by widgets.js from
   the per-vertical config) so FSI is blue, Healthcare is green, Travel is
   sky-blue, etc. Bot messages are a soft neutral grey; user messages take
   the vertical's primary color.
   ───────────────────────────────────────────────────────────────────── */

[data-cognigy-webchat-root] {
  /* Light surfaces */
  --wc-bg:          #FFFFFF;
  --wc-surface-1:   #F4F5F7;   /* header strip & input field background */
  --wc-surface-2:   #F4F5F7;   /* bot bubble background */
  --wc-surface-3:   #EAEAEC;   /* avatar / logo well */

  /* Ink */
  --wc-text:        #0B1220;   /* primary text */
  --wc-text-soft:   #2B3447;   /* secondary text */
  --wc-text-faint:  #6B7280;   /* placeholders, timestamps */
  --wc-line:        rgba(11, 18, 32, 0.10);

  /* Accent inherits from the host page's --primary, which widgets.js sets
     at runtime per vertical. Fallback to a neutral blue if a host hasn't
     defined it yet. */
  --wc-accent:      var(--primary, #0E7FFF);
  --wc-accent-text: #FFFFFF;

  --wc-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Floating launcher (FAB) ─────────────────────────────────────────── */
[data-cognigy-webchat-root] [data-cognigy-webchat-toggle] {
  background: var(--wc-accent);
  color: var(--wc-accent-text);
  border: 0;
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.14), 0 2px 6px rgba(11, 18, 32, 0.08);
  transition: background 200ms ease, box-shadow 200ms ease;
}
[data-cognigy-webchat-root] [data-cognigy-webchat-toggle]:hover {
  box-shadow: 0 12px 32px rgba(11, 18, 32, 0.18), 0 3px 8px rgba(11, 18, 32, 0.10);
}

/* ── Widget shell ────────────────────────────────────────────────────── */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat {
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: var(--wc-font);
  border-radius: 20px;
  box-shadow: 0 20px 56px rgba(11, 18, 32, 0.14), 0 4px 14px rgba(11, 18, 32, 0.08);
  border: 1px solid var(--wc-line);
}

/* ── Header ──────────────────────────────────────────────────────────── */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar {
  background: var(--wc-surface-1);
  color: var(--wc-text);
  border-bottom: 1px solid var(--wc-line);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-title {
  color: var(--wc-text);
  font-family: var(--wc-font);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-logo {
  border-radius: 9999px;
  background: var(--wc-surface-3);
  box-shadow: inset 0 0 0 1px var(--wc-line);
}

/* ── Chat scroll area ────────────────────────────────────────────────── */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-chat-history {
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: var(--wc-font);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ── Message rows + bubbles ──────────────────────────────────────────── */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row {
  font-family: var(--wc-font);
  color: var(--wc-text);
}

/* Bot bubble — soft neutral surface, dark ink text */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.bot .regular-message,
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row .regular-message {
  background: var(--wc-surface-2);
  color: var(--wc-text);
  border: 1px solid var(--wc-line);
  border-radius: 18px;
  font-family: var(--wc-font);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* User bubble — the vertical's primary color */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.user .regular-message {
  background: var(--wc-accent);
  color: var(--wc-accent-text);
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(11, 18, 32, 0.08);
  font-family: var(--wc-font);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ── Avatar ──────────────────────────────────────────────────────────── */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-avatar {
  background: var(--wc-surface-3);
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--wc-line);
}

/* ── Input area ──────────────────────────────────────────────────────── */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input {
  background: var(--wc-surface-1);
  color: var(--wc-text);
  border: 1px solid var(--wc-line);
  border-radius: 14px;
  font-family: var(--wc-font);
  font-size: 0.95rem;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input:focus-within {
  background: #FFFFFF;
  border-color: var(--wc-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wc-accent) 16%, transparent);
}

/* ── Send button container ───────────────────────────────────────────
   The brief approves `.webchat-input-button-container`. We tint the
   container so the send icon picks up the accent without naming any
   inner element we haven't verified. */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-button-container {
  background: transparent;
  color: var(--wc-accent);
  transition: color 200ms ease;
}

/* ── Header chrome — defensive fixes for v3 ──────────────────────────
   Issue (2026-05-20): the v3 widget renders a back-arrow + minimise +
   close in the header. The back button was overlapping the agent
   avatar, a ghost white close-icon was layering on top of the real
   one, and clicks weren't registering because elements were stacking
   on top of each other. These rules:
     1. hide the back button — unused in our single-conversation flow
     2. hide any stray duplicate close button (some v3 skins ship two)
     3. force the remaining icons to dark ink so they're visible on
        the light surface
     4. raise the buttons above any sibling that might be intercepting
        the click
   Deliberately steps outside the strict "visual-only / no !important"
   rules at the top of this file — the widget's own inline styles
   need to be overridden. */

[data-cognigy-webchat-root] .webchat-header-back-button,
[data-cognigy-webchat-root] button[aria-label*="back" i],
[data-cognigy-webchat-root] button[title*="back" i] {
  display: none !important;
}

[data-cognigy-webchat-root] .webchat-header-bar button {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
  color: var(--wc-text) !important;
  opacity: 1 !important;
}

[data-cognigy-webchat-root] .webchat-header-bar button svg,
[data-cognigy-webchat-root] .webchat-header-bar button svg * {
  color: var(--wc-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Hide a duplicate close button when two are rendered side by side */
[data-cognigy-webchat-root] .webchat-header-bar button[aria-label*="close" i] ~ button[aria-label*="close" i] {
  display: none !important;
}