/* ==========================================================================
   Chase NextGen - Site Help Assistant
   Static, self-contained help widget. No backend, no API calls.
   Brand: #0b6fb3 / #4db2ff / #0a2c3d · Rajdhani + Nunito
   ========================================================================== */

.cn-bot,
.cn-bot * { box-sizing: border-box; }

/* ---------- Launcher ---------- */
.cn-bot-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 22px 0 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #0b6fb3, #2792d1);
  color: #fff;
  font-family: 'Rajdhani', 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(11, 111, 179, 0.42), 0 2px 8px rgba(0, 0, 0, 0.14);
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s ease, opacity 0.2s ease;
}
.cn-bot-launcher:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(11, 111, 179, 0.5); }
.cn-bot-launcher:focus-visible { outline: 3px solid #4db2ff; outline-offset: 3px; }
.cn-bot-launcher i { font-size: 18px; }
.cn-bot-launcher.cn-hidden { opacity: 0; pointer-events: none; transform: scale(0.9); }

.cn-bot-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #5dcc80;
  border: 2px solid #fff;
}

/* ---------- Panel ---------- */
.cn-bot-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 392px;
  max-width: calc(100vw - 32px);
  height: 620px;
  max-height: calc(100vh - 48px);
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(11, 111, 179, 0.16);
  box-shadow: 0 24px 64px rgba(10, 44, 61, 0.26), 0 4px 12px rgba(0, 0, 0, 0.08);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.cn-bot-panel.cn-open { display: flex; animation: cnRise 0.32s cubic-bezier(0.23, 1, 0.32, 1) both; }

@keyframes cnRise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Header ---------- */
.cn-bot-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 16px 16px 20px;
  background: linear-gradient(135deg, #0a2c3d, #0b6fb3);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
}
.cn-bot-avatar {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.cn-bot-head-txt { flex: 1 1 auto; min-width: 0; }
.cn-bot-head-txt b {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.2;
}
.cn-bot-head-txt span {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 2px;
}
.cn-bot-head-txt span::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5dcc80;
  margin-right: 6px;
  vertical-align: 1px;
}
/* Hardened so the icon can never be squeezed out, clipped or mis-centred:
   explicit flex centring, a floor on the box size, margin-left:auto so it is
   always pinned to the right no matter how long the header text runs, and its
   own stacking context. Previously it had no display/centring rule and could
   render off-centre or be pushed out of the header row on narrow screens. */
.cn-bot-x {
  flex: 0 0 auto;
  margin-left: auto;
  width: 36px; height: 36px;
  min-width: 36px; min-height: 36px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
}
/* The X is DRAWN IN CSS, not set as a Font Awesome glyph.
   On some mobile browsers the FA webfont did not paint inside this button and
   it appeared as an empty transparent square. Font Awesome 5 declares
   font-display:block, so a glyph that fails to load renders as nothing at all
   rather than falling back to a system character. Two rotated bars have no
   font dependency whatsoever and always paint. The <i> stays in the markup
   (hidden) so nothing else has to change; the button's aria-label carries the
   accessible name. */
.cn-bot-x i { display: none !important; }
.cn-bot-x::before,
.cn-bot-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  pointer-events: none;
}
.cn-bot-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.cn-bot-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.cn-bot-x:hover { background: rgba(255, 255, 255, 0.28); }
.cn-bot-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Header text truncates rather than pushing the close button off the row */
.cn-bot-head-txt b,
.cn-bot-head-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Messages ---------- */
.cn-bot-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px 8px;
  background: #f7fafd;
  scrollbar-width: thin;
}
.cn-bot-log::-webkit-scrollbar { width: 8px; }
.cn-bot-log::-webkit-scrollbar-thumb { background: rgba(11, 111, 179, 0.22); border-radius: 4px; }

.cn-msg { display: flex; margin-bottom: 14px; animation: cnIn 0.26s ease both; }
@keyframes cnIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cn-msg-b { justify-content: flex-start; }
.cn-msg-u { justify-content: flex-end; }

