/* ---------------------------------------------------------------------
   Live chat widget
   ---------------------------------------------------------------------
   Replaces tawk.to. This is our own, so it can look like us: the
   company's navy and green, flat colours, no gradients, and nobody
   else's branding in the corner of our website.

   Everything is prefixed .sfc- so it cannot collide with the marketing
   pages' own styles, which are extensive and were not written with a
   widget in mind.

   It is deliberately independent of the site's stylesheets: the widget
   has to look right on every page, including ones written years apart,
   so it brings its own type sizes and colours rather than inheriting
   whatever the page happens to set.
   --------------------------------------------------------------------- */
.sfc {
  --sfc-navy: #0C2B4A;
  --sfc-navy-soft: #16375A;
  --sfc-green: #17874A;
  --sfc-ink: #17222E;
  --sfc-muted: #6B7A8C;
  --sfc-line: #E2E8F0;
  --sfc-bg: #FFFFFF;
  --sfc-panel: #F7F9FB;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── The button ───────────────────────────────────────────────────── */
.sfc-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--sfc-green);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(12, 43, 74, .28);
  margin-left: auto;
}

.sfc-btn:hover { background: #12703C; }
.sfc-btn svg { width: 20px; height: 20px; }

.sfc-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #C0392B;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}

.sfc.is-open .sfc-btn { display: none; }

/* ── The panel ────────────────────────────────────────────────────── */
.sfc-panel {
  display: none;
  flex-direction: column;
  width: 368px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 110px);
  background: var(--sfc-bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(12, 43, 74, .26);
}

.sfc.is-open .sfc-panel { display: flex; }

.sfc-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  background: var(--sfc-navy);
  color: #fff;
  flex: 0 0 auto;
}

.sfc-head-av {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--sfc-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.sfc-head-av svg { width: 20px; height: 20px; }

.sfc-head-txt { flex: 1; min-width: 0; }
.sfc-head-name { font-size: 14.5px; font-weight: 650; }
.sfc-head-sub {
  font-size: 12px;
  opacity: .85;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.sfc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  flex: 0 0 auto;
}
.sfc-dot.is-off { background: #FBBF24; }

.sfc-x {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  opacity: .8;
  line-height: 0;
  border-radius: 8px;
}
.sfc-x:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.sfc-x svg { width: 17px; height: 17px; }

/* ── The conversation ─────────────────────────────────────────────── */
.sfc-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--sfc-panel);
  min-height: 0;
}

.sfc-msg {
  max-width: 82%;
  margin-bottom: 11px;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 13px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--sfc-line);
  color: var(--sfc-ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sfc-msg--me {
  margin-left: auto;
  background: var(--sfc-navy);
  border-color: var(--sfc-navy);
  color: #fff;
}

.sfc-who {
  font-size: 11px;
  color: var(--sfc-muted);
  margin: 0 0 3px 2px;
  font-weight: 600;
}

/* The system speaking rather than a person: centred and quiet, so it is
   never mistaken for somebody having replied. */
.sfc-msg--sys {
  max-width: 100%;
  background: transparent;
  border: 0;
  text-align: center;
  color: var(--sfc-muted);
  font-size: 12.5px;
  padding: 4px 0;
}

/* ── Choosing a department ────────────────────────────────────────── */
.sfc-pick { margin-bottom: 12px; }
.sfc-pick-q {
  font-size: 12.5px;
  color: var(--sfc-muted);
  margin-bottom: 7px;
}

.sfc-dept {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  margin-bottom: 7px;
  border: 1px solid var(--sfc-line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--sfc-ink);
}
.sfc-dept:hover { border-color: var(--sfc-green); }
.sfc-dept.is-on { border-color: var(--sfc-green); background: #F0FAF4; }
.sfc-dept small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--sfc-muted);
  margin-top: 2px;
}

/* ── Who they are ─────────────────────────────────────────────────── */
.sfc-lead { margin-bottom: 12px; }

.sfc-in {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sfc-line);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--sfc-ink);
  background: #fff;
  margin-bottom: 7px;
  box-sizing: border-box;
}
.sfc-in:focus { outline: 2px solid var(--sfc-green); outline-offset: -1px; }

/* ── The composer ─────────────────────────────────────────────────── */
.sfc-foot {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 11px 12px;
  border-top: 1px solid var(--sfc-line);
  background: #fff;
  flex: 0 0 auto;
}

.sfc-text {
  flex: 1;
  border: 1px solid var(--sfc-line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  max-height: 96px;
  color: var(--sfc-ink);
  box-sizing: border-box;
}
.sfc-text:focus { outline: 2px solid var(--sfc-green); outline-offset: -1px; }

.sfc-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--sfc-green);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfc-send:hover { background: #12703C; }
.sfc-send:disabled { opacity: .5; cursor: default; }
.sfc-send svg { width: 18px; height: 18px; }

.sfc-note {
  padding: 8px 14px 11px;
  font-size: 11px;
  color: var(--sfc-muted);
  text-align: center;
  background: #fff;
}

/* ── Rating ───────────────────────────────────────────────────────── */
.sfc-rate { text-align: center; padding: 10px 0; }
.sfc-rate-q { font-size: 12.5px; color: var(--sfc-muted); margin-bottom: 7px; }
.sfc-star {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 23px;
  color: #CBD5E1;
  padding: 0 2px;
  line-height: 1;
}
.sfc-star:hover, .sfc-star.is-on { color: #F59E0B; }

/* ── Small screens ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sfc { right: 12px; bottom: 12px; left: 12px; }
  .sfc-panel { width: 100%; height: calc(100vh - 90px); }
  .sfc-btn { margin-left: auto; }
}

/* Somebody who would rather not have things move. */
@media (prefers-reduced-motion: reduce) {
  .sfc * { transition: none !important; animation: none !important; }
}