/* =====================================================================
   chat-icon.css -- the owner's chatbot icon as the closed chat opener.
   ISOLATED BLOCK: loaded after styles.css on the nine pages that carry
   the chat widget. It only restyles the CLOSED state
   (.chat-widget:not(.is-open)); the open state, the pill toolbar and its
   three 44px buttons are untouched and keep every rule in styles.css.

   Closed  : just the icon, bottom corner, floating gently.
   Click   : chat-widget.js toggles .is-open exactly as before; this file
             then stops applying, the icon (and its animation) disappear,
             and the existing pill toolbar shows.
   Minimise: .is-open is removed and the icon returns.

   Markup used (no HTML changes): .chat-launcher > .chat-icon-open is the
   picture (its chevron <svg> is hidden while closed). The button keeps its
   aria-label, aria-expanded and focus ring. No visible text is added.

   Motion: transform on the picture only, opacity on two glow pseudo
   elements; box-shadow itself is never animated. Switched off for
   prefers-reduced-motion and the site's html.pref-motion setting.
   ===================================================================== */

.chat-widget { --chat-icon-size: 64px; }
@media (max-width: 640px) { .chat-widget { --chat-icon-size: 56px; } }

/* Closed: no pill chrome, and only the opener is shown (the other two
   tools used to sit beside it on wide screens). */
.chat-widget:not(.is-open) .chat-toolbar {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}
.chat-widget:not(.is-open) .chat-toolbar .chat-tool:not(.chat-launcher) { display: none; }
.chat-widget:not(.is-open) .chat-toolbar .chat-launcher::before { display: none; }

.chat-widget:not(.is-open) .chat-toolbar .chat-launcher {
  width: var(--chat-icon-size);
  height: var(--chat-icon-size);
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  translate: 0 0;
  transition: translate .45s cubic-bezier(.22, .61, .36, 1);
}
.chat-widget:not(.is-open) .chat-toolbar .chat-launcher:focus-visible { outline-offset: 3px; }

/* The picture. */
.chat-widget:not(.is-open) .chat-launcher .chat-icon-open {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: url("../img/chat-icon-160.webp") center / contain no-repeat;
  transform-origin: 50% 55%;
  animation: ghh-chat-icon-float 5.6s linear infinite;
  will-change: transform;
}
.chat-widget:not(.is-open) .chat-launcher .chat-icon-open > svg { display: none; }

/* Glow: two stationary shadows on pseudo elements. Only their opacity
   ever changes, so the shadows are painted once. */
.chat-widget:not(.is-open) .chat-launcher .chat-icon-open::before,
.chat-widget:not(.is-open) .chat-launcher .chat-icon-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.chat-widget:not(.is-open) .chat-launcher .chat-icon-open::before {
  box-shadow: 0 0 14px 2px rgba(231, 185, 95, .5), 0 8px 16px rgba(15, 29, 18, .28);
  opacity: .6;
}
.chat-widget:not(.is-open) .chat-launcher .chat-icon-open::after {
  box-shadow: 0 0 26px 7px rgba(231, 185, 95, .85);
  opacity: 0;
  transition: opacity .4s ease;
}
.chat-widget:not(.is-open) .chat-launcher:focus-visible .chat-icon-open::after { opacity: .7; }
@media (hover: hover) {
  .chat-widget:not(.is-open) .chat-toolbar .chat-launcher:hover { translate: 0 -4px; background: transparent; }
  .chat-widget:not(.is-open) .chat-launcher:hover .chat-icon-open::after { opacity: 1; }
}

/* ~5.6 s loop. Rises slowly and eases off at the top, falls and settles
   with one tiny rebound, like a soft ball. Scale stays within 1 to 1.03,
   tilt within +/-1.5deg, and the last frame equals the first. */
@keyframes ghh-chat-icon-float {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1);          animation-timing-function: cubic-bezier(.33, 0, .45, 1); }
  42%  { transform: translate3d(0, -7px, 0) rotate(-1.5deg) scale(1.03);  animation-timing-function: cubic-bezier(.55, 0, .67, 1); }
  80%  { transform: translate3d(0, 0, 0) rotate(1.5deg) scale(1);         animation-timing-function: cubic-bezier(.33, 0, .45, 1); }
  90%  { transform: translate3d(0, -1.5px, 0) rotate(.6deg) scale(1.008); animation-timing-function: cubic-bezier(.55, 0, .67, 1); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

/* Static icon for visitors who ask for less motion (system setting or the
   site's own Reduce motion switch). */
@media (prefers-reduced-motion: reduce) {
  .chat-widget:not(.is-open) .chat-launcher .chat-icon-open { animation: none; will-change: auto; }
  .chat-widget:not(.is-open) .chat-toolbar .chat-launcher { transition: none; }
  .chat-widget:not(.is-open) .chat-toolbar .chat-launcher:hover { translate: 0 0; }
  .chat-widget:not(.is-open) .chat-launcher .chat-icon-open::after { transition: none; }
}
html.pref-motion .chat-widget:not(.is-open) .chat-launcher .chat-icon-open { animation: none; will-change: auto; }
html.pref-motion .chat-widget:not(.is-open) .chat-toolbar .chat-launcher { transition: none; }
html.pref-motion .chat-widget:not(.is-open) .chat-toolbar .chat-launcher:hover { translate: 0 0; }
html.pref-motion .chat-widget:not(.is-open) .chat-launcher .chat-icon-open::after { transition: none; }

/* Windows high-contrast: the picture is a background, so keep a visible edge. */
@media (forced-colors: active) {
  .chat-widget:not(.is-open) .chat-toolbar .chat-launcher { border: 2px solid ButtonText; forced-color-adjust: none; }
}