/* ==========================================================================
   SSHE – AI Engine chatbot · styles
   --------------------------------------------------------------------------
   Loaded by inc/sshe-chatbot.php (theme) as a cached file: on pages with
   the chatbot, and on AI Engine's admin screens so the preview matches.
   Leave AI Engine's theme "Custom CSS" and "Icon Text" empty.

   Colours, font, sizes and texts are set in the AI Engine fields – see the
   setup guide. This file only adds what those fields cannot do:
     1. the round SSHE launcher button + unread badge
     2. header typography (brand caps title)
     3. message, quick-reply, input and disclaimer polish
     4. phones: the chat's title bar and close button above the site menu

   Brand: SSHE Brand identity guide – Red #a81111, Vanilla #ffffeb,
   Dark blue #2e3850. Web fonts already on sshe.ch: Cormorant Garamond
   (titles, stands in for Felix) and Noto Sans (text, stands in for Intro).

   ":not(#sshe)" raises specificity to ID level so these rules beat the
   theme's own CSS regardless of load order, without !important.
   ========================================================================== */

/* ---- Brand tokens ------------------------------------------------------- */
.mwai-chat.mwai-messages-theme {
  --sshe-red: #a81111;
  --sshe-red-light: #c4241d;
  --sshe-red-dark: #860c0c;
  --sshe-vanilla: #ffffeb;
  --sshe-blue: #2e3850;
  --sshe-line: #e6dfc0;      /* hairline on vanilla */
  --sshe-alert: #e5262e;     /* unread badge: brighter than the button */

  --sshe-launcher: 60px;     /* same size as the site's Contact/Search buttons */
  --sshe-glyph: 34px;
  --sshe-shadow:
    0 12px 28px -10px rgba(46, 56, 80, 0.55),
    0 3px 8px rgba(46, 56, 80, 0.18);
  --sshe-shadow-hover:
    0 18px 34px -10px rgba(46, 56, 80, 0.6),
    0 4px 10px rgba(46, 56, 80, 0.22);

  /* theme tokens that have no field in the AI Engine screen */
  --mwai-linkColor: var(--sshe-red);
  --mwai-submitWidth: 86px;  /* room for "New chat" on one line */
}

/* ==========================================================================
   1. Launcher button
   ========================================================================== */

/* Line the button up under the site's own floating Contact / Search buttons
   (they sit 22px from the right with 20px gaps; AI Engine uses 30px/30px). */
.mwai-chat.mwai-window.mwai-bottom-right:not(.mwai-fullscreen):not(#sshe) {
  right: 22px;
  bottom: 20px;
}

.mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sshe-launcher);
  height: var(--sshe-launcher);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    var(--sshe-red-light) 0%, var(--sshe-red) 58%, var(--sshe-red-dark) 100%);
  box-shadow: var(--sshe-shadow);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.25s ease,
    opacity 0.2s ease-out;   /* AI Engine fades the button while opening */
  animation: sshe-chat-ping 2.4s ease-out 1.5s 2;  /* two soft pulses on load */
}

/* hide the image chosen under "Launcher Icon" – the glyph below replaces it */
.mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container .mwai-icon {
  display: none;
}

/* chat glyph, drawn as a mask so its colour is just background-color */
.mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container::before {
  content: "";
  width: var(--sshe-glyph);
  height: var(--sshe-glyph);
  background-color: var(--sshe-vanilla);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 3.5V16A2.5 2.5 0 0 1 4 13.5v-7A2.5 2.5 0 0 1 6.5 4z'/%3E%3Cpath d='M8 8.75h8M8 12h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 3.5V16A2.5 2.5 0 0 1 4 13.5v-7A2.5 2.5 0 0 1 6.5 4z'/%3E%3Cpath d='M8 8.75h8M8 12h5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* vanilla hairline ring – the "seal" detail */
.mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 235, 0.55);
  border-radius: 50%;
  pointer-events: none;
  transition: inset 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  .mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container:hover {
    transform: translateY(-3px);
    box-shadow: var(--sshe-shadow-hover);
  }
  .mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container:hover::after {
    inset: 3px;
    border-color: var(--sshe-vanilla);
  }
  .mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container:hover::before {
    transform: scale(1.06) rotate(-4deg);
  }
}

.mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container:active {
  transform: translateY(-1px) scale(0.96);
}

.mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container:focus-visible {
  outline: 2px solid var(--sshe-blue);
  outline-offset: 4px;
}

@keyframes sshe-chat-ping {
  0%   { box-shadow: var(--sshe-shadow), 0 0 0 0    rgba(168, 17, 17, 0.45); }
  70%  { box-shadow: var(--sshe-shadow), 0 0 0 16px rgba(168, 17, 17, 0); }
  100% { box-shadow: var(--sshe-shadow), 0 0 0 0    rgba(168, 17, 17, 0); }
}

