/*
 * The floating assistant widget, from the approved design.
 *
 * The design ships these rules inside `js/mph-ai-widget.js`, which injects a
 * `<style>` element at runtime: one file shared across several MPH themes, each
 * with its own skin. We render the widget as a React component instead, so the
 * rules are extracted here and the alternate skins (`mphw-t-mph1` ... `mph5`),
 * the search overlay and the slide-in drawer are left behind - this site uses
 * the floating stack and the chat panel, and a rule that can never match is a
 * rule nobody can maintain.
 *
 * Extracted from the design rather than rewritten, then refined where the
 * design's trial widget did not hold up as a real conversation: a scrollbar
 * that swallowed a tenth of the panel, bubbles with no room to breathe, and a
 * header that did not separate from the transcript. The brand's colours and
 * geometry are unchanged. Kept out of the bundle for the same reason
 * as the rest of the design CSS: it is copied into public/ by
 * `scripts/sync-design.mjs` and linked, because Lightning CSS drops duplicate
 * `!important` declarations that the design relies on.
 *
 * Source: mph-html-design/js/mph-ai-widget.js
 */

.mphw-stack {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:99990;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
.mphw-btn {
  position:relative;
  width:54px;
  height:54px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .25s ease,box-shadow .25s ease;
}
.mphw-btn:hover {
  transform:scale(1.09);
}
.mphw-btn svg {
  width:24px;
  height:24px;
  display:block;
}
.mphw-btn-ai {
  background:linear-gradient(135deg,#015485,#1998d5);
}
.mphw-btn-ai::after {
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid rgba(25,152,213,.55);
  animation:mphw-ping 2.4s ease-out infinite;
  pointer-events:none;
}
.mphw-btn-ai svg {
  animation:mphw-spark 2.4s ease-in-out infinite;
}
.mphw-btn-wa {
  background:#25d366;
}
.mphw-btn-wa:hover {
  background:#1ebe5d;
}
.mphw-btn-call {
  background:#1C97D4;
}
.mphw-btn-call:hover {
  background:#157fb5;
}
.mphw-btn[data-tip]::before {
  content:attr(data-tip);
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.3px;
  padding:6px 13px;
  border-radius:99px;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s;
}
.mphw-btn[data-tip]:hover::before {
  opacity:1;
  visibility:visible;
}
.mphw-btn-ai[data-tip]::before {
  background:linear-gradient(135deg,#015485,#1998d5);
}
.mphw-btn-wa[data-tip]::before {
  background:#25d366;
}
.mphw-btn-call[data-tip]::before {
  background:#1C97D4;
}
@keyframes mphw-ping {
  0% {
    transform:scale(.9);
    opacity:.8;
  }
  70% {
    transform:scale(1.35);
    opacity:0;
  }
  100% {
    transform:scale(1.35);
    opacity:0;
  }
}
@keyframes mphw-spark {
  0%,
100% {
    opacity:1;
    transform:scale(1);
  }
  50% {
    opacity:.6;
    transform:scale(.85);
  }
}
.mphw-chat {
  position:fixed;
  right:22px;
  bottom:96px;
  z-index:99991;
  width:min(360px,calc(100vw - 32px));
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 60px rgba(1,84,133,.28);
  border:1px solid #e2e8f0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.mphw-chat.mphw-open {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.mphw-stack {
  transition:opacity .3s ease;
}
.mphw-chat-head {
  background:linear-gradient(120deg,#015485,#1998d5);
  color:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  /* Lifts the header over the transcript. Without it the first message scrolls
     up against the gradient and looks like it is sliding underneath. */
  box-shadow:0 1px 8px rgba(1,61,98,.18);
  position:relative;
  z-index:1;
}
.mphw-chat-head-id {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.mphw-chat-head-icon {
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.mphw-chat-head-icon svg {
  width:17px;
  height:17px;
}
.mphw-chat-title {
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  margin:0;
}
.mphw-chat-sub {
  font-size:11px;
  opacity:.85;
  margin:2px 0 0;
  display:flex;
  align-items:center;
  gap:5px;
}
.mphw-chat-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4ade80;
  display:inline-block;
}
.mphw-chat-close {
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  width:30px;
  height:30px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
  flex-shrink:0;
}
.mphw-chat-close:hover {
  background:rgba(255,255,255,.15);
}
.mphw-chat-close svg {
  width:16px;
  height:16px;
}
.mphw-chat-body {
  /* Taller than the design's 320px: four exchanges fit before anything
     scrolls, which is about where a booking conversation gets to. */
  height:min(384px, 52vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#f8fafc;
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  /* A thin, brand-tinted scrollbar. The platform default is a 15px grey slab
     that reads as part of the page rather than part of the panel. */
  scrollbar-width:thin;
  scrollbar-color:rgba(1,84,133,.28) transparent;
}

.mphw-chat-body::-webkit-scrollbar {
  width:6px;
}

.mphw-chat-body::-webkit-scrollbar-track {
  background:transparent;
}

.mphw-chat-body::-webkit-scrollbar-thumb {
  background:rgba(1,84,133,.24);
  border-radius:999px;
}

.mphw-chat-body:hover::-webkit-scrollbar-thumb {
  background:rgba(1,84,133,.4);
}
.mphw-msg {
  /* Narrower than the design's 88%: a bubble that stops short of the far edge
     is what makes a transcript read as a conversation rather than as a stack
     of blocks. */
  max-width:82%;
  padding:11px 14px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.6;
  /* Long words - a URL, an email address - wrap instead of widening the panel. */
  overflow-wrap:anywhere;
}
.mphw-msg-bot {
  background:#fff;
  border:1px solid rgba(1,84,133,.12);
  color:#22364a;
  align-self:flex-start;
  border-bottom-left-radius:5px;
  box-shadow:0 1px 2px rgba(1,84,133,.06);
}
.mphw-msg-user {
  background:linear-gradient(135deg,#015485,#0a6ca6);
  color:#fff;
  align-self:flex-end;
  border-bottom-right-radius:5px;
  box-shadow:0 2px 6px rgba(1,84,133,.22);
}
.mphw-typing {
  /* Sized to the dots rather than stretched to a bubble's minimum width. */
  align-self:flex-start;
  padding:12px 14px;
}

.mphw-typing span {
  display:inline-block;
  width:6px;
  height:6px;
  margin:0 1.5px;
  border-radius:50%;
  background:#94a3b8;
  animation:mphw-blink 1.2s infinite;
}
.mphw-typing span:nth-child(2) {
  animation-delay:.2s;
}
.mphw-typing span:nth-child(3) {
  animation-delay:.4s;
}
@keyframes mphw-blink {
  0%,
80%,
100% {
    opacity:.25;
  }
  40% {
    opacity:1;
  }
}
.mphw-chips {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:4px;
  /* Indented to the width of a bot bubble, so the suggestions read as coming
     from the assistant rather than as a menu bolted to the panel. */
  align-self:flex-start;
  max-width:82%;
}
.mphw-chip {
  text-align:start;
  font-size:12px;
  font-weight:500;
  background:#fff;
  border:1px solid rgba(25,152,213,.35);
  color:#015485;
  padding:8px 13px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}

.mphw-chip:hover {
  background:#f1f7fc;
  border-color:rgba(25,152,213,.6);
  transform:translateY(-1px);
}
.mphw-chip:hover {
  background:#eef6fb;
}
.mphw-chat-foot {
  background:#fff;
  border-top:1px solid #f1f5f9;
  padding:10px 12px;
}
.mphw-input-row {
  display:flex;
  align-items:center;
  gap:8px;
}
.mphw-input {
  flex:1;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:10px 15px;
  font-size:13px;
  outline:none;
  transition:border-color .2s;
  font-family:inherit;
  color:#334155;
  min-width:0;
}
.mphw-input:focus {
  border-color:#1998d5;
}
.mphw-send {
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:#015485;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
  flex-shrink:0;
}
.mphw-send:hover {
  background:#1998d5;
}
.mphw-send svg {
  width:15px;
  height:15px;
}
.mphw-disclaimer {
  /* 10px is below what most people can read comfortably, and this particular
     line - "an assistant, not a clinician" - is the one nobody should squint at. */
  font-size:11px;
  line-height:1.45;
  color:#7c8ea1;
  text-align:center;
  margin:8px 2px 0;
}
input.mphw-input:focus,
input.mphw-input:focus-visible {
  outline:none;
  box-shadow:none;
}
@media(max-width:900px) {
  .mphw-stack.mphw-raised {
    bottom:96px;
  }
  .mphw-chat.mphw-raised {
    bottom:170px;
  }
}

/* The Arabic panel ------------------------------------------------------- */

/* `flex-start` and `flex-end` follow the writing direction, so the bubbles
   swap sides by themselves. The clipped corner that gives each bubble its tail
   is a physical corner, so it has to be told. */

[dir="rtl"] .mphw-msg-bot {
  border-bottom-left-radius:14px;
  border-bottom-right-radius:5px;
}

[dir="rtl"] .mphw-msg-user {
  border-bottom-right-radius:14px;
  border-bottom-left-radius:5px;
}

[dir="rtl"] .mphw-stack,
[dir="rtl"] .mphw-chat {
  right:auto;
  left:22px;
}

/* ==========================================================================
   The quick-search overlay
   ==========================================================================

   The design's widget script builds this when the header's magnifying glass
   is clicked, and answers its submit with `openDrawer(); ask(q);` - the box
   is a front door to the assistant, not a site search. The first pass through
   `sync:design` left it behind along with the alternate skins, so the glass
   had nothing to open and was wired to a page instead.

   Taken from `js/mph-ai-widget.js` the same way the rest of this file was:
   its base rules plus the `mphw-t-mph1` skin, which is the one the script
   picks for this markup (`document.querySelector(".nav-menu")`). The other
   four skins are still left behind. The script builds its CSS by
   concatenation around two colour variables, so the rules are read by
   evaluating that expression rather than by matching the quoted fragments -
   matching them splits `border-color:` from its value and every rule after
   it is swallowed by the unclosed brace.
   ========================================================================== */

.mphw-overlay {
  position:fixed;
  inset:0;
  z-index:99995;
  background:rgba(2,32,51,.55);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:12vh 16px 16px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

.mphw-overlay.mphw-open {
  opacity:1;
  visibility:visible;
}

.mphw-search {
  width:min(580px,100%);
  background:#fff;
  border-radius:18px;
  box-shadow:0 25px 80px rgba(0,0,0,.35);
  padding:24px;
  transform:translateY(-14px);
  transition:transform .3s ease;
}

.mphw-overlay.mphw-open .mphw-search {
  transform:translateY(0);
}

.mphw-search-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}

.mphw-search-head-txt {
  min-width:0;
}

.mphw-search-kicker {
  display:none;
}

.mphw-search-title {
  font-size:16px;
  font-weight:700;
  color:#015485;
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.mphw-search-title svg {
  width:16px;
  height:16px;
  color:#1998d5;
}

.mphw-search-close {
  background:none;
  border:none;
  color:#64748b;
  cursor:pointer;
  width:30px;
  height:30px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s,color .2s;
  flex-shrink:0;
}

.mphw-search-close:hover {
  background:#f1f5f9;
  color:#015485;
}

.mphw-search-close svg {
  width:15px;
  height:15px;
}

.mphw-search-row {
  display:flex;
  align-items:stretch;
  gap:10px;
}

.mphw-search-field {
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:0 14px;
  transition:border-color .2s;
  min-width:0;
}

.mphw-search-field:focus-within {
  border-color:#1998d5;
}

.mphw-search-field svg {
  width:17px;
  height:17px;
  color:#94a3b8;
  flex-shrink:0;
}

.mphw-search-input {
  flex:1;
  border:none;
  background:none;
  outline:none;
  font-size:14px;
  color:#334155;
  padding:13px 0;
  font-family:inherit;
  min-width:0;
}

input.mphw-search-input,input.mphw-search-input:focus,input.mphw-search-input:focus-visible {
  border:none;
  outline:none;
  box-shadow:none;
  background:transparent;
}

.mphw-search-ask {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  cursor:pointer;
  background:linear-gradient(120deg,#015485,#1998d5);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.3px;
  padding:0 18px;
  border-radius:12px;
  transition:filter .2s;
  white-space:nowrap;
  font-family:inherit;
}

.mphw-search-ask:hover {
  filter:brightness(1.12);
}

.mphw-search-ask svg {
  width:14px;
  height:14px;
  animation:mphw-spark 2.4s ease-in-out infinite;
}

.mphw-search-hint {
  font-size:11px;
  color:#94a3b8;
  margin:12px 0 0;
}

.mphw-search-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.mphw-search-chip {
  background:#f1f7fb;
  border:1px solid rgba(25,152,213,.25);
  color:#015485;
  font-size:12px;
  font-weight:600;
  padding:7px 13px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s;
  font-family:inherit;
}

.mphw-search-chip:hover {
  background:#e1eff8;
}

/*
 * Search results.
 *
 * The overlay searches the site now rather than only handing the question to
 * the assistant, so the panel needs somewhere to put what it found. It takes
 * the place of the suggestion chips, and is capped and scrolled so a broad
 * query cannot push the card past the bottom of a phone screen.
 */
.mphw-search-results {
  margin-top:14px;
  max-height:min(52vh,380px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

.mphw-search-results ul {
  list-style:none;
  margin:0;
  padding:0;
}

.mphw-search-result {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:11px;
  text-decoration:none;
  color:inherit;
  transition:background .18s;
}

.mphw-search-result:hover,
.mphw-search-result:focus-visible {
  background:#f1f7fb;
}

.mphw-search-result-txt {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1;
}

.mphw-search-result-title {
  font-size:14px;
  font-weight:700;
  color:#0b3c5d;
  /* One line, because a long consultant's name must not push the kind chip
     onto a second row and make the list ragged. */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mphw-search-result-sub {
  font-size:12px;
  color:#64748b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mphw-search-result-kind {
  flex-shrink:0;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:999px;
  background:#f1f7fb;
  border:1px solid rgba(25,152,213,.25);
  color:#015485;
}

.mphw-search-result-kind.is-doctor {
  background:#eef7f1;
  border-color:rgba(34,140,87,.25);
  color:#1d6b45;
}

.mphw-search-result-kind.is-page {
  background:#f5f5f7;
  border-color:rgba(100,116,139,.25);
  color:#475569;
}

.mphw-search-empty {
  font-size:13px;
  color:#64748b;
  margin:14px 0 4px;
}

@media(max-width:520px) {
  .mphw-search-row {
    flex-direction:column;
  }
  .mphw-search-ask {
    justify-content:center;
    padding:13px 18px;
  }
}

.mphw-t-mph1 .mphw-search {
  font-family:'Araboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  border-radius:20px;
  box-shadow:0 25px 70px rgba(0,0,0,.25);
  padding:28px;
}

.mphw-t-mph1 .mphw-search-kicker {
  display:inline-block;
  background:#EBF8FF;
  color:#1c97d4;
  font-weight:700;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:99px;
  margin-bottom:12px;
}

.mphw-t-mph1 .mphw-search-title {
  font-size:22px;
  font-weight:800;
  color:#0b1e36;
  line-height:1.2;
}

.mphw-t-mph1 .mphw-search-title svg {
  display:none;
}

.mphw-t-mph1 .mphw-search-field {
  background:#F8FAFC;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:0 18px;
}

.mphw-t-mph1 .mphw-search-field:focus-within {
  border-color:#1c97d4;
}

.mphw-t-mph1 .mphw-search-input {
  font-family:inherit;
  font-size:15px;
  color:#004e75;
  padding:12px 0;
}

.mphw-t-mph1 .mphw-search-input::placeholder {
  color:#94a3b8;
}

.mphw-t-mph1 .mphw-search-ask {
  background:linear-gradient(135deg,rgba(7,23,44,.93),rgba(0,78,117,.93));
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  padding:0 24px;
  text-transform:uppercase;
}

.mphw-t-mph1 .mphw-search-ask:hover {
  filter:none;
  background:#004e75;
}

.mphw-t-mph1 .mphw-search-ask svg {
  color:#8fd7ff;
}

.mphw-t-mph1 .mphw-search-hint {
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#94a3b8;
  margin-top:16px;
}

.mphw-t-mph1 .mphw-search-chip {
  background:#fff;
  border:1px solid rgba(0,78,117,.25);
  color:#004e75;
  border-radius:99px;
  font-family:inherit;
  font-weight:600;
  font-size:12.5px;
  padding:8px 18px;
}

.mphw-t-mph1 .mphw-search-chip:hover {
  background:#EBF8FF;
  border-color:#1c97d4;
  color:#1c97d4;
}

/*
 * Right to left.
 *
 * The card lays out with flex, so the head and the row mirror on their own.
 * Only the sparkle in the "Ask MPH AI" button needs holding back from the
 * flip, and the card's own text needs the alignment the widget never had to
 * think about.
 */
html[dir="rtl"] .mphw-search {
  text-align: right;
}

html[dir="rtl"] .mphw-search-ask svg {
  transform: scaleX(-1);
}

/*
 * Shut means shut.
 *
 * `visibility: hidden` already takes the card out of the tab order, but the
 * overlay is in the markup of every page whether or not it has been opened,
 * so its backdrop must not swallow clicks meant for the page underneath.
 */
.mphw-overlay:not(.mphw-open) {
  pointer-events: none;
}