/* MI Assistant chat window. Everything is scoped under .mi-ai so the theme is not affected (and vice versa).
   Theme colours (clinic, 3 Nov 2026): blue #19BAD4 / #09B8E2, green #b4d251, fonts Lato (text) and Playfair Display (title).
   Blue backgrounds use the clinic's blue #09B8E2 with WHITE text (clinic's choice, 3 Nov 2026). White on this blue is
   2.3:1, below the 4.5:1 guideline, so text on blue is bold and has a soft shadow to help it stand out.
   White on the green is too faint (1.9:1), so the green button carries a navy icon. */
.mi-ai {
  --mi-brand: #09B8E2;     /* header, launcher, visitor messages – white text */
  --mi-brand-2: #09B8E2;   /* header (same blue – no gradient) */
  --mi-on-shadow: 0 1px 2px rgba(0, 40, 60, .45);
  --mi-blue: #19BAD4;      /* bright blue accents: borders, focus ring */
  --mi-blue-2: #09B8E2;
  --mi-green: #b4d251;     /* green accents: header stripe, send button, icons */
  --mi-on-brand: #ffffff;
  --mi-ink: #242864;       /* links and text on green (site heading colour) */
  --mi-text: #2f3542;
  --mi-muted: #6a6b76;
  --mi-line: #e1e8ec;
  --mi-bg: #ffffff;
  --mi-soft: #f4fafb;
  --mi-bottom: 24px;
  position: fixed;
  bottom: var(--mi-bottom);
  right: 24px;
  z-index: 99990;
  font-family: "Lato", Tahoma, Geneva, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mi-text);
}
.mi-ai[data-pos="left"] { right: auto; left: 24px; }
.mi-ai *, .mi-ai *::before, .mi-ai *::after { box-sizing: border-box; }
.mi-ai [hidden] { display: none !important; }
.mi-ai button { font: inherit; color: inherit; margin: 0; text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0; }
.mi-ai svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mi-ai .mi-ai-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mi-ai button:focus-visible, .mi-ai a:focus-visible, .mi-ai textarea:focus-visible { outline: 3px solid var(--mi-ink); outline-offset: 2px; }

/* Launcher */
.mi-ai-launcher {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 26px; cursor: pointer;
  background: var(--mi-brand); color: var(--mi-on-brand) !important; font-weight: 700; font-size: 15.5px; text-shadow: var(--mi-on-shadow);
  box-shadow: 0 6px 20px rgba(9, 60, 80, .25); border-bottom: 3px solid var(--mi-green);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mi-ai[data-pos="left"] .mi-ai-launcher { margin-left: 0; }
.mi-ai-launcher svg { color: var(--mi-on-brand); filter: drop-shadow(0 1px 1px rgba(0, 40, 60, .45)); }
.mi-ai-launcher:hover { transform: translateY(-1px); background: #07a6cc; box-shadow: 0 8px 24px rgba(9, 60, 80, .3); }
.mi-ai-launcher:focus-visible, .mi-ai-header button:focus-visible { outline-color: var(--mi-green); }
.mi-ai-open .mi-ai-launcher { display: none; }

/* Panel */
.mi-ai-panel {
  display: flex; flex-direction: column;
  width: 380px; height: min(620px, calc(100vh - var(--mi-bottom) - 24px));
  background: var(--mi-bg); border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(9, 40, 60, .25); border: 1px solid var(--mi-line);
}
.mi-ai-header { display: flex; align-items: center; gap: 4px; padding: 14px 10px 14px 18px; background: var(--mi-brand); color: var(--mi-on-brand); border-bottom: 4px solid var(--mi-green); text-shadow: var(--mi-on-shadow); }
.mi-ai[dir="rtl"] .mi-ai-header { padding: 14px 18px 14px 10px; }
.mi-ai-heading { flex: 1; min-width: 0; }
.mi-ai .mi-ai-title {
  margin: 0; padding: 0; font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--mi-on-brand); letter-spacing: 0; text-transform: none;
}
.mi-ai[lang="ar"] .mi-ai-title { font-family: inherit; font-weight: 700; } /* Playfair has no Arabic letters */
.mi-ai .mi-ai-subtitle { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--mi-on-brand); }
.mi-ai-icon-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mi-on-brand) !important; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(0, 40, 60, .45)); }
.mi-ai-icon-btn svg { stroke-width: 2.5; }
.mi-ai-icon-btn:hover { background: rgba(255, 255, 255, .18); }

