/* ============================================================
   expertsearch assistant — the widget
   ------------------------------------------------------------
   Self-contained on purpose: the plugin has to survive a theme
   change, so it declares the register's own tokens rather than
   assuming main.css is present. The values are identical to the
   site's, so the panel reads as part of expertsearch and not as a
   third-party chat product bolted to the corner.

   Two things this file has to get right beyond looking well:

   1. SCROLL CONTAINMENT. The site loads Lenis, which binds its own
      wheel listener on window and drives the page itself, so the
      browser's native overscroll-behavior never gets a say. Reading
      the conversation would scroll the page underneath it. The log
      therefore carries data-lenis-prevent AND stops wheel/touch
      events in JS - two defences, because they fail differently.

   2. THEME PINNING. WordPress themes paint bare <button> hovers.
      A blue hover inside a navy-and-gold panel is exactly the
      detail that makes a widget look bought rather than built, so
      every interactive element is pinned flat and given its own
      state back.
   ============================================================ */

.efc,
.efc-launch {
  --efc-canvas: #0B1E33;
  --efc-canvas-2: #13314F;
  --efc-canvas-3: #0E2740;
  --efc-accent: #E0A53B;
  --efc-accent-deep: #C68A24;
  --efc-accent-ink: #3D2A06;
  --efc-paper: #F7F8FA;
  --efc-paper-2: #EEF1F6;
  --efc-ink: #1F2933;
  --efc-ink-soft: #4A5568;
  --efc-on-dark: #F2EFE9;
  --efc-muted: #8FA3B8;
  --efc-line: rgba(20, 32, 50, .12);
  --efc-line-dark: rgba(242, 239, 233, .16);
  --efc-sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --efc-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --efc-ease: cubic-bezier(.22, .61, .36, 1);
  --efc-shadow: 0 30px 70px -20px rgba(8, 22, 40, .45), 0 8px 24px -12px rgba(8, 22, 40, .3);
}

.efc *,
.efc *::before,
.efc *::after,
.efc-launch * {
  box-sizing: border-box;
}

/* ============================================================
   THE LAUNCHER
   ============================================================ */

.efc-launch,
.efc-launch:hover,
.efc-launch:focus,
.efc-launch:active {
  border: 0 !important;
  text-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.efc-launch {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 78;                  /* below the directory's selection tray (80) */
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 22px 0 15px;
  height: 54px;
  font: 600 14px/1 var(--efc-sans);
  letter-spacing: .01em;
  color: var(--efc-accent-ink) !important;
  background: linear-gradient(145deg, #F0B84D 0%, var(--efc-accent) 42%, var(--efc-accent-deep) 100%) !important;
  /* the doorway, at button scale - the site's signature radius */
  border-radius: 999px 999px 12px 12px;
  cursor: pointer;
  box-shadow: 0 14px 32px -10px rgba(198, 138, 36, .6),
              0 4px 10px -4px rgba(8, 22, 40, .35);
  transition: transform .24s var(--efc-ease), box-shadow .24s var(--efc-ease),
              filter .24s var(--efc-ease);
}

.efc-launch:hover,
.efc-launch:focus-visible {
  transform: translateY(-3px);
  filter: saturate(1.06);
  box-shadow: 0 20px 42px -10px rgba(198, 138, 36, .68),
              0 6px 14px -4px rgba(8, 22, 40, .4);
}

.efc-launch:active { transform: translateY(-1px); }

.efc-launch:focus-visible {
  outline: 2px solid var(--efc-canvas);
  outline-offset: 3px;
}

/* the arch, carrying the same mark the site's search fields use */
.efc-launch__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--efc-accent-ink);
  background: rgba(255, 255, 255, .32);
  border-radius: 999px 999px 7px 7px;
}

/* a quiet pulse, once, so the launcher is noticed without nagging */
@media (prefers-reduced-motion: no-preference) {
  .efc-launch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--efc-accent);
    opacity: 0;
    animation: efcRing 2.6s var(--efc-ease) 1.5s 3;
    pointer-events: none;
  }
}

@keyframes efcRing {
  0%   { opacity: .7; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.28); }
  100% { opacity: 0;  transform: scale(1.28); }
}

/* the directory's selection tray already owns the bottom of that page */
body.has-ewd-tray .efc-launch {
  bottom: calc(var(--ewd-tray-h, 96px) + 20px);
}

/* ============================================================
   THE PANEL
   ============================================================ */

.efc {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 79;
  display: flex;
  flex-direction: column;
  width: min(94vw, 412px);
  height: min(76vh, 640px);
  overflow: hidden;
  background: #fff;
  border-radius: 20px 20px 14px 14px;
  box-shadow: var(--efc-shadow);
  font-family: var(--efc-sans);
  /* nothing inside this panel may scroll the page behind it */
  overscroll-behavior: contain;
}

.efc[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .efc { animation: efcIn .26s var(--efc-ease); transform-origin: bottom right; }
}

@keyframes efcIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

body.efc-open .efc-launch { display: none; }

/* ---------- head ---------- */