/* unread badge (added by sshe-chatbot.js) */
.mwai-trigger.mwai-open-button:not(#sshe) .sshe-chat-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 1;
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid #fff;
  border-radius: 11px;
  background: var(--sshe-alert);
  color: #fff;
  font: 700 11px/18px "Noto Sans", Arial, sans-serif;
  text-align: center;
  box-shadow: 0 2px 6px rgba(46, 56, 80, 0.35);
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.mwai-trigger.mwai-open-button:not(#sshe) .sshe-chat-badge.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* greeting bubble ("Icon Text") – colours come from Message Back / Message Color */
.mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-text {
  font-family: "Noto Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  border: 0;
  border-left: 3px solid var(--sshe-red);
  border-radius: 4px;
  box-shadow:
    0 10px 30px -10px rgba(46, 56, 80, 0.35),
    0 2px 6px rgba(46, 56, 80, 0.08);
}
.mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-text-close:hover {
  background: rgba(46, 56, 80, 0.08);
}

/* ==========================================================================
   2. Header – brand caps title (Felix style, via Cormorant Garamond)
   ========================================================================== */
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-header {
  height: auto;
  min-height: 56px;
  padding: 0 8px 0 20px;
  align-items: center;
}
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-header .mwai-name,
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-mobile-header-title {  /* phones */
  color: var(--mwai-headerColor);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-header .mwai-close-button {
  color: var(--mwai-headerColor);
  opacity: 0.85;
}
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-header .mwai-close-button:hover {
  opacity: 1;
}

/* Phones: AI Engine opens the chat full screen, but the site's sticky menu
   bar (header.header_menu, z-index 10) stays on top and hides the chat's own
   title bar with its close button. While the chat is open, js/sshe-chatbot.js
   puts "sshe-chat-open" on <html> and the menu bar goes below the chat.
   760px is AI Engine's own full-screen breakpoint. */
@media (max-width: 760px) {
  html.sshe-chat-open .header_menu {
    z-index: 1;
  }
}

/* ==========================================================================
   3. Conversation, quick replies, input, disclaimer
   ========================================================================== */

/* AI bubbles: white card on vanilla, with a hairline so it reads on any screen */
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-conversation .mwai-reply.mwai-ai {
  border: 1px solid var(--sshe-line);
  box-shadow: 0 1px 2px rgba(46, 56, 80, 0.06);
}
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-text a {
  color: var(--sshe-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-conversation .mwai-reply.mwai-user .mwai-text a {
  color: inherit;
}

/* quick-reply buttons (set by sshe-chatbot.js): outlined pills, filled on hover */
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-shortcuts {
  display: flex;
  flex-direction: row;       /* theme stacks them in a column */
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-shortcuts .mwai-shortcut {
  min-width: 0;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--sshe-red);
  border-radius: 999px;
  background: #fff;
  color: var(--sshe-red);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-shortcuts .mwai-shortcut:hover,
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-shortcuts .mwai-shortcut:focus-visible {
  background: var(--sshe-red);
  color: #fff;
}

/* input field */
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-input .mwai-input-text {
  background: #fff;
  border: 1px solid var(--sshe-line);
}
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-input .mwai-input-text:focus-within {
  border-color: var(--sshe-blue);
  box-shadow: 0 0 0 3px rgba(46, 56, 80, 0.12);
}
/* "Send" keeps the theme's red fill (Back User Color); "New chat" is outlined */
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-input .mwai-input-submit {
  font-weight: 600;
  white-space: nowrap;
}
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-input .mwai-input-submit.mwai-clear-mode {
  color: var(--sshe-red);
}

/* AI disclaimer ("Compliance Text") – readable, not shouting */
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-compliance {
  opacity: 1;
  color: rgba(46, 56, 80, 0.68);
  font-size: 12px;
  line-height: 1.4;
}
.mwai-chat.mwai-messages-theme:not(#sshe) .mwai-compliance a {
  color: var(--sshe-red);
}

/* ==========================================================================
   4. Welcome card (sshe-chatbot.js) – beside the chat button
   Every rule starts with .sshe-welcome so the theme's own button styles
   cannot leak in.
   ========================================================================== */
.sshe-welcome {
  --sshe-card-line: #ece5c9;           /* hairline, a touch darker than vanilla */
  --sshe-card-shadow:
    0 16px 36px -12px rgba(46, 56, 80, 0.5),
    0 3px 10px rgba(46, 56, 80, 0.12);
  position: fixed;
  z-index: 99990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: 340px;
  font-family: "Noto Sans", Arial, sans-serif;
  color: #2e3850;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.sshe-welcome.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.sshe-welcome.sshe-welcome--left {
  align-items: flex-start;
}

/* start every button from zero, whatever the theme says about buttons */
.sshe-welcome button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sshe-welcome button:focus-visible {
  outline: 2px solid #2e3850;
  outline-offset: 2px;
}

/* the card: avatar + title + text; the whole card opens the chat */
.sshe-welcome .sshe-welcome__body {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  align-items: center;
  width: 100%;
  padding: 16px 44px 16px 16px;        /* right: room for the close button */
  border: 1px solid var(--sshe-card-line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  box-shadow: var(--sshe-card-shadow);
}
.sshe-welcome .sshe-welcome__avatar {
  grid-row: 1 / span 2;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* the SSHE monogram from the theme's white logo, on brand red */
  background: #a81111 url("../images/sshe-logo-white.svg") no-repeat 6px 50% / auto 24px;
}
/* first line: a question in the visitor's words, not a "Welcome" header */
.sshe-welcome .sshe-welcome__title {
  display: block;
  color: #2e3850;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.sshe-welcome .sshe-welcome__text {
  display: block;
  grid-column: 2;
  margin-top: 2px;
  color: rgba(46, 56, 80, 0.8);
  font-size: 14px;
  line-height: 1.4;
}

/* close button: inside the card, top-right; the X is two thin lines */
.sshe-welcome .sshe-welcome__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #2e3850;
  opacity: 0.55;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.sshe-welcome .sshe-welcome__close::before,
.sshe-welcome .sshe-welcome__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.75px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.sshe-welcome .sshe-welcome__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.sshe-welcome .sshe-welcome__close:hover,
.sshe-welcome .sshe-welcome__close:focus-visible {
  opacity: 1;
  background: rgba(46, 56, 80, 0.08);
}

/* topic buttons */
.sshe-welcome .sshe-welcome__topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.sshe-welcome.sshe-welcome--left .sshe-welcome__topics {
  justify-content: flex-start;
}
.sshe-welcome .sshe-welcome__topic {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid #a81111;
  border-radius: 999px;
  background: #fff;
  color: #a81111;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px -6px rgba(46, 56, 80, 0.4);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sshe-welcome .sshe-welcome__topic:hover,
.sshe-welcome .sshe-welcome__topic:focus-visible {
  background: #a81111;
  color: #fff;
}

/* ---- Phones: one compact card that "speaks" from the chat button --------- */
.sshe-welcome.sshe-welcome--phone {
  width: auto;
  gap: 10px;
  align-items: stretch;
  padding: 12px 14px 14px;
  border: 1px solid var(--sshe-card-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sshe-card-shadow);
}
/* small pointer on the card's edge, aimed at the middle of the chat button */
.sshe-welcome.sshe-welcome--phone::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 23px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--sshe-card-line);
  border-right: 1px solid var(--sshe-card-line);
  border-radius: 0 3px 0 0;
  background: #fff;
  transform: rotate(45deg);
}
.sshe-welcome.sshe-welcome--phone.sshe-welcome--left::after {
  right: auto;
  left: -7px;
  border: 0;
  border-bottom: 1px solid var(--sshe-card-line);
  border-left: 1px solid var(--sshe-card-line);
  border-radius: 0 0 0 3px;
}
.sshe-welcome.sshe-welcome--phone .sshe-welcome__body {
  display: block;
  width: auto;
  padding: 4px 30px 0 2px;             /* right: room for the close button */
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.sshe-welcome.sshe-welcome--phone .sshe-welcome__text {
  margin: 0;
  color: #2e3850;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.sshe-welcome.sshe-welcome--phone .sshe-welcome__topics {
  justify-content: flex-start;         /* a long row scrolls instead of being cut */
  flex-wrap: nowrap;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.sshe-welcome.sshe-welcome--phone .sshe-welcome__topic {
  flex: none;
  min-height: 32px;
  padding: 0 13px;
  font-size: 13.5px;
  box-shadow: none;
}
.sshe-welcome.sshe-welcome--phone .sshe-welcome__close {
  top: 6px;
  right: 6px;
  width: 32px;                         /* bigger touch target on phones */
  height: 32px;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container,
  .mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container::before,
  .mwai-trigger.mwai-open-button:not(#sshe) .mwai-icon-container::after,
  .mwai-trigger.mwai-open-button:not(#sshe) .sshe-chat-badge,
  .sshe-welcome,
  .sshe-welcome .sshe-welcome__topic,
  .sshe-welcome .sshe-welcome__close {
    animation: none;
    transition: none;
  }
}