/* AfterCall Assistant (2026-10-16, templates/site/_assistant.html).
   A pill button in the bottom corner (a round one on phones) opens a panel:
   a floating card on laptops, the full screen on phones. Built on the site's
   own tokens, so it follows dark and light. On this page the back-to-top
   button moves to the opposite bottom corner, level with the chat button.
   --aca-lift (set on body) raises both above the cookie notice and the
   phone bar. */
.aca { --aca-gap: 18px; font: 400 15px/1.55 var(--sans); }
.aca *, .aca *::before, .aca *::after { box-sizing: border-box; }
:where(.aca) button { font: inherit; color: inherit; cursor: pointer; }   /* no specificity: each button sets its own */
.aca svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the button */
.aca-fab { position: fixed; z-index: 85; inset-inline-end: var(--aca-gap); bottom: calc(var(--aca-gap) + var(--aca-lift, 0px)); display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 15px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 14.5px; letter-spacing: -.005em; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px -10px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s var(--ease), transform .5s var(--ease), bottom .25s var(--ease); }
.aca.ready .aca-fab { opacity: 1; transform: none; }
.aca-fab:hover { transform: translateY(-2px); }
.aca-fab:active { transform: scale(.97); }
.aca-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.aca-fab svg { width: 18px; height: 18px; stroke-width: 1.6; }
.aca-fab svg path:first-child { fill: currentColor; stroke: none; }
.aca-fab svg path:last-child { fill: currentColor; stroke: none; opacity: .7; }
body.aca-open .aca-fab { opacity: 0; pointer-events: none; transform: scale(.9); }
/* follow the cookie notice and the home page's phone bar, as the back-to-top button does */
body.ac-has-cookie { --aca-lift: calc(var(--ac-cookie-h, 0px) + 12px); }
/* back-to-top in the other bottom corner, level with the pill. :root lifts
   this past home.css's own phone-bar rule for the same button. */
:root body:has(.aca) .ac-top { inset-inline-end: auto; inset-inline-start: 18px; bottom: calc(18px + var(--aca-lift, 0px) + 1px); }

/* ---------- the panel */
.aca-panel { position: fixed; z-index: 95; inset-inline-end: var(--aca-gap); bottom: var(--aca-gap); display: flex; flex-direction: column; width: min(400px, calc(100vw - 2 * var(--aca-gap))); height: min(640px, calc(100dvh - 2 * var(--aca-gap))); border-radius: 22px; background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-2), 0 30px 80px -24px rgba(0, 0, 0, .55); overflow: hidden; opacity: 0; transform: translateY(14px) scale(.98); transform-origin: bottom right; transition: opacity .28s var(--ease), transform .4s var(--ease); }
[dir="rtl"] .aca-panel { transform-origin: bottom left; }
.aca-panel[hidden] { display: none; }
.aca-panel.in { opacity: 1; transform: none; }

.aca-head { display: flex; align-items: center; gap: 10px; flex: none; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--rule); }
.aca-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--ink); color: var(--paper); font: 700 14px/1 var(--brand); }
.aca-id { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.aca-id b { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.aca-id small { font: 500 10.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.aca-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); transition: background .2s, color .2s; }
.aca-icon:hover { background: var(--paper-2); color: var(--ink); }
.aca-icon:focus-visible, .aca-send:focus-visible, .aca-stop:focus-visible, .aca-chip:focus-visible, .aca-act:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.aca-icon svg { width: 17px; height: 17px; }

/* ---------- the conversation */
.aca-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; scrollbar-width: thin; }
.aca-log:focus { outline: none; }
.aca-hello { padding: 18px 4px 6px; animation: aca-rise .5s var(--ease) both; }
.aca-hello h3 { margin: 0; font: 600 22px/1.15 var(--sans); letter-spacing: -.035em; color: var(--ink); }
.aca-hello p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-3); }
.aca-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.aca-chip { padding: 8px 13px; border: 0; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); font-size: 13.5px; color: var(--ink-2); text-align: start; transition: box-shadow .2s, color .2s; }
.aca-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-4); }

