/* wp-content/plugins/notts-osteo-bot/assets/bot.css
 *
 * The assistant widget.
 *
 * Self-contained on purpose: this plugin has to keep working if the theme changes, so it defines its
 * own colours here with the site's tokens as the preferred source. --nosteo-accent and friends come
 * from the elements plugin when it is active; the fallbacks are what the practice's brand actually
 * is, so the widget still looks right on its own.
 *
 * Author: Sean Burn
 */

.nosteo-bot {
  --nb-accent: var(--nosteo-accent, #fc7e00);
  --nb-ink:    var(--nosteo-ink, #323e48);
  --nb-tint:   var(--nosteo-tint, #ecf4df);
  --nb-white:  var(--nosteo-white, #ffffff);
  --nb-muted:  var(--nosteo-muted, #69737d);
  --nb-hair:   var(--nosteo-hair, rgba(50, 62, 72, 0.16));
  --nb-live:   var(--nosteo-resolve, #78a333);
  --nb-ease:   var(--nosteo-ease, cubic-bezier(0.22, 0.61, 0.36, 1));

  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  /* Deliberately not 9999. The header owns 200 (400 once it sticks) and the mobile menu and search
     results live inside it, so anything above 200 leaves a chat button floating over an open menu.
     150 clears every widget on the site — the highest is 30 — and stays under the header. */
  z-index: 150;
  font-family: var(--nosteo-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* ---------- the theme's button styling, undone ----------
 *
 * Hello Elementor's reset.css gives every button a #c36 border, a 3px radius, 1rem padding and a
 * #c36 fill on hover — via `[type=button]`, which is one class of specificity and therefore ties
 * with any single-class rule here. Ties go to whichever sheet loads last, which is why the plugin
 * now enqueues at priority 100.
 *
 * This clears the inherited styling once, on the bot's own controls only, so every rule below is
 * styling rather than an argument with the theme. Keep it above the component rules: they match at
 * the same specificity and win on source order.
 */
.nosteo-bot__btn {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-transform: none;
  transition: none;
}
.nosteo-bot__btn:hover,
.nosteo-bot__btn:focus {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}

/* Longhands above, deliberately. The theme's hover fill is `background-color`, and matching it
   property for property is the only way to read this file and know which one wins.
 *
 * Note what this rule then costs: it out-specifies the plain component rules, so every control
 * that has a fill must restate it for :hover and :focus. That is the doubled-class block each of
 * them carries below — the same trap this theme has sprung four times before. */

/* ---------- launcher ---------- */

.nosteo-bot__launch {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nb-accent);
  color: var(--nb-white);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(50, 62, 72, 0.28);
  transition: box-shadow 260ms var(--nb-ease);

  /* The sway. Slow enough to read as breathing rather than bouncing, and it stops once the panel
     is open — a button that keeps drifting while you are typing next to it is a distraction. */
  animation: nb-sway 4.5s ease-in-out infinite;
}
.nosteo-bot.is-open .nosteo-bot__launch { animation: none; }

@keyframes nb-sway {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Hover is the shadow lifting, not a transform — the sway owns transform, and two rules animating
   the same property means one of them silently loses. */
.nosteo-bot__launch:focus-visible { outline: 3px solid var(--nb-ink); outline-offset: 3px; }
.nosteo-bot .nosteo-bot__launch:hover,
.nosteo-bot .nosteo-bot__launch:focus {
  background-color: var(--nb-accent);
  color: var(--nb-white);
  box-shadow: 0 18px 40px rgba(50, 62, 72, 0.36);
}

.nosteo-bot__launch-icon svg { width: 30px; height: 30px; }
.nosteo-bot__launch-close svg { width: 22px; height: 22px; }
.nosteo-bot__launch-icon,
.nosteo-bot__launch-close {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: transform 260ms var(--nb-ease), opacity 200ms var(--nb-ease);
}
.nosteo-bot__launch-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.nosteo-bot.is-open .nosteo-bot__launch-icon { opacity: 0; transform: rotate(90deg) scale(0.6); }
.nosteo-bot.is-open .nosteo-bot__launch-close { opacity: 1; transform: none; }

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

.nosteo-bot__panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 28px));
  height: min(560px, calc(100svh - 130px));
  overflow: hidden;
  border-radius: 16px;
  background: var(--nb-white);
  box-shadow: 0 24px 60px rgba(50, 62, 72, 0.28);
  /* Grows out of the launcher rather than appearing over it. */
  transform-origin: bottom right;
  transform: translateY(12px) scale(0.96);
  opacity: 0;
  transition: transform 240ms var(--nb-ease), opacity 200ms var(--nb-ease);
}
.nosteo-bot.is-shown .nosteo-bot__panel { transform: none; opacity: 1; }
.nosteo-bot__panel[hidden] { display: none; }

.nosteo-bot__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 14px 12px 14px 16px;
  background: var(--nb-ink);
  color: var(--nb-white);
}
.nosteo-bot__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nb-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nb-live) 30%, transparent);
}
.nosteo-bot__title { font-size: 15px; font-weight: 600; }
.nosteo-bot__shut {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 180ms var(--nb-ease);
}
.nosteo-bot .nosteo-bot__shut:hover,
.nosteo-bot .nosteo-bot__shut:focus { opacity: 1; background: rgba(255, 255, 255, 0.14); color: var(--nb-white); }
.nosteo-bot__shut svg { width: 16px; height: 16px; }

/* ---------- log ----------
   position: relative because it is the offsetParent the script measures each message against when
   it aligns a reply to the top. */
.nosteo-bot__log {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  background: linear-gradient(180deg, var(--nb-tint) 0%, var(--nb-white) 120px);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.nosteo-bot__msg { display: flex; margin-bottom: 12px; }
.nosteo-bot__msg--me { justify-content: flex-end; }

.nosteo-bot__bubble {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  animation: nb-in 260ms var(--nb-ease) both;
}
@keyframes nb-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.nosteo-bot__msg--bot .nosteo-bot__bubble {
  background: var(--nb-white);
  color: var(--nb-ink);
  border-bottom-left-radius: 5px;
  box-shadow: 0 2px 10px rgba(50, 62, 72, 0.10);
}
.nosteo-bot__msg--me .nosteo-bot__bubble {
  background: var(--nb-ink);
  color: var(--nb-white);
  border-bottom-right-radius: 5px;
}
.nosteo-bot__bubble p { margin: 0 0 0.7em; }
.nosteo-bot__bubble p:last-child { margin-bottom: 0; }

/* ---------- links inside the prose ----------
   Phone numbers and email addresses are tappable, which on a phone is the difference between
   reading a number and ringing it. */
.nosteo-bot__inline {
  color: var(--nb-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  word-break: break-word;
}
.nosteo-bot .nosteo-bot__inline:hover,
.nosteo-bot .nosteo-bot__inline:focus { color: var(--nb-accent); text-decoration: underline; }

/* ---------- rows ----------
   list-style is set explicitly: the theme's reset zeroes list margins but leaves the markers, so
   an unstyled <ul> here would show browser bullets next to the ones nobody asked for. */
.nosteo-bot__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  border-top: 1px solid var(--nb-hair);
}
.nosteo-bot__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--nb-hair);
  font-size: 14px;
  line-height: 1.45;
}
.nosteo-bot__row-text { flex: 1 1 auto; min-width: 0; }
.nosteo-bot__row-note {
  flex: none;
  font-weight: 700;
  color: var(--nb-accent);
  font-variant-numeric: tabular-nums;
}