.efc__head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 15px 16px 19px;
  color: var(--efc-on-dark);
  background: linear-gradient(150deg, var(--efc-canvas-2) 0%, var(--efc-canvas) 72%);
  overflow: hidden;
}

/* the arcade frieze, the motif every dark band on this site carries */
.efc__head::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 74'%3E%3Cpath d='M0 74V64a50 50 0 0 1 100 0v10' fill='none' stroke='%23E0A53B' stroke-width='1.4' stroke-opacity='.34'/%3E%3Crect x='45' y='9' width='10' height='10' rx='1.5' transform='rotate(45 50 14)' fill='%23E0A53B' fill-opacity='.4'/%3E%3C/svg%3E");
  background-size: 46px 34px;
  background-repeat: repeat-x;
  background-position: bottom left;
  opacity: .75;
  pointer-events: none;
}

/* the gold-led rule the site opens every section with */
.efc__head::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--efc-accent) 0 72px, var(--efc-line-dark) 72px);
}

.efc__badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  color: var(--efc-accent);
  background: rgba(224, 165, 59, .13);
  border: 1px solid rgba(224, 165, 59, .38);
  border-radius: 999px 999px 8px 8px;
}

.efc__heading {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.efc__title {
  margin: 0;
  font: 500 16px/1.2 var(--efc-serif);
  letter-spacing: -.005em;
  color: var(--efc-on-dark);
}

.efc__subtitle {
  margin: 3px 0 0;
  font: 400 11.5px/1.35 var(--efc-sans);
  color: var(--efc-muted);
}

.efc__close,
.efc__close:hover,
.efc__close:focus,
.efc__close:active {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.efc__close {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0 !important;
  color: var(--efc-muted) !important;
  border-radius: 50% !important;
  cursor: pointer;
  transition: color .16s var(--efc-ease), background-color .16s var(--efc-ease);
}

.efc__close:hover,
.efc__close:focus-visible {
  color: var(--efc-accent) !important;
  background: rgba(224, 165, 59, .16) !important;
}

/* ============================================================
   THE LOG
   ============================================================ */

.efc__log {
  flex: 1 1 auto;
  min-height: 0;                 /* lets the flex child actually scroll */
  padding: 20px 18px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;  /* the wheel stops at the panel edge */
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(224, 165, 59, .06), transparent 70%),
    var(--efc-paper);
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 32, 50, .22) transparent;
}

