/* =====================================================================
   ENVISION CAPABILITIES CONCIERGE  ·  STYLES
   ---------------------------------------------------------------------
   Visual layer only. Reuses the deck's brand tokens (--navy, --blue,
   --green, grays) and Montserrat, set on :root in index.html, so the
   concierge stays pixel-consistent with the deck. Weight contrast carries
   the hierarchy; the only typeface is Montserrat. No em dashes anywhere.
   ===================================================================== */

.env-concierge{
  /* Local fallbacks in case the deck tokens ever change names. */
  --ec-navy: var(--navy, #001852);
  --ec-blue: var(--blue, #003087);
  --ec-green: var(--green, #78BE21);
  --ec-ink: var(--text-dark, #001852);
  --ec-mid: var(--text-mid, #3a4a6b);
  --ec-soft: var(--text-soft, #6b7a96);
  --ec-rule: var(--rule-light, #e5eaf2);
  --ec-tint: var(--bg-tint, #f6f8fc);
  --ec-radius: 16px;
  --ec-shadow: 0 18px 50px rgba(0,24,82,0.22), 0 2px 8px rgba(0,24,82,0.10);
  font-family: var(--sans, 'Montserrat', sans-serif);

  /* Viewport height used to size the panel. Falls back to vh, prefers dvh
     (which tracks the *visible* viewport as mobile browser chrome shows and
     hides). JS further overrides --ec-kb with the on-screen keyboard inset so
     the composer is lifted above the keyboard instead of hiding behind it. */
  --ec-vph: 100vh;
  --ec-kb: 0px;
}
@supports (height: 100dvh){
  .env-concierge{ --ec-vph: 100dvh; }
}

/* ---------- Floating launcher ---------- */
.ec-launcher{
  position: fixed; right: clamp(14px, 2.5vw, 26px);
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 100;
  display: inline-flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 20px 0 18px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ec-navy); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: .01em;
  box-shadow: var(--ec-shadow);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.ec-launcher:hover{ background: var(--ec-blue); transform: translateY(-1px); }
.ec-launcher:active{ transform: translateY(0); }
.ec-launcher svg{ width: 20px; height: 20px; flex: none; }
.ec-launcher .ec-launcher-label{ white-space: nowrap; }
/* While the panel is open the launcher is not just visually hidden but pulled
   out of the tab order and the a11y tree, so a keyboard or screen-reader user
   cannot land on an invisible control behind the open dialog. */
.ec-launcher[aria-expanded="true"]{
  opacity: 0; pointer-events: none; visibility: hidden;
}

/* When the deck owns the screen with a full-screen overlay (detail modal,
   BSC map, or campus lightbox), it sets body.env-overlay-open. Hide the chat
   launcher and panel so a second layer can never stack on top of the overlay.
   Functional, not cosmetic: the concierge sits at z-index 101, above the
   modal's 100, so without this an open chat would float over the modal. */
body.env-overlay-open .ec-launcher,
body.env-overlay-open .ec-panel{ display: none !important; }

@media (max-width: 520px){
  .ec-launcher .ec-launcher-label{
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ec-launcher{ width: 52px; padding: 0; justify-content: center; }
}

/* ---------- Panel ---------- */
.ec-panel{
  position: fixed; right: clamp(14px, 2.5vw, 26px);
  bottom: calc(18px + var(--ec-kb) + env(safe-area-inset-bottom));
  z-index: 101;
  width: min(396px, calc(100vw - 28px));
  /* dvh + keyboard inset keeps the whole panel — including the composer —
     inside the visible viewport on mobile, so nothing slides off-screen and
     the visitor never has to pinch-zoom to reach the input. */
  height: min(620px, calc(var(--ec-vph) - var(--ec-kb) - 96px));
  max-height: calc(var(--ec-vph) - var(--ec-kb) - 24px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow);
  overflow: hidden; overscroll-behavior: contain;
  transform: translateY(16px) scale(.98); opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  pointer-events: none;
}
.ec-panel.is-open{ transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.ec-panel[hidden]{ display: none; }

@media (max-width: 520px){
  .ec-panel{
    right: 8px; left: 8px;
    bottom: calc(8px + var(--ec-kb) + env(safe-area-inset-bottom));
    width: auto;
    height: min(620px, calc(var(--ec-vph) - var(--ec-kb) - 16px));
  }
}
@media (prefers-reduced-motion: reduce){
  .ec-panel, .ec-launcher{ transition: none; }
}

/* ---------- Header ---------- */
.ec-head{
  flex: none; display: flex; align-items: center; gap: 11px;
  padding: 15px 14px 15px 18px;
  background: var(--ec-navy); color: #fff;
}
.ec-head-badge{
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,0.12);
  display: grid; place-items: center;
}
.ec-head-badge svg{ width: 19px; height: 19px; }
.ec-head-txt{ display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ec-head-title{ font-weight: 700; font-size: 14px; letter-spacing: .01em; }
.ec-head-sub{ font-weight: 500; font-size: 11px; color: rgba(255,255,255,0.72); }
.ec-head-close{
  margin-left: auto; flex: none;
  width: 34px; height: 34px; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,0.10); color: #fff;
  display: grid; place-items: center;
  transition: background .15s ease;
}
.ec-head-close:hover{ background: rgba(255,255,255,0.22); }
.ec-head-close svg{ width: 17px; height: 17px; }

/* ---------- Message log ---------- */
.ec-log{
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  padding: 16px 14px 8px;
  display: flex; flex-direction: column; gap: 11px;
  background: var(--ec-tint);
  scroll-behavior: smooth;
  /* Keep a scroll gesture inside the chat from chaining through to the slide
     deck behind it (which scroll-snaps), and stop iOS rubber-band bleed. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (prefers-reduced-motion: reduce){ .ec-log{ scroll-behavior: auto; } }

/* Each new message / chip row "pops" in so the conversation reads as live and
   the eye is drawn to what just arrived. */
.ec-log > *{ animation: ec-pop .2s ease both; }
@keyframes ec-pop{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .ec-log > *{ animation: none; }
}

.ec-msg{ display: flex; max-width: 100%; }
.ec-bubble{
  font-size: 13.5px; line-height: 1.5; font-weight: 500;
  padding: 11px 14px; border-radius: 14px;
  max-width: 86%; word-wrap: break-word;
  /* A long unbroken token (an NSN, a part number, a URL) breaks instead of
     forcing the bubble past the panel edge. */
  overflow-wrap: anywhere;
}
.ec-msg-bot{ justify-content: flex-start; }
.ec-msg-bot .ec-bubble{
  background: #fff; color: var(--ec-ink);
  border: 1px solid var(--ec-rule); border-bottom-left-radius: 5px;
}
.ec-msg-user{ justify-content: flex-end; }
.ec-msg-user .ec-bubble{
  background: var(--ec-blue); color: #fff; border-bottom-right-radius: 5px;
}

/* Provenance line under an answer (source label, subtle) */
.ec-source{
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ec-soft);
  margin: -3px 4px 1px;
}

/* ---------- Contact card ---------- */
.ec-contact{
  align-self: flex-start; max-width: 92%;
  background: #fff; border: 1px solid var(--ec-rule);
  border-left: 3px solid var(--ec-green);
  border-radius: 12px; padding: 11px 13px;
}
.ec-contact-eyebrow{
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ec-green); margin-bottom: 4px;
}
.ec-contact-name{ font-weight: 700; font-size: 13.5px; color: var(--ec-ink); }
.ec-contact-title{ font-weight: 500; font-size: 11.5px; color: var(--ec-mid); margin-top: 1px; }
.ec-contact-talk{ font-weight: 500; font-size: 12px; color: var(--ec-mid); margin-top: 6px; line-height: 1.45; }
.ec-contact-methods{ display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.ec-contact-methods a, .ec-contact-methods span{
  font-weight: 600; font-size: 12px; color: var(--ec-blue);
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; overflow-wrap: anywhere;
}
.ec-contact-methods a:hover{ text-decoration: underline; }
.ec-contact-methods svg{ width: 13px; height: 13px; flex: none; }

/* ---------- Chips (quick replies / clarify options / next step) ---------- */
.ec-chips{
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 2px 2px 4px;
}
.ec-chip{
  font-family: inherit; font-weight: 600; font-size: 12.5px;
  color: var(--ec-blue); background: #fff;
  border: 1px solid #cdd8ea; border-radius: 999px;
  padding: 8px 14px; cursor: pointer; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 6px;
  /* A long label (e.g. "Explore Quality Assurance & Compliance") wraps inside
     the chip instead of spilling past the panel edge. */
  max-width: 100%; text-align: left; white-space: normal;
  overflow-wrap: anywhere;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ec-chip:hover{ background: var(--ec-blue); color: #fff; border-color: var(--ec-blue); }
.ec-chip svg{ width: 13px; height: 13px; }

/* Next-step chip reads as the primary action */
.ec-chip--next{
  background: var(--ec-green); color: #07330a; border-color: var(--ec-green);
  font-weight: 700;
}
.ec-chip--next:hover{ background: #6aa81d; border-color: #6aa81d; color: #07330a; }

/* ---------- Composer ---------- */
.ec-form{
  flex: none; display: flex; gap: 8px; align-items: flex-end;
  padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ec-rule); background: #fff;
}
.ec-input{
  flex: 1 1 auto; resize: none;
  /* 16px is deliberate and load-bearing: iOS Safari force-zooms the page when
     a focused field is under 16px, and with no maximum-scale it never zooms
     back, which is exactly the "text got too big, I had to zoom out" report.
     Hold this at >= 16px on touch. */
  font-family: inherit; font-weight: 500; font-size: 16px; color: var(--ec-ink);
  border: 1px solid #cdd8ea; border-radius: 12px;
  padding: 10px 12px; max-height: 96px; line-height: 1.4;
  background: var(--ec-tint);
}
/* On a comfortable pointer (desktop) the smaller type reads better and there
   is no auto-zoom risk. */
@media (min-width: 521px) and (pointer: fine){
  .ec-input{ font-size: 13.5px; }
}
.ec-input::placeholder{ color: var(--ec-soft); }
.ec-send{
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 12px;
  background: var(--ec-navy); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease;
}
.ec-send:hover:not(:disabled){ background: var(--ec-blue); }
.ec-send:disabled{ opacity: .4; cursor: default; }
.ec-send svg{ width: 18px; height: 18px; }

/* Coarse pointers (touch): grow the header-close and send hit areas to the
   44px minimum so they are reliably tappable, not fiddly. */
@media (pointer: coarse){
  .ec-head-close{ width: 40px; height: 40px; }
  .ec-send{ width: 46px; height: 46px; }
  .ec-chip{ padding: 10px 16px; }
}

/* ---------- Focus visibility (accessibility, not optional) ---------- */
.env-concierge :focus-visible,
.ec-launcher:focus-visible{
  outline: 3px solid var(--ec-green);
  outline-offset: 2px;
  border-radius: 8px;
}
.ec-head-close:focus-visible, .ec-send:focus-visible{ outline-offset: 2px; }

/* High-contrast / forced colors: keep borders visible */
@media (forced-colors: active){
  .ec-chip, .ec-bubble, .ec-contact, .ec-input{ border: 1px solid CanvasText; }
}

/* Screen-reader-only utility */
.ec-sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}