/* ═══════════════════════════════════════════════════════════════════════════
   Automate Assistant — floating AI chat widget
   Loaded on every page. See js/assistant.js.

   Fully self-contained: this file defines its own tokens rather than reading
   the page's, because the homepage (css/style.css) is light and the ~90
   generated landing pages are dark with a different :root. Theme is chosen by
   data-theme on the root element, set from the script tag.

   Every rule is scoped under #aa-asst so nothing here can leak into the site,
   and the handful of inherited properties that would otherwise be captured by
   the host page's global selectors are reset explicitly on our own elements.
   ═══════════════════════════════════════════════════════════════════════════ */

#aa-asst {
  /* Light — the homepage. Mirrors css/style.css :root values so the widget
     reads as part of the same system rather than a bolted-on vendor pill. */
  --a-surface: #ffffff;
  --a-surface-2: #f6f8fa;
  --a-ink: #0d0d1a;
  --a-ink-2: #4a5568;
  --a-ink-3: #8b96a5;
  --a-line: #e2e8f0;
  --a-line-soft: #eef1f5;
  --a-user-bg: rgba(0, 196, 180, 0.10);
  --a-user-ink: #0b3d38;
  --a-shadow: 0 24px 70px rgba(9, 9, 15, 0.20), 0 2px 8px rgba(9, 9, 15, 0.06);

  /* Shared across both themes — the brand constants. */
  --a-graphite: #09090f;
  --a-graphite-2: #141424;
  --a-cyan: #00c4b4;
  --a-cyan-dark: #009d90;
  --a-cta: #ff7a1a;
  --a-cta-dark: #e86a0d;
  --a-cta-ink: #1a0c00;

  --a-radius: 18px;
  --a-radius-sm: 11px;
  --a-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --a-font-display: 'Plus Jakarta Sans', var(--a-font);

  position: fixed;
  inset: auto 0 0 auto;
  z-index: 8500;
  font-family: var(--a-font);
  -webkit-font-smoothing: antialiased;
}

#aa-asst[data-theme='dark'] {
  --a-surface: #111120;
  --a-surface-2: #1a1a2e;
  --a-ink: #f0f0f0;
  --a-ink-2: rgba(240, 240, 240, 0.66);
  --a-ink-3: rgba(240, 240, 240, 0.42);
  --a-line: rgba(0, 196, 180, 0.20);
  --a-line-soft: rgba(240, 240, 240, 0.08);
  --a-user-bg: rgba(0, 196, 180, 0.16);
  --a-user-ink: #d8fffb;
  --a-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 196, 180, 0.12);
}

#aa-asst *,
#aa-asst *::before,
#aa-asst *::after { box-sizing: border-box; }

/* Deliberately no `color: inherit` here. This selector carries an id, so it
   outranks every component class below and would repaint the launcher glyph
   in the host page's ink colour — dark on dark. Each control sets its own
   colour instead. */
#aa-asst button,
#aa-asst input,
#aa-asst textarea {
  font: inherit;
  margin: 0;
  letter-spacing: normal;
  text-transform: none;
}

#aa-asst :focus-visible {
  outline: 2px solid var(--a-cyan);
  outline-offset: 2px;
  border-radius: 6px;
}
/* The composer wrapper lights up on focus-within, so the textarea's own ring
   would just draw a second box inside the first. */
#aa-asst .aa-compose textarea:focus-visible { outline: none; }

/* ── Launcher ─────────────────────────────────────────────────────────────
   A graphite disc that grows into a pill. The site already has a green
   WhatsApp circle at bottom-right on the homepage, so this deliberately
   differs in shape and weight rather than becoming a second green dot.
   ─────────────────────────────────────────────────────────────────────── */

.aa-launch {
  position: fixed;
  right: 24px;
  bottom: 24px;
  height: 58px;
  min-width: 58px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--a-graphite-2), var(--a-graphite));
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(0, 196, 180, 0.35),
    0 10px 30px rgba(9, 9, 15, 0.35);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s ease, gap .22s ease;
  overflow: hidden;
}

.aa-launch:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--a-cyan), 0 14px 36px rgba(9,9,15,.42); }
.aa-launch:active { transform: translateY(0); }

/* The disc holds the glyph and a slow halo so the launcher reads as "live"
   without the attention-grabbing bounce most chat widgets use. */