/* Messages */
.mi-ai-log { flex: 1; overflow-y: auto; padding: 16px; background: var(--mi-soft); display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.mi-ai-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; word-wrap: break-word; overflow-wrap: anywhere; }
.mi-ai-msg p { margin: 0 0 8px; }
.mi-ai-msg p:last-child { margin-bottom: 0; }
.mi-ai-msg ul, .mi-ai-msg ol { margin: 4px 0 8px; padding-inline-start: 20px; }
.mi-ai-msg li { margin: 2px 0; }
.mi-ai-msg a { color: var(--mi-ink); text-decoration: underline; text-decoration-color: var(--mi-green); text-decoration-thickness: 2px; text-underline-offset: 2px; font-weight: 700; }
.mi-ai-bot { align-self: flex-start; background: #fff; border: 1px solid var(--mi-line); border-end-start-radius: 4px; }
.mi-ai-user { align-self: flex-end; background: var(--mi-brand); color: var(--mi-on-brand); border-end-end-radius: 4px; font-weight: 700; text-shadow: var(--mi-on-shadow); }
.mi-ai-user a { color: var(--mi-on-brand); }
.mi-ai-safety { border: 2px solid #c0392b; background: #fff6f5; }
.mi-ai-error, .mi-ai-offline { background: #fffaf0; border-color: #f0dfb4; }
.mi-ai-sources { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mi-line); font-size: 13px; color: var(--mi-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mi-ai-sources span { width: 100%; }

.mi-ai-typing { display: flex; gap: 4px; padding: 14px; }
.mi-ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--mi-blue); opacity: .4; animation: mi-ai-blink 1.2s infinite; }
.mi-ai-typing span:nth-child(2) { background: var(--mi-green); }
.mi-ai-typing span:nth-child(2) { animation-delay: .2s; }
.mi-ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes mi-ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Quick questions + contact */
.mi-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 4px; background: var(--mi-soft); }
.mi-ai-chip { padding: 6px 12px; border: 1.5px solid var(--mi-green); border-radius: 16px; background: #fff; color: var(--mi-ink) !important; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mi-ai-chip:hover { background: var(--mi-green); }
.mi-ai-contact { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--mi-line); background: #fff; }
.mi-ai .mi-ai-contact-link { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; border-radius: 8px; color: var(--mi-ink); text-decoration: none; font-size: 13.5px; font-weight: 700; }
.mi-ai .mi-ai-contact-link:hover { background: var(--mi-soft); }
.mi-ai-contact-link svg { width: 17px; height: 17px; color: #0789a8; }

/* Input */
.mi-ai-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; background: #fff; border-top: 1px solid var(--mi-line); margin: 0; }
.mi-ai .mi-ai-input {
  flex: 1; min-height: 42px; max-height: 120px; resize: none; margin: 0;
  padding: 10px 12px; border: 1px solid #c9d1d8; border-radius: 10px; background: #fff; color: var(--mi-text);
  font: inherit; font-size: 15px; line-height: 1.4; box-shadow: none;
}
.mi-ai .mi-ai-input:focus { border-color: var(--mi-blue-2); outline: none; box-shadow: 0 0 0 2px rgba(9, 184, 226, .25); }
.mi-ai-send, .mi-ai-stop { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px; cursor: pointer; background: var(--mi-green); color: var(--mi-ink) !important; }
.mi-ai-send:hover { background: #a3c23f; }
.mi-ai-stop { background: #dfe5ea; }
.mi-ai-stop svg { fill: currentColor; }
.mi-ai[dir="rtl"] .mi-ai-send svg { transform: scaleX(-1); }
.mi-ai .mi-ai-notice { margin: 0; padding: 4px 14px 10px; background: #fff; font-size: 11.5px; line-height: 1.4; color: var(--mi-muted); }

/* Phones: full screen */
@media (max-width: 600px) {
  .mi-ai { right: 16px; bottom: calc(var(--mi-bottom) - 8px); }
  .mi-ai[data-pos="left"] { left: 16px; }
  .mi-ai-open { inset: 0; }
  .mi-ai-open .mi-ai-panel { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
  .mi-ai-launcher-text { display: none; }
  .mi-ai-launcher { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
  .mi-ai-launcher svg { width: 26px; height: 26px; }
  .mi-ai .mi-ai-input { font-size: 16px; } /* stops iOS zooming in */
}
@media (prefers-reduced-motion: reduce) {
  .mi-ai-launcher, .mi-ai-typing span { transition: none; animation: none; }
}
@media print { .mi-ai { display: none; } }