/* ==================================================================
   THE CHAT BUBBLE
   ==================================================================

   Styling for the assistant that sits in the corner of every page —
   both the React pages and the PHP ones, which is why it is plain CSS
   and does not rely on Tailwind or on site.css being present.

   Everything is prefixed .iachat so it cannot collide with either
   stylesheet, and the panel carries its own colours rather than
   inheriting them.

   IF YOU CHANGE THE SITE PALETTE, the five colours at the top are the
   only ones to update.
================================================================== */

.iachat {
  --iachat-navy: #00254d;
  --iachat-navy-deep: #00172e;
  --iachat-flame: #e8600a;
  --iachat-paper: #fbf8f4;
  --iachat-ink: #37424e;

  --iachat-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --iachat-sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2147483000;   /* above the sticky header and the mobile drawer */
  font-family: var(--iachat-sans);
}

/* ---- the button ---- */

.iachat-toggle {
  display: flex; align-items: center; gap: .55rem;
  border: 0; border-radius: 99px; cursor: pointer;
  padding: .85rem 1.35rem;
  background: var(--iachat-flame); color: #fff;
  font-family: var(--iachat-display);
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 30px -10px rgba(0, 23, 46, .55);
  transition: transform .2s, background .2s;
}
.iachat-toggle:hover { background: #fb7317; transform: translateY(-2px); }
.iachat-toggle svg { width: 18px; height: 18px; flex: none; }
.iachat-toggle .iachat-close-icon { display: none; }
.iachat.is-open .iachat-toggle .iachat-open-icon { display: none; }
.iachat.is-open .iachat-toggle .iachat-close-icon { display: block; }

/* ---- the panel ---- */

.iachat-panel {
  position: absolute; right: 0; bottom: calc(100% + .75rem);
  width: min(23rem, calc(100vw - 2.5rem));
  height: min(31rem, calc(100vh - 7rem));
  display: none; flex-direction: column; overflow: hidden;
  background: var(--iachat-paper);
  border: 1px solid rgba(0, 23, 46, .12);
  border-radius: 1.1rem;
  box-shadow: 0 2px 4px rgba(0,23,46,.08), 0 28px 60px -24px rgba(0,23,46,.5);
}
.iachat.is-open .iachat-panel { display: flex; }

.iachat-head {
  background: var(--iachat-navy); color: #fff;
  padding: 1rem 1.15rem;
}
.iachat-head strong {
  display: block; font-family: var(--iachat-display);
  font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
}
.iachat-head span { display: block; margin-top: .15rem; font-size: .8rem; color: rgba(214,228,240,.85); }

.iachat-log {
  flex: 1; overflow-y: auto; padding: 1.1rem;
  display: flex; flex-direction: column; gap: .85rem;
}

.iachat-msg { max-width: 88%; font-size: .93rem; line-height: 1.55; }
.iachat-msg p { margin: 0; }
.iachat-msg.from-bot {
  align-self: flex-start; color: var(--iachat-ink);
  background: #fff; border: 1px solid rgba(0,23,46,.1);
  border-radius: .9rem .9rem .9rem .25rem; padding: .7rem .9rem;
}
.iachat-msg.from-you {
  align-self: flex-end; color: #fff; background: var(--iachat-navy);
  border-radius: .9rem .9rem .25rem .9rem; padding: .7rem .9rem;
}
.iachat-msg.is-error {
  align-self: stretch; max-width: 100%;
  background: #fdecea; border-color: #f2bcb6; color: #a5281b;
}

/* Where the answer came from — the visitor can go and read it. */
.iachat-sources { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.iachat-sources a {
  font-size: .78rem; text-decoration: none;
  color: var(--iachat-navy); background: rgba(0,37,77,.07);
  border-radius: 99px; padding: .25rem .7rem;
}
.iachat-sources a:hover { background: rgba(232,96,10,.14); color: #a13f07; }

/* The three dots while it thinks. */
.iachat-typing { display: flex; gap: .3rem; align-items: center; }
.iachat-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(0,37,77,.35);
  animation: iachat-blink 1.3s infinite both;
}
.iachat-typing i:nth-child(2) { animation-delay: .18s; }
.iachat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes iachat-blink { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }

/* ---- asking ---- */

.iachat-ask { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid rgba(0,23,46,.1); background: #fff; }
.iachat-ask input {
  flex: 1; min-width: 0; font: inherit; font-size: .93rem;
  color: var(--iachat-navy); background: var(--iachat-paper);
  border: 1px solid rgba(0,23,46,.18); border-radius: .7rem; padding: .6rem .75rem;
}
.iachat-ask input:focus {
  outline: none; border-color: var(--iachat-flame);
  box-shadow: 0 0 0 3px rgba(232,96,10,.15);
}
.iachat-ask button {
  flex: none; border: 0; border-radius: .7rem; cursor: pointer;
  padding: 0 .9rem; background: var(--iachat-flame); color: #fff;
}
.iachat-ask button:disabled { opacity: .5; cursor: not-allowed; }
.iachat-ask button svg { width: 17px; height: 17px; display: block; }

.iachat-foot {
  padding: 0 .9rem .8rem; background: #fff;
  font-size: .72rem; color: #6b7684; text-align: center;
}

/* Starter questions, shown once. */
.iachat-starters { display: flex; flex-wrap: wrap; gap: .4rem; }
.iachat-starters button {
  font: inherit; font-size: .8rem; cursor: pointer;
  color: var(--iachat-navy); background: #fff;
  border: 1px solid rgba(0,23,46,.15); border-radius: 99px; padding: .35rem .8rem;
}
.iachat-starters button:hover { border-color: var(--iachat-flame); color: #a13f07; }

@media (max-width: 480px) {
  .iachat { right: .75rem; bottom: .75rem; }
  .iachat-toggle { padding: .8rem 1.1rem; font-size: .72rem; }
  .iachat-panel { width: calc(100vw - 1.5rem); height: min(28rem, calc(100vh - 6rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .iachat-toggle, .iachat-typing i { transition: none; animation: none; }
}

/* ------------------------------------------------------------------
   "Ask a question" controls elsewhere on the page

   Anything carrying data-iahperd-chat-open — the entry in the mobile
   menu, for instance — opens the assistant. They stay hidden until the
   widget confirms the assistant is actually configured, so a menu never
   offers to open something that cannot answer.

   Done with a class on <html> rather than by unhiding each one, because
   the mobile menu's entry does not exist until the menu is opened.
   !important because the React side styles that button with utility
   classes that would otherwise set display themselves.
------------------------------------------------------------------ */

[data-iahperd-chat-open] { display: none !important; }
.iahperd-chat-ready [data-iahperd-chat-open] { display: flex !important; }