.aca-msg { display: flex; margin: 0 0 14px; animation: aca-rise .35s var(--ease) both; }
.aca-msg.me { justify-content: flex-end; }
.aca-bub { max-width: 88%; min-width: 0; overflow-wrap: anywhere; }
.aca-msg.me .aca-bub { padding: 9px 14px; border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--paper); white-space: pre-wrap; }
[dir="rtl"] .aca-msg.me .aca-bub { border-radius: 18px 18px 18px 6px; }
.aca-msg.ai .aca-bub { max-width: 100%; color: var(--ink); }
.aca-txt > :first-child { margin-top: 0; }
.aca-txt > :last-child { margin-bottom: 0; }
.aca-txt p { margin: 0 0 9px; }
.aca-txt ul, .aca-txt ol { margin: 0 0 9px; padding-inline-start: 20px; }
.aca-txt li { margin: 3px 0; }
.aca-txt li::marker { color: var(--ink-3); }
.aca-txt strong { font-weight: 600; }
.aca-txt a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 3px; }
.aca-txt a:hover { text-decoration-color: var(--ink); }
.aca-txt code { padding: 1px 5px; border-radius: 5px; background: var(--paper-2); font: 13px/1.5 var(--mono); }
.aca-txt pre { margin: 0 0 9px; padding: 12px 14px; border-radius: 12px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); overflow-x: auto; }
.aca-txt pre code { padding: 0; background: none; font-size: 12.5px; white-space: pre; }
.aca-note { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.aca-acts { display: flex; gap: 2px; margin: 6px 0 0 -8px; opacity: 0; transition: opacity .2s; }
.aca-msg.ai:hover .aca-acts, .aca-msg.ai:focus-within .aca-acts, .aca-msg.ai.last .aca-acts { opacity: 1; }
.aca-act { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; border-radius: 999px; background: none; font-size: 12.5px; color: var(--ink-3); transition: background .2s, color .2s; }
.aca-act:hover { background: var(--paper-2); color: var(--ink); }
.aca-act svg { width: 14px; height: 14px; }
.aca-err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 11px 14px; border-radius: 14px; border: 1px dashed var(--rule-2); font-size: 14px; color: var(--ink-2); }
.aca-err .aca-act { margin: 0; height: 30px; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink); }

/* the wait before the first words: three dots */
.aca-dots { display: inline-flex; gap: 5px; padding: 10px 2px; }
.aca-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: aca-dot 1.2s ease-in-out infinite; }
.aca-dots i:nth-child(2) { animation-delay: .15s; }
.aca-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aca-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes aca-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- the composer */
.aca-form { flex: none; padding: 10px 12px 10px; border-top: 1px solid var(--rule); }
.aca-box { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 18px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .2s; }
.aca-box:focus-within { box-shadow: inset 0 0 0 1px var(--ink-4); }
.aca-box textarea { flex: 1; min-width: 0; max-height: 140px; margin: 0; padding: 7px 0; border: 0; background: none; resize: none; outline: none; font: 400 15px/1.45 var(--sans); color: var(--ink); }
.aca-box textarea::placeholder { color: var(--ink-4); }
.aca-send, .aca-stop { display: grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); transition: opacity .2s, transform .2s; }
.aca-send svg { width: 17px; height: 17px; stroke-width: 2; }
.aca-send[disabled] { opacity: .25; cursor: default; }
.aca-send:not([disabled]):active, .aca-stop:active { transform: scale(.94); }
.aca-stop i { width: 11px; height: 11px; border-radius: 2px; background: currentColor; }
.aca-send[hidden], .aca-stop[hidden] { display: none; }
.aca-fine { margin: 7px 4px 0; font-size: 11px; line-height: 1.4; color: var(--ink-4); text-align: center; }

/* ---------- phones: a round button, the panel takes the screen */
@media (max-width: 600px) {
  .aca { --aca-gap: 12px; }
  .aca-fab { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .aca-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .aca-fab svg { width: 22px; height: 22px; }
  :root body:has(.aca) .ac-top { inset-inline-start: 12px; bottom: calc(12px + var(--aca-lift, 0px) + 4px); }   /* level with the round button's centre */
  .aca-panel { inset: 0; width: auto; height: 100dvh; border-radius: 0; box-shadow: none; transform: translateY(24px); }
  .aca-head { padding-top: max(12px, env(safe-area-inset-top)); }
  .aca-form { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .aca-box textarea { font-size: 16px; }   /* stops iOS zooming in on focus */
  html.aca-lock, html.aca-lock body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .aca-fab, .aca-panel { transition: opacity .2s; transform: none !important; }
  .aca-hello, .aca-msg { animation: none; }
  .aca-dots i { animation-duration: 2.4s; }
}