/* ============================================================================
   OneBank India (NiCE World Bank) — Cognigy chat + voice coexist pill.
   ADAPTED for OneBank India from the booth's banking coexist CSS: re-themed to the
   app's GREEN via :root{--o/--o-dark} below (was orange), the agent.jpg avatar
   REMOVED (solid green circles), and the JS half lives in js/cognigy.js (NOT
   banking.html). The original booth provenance note follows.
   ----------------------------------------------------------------------------
   Cognigy "chat + voice in one pill" — Banking vertical (NiCE World Bank).

   Copied from docs/reference/solara-cognigy-coexist-widget.css (Solara Airlines
   demo, hub v1.5.10) and re-branded for Banking per docs/cognigy-coexist-widget.md:
     - primary colour  #0284c7  -> var(--o, #EA580C)       (page orange)
     - dark colour      #075985  -> var(--o-dark, #9A3412) (page deep orange)
       NOTE: this page is deliberately orange (see banking.html header comment),
       diverging from the indigo --v-banking token, so the pill matches the page
       via the page's own --o / --o-dark tokens (hex fallbacks keep this file
       self-contained if viewed in isolation).
     - "Solara Airlines" strings -> "NiCE World Bank"
     - Agent avatar: local "agent.jpg" (in this folder, ~87KB, 560x840 — sized so
       the 280px homescreen hero card stays crisp on retina) is wired into the
       message bot-avatar, the homescreen hero card, the previous-conversations
       list, and the pill avatar circle (background-size:cover). Swap the file to
       re-brand; in coexist mode the chat icon overlays the pill circle, so the
       avatar shows mainly inside the chat window.

   Two stock Cognigy widgets share the page and are merged visually by CSS:
     - Click To Call (Voice Gateway endpoint, Dark mode, AI Agent Name =
       "Contact NiCE World Bank")                  -> .webrtc_widget_*
     - Webchat v3 (stock toggle button)              -> [data-cognigy-webchat-root]
   The Webchat toggle button is fixed over the Click To Call avatar circle so the
   two read as one pill: [chat icon] Contact NiCE World Bank [phone icon].

   The JS half (loading + init + body.aish-chat-open + the toggle positioner)
   lives in banking.html. Voice loads on the KIOSK lane only.

   Known fragility (see the doc): relies on :has() and Cognigy-internal selectors
   (.webrtc_widget_*, button[data-cognigy-webchat-toggle], the hashed Emotion
   class .cognigy-webchat-1te9a91). Pin widget versions; re-verify after updates.
   ============================================================================ */



/* ----------------------------------------------------------------------------
   1. CLICK TO CALL WIDGET — base branding (brand colour, hide Powered-by)
   ---------------------------------------------------------------------------- */

/* Z-index fix — keep the transcript above page content with positive z-index. */
/* OneBank India (NiCE World Bank) brand tokens for this coexist pill. The file
   uses var(--o, …) / var(--o-dark, …) throughout (originally the banking page's
   orange), so defining them here re-themes the whole pill to the app's green with
   no other change. No agent avatar (per brand) — the avatar circles fall back to
   the solid brand colour. */
