/* Nevin Omnichannel Chat — public website widget. Brand: Navy #12306A ·
   Green #58B020 · Plus Jakarta Sans, matching the rest of the public site
   (see public/404.html for the same palette/font precedent). */
/* z-index 9995, deliberately ABOVE #cookie-banner's 9990 (site-chrome.css) --
   real, confirmed production defect (2026-09-04, live Playwright trace
   against nevinsolutions.com): the cookie-consent banner is position:fixed,
   full-width, bottom:0 with z-index:9990, and for any visitor who hasn't
   yet dismissed it (i.e. every genuinely new visitor -- it only hides once
   localStorage.nsl_cookie_consent is set), it physically overlapped and
   INTERCEPTED clicks on the launcher, which sat underneath at the old
   z-index:9500. The widget was not "dead" -- it was structurally
   unclickable for a first-time visitor. Below .skip-link's 9999 (a
   keyboard-accessibility utility that must always stay topmost). */
/* Real production defect fix (2026-09-10, found via actual mobile
   screenshot review): being ABOVE the cookie banner in z-index means
   this launcher's own hit area now physically covers part of that
   banner underneath it -- confirmed live, the banner's "Learn more"
   link resolved to this launcher at its real click point, not the
   link, on a 390px mobile viewport. Fixed by pushing the launcher up
   using --cookie-banner-h, a real measured value site-chrome.js sets
   to the banner's actual rendered height while it's showing (0px, the
   default, once dismissed or if JS hasn't run yet) -- never a
   hardcoded offset guessing the banner's height at every viewport. */
#nvn-chat-root { position: fixed; z-index: 9995; right: 24px; bottom: calc(24px + var(--cookie-banner-h, 0px)); font-family: 'Plus Jakarta Sans', system-ui, Arial, sans-serif; transition: bottom .2s ease; }
#nvn-chat-root * { box-sizing: border-box; }

