/* ==========================================================================
   MOBILSISTEMI — assistant.css
   The help widget: launcher bottom-left, panel opening upward.

   Everything here is built by assistant.js, so none of it exists without
   JavaScript — which is correct: a chat panel that cannot answer is worse
   than no chat panel. The contact page and the phone numbers in the footer
   are the path that always works.
   ========================================================================== */

.assistant{
  position: fixed;
  left: var(--fixed-gap);
  bottom: var(--fixed-bottom);
  z-index: var(--fixed-z-widget);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

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

.assistant__launcher{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 0;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  border-radius: var(--r-md);        /* fallback before notch.js */
  box-shadow: var(--shadow-2);
  transition: background-color var(--dur-sm) linear, color var(--dur-sm) linear;
}
.assistant__launcher:hover{ background: var(--orange); color: var(--ink); }
.assistant__launcher:hover .assistant__icon{ color: var(--ink); }

.assistant__icon{
  display: grid;
  place-items: center;
  color: var(--orange);
  transition: color var(--dur-sm) linear;
}
.assistant__icon svg{ width: 18px; height: 18px; display: block; }

.assistant__label{
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: var(--track-mono-label);
  text-transform: uppercase;
}

/* ---------- the one-time nudge ---------- */

.assistant__nudge{
  order: -1;                          /* above the launcher */
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 15rem;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background: var(--paper);
  color: var(--ink);
  border-left: 3px solid var(--red);
  box-shadow: var(--shadow-2);
  font: 400 0.8125rem/1.45 var(--font-body);
}
.assistant__nudge-close{
  flex: none;
  width: 28px; height: 28px;
  border: 0;
  background: none;
  color: var(--muted-ink);
  cursor: pointer;
  font-size: .75rem;
  line-height: 1;
}
.assistant__nudge-close:hover{ color: var(--ink); }

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

.assistant__panel{
  order: -2;                          /* opens upward, above the nudge slot */
  display: none;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - var(--fixed-gap) * 2);
  height: 520px;
  max-height: calc(100svh - var(--fixed-bottom) - var(--s-8));
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.assistant.is-open .assistant__panel{ display: flex; }
.assistant.is-open .assistant__nudge{ display: none; }

.assistant__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: 3px solid var(--red);
}
.assistant__title{
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: var(--track-mono-label);
  text-transform: uppercase;
}
.assistant__close{
  width: 32px; height: 32px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-size: .875rem;
  line-height: 1;
}
.assistant__close:hover{ color: var(--orange-deep); }

/* Permanent, and permanently visible: it is the sentence that stops this
   being mistaken for a person or for a language model. */
.assistant__note{
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  font: 400 0.6875rem/1.5 var(--font-mono);
  color: var(--muted-ink);
}

/* ---------- conversation ---------- */

.assistant__list{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: var(--s-4);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.assistant__msg{ display: flex; }
.assistant__msg--me{ justify-content: flex-end; }
.assistant__msg--bot{ justify-content: flex-start; }

.assistant__bubble{
  max-width: 88%;
  padding: var(--s-3) var(--s-4);
  font: 400 0.875rem/1.55 var(--font-body);
}
.assistant__msg--me .assistant__bubble{
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
}
.assistant__msg--bot .assistant__bubble{
  background: var(--paper-warm);
  color: var(--ink);
  border-radius: var(--r-md);        /* fallback before notch.js */
}
.assistant__bubble strong{ font-weight: 600; }

.assistant__links{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.assistant__link{
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: var(--track-mono-ui);
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--orange);
  padding-bottom: 3px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.assistant__link:hover{ color: var(--orange-deep); }

/* ---------- chips ---------- */

.assistant__chips{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.assistant__chip{
  min-height: 34px;
  padding: 6px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 400 0.75rem/1.3 var(--font-body);
  text-align: left;
  transition: border-color var(--dur-sm) linear, background-color var(--dur-sm) linear;
}
.assistant__chip:hover{ border-color: var(--orange); background: var(--paper-warm); }

/* ---------- typing ---------- */

.assistant__typing{ display: flex; gap: 4px; align-items: center; }
/* One pulse, not an infinite loop. The indicator is on screen for under half
   a second before the answer replaces it, so a loop never completed a second
   cycle anyway — and this is now the only animation on the site with no
   `infinite` in it because there are none left. */
.assistant__typing i{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted-ink);
  animation: assistant-blink var(--dur-lg) var(--ease-in-out) forwards;
}
.assistant__typing i:nth-child(2){ animation-delay: var(--dur-xs); }
.assistant__typing i:nth-child(3){ animation-delay: var(--dur-sm); }
@keyframes assistant-blink{
  from{ opacity: .25; }
  55%{ opacity: 1; }
  to{ opacity: .35; }
}

/* ---------- input ---------- */

.assistant__form{
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--line);
}
.assistant__input{
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink);
  font: 400 0.875rem/1.4 var(--font-body);
}
.assistant__input:focus{ border-color: var(--orange); }
.assistant__input::placeholder{ color: var(--muted-ink); }

.assistant__send{
  flex: none;
  width: 44px;
  min-height: 44px;
  border: 0;
  background: var(--orange);
  /* Ink on orange, 6.22:1 — the pairing validated in the styleguide.
     White on orange is 2.62:1 and is not used anywhere on this site. */
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--r-md);        /* fallback before notch.js */
  font-size: 1rem;
  line-height: 1;
}
.assistant__send:hover{ background: var(--orange-deep); color: var(--paper); }

/* ---------- mobile: a full-height sheet ---------- */

@media (max-width: 560px){
  .assistant__panel{
    position: fixed;
    left: 0; right: 0; bottom: 0; top: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
  }
  .assistant.is-open{ z-index: var(--fixed-z-overlay); }
}

/* Below 400px the label is dropped and the launcher becomes a square icon,
   so it and back-to-top both fit on one line with room between them. */
@media (max-width: 400px){
  .assistant__label{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .assistant__launcher{
    width: 44px;
    padding: 0;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce){
  .assistant__typing i{ animation: none; opacity: .5; }
  .assistant__launcher,
  .assistant__chip,
  .assistant__icon{ transition: none; }
}