.aa-launch-disc {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
}
.aa-launch-disc::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--a-cyan);
  opacity: .55;
  animation: aa-halo 3.4s ease-out infinite;
}
@keyframes aa-halo {
  0%   { transform: scale(.86); opacity: .55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.aa-launch-disc svg { width: 22px; height: 22px; position: relative; }

/* Label reveals on hover, and once on first visit via .is-nudging. */
.aa-launch-label {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-family: var(--a-font-display);
  font-weight: 600;
  font-size: 14.5px;
  transition: max-width .28s cubic-bezier(.2,.8,.3,1), opacity .2s ease, padding .28s ease;
  padding: 0;
}
.aa-launch:hover .aa-launch-label,
.aa-launch:focus-visible .aa-launch-label,
.aa-launch.is-nudging .aa-launch-label {
  max-width: 190px;
  opacity: 1;
  padding: 0 22px 0 2px;
}

.aa-launch-badge {
  position: absolute;
  top: 4px;
  right: 3px;
  background: var(--a-cta);
  color: var(--a-cta-ink);
  font-family: var(--a-font-display);
  font-weight: 800;
  font-size: 8.5px;
  letter-spacing: .06em;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
}

#aa-asst.is-open .aa-launch { transform: scale(.85); opacity: 0; pointer-events: none; }

/* ── Panel ────────────────────────────────────────────────────────────── */

.aa-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 400px;
  height: min(640px, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
  background: var(--a-surface);
  border-radius: var(--a-radius);
  box-shadow: var(--a-shadow);
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(.92) translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), opacity .16s ease;
}
#aa-asst.is-open .aa-panel {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* Header borrows the site nav's treatment — graphite at 96% with a blur —
   so the panel looks like it belongs to the page it sits on. */
.aa-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 12px 14px 16px;
  background: rgba(9, 9, 15, 0.96);
  backdrop-filter: blur(16px);
  color: #fff;
}
.aa-head-mark {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--a-cyan), var(--a-cyan-dark));
  color: var(--a-graphite);
}
.aa-head-mark svg { width: 18px; height: 18px; }
.aa-head-text { flex: 1 1 auto; min-width: 0; }
.aa-head-title {
  font-family: var(--a-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
.aa-head-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 2px;
}
.aa-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--a-cyan);
  box-shadow: 0 0 0 0 rgba(0, 196, 180, .6);
  animation: aa-pulse 2.6s infinite;
}
@keyframes aa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,196,180,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(0,196,180,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,196,180,0); }
}

.aa-icon-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.aa-icon-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.aa-icon-btn svg { width: 15px; height: 15px; }

/* A hairline under the header that fills while the assistant is answering —
   progress feedback without a spinner stealing attention from the text. */
.aa-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--a-cyan), transparent);
  transform: translateX(-100%);
  opacity: 0;
}
#aa-asst.is-busy .aa-head::after {
  opacity: 1;
  animation: aa-sweep 1.15s linear infinite;
}
@keyframes aa-sweep { to { transform: translateX(100%); } }

/* ── Transcript ───────────────────────────────────────────────────────── */

.aa-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Chrome's scroll anchoring re-points scrollTop when content above the
     anchor changes. A streaming reply rewrites its own body constantly, so
     anchoring fights the widget's own stick-to-bottom logic and drags a
     reader who scrolled back. This element manages its own scroll position. */
  overflow-anchor: none;
  padding: 18px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--a-line) transparent;
}
.aa-log::-webkit-scrollbar { width: 8px; }
.aa-log::-webkit-scrollbar-thumb { background: var(--a-line); border-radius: 4px; }

.aa-msg { display: flex; gap: 10px; animation: aa-rise .22s cubic-bezier(.2,.8,.3,1); }
@keyframes aa-rise { from { opacity: 0; transform: translateY(6px); } }

/* Assistant messages are flush text with a small mark, not a bubble. Reads as
   a person talking rather than a toy chatbot, which suits a consultancy. */
.aa-msg-mark {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--a-cyan), var(--a-cyan-dark));
  color: var(--a-graphite);
}
.aa-msg-mark svg { width: 14px; height: 14px; }

.aa-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--a-ink);
  overflow-wrap: anywhere;
}
.aa-body p { margin: 0 0 .62em; }
.aa-body p:last-child { margin-bottom: 0; }
.aa-body strong { font-weight: 650; }
.aa-body ul { margin: .3em 0 .62em; padding-left: 1.15em; }
.aa-body li { margin-bottom: .3em; }
.aa-body a {
  color: var(--a-cyan-dark);
  font-weight: 550;
  text-underline-offset: 2px;
}
#aa-asst[data-theme='dark'] .aa-body a { color: var(--a-cyan); }

.aa-msg.is-user { justify-content: flex-end; }
.aa-msg.is-user .aa-body {
  flex: 0 1 auto;
  background: var(--a-user-bg);
  color: var(--a-user-ink);
  border: 1px solid var(--a-line);
  padding: 9px 13px;
  border-radius: var(--a-radius-sm) var(--a-radius-sm) 3px var(--a-radius-sm);
  font-size: 14px;
}