.nvn-launcher {
  display: flex; align-items: center; gap: 10px; background: #12306A; color: #fff;
  padding: 12px 18px 12px 14px; border-radius: 999px; border: none; cursor: pointer;
  box-shadow: 0 8px 28px rgba(18,48,106,.35); font-family: inherit; font-size: 13.5px; font-weight: 700;
  transition: transform .18s, box-shadow .18s;
}
.nvn-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(18,48,106,.45); }
.nvn-launcher-icon { width: 34px; height: 34px; border-radius: 50%; background: #58B020; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nvn-launcher-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25 }
.nvn-launcher-status { font-size: 10.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; color: #B8E986 }
.nvn-dot { width: 7px; height: 7px; border-radius: 50%; background: #58B020; animation: nvnPulse 2s ease-in-out infinite; }
@keyframes nvnPulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }

.nvn-window {
  /* Same real defect class as #nvn-chat-root above -- if a first-time
     visitor opens the chat before dismissing the cookie banner, this
     panel's own fixed bottom offset should grow by the banner's real
     height too, for the identical reason. The mobile breakpoint below
     intentionally overrides this to a true full-screen takeover
     (bottom:0), where the banner is moot -- not touched. */
  display: none; position: fixed; right: 24px; bottom: calc(96px + var(--cookie-banner-h, 0px)); width: 420px; height: 640px;
  max-height: calc(100dvh - 120px); background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(10,20,40,.35); flex-direction: column; border: 1px solid rgba(18,48,106,.08);
}
.nvn-window.nvn-open { display: flex; }

.nvn-header { background: #12306A; color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nvn-header img { height: 26px; }
.nvn-header-info { flex: 1; min-width: 0 }
.nvn-header-title { font-size: 14px; font-weight: 700; }
.nvn-header-sub { font-size: 11.5px; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 5px; margin-top: 2px }
.nvn-header-actions { display: flex; gap: 4px }
.nvn-icon-btn { background: rgba(255,255,255,.12); border: none; color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nvn-icon-btn:hover { background: rgba(255,255,255,.22); }

.nvn-body { flex: 1; overflow-y: auto; padding: 18px; background: #f7f9fc; }
.nvn-footer { border-top: 1px solid #eef1f6; padding: 12px 14px; flex-shrink: 0; background: #fff; }

.nvn-welcome-title { font-size: 17px; font-weight: 800; color: #12306A; margin: 0 0 6px; }
.nvn-welcome-sub { font-size: 13px; color: #5a6a7a; margin: 0 0 18px; line-height: 1.5 }
.nvn-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px }
.nvn-quick-btn { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: #12306A; text-align: left; cursor: pointer; transition: all .15s; font-family: inherit; }
.nvn-quick-btn:hover { border-color: #58B020; background: #f7fdf3; transform: translateY(-1px); }

.nvn-field { margin-bottom: 12px; }
.nvn-field label { display: block; font-size: 11.5px; font-weight: 700; color: #5a6a7a; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .03em }
.nvn-field input, .nvn-field select, .nvn-field textarea {
  width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 9px 12px; font-size: 13px;
  font-family: inherit; color: #1a2a3a; background: #fff;
}
.nvn-field textarea { resize: vertical; min-height: 70px }
.nvn-field input:focus, .nvn-field select:focus, .nvn-field textarea:focus { outline: none; border-color: #58B020; box-shadow: 0 0 0 3px rgba(88,176,32,.12) }
.nvn-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; color: #5a6a7a; margin-bottom: 14px; line-height: 1.4 }
.nvn-consent input { width: auto; margin-top: 2px }

.nvn-btn-primary {
  width: 100%; background: #58B020; color: #12306A; border: none; border-radius: 10px; padding: 12px;
  font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit; transition: transform .15s;
}
.nvn-btn-primary:hover { transform: translateY(-1px); }
.nvn-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none }
.nvn-link-btn { background: none; border: none; color: #12306A; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0 }

.nvn-msg { margin-bottom: 12px; max-width: 82%; }
.nvn-msg-visitor { margin-left: auto; }
.nvn-msg-label { font-size: 10px; color: #94a3b8; margin-bottom: 3px; font-weight: 600 }
.nvn-msg-visitor .nvn-msg-label { text-align: right }
.nvn-msg-bubble { border-radius: 12px; padding: 9px 13px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word }
.nvn-msg-visitor .nvn-msg-bubble { background: #12306A; color: #fff; border-bottom-right-radius: 3px }
.nvn-msg-ai .nvn-msg-bubble { background: #f0e8ff; color: #2a1a4a; border-bottom-left-radius: 3px }
.nvn-msg-staff .nvn-msg-bubble { background: #fff; color: #1a2a3a; border: 1px solid #e2e8f0; border-bottom-left-radius: 3px }
.nvn-msg-system { text-align: center; font-size: 11.5px; color: #94a3b8; margin: 10px 0 }

.nvn-typing { font-size: 11.5px; color: #94a3b8; padding: 4px 0 8px; font-style: italic }
.nvn-handover-offer { background: #fff8e6; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: #7c5a00; margin-bottom: 12px }
.nvn-handover-offer button { margin-top: 8px }

.nvn-ref-badge { display: inline-block; font-size: 10.5px; font-weight: 700; color: #58B020; background: rgba(88,176,32,.1); padding: 3px 10px; border-radius: 20px; margin-bottom: 10px }

/* Mobile — genuine full-screen communication interface, not a squeezed
   desktop box (spec §3). */
@media (max-width: 640px) {
  /* Real defect found live in production (2026-09-10): this rule has the
     SAME specificity as #nvn-chat-root's base rule above and comes later
     in the cascade, so on any viewport <=640px it silently overrode the
     --cookie-banner-h offset with a bare 16px -- exactly the breakpoint
     the real overlap defect lives at. Confirmed live: getComputedStyle
     reported bottom:16px here despite --cookie-banner-h correctly
     computing to 118px, meaning the fix above was being completely
     defeated at the one viewport size it exists to fix. Caught by
     actually re-testing against the deployed site, not assumed working
     because the build matched. */
  #nvn-chat-root { right: 16px; bottom: calc(16px + var(--cookie-banner-h, 0px)); }
  .nvn-window { right: 0; bottom: 0; left: 0; top: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .nvn-launcher.nvn-hide-on-open { display: none; }
}