/* ---------- actions ----------
   Filled in the site's call-to-action colour so they read as buttons rather than as more text.
   The suggestion chips below stay outlined, which keeps "here is something you could ask" visibly
   different from "here is where to go next". */
.nosteo-bot__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nosteo-bot__link {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--nb-accent);
  color: var(--nb-white);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms var(--nb-ease), color 180ms var(--nb-ease);
}
/* Colour restated on both states — the theme sets a:hover colour globally at a specificity that
   beats a single class, so a hover rule that omits `color` protects nothing. */
.nosteo-bot .nosteo-bot__link:hover,
.nosteo-bot .nosteo-bot__link:focus { background: var(--nb-ink); color: var(--nb-white); text-decoration: none; }

/* typing indicator */
.nosteo-bot__dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.nosteo-bot__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nb-muted);
  animation: nb-blink 1.2s infinite ease-in-out;
}
.nosteo-bot__dots i:nth-child(2) { animation-delay: 0.15s; }
.nosteo-bot__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes nb-blink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-3px); }
}

/* ---------- suggestions ---------- */

.nosteo-bot__suggest {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 16px 12px;
}
.nosteo-bot__suggest[hidden] { display: none; }
.nosteo-bot__chip {
  display: block;
  padding: 7px 12px;
  border: 1px solid var(--nb-hair);
  border-radius: 999px;
  background: var(--nb-white);
  color: var(--nb-ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms var(--nb-ease), color 180ms var(--nb-ease);
}
.nosteo-bot .nosteo-bot__chip:hover,
.nosteo-bot .nosteo-bot__chip:focus { border-color: var(--nb-accent); color: var(--nb-accent); background: var(--nb-white); }

/* ---------- composer ---------- */

.nosteo-bot__form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--nb-hair);
  background: var(--nb-white);
}
.nosteo-bot__input {
  flex: 1 1 auto;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--nb-hair);
  border-radius: 12px;
  background: var(--nb-white);
  color: var(--nb-ink);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  resize: none;
}
.nosteo-bot__input:focus { outline: 2px solid var(--nb-accent); outline-offset: -1px; border-color: transparent; }

.nosteo-bot__send {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nb-accent);
  color: var(--nb-white);
  cursor: pointer;
  transition: transform 180ms var(--nb-ease), opacity 180ms var(--nb-ease);
}
.nosteo-bot .nosteo-bot__send:hover,
.nosteo-bot .nosteo-bot__send:focus { background: var(--nb-accent); color: var(--nb-white); transform: scale(1.06); }
.nosteo-bot__send[disabled] { opacity: 0.45; cursor: default; transform: none; }
.nosteo-bot__send svg { width: 18px; height: 18px; }

.nosteo-bot__note {
  flex: none;
  margin: 0;
  padding: 0 14px 12px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--nb-muted);
  background: var(--nb-white);
}

.nosteo-bot__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- phones ----------
   Nearly full screen: a 380px panel floating on a 375px screen is a panel with no room to read in. */
@media (max-width: 480px) {
  .nosteo-bot { right: 12px; bottom: 12px; }
  .nosteo-bot__panel {
    position: fixed;
    right: 10px;
    left: 10px;
    bottom: 82px;
    width: auto;
    height: min(74svh, calc(100svh - 100px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nosteo-bot__panel,
  .nosteo-bot__launch,
  .nosteo-bot__launch-icon,
  .nosteo-bot__launch-close,
  .nosteo-bot__link,
  .nosteo-bot__chip,
  .nosteo-bot__send { transition: none; }
  .nosteo-bot__launch,
  .nosteo-bot__bubble,
  .nosteo-bot__dots i { animation: none; }
  .nosteo-bot__log { scroll-behavior: auto; }
}