/* Typing indicator — replaced in place by the first streamed token. */
.aa-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.aa-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--a-ink-3);
  animation: aa-bounce 1.1s infinite ease-in-out;
}
.aa-typing i:nth-child(2) { animation-delay: .16s; }
.aa-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes aa-bounce { 0%,60%,100% { transform: translateY(0); opacity:.45 } 30% { transform: translateY(-4px); opacity:1 } }

/* ── Action buttons parsed off the end of a reply ─────────────────────── */

.aa-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.aa-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--a-line);
  background: var(--a-surface-2);
  color: var(--a-ink);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.aa-act:hover { border-color: var(--a-cyan); transform: translateY(-1px); }
.aa-act.is-primary {
  background: linear-gradient(140deg, var(--a-cta), var(--a-cta-dark));
  border-color: transparent;
  color: var(--a-cta-ink);
  font-weight: 650;
}
.aa-act.is-primary:hover { border-color: transparent; }
.aa-act svg { width: 13px; height: 13px; }

/* ── Suggested questions ──────────────────────────────────────────────── */

.aa-chips {
  flex: 0 0 auto;
  display: flex;
  gap: 7px;
  padding: 10px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.aa-chips::-webkit-scrollbar { display: none; }
.aa-chips:empty { display: none; }
.aa-chip {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--a-line);
  background: transparent;
  color: var(--a-ink-2);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.aa-chip:hover { border-color: var(--a-cyan); color: var(--a-ink); }

/* ── Handover card ────────────────────────────────────────────────────── */

.aa-hand {
  border: 1px solid var(--a-line);
  border-left: 3px solid var(--a-cyan);
  border-radius: var(--a-radius-sm);
  background: var(--a-surface-2);
  padding: 14px;
  margin-top: 4px;
}
.aa-hand h4 {
  margin: 0 0 3px;
  font-family: var(--a-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--a-ink);
}
.aa-hand p { margin: 0 0 11px; font-size: 12.5px; color: var(--a-ink-2); line-height: 1.5; }
.aa-hand input {
  display: block;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 7px;
  border: 1px solid var(--a-line);
  border-radius: 9px;
  background: var(--a-surface);
  color: var(--a-ink);
  font-size: 13.5px;
}
.aa-hand input::placeholder { color: var(--a-ink-3); }
.aa-hand input:focus { outline: none; border-color: var(--a-cyan); }
.aa-hand-row { display: flex; gap: 7px; margin-top: 4px; }
.aa-hand-row > * { flex: 0 1 auto; justify-content: center; white-space: nowrap; }
.aa-hand-row > .is-primary { flex: 1 1 auto; }
.aa-hand-note { margin: 9px 0 0; font-size: 11px; color: var(--a-ink-3); }
.aa-hand.is-sent { border-left-color: var(--a-cta); }

/* ── Composer ─────────────────────────────────────────────────────────── */

.aa-foot {
  flex: 0 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--a-line-soft);
  background: var(--a-surface);
}
.aa-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--a-line);
  border-radius: 14px;
  padding: 7px 7px 7px 13px;
  background: var(--a-surface-2);
  transition: border-color .15s ease;
}
.aa-compose:focus-within { border-color: var(--a-cyan); }
.aa-compose textarea {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--a-ink);
  font-size: 14px;
  line-height: 1.45;
  height: 34px;          /* one row; JS grows it from here */
  max-height: 104px;
  overflow-y: auto;
  padding: 5px 0;
}
.aa-compose textarea::placeholder { color: var(--a-ink-3); }
.aa-send {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--a-line);
  color: var(--a-ink-3);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .15s ease;
}
.aa-send svg { width: 16px; height: 16px; }
.aa-send.is-ready {
  background: linear-gradient(140deg, var(--a-cyan), var(--a-cyan-dark));
  color: #fff;
}
.aa-send.is-ready:hover { transform: translateY(-1px); }
.aa-send:disabled { cursor: default; transform: none; }

.aa-legal {
  margin: 9px 2px 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--a-ink-3);
  text-align: center;
}

/* ── Mobile: full sheet ───────────────────────────────────────────────── */

@media (max-width: 560px) {
  .aa-panel {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100dvh;          /* dvh, not vh — avoids the iOS URL-bar jump */
    max-height: 100dvh;
    border-radius: 0;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.2,.8,.3,1), opacity .16s ease;
  }
  #aa-asst.is-open .aa-panel { transform: none; }
  .aa-launch { right: 16px; bottom: 16px; }
  .aa-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  /* Below the iOS zoom-on-focus threshold. */
  .aa-compose textarea { font-size: 16px; }
}

/* Reduced motion: keep state changes, drop everything decorative. */
@media (prefers-reduced-motion: reduce) {
  #aa-asst *,
  #aa-asst *::before,
  #aa-asst *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .aa-launch-disc::after { display: none; }
}

/* Printing a page shouldn't print the widget. */
@media print { #aa-asst { display: none !important; } }