.cn-bubble {
  max-width: 88%;
  padding: 12px 15px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.62;
  word-wrap: break-word;
}
.cn-msg-b .cn-bubble {
  background: #fff;
  color: #2c4a60;
  border: 1px solid #e0ecf5;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(10, 44, 61, 0.05);
}
.cn-msg-u .cn-bubble {
  background: linear-gradient(135deg, #0b6fb3, #2792d1);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cn-bubble p { margin: 0 0 9px; }
.cn-bubble p:last-child { margin-bottom: 0; }
.cn-bubble b, .cn-bubble strong { color: #0a2c3d; font-weight: 700; }
.cn-msg-u .cn-bubble b { color: #fff; }
.cn-bubble ul { margin: 8px 0 9px; padding-left: 0; list-style: none; }
.cn-bubble li { position: relative; padding-left: 16px; margin-bottom: 5px; }
.cn-bubble li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4db2ff;
}
.cn-bubble a { color: #0b6fb3; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cn-bubble a:hover { color: #08517f; }

/* typing indicator */
.cn-typing { display: flex; gap: 4px; padding: 4px 2px; }
.cn-typing i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #9dc4de;
  animation: cnBlink 1.2s infinite ease-in-out both;
}
.cn-typing i:nth-child(2) { animation-delay: 0.16s; }
.cn-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes cnBlink { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } }

/* ---------- Suggestion chips ---------- */
.cn-bot-chips {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 18px 12px;
  background: #f7fafd;
}
.cn-chip {
  border: 1px solid rgba(11, 111, 179, 0.3);
  background: rgba(11, 111, 179, 0.06);
  color: #0b6fb3;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.cn-chip:hover { background: rgba(11, 111, 179, 0.15); transform: translateY(-1px); }
.cn-chip:focus-visible { outline: 2px solid #0b6fb3; outline-offset: 2px; }

/* ---------- Composer ---------- */
.cn-bot-form {
  flex: 0 0 auto;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border-top: 1px solid #e6eff7;
}
.cn-bot-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 15px;
  border: 1px solid #d5e5f1;
  border-radius: 11px;
  background: #f7fafd;
  font-family: inherit;
  font-size: 14.5px;
  color: #2c4a60;
}
.cn-bot-input::placeholder { color: #93aec0; }
.cn-bot-input:focus { outline: none; border-color: #4db2ff; background: #fff; box-shadow: 0 0 0 3px rgba(77, 178, 255, 0.16); }
.cn-bot-send {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, #0b6fb3, #2792d1);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cn-bot-send:hover { transform: translateY(-1px); }
.cn-bot-send:focus-visible { outline: 2px solid #0b6fb3; outline-offset: 2px; }

.cn-bot-foot {
  flex: 0 0 auto;
  padding: 0 16px 11px;
  background: #fff;
  font-size: 10.5px;
  color: #93aec0;
  text-align: center;
  line-height: 1.5;
}
.cn-bot-foot a { color: #6f93a8; text-decoration: underline; }

/* ---------- Scroll-to-top clearance ----------
   The "Need help?" launcher is fixed at right:24px / bottom:24px and is 56px
   tall. The theme's scroll-to-top button (#scrollUp, from jquery.scrollUp)
   defaults to the same corner, so the two overlapped once the page scrolled.
   This rule lives here, in the last stylesheet the pages load, so it wins the
   cascade over style.css and ui-enhancements-2026.css regardless of link
   order. Right edges are aligned so the pair reads as one vertical stack.
   If the launcher is resized, update these values to:
   launcher bottom + launcher height + 12px gap. */
#scrollUp {
  right: 24px !important;
  bottom: 92px !important;
  z-index: 9997 !important;
  animation: none !important; /* style.css applies a "jump" animation that shifts it */
}

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .cn-bot-panel {
    right: 0; bottom: 0; left: 0;
    width: 100%;
    max-width: 100%;
    /* On phones `vh` resolves against the LARGE viewport (URL bar hidden).
       This panel is anchored to bottom:0 and grows upward, so an 88vh height
       pushed its own header - and the X close button inside it - above the
       top of the visible area whenever the URL bar was showing. `dvh` tracks
       the viewport that is actually visible. The vh pair below stays as a
       fallback for browsers without dvh, at a smaller value so the header
       still clears the top of the screen. */
    height: 80vh;
    max-height: 80vh;
    height: 85dvh;
    max-height: 85dvh;
    border-radius: 18px 18px 0 0;
  }
  .cn-bot-launcher { right: 16px; bottom: 16px; height: 52px; padding: 0 18px 0 15px; font-size: 14px; }
  .cn-bubble { max-width: 92%; }
  /* Launcher is 52px tall at bottom:16px here, so clear 16 + 52 + 12 = 80px */
  #scrollUp {
    right: 16px !important;
    bottom: 80px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
  }
  .cn-bot-x { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .cn-bot-x::before, .cn-bot-x::after { width: 17px; height: 2.5px; }
  /* Panel sits flush to the bottom edge here; keep its last row (the footer,
     below the input) clear of the iPhone home-indicator bar. */
  .cn-bot-foot { padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); }
}

/* iOS Safari zooms the page (and stays zoomed) when a focused input has a
   font-size under 16px; the chat input is 14.5px on desktop. Applies to
   narrow viewports and any touch-primary device (covers landscape phones). */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .cn-bot-input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-bot-launcher, .cn-chip, .cn-bot-send { transition: none; }
  .cn-bot-panel.cn-open, .cn-msg { animation: none; }
  .cn-typing i { animation: none; opacity: 0.6; }
}

@media print {
  .cn-bot-launcher, .cn-bot-panel { display: none !important; }
}