:root { --o: #00e2a0; --o-dark: #046a47; }

.webrtc_widget_outer_wrapper { z-index: 9998 !important; }

/* Hide the "powered by Cognigy" footer in the widget. NOTE: hidden for this
   internal demo — flag before any customer-facing use. */
.webrtc_widget_powered_by { display: none !important; }

/* Branded call button — primary theme color with matching drop-shadow. */
.webrtc_widget_call_button {
  background: var(--o, #EA580C) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--o, #EA580C) 35%, transparent) !important;
}

/* Subtle pulse on the agent avatar so it feels alive. Remove the animation rule to disable. */
.webrtc_widget_avatar { animation: aishAvatarPulse 2.4s ease-in-out infinite; }
@keyframes aishAvatarPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Avatar circle — NO avatar PNG for this demo, so fill it with the brand colour
   (the solid orange circle sits under the chat/phone icons). */
.webrtc_widget_content_logo .webrtc_widget_avatar {
  background-color: var(--o, #EA580C) !important;
  background-image: none !important;
  background-size: cover !important;
  background-position: center top !important;
  border-radius: 50% !important;
}

/* Hide the widget's own avatar artwork (inline <svg> on older builds, <img> on
   current ones) so only the solid brand circle shows. */
.webrtc_widget_content_logo .webrtc_widget_avatar svg,
.webrtc_widget_content_logo .webrtc_widget_avatar img {
  visibility: hidden !important;
}

/* Center the call-button label content (the "Call <CompanyName>" wrapper). */
.webrtc_widget_content { text-align: center !important; }


/* ----------------------------------------------------------------------------
   2. COEXIST MODE — the part that makes two widgets look like one pill
   ---------------------------------------------------------------------------- */

body.aish-chat-open .webrtc_widget_outer_wrapper { display: none !important; }

    /* Base overlay position. The fixed right offset below is tuned to the Solara
       label width; our AI Agent Name differs, so banking.html re-measures the
       avatar and pins the toggle by JS on all widths (this is just the pre-JS
       fallback). */
    body:has(.webrtc_widget_container) button[data-cognigy-webchat-toggle="true"] {
      position: fixed !important;
      bottom: 54px !important;
      right: 259px !important;
      width: 44px !important;
      height: 44px !important;
      border-radius: 9999px !important;
      z-index: 9999 !important;
      /* Blend with the underlying avatar circle — no border, no shadow halo. */
      border: 0 !important;
      box-shadow: none !important;
      outline: none !important;
    }

    /* Hide the overlay chat icon while a WebRTC call is active — the end-call
       button only exists in the DOM during a call, so :has() drives this on/off
       automatically. Returns when the call ends. */
    body:has([data-testid="cognigy-end-call-button"]) button[data-cognigy-webchat-toggle="true"],
    body:has(.webrtc_widget_end_call_button) button[data-cognigy-webchat-toggle="true"],
    body:has(button[aria-label="End call"]) button[data-cognigy-webchat-toggle="true"] {
      display: none !important;
    }


/* ----------------------------------------------------------------------------
   3. WEBCHAT v3 — branding + toggle-button rules that pair with the pill avatar
   ---------------------------------------------------------------------------- */

/* Force the widget opaque (overrides Cognigy's default fade-in).
   NOTE: the descendant rule deliberately EXCLUDES the message-input placeholder,
   which Webchat v3 renders as an absolutely-positioned <label class="webchat-
   input-message-label"> over the input and hides with `opacity: 0` once the
   customer types (see webchat.js v3.50.0: `opacity: visible ? 1 : 0`). A blanket
   `* { opacity:1 !important }` overrode that and pinned the placeholder visible,
   so its text overlapped what the customer typed. Carving out the label (and any
   other placeholder element) lets it hide normally, while every other element
   still stays opaque to defeat the widget's open-fade. */
html body div:has(div[data-cognigy-webchat-root="true"]) { opacity: 1 !important; }
div[data-cognigy-webchat-root="true"],
div[data-cognigy-webchat-root="true"] *:not(.webchat-input-message-label):not([class*="placeholder" i]) { opacity: 1 !important; }

/* Hide Cognigy's logo SVGs in the homescreen header, chat header, and previous-
   conversations list items. */
.webchat-homescreen-header .webchat-homescreen-header-cognigy-logo,
.webchat-header-logo-name-container .webchat-header-cognigy-logo,
.webchat-prev-conversations-item .webchat-header-cognigy-logo {
  display: none !important;
}

/* Previous-conversations list — NO avatar PNG, so show a solid orange circle. */
.webchat-prev-conversations-item > div:has(> .webchat-header-cognigy-logo) {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--o, #EA580C) !important;
  flex-shrink: 0 !important;
}

/* Hide the project-configured logo images (homescreen and active chat header). */
.webchat-homescreen-header-logo,
.webchat-header-logo { display: none !important; }

/* Homescreen header — render Company Name where the Cognigy logo used to be. */
.webchat-homescreen-header::before {
  content: "NiCE World Bank" !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  padding: 10px 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
  color: var(--o-dark, #9A3412) !important;
}

/* Chat header h2 — hide original "Cognigy Webchat" text (keeps box-model for layout). */
[data-cognigy-webchat-root] h2.webchat-header-title {
  font-size: 0 !important;
  color: transparent !important;
}

/* Chat header h2 — paint Company Name in dark theme color so it's readable on Cognigy's white bar. */
[data-cognigy-webchat-root] h2.webchat-header-title::after {
  content: "NiCE World Bank" !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--o-dark, #9A3412) !important;
  letter-spacing: -0.2px;
}

/* Message-bubble sender label — hide original bot/project name. */
[data-cognigy-webchat-root] [data-testid="sender-name"] {
  font-size: 0 !important;
  color: transparent !important;
}

/* Message-bubble sender label — paint Company Name in its place. */
[data-cognigy-webchat-root] [data-testid="sender-name"]::after {
  content: "NiCE World Bank" !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--o-dark, #9A3412) !important;
}

/* Message-bubble bot avatar — NO avatar PNG, so show a solid orange circle in
   place of Cognigy's default logo. */
[data-cognigy-webchat-root] [data-testid="bot-avatar"] {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--o, #EA580C) !important;
}

/* AI-agent handoff notice — hide the default "You're now chatting with an AI Agent." text. */
[data-cognigy-webchat-root] .webchat-log-ai-agent-notice-text {
  font-size: 0 !important;
  color: transparent !important;
}

/* AI-agent handoff notice — replace with Company Name for the brand-aware message. */
[data-cognigy-webchat-root] .webchat-log-ai-agent-notice-text::after {
  content: "You're now chatting with NiCE World Bank" !important;
  font-size: 14px !important;
  color: #475569 !important;
}

/* Homescreen body — two-tone background: light top 33%, theme-dark bottom 67%. */
[data-cognigy-webchat-root] .cognigy-webchat-1te9a91 {
  position: relative !important;
  background: linear-gradient(to bottom, transparent 33%, var(--o-dark, #9A3412) 33%) !important;
  overflow: hidden !important;
}

/* Homescreen welcome title — use theme dark so it's readable on the light top band. */
[data-cognigy-webchat-root] h3.webchat-homescreen-title { color: var(--o-dark, #9A3412) !important; }

/* Homescreen body text under the welcome title — same readability fix. */
[data-cognigy-webchat-root] .webchat-homescreen-body,
[data-cognigy-webchat-root] .webchat-homescreen-content { color: var(--o-dark, #9A3412) !important; }

/* Homescreen hero card — NO avatar PNG, so show a solid orange branded card. */
[data-cognigy-webchat-root] .cognigy-webchat-1te9a91::after {
  content: "" !important;
  position: absolute !important;
  top: 15% !important;
  left: 50% !important;
  transform: translate(-50%, 20%) !important;
  width: 280px !important;
  height: 280px !important;
  border-radius: 20px !important;
  background: var(--o, #EA580C) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
}

/* Homescreen close button — white pill so the dark icon is visible on themed headers. */
.webchat-homescreen-close-button {
  background-color: rgba(255,255,255,0.92) !important;
  color: var(--o-dark, #9A3412) !important;
  border-radius: 9999px !important;
  width: 32px !important;
  height: 32px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* Homescreen close button — recolor the X icon to match the dark theme color. */
.webchat-homescreen-close-button svg path { fill: var(--o-dark, #9A3412) !important; }

/* Widget panel size — change these to make the webchat wider/taller. */
[data-cognigy-webchat-root] [data-cognigy-webchat] {
  width: 460px !important;
  height: 780px !important;
}

/* Send-message button icon — recolor to the demo's primary theme color. */
[data-cognigy-webchat-root] .webchat-input-button-send svg path { fill: var(--o, #EA580C) !important; }

/* Webchat toggle button (the floating chat icon) — match the demo's primary theme color.
   Cognigy ships a CSS background-image on this button, so we blank it too. */
#webchatWindowToggleButton,
button.webchat-toggle-button,
button[data-cognigy-webchat-toggle="true"],
[data-cognigy-webchat-root="true"] button.webchat-toggle-button {
  background-image: none !important;
  background-color: var(--o, #EA580C) !important;
  border-color: var(--o, #EA580C) !important;
  transition: transform 0.15s ease, background-color 0.15s ease !important;
  will-change: transform;
}
/* Hover: keep the same primary color, scale the whole button up. */
#webchatWindowToggleButton:hover,
button.webchat-toggle-button:hover,
button[data-cognigy-webchat-toggle="true"]:hover,
[data-cognigy-webchat-root="true"] button.webchat-toggle-button:hover {
  transform: scale(1.03) !important;
  transform-origin: center center !important;
  background-color: var(--o, #EA580C) !important;
  filter: none !important;
}

/* Strip every descendant's hover background/filter so Cognigy's inner darker
   circle becomes invisible. */
#webchatWindowToggleButton:hover *,
#webchatWindowToggleButton:hover *::before,
#webchatWindowToggleButton:hover *::after,
button.webchat-toggle-button:hover *,
button.webchat-toggle-button:hover *::before,
button.webchat-toggle-button:hover *::after,
button[data-cognigy-webchat-toggle="true"]:hover *,
button[data-cognigy-webchat-toggle="true"]:hover *::before,
button[data-cognigy-webchat-toggle="true"]:hover *::after {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Co-scale the WebRTC avatar under the webchat toggle so the stack grows as one
   unit on hover (cross-tree trigger via body:has()). */
.webrtc_widget_content_logo,
.webrtc_widget_content_logo .webrtc_widget_avatar {
  transition: transform 0.15s ease !important;
  transform-origin: center center !important;
}
body:has(button[data-cognigy-webchat-toggle="true"]:hover) .webrtc_widget_content_logo,
body:has(button[data-cognigy-webchat-toggle="true"]:hover) .webrtc_widget_content_logo .webrtc_widget_avatar {
  transform: scale(1.03) !important;
}
/* Webchat toggle icon — keep it white so it stays readable on the colored button. */
#webchatWindowToggleButton svg,
#webchatWindowToggleButton svg path,
button.webchat-toggle-button svg,
button.webchat-toggle-button svg path { fill: #ffffff !important; color: #ffffff !important; }

/* In coexist mode the chat toggle overlays the WebRTC avatar area — blank the
   avatar (image + SVG) and fill the underlying circle with the brand color. */
body:has(button[data-cognigy-webchat-toggle="true"]) .webrtc_widget_content_logo .webrtc_widget_avatar {
  background-image: none !important;
  background-color: var(--o, #EA580C) !important;
}
body:has(button[data-cognigy-webchat-toggle="true"]) .webrtc_widget_content_logo .webrtc_widget_avatar svg {
  display: none !important;
}

/* Stop the WebRTC avatar pulse when the chat icon sits on top of it. */
body:has(button[data-cognigy-webchat-toggle="true"]) .webrtc_widget_avatar {
  animation: none !important;
}

/* Stop Cognigy's "burst" animation on the webchat toggle too. */
#webchatWindowToggleButton,
button.webchat-toggle-button,
button.webchat-toggle-button.burst,
button[data-cognigy-webchat-toggle="true"],
#webchatWindowToggleButton *,
button.webchat-toggle-button * { animation: none !important; }


/* ----------------------------------------------------------------------------
   4. MOBILE (<768px) — centring and the JS-positioner hand-off
   ---------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Center the WebRTC pill at the bottom (closed state only). Respect the home
     indicator / notch with a safe-area inset so the pill isn't tucked under it. */
  body:not(.aish-chat-open) .webrtc_widget_outer_wrapper {
    left: 50% !important;
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
  }
  /* Webchat-only lanes (no WebRTC pill present, e.g. mobile customers): center
     the toggle at the bottom. In coexist mode the badge is glued to the avatar
     by JS instead, so this rule is scoped OUT when a WebRTC container exists. */
  body:not(.aish-chat-open):not(:has(.webrtc_widget_container)) #webchatWindowToggleButton,
  body:not(.aish-chat-open):not(:has(.webrtc_widget_container)) #webchatWindowToggleButton:hover,
  body:not(.aish-chat-open):not(:has(.webrtc_widget_container)) button.webchat-toggle-button,
  body:not(.aish-chat-open):not(:has(.webrtc_widget_container)) button.webchat-toggle-button:hover,
  body:not(.aish-chat-open):not(:has(.webrtc_widget_container)) button[data-cognigy-webchat-toggle="true"],
  body:not(.aish-chat-open):not(:has(.webrtc_widget_container)) button[data-cognigy-webchat-toggle="true"]:hover {
    left: 50% !important;
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
  }
  /* Coexist: keep the webchat badge hidden until the JS positioner has measured
     the avatar and placed it (it sets inline visibility:visible). */
  body:not(.aish-chat-open):has(.webrtc_widget_container) button[data-cognigy-webchat-toggle="true"] {
    visibility: hidden !important;
  }

  /* When OPEN, make the panel fill the viewport on mobile (default is 460px). */
  html body.aish-chat-open [data-cognigy-webchat-root] .webchat {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* Opened webchat homescreen — center the action buttons + branding column. */
  .webchat-homescreen-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* While a mobile menu is expanded (body.aish-menu-open), hide the floating
     Cognigy widgets so they don't overlap the open menu. */
  body.aish-menu-open .webrtc_widget_outer_wrapper,
  body.aish-menu-open .webrtc_widget_container,
  body.aish-menu-open button[data-cognigy-webchat-toggle="true"] {
    display: none !important;
  }
}

/* ----------------------------------------------------------------------------
   5. OneBank India booth "End demo" pill (js/booth.js) — coexist placement
   ---------------------------------------------------------------------------- */
/* The Cognigy pill lives bottom-right; the End-demo pill sits bottom-left (see
   booth.js). On mobile the sidebar is hidden so it moves to the screen edge, and
   it hides while the full-screen chat is open so it never covers the conversation. */
@media (max-width: 768px) {
  .obb-btn { left: calc(16px + env(safe-area-inset-left)) !important; }
  body.aish-chat-open .obb-btn { display: none !important; }
}

/* ── Pill centre label ───────────────────────────────────────────────────────
   The Click-To-Call widget's AI Agent Name is blank in the collapsed pill, so
   the dark pill shows only the chat + call icons with an empty middle. Inject
   the "Contact NiCE World Banking" label into that gap (two lines, like the
   reference pill). Hidden while a call is active — the panel expands then and
   shows its own title, so we don't want the injected label duplicating it. */
.webrtc_widget_container { position: relative !important; }
.webrtc_widget_container::after {
  content: "Contact\A NiCE World Banking";
  white-space: pre !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
body:has([data-testid="cognigy-end-call-button"]) .webrtc_widget_container::after,
body:has(.webrtc_widget_end_call_button) .webrtc_widget_container::after,
body:has(button[aria-label="End call"]) .webrtc_widget_container::after {
  content: "" !important;
}