/* The chat in the corner of every page (js/chat.js, 2026-10-16): a button in the bottom right that opens a panel where a
   visitor asks about the service, answered only from what the website says. Its own colours, so it looks the same on
   the homepage, the blog and the privacy page. */
.dchat {
  --dc-navy: #0b1329;
  --dc-panel: #121d3d;
  --dc-ink: #f3f5fa;
  --dc-dim: #b9c1d6;
  --dc-accent: #8fbcff;
  --dc-orange: linear-gradient(180deg, #e4561a 0%, #d9480f 50%, #bd3c0c 100%);   /* the send button */
  --dc-ease: cubic-bezier(.16, .8, .2, 1);
  --dc-gap: 16px;
  --dc-lift: 0px;   /* raised above the spoken summary's bar while that plays (below) */
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
/* The closed button: always there, never asking for attention (Barrett, 2026-10-16: the orange and the pulse were too
   much, "clearly there balancing prominence against non-distraction"). A solid white pill that holds still: white on the
   page's navy bands, and on its light ones a navy edge and a shadow keep it defined. A navy badge with the chat mark,
   and the words. Nothing moves until it's pointed at. */
.dchat-launch {
  position: fixed; z-index: 45; right: var(--dc-gap); bottom: calc(var(--dc-gap) + var(--dc-lift) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; height: 54px; margin: 0; padding: 0 20px 0 7px;
  border: 1.5px solid rgb(11 19 41 / .55); border-radius: 999px; background: #fff; color: var(--dc-navy);
  font: inherit; font-size: 16px; font-weight: 750; letter-spacing: -.005em; cursor: pointer;
  box-shadow: 0 12px 30px rgb(5 10 24 / .28), 0 2px 6px rgb(5 10 24 / .16);
  transition: transform .2s var(--dc-ease), bottom .35s var(--dc-ease), opacity .25s var(--dc-ease), border-color .2s var(--dc-ease), box-shadow .2s var(--dc-ease);
}
.dchat-launch:hover { transform: translateY(-1px); border-color: var(--dc-navy); box-shadow: 0 14px 34px rgb(5 10 24 / .32), 0 2px 6px rgb(5 10 24 / .18); }
.dchat-launch:focus-visible { outline: 3px solid #1e40af; outline-offset: 3px; }
.dchat-launch-badge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dc-navy); color: #fff; }
.dchat-launch svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.dchat-launch-words { white-space: nowrap; }
.dchat.open .dchat-launch { opacity: 0; pointer-events: none; transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .dchat-launch { transition: none; } }
/* The greeting bubble above the button (Barrett, 2026-10-22: "make the chat bot more prominent, the goal is to get it seen
   by every visitor, but not to be gaudy"): a white speech bubble with one line and a dismiss cross, there from the start
   and holding still, like the button (nothing pulses or slides in), until it's dismissed, the chat is opened or a question
   has been asked; then gone for the visit. While it's up, a small orange dot sits on the button's badge. On a short phone
   screen it stays away, so it never covers the hero's form. */
.dchat-hello {
  position: fixed; z-index: 45; right: var(--dc-gap); bottom: calc(var(--dc-gap) + var(--dc-lift) + 54px + 12px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: flex-start; gap: 6px; max-width: min(300px, calc(100vw - 2 * var(--dc-gap)));
  padding: 12px 10px 12px 16px; border: 1.5px solid rgb(11 19 41 / .2); border-radius: 16px 16px 4px 16px; background: #fff; color: var(--dc-navy);
  box-shadow: 0 12px 30px rgb(5 10 24 / .24), 0 2px 6px rgb(5 10 24 / .12); font-size: 15px; line-height: 1.4;
}
.dchat.hello .dchat-hello { display: flex; }
.dchat.open .dchat-hello { display: none; }
.dchat-hello::after { content: ""; position: absolute; right: 24px; bottom: -7.5px; width: 12px; height: 12px; background: #fff; border-right: 1.5px solid rgb(11 19 41 / .2); border-bottom: 1.5px solid rgb(11 19 41 / .2); transform: rotate(45deg); }   /* the tail, toward the button */
.dchat-hello-words { margin: 0; cursor: pointer; }
.dchat-hello-words b { font-weight: 750; }
.dchat-hello-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -2px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgb(11 19 41 / .6); cursor: pointer; }
.dchat-hello-x:hover { background: rgb(11 19 41 / .08); color: var(--dc-navy); }
.dchat-hello-x:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }
.dchat-hello-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.dchat-launch-badge { position: relative; }
.dchat-launch-badge::after { content: ""; position: absolute; top: -1px; right: -1px; display: none; width: 12px; height: 12px; border-radius: 50%; background: #e4561a; border: 2px solid #fff; }
.dchat.hello .dchat-launch-badge::after { display: block; }
@media (max-height: 640px) { .dchat.hello .dchat-hello { display: none; } }
/* on a phone the corner stays small (Barrett, 2026-10-29: "fix the chat bubble on phones"; the greeting and the wide
   button covered about a quarter of the first screen, right under the hero's form): no greeting bubble, and the button is
   the round badge alone, its words kept for screen readers. The orange dot on the badge still says there's someone to ask. */
@media (max-width: 599px) {
  .dchat { --dc-gap: 14px; }
  .dchat.hello .dchat-hello { display: none; }
  .dchat-launch { width: 52px; height: 52px; gap: 0; padding: 0; justify-content: center; }
  .dchat-launch-badge { width: 40px; height: 40px; }
  .dchat-launch svg { width: 21px; height: 21px; }
  .dchat-launch-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* the homepage's spoken summary docks a bar at the foot of the screen while it plays: the button goes up above it */
body:has(.voice-dock.show) .dchat { --dc-lift: 82px; }

.dchat-panel {
  position: fixed; z-index: 60; right: var(--dc-gap); bottom: calc(var(--dc-gap) + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 2 * var(--dc-gap))); height: min(620px, calc(100dvh - 2 * var(--dc-gap)));
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgb(143 188 255 / .3); border-radius: 20px; background: var(--dc-panel); color: var(--dc-ink);
  box-shadow: 0 24px 60px rgb(0 0 0 / .5);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98); transform-origin: bottom right;
  transition: opacity .25s var(--dc-ease), transform .3s var(--dc-ease), visibility 0s linear .3s;
}
.dchat.open .dchat-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--dc-ease), transform .3s var(--dc-ease), visibility 0s; }
@media (max-width: 599px) {
  .dchat-panel { --dc-gap: 8px; height: calc(100dvh - 2 * var(--dc-gap) - env(safe-area-inset-bottom, 0px)); border-radius: 18px; }
}
.dchat-head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 16px 12px 14px 18px; background: var(--dc-navy); border-bottom: 1px solid rgb(255 255 255 / .08); }
.dchat-head-words { flex: 1; min-width: 0; }
.dchat-title { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; color: #fff; }
.dchat-sub { margin: 3px 0 0; font-size: 13px; line-height: 1.35; color: var(--dc-dim); }
/* Start new chat (Barrett, 2026-10-22): a small outlined pill in the header, beside the close cross */
.dchat-new { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; margin: -1px 0 0; padding: 0 11px 0 8px; border: 1px solid rgb(255 255 255 / .28); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; }
.dchat-new:hover { border-color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .08); }
.dchat-new:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 1px; }
.dchat-new svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (max-width: 599px) { .dchat-new span { display: none; } .dchat-new { width: 32px; padding: 0; justify-content: center; } }   /* the plus alone on a phone */
.dchat-x { flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin: -4px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dc-dim); cursor: pointer; }
.dchat-x:hover { color: #fff; background: rgb(255 255 255 / .08); }
.dchat-x:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 1px; }
.dchat-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.dchat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 12px; }
.dchat-msg { max-width: 88%; margin: 0; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.dchat-msg.from-us { align-self: flex-start; background: #fff; color: #050a18; border-bottom-left-radius: 6px; }
.dchat-msg.from-you { align-self: flex-end; background: #2a3d78; color: #fff; border-bottom-right-radius: 6px; }
.dchat-msg.is-error { background: #fff4ef; }
.dchat-msg a { color: #1e40af; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.dchat-msg.from-you a { color: #fff; }
.dchat-dots { display: inline-flex; gap: 5px; padding: 4px 2px; }
.dchat-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8b93a8; animation: dchat-dot 1.1s ease-in-out infinite; }
.dchat-dots i:nth-child(2) { animation-delay: .15s; } .dchat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dchat-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .dchat-dots i { animation: none; opacity: .7; } .dchat-panel { transition: none; } }
/* questions to start with, before anything's been asked */
.dchat-starts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.dchat-start { margin: 0; padding: 8px 13px; border: 1px solid rgb(143 188 255 / .45); border-radius: 999px; background: transparent; color: var(--dc-ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; transition: background-color .2s var(--dc-ease), border-color .2s var(--dc-ease); }
.dchat-start:hover { background: rgb(143 188 255 / .12); border-color: var(--dc-accent); }
.dchat-start:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }

.dchat-form { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 10px 12px 8px; border-top: 1px solid rgb(255 255 255 / .08); background: var(--dc-navy); }
.dchat-input { flex: 1; min-width: 0; min-height: 46px; max-height: 132px; margin: 0; padding: 12px 14px; border: 1px solid rgb(255 255 255 / .16); border-radius: 14px; background: #fff; color: #050a18; font: inherit; font-size: 16px; line-height: 1.35; resize: none; }
.dchat-input::placeholder { color: #6b7489; }
.dchat-input:focus { outline: none; border-color: var(--dc-accent); box-shadow: 0 0 0 3px rgb(143 188 255 / .45); }
.dchat-send { flex: none; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 1.5px solid #b73c0c; border-radius: 50%; background: var(--dc-orange); color: #fff; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / .22); }
.dchat-send:disabled { opacity: .5; cursor: default; }
.dchat-send:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }
.dchat-send svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dchat-foot { flex: none; margin: 0; padding: 0 14px 12px; background: var(--dc-navy); font-size: 13px; line-height: 1.4; color: var(--dc-dim); }
.dchat-foot a { color: var(--dc-accent); font-weight: 650; text-decoration: none; }
.dchat-foot a:hover { text-decoration: underline; }