.efc__log::-webkit-scrollbar { width: 9px; }
.efc__log::-webkit-scrollbar-track { background: transparent; }
.efc__log::-webkit-scrollbar-thumb {
  background: rgba(20, 32, 50, .2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
.efc__log::-webkit-scrollbar-thumb:hover { background: var(--efc-accent-deep); background-clip: content-box; }

.efc-msg {
  margin: 0 0 18px;
  animation: efcMsg .26s var(--efc-ease);
}

@media (prefers-reduced-motion: reduce) {
  .efc-msg { animation: none; }
}

@keyframes efcMsg {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.efc-msg__who {
  display: block;
  margin-bottom: 6px;
  font: 600 9px/1 var(--efc-sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--efc-ink-soft);
  opacity: .75;
}

.efc-msg__text {
  margin: 0;
  padding: 13px 15px;
  font: 400 14px/1.62 var(--efc-sans);
  color: var(--efc-ink);
  background: #fff;
  border: 1px solid var(--efc-line);
  border-radius: 3px 14px 14px 14px;
  box-shadow: 0 2px 6px -2px rgba(8, 22, 40, .07);
  overflow-wrap: anywhere;
}

/* the register's hairline, marking an answer that carries data */
.efc-msg--bot .efc-msg__text {
  border-left: 3px solid var(--efc-accent);
}

/* a reply the model wrote: no data behind it, so no gold rule */
.efc-msg--spoken .efc-msg__text {
  border-left: 1px solid var(--efc-line);
  background: linear-gradient(180deg, #fff, var(--efc-paper-2));
}

.efc-msg--you { padding-left: 34px; }
.efc-msg--you .efc-msg__who { text-align: right; }

.efc-msg--you .efc-msg__text {
  color: var(--efc-on-dark);
  background: linear-gradient(150deg, var(--efc-canvas-2), var(--efc-canvas));
  border-color: transparent;
  border-radius: 14px 3px 14px 14px;
  box-shadow: 0 4px 12px -4px rgba(8, 22, 40, .3);
}

/* the count, lifted out of the sentence so it reads at a glance */
.efc-msg__figure {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--efc-line);
}

.efc-msg__figure b {
  font: 500 25px/1 var(--efc-serif);
  color: var(--efc-canvas);
  letter-spacing: -.01em;
}

.efc-msg__figure span {
  font: 600 10px/1.3 var(--efc-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--efc-ink-soft);
}

/* ---------- actions ---------- */

.efc-msg__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.efc-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 17px;
  font: 600 12.5px/1 var(--efc-sans);
  text-decoration: none !important;
  border-radius: 999px 999px 8px 8px;
  transition: background .18s var(--efc-ease), transform .18s var(--efc-ease),
              box-shadow .18s var(--efc-ease), border-color .18s var(--efc-ease);
}

.efc-cta--primary {
  color: var(--efc-accent-ink) !important;
  background: var(--efc-accent);
  box-shadow: 0 6px 16px -6px rgba(198, 138, 36, .7);
}

.efc-cta--primary:hover,
.efc-cta--primary:focus-visible {
  background: var(--efc-accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(198, 138, 36, .8);
}

.efc-cta--secondary {
  color: var(--efc-ink) !important;
  background: #fff;
  border: 1px solid var(--efc-line);
}

.efc-cta--secondary:hover,
.efc-cta--secondary:focus-visible {
  color: var(--efc-accent-deep) !important;
  border-color: var(--efc-accent-deep);
  transform: translateY(-2px);
}

.efc-cta .efc-arr { transition: transform .18s var(--efc-ease); }
.efc-cta:hover .efc-arr { transform: translateX(3px); }

/* ---------- chips: real cities, one tap ---------- */

.efc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.efc-chip,
.efc-chip:focus,
.efc-chip:active {
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.efc-chip {
  padding: 8px 14px;
  font: 500 12.5px/1 var(--efc-sans);
  color: var(--efc-ink) !important;
  background: #fff !important;
  border: 1px solid var(--efc-line) !important;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .16s var(--efc-ease), color .16s var(--efc-ease),
              transform .16s var(--efc-ease), background-color .16s var(--efc-ease);
}

.efc-chip:hover,
.efc-chip:focus-visible {
  color: var(--efc-accent-deep) !important;
  background: rgba(224, 165, 59, .08) !important;
  border-color: rgba(198, 138, 36, .55) !important;
  transform: translateY(-1px);
}

/* ---------- thinking ---------- */

.efc-msg--thinking .efc-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 15px 17px;
  background: #fff;
  border: 1px solid var(--efc-line);
  border-left: 3px solid var(--efc-accent);
  border-radius: 3px 14px 14px 14px;
}

.efc-dots i {
  width: 6px;
  height: 6px;
  background: var(--efc-accent-deep);
  border-radius: 50%;
  opacity: .3;
}

@media (prefers-reduced-motion: no-preference) {
  .efc-dots i { animation: efcPulse 1.15s infinite; }
  .efc-dots i:nth-child(2) { animation-delay: .16s; }
  .efc-dots i:nth-child(3) { animation-delay: .32s; }
}

@keyframes efcPulse {
  0%, 62%, 100% { opacity: .28; transform: translateY(0); }
  31%           { opacity: 1;   transform: translateY(-2px); }
}

/* ============================================================
   THE FORM
   ============================================================ */

.efc__form {
  flex: none;
  display: flex;
  gap: 9px;
  padding: 13px 14px 14px;
  background: #fff;
  border-top: 1px solid var(--efc-line);
  box-shadow: 0 -6px 18px -14px rgba(8, 22, 40, .4);
}

.efc__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 15px !important;
  font: 400 14px/46px var(--efc-sans) !important;
  color: var(--efc-ink) !important;
  background: var(--efc-paper) !important;
  border: 1.5px solid transparent !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  transition: border-color .18s var(--efc-ease), background-color .18s var(--efc-ease),
              box-shadow .18s var(--efc-ease);
}

.efc__input:hover { border-color: rgba(198, 138, 36, .35) !important; }

.efc__input:focus {
  outline: none !important;
  background: #fff !important;
  border-color: var(--efc-accent) !important;
  box-shadow: 0 0 0 3px rgba(224, 165, 59, .18) !important;
}

.efc__input::placeholder { color: var(--efc-ink-soft); opacity: .6; }

.efc__send,
.efc__send:focus,
.efc__send:active {
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.efc__send {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0 !important;
  color: var(--efc-accent-ink) !important;
  background: var(--efc-accent) !important;
  border: 0 !important;
  border-radius: 999px 999px 10px 10px !important;
  cursor: pointer;
  transition: background-color .18s var(--efc-ease), transform .18s var(--efc-ease);
}

.efc__send:hover:not(:disabled),
.efc__send:focus-visible:not(:disabled) {
  background: var(--efc-accent-deep) !important;
  transform: translateY(-1px);
}

.efc__send:disabled { opacity: .45; cursor: default; }

.efc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.efc a:focus-visible,
.efc button:focus-visible {
  outline: 2px solid var(--efc-accent-deep);
  outline-offset: 2px;
}

/* ============================================================
   PHONES — full width, and the panel owns the screen
   ============================================================ */

@media (max-width: 520px) {
  .efc {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 88vh;
    height: 88dvh;               /* the keyboard must not push the form away */
    border-radius: 18px 18px 0 0;
  }
  .efc__log { padding: 16px 14px 4px; }
  .efc-launch {
    right: 16px;
    bottom: 16px;
    height: 50px;
    padding: 0 18px 0 13px;
  }
  .efc-launch__label { display: none; }
  .efc-launch { padding: 0 13px; }
}

@media print {
  .efc, .efc-launch { display: none !important; }
}